collection name and menu in toolbar

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')
+    },
+  })
+})

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

next-ui/src/components/ChipCount.vue

@@ -2,7 +2,6 @@
   <v-chip
     v-if="count"
     rounded
-    class="ms-4"
     >{{ count }}</v-chip
   >
 </template>

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>

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()
 

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

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

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

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