From 1be451f0f51d2f3fd0e0c110cf993eb81801d3e4 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Wed, 21 Jan 2026 17:14:23 +0800
Subject: [PATCH] refactor duplicate code

---
 next-ui/src/components.d.ts                   |  1 +
 .../layout/app/drawer/menu/Libraries.vue      | 72 ++-----------------
 .../layout/app/drawer/menu/LibraryItem.vue    | 54 ++++++++++++++
 3 files changed, 61 insertions(+), 66 deletions(-)
 create mode 100644 next-ui/src/components/layout/app/drawer/menu/LibraryItem.vue

diff --git a/next-ui/src/components.d.ts b/next-ui/src/components.d.ts
index eee9029b..be966678 100644
--- a/next-ui/src/components.d.ts
+++ b/next-ui/src/components.d.ts
@@ -58,6 +58,7 @@ declare module 'vue' {
     LayoutAppDrawerMenuHistory: typeof import('./components/layout/app/drawer/menu/History.vue')['default']
     LayoutAppDrawerMenuImport: typeof import('./components/layout/app/drawer/menu/Import.vue')['default']
     LayoutAppDrawerMenuLibraries: typeof import('./components/layout/app/drawer/menu/Libraries.vue')['default']
+    LayoutAppDrawerMenuLibraryItem: typeof import('./components/layout/app/drawer/menu/LibraryItem.vue')['default']
     LayoutAppDrawerMenuLogout: typeof import('./components/layout/app/drawer/menu/Logout.vue')['default']
     LayoutAppDrawerMenuMedia: typeof import('./components/layout/app/drawer/menu/Media.vue')['default']
     LayoutAppDrawerMenuServer: typeof import('./components/layout/app/drawer/menu/Server.vue')['default']
diff --git a/next-ui/src/components/layout/app/drawer/menu/Libraries.vue b/next-ui/src/components/layout/app/drawer/menu/Libraries.vue
index 9375379d..65cd1c0b 100644
--- a/next-ui/src/components/layout/app/drawer/menu/Libraries.vue
+++ b/next-ui/src/components/layout/app/drawer/menu/Libraries.vue
@@ -44,41 +44,11 @@
     </template>
   </v-list-item>
 
-  <v-list-item
+  <LayoutAppDrawerMenuLibraryItem
     v-for="library in pinned"
     :key="library.id"
-    :title="library.name"
-    :to="`/libraries/${library.id}`"
-    prepend-icon="blank"
-  >
-    <template
-      v-if="library.unavailable"
-      #subtitle
-    >
-      <span class="text-error">{{ unavailableMessage }}</span>
-    </template>
-
-    <template #append>
-      <v-icon-btn
-        v-if="isAdmin"
-        :id="`${id}${library.id}`"
-        icon="i-mdi:dots-vertical"
-        variant="text"
-        :aria-label="
-          $formatMessage({
-            description: 'Library menu button: aria label',
-            defaultMessage: 'library menu',
-            id: '3gimvl',
-          })
-        "
-        @click.prevent
-      />
-      <LibraryMenuLibrary
-        :activator-id="`#${id}${library.id}`"
-        :library="library"
-      />
-    </template>
-  </v-list-item>
+    :library="library"
+  />
 
   <v-list-group
     v-if="unpinned.length > 0"
@@ -98,41 +68,11 @@
       />
     </template>
 
-    <v-list-item
+    <LayoutAppDrawerMenuLibraryItem
       v-for="library in unpinned"
       :key="library.id"
-      :title="library.name"
-      :to="`/libraries/${library.id}`"
-      prepend-icon="blank"
-    >
-      <template
-        v-if="library.unavailable"
-        #subtitle
-      >
-        <span class="text-error">{{ unavailableMessage }}</span>
-      </template>
-
-      <template #append>
-        <v-icon-btn
-          v-if="isAdmin"
-          :id="`ID01KC5QH18T79WTFFJWJ6ES4SFE${library.id}`"
-          icon="i-mdi:dots-vertical"
-          variant="text"
-          :aria-label="
-            $formatMessage({
-              description: 'Library menu button: aria label',
-              defaultMessage: 'library menu',
-              id: '3gimvl',
-            })
-          "
-          @click.prevent
-        />
-        <LibraryMenuLibrary
-          :activator-id="`#ID01KC5QH18T79WTFFJWJ6ES4SFE${library.id}`"
-          :library="library"
-        />
-      </template>
-    </v-list-item>
+      :library="library"
+    />
   </v-list-group>
 </template>
 
diff --git a/next-ui/src/components/layout/app/drawer/menu/LibraryItem.vue b/next-ui/src/components/layout/app/drawer/menu/LibraryItem.vue
new file mode 100644
index 00000000..01ae0924
--- /dev/null
+++ b/next-ui/src/components/layout/app/drawer/menu/LibraryItem.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-list-item
+    :title="library.name"
+    :to="`/libraries/${library.id}`"
+    prepend-icon="blank"
+  >
+    <template
+      v-if="library.unavailable"
+      #subtitle
+    >
+      <span class="text-error">{{
+        $formatMessage({
+          description: 'Library list item subtitle: unavailable',
+          defaultMessage: 'Unavailable',
+          id: '5rziSG',
+        })
+      }}</span>
+    </template>
+
+    <template #append>
+      <v-icon-btn
+        v-if="isAdmin"
+        :id="`${id}${library.id}`"
+        icon="i-mdi:dots-vertical"
+        variant="text"
+        :aria-label="
+          $formatMessage({
+            description: 'Library menu button: aria label',
+            defaultMessage: 'library menu',
+            id: '3gimvl',
+          })
+        "
+        @click.prevent
+      />
+      <LibraryMenuLibrary
+        :activator-id="`#${id}${library.id}`"
+        :library="library"
+      />
+    </template>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+import { useCurrentUser } from '@/colada/users'
+import type { components } from '@/generated/openapi/komga'
+
+defineProps<{
+  library: components['schemas']['LibraryDto']
+}>()
+
+const { isAdmin } = useCurrentUser()
+
+const id = useId()
+</script>