ThothII/frontend/src/shell/NavSessions.tsx

// frontend/src/shell/NavSessions.tsx
import type { ReactNode } from "react";
import type { SessionSummary } from "../api/types";
import { Checkbox } from "../components/ui/checkbox";

interface Props {
  sessions: SessionSummary[];
  activeSessionId: string | null;
  onOpenPanel: (id: string) => void;
  menuFor: (session: SessionSummary) => ReactNode;
  selectedIds?: ReadonlySet<string>;
  onSelectionChange?: (id: string, selected: boolean) => void;
  showOwner?: boolean;
}

function statusIndicator(status: string) {
  if (status === "finalized") return { color: "bg-[oklch(var(--success))]", label: "Completed" };
  if (status === "closed") return { color: "bg-[oklch(var(--warning))]", label: "Stopped by user" };
  if (status === "failed") return { color: "bg-destructive", label: "Stopped by system error" };
  return { color: "bg-muted-foreground/50", label: "In progress" };
}

export function NavSessions({
  sessions, activeSessionId, onOpenPanel, menuFor,
  selectedIds = new Set<string>(), onSelectionChange = () => undefined, showOwner = false,
}: Props) {
  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 session</span>.
      </p>
    );
  }
  return (
    <ul className="flex flex-col gap-px">
      {sessions.map((s) => {
        const active = s.id === activeSessionId;
        const label = s.name || s.question || s.id;
        const indicator = statusIndicator(s.status);
        return (
          <li key={s.id}>
            <div
              data-testid={`session-item-${s.id}`}
              data-active={active ? "true" : "false"}
              onClick={() => onOpenPanel(s.id)}
              role="button"
              tabIndex={0}
              aria-label={label}
              title={`${label} · ${s.status}`}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  onOpenPanel(s.id);
                }
              }}
              className={[
                "group flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
                // The in-progress (active) session is marked in yellow — both its dot
                // and its row background — so it stands out from the rest of the rail.
                active ? "bg-accent" : "hover:bg-accent",
              ].join(" ")}
            >
              <Checkbox
                checked={selectedIds.has(s.id)}
                aria-label={`Select ${label}`}
                onCheckedChange={(selected) => onSelectionChange(s.id, selected === true)}
                onClick={(event) => event.stopPropagation()}
              />
              <span
                aria-hidden
                title={indicator.label}
                className={["size-1.5 shrink-0 rounded-full", indicator.color].join(" ")}
              />
              <span className="min-w-0 flex-1">
                <span
                  className={[
                    "block truncate text-[0.8rem] leading-snug",
                    active ? "font-semibold text-foreground" : "font-medium text-foreground/90",
                  ].join(" ")}
                >
                  {label}
                </span>
                {showOwner && (
                  <span className="block truncate text-[0.65rem] text-muted-foreground">
                    Owner: {s.author ?? "Unknown"}
                  </span>
                )}
              </span>
              {menuFor(s)}
            </div>
          </li>
        );
      })}
    </ul>
  );
}