Session list

"use client"

import * as React from "react"
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 initial: Session[] = [
  { id: "s1", title: "Add a region column to orders", updatedAt: minutesAgo(2), status: "running", detail: "Writing the migration" },
  { id: "s2", title: "Why is checkout slow on Staging?", updatedAt: minutesAgo(30), status: "waiting", detail: "Asked you about the cache" },
  { id: "s3", title: "Clean up stale feature flags", updatedAt: minutesAgo(60 * 5), unread: true },
  { id: "s4", title: "Release checklist", updatedAt: minutesAgo(60 * 24 * 3), pinned: true },
  { id: "s5", title: "Index orders.customer_id", updatedAt: minutesAgo(60 * 26) },
  { id: "s6", title: "Rename the billing repository", updatedAt: minutesAgo(60 * 24 * 4) },
]

// With an href each row is a real link: it opens in a new tab and its address can be copied. A plain click still goes
// through onOpen, for your router.
const linked = initial.map((s) => ({ ...s, href: `#thread-${s.id}` }))

export default function Example() {
  const [sessions, setSessions] = React.useState(linked)
  const [active, setActive] = React.useState("s1")
  const [byState, setByState] = React.useState(false)
  return (
    <div className="flex h-[26rem] w-72 flex-col overflow-hidden rounded-lg border bg-sidebar py-2">
      <label className="mx-3 mb-2 flex items-center gap-1.5 text-xs text-muted-foreground">
        <input type="checkbox" checked={byState} onChange={(e) => setByState(e.target.checked)} />
        Group by state
      </label>
      <SessionList
        className="min-h-0 flex-1"
        sessions={sessions}
        // Your own groups, in your order, with each status printed in words.
        groupBy={byState ? (s) => (s.status === "waiting" ? "Needs you" : s.status === "running" ? "Working" : "Everything else") : undefined}
        groupOrder={["Needs you", "Working"]}
        showStatus={byState}
        activeId={active}
        onOpen={setActive}
        onRename={(id, title) => setSessions((l) => l.map((s) => (s.id === id ? { ...s, title } : s)))}
        onPin={(id, pinned) => setSessions((l) => l.map((s) => (s.id === id ? { ...s, pinned } : s)))}
        onDelete={(id) => setSessions((l) => l.filter((s) => s.id !== id))}
      />
    </div>
  )
}