Add icon support for tools and improve analytics chart display

Update API, database schema, and frontend components to allow optional icons for tools, and adjust analytics chart rendering for better visibility.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 776963d0-f75d-42e2-a57b-cc36bdff8495
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 0ad0b686-eebd-46d2-8314-67e9e874e224
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0683fb79-a27c-485c-9333-5f4b288c4567/776963d0-f75d-42e2-a57b-cc36bdff8495/1p7jhzu
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
cheffe01
2026-05-25 13:28:34 +00:00
parent 7abb048edc
commit b8ba53598d
13 changed files with 132 additions and 27 deletions
@@ -1,7 +1,7 @@
import { ToolWithStats } from "@workspace/api-client-react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Star, MessageSquare } from "lucide-react";
import { Star, MessageSquare, Wrench } from "lucide-react";
import { Link } from "wouter";
export function ToolCard({ tool }: { tool: ToolWithStats }) {
@@ -9,9 +9,25 @@ export function ToolCard({ tool }: { tool: ToolWithStats }) {
<Card className="hover-elevate transition-all flex flex-col h-full cursor-pointer hover:border-primary/50">
<Link href={`/tools/${tool.id}`} className="flex flex-col h-full p-0 m-0">
<CardHeader className="pb-3">
<div className="flex justify-between items-start mb-2">
<CardTitle className="text-lg line-clamp-1">{tool.name}</CardTitle>
<Badge variant="outline" className="shrink-0">{tool.category}</Badge>
<div className="flex items-start gap-3 mb-2">
<div className="shrink-0 w-9 h-9 rounded-md border bg-muted flex items-center justify-center overflow-hidden">
{tool.iconUrl ? (
<img
src={tool.iconUrl}
alt={tool.name}
className="w-full h-full object-contain p-0.5"
onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
/>
) : (
<Wrench className="w-4 h-4 text-muted-foreground" />
)}
</div>
<div className="flex-1 min-w-0">
<div className="flex justify-between items-start gap-2">
<CardTitle className="text-base line-clamp-1">{tool.name}</CardTitle>
<Badge variant="outline" className="shrink-0 text-xs">{tool.category}</Badge>
</div>
</div>
</div>
<CardDescription className="line-clamp-2 min-h-[2.5rem]">
{tool.description}