Details panel

'use client';
import { useEffect, useRef, useState, type AnimationEvent, type ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { cx } from '../lib/cx';
import { useControllable, useCopied, useTween } from '../lib/hooks';
import { Icon } from '../lib/icons';
import { Avatar, Fold, Swap, Tip } from '../lib/motion';
import { usePopover } from '../lib/popover';
import '../designme.css';
import './details-panel.css';

export interface DetailsPanelOption {
  value: string;
  label: string;
  /** A quieter line under the label in the menu, like "Best for design" */
  detail?: string;
  /** A coloured dot before the label, like 'var(--dm-ok)' */
  color?: string;
  /** An avatar before the label instead of a dot */
  avatar?: { initials: string; color: string };
}

export type DetailsPanelTone = 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'yellow' | 'pink' | 'teal';
export interface DetailsPanelTag { label: string; tone?: DetailsPanelTone }

export type DetailsPanelRow =
  /** A plain value, like a date or a duration */
  | { key: string; label: string; type?: 'text'; value: ReactNode }
  /** A value picked from a menu */
  | { key: string; label: string; type: 'select'; options: DetailsPanelOption[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void;
      /** Shows a chevron after the value. Defaults to true when the options have no dots or avatars */
      chevron?: boolean }
  /** A number that rolls to its new value, like tokens or cost */
  | { key: string; label: string; type: 'number'; value: number;
      /** Turns the number into text. Defaults to a rounded number with thousands separators */
      format?: (n: number) => string }
  /** Labels, with an optional button to add one */
  | { key: string; label: string; type: 'tags'; tags: DetailsPanelTag[]; onAdd?: () => void; addLabel?: string };

export interface DetailsPanelSection {
  key: string;
  title: string;
  rows: DetailsPanelRow[];
}

export interface DetailsPanelProps {
  /** The title at the top, like "Pricing page redesign" */
  title: string;
  /** A short type tag before the title, like "RUN" */
  kind?: string;
  /** Adds a copy button that copies this, like a run ID */
  copyValue?: string;
  /** The copy button's tooltip */
  copyLabel?: string;
  sections: DetailsPanelSection[];
  /** Keys of the open sections. Leave it out to let the headers toggle them; every section starts open */
  open?: string[];
  defaultOpen?: string[];
  onOpenChange?: (open: string[]) => void;
  className?: string;
}

const TONE: Record<DetailsPanelTone, string> = { blue: 'dm-b', purple: 'dm-l', green: 'dm-m', orange: 'dm-p', red: 'dm-r', yellow: 'dm-y', pink: 'dm-k', teal: 'dm-t' };
const count = (n: number) => Math.round(n).toLocaleString('en-US');

/** Flashes the accent behind a value when it changes, but not when it first shows */
function useFlash(value: unknown) {
  const [flash, setFlash] = useState(false);
  const first = useRef(true);
  useEffect(() => {
    if (first.current) { first.current = false; return; }
    setFlash(false);
    const f = requestAnimationFrame(() => setFlash(true));
    return () => cancelAnimationFrame(f);
  }, [value]);
  // only its own flash: the avatar's entrance bubbles up here too
  return { flash, onAnimationEnd: (e: AnimationEvent) => { if (e.target === e.currentTarget) setFlash(false); } };
}

function Mark({ option, entering }: { option: DetailsPanelOption; entering?: boolean }) {
  if (option.avatar) return <Avatar key={option.value} initials={option.avatar.initials} color={option.avatar.color} className={entering ? 'dm-enter' : undefined} />;
  if (option.color) return <span className="dm-dot" style={{ color: option.color }} />;
  return null;
}

function SelectRow({ row, host }: { row: Extract<DetailsPanelRow, { type: 'select' }>; host: HTMLElement | null }) {
  const [value, setValue] = useControllable(row.value, row.defaultValue ?? row.options[0]?.value ?? '', row.onValueChange);
  const menu = usePopover();
  const picked = row.options.find(o => o.value === value) ?? row.options[0];
  const { flash, onAnimationEnd } = useFlash(value);
  const [changed, setChanged] = useState(false);
  const chevron = row.chevron ?? !row.options.some(o => o.color || o.avatar);
  if (!picked) return null;
  return (
    <>
      <button type="button" {...menu.trigger} className={cx('dm-dtp-v', flash && 'dm-flash')} onAnimationEnd={onAnimationEnd}>
        <Mark option={picked} entering={changed} />
        <Swap>{picked.label}</Swap>
        {chevron && <Icon name="chev-d" size="xs" />}
      </button>
      {/* the menus sit on the panel itself, so the folding sections can't clip them */}
      {host && createPortal(
        <div {...menu.pop} className={menu.pop.className} role="menu" aria-label={row.label}>
          {row.options.map(o => (
            <button type="button" key={o.value} className="dm-mi" role="menuitem"
              onClick={() => { if (o.value !== value) { setChanged(true); setValue(o.value); } menu.closeSoon(); }}>
              <Mark option={o} />
              {o.detail ? <span>{o.label}<span className="dm-d">{o.detail}</span></span> : <span>{o.label}</span>}
            </button>
          ))}
        </div>, host)}
    </>
  );
}

function NumberRow({ row }: { row: Extract<DetailsPanelRow, { type: 'number' }> }) {
  const shown = useTween(row.value, 800);
  return <span className="dm-dtp-v dm-num">{(row.format ?? count)(shown)}</span>;
}

function TagsRow({ row }: { row: Extract<DetailsPanelRow, { type: 'tags' }> }) {
  // tags that arrive after the panel appears come in with the entrance
  const [initial] = useState(() => new Set(row.tags.map(t => t.label)));
  return (
    <span className="dm-dtp-tags">
      {row.tags.map(t => <span key={t.label} className={cx('dm-tag', t.tone && TONE[t.tone], !initial.has(t.label) && 'dm-enter')}>{t.label}</span>)}
      {row.onAdd && <Tip label={row.addLabel ?? 'Add label'}>
        <button type="button" className="dm-dtp-add" aria-label={row.addLabel ?? 'Add label'} onClick={row.onAdd}><Icon name="plus" size="xs" /></button>
      </Tip>}
    </span>
  );
}

function Row({ row, host }: { row: DetailsPanelRow; host: HTMLElement | null }) {
  return (
    <div className="dm-dtp-r">
      <span className="dm-k">{row.label}</span>
      {row.type === 'select' ? <SelectRow row={row} host={host} />
        : row.type === 'number' ? <NumberRow row={row} />
        : row.type === 'tags' ? <TagsRow row={row} />
        : <span className="dm-dtp-v dm-num">{row.value}</span>}
    </div>
  );
}

/** A record's properties in folding sections, edited in place from small menus. */
export function DetailsPanel({ title, kind, copyValue, copyLabel = 'Copy run ID', sections, open, defaultOpen, onOpenChange, className }: DetailsPanelProps) {
  const [shown, setShown] = useControllable(open, defaultOpen ?? sections.map(s => s.key), onOpenChange);
  const [host, setHost] = useState<HTMLDivElement | null>(null);
  const [copied, copy] = useCopied();
  const toggle = (key: string) => setShown(shown.includes(key) ? shown.filter(k => k !== key) : [...shown, key]);

  return (
    <div data-dm="" ref={setHost} className={cx('dm-dtp dm-panel', className)}>
      <div className="dm-dtp-h">
        {kind && <span className="dm-ft">{kind}</span>}
        <b>{title}</b>
        {copyValue !== undefined && (
          <Tip label={copied ? 'Copied to clipboard' : copyLabel} open={copied || undefined}>
            <button type="button" className={cx('dm-ib dm-dtp-cp', copied && 'dm-copied')} aria-label={copyLabel} onClick={() => copy(copyValue)}>
              <Icon name={copied ? 'check' : 'link'} size="xs" />
            </button>
          </Tip>
        )}
      </div>
      {sections.map(s => {
        const isOpen = shown.includes(s.key);
        return (
          <div key={s.key} className="dm-dtp-sec">
            <button type="button" className="dm-dtp-sh" aria-expanded={isOpen} onClick={() => toggle(s.key)}>
              <Icon name="chev-r" size="xs" /><span>{s.title}</span>
            </button>
            <Fold open={isOpen}>
              <div className="dm-dtp-rows">{s.rows.map(r => <Row key={r.key} row={r} host={host} />)}</div>
            </Fold>
          </div>
        );
      })}
    </div>
  );
}

/* Generated from designme.dev by scripts/sync.mjs. Edit the site, then sync. */
/* ---------- Details panel ---------- */
.dm-dtp{padding:var(--dm-s-3);display:flex;flex-direction:column;gap:6px}
.dm-dtp-h{display:flex;align-items:center;gap:var(--dm-s-2);padding:2px var(--dm-s-1) 6px;font-size:13.5px}
.dm-dtp-h b{font-weight:500;flex:1;min-width:0}
.dm-dtp-sh{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dm-muted);padding:6px var(--dm-s-1);width:100%;text-align:left}
@media (hover:hover) and (pointer:fine){.dm-dtp-sh:hover{color:var(--dm-fg)}}
.dm-dtp-sh svg{transition:transform .4s var(--dm-ease);transform:rotate(90deg)}
.dm-dtp-sh[aria-expanded="false"] svg{transform:none}
.dm-dtp-rows{display:flex;flex-direction:column}
.dm-dtp-r{display:grid;grid-template-columns:84px 1fr;align-items:center;min-height:34px;font-size:13px;position:relative}
.dm-dtp-r .dm-k{color:var(--dm-muted);padding-left:var(--dm-s-1)}
.dm-dtp-v{display:inline-flex;align-items:center;gap:7px;justify-self:start;height:28px;padding:0 var(--dm-s-2);margin-left:-8px;border-radius:var(--dm-r-sm);transition:background .2s;color:var(--dm-fg)}
:where([data-dm]) button.dm-dtp-v[aria-expanded="true"]{background:var(--dm-row)}
@media (hover:hover) and (pointer:fine){:where([data-dm]) button.dm-dtp-v:hover{background:var(--dm-row)}}
.dm-dtp-v .dm-av{width:20px;height:20px;font-size:9.5px}
.dm-dtp-v>svg{color:var(--dm-muted)}
.dm-dtp-v.dm-flash{animation:dm-dtpf .9s var(--dm-ease)}
@keyframes dm-dtpf{30%{background:var(--dm-accent-bg)}}
.dm-dtp-tags{display:flex;gap:var(--dm-s-1);align-items:center;flex-wrap:wrap}
.dm-dtp-add{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:var(--dm-muted);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 50%,transparent)}
@media (hover:hover) and (pointer:fine){.dm-dtp-add:hover{color:var(--dm-fg);background:var(--dm-row)}}
.dm-dtp .dm-mi .dm-av{width:20px;height:20px;font-size:9.5px}
.dm-dtp .dm-pop{min-width:180px}

