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

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

components/backlog/pbi-list.tsx

@@ -368,12 +368,56 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
             }
           />
           <PopoverContent align="end" className="w-72 space-y-4">
-            <FilterPills
+            <div className="space-y-1.5">
-              label="Sorteren op"
+              <div className="flex items-center justify-between">
-              options={SORT_OPTIONS}
+                <p className="text-xs font-medium text-muted-foreground">Sorteren op</p>
-              value={sortMode}
+                <div className="flex gap-1">
-              onChange={setSortMode}
+                  <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}