use useId instead of UUID

next-ui/src/components/layout/app/drawer/menu/Libraries.vue

@@ -28,7 +28,7 @@
         @click.prevent="createLibrary"
       />
       <v-icon-btn
-        id="ID01KC5N8S3V35QV04SYETY01M9H"
+        :id="id"
         icon="i-mdi:dots-vertical"
         variant="text"
         :aria-label="
@@ -40,7 +40,7 @@
         "
         @click.prevent
       />
-      <LibraryMenuLibraries activator-id="#ID01KC5N8S3V35QV04SYETY01M9H" />
+      <LibraryMenuLibraries :activator-id="`#${id}`" />
     </template>
   </v-list-item>
 
@@ -54,7 +54,7 @@
     <template #append>
       <v-icon-btn
         v-if="isAdmin"
-        :id="`ID01KC5NTP02S3CMF12ZS2R4HNWX${library.id}`"
+        :id="`${id}${library.id}`"
         icon="i-mdi:dots-vertical"
         variant="text"
         :aria-label="
@@ -67,7 +67,7 @@
         @click.prevent
       />
       <LibraryMenuLibrary
-        :activator-id="`#ID01KC5NTP02S3CMF12ZS2R4HNWX${library.id}`"
+        :activator-id="`#${id}${library.id}`"
         :library="library"
       />
     </template>
@@ -141,6 +141,8 @@ const display = useDisplay()
 const { unpinned, pinned, refresh } = useLibraries()
 const { isAdmin } = useCurrentUser()
 
+const id = useId()
+
 // ensure freshness, especially if libraries have been reordered
 void refresh()
 

next-ui/src/components/library/form/StepGeneral.vue

@@ -34,7 +34,7 @@
       </v-col>
       <v-col cols="auto">
         <v-btn
-          id="ID01KC5HANV8QMDAW8GW4HFZCY0B"
+          :id="id"
           :text="
             $formatMessage({
               description: 'Form add/edit library: General - root folder browse button',
@@ -60,7 +60,7 @@
     close-on-save
     scrollable
     :fullscreen="display.xs.value"
-    activator="#ID01KC5HANV8QMDAW8GW4HFZCY0B"
+    :activator="`#${id}`"
     @update:record="(val) => (model.root = val as string)"
   >
     <template #text="{ proxyModel }">
@@ -76,6 +76,8 @@ import { useDisplay } from 'vuetify'
 
 const display = useDisplay()
 
+const id = useId()
+
 type LibraryCreationGeneral = Pick<components['schemas']['LibraryCreationDto'], 'name' | 'root'>
 
 const model = defineModel<LibraryCreationGeneral>({ required: true })