Skip to content

feat(desktop): code block header toolbar / 代码块固定头部工具栏#3120

Open
HUQIANTAO wants to merge 3 commits into
esengine:main-v2from
HUQIANTAO:feat/code-block-toolbar
Open

feat(desktop): code block header toolbar / 代码块固定头部工具栏#3120
HUQIANTAO wants to merge 3 commits into
esengine:main-v2from
HUQIANTAO:feat/code-block-toolbar

Conversation

@HUQIANTAO

@HUQIANTAO HUQIANTAO commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Adds a fixed code-block header toolbar above the scrollable code body.
  • Keeps the language label visible for labelled blocks and shows auto for unlabelled blocks.
  • Provides both plain Copy and Copy as Markdown actions without duplicating copy buttons inside HljsCode.
  • Keeps HljsCode focused on memoized syntax highlighting while CodeViewer owns code-block actions.
  • Carries forward the fixed-header and language-label UX direction from feat(desktop): 代码块添加语言标签和固定头部栏 #4254.

Notes

The earlier language picker and per-workspace language persistence idea is intentionally deferred. The current implementation keeps the merged surface smaller and avoids shipping a partially wired workspace-memory path.

Verification

  • pnpm --dir desktop/frontend check:css passed.
  • git diff --check passed.
  • pnpm --dir desktop/frontend typecheck was attempted, but this checkout is missing generated Wails modules and still reports an existing src/lib/bridge.ts type constraint error.

…picker

Code blocks in chat previously had a single hover-revealed Copy button.
Replace it with a richer toolbar:

1. Copy as Markdown: wraps the value in a fenced code block (```lang) so
   the snippet pastes into a GitHub issue or README with full syntax
   highlighting preserved. The leading fence uses the current effective
   language (override, then prop, then the workspace's remembered-most-
   recent pick). Brief check-mark feedback reuses the existing pattern.

2. Language picker: a small chevron button next to the copy buttons.
   Opens a 30-entry menu of the most common languages the agent emits.
   The user's manual pick is persisted per-workspace (last 5 picks) in
   localStorage and used as the smart default for the next unlabelled
   block in that workspace. The override is held in CodeViewer state so
   highlighter re-runs the right hljs grammar; an Escape or outside click
   closes the picker without committing.

3. Reserved slots: the toolbar is shaped to accept 'Run in workspace' and
   'Open in editor' actions as future bridge additions — the layout
   doesn't need to change to add them.

The toolbar wrapper is a flex row at top-right of the code block; the
existing copy button keeps its position. The whole cluster is opacity-0
by default and reveals on :hover/:focus-within with an 80ms delay on the
fade-out so a mouse pass over the picker list doesn't blink the buttons
away mid-hover. prefers-reduced-motion is honored through the existing
@media rule.

New files: lib/codeBlockActions.ts (LANGS + rememberLang + suggestedLang
+ languageLabel), components/CodeBlockToolbar.tsx.
@github-actions github-actions Bot added the v2 Go rewrite (1.x) — main-v2 branch, active development label Jun 4, 2026

@esengine esengine left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two state bugs to fix before this lands:

  1. The language override lives in two places (CodeViewer state and CodeBlockToolbar state) and neither resets when props.value changes — a recycled instance in the virtualized transcript carries a stale language onto a different code block (the comment claims it resets; nothing does). Make it one piece of state, keyed/reset on value.
  2. CodeViewer never passes the workspace prop, so the rememberLang/suggestedLang persistence in codeBlockActions.ts is dead code in the only real mount — wire it or delete it.

Also drop the "(Reserved) Run / Open in editor" speculative comment slots per the repo comment policy, and rebase.

@SivanCola SivanCola self-requested a review as a code owner June 15, 2026 10:50
@github-actions github-actions Bot added the desktop Wails desktop app (desktop/**) label Jun 15, 2026
@SivanCola SivanCola changed the title feat(desktop): code-block hover toolbar with copy-as-MD and language picker feat(desktop): code block header toolbar / 代码块固定头部工具栏 Jun 15, 2026
@SivanCola

Copy link
Copy Markdown
Collaborator

Updated this PR in a4244ee to resolve the overlap with #4254 and bring the branch up to the current main-v2 base.

What changed:

  • Kept this PR as the primary implementation for the code-block action surface.
  • Moved the controls into a fixed header toolbar above the scrollable code body, carrying forward the key UX idea from feat(desktop): 代码块添加语言标签和固定头部栏 #4254.
  • Preserved plain Copy, added Copy as Markdown, and kept unlabelled code blocks copyable by showing auto instead of hiding the toolbar.
  • Deferred the language picker and workspace persistence path so we do not ship a partially wired feature.

Verification:

  • pnpm --dir desktop/frontend check:css passed.
  • git diff --check passed.
  • pnpm --dir desktop/frontend typecheck was attempted, but this checkout is missing generated Wails modules and still reports an existing src/lib/bridge.ts type constraint error.

Authorship note: @HUQIANTAO is the primary author of this PR. @whale-fall-ouo contributed as a collaborator by proposing the fixed-header and visible-language UX in #4254; that idea has been carried into this PR, so please credit @whale-fall-ouo as a co-contributor to the final repository change.

@SivanCola

Copy link
Copy Markdown
Collaborator

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a4244ee817

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread desktop/frontend/src/components/CodeBlockToolbar.tsx Outdated
@SivanCola SivanCola enabled auto-merge June 15, 2026 11:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

desktop Wails desktop app (desktop/**) v2 Go rewrite (1.x) — main-v2 branch, active development

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants