janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ST-4uzuhxy0): sorteersectie in popover vervangen door ↑↓ knoppen + pills

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scrum4Me Agent 2026-05-06 06:44:51 +02:00
parent bc90ef2040
commit c62f476114
1 changed files with 50 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

56
components/backlog/pbi-list.tsx
View file

@ -368,12 +368,56 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
}
/>
<PopoverContent align="end" className="w-72 space-y-4">
<FilterPills
label="Sorteren op"
options={SORT_OPTIONS}
value={sortMode}
onChange={setSortMode}
/>
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<p className="text-xs font-medium text-muted-foreground">Sorteren op</p>
<div className="flex gap-1">
<button
type="button"
onClick={() => setSortDir('asc')}
className={cn(
'text-xs px-2 py-0.5 rounded border transition-colors',
sortDir === 'asc'
? 'bg-primary text-primary-foreground border-primary'
: 'bg-transparent border-border hover:bg-surface-container'
)}
aria-label="Oplopend sorteren"
>
↑
</button>
<button
type="button"
onClick={() => setSortDir('desc')}
className={cn(
'text-xs px-2 py-0.5 rounded border transition-colors',
sortDir === 'desc'
? 'bg-primary text-primary-foreground border-primary'
: 'bg-transparent border-border hover:bg-surface-container'
)}
aria-label="Aflopend sorteren"
>
↓
</button>
</div>
</div>
<div className="flex flex-wrap gap-1.5">
{SORT_OPTIONS.map((opt) => (
<button
key={opt.value}
type="button"
onClick={() => setSortMode(opt.value)}
className={cn(
'text-xs px-2.5 py-1 rounded-full border transition-colors',
sortMode === opt.value
? 'bg-primary text-primary-foreground border-primary'
: 'bg-transparent border-border hover:bg-surface-container'
)}
>
{opt.label}
</button>
))}
</div>
</div>
<FilterPills
label="Prioriteit"
options={PRIORITY_OPTIONS}