client/src/features/book/components/BookCoverCard.vue (2)

200-216: ⚖️ Poor tradeoff

Consider adding loading feedback for author lookup.

The async author lookup has no visible loading state. If the API call is slow, users clicking the author label won't receive feedback until navigation completes. While this doesn't break functionality, a brief loading indicator could improve the user experience.

💡 Optional enhancement

If this becomes a concern, you could add a loading state:

+const authorLookupLoading = ref(false)
+
 async function openAuthorDetails() {
   const authorName = authorQuery.value?.trim()
   if (!authorName) return
+  
+  authorLookupLoading.value = true
   try {
     const page = await fetchAuthors({ q: authorName, page: 0, size: 5, sort: 'name', order: 'asc' })
     const author = page.items.find((item) => item.name.trim().toLocaleLowerCase() === authorName.toLocaleLowerCase())
     if (author) {
       void router.push({ name: 'author-detail', params: { id: author.id }, query: { from: route.fullPath } })
       return
     }
   } catch {
     // Fall back to the filtered author list below.
+  } finally {
+    authorLookupLoading.value = false
   }
   
   void router.push({ name: 'authors', query: { q: authorName } })
 }

Then show a spinner on the label button during lookup.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@client/src/features/book/components/BookCoverCard.vue` around lines 200 -
216, Add a brief loading state to openAuthorDetails so users get feedback while
fetchAuthors runs: introduce a reactive flag (e.g., isAuthorLookupLoading) used
by the label/button UI to show a spinner or disabled state, set it true before
calling fetchAuthors and false in both the success and catch branches (and
before returning after router.push). Update the button/label component to bind
its disabled/aria-busy and spinner visibility to isAuthorLookupLoading so the UI
indicates progress during openAuthorDetails, while preserving the existing
fallback navigation to the authors list.

---

524-637: 🏗️ Heavy lift

Significant code duplication in kebab menu.

The dropdown menu structure is duplicated across two contexts (hover overlay and below-cover label row), repeating ~110 lines of nearly identical code. This creates maintenance burden where any menu change must be applied in both locations.

♻️ Recommended refactor to extract the menu

Consider extracting the menu content into a reusable component or helper:

Option 1: Extract menu content to a separate component

Create client/src/features/book/components/BookCoverCardMenu.vue:

<script setup lang="ts">
import type { BookCard, BookFileRef } from '`@bookorbit/types`'
// ... import all menu-related composables and icons

const props = defineProps<{
  book: BookCard
  openableFiles: BookFileRef[]
  isMissing: boolean
  anyRefreshing: boolean
  reExtractingCover: boolean
  localReadStatus: ReadStatus | null
}>()

const emit = defineEmits<{
  'open-file': [file: BookFileRef]
  'download-file': [file: BookFileRef]
  'export-all': []
  'open-details': []
  'edit-metadata': []
  'refresh-metadata': []
  'regenerate-cover': []
  'add-to-collection': []
  'set-status': [status: ReadStatus]
  'send-email': []
  'delete': []
}>()
</script>

<template>
  <DropdownMenuContent align="end">
    <!-- All menu items here -->
  </DropdownMenuContent>
</template>

Then use it in both contexts:

 <!-- Kebab menu in hover overlay -->
 <div v-if="!showBelowCoverLabelArea" class="absolute bottom-2 right-2 z-20">
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
       <button>...</button>
     </DropdownMenuTrigger>
+    <BookCoverCardMenu
+      :book="book"
+      :openable-files="openableFiles"
+      :is-missing="isMissing"
+      :any-refreshing="anyRefreshing"
+      :re-extracting-cover="reExtractingCover"
+      :local-read-status="localReadStatus"
+      `@open-file`="openFile"
+      `@download-file`="handleDownloadFile"
+      `@export-all`="handleExportAll"
+      `@open-details`="openBookDetails"
+      ...
+    />
   </DropdownMenu>
 </div>

Option 2: Use a shared template ref

If extracting is too complex, at minimum add a TODO comment noting the duplication and plan for future refactoring.

Also applies to: 656-762

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@client/src/features/book/components/BookCoverCard.vue` around lines 524 -
637, The kebab menu in BookCoverCard.vue is duplicated; extract it into a
reusable component (e.g., BookCoverCardMenu.vue) that accepts props (book,
openableFiles, isMissing, anyRefreshing, reExtractingCover, localReadStatus) and
emits actions (open-file, download-file, export-all, open-details,
refresh-metadata, regenerate-cover, add-to-collection, set-status, send-email,
delete). Move the DropdownMenuContent block into BookCoverCardMenu and replace
both duplicated menu blocks in BookCoverCard.vue with <BookCoverCardMenu />
instances wired to the existing methods (openFile, handleDownloadFile,
handleExportAll, openBookDetails, handleRefreshMetadata, reExtractCover,
emit('action', ...), handleSetStatus, setting showSendDialog) and permissions
checks; ensure STATUS_ICONS/STATUS_COLORS and FORMAT_TO_GROUP remain available
via props or imports.

client/src/features/book/components/CollapsedSeriesCard.vue (1)

249-298: ⚡ Quick win

Missing explicit focus-visible styles for keyboard accessibility.

The label buttons lack explicit focus-visible styles. While browsers provide default focus indicators, BookCoverCard defines custom focus styles for consistency:

.grid-card-label__button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 2px;
}

♻️ Add explicit focus styles for consistency

 .grid-card-label__primary:hover {
   text-decoration: underline;
 }
 
+.grid-card-label__primary:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 .grid-card-label__secondary {
   font-size: 0.625rem;
   ...
 }
 
 .grid-card-label__secondary:hover {
   text-decoration: underline;
 }
+
+.grid-card-label__secondary:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  border-radius: 2px;
+}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@client/src/features/book/components/CollapsedSeriesCard.vue` around lines 249
- 298, The label buttons (.grid-card-label__primary and
.grid-card-label__secondary) lack explicit :focus-visible styles for keyboard
accessibility; add matching :focus-visible rules for both selectors that set an
outline (e.g., 2px solid var(--ring)), an outline-offset (e.g., 2px) and a small
border-radius to mirror BookCoverCard’s custom focus visuals so keyboard users
get a consistent visible focus indicator.