ThothII/frontend/src/shell/NavSessions.tsx

// frontend/src/shell/NavSessions.tsx
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { listSessions } from "../api/sessions";
import { resumeSession } from "../api/sessions";
import type { SessionSummary } from "../api/types";

interface Props {
  activeSessionId: string | null;
  onSessionSelect: (id: string) => void;
}

export function NavSessions({ activeSessionId, onSessionSelect }: Props) {
  const queryClient = useQueryClient();
  const { data: sessions = [] } = useQuery<SessionSummary[]>({
    queryKey: ["sessions"],
    queryFn: listSessions,
    refetchInterval: 10_000,
  });

  async function handleClick(id: string) {
    await resumeSession(id);
    queryClient.invalidateQueries({ queryKey: ["sessions"] });
    onSessionSelect(id);
  }

  if (sessions.length === 0) {
    return (
      <p className="px-1 py-6 text-center text-xs text-muted-foreground">
        No sessions yet. Start with <span className="font-medium text-foreground">New question</span>.
      </p>
    );
  }

  return (
    <ul className="flex flex-col gap-0.5">
      {sessions.map((s) => {
        const active = s.id === activeSessionId;
        return (
          <li key={s.id}>
            <button
              data-testid={`session-item-${s.id}`}
              data-active={active ? "true" : "false"}
              onClick={() => handleClick(s.id)}
              className={[
                "group w-full rounded-lg px-2.5 py-2 text-left transition-colors",
                active
                  ? "bg-[oklch(var(--primary)/0.12)]"
                  : "hover:bg-accent",
              ].join(" ")}
            >
              <span
                className={[
                  "block truncate text-[0.8rem] leading-snug",
                  active ? "font-bold text-primary" : "text-foreground/90",
                ].join(" ")}
              >
                {s.question || s.id}
              </span>
              <span className="mt-1 flex items-center gap-1.5">
                <span
                  className={[
                    "size-1.5 rounded-full",
                    s.status === "open"
                      ? "bg-[oklch(var(--success))]"
                      : s.status === "finalized"
                        ? "bg-primary"
                        : "bg-muted-foreground/50",
                  ].join(" ")}
                />
                <span className="text-[0.65rem] uppercase tracking-wide text-muted-foreground">
                  {s.status}
                </span>
              </span>
            </button>
          </li>
        );
      })}
    </ul>
  );
}