feat(theme): implement single-file CSS theming engine with dark, light, high-contrast, and soft themes

frontend/src/features/lists/SharedListsView.tsx

@@ -148,54 +148,39 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
     const text = newItemText.trim();
     const qty = newItemQty.trim();
-    const cat = newItemCategory;
+    const cat = newItemCategory || undefined;
 
     setNewItemText('');
     setNewItemQty('');
 
-    const created = await api.createListItem(activeList.id, text, cat, qty);
-    setLists((prev) =>
-      prev.map((l) => {
-        if (l.id !== activeList.id) return l;
-        if (l.items.some((i) => i.id === created.id)) return l;
-        return { ...l, items: [created, ...l.items] };
-      })
-    );
+    try {
+      const item = await api.createListItem(activeList.id, text, qty, cat);
+      setLists((prev) =>
+        prev.map((l) => (l.id === activeList.id ? { ...l, items: [item, ...l.items] } : l))
+      );
+      onRefreshGlobal();
+    } catch (err: any) {
+      alert(err.message || 'Fehler beim Erstellen des Listeneintrags');
+    }
   };
 
   const handleToggleItem = async (item: ListItem) => {
     if (!activeList) return;
-    triggerHaptic(18);
+    triggerHaptic(10);
     const nextCompleted = !item.isCompleted;
 
-    // Optimistic UI update (BRAIN.md Section 3)
     setLists((prev) =>
       prev.map((l) => {
         if (l.id !== activeList.id) return l;
         return {
           ...l,
-          items: l.items.map((i) =>
-            i.id === item.id ? { ...i, isCompleted: nextCompleted } : i
-          ),
+          items: l.items.map((i) => (i.id === item.id ? { ...i, isCompleted: nextCompleted } : i)),
         };
       })
     );
 
-    try {
-      const updated = await api.toggleListItem(activeList.id, item.id, nextCompleted);
-      setLists((prev) =>
-        prev.map((l) => {
-          if (l.id !== activeList.id) return l;
-          return {
-            ...l,
-            items: l.items.map((i) => (i.id === item.id ? updated : i)),
-          };
-        })
-      );
-    } catch {
-      // Rollback on error
-      loadListsForSpace(activeSpace!.id);
-    }
+    await api.toggleListItem(activeList.id, item.id);
+    onRefreshGlobal();
   };
 
   const handleDeleteItem = async (itemId: string) => {
@@ -272,10 +257,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             <button
               key={sp.id}
               onClick={() => setActiveSpace(sp)}
-              className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-colors border ${
+              className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-colors border rounded-btn ${
                 activeSpace?.id === sp.id
-                  ? 'bg-accent text-white border-accent'
-                  : 'bg-canvas text-zinc-300 hover:text-white border-border'
+                  ? 'bg-accent text-on-accent border-accent'
+                  : 'bg-canvas text-muted hover:text-main border-border'
               }`}
             >
               <span>{sp.icon}</span>
@@ -302,10 +287,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
         {activeSpace && (
           <div className="flex items-center gap-2">
             <div
-              className={`h-8 px-3 text-xs flex items-center gap-1.5 ${
+              className={`h-8 px-3 text-xs flex items-center gap-1.5 rounded-btn ${
                 wsConnected
-                  ? 'bg-[#22c55e]/15 text-[#22c55e] border border-[#22c55e]/30'
-                  : 'bg-panel-elevated text-zinc-400 border border-border'
+                  ? 'badge-ok'
+                  : 'badge-neutral'
               }`}
             >
               <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
@@ -320,9 +305,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
               <Users className="w-3.5 h-3.5 text-accent" />
               <span>Code: {activeSpace.inviteCode}</span>
               {copiedInvite ? (
-                <Check className="w-3.5 h-3.5 text-[#22c55e]" />
+                <Check className="w-3.5 h-3.5 text-status-ok" />
               ) : (
-                <Copy className="w-3 h-3 text-zinc-400" />
+                <Copy className="w-3 h-3 text-muted" />
               )}
             </button>
           </div>
@@ -383,16 +368,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             <button
               key={lst.id}
               onClick={() => setActiveListId(lst.id)}
-              className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-all border ${
+              className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-all border rounded-btn ${
                 isSelected
-                  ? 'bg-accent text-white border-accent'
-                  : 'bg-panel text-zinc-300 hover:text-white border-border'
+                  ? 'bg-accent text-on-accent border-accent'
+                  : 'bg-panel text-muted hover:text-main border-border'
               }`}
             >
               <span>{lst.icon}</span>
               <span>{lst.title}</span>
-              <span className={`px-1.5 py-0.2 text-[10px] font-semibold ${
-                isSelected ? 'bg-white/20 text-white' : 'bg-canvas text-zinc-400'
+              <span className={`px-1.5 py-0.2 text-[10px] font-semibold rounded-pill ${
+                isSelected ? 'bg-white/20 text-on-accent' : 'badge-neutral'
               }`}>
                 {openCount}
               </span>
@@ -420,7 +405,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 key={ic}
                 type="button"
                 onClick={() => setNewListIcon(ic)}
-                className={`w-9 h-9 flex items-center justify-center transition-colors ${
+                className={`w-9 h-9 flex items-center justify-center rounded-btn transition-colors ${
                   newListIcon === ic
                     ? 'bg-accent/20 border border-accent text-accent'
                     : 'bg-canvas hover:bg-panel-elevated border border-border'
@@ -481,16 +466,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
             {/* Category Quick-Select Pills */}
             <div className="flex flex-wrap items-center gap-1.5">
-              <span className="text-xs text-zinc-400 mr-1">Kategorie:</span>
+              <span className="text-xs text-muted mr-1">Kategorie:</span>
               {CATEGORIES.map((cat) => (
                 <button
                   key={cat}
                   type="button"
                   onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
-                  className={`px-2.5 py-0.5 text-xs transition-colors border ${
+                  className={`px-2.5 py-0.5 text-xs transition-colors border rounded-pill ${
                     newItemCategory === cat
-                      ? 'bg-accent text-white border-accent font-medium'
-                      : 'bg-canvas text-zinc-400 hover:text-white border-border'
+                      ? 'bg-accent text-on-accent border-accent font-medium'
+                      : 'bg-canvas text-muted hover:text-main border-border'
                   }`}
                 >
                   {cat}
@@ -500,9 +485,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
           </form>
 
           {/* Open Items */}
-          <div className="border border-border divide-y divide-border">
+          <div className="border border-border divide-y divide-border rounded-card overflow-hidden">
             {openItems.length === 0 ? (
-              <div className="py-6 text-center text-zinc-400 text-sm flex flex-col items-center gap-1.5">
+              <div className="py-6 text-center text-muted text-sm flex flex-col items-center gap-1.5">
                 <Sparkles className="w-4 h-4 text-accent" />
                 <span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span>
               </div>
@@ -514,8 +499,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                   className="px-3 py-2 bg-canvas hover:bg-panel-elevated flex items-center justify-between gap-3 cursor-pointer transition-colors group"
                 >
                   <div className="flex items-center gap-2.5 min-w-0">
-                    <Circle className="w-4 h-4 text-zinc-500 group-hover:text-accent flex-shrink-0 transition-colors" />
-                    <span className="text-sm font-normal text-white truncate">
+                    <Circle className="w-4 h-4 text-faint group-hover:text-accent flex-shrink-0 transition-colors" />
+                    <span className="text-sm font-normal text-main truncate">
                       {item.content}
                     </span>
                     {item.quantity && (
@@ -524,7 +509,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                       </span>
                     )}
                     {item.category && (
-                      <span className="hidden sm:inline px-2 py-0.2 bg-panel text-zinc-400 text-xs">
+                      <span className="hidden sm:inline px-2 py-0.2 badge-neutral text-xs">
                         {item.category}
                       </span>
                     )}
@@ -549,7 +534,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
           {completedItems.length > 0 && (
             <div className="mt-3 pt-2.5 border-t border-border">
               <div className="flex items-center justify-between mb-2">
-                <span className="text-xs font-medium uppercase tracking-wider text-zinc-400">
+                <span className="text-xs font-medium uppercase tracking-wider text-muted">
                   Erledigt ({completedItems.length})
                 </span>
                 <button
@@ -560,7 +545,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 </button>
               </div>
 
-              <div className="border border-border divide-y divide-border opacity-75">
+              <div className="border border-border divide-y divide-border opacity-75 rounded-card overflow-hidden">
                 {completedItems.map((item) => (
                   <div
                     key={item.id}
@@ -569,15 +554,15 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                   >
                     <div className="flex items-center gap-2.5 min-w-0">
                       <CheckCircle2 className="w-4 h-4 text-accent flex-shrink-0" />
-                      <span className="text-sm text-zinc-400 line-through truncate">
+                      <span className="text-sm text-muted line-through truncate">
                         {item.content}
                       </span>
                       {item.quantity && (
-                        <span className="text-xs text-zinc-500">({item.quantity})</span>
+                        <span className="text-xs text-faint">({item.quantity})</span>
                       )}
                     </div>
                     {item.completedByName && (
-                      <span className="text-xs text-zinc-500">✓ {item.completedByName}</span>
+                      <span className="text-xs text-faint">✓ {item.completedByName}</span>
                     )}
                   </div>
                 ))}