<div class="card" data-c="details-panel">
  <div class="stage-in">
    <div class="dtp panel">
      <div class="dtp-h"><span class="ft">RUN</span><b>Pricing page redesign</b><button class="ib dtp-cp" aria-label="Copy run ID" data-tip="Copy run ID"><svg class="i xs"><use href="#i-link"/></svg></button></div>
      <div class="dtp-sec">
        <button class="dtp-sh" aria-expanded="true"><svg class="i xs"><use href="#i-chev-r"/></svg><span>Properties</span></button>
        <div class="fold dtp-f1"><div><div class="dtp-rows">
          <div class="dtp-r"><span class="k">Status</span><button class="dtp-v dtp-stat" data-pop=".dtp-pst"><span class="dot" style="color:var(--accent-mark,var(--accent))"></span><span>In review</span></button>
            <div class="pop dtp-pst" role="menu"><button class="mi" data-close data-s="In progress" data-col="var(--py)"><span class="dot" style="color:var(--py)"></span><span>In progress</span></button><button class="mi" data-close data-s="In review" data-col="var(--accent-mark,var(--accent))"><span class="dot" style="color:var(--accent-mark,var(--accent))"></span><span>In review</span></button><button class="mi" data-close data-s="Shipped" data-col="var(--ok)"><span class="dot" style="color:var(--ok)"></span><span>Shipped</span></button></div></div>
          <div class="dtp-r"><span class="k">Owner</span><button class="dtp-v dtp-own" data-pop=".dtp-pow"><span class="av" style="background:var(--av-l);color:var(--av-l-ink)">MK</span><span>Maya Kim</span></button>
            <div class="pop dtp-pow" role="menu"><button class="mi" data-close data-o="Maya Kim" data-i="MK" data-col="var(--av-l)"><span class="av" style="background:var(--av-l);color:var(--av-l-ink)">MK</span><span>Maya Kim</span></button><button class="mi" data-close data-o="Jon Ortiz" data-i="JO" data-col="var(--av-m)"><span class="av" style="background:var(--av-m);color:var(--av-m-ink)">JO</span><span>Jon Ortiz</span></button><button class="mi" data-close data-o="Design agent" data-i="DA" data-col="var(--av-b)"><span class="av" style="background:var(--av-b);color:var(--av-b-ink)">DA</span><span>Design agent</span></button></div></div>
          <div class="dtp-r"><span class="k">Model</span><button class="dtp-v" data-pop=".dtp-pmo"><span class="dtp-mo">Opus</span><svg class="i xs"><use href="#i-chev-d"/></svg></button>
            <div class="pop dtp-pmo" role="menu"><button class="mi" data-close data-m="Opus"><span>Opus<span class="d">Best for design</span></span></button><button class="mi" data-close data-m="Sonnet"><span>Sonnet<span class="d">Faster, cheaper</span></span></button><button class="mi" data-close data-m="Haiku"><span>Haiku<span class="d">Quick edits</span></span></button></div></div>
          <div class="dtp-r"><span class="k">Due</span><span class="dtp-v num">Oct 24</span></div>
          <div class="dtp-r"><span class="k">Labels</span><span class="dtp-tags"><span class="tag b">Pricing</span><span class="tag p">Web</span><button class="dtp-add" aria-label="Add label" data-tip="Add label"><svg class="i xs"><use href="#i-plus"/></svg></button></span></div>
        </div></div></div>
      </div>
      <div class="dtp-sec">
        <button class="dtp-sh" aria-expanded="true"><svg class="i xs"><use href="#i-chev-r"/></svg><span>Usage</span></button>
        <div class="fold dtp-f2"><div><div class="dtp-rows">
          <div class="dtp-r"><span class="k">Tokens</span><span class="dtp-v num dtp-tok">0</span></div>
          <div class="dtp-r"><span class="k">Cost</span><span class="dtp-v num dtp-cost">$0.00</span></div>
          <div class="dtp-r"><span class="k">Run time</span><span class="dtp-v num">4m 12s</span></div>
        </div></div></div>
      </div>
    </div>
  </div>
