Update

frontend/src/components/SignatureCategories.tsx

@@ -0,0 +1,71 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { SignatureListItem } from "@/components/SignatureListItem";
+import { SignatureCategory } from "@/hooks/useSignatureCategories";
+import { SigviewRecord as Signature } from "@/lib/pbtypes";
+
+interface SignatureCategoriesProps {
+  categories: SignatureCategory[];
+  onToggleCategory: (categoryId: string) => void;
+  onDelete?: (signatureId: string) => Promise<void>;
+  onUpdate?: (updatedSignature: Partial<Signature>) => Promise<void>;
+}
+
+export const SignatureCategories = ({ categories, onToggleCategory, onDelete, onUpdate }: SignatureCategoriesProps) => {
+  if (categories.length === 0) {
+    return (
+      <Card className="bg-slate-800/30 border-slate-700">
+        <CardContent className="pt-4 text-center">
+          <div className="text-slate-400">No signatures found</div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {categories.map((category) => (
+        <Card key={category.meta.id} className="bg-slate-800/30 border-slate-700">
+          <Collapsible open={category.isVisible} onOpenChange={() => onToggleCategory(category.meta.id)}>
+            <CollapsibleTrigger asChild>
+              <CardHeader className="cursor-pointer hover:bg-slate-800/50 transition-colors py-2">
+                <CardTitle className="text-white flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    {category.isVisible ? (
+                      <ChevronDown className="h-4 w-4 text-slate-400" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4 text-slate-400" />
+                    )}
+                    {category.meta.icon}
+                    <span className="text-base font-medium">{category.meta.name}</span>
+                  </div>
+                  <Badge
+                    variant="outline"
+                    className={`bg-slate-700 border-slate-600 ${category.meta.color} px-2 py-1`} >
+                    {category.signatures.length}
+                  </Badge>
+                </CardTitle>
+              </CardHeader>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <CardContent className="p-0">
+                <div className="divide-y divide-slate-700">
+                  {category.signatures.map((signature) => (
+                    <SignatureListItem 
+                      key={signature.id} 
+                      signature={signature} 
+                      onDelete={onDelete}
+                      onUpdate={onUpdate}
+                    />
+                  ))}
+                </div>
+              </CardContent>
+            </CollapsibleContent>
+          </Collapsible>
+        </Card>
+      ))}
+    </div>
+  );
+};