feat: watchlist (premium), mobile bottom nav
Build & Push Docker Image / build (push) Successful in 2m35s
Build & Push Docker Image / build (push) Successful in 2m35s
This commit is contained in:
@@ -1,11 +1,11 @@
|
|||||||
import { Router, type IRouter, type Request } from "express";
|
import { Router, type IRouter, type Request } from "express";
|
||||||
import { Issuer, generators, type Client } from "openid-client";
|
import { Issuer, generators, type Client } from "openid-client";
|
||||||
import bcrypt from "bcryptjs";
|
import bcrypt from "bcryptjs";
|
||||||
import { eq } from "drizzle-orm";
|
import { eq, and, inArray, isNull } from "drizzle-orm";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { db, usersTable } from "@workspace/db";
|
import { db, usersTable, toolsTable, ratingsTable } from "@workspace/db";
|
||||||
import { logger } from "../lib/logger";
|
import { logger } from "../lib/logger";
|
||||||
import { getEntitlements } from "../middleware/feature";
|
import { getEntitlements, requireFeature } from "../middleware/feature";
|
||||||
|
|
||||||
const router: IRouter = Router();
|
const router: IRouter = Router();
|
||||||
|
|
||||||
@@ -301,6 +301,7 @@ async function resolveDbUser(u: SessionUser) {
|
|||||||
const PreferenceSchema = z.object({
|
const PreferenceSchema = z.object({
|
||||||
view: z.enum(["grid", "table", "rows"]).optional(),
|
view: z.enum(["grid", "table", "rows"]).optional(),
|
||||||
density: z.enum(["cozy", "compact"]).optional(),
|
density: z.enum(["cozy", "compact"]).optional(),
|
||||||
|
watchlist: z.array(z.number().int().positive()).max(50).optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
router.get("/auth/me/preferences", async (req, res): Promise<void> => {
|
router.get("/auth/me/preferences", async (req, res): Promise<void> => {
|
||||||
@@ -316,6 +317,46 @@ router.get("/auth/me/preferences", async (req, res): Promise<void> => {
|
|||||||
res.json(dbUser.preferences ?? {});
|
res.json(dbUser.preferences ?? {});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
router.get("/auth/me/watchlist", requireFeature("watchlist"), async (req, res): Promise<void> => {
|
||||||
|
const dbUser = await resolveDbUser(req.session.user!);
|
||||||
|
if (!dbUser) {
|
||||||
|
res.status(401).json({ error: "User not found" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const ids = (dbUser.preferences?.watchlist ?? []).filter((id) => Number.isInteger(id));
|
||||||
|
if (ids.length === 0) {
|
||||||
|
res.json([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const tools = await db
|
||||||
|
.select()
|
||||||
|
.from(toolsTable)
|
||||||
|
.where(and(isNull(toolsTable.deletedAt), inArray(toolsTable.id, ids)));
|
||||||
|
const ratings = await db
|
||||||
|
.select({ toolId: ratingsTable.toolId, usefulness: ratingsTable.usefulness, usability: ratingsTable.usability })
|
||||||
|
.from(ratingsTable)
|
||||||
|
.where(inArray(ratingsTable.toolId, tools.map((t) => t.id)));
|
||||||
|
const byTool = new Map<number, { usefulness: number; usability: number }[]>();
|
||||||
|
for (const r of ratings) {
|
||||||
|
const list = byTool.get(r.toolId) ?? [];
|
||||||
|
list.push({ usefulness: r.usefulness, usability: r.usability });
|
||||||
|
byTool.set(r.toolId, list);
|
||||||
|
}
|
||||||
|
const byId = new Map(tools.map((t) => [t.id, t]));
|
||||||
|
const ordered = ids
|
||||||
|
.filter((id) => byId.has(id))
|
||||||
|
.map((id) => {
|
||||||
|
const tool = byId.get(id)!;
|
||||||
|
const toolRatings = byTool.get(id) ?? [];
|
||||||
|
const ratingCount = toolRatings.length;
|
||||||
|
const avgUsefulness = ratingCount > 0 ? toolRatings.reduce((s, r) => s + r.usefulness, 0) / ratingCount : null;
|
||||||
|
const avgUsability = ratingCount > 0 ? toolRatings.reduce((s, r) => s + r.usability, 0) / ratingCount : null;
|
||||||
|
const avgCombined = avgUsefulness != null && avgUsability != null ? (avgUsefulness + avgUsability) / 2 : null;
|
||||||
|
return { ...tool, ratingCount, avgUsefulness, avgUsability, avgCombined };
|
||||||
|
});
|
||||||
|
res.json(ordered);
|
||||||
|
});
|
||||||
|
|
||||||
router.put("/auth/me/preferences", async (req, res): Promise<void> => {
|
router.put("/auth/me/preferences", async (req, res): Promise<void> => {
|
||||||
if (!req.session.user) {
|
if (!req.session.user) {
|
||||||
res.status(401).json({ error: "Not authenticated" });
|
res.status(401).json({ error: "Not authenticated" });
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ import Admin from "@/pages/admin";
|
|||||||
import Redundancy from "@/pages/redundancy";
|
import Redundancy from "@/pages/redundancy";
|
||||||
import Trash from "@/pages/trash";
|
import Trash from "@/pages/trash";
|
||||||
import Compare from "@/pages/compare";
|
import Compare from "@/pages/compare";
|
||||||
|
import Watchlist from "@/pages/watchlist";
|
||||||
import Login from "@/pages/login";
|
import Login from "@/pages/login";
|
||||||
import NotFound from "@/pages/not-found";
|
import NotFound from "@/pages/not-found";
|
||||||
|
|
||||||
@@ -36,6 +37,7 @@ function Router() {
|
|||||||
<Route path="/tools/:id/edit" component={ToolEdit} />
|
<Route path="/tools/:id/edit" component={ToolEdit} />
|
||||||
<Route path="/tools/:id" component={ToolDetail} />
|
<Route path="/tools/:id" component={ToolDetail} />
|
||||||
<Route path="/compare" component={Compare} />
|
<Route path="/compare" component={Compare} />
|
||||||
|
<Route path="/watchlist" component={Watchlist} />
|
||||||
<Route path="/analytics" component={Analytics} />
|
<Route path="/analytics" component={Analytics} />
|
||||||
<Route path="/admin" component={Admin} />
|
<Route path="/admin" component={Admin} />
|
||||||
<Route path="/admin/redundancy" component={Redundancy} />
|
<Route path="/admin/redundancy" component={Redundancy} />
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Link, useLocation } from "wouter";
|
import { Link, useLocation } from "wouter";
|
||||||
import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, User, ShieldCheck, AlertTriangle, Trash2 } from "lucide-react";
|
import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, User, ShieldCheck, AlertTriangle, Trash2, Bookmark } from "lucide-react";
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
import { useGetVersion, getGetVersionQueryKey } from "@workspace/api-client-react";
|
import { useGetVersion, getGetVersionQueryKey } from "@workspace/api-client-react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
@@ -19,6 +19,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
|
|||||||
{ href: "/tools", label: "Browse Tools", icon: Wrench },
|
{ href: "/tools", label: "Browse Tools", icon: Wrench },
|
||||||
{ href: "/tools/new", label: "Add Tool", icon: PlusCircle },
|
{ href: "/tools/new", label: "Add Tool", icon: PlusCircle },
|
||||||
{ href: "/analytics", label: "Analytics", icon: BarChart3 },
|
{ href: "/analytics", label: "Analytics", icon: BarChart3 },
|
||||||
|
...(hasFeature("watchlist") ? [{ href: "/watchlist", label: "Watchlist", icon: Bookmark }] : []),
|
||||||
...(hasFeature("trash") ? [{ href: "/trash", label: "Trash", icon: Trash2 }] : []),
|
...(hasFeature("trash") ? [{ href: "/trash", label: "Trash", icon: Trash2 }] : []),
|
||||||
...(isAdmin ? [{ href: "/admin", label: "Admin", icon: ShieldCheck }] : []),
|
...(isAdmin ? [{ href: "/admin", label: "Admin", icon: ShieldCheck }] : []),
|
||||||
...(isAdmin ? [{ href: "/admin/redundancy", label: "Redundancy", icon: AlertTriangle }] : []),
|
...(isAdmin ? [{ href: "/admin/redundancy", label: "Redundancy", icon: AlertTriangle }] : []),
|
||||||
@@ -28,6 +29,14 @@ export function Layout({ children }: { children: React.ReactNode }) {
|
|||||||
(link) => location === link.href || (link.href !== "/" && location.startsWith(link.href)),
|
(link) => location === link.href || (link.href !== "/" && location.startsWith(link.href)),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const mobileLinks = [
|
||||||
|
{ href: "/", label: "Home", icon: LayoutDashboard },
|
||||||
|
{ href: "/tools", label: "Tools", icon: Wrench },
|
||||||
|
...(hasFeature("watchlist") ? [{ href: "/watchlist", label: "Watchlist", icon: Bookmark }] : []),
|
||||||
|
...(hasFeature("trash") ? [{ href: "/trash", label: "Trash", icon: Trash2 }] : []),
|
||||||
|
{ href: "/analytics", label: "Analytics", icon: BarChart3 },
|
||||||
|
].slice(0, 5);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen bg-background text-foreground">
|
<div className="flex min-h-screen bg-background text-foreground">
|
||||||
<CommandPalette />
|
<CommandPalette />
|
||||||
@@ -149,10 +158,29 @@ export function Layout({ children }: { children: React.ReactNode }) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div className="flex-1 p-6 md:p-8 overflow-auto">
|
<div className="flex-1 p-6 md:p-8 overflow-auto pb-24 md:pb-8">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<nav className="md:hidden fixed bottom-0 inset-x-0 z-40 border-t bg-card/95 backdrop-blur flex">
|
||||||
|
{mobileLinks.map((link) => {
|
||||||
|
const isActive = location === link.href || (link.href !== "/" && location.startsWith(link.href));
|
||||||
|
const Icon = link.icon;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={link.href}
|
||||||
|
href={link.href}
|
||||||
|
className={`flex-1 flex flex-col items-center gap-0.5 py-2.5 text-[10px] font-medium transition-colors ${
|
||||||
|
isActive ? "text-primary" : "text-muted-foreground hover:text-foreground"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
{link.label}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { ToolWithStats } from "@workspace/api-client-react";
|
import { ToolWithStats } from "@workspace/api-client-react";
|
||||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Star, MessageSquare, Wrench, Scale } from "lucide-react";
|
import { Star, MessageSquare, Wrench, Scale, Bookmark } from "lucide-react";
|
||||||
import { Link } from "wouter";
|
import { Link } from "wouter";
|
||||||
import { MiniBars } from "@/components/mini-bars";
|
import { MiniBars } from "@/components/mini-bars";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
@@ -9,9 +9,11 @@ import { cn } from "@/lib/utils";
|
|||||||
export function ToolCard({
|
export function ToolCard({
|
||||||
tool,
|
tool,
|
||||||
compare,
|
compare,
|
||||||
|
watchlist,
|
||||||
}: {
|
}: {
|
||||||
tool: ToolWithStats;
|
tool: ToolWithStats;
|
||||||
compare?: { selected: boolean; onToggle: () => void };
|
compare?: { selected: boolean; onToggle: () => void };
|
||||||
|
watchlist?: { watched: boolean; onToggle: () => void };
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<Card className="hover-elevate transition-all flex flex-col h-full cursor-pointer hover:border-primary/50">
|
<Card className="hover-elevate transition-all flex flex-col h-full cursor-pointer hover:border-primary/50">
|
||||||
@@ -70,8 +72,27 @@ export function ToolCard({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={cn("items-center gap-3", compare ? "flex" : "")}>
|
<div className={cn("items-center gap-3", (compare || watchlist) ? "flex" : "")}>
|
||||||
<MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} className={compare ? "flex-1" : undefined} />
|
<MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} className={(compare || watchlist) ? "flex-1" : undefined} />
|
||||||
|
{watchlist && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
watchlist.onToggle();
|
||||||
|
}}
|
||||||
|
title={watchlist.watched ? "Remove from watchlist" : "Add to watchlist"}
|
||||||
|
className={cn(
|
||||||
|
"shrink-0 w-8 h-8 rounded-md border flex items-center justify-center transition-colors",
|
||||||
|
watchlist.watched
|
||||||
|
? "bg-primary text-primary-foreground border-primary"
|
||||||
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Bookmark className={cn("w-4 h-4", watchlist.watched && "fill-current")} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
{compare && (
|
{compare && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import {
|
||||||
|
useGetMePreferences,
|
||||||
|
useUpdateMePreferences,
|
||||||
|
getGetMePreferencesQueryKey,
|
||||||
|
getGetMeWatchlistQueryKey,
|
||||||
|
} from "@workspace/api-client-react";
|
||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
|
|
||||||
|
export function useWatchlist() {
|
||||||
|
const { isAuthenticated, hasFeature } = useAuth();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const canWatchlist = isAuthenticated && hasFeature("watchlist");
|
||||||
|
|
||||||
|
const { data: prefs, isLoading } = useGetMePreferences({
|
||||||
|
query: { queryKey: getGetMePreferencesQueryKey(), enabled: canWatchlist, retry: false },
|
||||||
|
});
|
||||||
|
|
||||||
|
const update = useUpdateMePreferences();
|
||||||
|
|
||||||
|
const watchlist = prefs?.watchlist ?? [];
|
||||||
|
|
||||||
|
function invalidate() {
|
||||||
|
queryClient.invalidateQueries({ queryKey: getGetMePreferencesQueryKey() });
|
||||||
|
queryClient.invalidateQueries({ queryKey: getGetMeWatchlistQueryKey() });
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggle(id: number) {
|
||||||
|
const next = watchlist.includes(id) ? watchlist.filter((x) => x !== id) : [...watchlist, id];
|
||||||
|
update.mutate(
|
||||||
|
{ data: { watchlist: next } },
|
||||||
|
{
|
||||||
|
onSuccess: () => invalidate(),
|
||||||
|
onError: () => invalidate(),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const isWatched = (id: number) => watchlist.includes(id);
|
||||||
|
|
||||||
|
return {
|
||||||
|
watchlist,
|
||||||
|
toggle,
|
||||||
|
isWatched,
|
||||||
|
canWatchlist,
|
||||||
|
isLoading: canWatchlist && isLoading,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -41,9 +41,11 @@ import {
|
|||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
import { useToast } from "@/hooks/use-toast";
|
import { useToast } from "@/hooks/use-toast";
|
||||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line, Legend } from "recharts";
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line, Legend } from "recharts";
|
||||||
import { ExternalLink, Star, ArrowLeft, Plus, Pencil, Trash2, Link as LinkIcon, DollarSign, Euro } from "lucide-react";
|
import { ExternalLink, Star, ArrowLeft, Plus, Pencil, Trash2, Link as LinkIcon, DollarSign, Euro, Bookmark } from "lucide-react";
|
||||||
import { Link } from "wouter";
|
import { Link } from "wouter";
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
|
import { useWatchlist } from "@/hooks/use-watchlist";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
import { useDeleteTool, getListToolsQueryKey } from "@workspace/api-client-react";
|
import { useDeleteTool, getListToolsQueryKey } from "@workspace/api-client-react";
|
||||||
import {
|
import {
|
||||||
AlertDialog,
|
AlertDialog,
|
||||||
@@ -77,6 +79,7 @@ export default function ToolDetail() {
|
|||||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||||
|
|
||||||
const { user, isAdmin, hasFeature } = useAuth();
|
const { user, isAdmin, hasFeature } = useAuth();
|
||||||
|
const { isWatched, toggle: toggleWatchlist, canWatchlist } = useWatchlist();
|
||||||
const canManageCosts = hasFeature("costs");
|
const canManageCosts = hasFeature("costs");
|
||||||
const hasTrash = hasFeature("trash");
|
const hasTrash = hasFeature("trash");
|
||||||
const deleteTool = useDeleteTool();
|
const deleteTool = useDeleteTool();
|
||||||
@@ -355,6 +358,17 @@ export default function ToolDetail() {
|
|||||||
Based on {tool.ratingCount} reviews
|
Based on {tool.ratingCount} reviews
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{canWatchlist && (
|
||||||
|
<Button
|
||||||
|
variant={isWatched(id) ? "default" : "outline"}
|
||||||
|
className="w-full gap-2"
|
||||||
|
onClick={() => toggleWatchlist(Number(id))}
|
||||||
|
>
|
||||||
|
<Bookmark className={cn("w-4 h-4", isWatched(id) && "fill-current")} />
|
||||||
|
{isWatched(id) ? "Saved to watchlist" : "Save to watchlist"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
{tool.websiteUrl && (
|
{tool.websiteUrl && (
|
||||||
<Button asChild className="w-full mt-2" variant="outline">
|
<Button asChild className="w-full mt-2" variant="outline">
|
||||||
<a href={tool.websiteUrl} target="_blank" rel="noopener noreferrer">
|
<a href={tool.websiteUrl} target="_blank" rel="noopener noreferrer">
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ import { FilterPopover } from "@/components/filter-popover";
|
|||||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||||
import { useBrowsePreferences, isViewMode, isDensity } from "@/hooks/use-browse-preferences";
|
import { useBrowsePreferences, isViewMode, isDensity } from "@/hooks/use-browse-preferences";
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
|
import { useWatchlist } from "@/hooks/use-watchlist";
|
||||||
import { CompareBar } from "@/components/compare-bar";
|
import { CompareBar } from "@/components/compare-bar";
|
||||||
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,7 @@ export default function ToolsBrowse() {
|
|||||||
|
|
||||||
const { serverView, serverDensity, localView, localDensity, persist } = useBrowsePreferences();
|
const { serverView, serverDensity, localView, localDensity, persist } = useBrowsePreferences();
|
||||||
const { hasFeature } = useAuth();
|
const { hasFeature } = useAuth();
|
||||||
|
const { isWatched, toggle: toggleWatchlist, canWatchlist } = useWatchlist();
|
||||||
|
|
||||||
const [compareIds, setCompareIds] = useState<number[]>([]);
|
const [compareIds, setCompareIds] = useState<number[]>([]);
|
||||||
const [compareUpsellOpen, setCompareUpsellOpen] = useState(false);
|
const [compareUpsellOpen, setCompareUpsellOpen] = useState(false);
|
||||||
@@ -402,6 +404,7 @@ export default function ToolsBrowse() {
|
|||||||
key={tool.id}
|
key={tool.id}
|
||||||
tool={tool}
|
tool={tool}
|
||||||
compare={{ selected: compareIds.includes(tool.id), onToggle: () => toggleCompare(tool.id) }}
|
compare={{ selected: compareIds.includes(tool.id), onToggle: () => toggleCompare(tool.id) }}
|
||||||
|
watchlist={canWatchlist ? { watched: isWatched(tool.id), onToggle: () => toggleWatchlist(tool.id) } : undefined}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,76 @@
|
|||||||
|
import {
|
||||||
|
useGetMeWatchlist,
|
||||||
|
getGetMeWatchlistQueryKey,
|
||||||
|
} from "@workspace/api-client-react";
|
||||||
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
|
import { useWatchlist } from "@/hooks/use-watchlist";
|
||||||
|
import { Layout } from "@/components/layout";
|
||||||
|
import { ToolCard } from "@/components/tool-card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
import { ShieldAlert, Bookmark } from "lucide-react";
|
||||||
|
|
||||||
|
export default function Watchlist() {
|
||||||
|
const { hasFeature, isLoading: authLoading } = useAuth();
|
||||||
|
const { toggle } = useWatchlist();
|
||||||
|
const canWatchlist = hasFeature("watchlist");
|
||||||
|
|
||||||
|
const { data: tools, isLoading: loading } = useGetMeWatchlist({
|
||||||
|
query: { queryKey: getGetMeWatchlistQueryKey(), enabled: canWatchlist },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!authLoading && !canWatchlist) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||||
|
<ShieldAlert className="w-12 h-12 text-muted-foreground" />
|
||||||
|
<h2 className="text-2xl font-bold">Watchlist requires a higher tier</h2>
|
||||||
|
<p className="text-muted-foreground">Saving tools to your watchlist is available to Premium and Enterprise users.</p>
|
||||||
|
<Button variant="outline" asChild>
|
||||||
|
<a href="/tools">Back to tools</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const list = tools ?? [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="space-y-6 pb-10">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight mb-2">Watchlist</h1>
|
||||||
|
<p className="text-muted-foreground">Tools you saved for later, with live scores.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||||
|
{[1, 2, 3, 4].map((i) => <Skeleton key={i} className="h-[200px] w-full rounded-xl" />)}
|
||||||
|
</div>
|
||||||
|
) : list.length === 0 ? (
|
||||||
|
<div className="bg-muted/30 border border-dashed rounded-xl py-24 flex flex-col items-center justify-center text-center gap-3">
|
||||||
|
<Bookmark className="w-8 h-8 text-muted-foreground" />
|
||||||
|
<h3 className="text-xl font-medium">Your watchlist is empty</h3>
|
||||||
|
<p className="text-muted-foreground max-w-md mx-auto">
|
||||||
|
Browse tools and click the bookmark to save them here.
|
||||||
|
</p>
|
||||||
|
<Button variant="outline" asChild>
|
||||||
|
<a href="/tools">Browse tools</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||||
|
{list.map((tool) => (
|
||||||
|
<ToolCard
|
||||||
|
key={tool.id}
|
||||||
|
tool={tool}
|
||||||
|
watchlist={{ watched: true, onToggle: () => toggle(tool.id) }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -335,6 +335,7 @@ export const UserPreferencesDensity = {
|
|||||||
export interface UserPreferences {
|
export interface UserPreferences {
|
||||||
view?: UserPreferencesView;
|
view?: UserPreferencesView;
|
||||||
density?: UserPreferencesDensity;
|
density?: UserPreferencesDensity;
|
||||||
|
watchlist?: number[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ErrorResponse {
|
export interface ErrorResponse {
|
||||||
|
|||||||
@@ -2199,6 +2199,83 @@ export const useUpdateMePreferences = <TError = ErrorType<ErrorResponse>,
|
|||||||
return useMutation(getUpdateMePreferencesMutationOptions(options));
|
return useMutation(getUpdateMePreferencesMutationOptions(options));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const getGetMeWatchlistUrl = () => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return `/api/auth/me/watchlist`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @summary Get current user's watchlist tools (premium)
|
||||||
|
*/
|
||||||
|
export const getMeWatchlist = async ( options?: RequestInit): Promise<ToolWithStats[]> => {
|
||||||
|
|
||||||
|
return customFetch<ToolWithStats[]>(getGetMeWatchlistUrl(),
|
||||||
|
{
|
||||||
|
...options,
|
||||||
|
method: 'GET'
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
);}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const getGetMeWatchlistQueryKey = () => {
|
||||||
|
return [
|
||||||
|
`/api/auth/me/watchlist`
|
||||||
|
] as const;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const getGetMeWatchlistQueryOptions = <TData = Awaited<ReturnType<typeof getMeWatchlist>>, TError = ErrorType<ErrorResponse>>( options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof getMeWatchlist>>, TError, TData>, request?: SecondParameter<typeof customFetch>}
|
||||||
|
) => {
|
||||||
|
|
||||||
|
const {query: queryOptions, request: requestOptions} = options ?? {};
|
||||||
|
|
||||||
|
const queryKey = queryOptions?.queryKey ?? getGetMeWatchlistQueryKey();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const queryFn: QueryFunction<Awaited<ReturnType<typeof getMeWatchlist>>> = ({ signal }) => getMeWatchlist({ signal, ...requestOptions });
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return { queryKey, queryFn, ...queryOptions} as UseQueryOptions<Awaited<ReturnType<typeof getMeWatchlist>>, TError, TData> & { queryKey: QueryKey }
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GetMeWatchlistQueryResult = NonNullable<Awaited<ReturnType<typeof getMeWatchlist>>>
|
||||||
|
export type GetMeWatchlistQueryError = ErrorType<ErrorResponse>
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @summary Get current user's watchlist tools (premium)
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function useGetMeWatchlist<TData = Awaited<ReturnType<typeof getMeWatchlist>>, TError = ErrorType<ErrorResponse>>(
|
||||||
|
options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof getMeWatchlist>>, TError, TData>, request?: SecondParameter<typeof customFetch>}
|
||||||
|
|
||||||
|
): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
|
||||||
|
|
||||||
|
const queryOptions = getGetMeWatchlistQueryOptions(options)
|
||||||
|
|
||||||
|
const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & { queryKey: QueryKey };
|
||||||
|
|
||||||
|
return { ...query, queryKey: queryOptions.queryKey };
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const getListUsersUrl = () => {
|
export const getListUsersUrl = () => {
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -656,6 +656,33 @@ paths:
|
|||||||
schema:
|
schema:
|
||||||
$ref: "#/components/schemas/ErrorResponse"
|
$ref: "#/components/schemas/ErrorResponse"
|
||||||
|
|
||||||
|
/auth/me/watchlist:
|
||||||
|
get:
|
||||||
|
operationId: getMeWatchlist
|
||||||
|
tags: [auth]
|
||||||
|
summary: Get current user's watchlist tools (premium)
|
||||||
|
responses:
|
||||||
|
"200":
|
||||||
|
description: Watchlist tools in saved order
|
||||||
|
content:
|
||||||
|
application/json:
|
||||||
|
schema:
|
||||||
|
type: array
|
||||||
|
items:
|
||||||
|
$ref: "#/components/schemas/ToolWithStats"
|
||||||
|
"401":
|
||||||
|
description: Not authenticated
|
||||||
|
content:
|
||||||
|
application/json:
|
||||||
|
schema:
|
||||||
|
$ref: "#/components/schemas/ErrorResponse"
|
||||||
|
"403":
|
||||||
|
description: Premium feature required
|
||||||
|
content:
|
||||||
|
application/json:
|
||||||
|
schema:
|
||||||
|
$ref: "#/components/schemas/ErrorResponse"
|
||||||
|
|
||||||
/users:
|
/users:
|
||||||
get:
|
get:
|
||||||
operationId: listUsers
|
operationId: listUsers
|
||||||
@@ -1193,6 +1220,10 @@ components:
|
|||||||
density:
|
density:
|
||||||
type: string
|
type: string
|
||||||
enum: [cozy, compact]
|
enum: [cozy, compact]
|
||||||
|
watchlist:
|
||||||
|
type: array
|
||||||
|
items:
|
||||||
|
type: integer
|
||||||
|
|
||||||
ErrorResponse:
|
ErrorResponse:
|
||||||
type: object
|
type: object
|
||||||
|
|||||||
@@ -485,7 +485,8 @@ export const GetMeResponse = zod.object({
|
|||||||
*/
|
*/
|
||||||
export const GetMePreferencesResponse = zod.object({
|
export const GetMePreferencesResponse = zod.object({
|
||||||
"view": zod.enum(['grid', 'table', 'rows']).optional(),
|
"view": zod.enum(['grid', 'table', 'rows']).optional(),
|
||||||
"density": zod.enum(['cozy', 'compact']).optional()
|
"density": zod.enum(['cozy', 'compact']).optional(),
|
||||||
|
"watchlist": zod.array(zod.number()).optional()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
@@ -494,15 +495,40 @@ export const GetMePreferencesResponse = zod.object({
|
|||||||
*/
|
*/
|
||||||
export const UpdateMePreferencesBody = zod.object({
|
export const UpdateMePreferencesBody = zod.object({
|
||||||
"view": zod.enum(['grid', 'table', 'rows']).optional(),
|
"view": zod.enum(['grid', 'table', 'rows']).optional(),
|
||||||
"density": zod.enum(['cozy', 'compact']).optional()
|
"density": zod.enum(['cozy', 'compact']).optional(),
|
||||||
|
"watchlist": zod.array(zod.number()).optional()
|
||||||
})
|
})
|
||||||
|
|
||||||
export const UpdateMePreferencesResponse = zod.object({
|
export const UpdateMePreferencesResponse = zod.object({
|
||||||
"view": zod.enum(['grid', 'table', 'rows']).optional(),
|
"view": zod.enum(['grid', 'table', 'rows']).optional(),
|
||||||
"density": zod.enum(['cozy', 'compact']).optional()
|
"density": zod.enum(['cozy', 'compact']).optional(),
|
||||||
|
"watchlist": zod.array(zod.number()).optional()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @summary Get current user's watchlist tools (premium)
|
||||||
|
*/
|
||||||
|
export const GetMeWatchlistResponseItem = zod.object({
|
||||||
|
"id": zod.number(),
|
||||||
|
"name": zod.string(),
|
||||||
|
"description": zod.string(),
|
||||||
|
"category": zod.string(),
|
||||||
|
"websiteUrl": zod.string().nullish(),
|
||||||
|
"iconUrl": zod.string().nullish(),
|
||||||
|
"createdBy": zod.string().nullish(),
|
||||||
|
"features": zod.array(zod.string()).optional(),
|
||||||
|
"tags": zod.array(zod.string()).optional(),
|
||||||
|
"createdAt": zod.coerce.date(),
|
||||||
|
"updatedAt": zod.coerce.date(),
|
||||||
|
"ratingCount": zod.number(),
|
||||||
|
"avgUsefulness": zod.number().nullable(),
|
||||||
|
"avgUsability": zod.number().nullable(),
|
||||||
|
"avgCombined": zod.number().nullable()
|
||||||
|
})
|
||||||
|
export const GetMeWatchlistResponse = zod.array(GetMeWatchlistResponseItem)
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @summary List all local users (admin only)
|
* @summary List all local users (admin only)
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -11,4 +11,5 @@ import type { UserPreferencesView } from './userPreferencesView';
|
|||||||
export interface UserPreferences {
|
export interface UserPreferences {
|
||||||
view?: UserPreferencesView;
|
view?: UserPreferencesView;
|
||||||
density?: UserPreferencesDensity;
|
density?: UserPreferencesDensity;
|
||||||
|
watchlist?: number[];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { z } from "zod/v4";
|
|||||||
export type UserPreferences = {
|
export type UserPreferences = {
|
||||||
view?: "grid" | "table" | "rows";
|
view?: "grid" | "table" | "rows";
|
||||||
density?: "cozy" | "compact";
|
density?: "cozy" | "compact";
|
||||||
|
watchlist?: number[];
|
||||||
};
|
};
|
||||||
|
|
||||||
export const usersTable = pgTable("users", {
|
export const usersTable = pgTable("users", {
|
||||||
|
|||||||
Reference in New Issue
Block a user