Fix the icon meta disaster

src/components/SignatureCategories.tsx

@@ -2,7 +2,7 @@
 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, Zap, Shield, Coins, HelpCircle, Pickaxe, Fuel, Gauge } from "lucide-react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { SignatureListItem } from "@/components/SignatureListItem";
 import { SignatureCategory } from "@/hooks/useSignatureCategories";
 
@@ -11,41 +11,8 @@ interface SignatureCategoriesProps {
   onToggleCategory: (categoryId: string) => void;
 }
 
-export const getCategoryIcon = (categoryId: string) => {
-  switch (categoryId) {
-    case 'combat':
-      return <Zap className="h-4 w-4 text-red-400" />;
-    case 'data_relic':
-      return <Shield className="h-4 w-4 text-blue-400" />;
-    case 'gas':
-      return <Gauge className="h-4 w-4 text-green-400" />;
-    case 'ore':
-      return <Pickaxe className="h-4 w-4 text-yellow-400" />;
-    case 'wormhole':
-      return <Coins className="h-4 w-4 text-purple-400" />;
-    default:
-      return <HelpCircle className="h-4 w-4 text-slate-400" />;
-  }
-};
-
-export const getCategoryColor = (categoryId: string) => {
-  switch (categoryId) {
-    case 'combat':
-      return 'text-red-400 border-red-600';
-    case 'data_relic':
-      return 'text-blue-400 border-blue-600';
-    case 'gas':
-      return 'text-green-400 border-green-600';
-    case 'ore':
-      return 'text-yellow-400 border-yellow-600';
-    case 'wormhole':
-      return 'text-purple-400 border-purple-600';
-    default:
-      return 'text-slate-400 border-slate-600';
-  }
-};
-
 export const SignatureCategories = ({ categories, onToggleCategory }: SignatureCategoriesProps) => {
+  console.log(categories);
   if (categories.length === 0) {
     return (
       <Card className="bg-slate-800/30 border-slate-700">
@@ -59,8 +26,8 @@ export const SignatureCategories = ({ categories, onToggleCategory }: SignatureC
   return (
     <div className="space-y-2">
       {categories.map((category) => (
-        <Card key={category.id} className="bg-slate-800/30 border-slate-700">
+        <Card key={category.meta.id} className="bg-slate-800/30 border-slate-700">
-          <Collapsible open={category.isVisible} onOpenChange={() => onToggleCategory(category.id)}>
+          <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">
@@ -70,12 +37,12 @@ export const SignatureCategories = ({ categories, onToggleCategory }: SignatureC
                     ) : (
                       <ChevronRight className="h-4 w-4 text-slate-400" />
                     )}
-                    {getCategoryIcon(category.id)}
+                    {category.meta.icon}
-                    <span className="text-base font-medium">{category.name}</span>
+                    <span className="text-base font-medium">{category.meta.name}</span>
                   </div>
                   <Badge
                     variant="outline"
-                    className={`bg-slate-700 border-slate-600 ${getCategoryColor(category.id)} px-2 py-1`}
+                    className={`bg-slate-700 border-slate-600 ${category.meta.color} px-2 py-1`}
                   >
                     {category.signatures.length}
                   </Badge>

src/components/SignatureListItem.tsx

@@ -1,7 +1,7 @@
 import { Badge } from "@/components/ui/badge";
-import { Zap, Shield, Coins, HelpCircle, Clock, AlertTriangle, Skull } from "lucide-react";
+import { Clock, AlertTriangle, Skull } from "lucide-react";
 import { SigviewRecord as Signature } from "@/lib/pbtypes";
-import { getCategoryColor, getCategoryIcon } from "./SignatureCategories";
+import { getSignatureMeta } from "@/hooks/useSignatureCategories";
 
 interface SignatureListItemProps {
 	signature: Signature;
@@ -42,6 +42,8 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 		}
 	};
 
+	const meta = getSignatureMeta(signature.type || "");
+
 	const oldEntry = isOld();
 
 	return (
@@ -53,11 +55,11 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 				{/* Type Badge - Most Important */}
 				<Badge
 					variant="outline"
-					className={`${getCategoryColor(
+					className={`${meta.color} px-3 py-1 text-sm font-semibold flex items-center gap-2 min-w-[120px] justify-center`}
-						signature.type,
-					)} px-3 py-1 text-sm font-semibold flex items-center gap-2 min-w-[120px] justify-center`}
 				>
-					{signature.dangerous ? <Skull className="h-4 w-4 text-red-400 animate-pulse" /> : getCategoryIcon(signature.type)}
+					{signature.dangerous
+						? <Skull className="h-4 w-4 text-red-400 animate-pulse" />
+						: meta.icon}
 					{signature.type || "Unknown Type"}
 				</Badge>
 

src/hooks/useSignatureCategories.tsx

@@ -1,16 +1,76 @@
-
 import { useState, useEffect, useMemo } from 'react';
 import { SigviewRecord as Signature } from "@/lib/pbtypes";
+import { Coins, Gauge, HelpCircle, Pickaxe, Shield, Zap } from 'lucide-react';
 
 export interface SignatureCategory {
-  id: string;
+  meta: SignatureCategoryMeta;
-  name: string;
   signatures: Signature[];
   isVisible: boolean;
 }
+export interface SignatureCategoryMeta {
+  id: string;
+  name: string;
+  matcher: RegExp;
+  icon: JSX.Element;
+  color: string;
+}
 
 const CATEGORY_PREFERENCES_KEY = 'signature-category-preferences';
 
+const allCategories = new Map<string, SignatureCategoryMeta>([
+  ["unknown", {
+    matcher: /^$/i,
+    id: "unknown",
+    name: 'Unknown Sites',
+    icon: <HelpCircle className="h-4 w-4 text-slate-400" />,
+    color: "text-slate-400 border-slate-600"
+  }],
+  ["combat", {
+    matcher: /^combat/i,
+    id: "combat",
+    name: 'Combat Sites',
+    icon: <Zap className="h-4 w-4 text-red-400" />,
+    color: "text-red-400 border-red-600"
+  }],
+  ["data_relic", {
+    matcher: /^(?:data|relic)/i,
+    id: "data_relic",
+    name: 'Data/Relic Sites',
+    icon: <Shield className="h-4 w-4 text-blue-400" />,
+    color: "text-blue-400 border-blue-600"
+  }],
+  ["gas", {
+    matcher: /^gas/i,
+    id: "gas",
+    name: 'Gas Sites',
+    icon: <Gauge className="h-4 w-4 text-green-400" />,
+    color: "text-green-400 border-green-600"
+  }],
+  ["ore", {
+    matcher: /^ore/i,
+    id: "ore",
+    name: 'Ore Sites',
+    icon: <Pickaxe className="h-4 w-4 text-yellow-400" />,
+    color: "text-yellow-400 border-yellow-600"
+  }],
+  ["wormhole", {
+    matcher: /^wormhole/i,
+    id: "wormhole",
+    name: 'Wormholes',
+    icon: <Coins className="h-4 w-4 text-purple-400" />,
+    color: "text-purple-400 border-purple-600"
+  }]
+]);
+
+export const getSignatureMeta = (type: string): SignatureCategoryMeta => {
+  for (const category of allCategories.values()) {
+    if (category.matcher.test(type)) {
+      return category;
+    }
+  }
+  return allCategories.get("unknown")!;
+};
+
 export const categorizeSignatures = (signatures: Signature[]): Record<string, Signature[]> => {
   const categories: Record<string, Signature[]> = {
     unknown: [],
@@ -23,25 +83,10 @@ export const categorizeSignatures = (signatures: Signature[]): Record<string, Si
 
   signatures.forEach(signature => {
     const type = signature.type?.toLowerCase() || '';
-    const name = signature.signame?.toLowerCase() || '';
+    const meta = getSignatureMeta(type);
-
+    categories[meta.id] = categories[meta.id] || [];
-    if (!type || type === '') {
+    categories[meta.id].push(signature);
-      categories.unknown.push(signature);
-    } else if (type.includes('combat') || type.includes('den') || type.includes('rally')) {
-      categories.combat.push(signature);
-    } else if (type.includes('data') || type.includes('relic') || type.includes('exploration')) {
-      categories.data_relic.push(signature);
-    } else if (type.includes('gas') || name.includes('gas')) {
-      categories.gas.push(signature);
-    } else if (type.includes('ore') || type.includes('mining') || name.includes('ore')) {
-      categories.ore.push(signature);
-    } else if (type.includes('wormhole') || name.includes('wormhole') || type.includes('k162')) {
-      categories.wormhole.push(signature);
-    } else {
-      categories.unknown.push(signature);
-    }
   });
-
   return categories;
 };
 
@@ -75,41 +120,36 @@ export const useSignatureCategories = (signatures: Signature[]) => {
 
   const categories = useMemo(() => {
     const categorized = categorizeSignatures(signatures);
-    
+    console.log(categorized);
+
     return [
       {
-        id: 'unknown',
+        meta: allCategories.get("unknown"),
-        name: 'Unknown Sites',
         signatures: categorized.unknown,
         isVisible: categoryVisibility.unknown
       },
       {
-        id: 'combat',
+        meta: allCategories.get("combat"),
-        name: 'Combat Sites',
         signatures: categorized.combat,
         isVisible: categoryVisibility.combat
       },
       {
-        id: 'data_relic',
+        meta: allCategories.get("data_relic"),
-        name: 'Data/Relic Sites',
         signatures: categorized.data_relic,
         isVisible: categoryVisibility.data_relic
       },
       {
-        id: 'gas',
+        meta: allCategories.get("gas"),
-        name: 'Gas Sites',
         signatures: categorized.gas,
         isVisible: categoryVisibility.gas
       },
       {
-        id: 'ore',
+        meta: allCategories.get("ore"),
-        name: 'Ore Sites',
         signatures: categorized.ore,
         isVisible: categoryVisibility.ore
       },
       {
-        id: 'wormhole',
+        meta: allCategories.get("wormhole"),
-        name: 'Wormholes',
         signatures: categorized.wormhole,
         isVisible: categoryVisibility.wormhole
       }