fix: keep note capture actions compact and right-aligned

Remove initial generic validation instructions, show size errors beside their fields, and expose capture scope through contextual help. Keep save errors beside actions where space allows and preserve content-sized Save buttons in narrow note workspaces. Release note: Note capture now uses a compact action bar with right-aligned buttons, on-demand scope help, and field-specific validation. Narrow workspaces no longer stretch the Save button.
2026-09-28 21:30:03 +08:00
parent 50e8fde64c
commit 393a07ccdf
11 changed files with 299 additions and 24 deletions
@@ -0,0 +1,48 @@
+import { useLayoutEffect } from 'react'
+import { createRoot } from 'react-dom/client'
+import type { DesktopApi } from '../../src/shared/contracts'
+import type { MagicNoteSource } from '../../src/shared/magic-notes-contracts'
+import { MagicNotesPanel } from '../../src/renderer/src/MagicNotesPanel'
+import { useMagicNoteDraft } from '../../src/renderer/src/use-magic-note-draft'
+import i18n from '../../src/renderer/src/i18n'
+import '../../src/renderer/src/styles.css'
+
+const parameters = new URLSearchParams(location.search)
+await i18n.changeLanguage(parameters.get('locale') === 'zh-CN' ? 'zh-CN' : 'en-US')
+document.documentElement.dataset.theme = parameters.get('theme') === 'dark' ? 'dark' : 'light'
+const source: MagicNoteSource = {
+  kind: parameters.get('kind') === 'conversation' ? 'conversation' : 'message',
+  conversationId: 'footer-conversation', messageIds: ['footer-message'],
+  capturedAt: '2026-09-26T00:00:00Z', conversationTitle: 'Footer discussion', projectName: 'Footer project'
+}
+document.body.dataset.scope = i18n.t(`capture.${source.kind === 'message' ? 'messageScope' : 'conversationScope'}`, { ns: 'magicNotes' })
+document.body.dataset.saveCount = '0'
+window.goodbuddy = {
+  magicNotes: {
+    search: async () => [],
+    onChanged: () => () => {},
+    create: async () => {
+      document.body.dataset.saveCount = String(Number(document.body.dataset.saveCount) + 1)
+      throw new Error('Storage unavailable. Please try again.')
+    }
+  }
+} as unknown as DesktopApi
+
+function Harness(): React.JSX.Element {
+  const state = useMagicNoteDraft()
+  const { setDraft } = state
+  useLayoutEffect(() => {
+    setDraft({ text: 'Captured text', initialText: 'Captured text', title: 'Footer discussion',
+      initialTitle: 'Footer discussion', targetId: '', newNote: false, source })
+  }, [setDraft])
+  return <>
+    <MagicNotesPanel state={state} active commentMode="after-save-manual" onNotify={() => {}}
+      onOpenWorkspace={() => {}} onOpenSource={async () => 'opened'} onCancelCapture={() => {}} />
+    {state.confirmation}
+  </>
+}
+
+const host = document.createElement('div')
+host.style.height = '100vh'
+document.body.append(host)
+createRoot(host).render(<Harness />)