feat(navbar): new account widget — balance chip, deposit slot, avatar

[diterra-code]

Summary

Updates the shared nav account widget in the UI kit to the new account-widget design, so every Bread app (Solidarity Fund, Stacks, Safety Net) picks it up once this is approved and released. Also lays the extensibility groundwork for future features.

What changed

• AccountMenu trigger is now the three-part chip from the new design:
  balance chip (useBreadBalance) · injected deposit action · divider · blo avatar · address · app-themed caret. (Was just address + caret.)
• depositSlot prop threaded Navbar → AccountSection → AccountMenu, so each app wires its own deposit/fund flow without the UI kit knowing app specifics. This is the hook for future features.
• New exported NavDepositButton — app-themed (orange/blue/jade per fund/stacks/net) lift/press button apps drop into depositSlot.
• Adds blo for deterministic avatars.

Usage (per app)

import { Navbar, NavDepositButton } from "@breadcoop/ui";

<Navbar
  app="fund"
  Link={Link}
  depositSlot={<NavDepositButton app="fund" onClick={openFundFlow} />}
>
  {nav}
</Navbar>

Build / verification

• ESM + CJS build pass (tsup); NavDepositButton exported.
• DTS (type-declaration) generation OOMs on the repo's existing heavy type graph (the package already has ~466 baseline tsc errors) — pre-existing and unrelated to this change. Happy to add a NODE_OPTIONS=--max-old-space-size bump to the build script in a follow-up if CI needs it.

Theming

Uses theme tokens (paper-main, surface-ink, surface-grey) + appsConfig[app] accent, so it themes correctly across all three apps.

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for breadcoopstorybook ready!

Name	Link
🔨 Latest commit	e6d7c80
🔍 Latest deploy log	https://app.netlify.com/projects/breadcoopstorybook/deploys/6a505ff58eb4370008439fb7
😎 Deploy Preview	https://deploy-preview-8--breadcoopstorybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Olaleye-Blessing]

@diterra-code Update Storybook for the updated nav.

[diterra-code]

Added mobile navbar work (design: Bread DS V1.1, node 727-3604) in 1d95c82:

Mobile account widget — AccountMenu is now responsive: desktop keeps the compact balance chip + dropdown; the mobile menu renders the full account card inline (NavAccountDetails: address + copy/explorer, balance, widget/action slots, sign out) instead of the compact chip.

Collapsible Solidarity apps — new collapsible prop on NavSolidarityApps; in the mobile menu the 'Solidarity apps' section is now collapsed by default and expands vertically on tap (title becomes a toggle with a rotating caret). Desktop dropdown content is unchanged.

Files: account-menu.tsx, solidarity-apps.tsx, navbar.tsx.

Verification: tsc --noEmit is clean for src/ (the many node_modules/viem/ox target errors are pre-existing and unrelated); tsup JS build succeeds. No isolated preview for the kit — visual QA is best done in Storybook or a consuming app with the wagmi/privy providers.

[diterra-code]

Added Storybook stories for the mobile navbar work in 7da122e (Components/Navbar):

• MobileAccountCard — the full account card rendered inline in the mobile menu (address + copy/explorer, balance, an example Claim widget + Deposit/Withdraw actions, sign out), behind a mocked wagmi + react-query + kit provider stack with a forced CONNECTED user.
• SolidarityAppsMobile — the collapsible "Solidarity apps" dropdown (collapsed by default, expands vertically on tap); no wallet context needed.

Privy is stubbed for Storybook via a Vite alias (.storybook/mocks/privy-react-auth.tsx) so the navbar renders without a real PrivyProvider/app id.

Verified: tsc --noEmit clean for src/, and npm run build-storybook builds successfully (both stories bundle). Run npm run storybook to interact with them.

[diterra-code]

Wired the exact account card into the mobile menu and reordered it to match 727-3622 (commit e6d7c80):

Mobile menu order now: header → account card (top) → links → collapsible Solidarity apps → Sign out (bottom) — previously the account block was at the bottom and Sign out was inside the card.

• Navbar gains optional onDeposit / onWithdraw / claimable{amount,onClaim} props (additive, non-breaking). The kit renders AccountCardMobile at the top of the menu (md:hidden) and a Sign out button at the bottom.
• Extracted address resolution into useConnectedAccount; the desktop chip and the mobile card share it.
• AccountMenu is now desktop-only (compact chip + dropdown); the old md:hidden NavAccountDetails card is replaced by AccountCardMobile.
• Desktop is untouched — every new mobile piece is md:hidden.

Gates: npm run lint (0 errors), type-check (clean), build-storybook (✓) all pass. Also removed a stale @next/next eslint-disable that was failing the lint gate.

Note / follow-up: the mobile menu opens via an imperative hamburger toggle, so build-storybook verifies compilation but not the open-menu visual — please open it in npm run storybook (the Connected and MobileAccountCardExact stories). And a separate app-stacks PR is needed to pass onDeposit/onWithdraw/claimable and to render its 'Start stacks group' link as the primary 'Create Stack' button per the design.