</div>

/* ---------- Details panel ---------- */
.dtp{padding:var(--s-3);display:flex;flex-direction:column;gap:6px}
.dtp-h{display:flex;align-items:center;gap:var(--s-2);padding:2px var(--s-1) 6px;font-size:13.5px}
.dtp-h b{font-weight:500;flex:1;min-width:0}
.dtp-sh{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:6px var(--s-1);width:100%;text-align:left}
@media (hover:hover) and (pointer:fine){.dtp-sh:hover{color:var(--fg)}}
.dtp-sh svg{transition:transform .4s var(--ease);transform:rotate(90deg)}
.dtp-sh[aria-expanded="false"] svg{transform:none}
.dtp-rows{display:flex;flex-direction:column}
.dtp-r{display:grid;grid-template-columns:84px 1fr;align-items:center;min-height:34px;font-size:13px;position:relative}
.dtp-r .k{color:var(--muted);padding-left:var(--s-1)}
.dtp-v{display:inline-flex;align-items:center;gap:7px;justify-self:start;height:28px;padding:0 var(--s-2);margin-left:-8px;border-radius:var(--r-sm);transition:background .2s;color:var(--fg)}
:where([data-c]) button.dtp-v[aria-expanded="true"]{background:var(--row)}
@media (hover:hover) and (pointer:fine){:where([data-c]) button.dtp-v:hover{background:var(--row)}}
.dtp-v .av{width:20px;height:20px;font-size:9.5px}
.dtp-v>svg{color:var(--muted)}
.dtp-v.flash{animation:dtpf .9s var(--ease)}
@keyframes dtpf{30%{background:var(--accent-bg)}}
.dtp-tags{display:flex;gap:var(--s-1);align-items:center;flex-wrap:wrap}
.dtp-add{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:var(--muted);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 50%,transparent)}
@media (hover:hover) and (pointer:fine){.dtp-add:hover{color:var(--fg);background:var(--row)}}
.dtp .mi .av{width:20px;height:20px;font-size:9.5px}
.dtp .pop{min-width:180px}

