ci: dev version includes UTC time (dev-YYYYMMDD-HHmm)
Build & Push Docker Image / build (push) Successful in 2m36s
Build & Push Docker Image / build (push) Successful in 2m36s
Phase 1: browse power-up - faceted filters: tags + features (array containment) and min rating on listTools; new ?tags=?features=?minRating= URL params with chips - global Cmd+K command palette (cmdk) with tool search + navigation - mini usefulness/usability bars on grid cards, wide cards and table rows
This commit is contained in:
@@ -34,7 +34,7 @@ jobs:
|
|||||||
VERSION="${{ gitea.ref_name }}"
|
VERSION="${{ gitea.ref_name }}"
|
||||||
VERSION_TAG="${{ gitea.ref_name }}"
|
VERSION_TAG="${{ gitea.ref_name }}"
|
||||||
else
|
else
|
||||||
VERSION="dev-${DATE_STAMP}"
|
VERSION="dev-$(date -u +"%Y%m%d-%H%M")"
|
||||||
VERSION_TAG="nightly-${DATE_STAMP}"
|
VERSION_TAG="nightly-${DATE_STAMP}"
|
||||||
fi
|
fi
|
||||||
TAGS="-t ${IMAGE}:sha-${SHA} -t ${IMAGE}:latest -t ${IMAGE}:${VERSION_TAG}"
|
TAGS="-t ${IMAGE}:sha-${SHA} -t ${IMAGE}:latest -t ${IMAGE}:${VERSION_TAG}"
|
||||||
|
|||||||
@@ -52,7 +52,10 @@ router.get("/tools", async (req, res): Promise<void> => {
|
|||||||
res.status(400).json({ error: parsed.error.message });
|
res.status(400).json({ error: parsed.error.message });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const { category, search, sort } = parsed.data;
|
const { category, search, sort, tags, features, minRating } = parsed.data;
|
||||||
|
|
||||||
|
const tagList = (tags ?? "").split(",").map((t) => t.trim()).filter(Boolean);
|
||||||
|
const featureList = (features ?? "").split(",").map((f) => f.trim()).filter(Boolean);
|
||||||
|
|
||||||
let query = db.select().from(toolsTable).where(isNull(toolsTable.deletedAt)).$dynamic();
|
let query = db.select().from(toolsTable).where(isNull(toolsTable.deletedAt)).$dynamic();
|
||||||
if (category) {
|
if (category) {
|
||||||
@@ -62,6 +65,12 @@ router.get("/tools", async (req, res): Promise<void> => {
|
|||||||
const escaped = search.replace(/[%_\\]/g, (m) => `\\${m}`);
|
const escaped = search.replace(/[%_\\]/g, (m) => `\\${m}`);
|
||||||
query = query.where(sql`${toolsTable.name} ilike ${`%${escaped}%`} escape '\\'`);
|
query = query.where(sql`${toolsTable.name} ilike ${`%${escaped}%`} escape '\\'`);
|
||||||
}
|
}
|
||||||
|
if (tagList.length > 0) {
|
||||||
|
query = query.where(sql`${toolsTable.tags} @> ARRAY[${sql.join(tagList.map((t) => sql`${t}`), sql`, `)}]::text[]`);
|
||||||
|
}
|
||||||
|
if (featureList.length > 0) {
|
||||||
|
query = query.where(sql`${toolsTable.features} @> ARRAY[${sql.join(featureList.map((f) => sql`${f}`), sql`, `)}]::text[]`);
|
||||||
|
}
|
||||||
|
|
||||||
const tools = await query.orderBy(desc(toolsTable.createdAt));
|
const tools = await query.orderBy(desc(toolsTable.createdAt));
|
||||||
|
|
||||||
@@ -95,6 +104,10 @@ router.get("/tools", async (req, res): Promise<void> => {
|
|||||||
result = result.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
|
result = result.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (minRating != null) {
|
||||||
|
result = result.filter((t) => (t.avgCombined ?? 0) >= minRating);
|
||||||
|
}
|
||||||
|
|
||||||
res.json(result);
|
res.json(result);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,124 @@
|
|||||||
|
import { useState, useEffect, useRef } from "react";
|
||||||
|
import { useLocation } from "wouter";
|
||||||
|
import { useListTools, getListToolsQueryKey } from "@workspace/api-client-react";
|
||||||
|
import {
|
||||||
|
CommandDialog,
|
||||||
|
CommandInput,
|
||||||
|
CommandList,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandItem,
|
||||||
|
CommandSeparator,
|
||||||
|
} from "@/components/ui/command";
|
||||||
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
|
import {
|
||||||
|
Compass,
|
||||||
|
PlusCircle,
|
||||||
|
BarChart3,
|
||||||
|
Trash2,
|
||||||
|
ShieldCheck,
|
||||||
|
Wrench,
|
||||||
|
Star,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
export function CommandPalette() {
|
||||||
|
const [, navigate] = useLocation();
|
||||||
|
const { isAuthenticated, isAdmin, hasFeature } = useAuth();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [search, setSearch] = useState("");
|
||||||
|
const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const down = (e: KeyboardEvent) => {
|
||||||
|
if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
|
||||||
|
e.preventDefault();
|
||||||
|
setOpen((o) => !o);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener("keydown", down);
|
||||||
|
return () => window.removeEventListener("keydown", down);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) setSearch("");
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
const { data: tools } = useListTools(
|
||||||
|
search ? { search } : undefined,
|
||||||
|
{
|
||||||
|
query: {
|
||||||
|
queryKey: getListToolsQueryKey(search ? { search } : undefined),
|
||||||
|
enabled: open && search.trim().length > 0,
|
||||||
|
staleTime: 30_000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
function go(path: string) {
|
||||||
|
setOpen(false);
|
||||||
|
navigate(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
const showTrash = hasFeature("trash") || isAdmin;
|
||||||
|
const showWatchlist = (hasFeature("watchlist") || isAdmin) && isAuthenticated;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CommandDialog open={open} onOpenChange={setOpen}>
|
||||||
|
<CommandInput
|
||||||
|
placeholder="Search tools or jump to…"
|
||||||
|
value={search}
|
||||||
|
onValueChange={(v) => {
|
||||||
|
setSearch(v);
|
||||||
|
if (searchTimer.current) clearTimeout(searchTimer.current);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>
|
||||||
|
{search ? `No tools found for "${search}".` : "Start typing to search tools."}
|
||||||
|
</CommandEmpty>
|
||||||
|
<CommandGroup heading="Navigate">
|
||||||
|
<CommandItem onSelect={() => go("/tools")}>
|
||||||
|
<Compass className="mr-2 h-4 w-4" /> Browse Tools
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem onSelect={() => go("/tools/new")}>
|
||||||
|
<PlusCircle className="mr-2 h-4 w-4" /> Add a Tool
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem onSelect={() => go("/analytics")}>
|
||||||
|
<BarChart3 className="mr-2 h-4 w-4" /> Analytics
|
||||||
|
</CommandItem>
|
||||||
|
{showWatchlist && (
|
||||||
|
<CommandItem onSelect={() => go("/watchlist")}>
|
||||||
|
<Star className="mr-2 h-4 w-4" /> My Watchlist
|
||||||
|
</CommandItem>
|
||||||
|
)}
|
||||||
|
{showTrash && (
|
||||||
|
<CommandItem onSelect={() => go("/trash")}>
|
||||||
|
<Trash2 className="mr-2 h-4 w-4" /> Trash
|
||||||
|
</CommandItem>
|
||||||
|
)}
|
||||||
|
{isAdmin && (
|
||||||
|
<CommandItem onSelect={() => go("/admin")}>
|
||||||
|
<ShieldCheck className="mr-2 h-4 w-4" /> Admin
|
||||||
|
</CommandItem>
|
||||||
|
)}
|
||||||
|
</CommandGroup>
|
||||||
|
{search.trim().length > 0 && (
|
||||||
|
<>
|
||||||
|
<CommandSeparator />
|
||||||
|
<CommandGroup heading="Tools">
|
||||||
|
{(tools ?? []).slice(0, 10).map((tool) => (
|
||||||
|
<CommandItem key={tool.id} onSelect={() => go(`/tools/${tool.id}`)}>
|
||||||
|
<Wrench className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||||
|
<span className="truncate">{tool.name}</span>
|
||||||
|
<span className="ml-auto text-xs text-muted-foreground shrink-0">
|
||||||
|
{tool.avgCombined ? `${tool.avgCombined.toFixed(1)}★` : ""}
|
||||||
|
</span>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CommandList>
|
||||||
|
</CommandDialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
import { useListAllTags, useListAllFeatures } from "@workspace/api-client-react";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Slider } from "@/components/ui/slider";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import { SlidersHorizontal, X } from "lucide-react";
|
||||||
|
|
||||||
|
export function FilterPopover({
|
||||||
|
tags,
|
||||||
|
features,
|
||||||
|
minRating,
|
||||||
|
onChange,
|
||||||
|
onClear,
|
||||||
|
activeCount,
|
||||||
|
}: {
|
||||||
|
tags: string[];
|
||||||
|
features: string[];
|
||||||
|
minRating: number | null;
|
||||||
|
onChange: (patch: { tags?: string[]; features?: string[]; minRating?: number | null }) => void;
|
||||||
|
onClear: () => void;
|
||||||
|
activeCount: number;
|
||||||
|
}) {
|
||||||
|
const { data: allTags } = useListAllTags();
|
||||||
|
const { data: allFeatures } = useListAllFeatures();
|
||||||
|
|
||||||
|
function toggle(list: string[], value: string): string[] {
|
||||||
|
return list.includes(value) ? list.filter((v) => v !== value) : [...list, value];
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button variant="outline" size="sm" className="gap-2" data-testid="button-filters">
|
||||||
|
<SlidersHorizontal className="w-4 h-4" />
|
||||||
|
Filters
|
||||||
|
{activeCount > 0 && (
|
||||||
|
<span className="rounded-full bg-primary text-primary-foreground text-[10px] font-medium px-1.5 py-0.5 min-w-[1.25rem] text-center">
|
||||||
|
{activeCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[340px]" align="start">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{allTags && allTags.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Tags</h4>
|
||||||
|
<ScrollArea className="h-40">
|
||||||
|
<div className="space-y-1.5 pr-2">
|
||||||
|
{allTags.map((t) => (
|
||||||
|
<Label key={t} className="flex items-center gap-2 text-sm font-normal cursor-pointer">
|
||||||
|
<Checkbox
|
||||||
|
checked={tags.includes(t)}
|
||||||
|
onCheckedChange={() => onChange({ tags: toggle(tags, t) })}
|
||||||
|
/>
|
||||||
|
{t}
|
||||||
|
</Label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{allFeatures && allFeatures.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Features</h4>
|
||||||
|
<ScrollArea className="h-40">
|
||||||
|
<div className="space-y-1.5 pr-2">
|
||||||
|
{allFeatures.map((f) => (
|
||||||
|
<Label key={f} className="flex items-center gap-2 text-sm font-normal cursor-pointer">
|
||||||
|
<Checkbox
|
||||||
|
checked={features.includes(f)}
|
||||||
|
onCheckedChange={() => onChange({ features: toggle(features, f) })}
|
||||||
|
/>
|
||||||
|
{f}
|
||||||
|
</Label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Min. rating</h4>
|
||||||
|
{minRating != null && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 px-1 text-xs text-muted-foreground"
|
||||||
|
onClick={() => onChange({ minRating: null })}
|
||||||
|
>
|
||||||
|
<X className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Slider
|
||||||
|
className="flex-1"
|
||||||
|
min={0}
|
||||||
|
max={5}
|
||||||
|
step={0.5}
|
||||||
|
value={[minRating ?? 0]}
|
||||||
|
onValueChange={([v]) => onChange({ minRating: v })}
|
||||||
|
aria-label="Minimum rating"
|
||||||
|
/>
|
||||||
|
<span className="text-sm tabular-nums w-8 text-right text-muted-foreground">
|
||||||
|
{minRating != null ? `${minRating.toFixed(1)}+` : "Any"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm" className="w-full" onClick={onClear}>
|
||||||
|
Clear filters
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -5,6 +5,7 @@ import { useGetVersion, getGetVersionQueryKey } from "@workspace/api-client-reac
|
|||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
import { ThemeToggle } from "@/components/theme-toggle";
|
import { ThemeToggle } from "@/components/theme-toggle";
|
||||||
|
import { CommandPalette } from "@/components/command-palette";
|
||||||
|
|
||||||
export function Layout({ children }: { children: React.ReactNode }) {
|
export function Layout({ children }: { children: React.ReactNode }) {
|
||||||
const [location] = useLocation();
|
const [location] = useLocation();
|
||||||
@@ -29,6 +30,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen bg-background text-foreground">
|
<div className="flex min-h-screen bg-background text-foreground">
|
||||||
|
<CommandPalette />
|
||||||
<aside className="w-64 border-r bg-card flex flex-col hidden md:flex">
|
<aside className="w-64 border-r bg-card flex flex-col hidden md:flex">
|
||||||
<div className="p-6 border-b">
|
<div className="p-6 border-b">
|
||||||
<Link href="/" className="flex items-center gap-2 text-primary font-bold text-xl">
|
<Link href="/" className="flex items-center gap-2 text-primary font-bold text-xl">
|
||||||
|
|||||||
@@ -0,0 +1,73 @@
|
|||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
function pct(v: number | null | undefined): number {
|
||||||
|
if (v == null) return 0;
|
||||||
|
return Math.max(0, Math.min(5, v)) / 5 * 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MiniBars({
|
||||||
|
usefulness,
|
||||||
|
usability,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
usefulness: number | null | undefined;
|
||||||
|
usability: number | null | undefined;
|
||||||
|
className?: string;
|
||||||
|
}) {
|
||||||
|
const rows = [
|
||||||
|
{ label: "Usefulness", value: usefulness },
|
||||||
|
{ label: "Usability", value: usability },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<div className={cn("space-y-1 w-full", className)}>
|
||||||
|
{rows.map(({ label, value }) => (
|
||||||
|
<div
|
||||||
|
key={label}
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
title={`${label}: ${value != null ? value.toFixed(1) : "N/A"} / 5`}
|
||||||
|
>
|
||||||
|
<span className="text-[10px] uppercase tracking-wide text-muted-foreground w-[3.5rem] shrink-0">
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
<div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-primary/70"
|
||||||
|
style={{ width: `${pct(value)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-[10px] text-muted-foreground tabular-nums w-7 text-right shrink-0">
|
||||||
|
{value != null ? value.toFixed(1) : "–"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MiniBarStack({
|
||||||
|
usefulness,
|
||||||
|
usability,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
usefulness: number | null | undefined;
|
||||||
|
usability: number | null | undefined;
|
||||||
|
className?: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("h-1.5 w-16 rounded-full bg-muted overflow-hidden flex", className)}
|
||||||
|
title={`Usefulness ${usefulness != null ? usefulness.toFixed(1) : "N/A"} / Usability ${
|
||||||
|
usability != null ? usability.toFixed(1) : "N/A"
|
||||||
|
} (of 5)`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="h-full bg-primary/80"
|
||||||
|
style={{ width: `${pct(usefulness)}%` }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="h-full bg-primary/40"
|
||||||
|
style={{ width: `${pct(usability)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3,6 +3,7 @@ import { Card } from "@/components/ui/card";
|
|||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Star, MessageSquare, Wrench, ChevronRight } from "lucide-react";
|
import { Star, MessageSquare, Wrench, ChevronRight } from "lucide-react";
|
||||||
import { ToolWithStats } from "@workspace/api-client-react";
|
import { ToolWithStats } from "@workspace/api-client-react";
|
||||||
|
import { MiniBarStack } from "@/components/mini-bars";
|
||||||
|
|
||||||
export function ToolCardWide({ tool, density }: { tool: ToolWithStats; density: "cozy" | "compact" }) {
|
export function ToolCardWide({ tool, density }: { tool: ToolWithStats; density: "cozy" | "compact" }) {
|
||||||
const compact = density === "compact";
|
const compact = density === "compact";
|
||||||
@@ -46,18 +47,21 @@ export function ToolCardWide({ tool, density }: { tool: ToolWithStats; density:
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="shrink-0 flex items-center gap-4 text-sm text-muted-foreground">
|
<div className="shrink-0 flex flex-col items-end gap-2 text-sm text-muted-foreground">
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-4">
|
||||||
<Star className="w-4 h-4 fill-primary text-primary" />
|
<div className="flex items-center gap-1">
|
||||||
<span className="font-medium text-foreground">
|
<Star className="w-4 h-4 fill-primary text-primary" />
|
||||||
{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
|
<span className="font-medium text-foreground">
|
||||||
</span>
|
{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<MessageSquare className="w-4 h-4" />
|
||||||
|
<span>{tool.ratingCount}</span>
|
||||||
|
</div>
|
||||||
|
<ChevronRight className="w-4 h-4" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1">
|
{!compact && <MiniBarStack usefulness={tool.avgUsefulness} usability={tool.avgUsability} />}
|
||||||
<MessageSquare className="w-4 h-4" />
|
|
||||||
<span>{tool.ratingCount}</span>
|
|
||||||
</div>
|
|
||||||
<ChevronRight className="w-4 h-4" />
|
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
|
|||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Star, MessageSquare, Wrench } from "lucide-react";
|
import { Star, MessageSquare, Wrench } from "lucide-react";
|
||||||
import { Link } from "wouter";
|
import { Link } from "wouter";
|
||||||
|
import { MiniBars } from "@/components/mini-bars";
|
||||||
|
|
||||||
export function ToolCard({ tool }: { tool: ToolWithStats }) {
|
export function ToolCard({ tool }: { tool: ToolWithStats }) {
|
||||||
return (
|
return (
|
||||||
@@ -47,19 +48,22 @@ export function ToolCard({ tool }: { tool: ToolWithStats }) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardFooter className="pt-0 flex justify-between items-center text-sm text-muted-foreground border-t p-4 mt-auto">
|
<CardFooter className="pt-0 flex flex-col gap-3 border-t p-4 mt-auto">
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-4">
|
||||||
<Star className="w-4 h-4 fill-primary text-primary" />
|
<div className="flex items-center gap-1">
|
||||||
<span className="font-medium text-foreground">
|
<Star className="w-4 h-4 fill-primary text-primary" />
|
||||||
{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
|
<span className="font-medium text-foreground">
|
||||||
</span>
|
{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
|
||||||
</div>
|
</span>
|
||||||
<div className="flex items-center gap-1">
|
</div>
|
||||||
<MessageSquare className="w-4 h-4" />
|
<div className="flex items-center gap-1">
|
||||||
<span>{tool.ratingCount}</span>
|
<MessageSquare className="w-4 h-4" />
|
||||||
|
<span>{tool.ratingCount}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} />
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Link>
|
</Link>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { Badge } from "@/components/ui/badge";
|
|||||||
import { Star, MessageSquare, Wrench } from "lucide-react";
|
import { Star, MessageSquare, Wrench } from "lucide-react";
|
||||||
import { ToolWithStats } from "@workspace/api-client-react";
|
import { ToolWithStats } from "@workspace/api-client-react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import { MiniBarStack } from "@/components/mini-bars";
|
||||||
|
|
||||||
export const TABLE_GRID =
|
export const TABLE_GRID =
|
||||||
"grid-cols-[minmax(0,2fr)_minmax(0,1fr)_80px_80px]";
|
"grid-cols-[minmax(0,2fr)_minmax(0,1fr)_80px_80px]";
|
||||||
@@ -56,8 +57,13 @@ export function ToolRow({
|
|||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-end gap-1">
|
<div className="flex items-center justify-end gap-1">
|
||||||
<Star className="w-4 h-4 fill-primary text-primary" />
|
<div className="flex flex-col items-end gap-0.5">
|
||||||
<span className="font-medium">{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}</span>
|
<div className="flex items-center gap-1">
|
||||||
|
<Star className="w-4 h-4 fill-primary text-primary" />
|
||||||
|
<span className="font-medium">{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}</span>
|
||||||
|
</div>
|
||||||
|
{!compact && <MiniBarStack usefulness={tool.avgUsefulness} usability={tool.avgUsability} />}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-end gap-1 text-muted-foreground">
|
<div className="flex items-center justify-end gap-1 text-muted-foreground">
|
||||||
<MessageSquare className="w-4 h-4" />
|
<MessageSquare className="w-4 h-4" />
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import { ToolCardWide } from "@/components/tool-card-wide";
|
|||||||
import { ToolRow, TABLE_GRID } from "@/components/tool-row";
|
import { ToolRow, TABLE_GRID } from "@/components/tool-row";
|
||||||
import { ViewToggle, type ViewMode } from "@/components/view-toggle";
|
import { ViewToggle, type ViewMode } from "@/components/view-toggle";
|
||||||
import { DensityToggle, type Density } from "@/components/density-toggle";
|
import { DensityToggle, type Density } from "@/components/density-toggle";
|
||||||
|
import { FilterPopover } from "@/components/filter-popover";
|
||||||
import { useBrowsePreferences, isViewMode, isDensity } from "@/hooks/use-browse-preferences";
|
import { useBrowsePreferences, isViewMode, isDensity } from "@/hooks/use-browse-preferences";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
@@ -87,6 +88,16 @@ export default function ToolsBrowse() {
|
|||||||
const [sort, setSort] = useState<ListToolsSort>(initialSort);
|
const [sort, setSort] = useState<ListToolsSort>(initialSort);
|
||||||
const [overrideView, setOverrideView] = useState<ViewMode | null>(null);
|
const [overrideView, setOverrideView] = useState<ViewMode | null>(null);
|
||||||
const [overrideDensity, setOverrideDensity] = useState<Density | null>(null);
|
const [overrideDensity, setOverrideDensity] = useState<Density | null>(null);
|
||||||
|
const [tags, setTags] = useState<string[]>(() =>
|
||||||
|
(initialParams.get("tags") ?? "").split(",").map((t) => t.trim()).filter(Boolean),
|
||||||
|
);
|
||||||
|
const [features, setFeatures] = useState<string[]>(() =>
|
||||||
|
(initialParams.get("features") ?? "").split(",").map((f) => f.trim()).filter(Boolean),
|
||||||
|
);
|
||||||
|
const [minRating, setMinRating] = useState<number | null>(() => {
|
||||||
|
const v = Number(initialParams.get("minRating"));
|
||||||
|
return Number.isFinite(v) ? Math.min(5, Math.max(0, v)) : null;
|
||||||
|
});
|
||||||
|
|
||||||
const urlView = initialParams.get("view");
|
const urlView = initialParams.get("view");
|
||||||
const urlDensity = initialParams.get("density");
|
const urlDensity = initialParams.get("density");
|
||||||
@@ -102,9 +113,12 @@ export default function ToolsBrowse() {
|
|||||||
if (sort && sort !== ListToolsSort.newest) p.set("sort", sort);
|
if (sort && sort !== ListToolsSort.newest) p.set("sort", sort);
|
||||||
if (view !== "grid") p.set("view", view);
|
if (view !== "grid") p.set("view", view);
|
||||||
if (density !== "cozy") p.set("density", density);
|
if (density !== "cozy") p.set("density", density);
|
||||||
|
if (tags.length > 0) p.set("tags", tags.join(","));
|
||||||
|
if (features.length > 0) p.set("features", features.join(","));
|
||||||
|
if (minRating != null) p.set("minRating", String(minRating));
|
||||||
const qs = p.toString();
|
const qs = p.toString();
|
||||||
navigate(qs ? `/tools?${qs}` : "/tools", { replace: true });
|
navigate(qs ? `/tools?${qs}` : "/tools", { replace: true });
|
||||||
}, [search, category, sort, view, density, navigate]);
|
}, [search, category, sort, view, density, tags, features, minRating, navigate]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const t = setTimeout(() => setSearch(searchInput), 300);
|
const t = setTimeout(() => setSearch(searchInput), 300);
|
||||||
@@ -135,6 +149,9 @@ export default function ToolsBrowse() {
|
|||||||
...(search ? { search } : {}),
|
...(search ? { search } : {}),
|
||||||
...(category && category !== "all" ? { category } : {}),
|
...(category && category !== "all" ? { category } : {}),
|
||||||
...(sort ? { sort } : {}),
|
...(sort ? { sort } : {}),
|
||||||
|
...(tags.length > 0 ? { tags: tags.join(",") } : {}),
|
||||||
|
...(features.length > 0 ? { features: features.join(",") } : {}),
|
||||||
|
...(minRating != null ? { minRating } : {}),
|
||||||
};
|
};
|
||||||
|
|
||||||
const { data: tools, isLoading: loadingTools } = useListTools(queryParams);
|
const { data: tools, isLoading: loadingTools } = useListTools(queryParams);
|
||||||
@@ -155,9 +172,13 @@ export default function ToolsBrowse() {
|
|||||||
setSearchInput("");
|
setSearchInput("");
|
||||||
setCategory("all");
|
setCategory("all");
|
||||||
setSort(ListToolsSort.newest);
|
setSort(ListToolsSort.newest);
|
||||||
|
setTags([]);
|
||||||
|
setFeatures([]);
|
||||||
|
setMinRating(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const hasFilters = search !== "" || category !== "all" || sort !== ListToolsSort.newest;
|
const filterCount = tags.length + features.length + (minRating != null ? 1 : 0);
|
||||||
|
const hasFilters = search !== "" || category !== "all" || sort !== ListToolsSort.newest || filterCount > 0;
|
||||||
|
|
||||||
function toggleNameSort() {
|
function toggleNameSort() {
|
||||||
setSort(sort === ListToolsSort.name_asc ? ListToolsSort.name_desc : ListToolsSort.name_asc);
|
setSort(sort === ListToolsSort.name_asc ? ListToolsSort.name_desc : ListToolsSort.name_asc);
|
||||||
@@ -242,6 +263,23 @@ export default function ToolsBrowse() {
|
|||||||
))}
|
))}
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
|
<FilterPopover
|
||||||
|
tags={tags}
|
||||||
|
features={features}
|
||||||
|
minRating={minRating}
|
||||||
|
onChange={({ tags: t, features: f, minRating: m }) => {
|
||||||
|
if (t) setTags(t);
|
||||||
|
if (f) setFeatures(f);
|
||||||
|
if (m !== undefined) setMinRating(m);
|
||||||
|
}}
|
||||||
|
onClear={() => {
|
||||||
|
setTags([]);
|
||||||
|
setFeatures([]);
|
||||||
|
setMinRating(null);
|
||||||
|
}}
|
||||||
|
activeCount={filterCount}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -286,6 +324,42 @@ export default function ToolsBrowse() {
|
|||||||
</button>
|
</button>
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
|
{tags.map((t) => (
|
||||||
|
<Badge key={`tag-${t}`} variant="secondary" className="gap-1 pl-2.5 pr-1.5 py-1">
|
||||||
|
{t}
|
||||||
|
<button
|
||||||
|
onClick={() => setTags(tags.filter((x) => x !== t))}
|
||||||
|
className="rounded-sm hover:bg-muted p-0.5"
|
||||||
|
aria-label={`Remove tag ${t}`}
|
||||||
|
>
|
||||||
|
<X className="w-3.5 h-3.5" />
|
||||||
|
</button>
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
{features.map((f) => (
|
||||||
|
<Badge key={`feat-${f}`} variant="secondary" className="gap-1 pl-2.5 pr-1.5 py-1">
|
||||||
|
{f}
|
||||||
|
<button
|
||||||
|
onClick={() => setFeatures(features.filter((x) => x !== f))}
|
||||||
|
className="rounded-sm hover:bg-muted p-0.5"
|
||||||
|
aria-label={`Remove feature ${f}`}
|
||||||
|
>
|
||||||
|
<X className="w-3.5 h-3.5" />
|
||||||
|
</button>
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
{minRating != null && (
|
||||||
|
<Badge variant="secondary" className="gap-1 pl-2.5 pr-1.5 py-1">
|
||||||
|
⭐ {minRating.toFixed(1)}+
|
||||||
|
<button
|
||||||
|
onClick={() => setMinRating(null)}
|
||||||
|
className="rounded-sm hover:bg-muted p-0.5"
|
||||||
|
aria-label="Remove min rating"
|
||||||
|
>
|
||||||
|
<X className="w-3.5 h-3.5" />
|
||||||
|
</button>
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
<Button variant="link" size="sm" className="px-1 text-muted-foreground" onClick={clearFilters}>
|
<Button variant="link" size="sm" className="px-1 text-muted-foreground" onClick={clearFilters}>
|
||||||
Clear all
|
Clear all
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -338,6 +338,20 @@ export type ListToolsParams = {
|
|||||||
category?: string;
|
category?: string;
|
||||||
search?: string;
|
search?: string;
|
||||||
sort?: ListToolsSort;
|
sort?: ListToolsSort;
|
||||||
|
/**
|
||||||
|
* Comma-separated tags; tool must include all of them
|
||||||
|
*/
|
||||||
|
tags?: string;
|
||||||
|
/**
|
||||||
|
* Comma-separated features; tool must include all of them
|
||||||
|
*/
|
||||||
|
features?: string;
|
||||||
|
/**
|
||||||
|
* Minimum average combined rating (0-5)
|
||||||
|
* @minimum 0
|
||||||
|
* @maximum 5
|
||||||
|
*/
|
||||||
|
minRating?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ListToolsSort = typeof ListToolsSort[keyof typeof ListToolsSort];
|
export type ListToolsSort = typeof ListToolsSort[keyof typeof ListToolsSort];
|
||||||
|
|||||||
@@ -73,6 +73,26 @@ paths:
|
|||||||
schema:
|
schema:
|
||||||
type: string
|
type: string
|
||||||
enum: [newest, top_rated, most_reviewed, name_asc, name_desc, recently_updated]
|
enum: [newest, top_rated, most_reviewed, name_asc, name_desc, recently_updated]
|
||||||
|
- name: tags
|
||||||
|
in: query
|
||||||
|
required: false
|
||||||
|
description: Comma-separated tags; tool must include all of them
|
||||||
|
schema:
|
||||||
|
type: string
|
||||||
|
- name: features
|
||||||
|
in: query
|
||||||
|
required: false
|
||||||
|
description: Comma-separated features; tool must include all of them
|
||||||
|
schema:
|
||||||
|
type: string
|
||||||
|
- name: minRating
|
||||||
|
in: query
|
||||||
|
required: false
|
||||||
|
description: Minimum average combined rating (0-5)
|
||||||
|
schema:
|
||||||
|
type: number
|
||||||
|
minimum: 0
|
||||||
|
maximum: 5
|
||||||
responses:
|
responses:
|
||||||
"200":
|
"200":
|
||||||
description: List of tools
|
description: List of tools
|
||||||
|
|||||||
@@ -32,10 +32,18 @@ export const GetVersionResponse = zod.object({
|
|||||||
/**
|
/**
|
||||||
* @summary List all tools
|
* @summary List all tools
|
||||||
*/
|
*/
|
||||||
|
export const listToolsQueryMinRatingMin = 0;
|
||||||
|
export const listToolsQueryMinRatingMax = 5;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const ListToolsQueryParams = zod.object({
|
export const ListToolsQueryParams = zod.object({
|
||||||
"category": zod.coerce.string().optional(),
|
"category": zod.coerce.string().optional(),
|
||||||
"search": zod.coerce.string().optional(),
|
"search": zod.coerce.string().optional(),
|
||||||
"sort": zod.enum(['newest', 'top_rated', 'most_reviewed', 'name_asc', 'name_desc', 'recently_updated']).optional()
|
"sort": zod.enum(['newest', 'top_rated', 'most_reviewed', 'name_asc', 'name_desc', 'recently_updated']).optional(),
|
||||||
|
"tags": zod.coerce.string().optional().describe('Comma-separated tags; tool must include all of them'),
|
||||||
|
"features": zod.coerce.string().optional().describe('Comma-separated features; tool must include all of them'),
|
||||||
|
"minRating": zod.coerce.number().min(listToolsQueryMinRatingMin).max(listToolsQueryMinRatingMax).optional().describe('Minimum average combined rating (0-5)')
|
||||||
})
|
})
|
||||||
|
|
||||||
export const ListToolsResponseItem = zod.object({
|
export const ListToolsResponseItem = zod.object({
|
||||||
|
|||||||
@@ -11,4 +11,18 @@ export type ListToolsParams = {
|
|||||||
category?: string;
|
category?: string;
|
||||||
search?: string;
|
search?: string;
|
||||||
sort?: ListToolsSort;
|
sort?: ListToolsSort;
|
||||||
|
/**
|
||||||
|
* Comma-separated tags; tool must include all of them
|
||||||
|
*/
|
||||||
|
tags?: string;
|
||||||
|
/**
|
||||||
|
* Comma-separated features; tool must include all of them
|
||||||
|
*/
|
||||||
|
features?: string;
|
||||||
|
/**
|
||||||
|
* Minimum average combined rating (0-5)
|
||||||
|
* @minimum 0
|
||||||
|
* @maximum 5
|
||||||
|
*/
|
||||||
|
minRating?: number;
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user