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

Refactor: Improve system view compactness

Browse Source 
Reduce vertical spacing in signature categories and sites.
This commit is contained in:
gpt-engineer-app[bot]
2025-06-16 12:58:13 +00:00
parent ea7e0003c3
commit e7a502cfb2
2 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/SignatureCategories.tsx
View File

@@ -14,17 +14,17 @@ interface SignatureCategoriesProps {
const getCategoryIcon = (categoryId: string) => {
switch (categoryId) {
case 'combat':
return <Zap className="h-4 w-4 text-red-400" />;
return <Zap className="h-3 w-3 text-red-400" />;
case 'data_relic':
return <Shield className="h-4 w-4 text-blue-400" />;
return <Shield className="h-3 w-3 text-blue-400" />;
case 'gas':
return <Gauge className="h-4 w-4 text-green-400" />;
return <Gauge className="h-3 w-3 text-green-400" />;
case 'ore':
return <Pickaxe className="h-4 w-4 text-yellow-400" />;
return <Pickaxe className="h-3 w-3 text-yellow-400" />;
case 'wormhole':
return <Coins className="h-4 w-4 text-purple-400" />;
return <Coins className="h-3 w-3 text-purple-400" />;
default:
return <HelpCircle className="h-4 w-4 text-slate-400" />;
return <HelpCircle className="h-3 w-3 text-slate-400" />;
}
};
@@ -49,33 +49,33 @@ export const SignatureCategories = ({ categories, onToggleCategory }: SignatureC
if (categories.length === 0) {
return (
<Card className="bg-slate-800/30 border-slate-700">
<CardContent className="pt-6 text-center">
<div className="text-slate-400">No signatures found</div>
<CardContent className="pt-4 text-center">
<div className="text-slate-400 text-sm">No signatures found</div>
</CardContent>
</Card>
);
}
return (
<div className="space-y-4">
<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)}>
<CollapsibleTrigger asChild>
<CardHeader className="cursor-pointer hover:bg-slate-800/50 transition-colors">
<CardTitle className="text-white flex items-center justify-between">
<div className="flex items-center gap-3">
<CardHeader className="cursor-pointer hover:bg-slate-800/50 transition-colors py-3">
<CardTitle className="text-white flex items-center justify-between text-sm">
<div className="flex items-center gap-2">
{category.isVisible ? (
<ChevronDown className="h-4 w-4 text-slate-400" />
<ChevronDown className="h-3 w-3 text-slate-400" />
) : (
<ChevronRight className="h-4 w-4 text-slate-400" />
<ChevronRight className="h-3 w-3 text-slate-400" />
)}
{getCategoryIcon(category.id)}
<span>{category.name}</span>
</div>
<Badge
variant="outline"
className={`bg-slate-700 border-slate-600 ${getCategoryColor(category.id)}`}
className={`bg-slate-700 border-slate-600 ${getCategoryColor(category.id)} text-xs px-2 py-0.5`}
>
{category.signatures.length}
</Badge>

44
src/components/SignatureListItem.tsx
View File

@@ -1,3 +1,4 @@
import { Badge } from "@/components/ui/badge";
import { Zap, Shield, Coins, HelpCircle, Clock, AlertTriangle, Skull } from "lucide-react";
import { SigviewRecord as Signature } from "@/lib/pbtypes";
@@ -9,11 +10,11 @@ interface 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("combat")) return <Zap className="h-3 w-3" />;
if (lowerType.includes("exploration") || lowerType.includes("relic") || lowerType.includes("data"))
return <Shield className="h-4 w-4" />;
if (lowerType.includes("ore") || lowerType.includes("gas")) return <Coins className="h-4 w-4" />;
return <HelpCircle className="h-4 w-4" />;
return <Shield className="h-3 w-3" />;
if (lowerType.includes("ore") || lowerType.includes("gas")) return <Coins className="h-3 w-3" />;
return <HelpCircle className="h-3 w-3" />;
};
const getTypeColor = (type: string, dangerous: boolean = false) => {
@@ -32,7 +33,7 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
const isOld = () => {
if (!signature.updated) return false;
const updatedTime = new Date(signature.updated);
if (isNaN(updatedTime.getTime())) return false; // Handle invalid date
if (isNaN(updatedTime.getTime())) return false;
const now = new Date();
const diffHours = (now.getTime() - updatedTime.getTime()) / (1000 * 60 * 60);
return diffHours > 3;
@@ -41,12 +42,11 @@ 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"; // Handle invalid date
if (isNaN(date.getTime())) return "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)));
@@ -67,30 +67,30 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
return (
<div
className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${oldEntry ? "opacity-50" : ""
className={`flex items-center justify-between p-2 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${oldEntry ? "opacity-50" : ""
}`}
>
<div className="flex items-center gap-4 flex-1">
{/* Type Badge - Most Important */}
<div className="flex items-center gap-3 flex-1">
{/* Type Badge */}
<Badge
variant="outline"
className={`${getTypeColor(
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-0.5 text-xs font-semibold flex items-center gap-1 min-w-[100px] justify-center`}
>
{signature.dangerous ? <Skull className="h-4 w-4 text-red-400 animate-pulse" /> : getTypeIcon(signature.type)}
{signature.type || "Unknown Type"}
{signature.dangerous ? <Skull className="h-3 w-3 text-red-400 animate-pulse" /> : getTypeIcon(signature.type)}
{signature.type || "Unknown"}
</Badge>
{/* Signature Name and ID */}
<div className="flex-1 min-w-[200px]">
<div className="flex-1 min-w-[150px]">
<div className="flex items-center gap-2">
<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">
<span className="font-mono text-xs text-slate-400 min-w-[50px]">{signature.identifier}</span>
<h3 className="text-white font-medium text-sm 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-2 py-0.5 text-xs">
<Badge variant="outline" className="bg-red-900/50 text-red-200 border-red-500 px-1 py-0 text-xs">
DANGEROUS
</Badge>
)}
@@ -99,16 +99,16 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
</div>
{/* Dates */}
<div className="flex flex-col gap-1 text-sm text-slate-400 min-w-[200px]">
<div className="flex flex-col gap-0.5 text-xs text-slate-400 min-w-[150px]">
{signature.updated && (
<div className="flex items-center gap-2">
{oldEntry && <AlertTriangle className="h-4 w-4 text-yellow-500" />}
<Clock className="h-4 w-4" />
<div className="flex items-center gap-1">
{oldEntry && <AlertTriangle className="h-3 w-3 text-yellow-500" />}
<Clock className="h-3 w-3" />
<span>Updated: {formatDate(signature.updated)}</span>
</div>
)}
{signature.created && (
<div className="flex items-center gap-2 text-xs text-slate-500">
<div className="flex items-center gap-1 text-xs text-slate-500">
<span>Created: {formatDate(signature.created)}</span>
</div>
)}