fofos-admin/web/NavPanel.tsx

import { Link } from 'react-router';
import { Lock } from 'lucide-react';
import { LAYOUT_BANDS, SECTIONS, sectionOpen } from './sections';
import { href, useNav } from './routes';
import { useReady } from './useReady';
import { pageParam, usePages } from './usePages';

/**
 * The left column: which part of the fofos site the detail panel is showing.
 *
 * ── Selection is in the URL ──
 *
 * `?section=…`, per `docs/navigation-audit.md`: what is on screen is addressable, so it survives a
 * reload, can be linked, and the detail panel reads it directly. The two panels are siblings in a
 * workspace and never speak to each other.
 *
 * ── Real links, not buttons ──
 *
 * `AGENTS.md`: "Rows and nav items are real links." `plugins/proxy-manager/web/NavPanel.tsx` uses
 * buttons calling `setParams`, which keeps the URL correct but gives up anchor semantics — no
 * cmd-click into a new tab, no middle-click, not link-focusable. That is the older pattern and the
 * file that documents it says not to copy it.
 *
 * `<Link>` rather than `<NavLink>` because active state here is a QUERY parameter and NavLink's
 * `isActive` compares paths — every section would light up at once. So the active class is computed
 * from the same value the detail panel reads, which is the one place it can come from.
 *
 * ── Locked until `useReady` ──
 *
 * Until the plugin is ready, the site's sections are not links at all — a `<div>`, dimmed, with no
 * href to cmd-click and nothing to focus. Rendering a `<Link>` and swallowing the click would leave a
 * row that looks navigable, offers a URL on hover and opens in a new tab perfectly happily.
 *
 * The nav only declines to OFFER the door. `DetailPanel` holds the lock, because a typed URL never
 * comes through here.
 */

/**
 * The nav has a FOOT.
 *
 * Everything above it is a part of the client's site, in sitemap order. Below the divider is this
 * plugin's own machinery, which is not a page and does not belong in a list of them — the same split
 * the plugins nav makes with Update-all, and the reason it sits at the bottom of the panel rather than
 * at the bottom of the list. `mt-auto` pins it there whether there are ten sections or two.
 */

const rowClass = (active: boolean) =>
  `flex w-full items-center gap-2.5 border-b border-border px-3 py-2.5 text-left transition-colors ${
    active ? 'bg-muted' : 'hover:bg-muted/50'
  }`;

