add radix vue, improve ui

src/app/components/ui/UserMenu.vue

@@ -1,58 +1,50 @@
 <template>
+  <DropdownMenuRoot v-model:open="toggleState">
+    <DropdownMenuTrigger>
       <button
         class="flex items-center pe-1 font-medium text-sm text-gray-400 rounded-full hover:text-red-800 dark:hover:text-red-800 md:me-0 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-neutral-400"
         type="button"
-    @click.prevent="toggleMenu"
       >
-    <IconsAvatar class="w-8 h-8 me-2 rounded-full" />
+        <AvatarRoot
-    {{ authStore.userData?.name }}
+          class="inline-flex h-8 w-8 select-none items-center justify-center overflow-hidden rounded-full align-middle mr-2"
-    <svg
+        >
-      class="w-2.5 h-2.5 ms-3"
+          <AvatarFallback
-      aria-hidden="true"
+            class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
-      xmlns="http://www.w3.org/2000/svg"
+            :delay-ms="600"
-      fill="none"
-      viewBox="0 0 10 6"
           >
-      <path
+            {{ fallbackName }}
-        stroke="currentColor"
+          </AvatarFallback>
-        stroke-linecap="round"
+        </AvatarRoot>
-        stroke-linejoin="round"
+        {{ authStore.userData?.name }}
-        stroke-width="2"
-        d="m1 1 4 4 4-4"
-      />
-    </svg>
       </button>
+    </DropdownMenuTrigger>
 
-  <!-- Dropdown menu -->
+    <DropdownMenuPortal>
-  <div
+      <DropdownMenuContent
-    v-show="menuOpen"
+        :side-offset="5"
-    class="z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-neutral-700 dark:divide-neutral-800"
+        class="z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-neutral-700 dark:divide-neutral-800 text-gray-700 dark:text-gray-200"
       >
-    <div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
+        <DropdownMenuItem>
           <div class="truncate">{{ authStore.userData?.name }}</div>
           <div class="truncate">@{{ authStore.userData?.username }}</div>
-    </div>
+        </DropdownMenuItem>
-    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+        <DropdownMenuItem>
-      <li>
           <NuxtLink
             to="/"
             class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-          @click="closeMenu"
           >
             Clients
           </NuxtLink>
-      </li>
+        </DropdownMenuItem>
-      <li v-if="authStore.userData?.role === 'ADMIN'">
+        <DropdownMenuItem v-if="authStore.userData?.role === 'ADMIN'">
           <NuxtLink
             to="/admin"
             class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-          @click="closeMenu"
           >
             Admin Panel
           </NuxtLink>
-      </li>
+        </DropdownMenuItem>
-    </ul>
+        <DropdownMenuItem>
-    <div class="py-2">
           <button
             class="flex items-center gap-2 w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
             @click.prevent="logout"
@@ -60,21 +52,19 @@
             <IconsLogout class="h-5" />
             {{ $t('logout') }}
           </button>
-    </div>
+        </DropdownMenuItem>
-  </div>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
 </template>
 
 <script setup lang="ts">
 const authStore = useAuthStore();
-const menuOpen = ref(false);
+const toggleState = ref(false);
 
-function toggleMenu() {
+watchEffect(() => {
-  menuOpen.value = !menuOpen.value;
+  console.log(toggleState);
-}
+});
-
-function closeMenu() {
-  menuOpen.value = false;
-}
 
 async function logout() {
   try {
@@ -87,4 +77,12 @@ async function logout() {
     }
   }
 }
+
+const fallbackName = computed(() => {
+  return authStore.userData?.name
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase())
+    .slice(0, 2)
+    .join('');
+});
 </script>

src/app/layouts/Header.vue

@@ -7,9 +7,10 @@
           : 'flex flex-col-reverse xxs:flex-row flex-auto items-center gap-3'
       "
     >
+      <NuxtLink to="/" class="flex-grow self-start mb-4">
         <h1
           v-if="isLoginPage"
-        class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4"
+          class="text-4xl dark:text-neutral-200 font-medium"
         >
           <img
             src="/logo.png"
@@ -17,6 +18,7 @@
             class="inline align-middle dark:bg mr-2"
           /><span class="align-middle">WireGuard</span>
         </h1>
+      </NuxtLink>
       <div class="flex items-center grow-0 gap-3 self-end xxs:self-center">
         <!-- Dark / light theme -->
         <button

src/app/pages/admin.vue

