feat: auth foundation, similar tools, costs, redundancy, anonymous voting

2026-07-29 21:59:29 +02:00
parent 8b3b7c9955
commit 59badeaa48
22 changed files with 793 additions and 15 deletions
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRoute, useLocation } from "wouter";
 import { 
  useGetTool, 
@@ -25,9 +25,17 @@ import { Progress } from "@/components/ui/progress";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
-import { ExternalLink, Star, ArrowLeft, Plus, Pencil, Trash2 } from "lucide-react";
+import { ExternalLink, Star, ArrowLeft, Plus, Pencil, Trash2, Link as LinkIcon } from "lucide-react";
 import { Link } from "wouter";
 import { useAuth } from "@/hooks/use-auth";
 import { useDeleteTool, getListToolsQueryKey } from "@workspace/api-client-react";
@@ -41,6 +49,7 @@ import {
  AlertDialogHeader,
  AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { customFetch } from "@workspace/api-client-react";

 const ratingSchema = z.object({
  usefulness: z.number().min(1).max(5),
@@ -64,6 +73,55 @@ export default function ToolDetail() {
  const { user, isAdmin } = useAuth();
  const deleteTool = useDeleteTool();

+  const [similarData, setSimilarData] = useState<{ manual: any[]; auto: any[] } | null>(null);
+  const [similarLoading, setSimilarLoading] = useState(false);
+  const [linkDialogOpen, setLinkDialogOpen] = useState(false);
+  const [linkToolId, setLinkToolId] = useState("");
+  const [linkType, setLinkType] = useState("similar");
+  const [linkNotes, setLinkNotes] = useState("");
+
+  useEffect(() => {
+    if (!id) return;
+    setSimilarLoading(true);
+    customFetch(`/api/tools/${id}/similar`)
+      .then((r) => r.json())
+      .then((data) => setSimilarData(data))
+      .catch(() => {})
+      .finally(() => setSimilarLoading(false));
+  }, [id]);
+
+  async function handleCreateRelation() {
+    if (!linkToolId) return;
+    try {
+      const res = await customFetch(`/api/tools/${id}/relations`, {
+        method: "POST",
+        body: JSON.stringify({ relatedToolId: Number(linkToolId), relationType: linkType, notes: linkNotes || undefined }),
+      });
+      if (!res.ok) { const e = await res.json(); throw new Error(e.error); }
+      toast({ title: "Relation created" });
+      setLinkDialogOpen(false);
+      setLinkToolId("");
+      setLinkNotes("");
+      setLinkType("similar");
+      const r = await customFetch(`/api/tools/${id}/similar`).then((r2) => r2.json());
+      setSimilarData(r);
+    } catch (err: any) {
+      toast({ title: "Failed to create relation", description: err.message, variant: "destructive" });
+    }
+  }
+
+  async function handleDeleteRelation(relationId: number) {
+    try {
+      const res = await customFetch(`/api/tools/relations/${relationId}`, { method: "DELETE" });
+      if (!res.ok) throw new Error("Failed to delete");
+      toast({ title: "Relation deleted" });
+      const r = await customFetch(`/api/tools/${id}/similar`).then((r2) => r2.json());
+      setSimilarData(r);
+    } catch {
+      toast({ title: "Failed to delete relation", variant: "destructive" });
+    }
+  }
+
  const { data: tool, isLoading: loadingTool } = useGetTool(id, {
    query: { enabled: !!id, queryKey: getGetToolQueryKey(id) }
  });
@@ -273,6 +331,141 @@ export default function ToolDetail() {
          <div className="text-center py-10">Tool not found.</div>
        )}

+        {/* Similar Tools Section */}
+        {tool && (
+          <div className="space-y-4 mt-8">
+            <div className="flex items-center justify-between">
+              <h3 className="text-xl font-bold">Similar Tools</h3>
+              {isAdmin && (
+                <Button variant="outline" size="sm" onClick={() => setLinkDialogOpen(true)} className="gap-2">
+                  <LinkIcon className="w-4 h-4" /> Link Tool
+                </Button>
+              )}
+            </div>
+
+            {similarLoading ? (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-20 rounded-lg" />)}
+              </div>
+            ) : similarData && (similarData.manual.length > 0 || similarData.auto.length > 0) ? (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {similarData.manual.map((item: any) => (
+                  <Link key={item.relationId} href={`/tools/${item.id}`} className="group">
+                    <Card className="hover-elevate transition-all hover:border-primary/50 cursor-pointer h-full">
+                      <CardContent className="p-4 flex items-center justify-between gap-3">
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium truncate">{item.name}</span>
+                            <Badge variant={item.relationType === "replaces" ? "destructive" : item.relationType === "superseded_by" ? "default" : "secondary"} className="text-[10px] px-1 py-0 shrink-0">
+                              {item.relationType === "superseded_by" ? "replaces" : item.relationType}
+                            </Badge>
+                          </div>
+                          <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
+                            <span>{item.category}</span>
+                            {item.avgCombined != null && (
+                              <>
+                                <span>·</span>
+                                <span className="flex items-center gap-0.5">
+                                  <Star className="w-3 h-3 fill-primary text-primary" />
+                                  {item.avgCombined.toFixed(1)}
+                                </span>
+                              </>
+                            )}
+                          </div>
+                          {item.notes && <p className="text-xs text-muted-foreground mt-1 italic">{item.notes}</p>}
+                        </div>
+                        {isAdmin && (
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity h-7 w-7"
+                            onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleDeleteRelation(item.relationId); }}
+                          >
+                            <Trash2 className="w-3.5 h-3.5 text-destructive" />
+                          </Button>
+                        )}
+                      </CardContent>
+                    </Card>
+                  </Link>
+                ))}
+                {similarData.auto.map((item: any) => (
+                  <Link key={item.id} href={`/tools/${item.id}`} className="group">
+                    <Card className="hover-elevate transition-all hover:border-primary/50 cursor-pointer h-full">
+                      <CardContent className="p-4 flex items-center gap-3">
+                        <div className="min-w-0 flex-1">
+                          <span className="font-medium truncate block">{item.name}</span>
+                          <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
+                            <span>{item.category}</span>
+                            {item.avgCombined != null && (
+                              <>
+                                <span>·</span>
+                                <span className="flex items-center gap-0.5">
+                                  <Star className="w-3 h-3 fill-primary text-primary" />
+                                  {item.avgCombined.toFixed(1)}
+                                </span>
+                              </>
+                            )}
+                            <span>·</span>
+                            <span>Score: {item.score}</span>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                ))}
+              </div>
+            ) : similarData && similarData.manual.length === 0 && similarData.auto.length === 0 ? (
+              <p className="text-sm text-muted-foreground py-4">No similar tools found.</p>
+            ) : null}
+          </div>
+        )}
+
+        {/* Link Tool Dialog */}
+        <Dialog open={linkDialogOpen} onOpenChange={setLinkDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Link Similar Tool</DialogTitle>
+              <DialogDescription>Manually link this tool to another tool.</DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4 py-2">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Tool ID</label>
+                <Input
+                  type="number"
+                  placeholder="Enter target tool ID"
+                  value={linkToolId}
+                  onChange={(e) => setLinkToolId(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Relation Type</label>
+                <Select value={linkType} onValueChange={setLinkType}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="similar">Similar</SelectItem>
+                    <SelectItem value="replaces">Replaces</SelectItem>
+                    <SelectItem value="superseded_by">Superseded By</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Notes (Optional)</label>
+                <Textarea
+                  placeholder="Why are these tools related?"
+                  value={linkNotes}
+                  onChange={(e) => setLinkNotes(e.target.value)}
+                />
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setLinkDialogOpen(false)}>Cancel</Button>
+              <Button onClick={handleCreateRelation} disabled={!linkToolId}>Create Link</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
        {/* Ratings & Reviews Section */}
        {tool && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">