From 3e9bf153dc306f166d09e4197638a450ded97817 Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Fri, 13 Feb 2026 15:02:16 +0800
Subject: [PATCH] fix(03): replace template x-data with tbody x-data for table
 rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<template x-data> inside <tbody> is inert — browsers don't render its
children. Replace with per-member <tbody x-data> (multiple tbody is
valid HTML). Also replace x-collapse on <tr> with x-transition since
table rows don't support max-height/overflow-hidden.

UAT: all 7 tests passed via Playwright automation.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
---
 .../phases/03-note-history-display/03-UAT.md  | 53 +++++++++++++++++++
 resources/views/admin/members/index.blade.php | 16 ++++--
 tests/Feature/Admin/MemberNoteTest.php        |  2 +-
 3 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 .planning/phases/03-note-history-display/03-UAT.md

diff --git a/.planning/phases/03-note-history-display/03-UAT.md b/.planning/phases/03-note-history-display/03-UAT.md
new file mode 100644
index 0000000..f57b045
--- /dev/null
+++ b/.planning/phases/03-note-history-display/03-UAT.md
@@ -0,0 +1,53 @@
+---
+status: complete
+phase: 03-note-history-display
+source: 03-01-SUMMARY.md
+started: 2026-02-13T14:58:00Z
+updated: 2026-02-13T15:02:00Z
+---
+
+## Current Test
+
+[testing complete]
+
+## Tests
+
+### 1. Expand note history panel
+expected: Click a member's note count badge (the blue number). An inline panel should expand below that member's row with a smooth animation, showing a loading spinner briefly, then displaying notes.
+result: pass
+
+### 2. Notes display order and formatting
+expected: Notes in the expanded panel appear newest first. Each note shows: content text, author name, and a formatted datetime like "2026年02月13日 14:30". A blue left border accent separates each note.
+result: pass
+
+### 3. Empty state for member with no notes
+expected: Click the badge of a member who has zero notes. Panel expands and shows "尚無備註" text. No search input should appear.
+result: pass
+
+### 4. Search filtering by content or author
+expected: With the history panel open (for a member with multiple notes), type text in the search input ("搜尋備忘錄內容或作者..."). Notes filter in real-time as you type — matching by note content or author name (case-insensitive).
+result: pass
+
+### 5. Search no results state
+expected: Type a search query that matches no notes. The notes list is replaced with "找不到符合的備忘錄" text.
+result: pass
+
+### 6. Collapse panel and reset search
+expected: With search text entered, click the badge again. Panel collapses smoothly. Re-open the panel — the search input should be empty (reset).
+result: pass
+
+### 7. Cache sync after adding note
+expected: Open a member's history panel to see existing notes. Then use the pencil icon to add a new note via the inline form. After submitting, the new note should appear at the top of the history panel immediately — no page refresh or re-clicking the badge needed.
+result: pass
+
+## Summary
+
+total: 7
+passed: 7
+issues: 0
+pending: 0
+skipped: 0
+
+## Gaps
+
+[none]
diff --git a/resources/views/admin/members/index.blade.php b/resources/views/admin/members/index.blade.php
index 0f35e49..3dce4b1 100644
--- a/resources/views/admin/members/index.blade.php
+++ b/resources/views/admin/members/index.blade.php
@@ -191,9 +191,8 @@
                                     </th>
                                 </tr>
                             </thead>
-                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
                                 @forelse ($members as $member)
-                                    <template x-data="{
+                                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800" x-data="{
     noteFormOpen: false,
     noteContent: '',
     isSubmitting: false,
@@ -364,7 +363,13 @@
                                         </td>
                                     </tr>
                                     <!-- Expansion panel row -->
-                                    <tr x-show="historyOpen" x-collapse
+                                    <tr x-show="historyOpen"
+                                        x-transition:enter="transition ease-out duration-200"
+                                        x-transition:enter-start="opacity-0"
+                                        x-transition:enter-end="opacity-100"
+                                        x-transition:leave="transition ease-in duration-150"
+                                        x-transition:leave-start="opacity-100"
+                                        x-transition:leave-end="opacity-0"
                                         :id="'notes-panel-{{ $member->id }}'"
                                         class="bg-gray-50 dark:bg-gray-900">
                                         <td colspan="8" class="px-6 py-4">
@@ -417,15 +422,16 @@
                                             </div>
                                         </td>
                                     </tr>
-                                    </template>
+                                    </tbody>
                                 @empty
+                                    <tbody class="bg-white dark:bg-gray-800">
                                     <tr>
                                         <td colspan="8" class="px-4 py-4 text-sm text-gray-500 dark:text-gray-400">
                                             找不到會員。
                                         </td>
                                     </tr>
+                                    </tbody>
                                 @endforelse
-                            </tbody>
                         </table>
                     </div>
 
diff --git a/tests/Feature/Admin/MemberNoteTest.php b/tests/Feature/Admin/MemberNoteTest.php
index 075fafb..7c7c921 100644
--- a/tests/Feature/Admin/MemberNoteTest.php
+++ b/tests/Feature/Admin/MemberNoteTest.php
@@ -256,7 +256,7 @@ class MemberNoteTest extends TestCase
         $response->assertStatus(200);
         $response->assertSee('toggleHistory', false);
         $response->assertSee('historyOpen', false);
-        $response->assertSee('x-collapse', false);
+        $response->assertSee('x-transition:enter', false);
         $response->assertSee('searchQuery', false);
         $response->assertSee('filteredNotes', false);
         $response->assertSee('尚無備註', false);