Skip to content

feat(extension): redesign the toolbar popup - #10

Merged
AbianS merged 2 commits into
mainfrom
feat/extension-popup-redesign
Sep 25, 2026
Merged

AbianS merged 2 commits into
mainfrom
feat/extension-popup-redesign

Conversation

@AbianS

@AbianS AbianS commented Sep 25, 2026

Copy link
Copy Markdown
Member

Summary

Redesign of the toolbar popup, following the pattern of Arcade and Supademo: an anchored popup that closes as soon as recording starts.

Idle

  • Card showing the tab that will be recorded (favicon, title, host).
  • "Record this tab" CTA with an animated record glyph. The glyph stays static under prefers-reduced-motion.
  • Pages Chrome won't let extensions capture (chrome://, other extensions, the Web Store) get an explanation and a disabled CTA, instead of failing silently.
  • The last 3 finished recordings, with host, relative time and duration. Clicking one opens it in the editor.

Recording

  • REC chip with a live elapsed timer.
  • Card for the recorded tab, with a shortcut to jump to it when it isn't the active tab.
  • Step counter and "Stop & edit".

Pure helpers (isRecordableUrl, displayHost, formatElapsed, formatRelativeTime) live in entrypoints/popup/core/format.ts with unit tests. Data loading is in hooks/use-popup-data.ts. lib/db.ts gains listRecentRecordings().

Fix: cn() dropped text colors

tailwind-merge didn't know our custom type scale, so it read text-ui / text-2xs as text colors and merged away the real one. This is why the lime CTA showed white text. cn() now registers them as font sizes. This also affects the editor: anywhere these classes were combined with a text color, either the color or the size was being lost.

Test plan

  • pnpm --filter @rustrak/openshowcase-extension test (128 passing)
  • check-types, biome ci
  • Rendered the built popup with stubbed chrome.* in light/dark mode, in the idle, recording and unrecordable-page states
  • Load .output/chrome-mv3 unpacked in Chrome and record a real flow
  • Skim the editor for text whose size or color changed after the cn() fix

@AbianS
AbianS merged commit cec579b into main Sep 25, 2026
1 check passed
@AbianS
AbianS deleted the feat/extension-popup-redesign branch September 25, 2026 10:54
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