From ba30852058ddc61fee155c9618f63155093d42e0 Mon Sep 17 00:00:00 2001
From: mesalogo <pettygay757@gmail.com>
Date: Sat, 10 Oct 2026 13:43:14 +0800
Subject: [PATCH] fix(magic-notes): label entry actions and show note more
 button on hover

---
 src/renderer/src/MagicNotesWorkspace.test.tsx |  2 +-
 src/renderer/src/MagicNotesWorkspace.tsx      | 10 +++--
 src/renderer/src/styles.css                   | 45 +++++++++++++++++--
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/MagicNotesWorkspace.test.tsx b/src/renderer/src/MagicNotesWorkspace.test.tsx
index 48277c1c..e92fd4b0 100644
--- a/src/renderer/src/MagicNotesWorkspace.test.tsx
+++ b/src/renderer/src/MagicNotesWorkspace.test.tsx
@@ -1460,7 +1460,7 @@ describe('MagicNotesWorkspace detail behavior', () => {
     const { container } = render(<MagicNotesWorkspace onNotify={onNotify} />)
     await openNote()
     expect(container.querySelector('.magic-note-detail-header > :first-child')).toBe(screen.getByLabelText('笔记标题'))
-    expect(screen.getByRole('button', { name: '删除记录' })).toHaveClass('icon-button', 'magic-note-entry__delete-button')
+    expect(screen.getByRole('button', { name: '删除记录' })).toHaveClass('magic-note-entry__action-button', 'magic-note-entry__delete-button')
     fireEvent.click(screen.getByRole('button', { name: '编辑' }))
     expect(container.querySelector('.magic-note-entry__editor')).toBeVisible()
     expect(screen.getByRole('button', { name: '删除记录' })).toBeDisabled()
diff --git a/src/renderer/src/MagicNotesWorkspace.tsx b/src/renderer/src/MagicNotesWorkspace.tsx
index 528cd40b..a50230e7 100644
--- a/src/renderer/src/MagicNotesWorkspace.tsx
+++ b/src/renderer/src/MagicNotesWorkspace.tsx
@@ -3091,7 +3091,7 @@ function MagicNotesWorkspaceView({
                             </button>
                           )}
                           <button
-                            className="icon-button"
+                            className="magic-note-entry__action-button"
                             aria-label={t(entry.content.version === 2 ? 'canvas.edit' : 'actions.edit')}
                             title={t(entry.content.version === 2 ? 'canvas.edit' : 'actions.edit')}
                             disabled={Boolean(busy) || editingEntry?.id === entry.id}
@@ -3104,12 +3104,13 @@ function MagicNotesWorkspaceView({
                               })
                             }
                           >
-                            <Pencil aria-hidden="true" size={15} />
+                            <Pencil aria-hidden="true" size={14} />
+                            <span>{t(entry.content.version === 2 ? 'canvas.edit' : 'actions.edit')}</span>
                           </button>
                           <button
                             aria-label={t('actions.deleteEntry')}
                             title={t('actions.deleteEntry')}
-                            className="icon-button magic-note-entry__delete-button"
+                            className="magic-note-entry__action-button magic-note-entry__delete-button"
                             disabled={Boolean(busy) || Boolean(editingEntry)}
                             type="button"
                             onClick={() => {
@@ -3119,7 +3120,8 @@ function MagicNotesWorkspaceView({
                               setDeletingEntryId(entry.id)
                             }}
                           >
-                            <Trash2 aria-hidden="true" size={15} />
+                            <Trash2 aria-hidden="true" size={14} />
+                            <span>{t('actions.deleteEntry')}</span>
                           </button>
                         </div>}
                       </header>
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index 6421ba5f..dc93cb39 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -2433,7 +2433,8 @@
   position: absolute;
   top: var(--space-2);
   right: var(--space-2);
-  opacity: 1;
+  opacity: 0;
+  transition: opacity var(--motion-fast) ease-out;
 }
 
 .magic-note-row:hover .magic-note-more,
@@ -2721,9 +2722,18 @@
   line-height: 1;
 }
 
+.magic-note-entry {
+  position: relative;
+}
+
+/* Floats over the top-right corner so the actions never take their own row. */
 .magic-note-entry__actions {
   display: flex;
-  gap: 2px;
+  position: absolute;
+  z-index: 1;
+  top: var(--space-1);
+  right: var(--space-2);
+  gap: var(--space-1);
 }
 
 .magic-note-entry__actions .icon-button {
@@ -2731,7 +2741,36 @@
   height: 28px;
 }
 
-.magic-note-entry__actions .magic-note-entry__delete-button:hover:not(:disabled) {
+.magic-note-entry__action-button {
+  height: 28px;
+  padding: 0 var(--space-2);
+  border: 0;
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: var(--font-caption);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.magic-note-entry__action-button:hover:not(:disabled),
+.magic-note-entry__action-button:focus-visible {
+  background: var(--surface-subtle);
+  color: var(--text-primary);
+}
+
+.magic-note-entry__action-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.magic-note-entry__actions .magic-note-entry__delete-button {
+  color: var(--danger-strong);
+}
+
+.magic-note-entry__actions .magic-note-entry__delete-button:hover:not(:disabled),
+.magic-note-entry__actions .magic-note-entry__delete-button:focus-visible {
   background: var(--danger-subtle);
   color: var(--danger-strong);
 }