From f83246e88ab909ef5d21474d8c26c9c43a722cfc Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Wed, 11 Sep 2024 12:44:20 +0200
Subject: [PATCH] add radix vue, improve ui

---
 src/app/components/ui/UserMenu.vue | 134 ++++++++++++++---------------
 src/app/layouts/Header.vue         |  22 ++---
 src/app/pages/admin.vue            |  33 +++----
 src/app/pages/admin/clients.vue    |  34 --------
 src/app/pages/admin/features.vue   |  63 ++++++++++++++
 src/app/pages/admin/index.vue      |   9 +-
 src/app/pages/admin/server.vue     |  34 --------
 src/app/pages/admin/user.vue       |  34 --------
 src/nuxt.config.ts                 |   1 +
 src/package.json                   |   1 +
 src/pnpm-lock.yaml                 | 134 +++++++++++++++++++++++++++++
 11 files changed, 301 insertions(+), 198 deletions(-)
 delete mode 100644 src/app/pages/admin/clients.vue
 create mode 100644 src/app/pages/admin/features.vue
 delete mode 100644 src/app/pages/admin/server.vue
 delete mode 100644 src/app/pages/admin/user.vue

diff --git a/src/app/components/ui/UserMenu.vue b/src/app/components/ui/UserMenu.vue
index debecc0a..43d79190 100644
--- a/src/app/components/ui/UserMenu.vue
+++ b/src/app/components/ui/UserMenu.vue
@@ -1,80 +1,70 @@
 <template>
-  <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" />
-    {{ authStore.userData?.name }}
-    <svg
-      class="w-2.5 h-2.5 ms-3"
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 10 6"
-    >
-      <path
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="m1 1 4 4 4-4"
-      />
-    </svg>
-  </button>
-
-  <!-- Dropdown menu -->
-  <div
-    v-show="menuOpen"
-    class="z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-neutral-700 dark:divide-neutral-800"
-  >
-    <div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
-      <div class="truncate">{{ authStore.userData?.name }}</div>
-      <div class="truncate">@{{ authStore.userData?.username }}</div>
-    </div>
-    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-      <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>
-      <li 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>
-    </ul>
-    <div class="py-2">
+  <DropdownMenuRoot v-model:open="toggleState">
+    <DropdownMenuTrigger>
       <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"
+        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"
       >
-        <IconsLogout class="h-5" />
-        {{ $t('logout') }}
+        <AvatarRoot
+          class="inline-flex h-8 w-8 select-none items-center justify-center overflow-hidden rounded-full align-middle mr-2"
+        >
+          <AvatarFallback
+            class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
+            :delay-ms="600"
+          >
+            {{ fallbackName }}
+          </AvatarFallback>
+        </AvatarRoot>
+        {{ authStore.userData?.name }}
       </button>
-    </div>
-  </div>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        :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 text-gray-700 dark:text-gray-200"
+      >
+        <DropdownMenuItem>
+          <div class="truncate">{{ authStore.userData?.name }}</div>
+          <div class="truncate">@{{ authStore.userData?.username }}</div>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <NuxtLink
+            to="/"
+            class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            Clients
+          </NuxtLink>
+        </DropdownMenuItem>
+        <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"
+          >
+            Admin Panel
+          </NuxtLink>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <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"
+          >
+            <IconsLogout class="h-5" />
+            {{ $t('logout') }}
+          </button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
 </template>
 
 <script setup lang="ts">
 const authStore = useAuthStore();
-const menuOpen = ref(false);
+const toggleState = ref(false);
 
-function toggleMenu() {
-  menuOpen.value = !menuOpen.value;
-}
-
-function closeMenu() {
-  menuOpen.value = false;
-}
+watchEffect(() => {
+  console.log(toggleState);
+});
 
 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>
diff --git a/src/app/layouts/Header.vue b/src/app/layouts/Header.vue
index 50625aad..7c9b03a4 100644
--- a/src/app/layouts/Header.vue
+++ b/src/app/layouts/Header.vue
@@ -7,16 +7,18 @@
           : 'flex flex-col-reverse xxs:flex-row flex-auto items-center gap-3'
       "
     >