@@ -1,26 +1,28 @@
 <template>
-  <div class="min-h-screen">
+  <div>
     <div class="container mx-auto p-4">
       <div class="flex">
-        <!-- Sidebar -->
         <div class="w-64 bg-white dark:bg-neutral-700 rounded-lg p-4 mr-4">
+          <NuxtLink to="/admin">
             <h2 class="text-xl font-bold dark:text-neutral-200 mb-4">
               Admin Panel
             </h2>
-          <ul class="space-y-2">
+          </NuxtLink>
-            <li
+          <div class="space-y-2 flex flex-col">
+            <NuxtLink
               v-for="(item, index) in menuItems"
               :key="index"
-              :class="{ 'bg-gray-700': activeMenuItem?.id === item.id }"
+              :to="`/admin/${item.id}`"
-              class="font-medium dark:text-neutral-200 p-2 rounded cursor-pointer hover:bg-red-800 transition-colors duration-200"
+            >
-              @click="router.push(`/admin/${item.id}`)"
+              <BaseButton
+                class="font-medium dark:text-neutral-200 p-2 rounded cursor-pointer hover:bg-red-800 transition-colors duration-200 w-full"
               >
                 {{ item.name }}
-            </li>
+              </BaseButton>
-          </ul>
+            </NuxtLink>
+          </div>
         </div>
 
-        <!-- Main Content -->
         <div
           class="flex-1 bg-white dark:text-neutral-200 dark:bg-neutral-700 rounded-lg p-6"
         >
@@ -36,12 +38,11 @@
 const authStore = useAuthStore();
 authStore.update();
 
-const router = useRouter();
 const route = useRoute();
 
 const menuItems = [
+  { id: 'features', name: 'Features' },
   { id: 'user', name: 'User' },
-  { id: 'clients', name: 'Clients' },
   { id: 'server', name: 'Server' },
 ];
 

src/app/pages/admin/clients.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <div class="flex items-center space-x-4">
-      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
-      <div>
-        <h3 class="text-xl font-semibold">John Doe</h3>
-        <p class="text-gray-400">john.doe@example.com</p>
-      </div>
-    </div>
-    <div class="space-y-4">
-      <div>
-        <label class="block text-sm font-medium mb-1">Username</label>
-        <input
-          v-model="username"
-          type="text"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-      <div>
-        <label class="block text-sm font-medium mb-1">Email</label>
-        <input
-          v-model="email"
-          type="email"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const username = ref();
-const email = ref();
-</script>

src/app/pages/admin/features.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex flex-col">
+    <div v-for="feature in featuresData" :key="feature.name" class="space-y-2">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-lg font-medium text-gray-900 dark:text-neutral-200">
+            {{ feature.name }}
+          </h3>
+          <p class="text-sm text-gray-500 dark:text-neutral-300">
+            {{ feature.description }}
+          </p>
+        </div>
+        <SwitchRoot
+          :checked="feature.enabled"
+          class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-800"
+          :class="feature.enabled ? 'bg-red-800' : 'bg-gray-200'"
+          @update:checked="toggleFeature(feature)"
+        >
+          <SwitchThumb
+            class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+            :class="feature.enabled ? 'translate-x-6' : 'translate-x-1'"
+          />
+        </SwitchRoot>
+      </div>
+    </div>
+    <BaseButton class="self-end">Save</BaseButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+const globalStore = useGlobalStore();
+
+const featuresData = ref([
+  {
+    name: 'Traffic Stats',
+    description: 'Show more detailed Statistics about Client Traffic',
+    enabled: globalStore.features.trafficStats.enabled,
+  },
+  {
+    name: 'Sort Clients',
+    description: 'Be able to sort Clients by Name',
+    enabled: globalStore.features.sortClients.enabled,
+  },
+  {
+    name: 'One Time Links',
+    description: 'Be able to generate One Time Link to download Config',
+    enabled: globalStore.features.oneTimeLinks.enabled,
+  },
+  {
+    name: 'Client Expiration',
+    description: 'Be able to set Date when Client will be disabled',
+    enabled: globalStore.features.clientExpiration.enabled,
+  },
+]);
+
+function toggleFeature(feature: (typeof featuresData)['value'][number]) {
+  const feat = featuresData.value.find((v) => v.name === feature.name);
+  if (!feat) {
+    return;
+  }
+  feat.enabled = !feat.enabled;
+}
+</script>

