Function ThreadsRoute

examples/ts-react-chat/src/routes/threads.tsx:233–341

()

// ---------------------------------------------------------------------------

function ThreadsRoute() {
  const { threads, loaded, createThread, deleteThread, touchThread } =
    useThreadIndex()
  const [activeId, setActiveId] = useState<string | null>(null)

  // Ensure there's always an active thread: keep the current one if it still
  // exists, otherwise fall back to the most recent, otherwise create one.
  useEffect(() => {
    if (!loaded) return
    if (activeId && threads.some((t) => t.id === activeId)) return
    if (threads.length > 0) {
      setActiveId(threads[0].id)
      return
    }
    setActiveId(createThread().id)
    // `threads`/`createThread` are derived from the same state; depending on
    // `activeId` + `loaded` is enough to re-run when the active thread vanishes.
  }, [loaded, activeId, threads.length])

  const handleNewChat = () => {
    // Don't pile up empty chats — if an untouched "New chat" exists, focus it.
    const empty = threads.find((t) => t.title === NEW_CHAT_TITLE)
    setActiveId(empty ? empty.id : createThread().id)
  }

  const handleDelete = (id: string) => {
    deleteThread(id)
    if (id === activeId) {
      const next = threads.find((t) => t.id !== id)
      // If nothing remains the bootstrap effect creates a fresh thread.
      setActiveId(next ? next.id : null)
    }
  }

  return (
    <div className="flex h-[calc(100vh-72px)] bg-gray-900 text-white">
      <aside className="flex w-72 flex-col border-r border-gray-800 bg-gray-950">
        <div className="p-3">
          <button
            type="button"
            onClick={handleNewChat}
            className="flex w-full items-center justify-center gap-2 rounded-lg border border-orange-500/30 bg-orange-500/10 px-3 py-2 text-sm font-medium text-orange-300 transition-colors hover:bg-orange-500/20"
          >
            <Plus size={16} />
            New chat
          </button>
        </div>
        <nav className="flex-1 overflow-y-auto px-2 pb-3">
          {threads.length === 0 && (
            <p className="px-3 py-4 text-sm text-gray-500">No chats yet.</p>
          )}
          {threads.map((thread) => {
            const isActive = thread.id === activeId
            return (
              <div
                key={thread.id}
                className={`group mb-1 flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors ${
                  isActive