Skip to content

feat: move notes tools into studio-style content cards - #216

Merged
mrsibe merged 1 commit into
mainfrom
feat/notes-studio-layout
Oct 2, 2026
Merged

mrsibe merged 1 commit into
mainfrom
feat/notes-studio-layout

Conversation

@mrsibe

@mrsibe mrsibe commented Oct 2, 2026

Copy link
Copy Markdown
Owner

What does this PR do?

将最右侧笔记面板的四个创建入口从顶栏移入内容区,采用 NotebookLM Studio 风格的紧凑 2×2 工具卡片:创建笔记、思维导图、生成题目、Anki 卡片。

Why?

让入口具有可见文字,减少顶栏拥挤,并让工具和已有产物在同一内容区连续呈现。

What changed?

  • 顶栏只保留“笔记”标题;工具卡片和现有条目列表共享滚动区域。
  • 新增限定用于这四张卡片的淡蓝、淡紫、淡绿、淡沙色语义 token,包含明暗主题定义;同步扩展 DESIGN.md,不复用图表色、不放宽其他区域的配色规则。
  • 保持中性图标/文字、14px 标签、8px 圆角、细边框、无阴影;悬停叠加状态填充并保留彩色底色。
  • 保留所有现有操作、生成状态、对话框、列表排序与编辑器/未保存提醒。“创建笔记”仍为新建空白笔记,不新增 AI 生成功能。
  • 同步中英文空态提示,添加工具映射、token 范围、悬停样式及文案回归测试。

How was this tested?

  • npm run check:design — passed.
  • npm run typecheck — passed.
  • npm test — 496 tests passed.
  • npm run build — passed.
  • Changed-file ESLint — 0 errors; one existing react-hooks/exhaustive-deps warning in unchanged editor save logic.
  • Changed-file Prettier check and git diff --check — passed.
  • Independent subagent review identified and corrected hover fill replacement and a documentation/token mismatch.
  • Temporary Electron harness rendered the actual NotePanel with mocked IPC/store at 260px panel width in a short 300px window, across light/dark, English/Chinese, empty/populated states. Verified four cards, no horizontal overflow, label wrapping and shared scrolling. Verified hover retains opaque fill, visible keyboard Tab focus ring, and click dispatch for mocked create-note/mind-map callbacks.
  • This is isolated UI verification, not a full desktop generation/editor workflow test. Native Enter activation was not verified by the temporary harness. The environment lacks Chinese glyph fonts, so screenshots use English. No packaged-app smoke test is needed (renderer-only change).

Screenshots

Actual component with mocked local items; intentionally narrow/short to show wrapping. Temporary harness/scripts are not included in this PR.

Light Dark
Notes tools — light Notes tools — dark

Checklist

  • I have reviewed my own changes.
  • npm run typecheck passes.
  • npm run build passes.
  • Relevant isolated UI behavior and regression tests pass.
  • I have not included unrelated changes.
  • I have updated documentation when necessary.
  • Desktop/build/packaging changes: not applicable.

@github-actions github-actions Bot added the enhancement New feature or request label Oct 2, 2026
@mrsibe
mrsibe merged commit 911b009 into main Oct 2, 2026
4 checks passed
@mrsibe
mrsibe deleted the feat/notes-studio-layout branch October 2, 2026 05:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant