Socrates/apps/web/components/editor/LeftRail.tsx

// Outline / Model / Requirements sections, each independently collapsible.
// The whole rail can also collapse to a 36px vertical strip.
// Ported from docs/design-source/socrata/project/editor-shell.jsx (LeftRail).

"use client";

import { useState } from "react";
import type { FixtureData } from "../../lib/fixtures/aristotle";

interface LeftRailProps {
  data: FixtureData;
  focusBlockId: string | null;
  setFocusBlockId: (id: string | null) => void;
}

export function LeftRail({ data, focusBlockId, setFocusBlockId }: LeftRailProps) {
  const [collapsed, setCollapsed] = useState(false);
  const [open, setOpen] = useState({ outline: true, model: true, requirements: true });
  const toggle = (k: keyof typeof open) => setOpen(s => ({ ...s, [k]: !s[k] }));

  if (collapsed) {
    return (
      <nav className="leftrail leftrail-collapsed">
        <button
          className="rail-collapse-btn"
          onClick={() => setCollapsed(false)}
          title="Expand rail"
          type="button"
        >
          ›
        </button>
        <div className="rail-collapsed-stack">
          <span className="rail-collapsed-tag" title="Outline">OUT</span>
          <span className="rail-collapsed-tag" title="Model · 6 blocks">MOD</span>
          <span className="rail-collapsed-tag" title="Requirements">REQ</span>
        </div>
      </nav>
    );
  }

  return (
    <nav className="leftrail">
      <div className="rail-section">
        <button className="rail-section-head" onClick={() => toggle("outline")} type="button">
          <span className={`rail-caret ${open.outline ? "rail-caret-open" : ""}`}>▸</span>
          <span className="rail-label">Outline</span>
        </button>
        {open.outline && (
          <ul className="rail-list">
            <li className="rail-item rail-item-active">
              <span className="rail-item-text">Problem framing</span>
            </li>
            <li className="rail-item">
              <span className="rail-item-text">Constraints</span>
              <span className="rail-count rail-count-req">3</span>
            </li>
            <li className="rail-item">
              <span className="rail-item-text">Why now</span>
            </li>
            <li className="rail-item rail-item-muted">
              <span className="rail-item-text">Hypotheses</span>
              <span className="rail-count rail-count-asm">3</span>
            </li>
            <li className="rail-item rail-item-muted">
              <span className="rail-item-text">Open questions</span>
              <span className="rail-count rail-count-q">5</span>
            </li>
            <li className="rail-item rail-item-muted">
              <span className="rail-item-text">Risks</span>
              <span className="rail-count rail-count-risk">2</span>
            </li>
          </ul>
        )}
      </div>

      <div className="rail-section">
        <button className="rail-section-head" onClick={() => toggle("model")} type="button">
          <span className={`rail-caret ${open.model ? "rail-caret-open" : ""}`}>▸</span>
          <span className="rail-label">Model</span>
        </button>
        {open.model && (
          <ul className="rail-list rail-blocks">
            {data.blocks.map(b => (
              <li
                key={b.id}
                className={`rail-block rail-${b.kind} ${focusBlockId === b.id ? "rail-block-active" : ""}`}
                onMouseEnter={() => setFocusBlockId(b.id)}
                onMouseLeave={() => setFocusBlockId(null)}
              >
                <span className="rail-block-glyph">
                  {b.kind === "constraint" ? "{}" : b.kind === "actor" ? "◐" : "▢"}
                </span>
                <span className="rail-block-label">{b.label}</span>
                <span
                  className="rail-block-count"
                  title={`${b.properties.length} ${b.properties.length === 1 ? "property" : "properties"}`}
                >
                  <span className="rail-block-count-glyph">·</span>
                  {b.properties.length}
                </span>
              </li>
            ))}
          </ul>
        )}
      </div>

      <div className="rail-section">
        <button className="rail-section-head" onClick={() => toggle("requirements")} type="button">
          <span className={`rail-caret ${open.requirements ? "rail-caret-open" : ""}`}>▸</span>
          <span className="rail-label">Requirements</span>
        </button>
        {open.requirements && (
          <ul className="rail-list">
            <li className="rail-req">
              <span className="req-tag">REQ-001</span>
              <span className="req-status req-traced" />
            </li>
            <li className="rail-req">
              <span className="req-tag">REQ-002</span>
              <span className="req-status req-traced" />
            </li>
            <li className="rail-req">
              <span className="req-tag">REQ-003</span>
              <span className="req-status req-untraced" />
            </li>
          </ul>
        )}
      </div>

      <button
        className="rail-collapse-btn rail-collapse-btn-bottom"
        onClick={() => setCollapsed(true)}
        title="Collapse rail"
        type="button"
      >
        ‹
      </button>
    </nav>
  );
}