Skip to content

refactor(desktop): standardize UI with shadcn components - #379

Merged
wesbillman merged 3 commits into
mainfrom
use-components
Apr 21, 2026
Merged

wesbillman merged 3 commits into
mainfrom
use-components

Conversation

@wesbillman

@wesbillman wesbillman commented Apr 21, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

  • Avatar: Install shadcn Avatar, refactor UserAvatar and ProfileAvatar internals (~27 consumers, zero API changes)
  • Tabs: Install shadcn Tabs, replace PulseView custom TabButton
  • Tooltip: Replace ~30 native title="" attributes with shadcn Tooltip across 11 files, add root TooltipProvider
  • Spinner: New shared Spinner component, replace 7 ad-hoc spinner patterns with role="status" accessibility
  • Sonner: Install toast notifications with dark mode bridge, replace clipboard "Copied" timer patterns (4 files) and action notice/error banners (5 files)
  • Card: Install shadcn Card, replace ~15 hand-rolled card containers (rounded-xl border-border/70 bg-card/80 shadow-sm)
  • DropdownMenu: Replace PulseView AgentFilter hand-rolled dropdown (~80→35 lines)
  • Shared utilities: getInitials() for avatar fallbacks, useFeedbackToasts hook with StrictMode dedup

What we left alone (by design)

  • Static query error banners (persistent state, not transient notifications)
  • Form validation errors in dialogs (contextual, inline is correct)
  • SettingsView hand-rolled dialog (proper ARIA already, heavy customization needed for minimal gain)
  • ForumPostCard, WorkflowCard, import row cards (unique interaction/styling needs)
  • ScrollArea (cosmetic improvement, low priority)
  • RefreshCw spinners (semantically "refreshing", not "loading")

New shared components

avatar.tsx · tabs.tsx · spinner.tsx · card.tsx · sonner.tsx · useToastEffect.ts · initials.ts

Test plan

  • Verify avatar rendering in message rows, sidebar, typing indicator, profile cards — no flash of initials for cached images
  • Verify PulseView tabs switch correctly, screen reader announces tab panels
  • Hover over message action buttons, composer toolbar — tooltips appear (not native browser tooltips)
  • Trigger agent actions (start/stop/delete) — toast notifications appear instead of inline banners
  • Copy pubkey/token — "Copied to clipboard" toast appears
  • Toggle dark mode — toasts render with correct theme
  • Check card containers in Agents, Teams, Personas, Workflows sections
  • PulseView agent filter dropdown — keyboard nav works, click outside closes

🤖 Generated with Claude Code

wesbillman and others added 3 commits April 21, 2026 11:19
…p, Spinner

- Install shadcn Avatar and refactor UserAvatar + ProfileAvatar to wrap it
- Install shadcn Tabs and migrate PulseView from custom TabButton
- Replace ~30 native title="" attrs with shadcn Tooltip across 11 files
- Create shared Spinner component, replace 7 ad-hoc spinner patterns
- Extract shared getInitials() utility for avatar fallbacks
- Add root TooltipProvider in main.tsx

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
…or agent filter

- Install Sonner for toast notifications, bridge theme to dark mode
- Replace clipboard "Copied" state/timer patterns with toast.success
- Replace inline action notice/error banners with toasts via useFeedbackToasts hook
- Install shadcn Card, replace ~15 hand-rolled card containers
- Replace PulseView AgentFilter hand-rolled dropdown with DropdownMenu
- Extract useFeedbackToasts hook with StrictMode dedup
- Update e2e tests for toast selectors

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
Sonner stacks multiple toasts — the bare [data-sonner-toast] selector
is ambiguous. Filter by hasText and assert toBeVisible instead.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
@wesbillman
wesbillman merged commit d26fda9 into main Apr 21, 2026
13 checks passed
@wesbillman
wesbillman deleted the use-components branch April 21, 2026 20:03
BradGroux pushed a commit to BradGroux/buzz that referenced this pull request Aug 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant