import { useState } from 'react'
import { NavLink, Link, useMatch } from 'react-router-dom'
import { cn } from '../../lib/utils'
import { useAuth } from '../../contexts/AuthContext'
import { useRecentRepos } from '../../hooks/useRecentRepos'
import { useStarredRepos } from '../../hooks/useStarredRepos'
interface SidebarProps {
className?: string
}
export function Sidebar({ className }: SidebarProps) {
const { user, isAuthenticated } = useAuth()
const { repos: recentRepos } = useRecentRepos()
const { toggle, isStarred } = useStarredRepos()
const [openRecent, setOpenRecent] = useState(true)
// Detect if we're inside a repo
const repoMatch = useMatch('/repos/:owner/:repo/*')
const currentOwner = repoMatch?.params.owner
const currentRepo = repoMatch?.params.repo
return (
)
}
// ── Shared sub-components ────────────────────────────────────────────────────
function SidebarItem({ to, icon, label, end }: { to: string; icon: React.ReactNode; label: string; end?: boolean }) {
return (
cn(
'flex items-center gap-2.5 px-3 py-2 mx-1 rounded text-sm transition-colors min-h-[36px]',
isActive
? 'bg-white/12 text-white font-medium'
: 'text-white/65 hover:bg-white/8 hover:text-white',
)}
>
{icon}
{label}
)
}
function RecentRepoItem({ ownerName, name, isActive, isStarred, onStar }: {
ownerName: string; name: string; isActive: boolean; isStarred: boolean; onStar: () => void
}) {
return (
)
}
function RepoSubNav({ owner, repo }: { owner: string; repo: string }) {
const base = `/repos/${owner}/${repo}`
const items = [
{ label: 'Source', to: base, icon: , end: true },
{ label: 'Commits', to: `${base}/commits`, icon: },
{ label: 'Branches', to: `${base}/branches`, icon: },
{ label: 'Pull requests', to: `${base}/pulls`, icon: },
{ label: 'Issues', to: `${base}/issues`, icon: },
{ label: 'Pipelines', to: `${base}/pipelines`, icon: },
{ label: 'Settings', to: `${base}/settings`, icon: },
]
return (
{items.map(item => (
cn(
'flex items-center gap-2 px-3 py-1.5 mx-1 rounded text-xs transition-colors',
isActive
? 'bg-white/12 text-white'
: 'text-white/55 hover:bg-white/8 hover:text-white/90',
)}>
{item.icon}
{item.label}
))}
)
}
// ── Icons ────────────────────────────────────────────────────────────────────
const I = ({ d, filled }: { d: string | string[]; filled?: boolean }) => (
)
const HomeIcon = () =>
const PRIcon = () =>
const RepoIcon = () =>
const ExploreIcon = () =>
const StarIcon = () =>
const SourceIcon = () =>
const CommitsIcon = () =>
const BranchIcon = () =>
const IssueIcon = () =>
const PipelineIcon = () =>
const SettingsSmIcon = () =>