From 008a10502b1835a7c47748a8826d8fc2aae62892 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 14 May 2026 20:15:34 +0200
Subject: [PATCH] feat(history): add user filter dropdown

---
 src/components/HistoryView.tsx | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/HistoryView.tsx b/src/components/HistoryView.tsx
index 5b40d71..6416bea 100644
--- a/src/components/HistoryView.tsx
+++ b/src/components/HistoryView.tsx
@@ -19,6 +19,7 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
   const [loading, setLoading] = useState(true);
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [search, setSearch] = usePersistentState('history-search', '');
+  const [userFilter, setUserFilter] = usePersistentState('history-userFilter', '');
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   useEffect(() => {
@@ -79,10 +80,12 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
     }).format(date);
   };
 
+  const uniqueUsers = Array.from(new Set(history.map(e => e.changed_by))).sort();
+
   const filteredHistory = history.filter(entry => {
+    if (userFilter && entry.changed_by !== userFilter) return false;
     const terms = search.toLowerCase().split(/\s+/).filter(Boolean);
     if (terms.length === 0) return true;
-    
     const searchableText = `${entry.article_name} ${entry.product_id} ${entry.changed_by}`.toLowerCase();
     return terms.every(term => searchableText.includes(term));
   });
@@ -119,9 +122,33 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
           </p>
         </div>
         <div className="flex items-center gap-4">
+          <div className="relative">
+            <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none" />
+            <select
+              value={userFilter}
+              onChange={e => setUserFilter(e.target.value)}
+              className={cn(
+                "pl-9 pr-8 py-2 bg-slate-800 border rounded-md text-sm focus:outline-none focus:border-blue-500 transition-colors w-52 appearance-none",
+                userFilter ? "border-blue-500 text-white" : "border-slate-700 text-slate-400"
+              )}
+            >
+              <option value="">All users</option>
+              {uniqueUsers.map(u => (
+                <option key={u} value={u}>{u}</option>
+              ))}
+            </select>
+            {userFilter && (
+              <button
+                onClick={() => setUserFilter('')}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
           <div className="relative">
             <Tag className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
-            <input 
+            <input
               type="text"
               placeholder="Search history..."
               value={search}