feat(desktop): preview zoom dropdown

[hqhq1025]

Summary

• Adds a zoom dropdown to the preview toolbar with steps 50/75/90/100/110/125/150/175/200%, default 100%.
• Wires previewZoom + setPreviewZoom into the Zustand store; PreviewPane applies the zoom via transform: scale() on the iframe wrapper (with inverse width/height so the layout box still fills the viewport).
• The artifact's own layout is untouched — pure visual scaling.
• Inline-comment composer is hidden when zoom != 100% to avoid stale rect math; tracked as a follow-up to make rect-based positioning zoom-aware.

i18n: added preview.zoom (en + zh-CN). Option labels are simple \${n}% strings.

Test plan

• pnpm typecheck
• pnpm test (added unit tests: default 100, set to 150 updates store)
• pnpm lint (no new errors; pre-existing warnings unchanged)
• Manual: open preview, click zoom, switch between 50% / 100% / 200% — iframe scales, artifact internals unchanged

PRINCIPLES §5b

• Compatibility: green — additive store field, default 100% preserves current behavior
• Upgradeability: green — store field is plain number, easy to persist later
• No bloat: green — no new deps, ~80 LOC, plain Tailwind + existing Tooltip
• Elegance: green — mirrors the existing export dropdown pattern

[github-actions]

Findings

• [Major] Inline comments are silently disabled when zoom is not 100% — this is a behavior regression without user-visible explanation, so annotation appears to stop working in zoomed views (apps/desktop/src/renderer/src/components/PreviewPane.tsx:140, apps/desktop/src/renderer/src/components/PreviewPane.tsx:157, apps/desktop/src/renderer/src/components/PreviewPane.tsx:175).
  Suggested fix:

  const inlineCommentDisabled = previewZoom !== 100;
  
  {inlineCommentDisabled && (
    <output className="...">{t('preview.inlineCommentsDisabledAtZoom')}</output>
  )}
  <InlineCommentComposer />

• [Major] previewZoom is not validated before being used as a divisor — 10000 / previewZoom can produce invalid dimensions (Infinity% / NaN%) and break preview layout if any caller sets 0 or a non-finite value (apps/desktop/src/renderer/src/components/PreviewPane.tsx:117, apps/desktop/src/renderer/src/store.ts:685).
  Suggested fix:

  const ZOOM_OPTIONS = [50, 75, 90, 100, 110, 125, 150, 175, 200] as const;
  
  setPreviewZoom(zoom) {
    const safe = ZOOM_OPTIONS.includes(zoom as (typeof ZOOM_OPTIONS)[number]) ? zoom : 100;
    set({ previewZoom: safe });
  }

• [Minor] Hardcoded UI size token bypass (min-w-[6rem]) violates the UI-token-only constraint and creates an untracked spacing primitive (apps/desktop/src/renderer/src/components/PreviewToolbar.tsx:182).
  Suggested fix:

  className="... min-w-[var(--size-dropdown-min)] ..."

Summary

• Review mode: initial
• 3 issues found in added/modified lines: one behavioral regression (silent inline-comment disable at non-100 zoom), one zoom-state correctness guard missing, and one UI token constraint violation.
• Not found in repo/docs: docs/VISION.md, docs/PRINCIPLES.md in this checkout.

Testing

• Not run (automation)
• Suggested additions: component tests for zoom dropdown interaction, preview scaling safety on invalid zoom input, and inline comment behavior at non-100 zoom.

open-codesign Bot

[github-actions]

[Major] Inline comments are hidden whenever zoom is not 100%, with no in-UI explanation. This is a silent behavior regression for annotation in zoomed preview states.

Suggested fix:

const inlineCommentDisabled = previewZoom !== 100;
{inlineCommentDisabled && <output className="...">{t(preview.inlineCommentsDisabledAtZoom)}</output>}
<InlineCommentComposer />

[github-actions]

[Major] setPreviewZoom accepts any number; downstream code divides by previewZoom, so 0/non-finite input can yield invalid dimensions and broken layout.

Suggested fix:

const ZOOM_OPTIONS = [50, 75, 90, 100, 110, 125, 150, 175, 200] as const;
setPreviewZoom(zoom) {
  const safe = ZOOM_OPTIONS.includes(zoom as (typeof ZOOM_OPTIONS)[number]) ? zoom : 100;
  set({ previewZoom: safe });
}

[github-actions]

[Minor] min-w-[6rem] introduces a hardcoded UI value instead of using design tokens.

Suggested fix:

className="... min-w-[var(--size-dropdown-min)] ..."

[github-actions]

Findings

• [Major] Hardcoded width value bypasses the design-token requirement — min-w-[6rem] introduces a raw UI size outside packages/ui tokens, violating the project’s hard constraint for tokenized UI values, evidence apps/desktop/src/renderer/src/components/PreviewToolbar.tsx:182.
  Suggested fix:

  className="absolute right-0 top-full mt-2 min-w-[var(--size-stage-min)] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-elevated)] py-1 z-10"

Summary

• Review mode: follow-up after new commits
• 1 issue found in added/modified lines.
• Not found in repo/docs: docs/VISION.md, docs/PRINCIPLES.md.

Testing

• Not run (automation)
• Suggested tests: add a component test that opens the zoom menu and asserts the token-backed width class is present.

open-codesign Bot

[github-actions]

[Major] min-w-[6rem] is a hardcoded UI size and violates the token-only UI constraint. Please switch this to an existing token-backed value (for example min-w-[var(--size-stage-min)]) so sizing stays centralized and consistent.

[github-actions]

Findings

• [Major] Hardcoded width value violates the token-only UI constraint — min-w-[6rem] introduces a raw UI size outside shared tokens, which conflicts with project constraints, evidence apps/desktop/src/renderer/src/components/PreviewToolbar.tsx:182.
  Suggested fix:

  className="absolute right-0 top-full mt-2 min-w-[var(--size-stage-min)] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-elevated)] py-1 z-10"

Summary

• Review mode: follow-up after new commits
• 1 issue found in added/modified lines.
• Not found in repo/docs: docs/VISION.md, docs/PRINCIPLES.md.

Testing

• Not run (automation)
• Suggested tests: add a component test asserting the zoom menu uses a token-backed min-width class.

open-codesign Bot

[github-actions]

[Major] min-w-[6rem] is a hardcoded UI size and violates the token-only UI constraint. Use a token-backed value instead, e.g. min-w-[var(--size-stage-min)].

Suggested fix:

className="absolute right-0 top-full mt-2 min-w-[var(--size-stage-min)] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-elevated)] py-1 z-10"

[github-actions]

Findings

• No high-confidence issues found in added/modified lines.

Summary

• Review mode: follow-up after new commits
• No issues found in the latest added/modified lines.
• Residual risk: zoom behavior is covered by unit tests for math/state, but there is still no UI-level test validating dropdown interaction and selection-to-comment flow across non-100% zoom and each viewport mode.
• Not found in repo/docs: docs/VISION.md, docs/PRINCIPLES.md.

Testing

• Not run (automation)
• Suggested tests: add a renderer component test for zoom dropdown open/select/close behavior and a Playwright path that clicks an element at 75%/200% zoom then applies an inline comment.

open-codesign Bot