Skip to content

Slides: thumb context menu, mode toggles, dark-mode shapes#206

Merged
hackerwins merged 2 commits into
mainfrom
slides-thumb-context-menu-toolbar-select
May 10, 2026
Merged

Slides: thumb context menu, mode toggles, dark-mode shapes#206
hackerwins merged 2 commits into
mainfrom
slides-thumb-context-menu-toolbar-select

Conversation

@hackerwins

@hackerwins hackerwins commented May 10, 2026

Copy link
Copy Markdown
Collaborator

Summary

Five small UX fixes to the slides editor reported by the user.

  • Thumbnail right-click menu — New / Duplicate / Delete (singular or plural by selection set) and Change layout… (single only). Selection collapses to the right-clicked slide if not already in the multi-set, matching canvas-side semantics. Delete is gated against deck-wipe so the editor never loses its render target.
  • Shape preview dark-mode fixctx.strokeStyle = "currentColor" was painting black because Canvas 2D doesn't understand the CSS keyword. Now resolves through getComputedStyle(canvas).color so previews follow text-foreground in both themes.
  • Toolbar mode group — adds a Select toggle (IconPointer) to the left of Text. Select / Text / Shape now form an exclusive group: exactly one is always pressed, so the user can always tell which insert mode they're in. Shape trigger drops its "Shape" text label, becoming icon-only with the same Toggle pressed visual.
  • First-slide seedslides-view.tsx calls addSlide("blank") when a brand-new deck loads with slides: [], since the editor's render() bails out without a current slide.

22 unit tests added in thumbnail-panel.test.ts covering single/multi labels, selection-collapse on right-click outside the multi-set, New / Duplicate / Delete behavior, current-slide reassignment after delete, and the deck-wipe + multi-select disabled gates.

Self code review came back Ready to merge — no Critical or Important issues; minor cleanup suggestions deferred.

Test plan

  • pnpm verify:fast green (run locally)
  • Manual smoke in pnpm dev:
    • Right-click a thumbnail → menu mounts with single-slide labels; pick each item.
    • Shift-click two thumbnails, right-click one → "Delete 2 slides" / "Duplicate 2 slides" labels; "Change layout…" disabled.
    • Right-click a slide outside the multi-set → selection collapses to that one.
    • Delete the only slide → menu item disabled.
    • Toggle dark mode → shape picker preview outlines visible.
    • Click Select / Text / Shape → exactly one is pressed; ESC returns to Select.
    • Create a brand-new presentation → opens with one blank slide (not a blank canvas).

🤖 Generated with Claude Code

@coderabbitai

coderabbitai Bot commented May 10, 2026

Copy link
Copy Markdown

Warning

Rate limit exceeded

@hackerwins has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 31 minutes and 2 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 165929c7-72ad-4b9e-b8af-619eac9d0b7c

📥 Commits

Reviewing files that changed from the base of the PR and between 31b4056 and 86e2630.

📒 Files selected for processing (9)
  • docs/tasks/README.md
  • docs/tasks/archive/2026/05/20260510-slides-thumb-context-menu-lessons.md
  • docs/tasks/archive/2026/05/20260510-slides-thumb-context-menu-todo.md
  • docs/tasks/archive/README.md
  • packages/frontend/src/app/slides/shape-picker.tsx
  • packages/frontend/src/app/slides/slides-formatting-toolbar.tsx
  • packages/frontend/src/app/slides/slides-view.tsx
  • packages/slides/src/view/editor/thumbnail-panel.test.ts
  • packages/slides/src/view/editor/thumbnail-panel.ts
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch slides-thumb-context-menu-toolbar-select

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

hackerwins and others added 2 commits May 10, 2026 20:27
Five small UX fixes to the slides editor surface:

- Right-click on a slide thumbnail now opens an editing menu with
  New / Duplicate / Delete (singular or plural by selection) plus
  Change layout… (single-target only). Selection collapses to the
  right-clicked slide if it wasn't already in the multi-set, matching
  the canvas right-click semantics. Delete is gated when one slide
  remains so the editor never loses its render target.

- The shape picker preview canvases relied on `currentColor`, which
  Canvas 2D doesn't understand and silently rendered black —
  invisible against the dark popover. The strokeStyle now resolves
  through `getComputedStyle(canvas).color` so the previews follow
  `text-foreground` in both themes.

- The toolbar grew an explicit Select toggle (IconPointer) to the
  left of Text. Select / Text / Shape now form an exclusive group:
  exactly one is pressed, so the user can always tell which insert
  mode they're in. The Shape trigger drops its "Shape" text label,
  becoming icon-only with a Toggle-style pressed visual that matches
  Select / Text.

