App sidebar

"use client"

import * as React from "react"
import { BookOpen, Inbox, MessagesSquare, Play, Settings, ShieldCheck } from "lucide-react"
import { AppSidebar, type NavItem } from "@/components/app-sidebar"
import { SessionList } from "@/components/session-list"
import type { Session } from "@/lib/team"

const minutesAgo = (m: number) => new Date(Date.now() - m * 60_000).toISOString()

const nav: NavItem[] = [
  { id: "threads", label: "Threads", Icon: MessagesSquare },
  { id: "inbox", label: "Inbox", Icon: Inbox, count: 2, urgent: true },
  { id: "approvals", label: "Approvals", Icon: ShieldCheck, count: 1, urgent: true },
  { id: "runs", label: "Runs", Icon: Play, count: 4 },
  { id: "docs", label: "Docs", Icon: BookOpen },
  { id: "settings", label: "Settings", Icon: Settings },
]

const sessions: Session[] = [
  { id: "s1", title: "Add a region column to orders", updatedAt: minutesAgo(2), status: "running" },
  { id: "s2", title: "Why is checkout slow on Staging?", updatedAt: minutesAgo(40) },
  { id: "s3", title: "Clean up stale feature flags", updatedAt: minutesAgo(60 * 26) },
]

export default function Example() {
  const [place, setPlace] = React.useState("threads")
  const [thread, setThread] = React.useState("s1")
  return (
    <div className="h-[560px] w-64 overflow-hidden rounded-lg border">
      <AppSidebar
        brand={<span className="px-1 text-sm font-semibold">Keel</span>}
        nav={nav}
        activeNav={place}
        onNavigate={setPlace}
        onNewThread={() => {}}
        user={{ name: "Sam", email: "sam@acme.example", role: "Owner · Acme" }}
        usage={{ label: "Agent hours this month", used: 0.62 }}
        onProfile={() => {}}
        onShortcuts={() => {}}
        onSignOut={() => {}}
      >
        <SessionList sessions={sessions} activeId={place === "threads" ? thread : undefined} onOpen={(id) => (setPlace("threads"), setThread(id))} />
      </AppSidebar>
    </div>
  )
}