From 6015357905b4926cd49b1bd1efa342c5d62c7ba3 Mon Sep 17 00:00:00 2001
From: Janpeter Visser <30029041+madhura68@users.noreply.github.com>
Date: Wed, 6 May 2026 06:47:41 +0200
Subject: [PATCH] =?UTF-8?q?feat(ST-4uzuhxy0):=20sorteersectie=20in=20popov?=
 =?UTF-8?q?er=20vervangen=20door=20=E2=86=91=E2=86=93=20knoppen=20+=20pill?=
 =?UTF-8?q?s=20(#125)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/backlog/pbi-list.tsx | 56 +++++++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 6 deletions(-)

diff --git a/components/backlog/pbi-list.tsx b/components/backlog/pbi-list.tsx
index 39523d4..7587e13 100644
--- a/components/backlog/pbi-list.tsx
+++ b/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
-              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}