fix(books): open personal review editor from summary

Reveal the collapsible review panel before entering edit mode so the summary action works on every responsive layout.

Fixes #1211

client/src/features/book/components/__tests__/DetailsTab.spec.ts

@@ -281,6 +281,20 @@ describe('DetailsTab - present state', () => {
     expect(wrapper.emitted('saved')?.[0]).toEqual([updated])
   })
 
+  it('opens the personal review editor from the review summary', async () => {
+    const wrapper = mount(DetailsTab, {
+      props: { book: makeBook() },
+      global: globalStubs,
+    })
+    await flushPromises()
+
+    const writeButton = wrapper.findAll('button').find((button) => button.text() === 'Write')
+    expect(writeButton).toBeTruthy()
+    await writeButton!.trigger('click')
+
+    expect(wrapper.find('textarea').isVisible()).toBe(true)
+  })
+
   it('shows reading date fields when both dates are null and status is null', () => {
     const wrapper = mount(DetailsTab, {
       props: { book: makeBook({ status: 'present', readStatus: null }) },

client/src/features/book/components/detail/tabs/DetailsTab.vue

@@ -435,6 +435,11 @@ const {
 
 const personalNoteUpdatedLabel = computed(() => (props.book.personalNoteUpdatedAt ? formatDateTime(props.book.personalNoteUpdatedAt) : null))
 
+function startVisiblePersonalNoteEdit() {
+  showPersonalReview.value = true
+  startPersonalNoteEdit()
+}
+
 watch(
   () => props.book.id,
   () => {
@@ -1852,7 +1857,7 @@ watch(
           <button
             type="button"
             class="ml-auto inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md border border-input px-2.5 text-xs font-medium transition-colors hover:bg-muted"
-            @click="startPersonalNoteEdit"
+            @click="startVisiblePersonalNoteEdit"
           >
             <Pencil class="size-3" />
             {{ t('book.detail.details.writeReview') }}