Spaces:
Paused
Paused
| 'use client' | |
| import * as React from 'react' | |
| import Link from 'next/link' | |
| import { usePathname } from 'next/navigation' | |
| import { Bot, FileText, ArrowLeft, Code2, Key } from 'lucide-react' | |
| import { cn } from '@/lib/utils' | |
| import { useAuthStore } from '@/stores/auth' | |
| import { LucideIcon } from 'lucide-react' | |
| interface NavItem { | |
| href: string | |
| label: string | |
| icon: LucideIcon | |
| exact?: boolean | |
| } | |
| interface Section { | |
| label: string | |
| items: NavItem[] | |
| } | |
| const SECTIONS: Section[] = [ | |
| { | |
| label: 'Configuration', | |
| items: [ | |
| { href: '/developer', label: 'Models', icon: Bot, exact: true }, | |
| { href: '/developer/providers', label: 'Provider Keys', icon: Key }, | |
| ], | |
| }, | |
| { | |
| label: 'Prompts', | |
| items: [ | |
| { href: '/developer/prompts', label: 'System Prompts', icon: FileText }, | |
| ], | |
| }, | |
| ] | |
| export function DeveloperSidebar() { | |
| const pathname = usePathname() | |
| const { user } = useAuthStore() | |
| return ( | |
| <aside className="flex h-full w-64 shrink-0 flex-col border-r border-sidebar bg-sidebar text-sidebar-foreground"> | |
| {/* Header */} | |
| <div className="flex items-center gap-2 px-4 py-4"> | |
| <div className="grid h-8 w-8 place-items-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-500"> | |
| <Code2 className="h-4 w-4 text-white" /> | |
| </div> | |
| <div> | |
| <div className="text-sm font-semibold">Developer Panel</div> | |
| <div className="text-[10px] text-sidebar-foreground/50">Keys, Models & Prompts</div> | |
| </div> | |
| </div> | |
| {/* Navigation */} | |
| <nav className="flex-1 space-y-4 px-2 pt-1"> | |
| {SECTIONS.map((section, index) => ( | |
| <div key={section.label} className={cn(index > 0 && "pt-2")}> | |
| {index > 0 && ( | |
| <div className="mx-3 mb-3 h-[1px] bg-gradient-to-r from-transparent via-white/5 to-transparent" /> | |
| )} | |
| <div className="mb-1.5 px-3 text-[10px] font-semibold uppercase tracking-wider text-sidebar-foreground/45"> | |
| {section.label} | |
| </div> | |
| <div className="space-y-0.5"> | |
| {section.items.map((item) => { | |
| const active = item.exact | |
| ? pathname === item.href | |
| : pathname.startsWith(item.href) | |
| return ( | |
| <Link | |
| key={item.href} | |
| href={item.href} | |
| className={cn( | |
| 'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors', | |
| active | |
| ? 'bg-white/10 font-medium text-white' | |
| : 'text-sidebar-foreground/70 hover:bg-white/5 hover:text-white' | |
| )} | |
| > | |
| <item.icon className="h-4 w-4 shrink-0" /> | |
| {item.label} | |
| </Link> | |
| ) | |
| })} | |
| </div> | |
| </div> | |
| ))} | |
| </nav> | |
| {/* Footer */} | |
| <div className="border-t border-white/5 p-3"> | |
| <Link | |
| href="/c" | |
| className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-sidebar-foreground/70 transition-colors hover:bg-white/5 hover:text-white" | |
| > | |
| <ArrowLeft className="h-4 w-4" /> Back to Chat | |
| </Link> | |
| <div className="mt-2 flex items-center gap-2 px-3 py-1.5"> | |
| <div className="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand-500 to-violet-500 text-[10px] font-medium text-white"> | |
| {(user?.username || '?').slice(0, 1).toUpperCase()} | |
| </div> | |
| <div className="min-w-0 flex-1"> | |
| <div className="truncate text-xs text-white">{user?.username}</div> | |
| <div className="truncate text-[10px] text-sidebar-foreground/50">{user?.role}</div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| ) | |
| } | |