From 0f49886f4e1942514f2dcbe3092d66b62049a37e Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Tue, 17 Feb 2026 18:17:50 +0100
Subject: [PATCH] feat: use dynamic type colors for active filter pills

Active filter pills now show the accent color matching the type they
represent, instead of hardcoded blue.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/NoteList.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/NoteList.tsx b/src/components/NoteList.tsx
index 74e824bf..46ce7478 100644
--- a/src/components/NoteList.tsx
+++ b/src/components/NoteList.tsx
@@ -293,16 +293,23 @@ function NoteListInner({ entries, selection, selectedNote, modifiedFiles, onSele
           }).map(({ label, type }) => {
             const count = typeCounts.get(type) ?? 0
             const isActive = typeFilter === type
+            const pillColor = type ? getTypeColor(type) : 'var(--accent-blue)'
+            const pillLightColor = type ? getTypeLightColor(type) : 'var(--accent-blue-light)'
             return (
               <button
                 key={label}
                 className={cn(
                   "note-list__pill whitespace-nowrap rounded-full border px-2.5 py-0.5 text-[11px] uppercase transition-colors",
-                  isActive
-                    ? "border-[var(--primary)] bg-[#155DFF18] text-[var(--primary)]"
-                    : "border-[var(--border)] bg-transparent text-muted-foreground hover:bg-secondary"
+                  !isActive && "border-[var(--border)] bg-transparent text-muted-foreground hover:bg-secondary"
                 )}
-                style={{ fontFamily: "'IBM Plex Mono', monospace" }}
+                style={{
+                  fontFamily: "'IBM Plex Mono', monospace",
+                  ...(isActive && {
+                    borderColor: pillColor,
+                    backgroundColor: pillLightColor,
+                    color: pillColor,
+                  }),
+                }}
                 onClick={() => setTypeFilter(type)}
               >
                 {label} {count}