src/app/pages/admin/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="space-y-6">This is a test</div>
+  <div>
+    This is the Admin Panel. Your are running wg-easy
+    {{ globalStore.currentRelease }}
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const globalStore = useGlobalStore();
+</script>

src/app/pages/admin/server.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <div class="flex items-center space-x-4">
-      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
-      <div>
-        <h3 class="text-xl font-semibold">John Doe</h3>
-        <p class="text-gray-400">john.doe@example.com</p>
-      </div>
-    </div>
-    <div class="space-y-4">
-      <div>
-        <label class="block text-sm font-medium mb-1">Username</label>
-        <input
-          v-model="username"
-          type="text"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-      <div>
-        <label class="block text-sm font-medium mb-1">Email</label>
-        <input
-          v-model="email"
-          type="email"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const username = ref();
-const email = ref();
-</script>

src/app/pages/admin/user.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <div class="flex items-center space-x-4">
-      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
-      <div>
-        <h3 class="text-xl font-semibold">John Doe</h3>
-        <p class="text-gray-400">john.doe@example.com</p>
-      </div>
-    </div>
-    <div class="space-y-4">
-      <div>
-        <label class="block text-sm font-medium mb-1">Username</label>
-        <input
-          v-model="username"
-          type="text"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-      <div>
-        <label class="block text-sm font-medium mb-1">Email</label>
-        <input
-          v-model="email"
-          type="email"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const username = ref();
-const email = ref();
-</script>

src/nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
     '@nuxtjs/tailwindcss',
     '@pinia/nuxt',
     '@eschricht/nuxt-color-mode',
+    'radix-vue/nuxt',
   ],
   colorMode: {
     preference: 'system',

src/package.json

@@ -34,6 +34,7 @@
     "nuxt": "^3.13.0",
     "pinia": "^2.2.2",
     "qrcode": "^1.5.4",
+    "radix-vue": "^1.9.5",
     "semver": "^7.6.3",
     "tailwindcss": "^3.4.10",
     "timeago.js": "^4.0.2",

src/pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
+      radix-vue:
+        specifier: ^1.9.5
+        version: 1.9.5([email protected]([email protected]))
       semver:
         specifier: ^7.6.3
         version: 7.6.3
@@ -751,6 +754,18 @@ packages:
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
 
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-ammH7T3vyCx7pmm9OF19Wc42zrGnUw0QvLoidgypWsCLJMtGXEwY7paYIHO+K+oLC3mbWpzIHzeTVienYenlNg==}
+
   '@humanwhocodes/[email protected]':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
@@ -759,6 +774,12 @@ packages:
     resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
     engines: {node: '>=18.18'}
 
+  '@internationalized/[email protected]':
+    resolution: {integrity: sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==}
+
+  '@internationalized/[email protected]':
+    resolution: {integrity: sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==}
+
   '@intlify/[email protected]':
     resolution: {integrity: sha512-UovJl10oBIlmYEcWw+VIHdKY5Uv5sdPG0b/b6bOYxGLln3UwB75+2dlc0F3Fsa0RhoznQ5Rp589/BZpABpE4Xw==}
     engines: {node: '>= 14.16'}
@@ -1209,11 +1230,22 @@ packages:
     peerDependencies:
       eslint: '>=8.40.0'
 
