feat: implement micro-interaction ads platform

[tomeredlich]

Handover

This branch introduces a Micro-Interaction Ads Platform across feed, post, profile, wallet, and tags surfaces. The goal is to add sponsored/branded micro-interactions that feel native while remaining clearly labeled and testable.

What changed

• Added a new brand/sponsorship foundation in shared code:
  • useBrandSponsorship and brand utilities for sponsorship logic and rendering decisions.
  • Reusable branded components like BrandedTag, HighlightedWord, SponsoredTooltip, SponsoredTagHero, and MentionedToolsWidget.
• Added promoted checklist experience:
  • New checklist components (PromotedChecklist, banner, and menu item variants) and usePromotedChecklist hook.
• Added sponsored and branded card/widget experiences:
  • TrendingTagsCard updates, wallet sponsored coupon widgets/cards, and post/widget integration points.
• Added branded upvote/micro-interaction UI:
  • New BrandedUpvoteAnimation and UpvoteButtonIcon updates for contextual sponsored interaction behavior.
• Integrated into existing app surfaces:
  • Feed/post actions and tags flow updates.
  • Profile/settings menu entry points.
  • New coupons settings page at packages/webapp/pages/settings/coupons.tsx and wallet/tags page integrations.

Main files to review

• Shared brand primitives and logic:
  • packages/shared/src/lib/brand.ts
  • packages/shared/src/hooks/useBrandSponsorship.ts
• Promoted checklist:
  • packages/shared/src/hooks/usePromotedChecklist.ts
  • packages/shared/src/components/checklist/PromotedChecklist.tsx
• Branded interactions/components:
  • packages/shared/src/components/brand/BrandedUpvoteAnimation.tsx
  • packages/shared/src/components/cards/common/UpvoteButtonIcon.tsx
  • packages/shared/src/components/brand/MentionedToolsWidget.tsx
• Webapp entry points:
  • packages/webapp/pages/settings/coupons.tsx
  • packages/webapp/pages/wallet.tsx
  • packages/webapp/pages/tags/[tag].tsx

How to run and see changes locally

1. Install dependencies (if needed):
   • pnpm install
2. Start webapp:
   • pnpm --filter webapp dev:notls
3. Validate key areas in browser:
   • Feed cards / post actions: verify sponsored tag/tooltip behavior and branded upvote interaction.
   • Tag page (/tags/[tag]): verify sponsored hero/tag rendering and related interaction states.
   • Wallet (/wallet): verify sponsored coupon widget/card rendering.
   • Coupons settings (/settings/coupons): verify new settings page and UX flow.
   • Profile/settings menu: verify checklist/menu integrations and promoted checklist entry points.

Test plan

• Open feed and verify branded/sponsored UI labels are visible and correctly styled.
• Trigger upvote interactions on supported cards and verify branded animation/icon behavior.
• Visit /tags/javascript (or another existing tag) and verify sponsored tag hero/tooltip behavior.
• Visit /wallet and confirm sponsored coupon components render without layout regressions.
• Visit /settings/coupons and validate navigation + UI states.
• Open profile/settings menu and verify promoted checklist integrations.
• Run lint on touched packages:
  • pnpm --filter shared lint
  • pnpm --filter webapp lint

Notes

• Branch is already pushed and up to date with origin/Micro-interactions-ads.
• There is an untracked local file .cursor/debug-1c8d7a.log not included in this PR.

Made with Cursor

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Error		Mar 12, 2026 9:55pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		Mar 12, 2026 9:55pm

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[tomeredlich]

Handover note for reviewers/testers:

• This PR wires branded/sponsored micro-interactions across feed, post actions, tags, profile menu/checklist, wallet, and coupons settings.
• The biggest implementation areas are:
  • packages/shared/src/lib/brand.ts
  • packages/shared/src/hooks/useBrandSponsorship.ts
  • packages/shared/src/hooks/usePromotedChecklist.ts
  • packages/shared/src/components/brand/*
  • packages/shared/src/components/checklist/*
  • packages/webapp/pages/settings/coupons.tsx

How to see/test quickly:

1. pnpm --filter webapp dev:notls
2. Validate:
   • feed + post actions (sponsored labels/tooltip + branded upvote behavior)
   • /tags/javascript (sponsored tag hero + related UI)
   • /wallet (sponsored coupon widget/card)
   • /settings/coupons (new coupons settings page)
   • profile/settings menu (promoted checklist integrations)
3. Optional checks:
   • pnpm --filter shared lint
   • pnpm --filter webapp lint

PR description contains full change breakdown and checklist.