fix(nav): trim sidebar items, fix collapsed sidebar overflow, add add-tool buttons on home/browse
Build & Push Docker Image / build (push) Successful in 2m18s

This commit is contained in:
opencode
2026-08-03 06:12:01 +02:00
parent 4648614556
commit 63f0bdbab6
4 changed files with 24 additions and 15 deletions
+1 -3
View File
@@ -1,5 +1,5 @@
import { Link, useLocation } from "wouter"; import { Link, useLocation } from "wouter";
import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, ShieldCheck, AlertTriangle, Trash2, Bookmark, Search } from "lucide-react"; import { LayoutDashboard, Wrench, BarChart3, LogIn, LogOut, ShieldCheck, AlertTriangle, Bookmark, Search } from "lucide-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
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";
@@ -38,10 +38,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
const mainLinks = [ const mainLinks = [
{ href: "/", label: t("nav.home"), icon: LayoutDashboard }, { href: "/", label: t("nav.home"), icon: LayoutDashboard },
{ href: "/tools", label: t("nav.browseTools"), icon: Wrench }, { href: "/tools", label: t("nav.browseTools"), icon: Wrench },
{ href: "/tools/new", label: t("nav.addTool"), icon: PlusCircle },
{ href: "/analytics", label: t("nav.analytics"), icon: BarChart3 }, { href: "/analytics", label: t("nav.analytics"), icon: BarChart3 },
...(hasFeature("watchlist") ? [{ href: "/watchlist", label: t("nav.watchlist"), icon: Bookmark }] : []), ...(hasFeature("watchlist") ? [{ href: "/watchlist", label: t("nav.watchlist"), icon: Bookmark }] : []),
...(hasFeature("trash") ? [{ href: "/trash", label: t("nav.trash"), icon: Trash2 }] : []),
]; ];
const adminLinks = [ const adminLinks = [
@@ -39,9 +39,9 @@ export function UserMenu() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex items-center gap-3 px-3 py-2"> <div className="flex items-center gap-3 px-3 py-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:gap-0">
<Skeleton className="h-8 w-8 rounded-full" /> <Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-4 w-24" /> <Skeleton className="h-4 w-24 group-data-[collapsible=icon]:hidden" />
</div> </div>
); );
} }
@@ -51,12 +51,12 @@ export function UserMenu() {
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="w-full gap-2" className="w-full gap-2 group-data-[collapsible=icon]:w-auto group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:justify-center"
onClick={() => login(location)} onClick={() => login(location)}
data-testid="button-login" data-testid="button-login"
> >
<LogIn className="w-4 h-4" /> <LogIn className="w-4 h-4" />
{t("auth.signIn")} <span className="group-data-[collapsible=icon]:hidden">{t("auth.signIn")}</span>
</Button> </Button>
); );
} }
@@ -72,7 +72,7 @@ export function UserMenu() {
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="w-full justify-start gap-3 px-3 py-2 h-auto" className="w-full justify-start gap-3 px-3 py-2 h-auto group-data-[collapsible=icon]:w-auto group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-1"
data-testid="button-user-menu" data-testid="button-user-menu"
> >
<Avatar className="h-8 w-8"> <Avatar className="h-8 w-8">
@@ -80,7 +80,7 @@ export function UserMenu() {
{initials(displayName)} {initials(displayName)}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="min-w-0 flex-1 text-left"> <span className="min-w-0 flex-1 text-left group-data-[collapsible=icon]:hidden">
<span className="block text-sm font-medium truncate">{displayName}</span> <span className="block text-sm font-medium truncate">{displayName}</span>
<span className="block text-[11px] text-muted-foreground truncate"> <span className="block text-[11px] text-muted-foreground truncate">
{user.email ?? tier} {user.email ?? tier}
+12 -4
View File
@@ -8,7 +8,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/com
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { Layout } from "@/components/layout"; import { Layout } from "@/components/layout";
import { ToolCard } from "@/components/tool-card"; import { ToolCard } from "@/components/tool-card";
import { Star, Wrench, MessageSquare, ArrowRight } from "lucide-react"; import { Star, Wrench, MessageSquare, ArrowRight, Plus } from "lucide-react";
import { Link } from "wouter"; import { Link } from "wouter";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -22,9 +22,17 @@ export default function Home() {
return ( return (
<Layout> <Layout>
<div className="space-y-8 pb-8"> <div className="space-y-8 pb-8">
<div> <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4">
<h1 className="text-3xl font-bold tracking-tight mb-2">{t("home.welcome")}</h1> <div>
<p className="text-muted-foreground">{t("home.tagline")}</p> <h1 className="text-3xl font-bold tracking-tight mb-2">{t("home.welcome")}</h1>
<p className="text-muted-foreground">{t("home.tagline")}</p>
</div>
<Button asChild>
<Link href="/tools/new">
<Plus className="w-4 h-4 mr-1" />
{t("browse.addTool")}
</Link>
</Button>
</div> </div>
{/* Stats Banner */} {/* Stats Banner */}
@@ -25,7 +25,7 @@ import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { Search, Wrench, X, ArrowUp, ArrowDown, ArrowUpDown, SlidersHorizontal } from "lucide-react"; import { Search, Wrench, X, ArrowUp, ArrowDown, ArrowUpDown, SlidersHorizontal, Plus } from "lucide-react";
import { Link, useLocation, useSearch } from "wouter"; import { Link, useLocation, useSearch } from "wouter";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -234,7 +234,10 @@ export default function ToolsBrowse() {
<p className="text-muted-foreground">{t("browse.subtitle")}</p> <p className="text-muted-foreground">{t("browse.subtitle")}</p>
</div> </div>
<Button asChild> <Button asChild>
<Link href="/tools/new">{t("browse.addTool")}</Link> <Link href="/tools/new">
<Plus className="w-4 h-4 mr-1" />
{t("browse.addTool")}
</Link>
</Button> </Button>
</div> </div>