-      <h1
-        v-if="isLoginPage"
-        class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4"
-      >
-        <img
-          src="/logo.png"
-          width="32"
-          class="inline align-middle dark:bg mr-2"
-        /><span class="align-middle">WireGuard</span>
-      </h1>
+      <NuxtLink to="/" class="flex-grow self-start mb-4">
+        <h1
+          v-if="isLoginPage"
+          class="text-4xl dark:text-neutral-200 font-medium"
+        >
+          <img
+            src="/logo.png"
+            width="32"
+            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
diff --git a/src/app/pages/admin.vue b/src/app/pages/admin.vue
index 0ac27a88..08178943 100644
--- a/src/app/pages/admin.vue
+++ b/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">
-          <h2 class="text-xl font-bold dark:text-neutral-200 mb-4">
-            Admin Panel
-          </h2>
-          <ul class="space-y-2">
-            <li
+          <NuxtLink to="/admin">
+            <h2 class="text-xl font-bold dark:text-neutral-200 mb-4">
+              Admin Panel
+            </h2>
+          </NuxtLink>
+          <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 }"
-              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}`)"
+              :to="`/admin/${item.id}`"
             >
-              {{ item.name }}
-            </li>
-          </ul>
+              <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 }}
+              </BaseButton>
+            </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' },
 ];
 
diff --git a/src/app/pages/admin/clients.vue b/src/app/pages/admin/clients.vue
deleted file mode 100644
index 53a4b11b..00000000
--- a/src/app/pages/admin/clients.vue
+++ /dev/null
@@ -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>
diff --git a/src/app/pages/admin/features.vue b/src/app/pages/admin/features.vue
new file mode 100644
index 00000000..69a85f9b
--- /dev/null
+++ b/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>
diff --git a/src/app/pages/admin/index.vue b/src/app/pages/admin/index.vue
index d4a40441..cc9ba8be 100644
--- a/src/app/pages/admin/index.vue
+++ b/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>
diff --git a/src/app/pages/admin/server.vue b/src/app/pages/admin/server.vue
deleted file mode 100644
index 53a4b11b..00000000
--- a/src/app/pages/admin/server.vue
+++ /dev/null
@@ -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>
diff --git a/src/app/pages/admin/user.vue b/src/app/pages/admin/user.vue
deleted file mode 100644
index 53a4b11b..00000000
--- a/src/app/pages/admin/user.vue
+++ /dev/null
@@ -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>
diff --git a/src/nuxt.config.ts b/src/nuxt.config.ts
index df563b77..2b300d41 100644
--- a/src/nuxt.config.ts
+++ b/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',
diff --git a/src/package.json b/src/package.json
index 26d3af41..75cf2696 100644
--- a/src/package.json
+++ b/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",
diff --git a/src/pnpm-lock.yaml b/src/pnpm-lock.yaml
index 2cd028b4..0f00e7d8 100644
--- a/src/pnpm-lock.yaml
+++ b/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(vue@3.4.38(typescript@5.5.4))
       semver:
         specifier: ^7.6.3
         version: 7.6.3
@@ -751,6 +754,18 @@ packages:
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
 
+  '@floating-ui/core@1.6.7':
+    resolution: {integrity: sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==}
+
+  '@floating-ui/dom@1.6.10':
+    resolution: {integrity: sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==}
+
+  '@floating-ui/utils@0.2.7':
+    resolution: {integrity: sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==}
+
+  '@floating-ui/vue@1.1.4':
+    resolution: {integrity: sha512-ammH7T3vyCx7pmm9OF19Wc42zrGnUw0QvLoidgypWsCLJMtGXEwY7paYIHO+K+oLC3mbWpzIHzeTVienYenlNg==}
+
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
@@ -759,6 +774,12 @@ packages:
     resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
     engines: {node: '>=18.18'}
 
+  '@internationalized/date@3.5.5':
+    resolution: {integrity: sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==}
+
+  '@internationalized/number@3.5.3':
+    resolution: {integrity: sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==}
+
   '@intlify/bundle-utils@7.5.1':
     resolution: {integrity: sha512-UovJl10oBIlmYEcWw+VIHdKY5Uv5sdPG0b/b6bOYxGLln3UwB75+2dlc0F3Fsa0RhoznQ5Rp589/BZpABpE4Xw==}
     engines: {node: '>= 14.16'}
@@ -1209,11 +1230,22 @@ packages:
     peerDependencies:
       eslint: '>=8.40.0'
 
+  '@swc/helpers@0.5.13':
+    resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
+
   '@tailwindcss/forms@0.5.9':
     resolution: {integrity: sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20'
 
+  '@tanstack/virtual-core@3.10.7':
+    resolution: {integrity: sha512-ND5dfsU0n9F4gROzwNNDJmg6y8n9pI8YWxtgbfJ5UcNn7Hx+MxEXtXcQ189tS7sh8pmCObgz2qSiyRKTZxT4dg==}
+
+  '@tanstack/vue-virtual@3.10.7':
+    resolution: {integrity: sha512-OSK1fkvz4GaBhF80KVmBsJZoMI9ncVaUU//pI8OqTdBnepw467zcuF2Y+Ia1VC0CPYfUEALyS8n4Ar0RI/7ASg==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -1251,6 +1283,9 @@ packages:
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@typescript-eslint/eslint-plugin@8.4.0':
     resolution: {integrity: sha512-rg8LGdv7ri3oAlenMACk9e+AR4wUV0yrrG+XKsGKOK0EVgeEDqurkXMPILG2836fW4ibokTB5v4b6Z9+GYQDEw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1430,6 +1465,15 @@ packages:
   '@vue/shared@3.4.38':
     resolution: {integrity: sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==}
 
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@yr/monotone-cubic-spline@1.0.3':
     resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
 
@@ -1534,6 +1578,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
   ast-kit@1.1.0:
     resolution: {integrity: sha512-RlNqd4u6c/rJ5R+tN/ZTtyNrH8X0NHCvyt6gD8RHa3JjzxxHWoyaU0Ujk3Zjbh7IZqrYl1Sxm6XzZifmVxXxHQ==}
     engines: {node: '>=16.14.0'}
@@ -3553,6 +3601,11 @@ packages:
   queue-tick@1.0.1:
     resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
 
+  radix-vue@1.9.5:
+    resolution: {integrity: sha512-vtCq+WDAZj5BQtJiChGf/oC7w3y7jaod3agcntgph7fD6aqdcghLZYcUWdgT/XNJs2bEsk+3cjK3ONPRNeFcuQ==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
@@ -4992,10 +5045,38 @@ snapshots:
 
   '@fastify/busboy@2.1.1': {}
 
+  '@floating-ui/core@1.6.7':
+    dependencies:
+      '@floating-ui/utils': 0.2.7
+
+  '@floating-ui/dom@1.6.10':
+    dependencies:
+      '@floating-ui/core': 1.6.7
+      '@floating-ui/utils': 0.2.7
+
+  '@floating-ui/utils@0.2.7': {}
+
+  '@floating-ui/vue@1.1.4(vue@3.4.38(typescript@5.5.4))':
+    dependencies:
+      '@floating-ui/dom': 1.6.10
+      '@floating-ui/utils': 0.2.7
+      vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@humanwhocodes/module-importer@1.0.1': {}
 
   '@humanwhocodes/retry@0.3.0': {}
 
+  '@internationalized/date@3.5.5':
+    dependencies:
+      '@swc/helpers': 0.5.13
+
+  '@internationalized/number@3.5.3':
+    dependencies:
+      '@swc/helpers': 0.5.13
+
   '@intlify/bundle-utils@7.5.1(vue-i18n@9.14.0(vue@3.4.38(typescript@5.5.4)))':
     dependencies:
       '@intlify/message-compiler': 9.14.0
@@ -5658,11 +5739,22 @@ snapshots:
       - supports-color
       - typescript
 
+  '@swc/helpers@0.5.13':
+    dependencies:
+      tslib: 2.7.0
+
   '@tailwindcss/forms@0.5.9(tailwindcss@3.4.10)':
     dependencies:
       mini-svg-data-uri: 1.4.4
       tailwindcss: 3.4.10
 
+  '@tanstack/virtual-core@3.10.7': {}
+
+  '@tanstack/vue-virtual@3.10.7(vue@3.4.38(typescript@5.5.4))':
+    dependencies:
+      '@tanstack/virtual-core': 3.10.7
+      vue: 3.4.38(typescript@5.5.4)
+
   '@trysound/sax@0.2.0': {}
 
   '@types/debug@4.1.12':
@@ -5698,6 +5790,8 @@ snapshots:
 
   '@types/semver@7.5.8': {}
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@typescript-eslint/eslint-plugin@8.4.0(@typescript-eslint/parser@8.4.0(eslint@9.9.1(jiti@1.21.6))(typescript@5.5.4))(eslint@9.9.1(jiti@1.21.6))(typescript@5.5.4)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -5992,6 +6086,25 @@ snapshots:
 
   '@vue/shared@3.4.38': {}
 
+  '@vueuse/core@10.11.1(vue@3.4.38(typescript@5.5.4))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.4.38(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@10.11.1': {}
+
+  '@vueuse/shared@10.11.1(vue@3.4.38(typescript@5.5.4))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@yr/monotone-cubic-spline@1.0.3': {}
 
   abbrev@1.1.1: {}
@@ -6104,6 +6217,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.4:
+    dependencies:
+      tslib: 2.7.0
+
   ast-kit@1.1.0:
     dependencies:
       '@babel/parser': 7.25.6
@@ -8309,6 +8426,23 @@ snapshots:
 
   queue-tick@1.0.1: {}
 
+  radix-vue@1.9.5(vue@3.4.38(typescript@5.5.4)):
+    dependencies:
+      '@floating-ui/dom': 1.6.10
+      '@floating-ui/vue': 1.1.4(vue@3.4.38(typescript@5.5.4))
+      '@internationalized/date': 3.5.5
+      '@internationalized/number': 3.5.3
+      '@tanstack/vue-virtual': 3.10.7(vue@3.4.38(typescript@5.5.4))
+      '@vueuse/core': 10.11.1(vue@3.4.38(typescript@5.5.4))
+      '@vueuse/shared': 10.11.1(vue@3.4.38(typescript@5.5.4))
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.7
+      vue: 3.4.38(typescript@5.5.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   radix3@1.1.2: {}
 
   randombytes@2.1.0: