import { Link, useLocation } from "@tanstack/react-router";
import { Star, StarOff, Clock, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { useFavorites } from "@/shared/hooks/use-favorites";
import { useRecentPages } from "@/shared/hooks/use-recent-pages";
import { NAV_ITEMS } from "./nav-config";
/**
* FavoritesList — pinned pages rail. Renders inside the sidebar.
* Empty state guides the user to right-click a nav item to pin it.
*/
export function FavoritesList({ collapsed = false }: { collapsed?: boolean }) {
const { items, remove } = useFavorites();
const location = useLocation();
if (collapsed) return null;
if (items.length === 0) {
return (
Pin pages you visit often — right-click a nav item to add.
);
}
return (
{items.map((path) => {
const meta = NAV_ITEMS.find((n) => n.to === path);
const label = meta?.label ?? path.replace(/^\//, "");
const Icon = meta?.icon ?? Star;
const active = location.pathname === path;
return (
-
{label}
);
})}
);
}
/**
* RecentList — most-recently-visited pages rail. Auto-tracked by
* `useRecentPages`. Hidden when collapsed.
*/
export function RecentList({ collapsed = false }: { collapsed?: boolean }) {
const { items } = useRecentPages();
const location = useLocation();
if (collapsed || items.length === 0) return null;
return (
{items.slice(0, 5).map((path) => {
const meta = NAV_ITEMS.find((n) => n.to === path);
const label = meta?.label ?? path.replace(/^\//, "");
const Icon = meta?.icon ?? Clock;
const active = location.pathname === path;
return (
-
{label}
);
})}
);
}
/**
* FavoriteToggleButton — inline pin/unpin action.
*/
export function FavoriteToggleButton({ path, label }: { path: string; label?: string }) {
const { isFavorite, toggle } = useFavorites();
const pinned = isFavorite(path);
return (
);
}