dave/eve-signaler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Fix the icon meta disaster

Browse Source
This commit is contained in:
PhatPhuckDave
2025-06-16 16:36:04 +02:00
parent 28c5ef540a
commit 0fa035601f
3 changed files with 89 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/SignatureCategories.tsx
View File

@@ -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">
<Collapsible open={category.isVisible} onOpenChange={() => onToggleCategory(category.id)}>
<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">
@@ -70,12 +37,12 @@ export const SignatureCategories = ({ categories, onToggleCategory }: SignatureC
) : (
<ChevronRight className="h-4 w-4 text-slate-400" />
)}
{getCategoryIcon(category.id)}
<span className="text-base font-medium">{category.name}</span>
{category.meta.icon}
<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>

14
src/components/SignatureListItem.tsx
View File

@@ -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(
signature.type,
)} px-3 py-1 text-sm font-semibold flex items-center gap-2 min-w-[120px] justify-center`}
className={`${meta.color} 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>

106
src/hooks/useSignatureCategories.ts → src/hooks/useSignatureCategories.tsx
View File

@@ -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;
name: string;
meta: SignatureCategoryMeta;
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() || '';
if (!type || type === '') {
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);
}
const meta = getSignatureMeta(type);
categories[meta.id] = categories[meta.id] || [];
categories[meta.id].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',
name: 'Unknown Sites',
meta: allCategories.get("unknown"),
signatures: categorized.unknown,
isVisible: categoryVisibility.unknown
},
{
id: 'combat',
name: 'Combat Sites',
meta: allCategories.get("combat"),
signatures: categorized.combat,
isVisible: categoryVisibility.combat
},
{
id: 'data_relic',
name: 'Data/Relic Sites',
meta: allCategories.get("data_relic"),
signatures: categorized.data_relic,
isVisible: categoryVisibility.data_relic
},
{
id: 'gas',
name: 'Gas Sites',
meta: allCategories.get("gas"),
signatures: categorized.gas,
isVisible: categoryVisibility.gas
},
{
id: 'ore',
name: 'Ore Sites',
meta: allCategories.get("ore"),
signatures: categorized.ore,
isVisible: categoryVisibility.ore
},
{
id: 'wormhole',
name: 'Wormholes',
meta: allCategories.get("wormhole"),
signatures: categorized.wormhole,
isVisible: categoryVisibility.wormhole
}