+  '@swc/[email protected]':
+    resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
+
   '@tailwindcss/[email protected]':
     resolution: {integrity: sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20'
 
+  '@tanstack/[email protected]':
+    resolution: {integrity: sha512-ND5dfsU0n9F4gROzwNNDJmg6y8n9pI8YWxtgbfJ5UcNn7Hx+MxEXtXcQ189tS7sh8pmCObgz2qSiyRKTZxT4dg==}
+
+  '@tanstack/[email protected]':
+    resolution: {integrity: sha512-OSK1fkvz4GaBhF80KVmBsJZoMI9ncVaUU//pI8OqTdBnepw467zcuF2Y+Ia1VC0CPYfUEALyS8n4Ar0RI/7ASg==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@trysound/[email protected]':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -1251,6 +1283,9 @@ packages:
   '@types/[email protected]':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/[email protected]':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@typescript-eslint/[email protected]':
     resolution: {integrity: sha512-rg8LGdv7ri3oAlenMACk9e+AR4wUV0yrrG+XKsGKOK0EVgeEDqurkXMPILG2836fW4ibokTB5v4b6Z9+GYQDEw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1430,6 +1465,15 @@ packages:
   '@vue/[email protected]':
     resolution: {integrity: sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==}
 
+  '@vueuse/[email protected]':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
+  '@vueuse/[email protected]':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
+  '@vueuse/[email protected]':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@yr/[email protected]':
     resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
 
@@ -1534,6 +1578,10 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  [email protected]:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
   [email protected]:
     resolution: {integrity: sha512-RlNqd4u6c/rJ5R+tN/ZTtyNrH8X0NHCvyt6gD8RHa3JjzxxHWoyaU0Ujk3Zjbh7IZqrYl1Sxm6XzZifmVxXxHQ==}
     engines: {node: '>=16.14.0'}
@@ -3553,6 +3601,11 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
 
+  [email protected]:
+    resolution: {integrity: sha512-vtCq+WDAZj5BQtJiChGf/oC7w3y7jaod3agcntgph7fD6aqdcghLZYcUWdgT/XNJs2bEsk+3cjK3ONPRNeFcuQ==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   [email protected]:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
@@ -4992,10 +5045,38 @@ snapshots:
 
   '@fastify/[email protected]': {}
 
+  '@floating-ui/[email protected]':
+    dependencies:
+      '@floating-ui/utils': 0.2.7
+
+  '@floating-ui/[email protected]':
+    dependencies:
+      '@floating-ui/core': 1.6.7
+      '@floating-ui/utils': 0.2.7
+
+  '@floating-ui/[email protected]': {}
+
+  '@floating-ui/[email protected]([email protected]([email protected]))':
+    dependencies:
+      '@floating-ui/dom': 1.6.10
+      '@floating-ui/utils': 0.2.7
+      vue-demi: 0.14.10([email protected]([email protected]))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@humanwhocodes/[email protected]': {}
 
   '@humanwhocodes/[email protected]': {}
 
+  '@internationalized/[email protected]':
+    dependencies:
+      '@swc/helpers': 0.5.13
+
+  '@internationalized/[email protected]':
+    dependencies:
+      '@swc/helpers': 0.5.13
+
   '@intlify/[email protected]([email protected]([email protected]([email protected])))':
     dependencies:
       '@intlify/message-compiler': 9.14.0
@@ -5658,11 +5739,22 @@ snapshots:
       - supports-color
       - typescript
 
+  '@swc/[email protected]':
+    dependencies:
+      tslib: 2.7.0
+
   '@tailwindcss/[email protected]([email protected])':
     dependencies:
       mini-svg-data-uri: 1.4.4
       tailwindcss: 3.4.10
 
+  '@tanstack/[email protected]': {}
+
+  '@tanstack/[email protected]([email protected]([email protected]))':
+    dependencies:
+      '@tanstack/virtual-core': 3.10.7
+      vue: 3.4.38([email protected])
+
   '@trysound/[email protected]': {}
 
   '@types/[email protected]':
@@ -5698,6 +5790,8 @@ snapshots:
 
   '@types/[email protected]': {}
 
+  '@types/[email protected]': {}
+
   '@typescript-eslint/[email protected](@typescript-eslint/[email protected]([email protected]([email protected]))([email protected]))([email protected]([email protected]))([email protected])':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -5992,6 +6086,25 @@ snapshots:
 
   '@vue/[email protected]': {}
 
+  '@vueuse/[email protected]([email protected]([email protected]))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1([email protected]([email protected]))
+      vue-demi: 0.14.10([email protected]([email protected]))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/[email protected]': {}
+
+  '@vueuse/[email protected]([email protected]([email protected]))':
+    dependencies:
+      vue-demi: 0.14.10([email protected]([email protected]))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@yr/[email protected]': {}
 
   [email protected]: {}
@@ -6104,6 +6217,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      tslib: 2.7.0
+
   [email protected]:
     dependencies:
       '@babel/parser': 7.25.6
@@ -8309,6 +8426,23 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]([email protected]([email protected])):
+    dependencies:
+      '@floating-ui/dom': 1.6.10
+      '@floating-ui/vue': 1.1.4([email protected]([email protected]))
+      '@internationalized/date': 3.5.5
+      '@internationalized/number': 3.5.3
+      '@tanstack/vue-virtual': 3.10.7([email protected]([email protected]))
+      '@vueuse/core': 10.11.1([email protected]([email protected]))
+      '@vueuse/shared': 10.11.1([email protected]([email protected]))
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.7
+      vue: 3.4.38([email protected])
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   [email protected]: {}
 
   [email protected]: