jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-11-04 00:12:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Keep title visible, toggles to the right, gradient scroll affordance

Browse Source 
- 'Add agent' title stays visible always; 's' fades in when select mode
  activates ('Add agents')
- Team toggles appear to the right of the title, scroll horizontally
- Right-edge gradient (from-popover to-transparent) hints at more
  content when overflowing
This commit is contained in:
Taylor Ho
2026-05-20 22:25:46 -07:00
parent df7838496c
commit b682fb70e2
1 changed files with 49 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
desktop/src/features/channels/ui/QuickAddAgentPopover.tsx
View File

@@ -493,53 +493,65 @@ export function QuickAddAgentPopover({
>
{/* Header with animated title / team toggles */}
<div className="relative flex min-h-10 items-center gap-2 border-b pl-3 pr-1.5 py-1.5">
<AnimatePresence mode="wait">
{/* Title — always visible */}
<h3 className="shrink-0 text-sm font-semibold text-foreground">
Add agent
<AnimatePresence>
{selectMode ? (
<motion.span
initial={{ opacity: 0, width: 0 }}
animate={{ opacity: 1, width: "auto" }}
exit={{ opacity: 0, width: 0 }}
transition={{ duration: 0.2 }}
className="inline-block overflow-hidden"
>
s
</motion.span>
) : null}
</AnimatePresence>
</h3>
{/* Team toggles — appear to the right of title */}
<AnimatePresence>
{selectMode ? (
<motion.div
key="team-chips"
className="flex flex-1 items-center gap-1.5 overflow-x-auto"
className="relative flex min-w-0 flex-1 items-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.15 }}
>
{usableTeams.map((team, index) => (
<motion.div
key={team.id}
initial={{ opacity: 0, x: index === 0 ? 0 : 12 }}
animate={{ opacity: 1, x: 0 }}
transition={{
duration: 0.2,
delay: index * 0.05,
}}
className="shrink-0"
>
<Toggle
className="h-8 rounded-full px-3 text-xs"
onPressedChange={(pressed) =>
handleTeamToggle(team, pressed)
}
pressed={selectedTeamIds.has(team.id)}
size="sm"
variant="outline"
<div className="flex items-center gap-1.5 overflow-x-auto">
{usableTeams.map((team, index) => (
<motion.div
key={team.id}
initial={{ opacity: 0, x: index === 0 ? 0 : 12 }}
animate={{ opacity: 1, x: 0 }}
transition={{
duration: 0.2,
delay: index * 0.05,
}}
className="shrink-0"
>
{team.name}
</Toggle>
</motion.div>
))}
<Toggle
className="h-8 rounded-full px-3 text-xs"
onPressedChange={(pressed) =>
handleTeamToggle(team, pressed)
}
pressed={selectedTeamIds.has(team.id)}
size="sm"
variant="outline"
>
{team.name}
</Toggle>
</motion.div>
))}
</div>
{/* Gradient fade on right edge — scroll affordance */}
<div className="pointer-events-none absolute right-0 top-0 h-full w-6 bg-gradient-to-l from-popover to-transparent" />
</motion.div>
) : (
<motion.h3
key="title"
className="text-sm font-semibold text-foreground"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.15 }}
>
Add agent
</motion.h3>
)}
) : null}
</AnimatePresence>
{/* Right side: Select / Cancel button */}