mirror of
https://github.com/block/buzz.git
synced 2026-11-01 06:51:17 +00:00
01bb32123c
The one strip transition that can't be an in-place relabel — an agent's first promotion from the merged typing group into a status pill — played as exit-here/enter-there: the avatar dropped out of the overlapping group while a new pill faded in beside it. Give both avatar homes a matching motion layoutId so the avatar MORPHS from the group into the new pill (geometry keeps the hop short: a new pill appends rightmost, directly adjacent to the trailing typing slot). - desktop/src/features/channels/ui/composerStripAvatarLayout.ts: new leaf module — ComposerStripAvatarScopeContext (per-strip namespace), useComposerStripAvatarLayoutId, and the shared morph spring. layoutIds are app-global and the channel strip + thread panel strip can be mounted at once, so ids bake in a per-strip scope string. Motion's own LayoutGroup id namespacing is deliberately NOT used: LayoutGroup re-measures every layout-animating member whenever any member updates, which turned each pill label ticker resize into a group-wide onLayoutAnimationStart storm that permanently held the pills' deferred label swaps (caught by the hover-freeze e2e test) - desktop/src/features/channels/ui/BotActivityBar.tsx: strip provides the scope via React.useId(); the pill avatar is wrapped in a motion.div carrying the shared-element id (dropped under reduced motion) - desktop/src/features/messages/ui/TypingIndicatorRow.tsx: avatar extracted into a TypingAvatar sub-component that reads the scope from context — no new props, and typing rows rendered outside a strip (context null) are unaffected - ChannelComposerActivityRow.tsx / ChannelPane.tsx: no call-site wiring needed beyond the strip itself (context flows through the typingIndicator slot) E2E: full pill/typing strip set passes (10/10 smoke), including the hover-freeze membership test that failed under the LayoutGroup approach. Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Buzz
Desktop chat shell with:
- Tauri + React + TypeScript + Vite
- Tailwind CSS
- shadcn/ui-ready shared components
- Biome (lint/format/check)
- Feature-driven frontend structure
Scripts
pnpm dev- run the web frontendpnpm tauri dev- run the desktop apppnpm build- typecheck and build frontendpnpm typecheck- TypeScript checkspnpm lint- Biome lintpnpm format- Biome format (write)pnpm check- Biome check
Structure
src/shared- reusable app-wide code (ui,lib,styles)src/features- feature modules (vertical slices)src/app- top-level app composition