src/Sidebar.tsx

import { promptGroups } from "./prompts";
import type { DataInfo } from "./types";
import {
  ChevronIcon,
  CloseIcon,
  DatabaseIcon,
  ExitIcon,
  PlusIcon,
  WindIcon,
} from "./icons";

type SidebarProps = {
  open: boolean;
  dataInfo: DataInfo | null;
  onClose: () => void;
  onPrompt: (prompt: string) => void;
  onNewChat: () => void;
  onLogout: () => void;
};

function compactNumber(value?: number) {
  if (!value) return "—";
  return new Intl.NumberFormat("en-US", {
    notation: "compact",
    maximumFractionDigits: 1,
  }).format(value);
}

export function Sidebar({
  open,
  dataInfo,
  onClose,
  onPrompt,
  onNewChat,
  onLogout,
}: SidebarProps) {
  return (
    <>
      <button
        className={`sidebar-scrim ${open ? "is-visible" : ""}`}
        onClick={onClose}
        aria-label="Close question library"
        tabIndex={open ? 0 : -1}
      />
      <aside className={`sidebar ${open ? "is-open" : ""}`} aria-label="Question library">
        <div className="sidebar__top">
          <div className="brand-lockup">
            <span className="brand-mark">
              <WindIcon />
            </span>
            <span>
              <strong>VayuChat</strong>
              <small>Sustainability Lab</small>
            </span>
          </div>
          <button className="icon-button sidebar__close" onClick={onClose} aria-label="Close">
            <CloseIcon />
          </button>
        </div>

        <button className="new-chat-button" onClick={onNewChat}>
          <PlusIcon />
          New analysis
        </button>

        <nav className="prompt-library" aria-label="Suggested questions">
          <p className="sidebar-label">Question library</p>
          {promptGroups.map((group, groupIndex) => (
            <details key={group.name} open={groupIndex === 0}>
              <summary>
                <span>{group.label}</span>
                <small>{group.prompts.length}</small>
                <ChevronIcon />
              </summary>
              <div className="prompt-list">
                {group.prompts.map((prompt) => (
                  <button
                    key={prompt}
                    onClick={() => {
                      onPrompt(prompt);
                      onClose();
                    }}
                  >
                    {prompt}
                  </button>
                ))}
              </div>
            </details>
          ))}
        </nav>

        <div className="sidebar__footer">
          <div className="data-card">
            <DatabaseIcon />
            <div>
              <span>Air-quality dataset</span>
              <strong>
                {compactNumber(dataInfo?.records)} records ·{" "}
                {dataInfo?.cities ?? "—"} cities
              </strong>
            </div>
          </div>
          <button className="logout-button" onClick={onLogout}>
            <ExitIcon />
            Sign out
          </button>
        </div>
      </aside>
    </>
  );
}