plug reorder libraries into drawer with menu

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']

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>

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">

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>

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>

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',