52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2e15,"use client"; import { useState } from "react"; /* * Decision Inbox – open decisions with two quick actions each, in a gray tray with a white card, in a single self-contained file. * Answering a decision confirms it briefly, then folds it away and the count goes down. * The styles are injected below, so no extra files are needed. */ export type Decision = { id: string; title: string; /** Short context under the title */ detail?: string; /** Main answer, shown as the dark button */ primary: string; /** Other answer, shown as the light button */ secondary: string; /** Starts folded to one muted line – click to open */ collapsed?: boolean; }; export type DecisionInboxProps = { decisions: Decision[]; /** Called with the decision and the chosen answer */ onDecide?: (decision: Decision, answer: "primary" | "secondary") => void; className?: string; }; type State = { open: boolean; answered?: string; gone?: boolean }; export function DecisionInbox({ decisions, onDecide, className }: DecisionInboxProps) { const [state, setState] = useState>(() => Object.fromEntries(decisions.map((d) => [d.id, { open: !d.collapsed }])), ); const patch = (id: string, next: Partial) => setState((s) => ({ ...s, [id]: { ...s[id], ...next } })); const open = decisions.filter((d) => !state[d.id]?.answered).length; // 1284 → "1,284" const count = new Intl.NumberFormat("en").format(open); const decide = (d: Decision, answer: "primary" | "secondary") => { patch(d.id, { answered: answer === "primary" ? d.primary : d.secondary }); onDecide?.(d, answer); // Show the confirmation for a moment, then fold the row away and open the next folded one window.setTimeout(() => { setState((s) => { const next = { ...s, [d.id]: { ...s[d.id], gone: true } }; const folded = decisions.find((x) => x.id !== d.id && !next[x.id]?.open && !next[x.id]?.answered); if (folded) next[folded.id] = { ...next[folded.id], open: true }; return next; }); }, 1100); }; return ( <>

{open > 0 ? ( <> {count} {open === 1 ? "needs" : "need"} your input ) : ( <> All caught up )}

{decisions.map((d) => { const s = state[d.id] ?? { open: true }; return (

{s.open ? (

{d.title}

) : ( )}

{d.detail && (

{d.detail}

)}

{s.answered ? ( {s.answered} ) : ( <> )}

); })}

Nothing waiting on you – new decisions show up here.

); } /* ---------- Icons ---------- */ const AlertIcon = () => ( ); const DoneIcon = () => ( ); /* ---------- Styles ---------- */ const css = /* css */ ` .ui-di { --ui-di-tray: #f0f0f0; --ui-di-card: #ffffff; --ui-di-line: #f0f0f0; --ui-di-ink: #171717; --ui-di-text: #404040; --ui-di-muted: #8f8f8f; --ui-di-faint: #b5b5b5; --ui-di-alert: #e8590c; --ui-di-ok: #1f8a4c; --ui-di-ease: cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; width: 100%; max-width: 440px; /* Like the Chat Composer: a gray tray with the heading, the white card sits on top of it */ background: var(--ui-di-tray); /* The gray tray frames the white card on every side */ padding: 6px; border-radius: 22px; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ui-di-ink); -webkit-font-smoothing: antialiased; } .ui-di *, .ui-di *::before, .ui-di *::after { box-sizing: border-box; } .ui-di button { margin: 0; font: inherit; cursor: pointer; } .ui-di button:focus-visible { outline: 2px solid #2f6bff; outline-offset: 2px; } .ui-di__head { display: flex; align-items: center; gap: 8px; padding: 11px 18px 10px; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--ui-di-alert); transition: color 300ms ease; } .ui-di[data-clear] .ui-di__head { color: var(--ui-di-ok); } .ui-di__card { overflow: hidden; background: var(--ui-di-card); border: 1px solid #e5e5e5; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } /* Rows fold away with a height transition once answered */ .ui-di__row { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 460ms var(--ui-di-ease), opacity 300ms ease; } .ui-di__row[data-gone] { grid-template-rows: 0fr; opacity: 0; } .ui-di__row-inner { min-height: 0; overflow: hidden; } .ui-di__row + .ui-di__row .ui-di__item { border-top: 1px solid var(--ui-di-line); } .ui-di__row[data-gone] + .ui-di__row .ui-di__item { border-top-color: transparent; } .ui-di__item { padding: 16px 20px 14px; } .ui-di__item:not([data-open]) { padding-bottom: 16px; } .ui-di__title { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; line-height: 20px; text-align: start; color: var(--ui-di-ink); overflow-wrap: anywhere; } .ui-di__title--folded { /* Still one line however long the title – it opens in full on click */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ui-di-faint); transition: color 160ms ease; } .ui-di__title--folded:hover { color: var(--ui-di-muted); } .ui-di__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ui-di-ease); } .ui-di__body[data-open] { grid-template-rows: 1fr; } /* Room around the buttons so the clipping for the fold never cuts their ring and shadow */ .ui-di__body-inner { min-height: 0; overflow: hidden; margin: 0 -4px -4px; padding: 0 4px 4px; } .ui-di__detail { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--ui-di-muted); white-space: pre-line; overflow-wrap: anywhere; } .ui-di__actions { display: flex; align-items: center; /* Long or translated answers go on a second line instead of out of the card */ flex-wrap: wrap; gap: 8px; min-height: 30px; margin-top: 12px; } .ui-di__btn { max-width: 100%; min-height: 30px; padding: 5px 12px; border: 0; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px #e5e5e5, 0 1px 2px rgba(0, 0, 0, 0.04); font-size: 13px !important; font-weight: 500; line-height: 20px; color: var(--ui-di-ink); overflow-wrap: anywhere; transition: background-color 160ms ease, transform 160ms ease; } .ui-di__btn:hover { background: #f7f7f7; } .ui-di__btn:active { transform: scale(0.98); } .ui-di__btn--primary { background: linear-gradient(#323137, #201e25); box-shadow: 0 0 0 1px #0d0d0d, 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12); color: #fff; } .ui-di__btn--primary:hover { background: linear-gradient(#3b3a41, #26242b); } .ui-di__done { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 20px; max-width: 100%; color: var(--ui-di-ok); overflow-wrap: anywhere; animation: ui-di-in 360ms var(--ui-di-ease); } .ui-di__done > span { min-width: 0; } .ui-di__empty { display: none; margin: 0; padding: 18px 20px; font-size: 13px; line-height: 20px; color: var(--ui-di-muted); } .ui-di[data-clear] .ui-di__empty { display: block; animation: ui-di-in 420ms var(--ui-di-ease) 300ms both; } @keyframes ui-di-in { from { opacity: 0; transform: translateY(3px); } } @media (prefers-reduced-motion: reduce) { .ui-di__row, .ui-di__body { transition: none; } .ui-di__done, .ui-di__empty { animation: none !important; } } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. */ :where(.dark, [data-theme="dark"]) .ui-di { --ui-di-tray: #161618; --ui-di-card: #232326; --ui-di-line: rgba(255, 255, 255, 0.08); --ui-di-ink: #ededed; --ui-di-text: #c4c4c4; --ui-di-muted: #8f8f8f; --ui-di-faint: #6b6b70; --ui-di-alert: #fb8a3c; --ui-di-ok: #3fbf74; } :where(.dark, [data-theme="dark"]) .ui-di__card { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } :where(.dark, [data-theme="dark"]) .ui-di__btn { background: #2a2a2d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.4); } :where(.dark, [data-theme="dark"]) .ui-di__btn:hover { background: #313135; } /* The dark primary button inverts, like on the site */ :where(.dark, [data-theme="dark"]) .ui-di__btn--primary { background: linear-gradient(#f4f4f5, #e4e4e7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 #ffffff; color: #121213; } :where(.dark, [data-theme="dark"]) .ui-di__btn--primary:hover { background: linear-gradient(#ffffff, #ececef); } `; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/decision-inbox/decision-inbox.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]