Skip to content

feat(shared): add ExtensionShowcase onboarding component - #6189

Open
tsahimatsliah wants to merge 14 commits into
mainfrom
claude/sharp-chebyshev-cf08f4
Open

feat(shared): add ExtensionShowcase onboarding component#6189
tsahimatsliah wants to merge 14 commits into
mainfrom
claude/sharp-chebyshev-cf08f4

Conversation

@tsahimatsliah

@tsahimatsliah tsahimatsliah commented Jun 14, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Member

What

A reusable, Sider-style feature walkthrough that explains the value of the daily.dev browser extension.

  • Vertical feature dock on the left (desktop) listing each capability with an icon + label, and an active highlight.
  • Detail panel on the right that swaps media (video or image) + title + description as you select a feature.
  • Mobile: the dock collapses into a horizontally-scrollable tab strip above the detail panel.
  • Prop-driven: pass your own features, defaultFeatureId, CTA, and onFeatureChange/onCtaClick handlers. Ships with the default daily.dev feature set (new tab feed, AI search, bookmarks, companion, reading streaks, Squads, shortcuts).
  • Video is video-first (autoplay/muted/loop) with image + retina fallback. Real per-feature clips can be dropped in later via the media prop — current assets reuse the existing onboarding screenshot/video as placeholders.

Decoupled shared component so it can be reused in onboarding, modals, and pages. A Storybook story (Components/Onboarding/ExtensionShowcase) is included as the live preview.

Files

  • packages/shared/src/components/onboarding/ExtensionShowcase/ — component, media renderer, default features, types, tests
  • packages/storybook/stories/components/ExtensionShowcase.stories.tsx

Verification

  • Strict typecheck passes
  • ESLint clean
  • Component tests pass (default selection, feature switching, defaultFeatureId, CTA toggle)

🤖 Generated with Claude Code

Preview domain

https://claude-sharp-chebyshev-cf08f4.preview.app.daily.dev

@tsahimatsliah @claude
feat(shared): add ExtensionShowcase onboarding component
37a1f31 
Sider-style feature walkthrough for the daily.dev extension: a vertical
feature dock on desktop that collapses to a horizontal scrollable tab strip
on mobile, with a prop-driven media (video/image) + title + description
detail panel. Ships with the default daily.dev feature set and a Storybook
story. Reusable across onboarding, modals, and pages.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 14, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
daily-webapp Ready Ready Preview Jun 15, 2026 2:52pm
storybook Building Building Preview Jun 15, 2026 2:52pm

Request Review

@tsahimatsliah @claude
feat(shared): refine ExtensionShowcase feature set and copy
1a18f34 
Reorder the default features for conversion and rewrite to benefit-led
copy grounded in real extension capabilities:
- add "Read it here" (in-app reader) to highlight reduced tab clutter
- reframe companion around context/comments/related articles
- sharpen AI search around community-vetted dev content
- tie shortcuts and reading streak to the new-tab takeover

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 14, 2026 11:08
@tsahimatsliah @claude
feat(shared): make ExtensionShowcase extension-exclusive
654b547 
Drop webapp-also features (AI search, Squads, bookmarks) that don't
motivate installing the extension. Keep only browser-level powers the
website can't replicate, with clever benefit-led framing:
- new tab takeover, companion on any site, read-it-here embedded reading
- top-sites shortcuts, ambient streak habit
- add "Focus mode" (pause the new tab) — control + install objection-handling

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(shared): reprioritize ExtensionShowcase, split shortcuts
bf6fa8b 
Lead with "Read it here" as the top value, keep the new-tab feed high,
and split shortcuts into two distinct items:
- Most visited: auto-pulled from the browser's top sites
- Shortcuts: custom pinned apps/tools

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(shared): add Daily brief to ExtensionShowcase, enrich shortcuts
77532a3 
Lead with the personalized daily brief (the AI "presidential briefing"
delivered as a morning ritual on your first tab). Mention one-click
bookmarks-bar import in the shortcuts copy.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 14, 2026 13:38
@tsahimatsliah @claude
feat(shared): frame Daily brief as auto-opening on the new tab
eb60b71 
Lean into the "brief on wake" concept — the personalized brief opens
itself on the first new tab of the day, no inbox or app to open.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(shared): reorder ExtensionShowcase dock
0645ae0 
New order: new tab feed, read it here, daily brief, most visited,
shortcuts, companion, reading streak, focus mode.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(shared): redesign ExtensionShowcase for focus and conversion
7b1a3db 
Match the Sider-grade structure: a soft pastel field that funnels the eye
inward, a contained white card holding the dock + preview, a sharp accented
title (sparkle + brand eyebrow) that changes per feature, and an oversized,
product-specific primary CTA. Drop the static title/description props in
favor of the dynamic per-feature headline.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 14, 2026 15:00
@tsahimatsliah @claude
feat(shared): static header, per-feature CTA, softer ExtensionShowcas…
7569e08 
…e bg

- Revert the per-tab dynamic title; the header is static again and the
  per-feature headline lives back in the detail panel.
- CTA copy now adapts to the active feature (e.g. "Get your daily brief"),
  falling back to ctaLabel when a feature defines none.
- Soften the background to a faint cabbage tint fading to the page color so
  it stops competing with the reading area.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(shared): soften ExtensionShowcase background, trim header copy
5a4fa19 
The previous "subtlest" accent maps to the raw vivid hue, so it read bold.
Switch to the alpha-based overlay-float-cabbage tint (~8%) for a soft, clean
pastel wash. Shorten the default title and drop the default subtitle to cut
text noise at the top.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 3 commits June 14, 2026 23:32
@tsahimatsliah @claude
feat(shared): move CTA inside the card, single message per feature
4d35dc7 
- The primary CTA now lives inside the white card, full-width below the
  dock + preview row (matching the reference).
- Collapse the detail panel to one message: drop the per-feature title and
  show a single value sentence per feature.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(shared): align ExtensionShowcase CTA to the right column
aaa12be 
Move the primary CTA inside the detail column, under the message, so it
sits only on the right side rather than spanning the full card width.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(shared): refresh ExtensionShowcase dock icons
b92780e 
New tab feed -> NewTab, Read it here -> Sites (globe), Daily brief -> TLDR,
Most visited -> Star, Companion -> SidebarArrowLeft (expand sidebar),
Reading streak -> Hot (flame), Focus mode -> Moon. Shortcuts unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(shared): reduce ExtensionShowcase CTA Chrome icon size
fea2cee 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
capJavert
capJavert reviewed Jul 28, 2026
View reviewed changes

@capJavert capJavert left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

There is a hooks-order issue in ExtensionShowcase: it throws on !features.length before useState, so changing features between empty and non-empty across renders conditionally changes the number of hooks. Please move the hook above the guard or enforce non-empty input at the type/API boundary. Also, the default feature media are explicitly placeholders and the component has no production consumer yet; please confirm whether this should ship as dead shared code before approval.

@tsahimatsliah

tsahimatsliah commented Jul 29, 2026

Copy link
Copy Markdown
Member Author

There is a hooks-order issue in ExtensionShowcase: it throws on !features.length before useState, so changing features between empty and non-empty across renders conditionally changes the number of hooks. Please move the hook above the guard or enforce non-empty input at the type/API boundary. Also, the default feature media are explicitly placeholders and the component has no production consumer yet; please confirm whether this should ship as dead shared code before approval.

@capJavert this one is not ready for review since we don't published the layout v2 yet. So we decided to place it on hold.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@capJavert capJavert capJavert left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@tsahimatsliah @capJavert