export const NavPanel = () => {
  // Announced by PagesPanel rather than fetched here — see usePages. Null until it has spoken, which
  // is why nothing is drawn instead of an empty list.
  const { pages } = usePages();
  const { section: active, item } = useNav();
  const { ready, rootSet } = useReady();

  const renderRow = (section: (typeof SECTIONS)[number]) => {
    const Icon = section.icon;
    // Each section asks its own question now — Media wants a root location, the site's pages want a
    // connection, Administration wants nothing because it is the way out of both.
    const locked = !sectionOpen(section, { ready, rootSet });

    const body = (
      <>
        <Icon className="size-4 shrink-0 text-muted-foreground" />
        <span className="min-w-0 flex-1">
          <span className="flex items-baseline gap-2">
            <span className={`truncate text-sm ${section.built ? '' : 'text-muted-foreground'}`}>{section.label}</span>
            {/* Dimmed and labelled rather than hidden. A nav that shows only what is finished gives
                    no sense of what the thing is for — see sections.ts. */}
            {!section.built && (
              <span className="text-[10px] tracking-wide text-muted-foreground/70 uppercase">soon</span>
            )}
          </span>
        </span>
        {locked && <Lock className="size-3.5 shrink-0 text-muted-foreground/60" />}
      </>
    );

    if (locked) {
      return (
        <div key={section.key} aria-disabled className={`${rowClass(false)} cursor-not-allowed opacity-45`}>
          {body}
        </div>
      );
    }

    const row = (
      <Link
        key={section.key}
        /*
          A PATH, and no query string at all.

          It used to build a fresh `URLSearchParams` per link, because everything about where you were
          lived in the query and a copied one leaked — pressing Layout while a band was open gave
          `?section=layout&band=footer`, so the row for a whole section led to one part of it.

          A path cannot leak: the URL says where you are, and `href` drops the query because what is
          left in it — how you are looking, not at what — belongs to the screen you are leaving.
        */
        to={href(section.key)}
        replace
        className={rowClass(active === section.key)}
      >
        {body}
      </Link>
    );

    /*
      The site's pages, as rows under Pages.

      Indented and quieter than a section, because they are not sections — they are the contents of
      one. The indent is a left border rather than padding alone, so the relationship survives a row
      wrapping onto two lines.

      Drawn whether or not Pages is the open section. The list of pages IS the site, and hiding it
      until you click makes the nav a menu of menus.
    */
    /*
      Layout's three bands, as rows under Layout.

      The layout IS a page — a header, the slot a page goes in, and a footer — and those three are the
      only things on this screen. They were reachable by scrolling and by knowing which tab held what;
      as rows they are the same shape as the pages under Pages, which is the shape the nav already
      teaches.

      Fixed rather than fetched: unlike pages, these three are structural. A band cannot be added or
      removed from the admin, only the code that draws it can, so a list read from the database would
      be a query that can only ever return the same three rows.
    */
    if (section.key === 'layout') {
      return (
        <div key={section.key} className="flex flex-col">
          {row}
          {LAYOUT_BANDS.map((band) => {
            const current = active === 'layout' && item === band.key;

            return (
              <Link
                key={band.key}
                to={href('layout', band.key)}
                replace
                className={`flex items-baseline gap-2 border-b border-border py-1.5 pr-3 pl-9 text-left transition-colors ${
                  current ? 'bg-muted' : 'hover:bg-muted/50'
                }`}
              >
                <span className="min-w-0 flex-1 truncate text-xs">{band.label}</span>
              </Link>
            );
          })}
        </div>
      );
    }

    if (section.key !== 'pages' || !pages?.length) return row;

    return (
      <div key={section.key} className="flex flex-col">
        {row}
        {pages.map((page) => {
          const current = active === 'pages' && item === pageParam(page);

          return (
            <Link
              key={page.id}
              to={href('pages', pageParam(page))}
              replace
              className={`flex items-baseline gap-2 border-b border-border py-1.5 pr-3 pl-9 text-left transition-colors ${
                current ? 'bg-muted' : 'hover:bg-muted/50'
              }`}
            >
              <span className="min-w-0 flex-1 truncate text-xs">{page.title}</span>
              {/* The address, because two pages can be called nearly the same thing and this is what
                  tells them apart. Home's is `/`, which is short enough not to need explaining. */}
              <span className="shrink-0 font-mono text-[10px] text-muted-foreground">{page.path}</span>
            </Link>
          );
        })}
      </div>
    );
  };

  return (
    <nav className="flex size-full flex-col overflow-auto">
      <div className="flex flex-col">{SECTIONS.filter((section) => !section.pinned).map(renderRow)}</div>

      {/* Separated by the same border the rows use, so it reads as the end of the panel rather than as
          one more page of the site. `border-t` and not `border-t-2`: it is a divider, not a heading. */}
      <div className="mt-auto flex flex-col border-t border-border">
        {/* Said once, here, rather than on nine dimmed rows. Without it a locked nav reads as broken
            rather than as one step not done — the rows go grey and nothing says why or what to do. */}
        {!ready && (
          <p className="px-3 pt-2.5 text-xs text-muted-foreground">
            {rootSet ? 'Connect fofos below to open the rest.' : 'Set a root location below to begin.'}
          </p>
        )}
        {SECTIONS.filter((section) => section.pinned).map(renderRow)}
      </div>
    </nav>
  );
};