feat(search-history): Letzte 10 Sucheinträge des Users persistieren (localStorage) [tsc:fail]

.phase19-state.json

@@ -1,8 +1,9 @@
 {
   "completed_features": [],
-  "current_feature": "rate-limiting-stub",
+  "current_feature": "search-history",
   "started_at": "2026-05-23T07:42:47.919364",
   "attempted_features": [
-    "invitation-flow"
+    "invitation-flow",
+    "rate-limiting-stub"
   ]
 }

GENERATION_LOG.md

@@ -2292,3 +2292,20 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
+- `07:45:33` **INFO**   Committed feature rate-limiting-stub
+- `07:45:33` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: search-history (2026-05-23 07:45:33)
+
+- `07:45:33` **INFO** Description: Letzte 10 Sucheinträge des Users persistieren (localStorage)
+- `07:45:33` **INFO**   Generating apps/web/src/components/SearchBar.tsx (ERWEITERT — behalte bestehende SearchBar. Persistiere bei jedem Search…)
+- `07:46:28` **INFO**     wrote 6439 chars in 54.9s (attempt 1)
+- `07:46:28` **INFO** Running tsc --noEmit on api…
+- `07:46:30` **WARN**   tsc errors:
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTypeProvider>, opts: { ...; }, done: (err?: Error | undefined) => void): void'.
+  Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy

apps/web/src/components/SearchBar.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from '@tanstack/react-router';
-import { Search, User, Folder, Clock, X } from 'lucide-react';
+import { Search, User, Folder, Clock, X, History } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../lib/api';
 
@@ -14,11 +14,35 @@ interface SearchResult {
 export default function SearchBar() {
   const [query, setQuery] = useState('');
   const [isOpen, setIsOpen] = useState(false);
+  const [history, setHistory] = useState<string[]>([]);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    const saved = localStorage.getItem('search_history');
+    if (saved) {
+      try {
+        setHistory(JSON.parse(saved));
+      } catch (e) {
+        console.error('Failed to parse search history');
+      }
+    }
+  }, []);
+
+  const addToHistory = (term: string) => {
+    if (!term.trim()) return;
+    const updated = [term, ...history.filter((item) => item !== term)].slice(0, 10);
+    setHistory(updated);
+    localStorage.setItem('search_history', JSON.stringify(updated));
+  };
+
   const { data: results, isLoading } = useQuery({
     queryKey: ['search', query],
-    queryFn: () => api.search(query),
+    queryFn: async () => {
+      if (query.length >= 2) {
+        addToHistory(query);
+      }
+      return api.search(query);
+    },
     enabled: query.length >= 2,
   });
 
@@ -41,6 +65,11 @@ export default function SearchBar() {
     setIsOpen(false);
   };
 
+  const handleHistoryClick = (term: string) => {
+    setQuery(term);
+    setIsOpen(true);
+  };
+
   const getIcon = (type: SearchResult['type']) => {
     switch (type) {
       case 'customer': return <User className="w-4 h-4 text-purple-500" />;
@@ -74,13 +103,33 @@ export default function SearchBar() {
         )}
       </div>
 
-      {isOpen && (query.length >= 2 || (results && results.length > 0)) && (
+      {isOpen && (
         <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg shadow-xl z-50 overflow-hidden">
-          {isLoading ? (
+          {query.length === 0 ? (
+            <div className="p-1">
+              <div className="px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500 flex items-center gap-1">
+                <History className="w-3 h-3" /> Recent Searches
+              </div>
+              {history.length > 0 ? (
+                history.map((term) => (
+                  <button
+                    key={term}
+                    onClick={() => handleHistoryClick(term)}
+                    className="w-full flex items-center gap-3 px-2 py-2 text-left text-sm rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors group"
+                  >
+                    <Search className="w-3 h-3 text-zinc-400" />
+                    <span className="text-zinc-600 dark:text-zinc-300">{term}</span>
+                  </button>
+                ))
+              ) : (
+                <div className="p-4 text-center text-xs text-zinc-500">No recent searches</div>
+              )}
+            </div>
+          ) : isLoading ? (
             <div className="p-4 text-center text-xs text-zinc-500">Searching...</div>
           ) : results && results.length > 0 ? (
             <div className="max-h-96 overflow-y-auto p-1">
-              {['customer', 'project', 'time-entry'].map((type) => {
+              {(['customer', 'project', 'time-entry'] as const).map((type) => {
                 const filtered = results.filter((r: SearchResult) => r.type === type);
                 if (filtered.length === 0) return null;
 
@@ -97,10 +146,8 @@ export default function SearchBar() {
                       >
                         {getIcon(result.type)}
                         <div className="flex flex-col overflow-hidden">
-                          <span className="text-zinc-900 dark:text-zinc-100 truncate">{result.label}</span>
+                          <span className="text-zinc-700 dark:text-zinc-200 truncate">{result.label}</span>
-                          {result.subtitle && (
+                          {result.subtitle && <span className="text-[11px] text-zinc-500 truncate">{result.subtitle}</span>}
-                            <span className="text-xs text-zinc-500 truncate">{result.subtitle}</span>
-                          )}
                         </div>
                       </button>
                     ))}
@@ -109,7 +156,7 @@ export default function SearchBar() {
               })}
             </div>
           ) : (
-            <div className="p-4 text-center text-sm text-zinc-500">No results found</div>
+            <div className="p-4 text-center text-xs text-zinc-500">No results found</div>
           )}
         </div>
       )}