- New presentations land with `slides: []`, which the editor's
  render() bails out on. SlidesView now seeds a single blank slide
  when the array is empty so brand-new decks open with content
  instead of a blank canvas.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
Archive 20260510-slides-thumb-context-menu after the implementation
landed on this branch. Adds a lessons file capturing five non-obvious
findings — Canvas-2D `currentColor` falling back to black, the
in-package `showContextMenu` reuse, the canvas right-click selection-
collapse pattern, the always-one-pressed insert-mode partition, and
the empty-deck `render()` bail-out that motivated the first-slide seed.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
@hackerwins
hackerwins force-pushed the slides-thumb-context-menu-toolbar-select branch from 2393930 to 86e2630 Compare May 10, 2026 11:30
@github-actions

github-actions Bot commented May 10, 2026

Copy link
Copy Markdown
Contributor

Verification: verify:self

Result: ✅ PASS in 189.8s

Lane Status Duration
sheets:build ✅ pass 14.8s
docs:build ✅ pass 13.1s
slides:build ✅ pass 10.0s
verify:fast ✅ pass 104.3s
frontend:build ✅ pass 19.3s
verify:frontend:chunks ✅ pass 0.4s
backend:build ✅ pass 5.2s
cli:build ✅ pass 2.2s
verify:entropy ✅ pass 20.5s

Verification: verify:integration

Result: ✅ PASS

@hackerwins
hackerwins merged commit dd3ca28 into main May 10, 2026
1 check passed
@hackerwins
hackerwins deleted the slides-thumb-context-menu-toolbar-select branch May 10, 2026 11:31
@codecov

codecov Bot commented May 10, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

hackerwins added a commit that referenced this pull request May 10, 2026
Commit dd3ca28 added an explicit Select toggle and turned Shape into
an icon-only toggle, forming a Select/Text/Shape exclusive group on
the slides toolbar. The 8 baselines that capture that toolbar (and
the full harness shots that contain it) drifted as a result, breaking
verify-browser on main.

Regenerated via `pnpm verify:browser:docker:update` so the rendering
matches the CI Playwright container exactly.

Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>
hackerwins added a commit that referenced this pull request May 10, 2026
Each package already has its own README, but there was no top-level
entry point inside `packages/` that summarised what lives where.
Splits the listing into engines (sheets, docs, slides) and apps and
services (frontend, backend, cli, documentation) so a new contributor
can orient before drilling into a single package.

Four active tasks have shipped on main (PR #189 undo-destroys-initial-block,
#202+#205 slides-shapes-p1, #206 slides-thumb-responsive, #204
contributing-md) but their todo files were still sitting in
`docs/tasks/active/` because some checkboxes were never ticked. Mark
the remaining items done and run `pnpm tasks:archive` to move the five
files into `archive/2026/05/`.

While there, eight April task docs were still loose at the archive
root (predating the by-month layout). Move them into `archive/2026/04/`
so the directory is uniformly organised and the index counts stay
accurate.

Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>
hackerwins added a commit that referenced this pull request May 10, 2026
Adding 8 align + 2 distribute buttons to the slides formatting
toolbar reflows every mobile slides harness scenario (toolbar height
wraps differently) and shifts the dedicated slides-toolbar desktop
capture. Same kind of refresh as PR #207 did for #206.

37 baselines updated: 33 slides mobile scenarios + 2 slides-toolbar
desktop (light + dark.dark profile) + 4 root harness pages
(`harness-visual.browser.{,desktop.dark,mobile,mobile.dark}.png`).
Generated by `pnpm verify:browser:docker:update`.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
@hackerwins hackerwins mentioned this pull request May 11, 2026
6 tasks
hackerwins added a commit that referenced this pull request May 11, 2026
Adds @wafflebase/slides as a third surface alongside Sheets and Docs,
plus 53-shape library (Phase 1+2), adjustment handles for 9 pilot
shapes (P3-A.1), live snap guides, align/distribute toolbar, themed
authoring, and layout-change UI. Also ships Sheets cell comments
(Phase B), docs peer-avatar caret jump, yorkie-js-sdk 0.7.8 upgrade,
and CLI/REST API improvements (docs export imageFetcher, expired
session refresh, REST docs split). Minor bump because slides is a
new top-level package.

Highlights: #184 #185 #186 #187 #188 #189 #190 #191 #192 #197 #198
#201 #202 #203 #204 #205 #206 #207 #209 #210
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant