From b9ea59186be69270cbc03d8b435e8b0de8e1d0ab Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Mon, 8 Dec 2025 14:52:30 +0800
Subject: [PATCH] plug reorder libraries into drawer with menu

---
 next-ui/src/components.d.ts                   |  1 +
 .../components/layout/app/drawer/Drawer.vue   |  7 +++-
 .../layout/app/drawer/ReorderLibraries.vue    |  8 +++-
 .../layout/app/drawer/menu/Libraries.vue      |  7 +++-
 next-ui/src/components/menu/MenuLibraries.vue | 38 +++++++++++++++++++
 next-ui/src/stores/app.ts                     |  2 +
 6 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 next-ui/src/components/menu/MenuLibraries.vue

diff --git a/next-ui/src/components.d.ts b/next-ui/src/components.d.ts
index 7fe25e2e..4f400227 100644
--- a/next-ui/src/components.d.ts
+++ b/next-ui/src/components.d.ts
@@ -55,6 +55,7 @@ declare module 'vue' {
     LayoutAppDrawerMenuServer: typeof import('./components/layout/app/drawer/menu/Server.vue')['default']
     LayoutAppDrawerReorderLibraries: typeof import('./components/layout/app/drawer/ReorderLibraries.vue')['default']
     LocaleSelector: typeof import('./components/LocaleSelector.vue')['default']
+    MenuLibraries: typeof import('./components/menu/MenuLibraries.vue')['default']
     PageHashKnownTable: typeof import('./components/pageHash/KnownTable.vue')['default']
     PageHashMatchTable: typeof import('./components/pageHash/MatchTable.vue')['default']
     PageHashUnknownTable: typeof import('./components/pageHash/UnknownTable.vue')['default']
diff --git a/next-ui/src/components/layout/app/drawer/Drawer.vue b/next-ui/src/components/layout/app/drawer/Drawer.vue
index 4180899b..b91d6f5a 100644
--- a/next-ui/src/components/layout/app/drawer/Drawer.vue
+++ b/next-ui/src/components/layout/app/drawer/Drawer.vue
@@ -1,6 +1,10 @@
 <template>
   <v-navigation-drawer v-model="appStore.drawer">
-    <LayoutAppDrawerMenu />
+    <v-slide-x-transition hide-on-leave>
+      <ReorderLibraries v-if="appStore.reorderLibraries" />
+    </v-slide-x-transition>
+
+    <LayoutAppDrawerMenu v-if="!appStore.reorderLibraries" />
 
     <template #append>
       <LayoutAppDrawerFooter />
@@ -10,6 +14,7 @@
 
 <script setup lang="ts">
 import { useAppStore } from '@/stores/app'
+import ReorderLibraries from '@/components/layout/app/drawer/ReorderLibraries.vue'
 
 const appStore = useAppStore()
 </script>
diff --git a/next-ui/src/components/layout/app/drawer/ReorderLibraries.vue b/next-ui/src/components/layout/app/drawer/ReorderLibraries.vue
index 123b6f3a..cb5abeb8 100644
--- a/next-ui/src/components/layout/app/drawer/ReorderLibraries.vue
+++ b/next-ui/src/components/layout/app/drawer/ReorderLibraries.vue
@@ -19,6 +19,7 @@
               id: 'Ept33T',
             })
           "
+          @click="appStore.reorderLibraries = false"
         />
       </template>
     </v-list-item>
@@ -105,8 +106,13 @@ import { useLibraries } from '@/colada/libraries'
 import type { components } from '@/generated/openapi/komga'
 import { CLIENT_SETTING_USER, type ClientSettingUserLibrary } from '@/types/ClientSettingsUser'
 import { useUpdateClientSettingsUser } from '@/colada/client-settings'
+import { useAppStore } from '@/stores/app'
+
+const appStore = useAppStore()
 
 const { unpinned, pinned, refresh } = useLibraries()
+const { mutate } = useUpdateClientSettingsUser()
+
 const localPinned = ref<components['schemas']['LibraryDto'][]>([])
 const localUnpinned = ref<components['schemas']['LibraryDto'][]>([])
 
@@ -133,8 +139,6 @@ const draggableConfig = {
   chosenClass: 'chosen',
   animation: 150,
 }
-
-const { mutate } = useUpdateClientSettingsUser()
 </script>
 
 <style lang="scss">
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 f8926e65..c0344046 100644
--- a/next-ui/src/components/layout/app/drawer/menu/Libraries.vue
+++ b/next-ui/src/components/layout/app/drawer/menu/Libraries.vue
@@ -22,6 +22,7 @@
         "
       />
       <v-icon-btn
+        id="menu-libraries-drawer"
         icon="i-mdi:dots-vertical"
         :aria-label="
           $formatMessage({
@@ -31,6 +32,7 @@
           })
         "
       />
+      <MenuLibraries activator-id="#menu-libraries-drawer" />
     </template>
   </v-list-item>
 
@@ -100,6 +102,9 @@
 import { useLibraries } from '@/colada/libraries'
 import { useCurrentUser } from '@/colada/users'
 
-const { unpinned, pinned } = useLibraries()
+const { unpinned, pinned, refresh } = useLibraries()
 const { isAdmin } = useCurrentUser()
+
+// ensure freshness, especially if libraries have been reordered
+void refresh()
 </script>
diff --git a/next-ui/src/components/menu/MenuLibraries.vue b/next-ui/src/components/menu/MenuLibraries.vue
new file mode 100644
index 00000000..a1123c8e
--- /dev/null
+++ b/next-ui/src/components/menu/MenuLibraries.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-menu :activator="activatorId">
+    <v-list density="compact">
+      <v-list-item
+        v-for="(action, i) in actions"
+        :key="i"
+        v-bind="action"
+      />
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { useIntl } from 'vue-intl'
+import { useAppStore } from '@/stores/app'
+
+const { activatorId } = defineProps<{
+  activatorId: string
+}>()
+
+const intl = useIntl()
+const appStore = useAppStore()
+
+const actions = [
+  {
+    title: intl.formatMessage({
+      description: 'Libraries menu: reorder',
+      defaultMessage: 'Reorder',
+      id: 'EcIbyl',
+    }),
+    onClick: () => (appStore.reorderLibraries = true),
+  },
+]
+</script>
+
+<script lang="ts"></script>
+
+<style scoped></style>
diff --git a/next-ui/src/stores/app.ts b/next-ui/src/stores/app.ts
index 069f444f..4a74b731 100644
--- a/next-ui/src/stores/app.ts
+++ b/next-ui/src/stores/app.ts
@@ -9,6 +9,8 @@ export const useAppStore = defineStore('app', {
     theme: 'system',
     rememberMe: false,
     importBooksPath: '',
+    // transient
+    reorderLibraries: false,
   }),
   persist: {
     key: 'komga.nextui.app',