compassmock/src/components/nav-files.tsx
Nicholai a09024aff7 feat(ui): dashboard github stats, sidebar UX, polish
- Add live GitHub stats and commits to dashboard with
  sticky two-column layout and GitHub card link
- Auto-expand sidebar when navigating to files/projects
  while collapsed
- Add GitHub link to landing page
- Restyle storage indicator with sidebar tokens
- Fix nav-user readability with sidebar-foreground tokens
- Update favicon to colored compass logo
2026-01-24 13:32:50 -07:00

92 lines
2.7 KiB
TypeScript
Executable File

"use client"
import {
IconArrowLeft,
IconFiles,
IconUsers,
IconClock,
IconStar,
IconTrash,
} from "@tabler/icons-react"
import Link from "next/link"
import { usePathname, useSearchParams } from "next/navigation"
import { mockStorageUsage } from "@/lib/files-data"
import { StorageIndicator } from "@/components/files/storage-indicator"
import {
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar"
import { cn } from "@/lib/utils"
type FileView = "my-files" | "shared" | "recent" | "starred" | "trash"
const fileNavItems: { title: string; view: FileView; icon: typeof IconFiles }[] = [
{ title: "My Files", view: "my-files", icon: IconFiles },
{ title: "Shared with me", view: "shared", icon: IconUsers },
{ title: "Recent", view: "recent", icon: IconClock },
{ title: "Starred", view: "starred", icon: IconStar },
{ title: "Trash", view: "trash", icon: IconTrash },
]
export function NavFiles() {
const pathname = usePathname()
const searchParams = useSearchParams()
const activeView = searchParams.get("view") ?? "my-files"
return (
<>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton asChild tooltip="Back to Dashboard">
<Link href="/dashboard">
<IconArrowLeft />
<span>Back</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
{fileNavItems.map((item) => (
<SidebarMenuItem key={item.view}>
<SidebarMenuButton
asChild
tooltip={item.title}
className={cn(
activeView === item.view &&
pathname?.startsWith("/dashboard/files") &&
"bg-sidebar-foreground/10 font-medium"
)}
>
<Link
href={
item.view === "my-files"
? "/dashboard/files"
: `/dashboard/files?view=${item.view}`
}
>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<div className="mt-auto px-3 pb-3">
<StorageIndicator usage={mockStorageUsage} />
</div>
</>
)
}