List row

import { ListRow } from "@arcadia/ui";

<div {...sx("cmp-rows", cmp.rows)}>
  <ListRow
    leading="agent"
    label="Agent"
    description="Edit and run commands"
    emphasis
    highlighted
  />
  <ListRow
    leading="plan"
    label="Plan"
    description="Write a plan before changing anything"
    emphasis
  />
  <ListRow
    leading="ask"
    label="Ask"
    description="Answer questions without making edits"
    emphasis
  />
  <ListRow
    leading="compact"
    label="Compact context"
    description="Unavailable while running"
    descriptionYields={false}
    emphasis
    disabled
  />
</div>

import { useState } from "react";
import { ListRow } from "@arcadia/ui";

function Beside() {
  const [w, setW] = useState(100);
  const files = [
    ["refunds.ts", "src/features/checkout/rounding/currencies/minor-units"],
    ["round-refunds-to-the-minor-unit-in-every-currency.test.ts", "test"],
    ["apply-quantity-discounts-to-the-cart-total.ts", "src/features/checkout/cart/pricing/discounts"],
  ] as const;
  return (
    <div {...stylex.props(s.frame)}>
      <div {...sx("cmp-rows", cmp.rows)} style={{ width: `${w}%` }}>
        {files.map(([name, folder]) => (
          <ListRow key={name} leading="file-code" label={name} description={folder} meta="+9 −2" onClick={open} />
        ))}
      </div>
      <input {...sx(null, cmp.scrubInput)} type="range" min={30} max={100} value={w} aria-label="Room for the rows" onChange={(e) => setW(Number(e.target.value))} />
    </div>
  );
}

import { useState } from "react";
import { ListRow, nameForms } from "@arcadia/ui";

function Files() {
  const [w, setW] = useState(100);
  const files = [
    ["src/features/checkout/rounding/currencies", "minorUnitRounding.ts"],
    ["test", "round-refunds-to-the-minor-unit-in-every-currency.test.ts"],
    ["src/features/checkout/cart/pricing", "apply_quantity_discounts.ts"],
  ] as const;
  return (
    <div {...stylex.props(s.frame)}>
      <div {...sx("cmp-rows", cmp.rows)} style={{ width: `${w}%` }}>
        {files.map(([dir, name]) => (
          <ListRow key={name} leading="file-code" label={name} forms={nameForms(name)} description={dir.slice(dir.lastIndexOf("/") + 1)}
            meta="+9 −2" title={`${dir}/${name}`} onClick={open} />
        ))}
      </div>
      <input {...sx(null, cmp.scrubInput)} type="range" min={30} max={100} value={w} aria-label="Room for the file rows" onChange={(e) => setW(Number(e.target.value))} />
    </div>
  );
}

import { ListRow, StatusDot } from "@arcadia/ui";

function Yields() {
  const chats = [
    ["Colour tokens", "2d"],
    ["Round refunds to the minor unit in every currency", "4m"],
    ["Quarterly report for the board, with the appendix", "13h"],
  ] as const;
  return (
    <div {...sx("cmp-rows", cmp.rows, cmp.rowsSidebar)} data-width="sidebar">
      {chats.map(([label, time]) => (
        <ListRow key={label} size="lg" leading={<StatusDot />} label={label} meta={time} onClick={open} />
      ))}
    </div>
  );
}

import { useState } from "react";
import { ListRow, ListRowEdit, StatusDot } from "@arcadia/ui";

function Rename() {
  const [title, setTitle] = useState("Quarterly report");
  const [editing, setEditing] = useState(false);
  return (
    <div {...sx("cmp-rows", cmp.rows, cmp.rowsSidebar)} data-width="sidebar">
      <ListRow
        size="lg"
        leading={<StatusDot />}
        editing={editing}
        onDoubleClick={() => setEditing(true)}
        label={editing
          ? (
            <ListRowEdit
              defaultValue={title}
              aria-label="Chat title"
              onCommit={(v) => { setTitle(v.trim() || title); setEditing(false); }}
              onCancel={() => setEditing(false)}
            />
          )
          : title}
      />
    </div>
  );
}

import { useState } from "react";
import { AgentAvatar, ListRow, StatusDot, TextRoll } from "@arcadia/ui";

function People() {
  const [active, setActive] = useState("juniper");
  return (
    <nav {...sx("cmp-rows", cmp.rows, cmp.rowsSidebar)} data-width="sidebar" aria-label="Agents">
      <ListRow size="person" active={active === "juniper"} onClick={() => setActive("juniper")}
        leading={<AgentAvatar avatar={JUNIPER} name="Juniper" size={36} state="working" badge="running" aria-hidden />}
        label="Juniper" sub={<TextRoll text="Looking through files" />} />
      <ListRow size="person" active={active === "pebble"} onClick={() => setActive("pebble")}
        leading={<AgentAvatar avatar={PEBBLE} name="Pebble" size={36} aria-hidden />}
        label="Pebble" sub="Merged and deployed. The docs are updated too." meta={<StatusDot status="unread" label="Finished while you were away" />} />
      <ListRow size="person" active={active === "atlas"} onClick={() => setActive("atlas")}
        leading={<AgentAvatar avatar={ATLAS} name="Atlas" size={36} state="waiting" aria-hidden />}
        label="Atlas" sub="Waiting for you" subTone="attention" aside="12:01 AM" meta={<StatusDot status="attention" label="Waiting for you" />} />
      <ListRow size="person" active={active === "quill"} onClick={() => setActive("quill")}
        leading={<AgentAvatar avatar={QUILL} name="Quill" size={36} aria-hidden />} label="Quill" />
    </nav>
  );
}

import { ListRow, Skeleton } from "@arcadia/ui";

<div {...sx("cmp-rows", cmp.rows, cmp.rowsSidebar)} data-width="sidebar" aria-busy="true">
  {(["72%", "48%", "60%"] as const).map((w) => (
    <ListRow
      key={w}
      size="lg"
      interactive={false}
      reserveLeading
      label={<Skeleton width={w} />}
    />
  ))}
</div>