| 48 | ]; |
| 49 | |
| 50 | export function Sidebar() { |
| 51 | const pathname = usePathname(); |
| 52 | const { connected } = useApp(); |
| 53 | const [showDisconnectDialog, setShowDisconnectDialog] = useState(false); |
| 54 | |
| 55 | const handleLaunchBackend = () => { |
| 56 | window.location.href = PROTOCOL_URL; |
| 57 | }; |
| 58 | |
| 59 | const handleDisconnect = async () => { |
| 60 | await shutdownBackend(); |
| 61 | setShowDisconnectDialog(false); |
| 62 | }; |
| 63 | |
| 64 | return ( |
| 65 | <TooltipProvider> |
| 66 | <div className="w-64 bg-background flex flex-col h-screen" style={{ borderRight: '1px solid var(--oc-border-weak)' }}> |
| 67 | <div className="p-6 flex items-center gap-3" style={{ borderBottom: '1px solid var(--oc-border-weak)' }}> |
| 68 | <Logo className="w-6 h-6" /> |
| 69 | <img src="/OpencodeStudioText.png" alt="OpenCode Studio" className="h-6 w-auto" /> |
| 70 | </div> |
| 71 | |
| 72 | <nav className="flex-1 py-4 space-y-0.5"> |
| 73 | {navItems.map((item) => { |
| 74 | const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`); |
| 75 | return ( |
| 76 | <Tooltip key={item.href}> |
| 77 | <TooltipTrigger asChild> |
| 78 | <Button |
| 79 | variant="ghost" |
| 80 | className={cn( |
| 81 | "w-full justify-start gap-3 rounded-none px-6 h-9", |
| 82 | isActive |
| 83 | ? "font-medium" |
| 84 | : "font-normal" |
| 85 | )} |
| 86 | style={isActive ? { |
| 87 | borderLeft: '2px solid var(--oc-background-strong)', |
| 88 | background: 'var(--oc-background-weak)', |
| 89 | color: 'var(--oc-text-strong)', |
| 90 | } : { |
| 91 | borderLeft: '2px solid transparent', |
| 92 | color: 'var(--oc-text)', |
| 93 | }} |
| 94 | asChild |
| 95 | > |
| 96 | <Link href={item.href}> |
| 97 | <item.icon className="h-4 w-4" style={{ color: isActive ? 'var(--oc-text-strong)' : 'var(--oc-icon)' }} /> |
| 98 | <span className="text-sm">{item.label}</span> |
| 99 | </Link> |
| 100 | </Button> |
| 101 | </TooltipTrigger> |
| 102 | <TooltipContent side="right"> |
| 103 | <p>{item.label}</p> |
| 104 | </TooltipContent> |
| 105 | </Tooltip> |
| 106 | ); |
| 107 | })} |