From 61fde769292d46be97ca6cfcfee5c47e0abbdbae Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 2 Apr 2026 17:42:32 +0800
Subject: [PATCH] collection name and menu in toolbar

---
 next-ui/src/colada/collections.ts             | 19 ++++++----
 next-ui/src/components.d.ts                   |  1 +
 next-ui/src/components/ChipCount.vue          |  1 -
 .../collection/menu/CollectionMenuButton.vue  | 38 +++++++++++++++++++
 next-ui/src/pages/collection/[id].vue         | 13 ++++++-
 next-ui/src/pages/libraries/[id]/books.vue    |  5 ++-
 .../src/pages/libraries/[id]/collections.vue  |  5 ++-
 .../src/pages/libraries/[id]/readlists.vue    |  5 ++-
 next-ui/src/pages/libraries/[id]/series.vue   |  5 ++-
 9 files changed, 78 insertions(+), 14 deletions(-)
 create mode 100644 next-ui/src/components/collection/menu/CollectionMenuButton.vue

diff --git a/next-ui/src/colada/collections.ts b/next-ui/src/colada/collections.ts
index eafcab06..122b58c1 100644
--- a/next-ui/src/colada/collections.ts
+++ b/next-ui/src/colada/collections.ts
@@ -1,4 +1,4 @@
-import { defineMutation, defineQueryOptions, useMutation } from '@pinia/colada'
+import { defineMutation, defineQueryOptions, useMutation, useQueryCache } from '@pinia/colada'
 import { komgaClient } from '@/api/komga-client'
 import type { PageRequest } from '@/types/PageRequest'
 import type { components } from '@/generated/openapi/komga'
