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) => { 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-3 w-3 text-red-400" />;
case 'data_relic': 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': case 'gas':
return <Gauge className="h-4 w-4 text-green-400" />; return <Gauge className="h-3 w-3 text-green-400" />;
case 'ore': case 'ore':
return <Pickaxe className="h-4 w-4 text-yellow-400" />; return <Pickaxe className="h-3 w-3 text-yellow-400" />;
case 'wormhole': case 'wormhole':
return <Coins className="h-4 w-4 text-purple-400" />; return <Coins className="h-3 w-3 text-purple-400" />;
default: 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) { if (categories.length === 0) {
return ( return (
<Card className="bg-slate-800/30 border-slate-700"> <Card className="bg-slate-800/30 border-slate-700">
<CardContent className="pt-6 text-center"> <CardContent className="pt-4 text-center">
<div className="text-slate-400">No signatures found</div> <div className="text-slate-400 text-sm">No signatures found</div>
</CardContent> </CardContent>
</Card> </Card>
); );
} }
return ( return (
<div className="space-y-4"> <div className="space-y-2">
{categories.map((category) => ( {categories.map((category) => (
<Card key={category.id} className="bg-slate-800/30 border-slate-700"> <Card key={category.id} className="bg-slate-800/30 border-slate-700">
<Collapsible open={category.isVisible} onOpenChange={() => onToggleCategory(category.id)}> <Collapsible open={category.isVisible} onOpenChange={() => onToggleCategory(category.id)}>
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<CardHeader className="cursor-pointer hover:bg-slate-800/50 transition-colors"> <CardHeader className="cursor-pointer hover:bg-slate-800/50 transition-colors py-3">
<CardTitle className="text-white flex items-center justify-between"> <CardTitle className="text-white flex items-center justify-between text-sm">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2">
{category.isVisible ? ( {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)} {getCategoryIcon(category.id)}
<span>{category.name}</span> <span>{category.name}</span>
</div> </div>
<Badge <Badge
variant="outline" 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} {category.signatures.length}
</Badge> </Badge>

44
src/components/SignatureListItem.tsx
View File

@@ -1,3 +1,4 @@
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Zap, Shield, Coins, HelpCircle, Clock, AlertTriangle, Skull } 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";
@@ -9,11 +10,11 @@ interface SignatureListItemProps {
export const SignatureListItem = ({ signature }: SignatureListItemProps) => { export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
const getTypeIcon = (type: string) => { const getTypeIcon = (type: string) => {
const lowerType = type.toLowerCase(); 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")) if (lowerType.includes("exploration") || lowerType.includes("relic") || lowerType.includes("data"))
return <Shield className="h-4 w-4" />; return <Shield className="h-3 w-3" />;
if (lowerType.includes("ore") || lowerType.includes("gas")) return <Coins className="h-4 w-4" />; if (lowerType.includes("ore") || lowerType.includes("gas")) return <Coins className="h-3 w-3" />;
return <HelpCircle className="h-4 w-4" />; return <HelpCircle className="h-3 w-3" />;
}; };
const getTypeColor = (type: string, dangerous: boolean = false) => { const getTypeColor = (type: string, dangerous: boolean = false) => {
@@ -32,7 +33,7 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
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; // Handle invalid date if (isNaN(updatedTime.getTime())) return false;
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;
@@ -41,12 +42,11 @@ 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"; // Handle invalid date if (isNaN(date.getTime())) return "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)));
@@ -67,30 +67,30 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
return ( return (
<div <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"> <div className="flex items-center gap-3 flex-1">
{/* Type Badge - Most Important */} {/* Type Badge */}
<Badge <Badge
variant="outline" variant="outline"
className={`${getTypeColor( className={`${getTypeColor(
signature.type, signature.type,
signature.dangerous 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.dangerous ? <Skull className="h-3 w-3 text-red-400 animate-pulse" /> : getTypeIcon(signature.type)}
{signature.type || "Unknown Type"} {signature.type || "Unknown"}
</Badge> </Badge>
{/* Signature Name and ID */} {/* 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"> <div className="flex items-center gap-2">
<span className="font-mono text-sm text-slate-400 min-w-[60px]">{signature.identifier}</span> <span className="font-mono text-xs text-slate-400 min-w-[50px]">{signature.identifier}</span>
<h3 className="text-white font-medium flex items-center gap-2"> <h3 className="text-white font-medium text-sm flex items-center gap-2">
{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-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 DANGEROUS
</Badge> </Badge>
)} )}
@@ -99,16 +99,16 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
</div> </div>
{/* Dates */} {/* 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 && ( {signature.updated && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-1">
{oldEntry && <AlertTriangle className="h-4 w-4 text-yellow-500" />} {oldEntry && <AlertTriangle className="h-3 w-3 text-yellow-500" />}
<Clock className="h-4 w-4" /> <Clock className="h-3 w-3" />
<span>Updated: {formatDate(signature.updated)}</span> <span>Updated: {formatDate(signature.updated)}</span>
</div> </div>
)} )}
{signature.created && ( {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> <span>Created: {formatDate(signature.created)}</span>
</div> </div>
)} )}