feat: Categorize and toggle signatures

Refactor SystemView to display signatures in categorized, collapsible sections. Implement user preference persistence for category visibility using local storage.

src/components/SystemTracker.tsx

@@ -5,7 +5,8 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { RefreshCw, AlertCircle, Radar } from "lucide-react";
-import { SignatureListItem } from "@/components/SignatureListItem";
+import { SignatureCategories } from "@/components/SignatureCategories";
+import { useSignatureCategories } from "@/hooks/useSignatureCategories";
 import { toast } from "@/hooks/use-toast";
 import pb from "@/lib/pocketbase";
 
@@ -59,6 +60,8 @@ export const SystemTracker = ({ system }: SystemTrackerProps) => {
     return dateB.localeCompare(dateA);
   });
 
+  const { categories, toggleCategoryVisibility } = useSignatureCategories(sortedSignatures);
+
   return (
     <div className="space-y-6">
       {/* System Status Card */}
@@ -96,37 +99,6 @@ export const SystemTracker = ({ system }: SystemTrackerProps) => {
         </Card>
       )}
 
-      {/* Signatures Display */}
-      {system && !signaturesLoading && (
-        <div className="space-y-4">
-          {sortedSignatures.length === 0 ? (
-            <Card className="bg-slate-800/30 border-slate-700">
-              <CardContent className="pt-6 text-center">
-                <div className="text-slate-400">No signatures found for {system}</div>
-              </CardContent>
-            </Card>
-          ) : (
-            <Card className="bg-slate-800/30 border-slate-700">
-              <CardHeader>
-                <CardTitle className="text-white flex items-center justify-between">
-                  <span>Signatures</span>
-                  <Badge variant="outline" className="bg-slate-700 text-slate-200 border-slate-600">
-                    {sortedSignatures.length} Total
-                  </Badge>
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="p-0">
-                <div className="divide-y divide-slate-700">
-                  {sortedSignatures.map((signature) => (
-                    <SignatureListItem key={signature.id} signature={signature} />
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-          )}
-        </div>
-      )}
-
       {/* Loading State */}
       {signaturesLoading && system && (
         <Card className="bg-slate-800/30 border-slate-700">
@@ -143,6 +115,14 @@ export const SystemTracker = ({ system }: SystemTrackerProps) => {
           </CardContent>
         </Card>
       )}
+
+      {/* Signature Categories */}
+      {system && !signaturesLoading && (
+        <SignatureCategories 
+          categories={categories}
+          onToggleCategory={toggleCategoryVisibility}
+        />
+      )}
     </div>
   );
 };