@@ -55,7 +55,7 @@ export const collectionDetailQuery = defineQueryOptions(
 )
 
 export const useUpdateCollection = defineMutation(() => {
-  // const queryCache = useQueryCache()
+  const queryCache = useQueryCache()
   return useMutation({
     mutation: ({
       collectionId,
@@ -73,14 +73,14 @@ export const useUpdateCollection = defineMutation(() => {
         body: data,
       }),
     onSuccess: () => {
-      //TODO: check how to invalidate cache
-      // void queryCache.invalidateQueries({ key: QUERY_KEYS_LIBRARIES.root })
+      void queryCache.invalidateQueries({ key: QUERY_KEYS_COLLECTIONS.root }, 'all')
     },
   })
 })
 
-export const useDeleteCollection = defineMutation(() =>
-  useMutation({
+export const useDeleteCollection = defineMutation(() => {
+  const queryCache = useQueryCache()
+  return useMutation({
     mutation: (collectionId: string) =>
       komgaClient.DELETE('/api/v1/collections/{id}', {
         params: {
@@ -89,5 +89,8 @@ export const useDeleteCollection = defineMutation(() =>
           },
         },
       }),
-  }),
-)
+    onSuccess: () => {
+      void queryCache.invalidateQueries({ key: QUERY_KEYS_COLLECTIONS.root }, 'all')
+    },
+  })
+})
diff --git a/next-ui/src/components.d.ts b/next-ui/src/components.d.ts
index 9ea5572b..3b49bc03 100644
--- a/next-ui/src/components.d.ts
+++ b/next-ui/src/components.d.ts
@@ -28,6 +28,7 @@ declare module 'vue' {
     CollectionDeletionWarning: typeof import('./components/collection/DeletionWarning.vue')['default']
     CollectionMenu: typeof import('./components/collection/menu/CollectionMenu.vue')['default']
     CollectionMenuBottomSheet: typeof import('./components/collection/menu/CollectionMenuBottomSheet.vue')['default']
+    CollectionMenuButton: typeof import('./components/collection/menu/CollectionMenuButton.vue')['default']
     DialogBookPicker: typeof import('./components/dialog/BookPicker.vue')['default']
     DialogConfirm: typeof import('./components/dialog/Confirm.vue')['default']
     DialogConfirmEdit: typeof import('./components/dialog/ConfirmEdit.vue')['default']
diff --git a/next-ui/src/components/ChipCount.vue b/next-ui/src/components/ChipCount.vue
index cf00d3d4..ecd94807 100644
--- a/next-ui/src/components/ChipCount.vue
+++ b/next-ui/src/components/ChipCount.vue
@@ -2,7 +2,6 @@
   <v-chip
     v-if="count"
     rounded
-    class="ms-4"
     >{{ count }}</v-chip
   >
 </template>
diff --git a/next-ui/src/components/collection/menu/CollectionMenuButton.vue b/next-ui/src/components/collection/menu/CollectionMenuButton.vue
new file mode 100644
index 00000000..6cf6bf31
--- /dev/null
+++ b/next-ui/src/components/collection/menu/CollectionMenuButton.vue
@@ -0,0 +1,38 @@
+<template>
+  <div v-if="isAdmin">
+    <v-icon-btn
+      :id="id"
+      icon="i-mdi:dots-vertical"
+      variant="text"
+      :aria-label="
+        $formatMessage({
+          description: 'Collection menu button: aria label',
+          defaultMessage: 'collection menu',
+          id: '1sYohL',
+        })
+      "
+      @click.prevent
+    />
+    <CollectionMenu
+      :activator="`#${id}`"
+      :collection="collection"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { components } from '@/generated/openapi/komga'
+import { useCurrentUser } from '@/colada/users'
+
+const { collection } = defineProps<{
+  collection: components['schemas']['CollectionDto']
+}>()
+
+const { isAdmin } = useCurrentUser()
+
+const id = useId()
+</script>
+
+<script lang="ts"></script>
+
+<style scoped></style>
diff --git a/next-ui/src/pages/collection/[id].vue b/next-ui/src/pages/collection/[id].vue
index 1861accd..01c17aaa 100644
--- a/next-ui/src/pages/collection/[id].vue
+++ b/next-ui/src/pages/collection/[id].vue
@@ -1,5 +1,12 @@
 <template>
   <v-app-bar>
+    <span class="ms-4 text-title-large">{{ collection?.name }}</span>
+    <CollectionMenuButton
+      v-if="collection"
+      :collection="collection"
+      class="mx-2"
+    />
+
     <ChipCount :count="totalElements" />
 
     <v-spacer />
@@ -249,8 +256,10 @@ import { seriesListQuery } from '@/colada/series'
 import { PageRequest, sortToString, type Sort } from '@/types/PageRequest'
 import { komgaClient } from '@/api/komga-client'
 import { collectionDetailQuery } from '@/colada/collections'
+import CollectionMenuButton from '@/components/collection/menu/CollectionMenuButton.vue'
 
 const route = useRoute('/collection/[id]')
+const router = useRouter()
 const collectionId = computed(() => route.params.id)
 
 const display = useDisplay()
@@ -260,11 +269,13 @@ const { isBrowsingScroll, isBrowsingPaged } = storeToRefs(appStore)
 const viewName = computed(() => `collection_${collectionId.value}`)
 const { presentationMode, presentationModeEffective } = usePresentationMode(viewName)
 
-const { data: collection } = useQuery(() => ({
+const { data: collection, error } = useQuery(() => ({
   ...collectionDetailQuery({
     collectionId: collectionId.value,
   }),
 }))
+// redirect to home if the entity is deleted
+watch(error, () => router.push('/'))
 
 const { page0, page1, pageCount } = usePagination()
 
diff --git a/next-ui/src/pages/libraries/[id]/books.vue b/next-ui/src/pages/libraries/[id]/books.vue
index f1a04cd1..6b698c40 100644
--- a/next-ui/src/pages/libraries/[id]/books.vue
+++ b/next-ui/src/pages/libraries/[id]/books.vue
@@ -1,6 +1,9 @@
 <template>
   <v-app-bar>
-    <ChipCount :count="totalElements" />
+    <ChipCount
+      class="ms-4"
+      :count="totalElements"
+    />
 
     <v-spacer />
 
diff --git a/next-ui/src/pages/libraries/[id]/collections.vue b/next-ui/src/pages/libraries/[id]/collections.vue
index 69ff8586..17a6d840 100644
--- a/next-ui/src/pages/libraries/[id]/collections.vue
+++ b/next-ui/src/pages/libraries/[id]/collections.vue
@@ -1,6 +1,9 @@
 <template>
   <v-app-bar>
-    <ChipCount :count="totalElements" />
+    <ChipCount
+      class="ms-4"
+      :count="totalElements"
+    />
 
     <v-spacer />
 
diff --git a/next-ui/src/pages/libraries/[id]/readlists.vue b/next-ui/src/pages/libraries/[id]/readlists.vue
index 16594cc7..8e5c7426 100644
--- a/next-ui/src/pages/libraries/[id]/readlists.vue
+++ b/next-ui/src/pages/libraries/[id]/readlists.vue
@@ -1,6 +1,9 @@
 <template>
   <v-app-bar>
-    <ChipCount :count="totalElements" />
+    <ChipCount
+      class="ms-4"
+      :count="totalElements"
+    />
 
     <v-spacer />
 
diff --git a/next-ui/src/pages/libraries/[id]/series.vue b/next-ui/src/pages/libraries/[id]/series.vue
index 4c6ceb8b..1df3def1 100644
--- a/next-ui/src/pages/libraries/[id]/series.vue
+++ b/next-ui/src/pages/libraries/[id]/series.vue
@@ -1,6 +1,9 @@
 <template>
   <v-app-bar>
-    <ChipCount :count="totalElements" />
+    <ChipCount
+      class="ms-4"
+      :count="totalElements"
+    />
 
     <v-spacer />