DM.def('details-panel', (r, c) => {
  r.innerHTML = r.innerHTML.replace('{link}', I('link','xs')).replace(/\{chev\}/g, I('chev-r','xs')).replace('{chevd}', I('chev-d','xs')).replace('{plus}', I('plus','xs'))
    .replace(/\{avm\}/g, AV('MK','var(--av-l)')).replace('{avj}', AV('JO','var(--av-m)')).replace('{ava}', AV('DA','var(--av-b)'));
  const flash = el => { el.classList.remove('flash'); void el.offsetWidth; el.classList.add('flash'); };
  $$('.pop', r).forEach(pp => $('.dtp', r).appendChild(pp));
  $$('.dtp-sh', r).forEach(b => b.onclick = () => { const f = b.nextElementSibling, open = f.classList.toggle('shut') === false; b.setAttribute('aria-expanded', open); });
  $$('.dtp-pst .mi', r).forEach(m => m.addEventListener('click', () => { const v = $('.dtp-stat', r); $('.dot', v).style.color = m.dataset.col; swap($('span:last-child', v), m.dataset.s); flash(v); }));
  $$('.dtp-pow .mi', r).forEach(m => m.addEventListener('click', () => { const v = $('.dtp-own', r); const av = $('.av', v); av.textContent = m.dataset.i; av.style.background = m.dataset.col; av.style.color = m.dataset.col.replace(')', '-ink)'); enter(av); swap($('span:last-child', v), m.dataset.o); flash(v); }));
  const cost = { Opus:[184200, 2.76], Sonnet:[184200, .55], Haiku:[184200, .15] }; let cc = 0, ct = 0;
  const setM = m => { tween(ct, cost[m][0], 800, v => { ct = v; $('.dtp-tok', r).textContent = Math.round(v).toLocaleString('en-US'); }); tween(cc, cost[m][1], 800, v => { cc = v; $('.dtp-cost', r).textContent = '$' + v.toFixed(2); }); };
  $$('.dtp-pmo .mi', r).forEach(m => m.addEventListener('click', () => { const v = $('.dtp-mo', r); swap(v, m.dataset.m); flash(v.parentElement); setM(m.dataset.m); }));
  const labels = [['Q4','y'],['A/B test','t'],['Urgent','r']]; let li = 0;
  $('.dtp-add', r).onclick = e => { if (li >= labels.length) return; const t = html(`<span class="tag ${labels[li][1]}">${labels[li][0]}</span>`); e.currentTarget.before(t); enter(t); li++; };
  const cp = $('.dtp-cp', r); cp.onclick = () => copied(cp, 'run_8f2a');
  // the run's tokens and cost count up once it has entered, unless a model you picked is counting already
  c.later(700, () => { if (!ct) setM('Opus'); });
});