feat(giveback): gift entry point with live activity + invite prompt#6278
Closed
tsahimatsliah wants to merge 22 commits into
Closed
feat(giveback): gift entry point with live activity + invite prompt#6278tsahimatsliah wants to merge 22 commits into
tsahimatsliah wants to merge 22 commits into
Conversation
Adds the giveback header entry point: a calm gift icon that surfaces community momentum and pulls people into /giveback. - GivebackGiftButton: calm resting gift (header/rail variants), press feedback - GivebackGiftDock: composition point + imperative API (pulseActivity, showPrompt) - Polymarket-style bare "+$" dollar jumps beside the gift (community social proof) - GivebackInvitePrompt: wide, compact, mascot-fronted invite card with a countdown ring on the close button (rotating generic community messaging) - GivebackConfettiBurst + motion classes in base.css (bounce:0, reduced-motion safe) - GivebackGiftEntry: container gated on featureGiveback, wired into HeaderButtons - Storybook playgrounds (gift button states + interactive live playground) Note: the money pulses + prompt cadence are a review placeholder driven by a local timer — to be replaced by real backend community-activity signals. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The V2 sidebar gift icon linked to the referral/invite page. When the giveback experiment is on for the user it now links to /giveback instead, falling back to invite otherwise. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Remove the pulsing green "live" dot from the toast (and the unused `live` prop) - Swap the cabbage ring for a plain subtle gray border - Full-width left column: eyebrow, headline, body, and CTA below the text - Move the mascot to the bottom-right, below the close (X) button Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
A floating bottom-right panel (top z-index) to drive the entry point manually for review on a preview deploy or locally. Opt in with ?giveback_debug — never shows for real users. Buttons trigger the money jump, each invite prompt variant, and reset, all on the live header gift. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The feature flag defaults off in production/preview builds, so the QA panel never rendered there. The debug param now force-shows the gift entry and panel regardless of the flag (still requires login). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Toast CTA is now the neutral (white) primary button, not cabbage - Mascot is taller (bottom-anchored) for more presence - Lighter font weights on the eyebrow (medium) and headline (semibold) - Drop the em dash from the community-raised prompt copy Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Portal the QA panel to document.body so its fixed positioning isn't trapped by a transformed header ancestor - Detect ?giveback_debug from window.location.search (router.query can be empty during static render/hydration) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Enlarge the mascot ~20%, center both columns vertically and move the close button to an absolute corner so the padding is equal on all sides. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The panel lived inside the header entry, which the new layout doesn't render. Make it a self-contained harness (its own live gift preview + controls) mounted globally in MainLayout, so ?giveback_debug shows it on any layout. Add prompt placement overrides so the preview's toast opens on-screen from the corner. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- The new-layout rail gift is now the giveback entry: GivebackGiftEntry wraps the rail gift link (via a new dock `children` anchor) so money jumps, the invite prompt and the celebration play on the actual sidebar icon - QA panel now drives whichever entry is mounted (header or rail) through a small window event bus, instead of a separate preview - Ambient cadence claimed by a single instance so header/rail can't double-fire - Toast mascot bottom-anchored + enlarged to remove the bottom gap Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
For the sidebar (rail) entry, portal the invite prompt and fix it at the same placement as the support/settings/profile menus (left-20 bottom-3 ml-2, z-popup) instead of anchoring it to the gift with a tail. Also fixes rail overflow clipping. Header entry keeps its anchored placement. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Drive the auto-dismiss with useTimedAnimation (the app's standard toast timer) so the countdown ring is JS-driven and stays in sync - Pause the countdown while the cursor rests on the gift OR the toast, and resume from where it left off (never from scratch) - Stop re-arming the timer every render (onClose was an unstable dependency) via a ref, and remount a replacing prompt (fresh timer + confetti) - Remove the dead CSS-driven ring keyframe Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Clicking the gift icon or the toast CTA navigates to /giveback, so close the prompt — no need to keep showing it once the user is on the page. Works for the header button, the toast CTA, and the rail link (capture-phase dismiss). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Swap the invite-friends dog for the campaign's own Giveback charm (cloudinaryCharmGiveback, shared constant), rendered with mix-blend-screen like GivebackMascot. Dedupe the mascot src into the shared constant. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Mobile placement is parked for a later PR, so gate the entry on laptop+ to avoid an incidental appearance on non-feed mobile headers. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…-layout header The Live playground rendered the real GivebackGiftDock (Tooltip -> useQueryClient) without a QueryClientProvider, so it errored at runtime. Add the withGiveback decorator and make the mock header match the real old-layout header (h-16, border-b, real action-cluster order) so the entry is validated in context. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Match NotificationsBell exactly (Float, w-10, centered, no side padding) so the gift isn't wider than the other header buttons. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 tasks
Member
Author
|
Superseded by #6281 — the engineering-ready version of this entry-point work, ported onto latest main. That PR drops the review-only QA scaffolding (GivebackDevPanel, the giveback_debug overrides, the MainLayout mount) and keeps the feature behind the existing |
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.
Changes
Adds the giveback header entry point — an acquisition hook whose job is to pull people into
/giveback, not to track personal contributions.GivebackGiftButton— a calm gift icon at rest (header + rail variants, press feedback). No progress meter, no notification badge.GivebackGiftDock— composition point with an imperative API (pulseActivity,showPrompt,reset) the wiring drives.+$figures pop beside the gift as community money lands (social proof), offset to stay legible.GivebackInvitePrompt— a wide, compact, mascot-fronted invite card (daily.dev charm dog) with rotating generic/community-framed messaging, confetti on celebratory moments, and an auto-dismiss countdown ring on the close button (5s).GivebackConfettiBurst+ new motion classes inbase.css— allbounce:0(no overshoot) per our interface-craft guidelines and reduced-motion safe.GivebackGiftEntry— container gated on the existingfeatureGivebackflag (on in dev, per-cohort in prod) + logged-in; wired intoHeaderButtonsbetween quests and notifications; navigates to/giveback.Features/Giveback/Entry points/*: resting gift-button states + an interactive live playground.Note
The money pulses and invite-prompt cadence are currently driven by a local timer as a review placeholder. Before this ships for real, replace them with live backend community-activity signals, and swap the hardcoded
$12,340in the prompt copy for the real community total.The new-layout rail (bottom-left) placement is intentionally deferred to a focused follow-up (SidebarDesktopV2 is large; wanted to land the header first).
Events
Experiment
No new experiment flag — reuses the existing
givebackfeature flag that already gates the page.Manual Testing
featureGivebackon in dev)🤖 Generated with Claude Code
Preview domain
https://claude-lucid-saha-dd7639.preview.app.daily.dev