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 { Badge } from "@/components/ui/badge";
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 { SignatureCategory } from "@/hooks/useSignatureCategories";
@@ -11,14 +11,14 @@ interface SignatureCategoriesProps {
onToggleCategory: (categoryId: string) => void;
}
const getCategoryIcon = (categoryId: string) => {
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 <Fuel className="h-4 w-4 text-yellow-400" />;
return <Gauge className="h-4 w-4 text-green-400" />;
case 'ore':
return <Pickaxe className="h-4 w-4 text-yellow-400" />;
case 'wormhole':
@@ -28,14 +28,14 @@ const getCategoryIcon = (categoryId: string) => {
}
};
const getCategoryColor = (categoryId: string) => {
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-yellow-400 border-yellow-600';
return 'text-green-400 border-green-600';
case 'ore':
return 'text-yellow-400 border-yellow-600';
case 'wormhole':

74
src/components/SignatureListItem.tsx
View File

@@ -1,41 +1,17 @@
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 { getCategoryColor, getCategoryIcon } from "./SignatureCategories";
interface SignatureListItemProps {
signature: Signature;
}
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 = () => {
if (!signature.updated) return false;
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 diffHours = (now.getTime() - updatedTime.getTime()) / (1000 * 60 * 60);
return diffHours > 3;
@@ -44,11 +20,12 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
const formatDate = (dateStr: string | undefined) => {
if (!dateStr) return "Unknown";
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 diffMs = now.getTime() - date.getTime();
// Handle cases where the time difference is very small or negative
if (diffMs < 0) return "Just now";
const diffMinutes = Math.max(0, Math.floor(diffMs / (1000 * 60)));
@@ -66,43 +43,32 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
};
const oldEntry = isOld();
const isGasSite = signature.type?.toLowerCase().includes("gas");
return (
<div
className={`flex items-center justify-between p-3 border-b border-slate-700 hover:bg-slate-800/40 transition-all duration-300 ${
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"
: ""
}`}
className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${oldEntry ? "opacity-50" : ""
}`}
>
<div className="flex items-center gap-3 flex-1">
{/* Type Badge */}
<div className="flex items-center gap-4 flex-1">
{/* Type Badge - Most Important */}
<Badge
variant="outline"
className={`${getTypeColor(
className={`${getCategoryColor(
signature.type,
signature.dangerous
)} px-2 py-1 font-semibold flex items-center gap-1 min-w-[100px] justify-center ${
isGasSite ? "animate-pulse" : ""
}`}
)} 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" /> : getTypeIcon(signature.type)}
{signature.type || "Unknown"}
{signature.dangerous ? <Skull className="h-4 w-4 text-red-400 animate-pulse" /> : getCategoryIcon(signature.type)}
{signature.type || "Unknown Type"}
</Badge>
{/* 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">
<span className="font-mono text-sm text-slate-400 min-w-[50px]">{signature.identifier}</span>
<h3 className={`font-medium flex items-center gap-2 ${
isGasSite ? "text-yellow-200 font-bold" : "text-white"
}`}>
<span className="font-mono text-sm text-slate-400 min-w-[60px]">{signature.identifier}</span>
<h3 className="text-white font-medium flex items-center gap-2">
{signature.signame || "Unnamed Signature"}
{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
</Badge>
)}
@@ -111,16 +77,16 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
</div>
{/* 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 && (
<div className="flex items-center gap-1">
<div className="flex items-center gap-2">
{oldEntry && <AlertTriangle className="h-4 w-4 text-yellow-500" />}
<Clock className="h-4 w-4" />
<span>Updated: {formatDate(signature.updated)}</span>
</div>
)}
{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>
</div>
)}