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
@@ -11,6 +11,7 @@ import ToolNew from "@/pages/tool-new";
 import ToolEdit from "@/pages/tool-edit";
 import Analytics from "@/pages/analytics";
 import Admin from "@/pages/admin";
+import Redundancy from "@/pages/redundancy";
 import Login from "@/pages/login";
 import NotFound from "@/pages/not-found";

@@ -34,6 +35,7 @@ function Router() {
      <Route path="/tools/:id" component={ToolDetail} />
      <Route path="/analytics" component={Analytics} />
      <Route path="/admin" component={Admin} />
+      <Route path="/admin/redundancy" component={Redundancy} />
      <Route component={NotFound} />
    </Switch>
  );
@@ -1,5 +1,5 @@
 import { Link, useLocation } from "wouter";
-import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, User, ShieldCheck } from "lucide-react";
+import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, User, ShieldCheck, AlertTriangle } from "lucide-react";
 import { useAuth } from "@/hooks/use-auth";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -14,6 +14,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
    { href: "/tools/new", label: "Add Tool", icon: PlusCircle },
    { href: "/analytics", label: "Analytics", icon: BarChart3 },
    ...(isAdmin ? [{ href: "/admin", label: "Admin", icon: ShieldCheck }] : []),
+    ...(isAdmin ? [{ href: "/admin/redundancy", label: "Redundancy", icon: AlertTriangle }] : []),
  ];

  return (
@@ -20,6 +20,7 @@ export function useAuth() {
  const isAuthenticated = !!user && !error;
  const isAdmin = isAuthenticated && user?.role === "admin";
  const isLocalMode = authMode?.mode === "local";
+  const tier = isAuthenticated ? user?.tier ?? "free" : "free";

  function login(returnTo?: string) {
    if (isLocalMode) {
@@ -45,6 +46,7 @@ export function useAuth() {
    isAuthenticated,
    isAdmin,
    isLocalMode,
+    tier,
    login,
    logout,
  };
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useLocation } from "wouter";
+import { useLocation, Link } from "wouter";
 import {
  useListUsers,
  useCreateUser,
@@ -22,7 +22,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Skeleton } from "@/components/ui/skeleton";
 import { useToast } from "@/hooks/use-toast";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Users, ScrollText, ShieldAlert, Plus, Pencil, Trash2, Clock } from "lucide-react";
+import { Users, ScrollText, ShieldAlert, Plus, Pencil, Trash2, Clock, AlertTriangle } from "lucide-react";
 import { format } from "date-fns";

 export default function Admin() {
@@ -130,8 +130,15 @@ export default function Admin() {
    <Layout>
      <div className="space-y-6 pb-10">
        <div>
-          <h1 className="text-3xl font-bold tracking-tight mb-2">Admin Panel</h1>
-          <p className="text-muted-foreground">Manage users and review system changes.</p>
+          <div className="flex items-start justify-between">
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight mb-2">Admin Panel</h1>
+              <p className="text-muted-foreground">Manage users and review system changes.</p>
+            </div>
+            <Button asChild variant="outline" size="sm" className="gap-2">
+              <Link href="/admin/redundancy"><AlertTriangle className="w-4 h-4" /> Redundancy Dashboard</Link>
+            </Button>
+          </div>
        </div>

        <Tabs defaultValue="users">
@@ -0,0 +1,107 @@
+import { useState, useEffect } from "react";
+import { Layout } from "@/components/layout";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Progress } from "@/components/ui/progress";
+import { Star, AlertTriangle } from "lucide-react";
+import { Link } from "wouter";
+import { customFetch } from "@workspace/api-client-react";
+
+export default function RedundancyPage() {
+  const [data, setData] = useState<any[] | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    customFetch<any[]>("/api/admin/redundancy")
+      .then(setData)
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <Layout>
+      <div className="space-y-6">
+        <div className="flex items-center gap-3">
+          <AlertTriangle className="w-6 h-6 text-amber-500" />
+          <h1 className="text-3xl font-bold">Redundancy Dashboard</h1>
+        </div>
+        <p className="text-muted-foreground">
+          Tools grouped by category with feature overlap analysis.
+        </p>
+
+        {loading ? (
+          <div className="space-y-6">
+            {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-40 rounded-xl" />)}
+          </div>
+        ) : data && data.length > 0 ? (
+          <div className="space-y-8">
+            {data.map((group) => (
+              <div key={group.category}>
+                <h2 className="text-xl font-semibold mb-4 capitalize">{group.category}</h2>
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
+                  {group.tools.map((tool: any) => (
+                    <Link key={tool.id} href={`/tools/${tool.id}`}>
+                      <Card className="hover-elevate transition-all cursor-pointer hover:border-primary/50">
+                        <CardContent className="p-4">
+                          <div className="flex justify-between items-start">
+                            <div>
+                              <span className="font-medium">{tool.name}</span>
+                              <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
+                                <span>{tool.ratingCount} reviews</span>
+                                {tool.avgCombined != null && (
+                                  <>
+                                    <span>·</span>
+                                    <span className="flex items-center gap-0.5">
+                                      <Star className="w-3 h-3 fill-primary text-primary" />
+                                      {tool.avgCombined.toFixed(1)}
+                                    </span>
+                                  </>
+                                )}
+                              </div>
+                            </div>
+                            <Badge variant="outline">{tool.features.length} features</Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </Link>
+                  ))}
+                </div>
+
+                {group.pairs.length > 0 && (
+                  <div className="space-y-2">
+                    <h3 className="text-sm font-medium text-muted-foreground">Overlap Analysis</h3>
+                    {group.pairs.map((pair: any, i: number) => (
+                      <Card key={i} className="border-dashed">
+                        <CardContent className="p-3 flex items-center justify-between gap-4">
+                          <div className="flex items-center gap-3 min-w-0 flex-1">
+                            <span className="font-medium text-sm truncate">{pair.a.name}</span>
+                            <span className="text-muted-foreground text-xs shrink-0">vs</span>
+                            <span className="font-medium text-sm truncate">{pair.b.name}</span>
+                          </div>
+                          <div className="flex items-center gap-4 shrink-0">
+                            <div className="flex items-center gap-2">
+                              <Progress value={pair.overlap} className="w-16 h-2" />
+                              <span className="text-xs text-muted-foreground w-8">{pair.overlap}%</span>
+                            </div>
+                            {pair.scoreDiff !== 0 && (
+                              <Badge variant={pair.scoreDiff > 0 ? "default" : "secondary"} className="text-[10px]">
+                                {pair.scoreDiff > 0 ? `${pair.b.name} +${pair.scoreDiff.toFixed(1)}` : `${pair.a.name} +${Math.abs(pair.scoreDiff).toFixed(1)}`}
+                              </Badge>
+                            )}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-muted-foreground py-8 text-center">No tools found.</p>
+        )}
+      </div>
+    </Layout>
+  );
+}
@@ -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">