feat(shared): add ExtensionShowcase onboarding component#6189
Open
tsahimatsliah wants to merge 14 commits into
Open
feat(shared): add ExtensionShowcase onboarding component#6189tsahimatsliah wants to merge 14 commits into
tsahimatsliah wants to merge 14 commits into
Conversation
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>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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>
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>
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>
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>
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>
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>
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>
…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>
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>
- 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>
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>
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>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
A reusable, Sider-style feature walkthrough that explains the value of the daily.dev browser extension.
features,defaultFeatureId, CTA, andonFeatureChange/onCtaClickhandlers. Ships with the default daily.dev feature set (new tab feed, AI search, bookmarks, companion, reading streaks, Squads, shortcuts).mediaprop — 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, testspackages/storybook/stories/components/ExtensionShowcase.stories.tsxVerification
defaultFeatureId, CTA toggle)🤖 Generated with Claude Code
Preview domain
https://claude-sharp-chebyshev-cf08f4.preview.app.daily.dev