unstyled prototype

src/app/components/Admin/SuggestDialog.vue

@@ -0,0 +1,36 @@
+<template>
+  <BaseDialog :trigger-class="triggerClass">
+    <template #trigger><slot /></template>
+    <template #title>{{ $t('admin.config.suggest') }}</template>
+    <template #description>
+      <p v-if="status === 'pending'">
+        {{ $t('general.loading') }}
+      </p>
+      <BaseSelect v-else v-model="selected" :options="values" />
+    </template>
+    <template #actions>
+      <DialogClose as-child>
+        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+      </DialogClose>
+      <DialogClose as-child>
+        <BaseButton @click="$emit('change', selected)">
+          {{ $t('dialog.change') }}
+        </BaseButton>
+      </DialogClose>
+    </template>
+  </BaseDialog>
+</template>
+
+<script lang="ts" setup>
+defineEmits(['change']);
+defineProps<{
+  triggerClass?: string;
+}>();
+
+const { data, status } = useFetch('/api/admin/ip-info', {
+  method: 'get',
+});
+
+const selected = ref<string>();
+const values = toRef(data.value);
+</script>

src/app/components/Base/Select.vue

@@ -0,0 +1,55 @@
+<template>
+  <SelectRoot v-model="selected">
+    <SelectTrigger
+      class="text-grass11 hover:bg-mauve3 data-[placeholder]:text-green9 inline-flex h-[35px] min-w-[160px] items-center justify-between gap-[5px] rounded bg-white px-[15px] text-[13px] leading-none shadow-[0_2px_10px] shadow-black/10 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+      aria-label="Customise options"
+    >
+      <SelectValue placeholder="Select..." />
+      <IconsArrowDown class="h-3.5 w-3.5" />
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        class="data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-[100] min-w-[160px] rounded bg-white shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform]"
+        :side-offset="5"
+      >
+        <SelectScrollUpButton
+          class="text-violet11 flex h-[25px] cursor-default items-center justify-center bg-white"
+        >
+          <Icon icon="radix-icons:chevron-up" />
+        </SelectScrollUpButton>
+
+        <SelectViewport class="p-[5px]">
+          <SelectItem
+            v-for="(option, index) in options"
+            :key="index"
+            class="text-grass11 data-[disabled]:text-mauve8 data-[highlighted]:bg-green9 data-[highlighted]:text-green1 relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[35px] text-[13px] leading-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none"
+            :value="option.value"
+          >
+            <SelectItemIndicator
+              class="absolute left-0 inline-flex w-[25px] items-center justify-center"
+            >
+              <Icon icon="radix-icons:check" />
+            </SelectItemIndicator>
+            <SelectItemText>
+              {{ option.value }} - {{ option.label }}
+            </SelectItemText>
+          </SelectItem>
+        </SelectViewport>
+
+        <SelectScrollDownButton
+          class="text-violet11 flex h-[25px] cursor-default items-center justify-center bg-white"
+        >
+          <Icon icon="radix-icons:chevron-down" />
+        </SelectScrollDownButton>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  options: { label: string; value: string }[];
+}>();
+const selected = defineModel<string>();
+</script>

src/app/components/Form/HostField.vue

@@ -15,12 +15,14 @@
       type="text"
       class="w-full"
     />
-    <BaseButton type="button" @click="data = ''">
-      <div class="flex items-center gap-3">
-        <IconsSparkles class="w-4" />
-        <span>Suggest</span>
-      </div>
-    </BaseButton>
+    <AdminSuggestDialog @change="data = $event">
+      <BaseButton as="span">
+        <div class="flex items-center gap-3">
+          <IconsSparkles class="w-4" />
+          <span>{{ $t('admin.config.suggest') }}</span>
+        </div>
+      </BaseButton>
+    </AdminSuggestDialog>
   </div>
 </template>
 

src/i18n/locales/en.json

@@ -32,7 +32,8 @@
     "port": "Port",
     "yes": "Yes",
     "no": "No",
-    "confirmPassword": "Confirm Password"
+    "confirmPassword": "Confirm Password",
+    "loading": "Loading"
   },
   "setup": {
     "welcome": "Welcome to your first setup of wg-easy",
@@ -147,7 +148,8 @@
       "allowedIpsDesc": "Allowed IPs clients will use (global config)",
       "dnsDesc": "DNS server clients will use (global config)",
       "mtuDesc": "MTU clients will use (only for new clients)",
-      "persistentKeepaliveDesc": "Interval in seconds to send keepalives to the server. 0 = disabled (only for new clients)"
+      "persistentKeepaliveDesc": "Interval in seconds to send keepalives to the server. 0 = disabled (only for new clients)",
+      "suggest": "Suggest"
     },
     "interface": {
       "cidrSuccess": "Changed CIDR",