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

Update and refactor icons and colors

Browse Source
This commit is contained in:
PhatPhuckDave
2025-06-16 15:21:39 +02:00
parent 6934833771
commit 28c5ef540a
2 changed files with 27 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/SignatureCategories.tsx
View File

@@ -2,7 +2,7 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { ChevronDown, ChevronRight, Zap, Shield, Coins, HelpCircle, Pickaxe, Fuel } from "lucide-react"; import { ChevronDown, ChevronRight, Zap, Shield, Coins, HelpCircle, Pickaxe, Fuel, Gauge } from "lucide-react";
import { SignatureListItem } from "@/components/SignatureListItem"; import { SignatureListItem } from "@/components/SignatureListItem";
import { SignatureCategory } from "@/hooks/useSignatureCategories"; import { SignatureCategory } from "@/hooks/useSignatureCategories";
@@ -11,14 +11,14 @@ interface SignatureCategoriesProps {
onToggleCategory: (categoryId: string) => void; onToggleCategory: (categoryId: string) => void;
} }
const getCategoryIcon = (categoryId: string) => { export const getCategoryIcon = (categoryId: string) => {
switch (categoryId) { switch (categoryId) {
case 'combat': case 'combat':
return <Zap className="h-4 w-4 text-red-400" />; return <Zap className="h-4 w-4 text-red-400" />;
case 'data_relic': case 'data_relic':
return <Shield className="h-4 w-4 text-blue-400" />; return <Shield className="h-4 w-4 text-blue-400" />;
case 'gas': case 'gas':
return <Fuel className="h-4 w-4 text-yellow-400" />; return <Gauge className="h-4 w-4 text-green-400" />;
case 'ore': case 'ore':
return <Pickaxe className="h-4 w-4 text-yellow-400" />; return <Pickaxe className="h-4 w-4 text-yellow-400" />;
case 'wormhole': case 'wormhole':
@@ -28,14 +28,14 @@ const getCategoryIcon = (categoryId: string) => {
} }
}; };
const getCategoryColor = (categoryId: string) => { export const getCategoryColor = (categoryId: string) => {
switch (categoryId) { switch (categoryId) {
case 'combat': case 'combat':
return 'text-red-400 border-red-600'; return 'text-red-400 border-red-600';
case 'data_relic': case 'data_relic':
return 'text-blue-400 border-blue-600'; return 'text-blue-400 border-blue-600';
case 'gas': case 'gas':
return 'text-yellow-400 border-yellow-600'; return 'text-green-400 border-green-600';
case 'ore': case 'ore':
return 'text-yellow-400 border-yellow-600'; return 'text-yellow-400 border-yellow-600';
case 'wormhole': case 'wormhole':

72
src/components/SignatureListItem.tsx
View File

@@ -1,41 +1,17 @@
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Zap, Shield, Coins, HelpCircle, Clock, AlertTriangle, Skull, Fuel, Pickaxe } from "lucide-react"; import { Zap, Shield, Coins, HelpCircle, Clock, AlertTriangle, Skull } from "lucide-react";
import { SigviewRecord as Signature } from "@/lib/pbtypes"; import { SigviewRecord as Signature } from "@/lib/pbtypes";
import { getCategoryColor, getCategoryIcon } from "./SignatureCategories";
interface SignatureListItemProps { interface SignatureListItemProps {
signature: Signature; signature: Signature;
} }
export const SignatureListItem = ({ signature }: SignatureListItemProps) => { export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
const getTypeIcon = (type: string) => {
const lowerType = type.toLowerCase();
if (lowerType.includes("combat")) return <Zap className="h-4 w-4" />;
if (lowerType.includes("exploration") || lowerType.includes("relic") || lowerType.includes("data"))
return <Shield className="h-4 w-4" />;
if (lowerType.includes("gas")) return <Fuel className="h-4 w-4" />;
if (lowerType.includes("ore")) return <Pickaxe className="h-4 w-4" />;
return <HelpCircle className="h-4 w-4" />;
};
const getTypeColor = (type: string, dangerous: boolean = false) => {
if (dangerous) return "bg-red-900/50 text-red-200 border-red-500";
const lowerType = type.toLowerCase();
if (lowerType.includes("combat")) return "bg-red-900/30 text-red-300 border-red-600";
if (lowerType.includes("exploration") || lowerType.includes("relic") || lowerType.includes("data"))
return "bg-blue-900/30 text-blue-300 border-blue-600";
if (lowerType.includes("gas"))
return "bg-gradient-to-r from-yellow-900/40 to-amber-900/40 text-yellow-200 border-yellow-500 shadow-lg shadow-yellow-500/20";
if (lowerType.includes("ore"))
return "bg-yellow-900/30 text-yellow-300 border-yellow-600";
if (!type || type === "") return "bg-slate-700 text-slate-300 border-slate-600";
return "bg-purple-900/30 text-purple-300 border-purple-600";
};
const isOld = () => { const isOld = () => {
if (!signature.updated) return false; if (!signature.updated) return false;
const updatedTime = new Date(signature.updated); const updatedTime = new Date(signature.updated);
if (isNaN(updatedTime.getTime())) return false; if (isNaN(updatedTime.getTime())) return false; // Handle invalid date
const now = new Date(); const now = new Date();
const diffHours = (now.getTime() - updatedTime.getTime()) / (1000 * 60 * 60); const diffHours = (now.getTime() - updatedTime.getTime()) / (1000 * 60 * 60);
return diffHours > 3; return diffHours > 3;
@@ -44,11 +20,12 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
const formatDate = (dateStr: string | undefined) => { const formatDate = (dateStr: string | undefined) => {
if (!dateStr) return "Unknown"; if (!dateStr) return "Unknown";
const date = new Date(dateStr); const date = new Date(dateStr);
if (isNaN(date.getTime())) return "Invalid date"; if (isNaN(date.getTime())) return "Invalid date"; // Handle invalid date
const now = new Date(); const now = new Date();
const diffMs = now.getTime() - date.getTime(); const diffMs = now.getTime() - date.getTime();
// Handle cases where the time difference is very small or negative
if (diffMs < 0) return "Just now"; if (diffMs < 0) return "Just now";
const diffMinutes = Math.max(0, Math.floor(diffMs / (1000 * 60))); const diffMinutes = Math.max(0, Math.floor(diffMs / (1000 * 60)));
@@ -66,43 +43,32 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
}; };
const oldEntry = isOld(); const oldEntry = isOld();
const isGasSite = signature.type?.toLowerCase().includes("gas");
return ( return (
<div <div
className={`flex items-center justify-between p-3 border-b border-slate-700 hover:bg-slate-800/40 transition-all duration-300 ${ className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${oldEntry ? "opacity-50" : ""
oldEntry ? "opacity-50" : ""
} ${
isGasSite
? "bg-gradient-to-r from-yellow-500/20 via-amber-400/20 to-yellow-500/20 border-l-4 border-l-yellow-500 shadow-xl shadow-yellow-500/20 hover:shadow-yellow-500/30 animate-pulse backdrop-blur-sm"
: ""
}`} }`}
> >
<div className="flex items-center gap-3 flex-1"> <div className="flex items-center gap-4 flex-1">
{/* Type Badge */} {/* Type Badge - Most Important */}
<Badge <Badge
variant="outline" variant="outline"
className={`${getTypeColor( className={`${getCategoryColor(
signature.type, signature.type,
signature.dangerous )} px-3 py-1 text-sm font-semibold flex items-center gap-2 min-w-[120px] justify-center`}
)} px-2 py-1 font-semibold flex items-center gap-1 min-w-[100px] justify-center ${
isGasSite ? "animate-pulse" : ""
}`}
> >
{signature.dangerous ? <Skull className="h-4 w-4 text-red-400 animate-pulse" /> : getTypeIcon(signature.type)} {signature.dangerous ? <Skull className="h-4 w-4 text-red-400 animate-pulse" /> : getCategoryIcon(signature.type)}
{signature.type || "Unknown"} {signature.type || "Unknown Type"}
</Badge> </Badge>
{/* Signature Name and ID */} {/* Signature Name and ID */}
<div className="flex-1 min-w-[150px]"> <div className="flex-1 min-w-[200px]">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-mono text-sm text-slate-400 min-w-[50px]">{signature.identifier}</span> <span className="font-mono text-sm text-slate-400 min-w-[60px]">{signature.identifier}</span>
<h3 className={`font-medium flex items-center gap-2 ${ <h3 className="text-white font-medium flex items-center gap-2">
isGasSite ? "text-yellow-200 font-bold" : "text-white"
}`}>
{signature.signame || "Unnamed Signature"} {signature.signame || "Unnamed Signature"}
{signature.dangerous && ( {signature.dangerous && (
<Badge variant="outline" className="bg-red-900/50 text-red-200 border-red-500 px-1 py-0 text-xs"> <Badge variant="outline" className="bg-red-900/50 text-red-200 border-red-500 px-2 py-0.5 text-xs">
DANGEROUS DANGEROUS
</Badge> </Badge>
)} )}
@@ -111,16 +77,16 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
</div> </div>
{/* Dates */} {/* Dates */}
<div className="flex flex-col gap-0.5 text-sm text-slate-400 min-w-[150px]"> <div className="flex flex-col gap-1 text-sm text-slate-400 min-w-[200px]">
{signature.updated && ( {signature.updated && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-2">
{oldEntry && <AlertTriangle className="h-4 w-4 text-yellow-500" />} {oldEntry && <AlertTriangle className="h-4 w-4 text-yellow-500" />}
<Clock className="h-4 w-4" /> <Clock className="h-4 w-4" />
<span>Updated: {formatDate(signature.updated)}</span> <span>Updated: {formatDate(signature.updated)}</span>
</div> </div>
)} )}
{signature.created && ( {signature.created && (
<div className="flex items-center gap-1 text-xs text-slate-500"> <div className="flex items-center gap-2 text-xs text-slate-500">
<span>Created: {formatDate(signature.created)}</span> <span>Created: {formatDate(signature.created)}</span>
</div> </div>
)} )}