ThothII/frontend/src/shell/NavSessions.tsx

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

interface Props {
  sessions: SessionSummary[];
  activeSessionId: string | null;
  onOpenPanel: (id: string) => void;
  menuFor: (session: SessionSummary) => ReactNode;
}

export function NavSessions({ sessions, activeSessionId, onOpenPanel, menuFor }: 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-0.5">
      {sessions.map((s) => {
        const active = s.id === activeSessionId;
        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={s.name || s.question || s.id}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  onOpenPanel(s.id);
                }
              }}
              className={[
                "group flex w-full cursor-pointer items-start gap-1 rounded-lg px-2.5 py-2 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
                active ? "bg-[oklch(var(--primary)/0.12)]" : "hover:bg-accent",
              ].join(" ")}
            >
              <div className="min-w-0 flex-1">
                <span
                  className={[
                    "block truncate text-[0.8rem] leading-snug",
                    active ? "font-bold text-primary" : "text-foreground/90",
                  ].join(" ")}
                >
                  {s.name || 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>
              </div>
              {menuFor(s)}
            </div>
          </li>
        );
      })}
    </ul>
  );
}