@startsimpli/ui 0.4.62 → 0.4.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.62",
+  "version": "0.4.64",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -42,8 +42,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/api": "0.5.44",
-    "@startsimpli/auth": "0.4.30"
+    "@startsimpli/auth": "0.4.30",
+    "@startsimpli/api": "0.5.44"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/collection/InlineReviewActions.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+/**
+ * Inline per-row review actions — the fast-triage cluster for a status table (bd
+ * startsim-768w.18.15). Renders the (up to) three decisions from the schema as
+ * compact icon buttons ✕ reject · ✓ good · ✎ edit; a click writes status AND
+ * team_verdict together (the coherent pair, same as ReviewDrawer) IN PLACE —
+ * optimistic, no drawer. The current verdict shows as the active button.
+ *
+ * The ✎ "edit / needs work" decision opens a small popover with a note box so the
+ * reviewer says HOW it should change — saved to the note attr alongside the
+ * status+verdict move. Meant to live in a table's trailing "Actions" column; it
+ * stops click propagation so acting never triggers the row's drawer-open.
+ *
+ * Generic + client-injected: pass a CollectionClient + the record; defaults match
+ * the OGMC content schema but everything routes through resolveReviewConfig.
+ */
+import { useMemo, useState } from 'react';
+import { Check, X, PencilLine } from 'lucide-react';
+
+import { Button } from '../ui/button';
+import { Textarea } from '../ui/textarea';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { notify } from '../toast/use-notify';
+import { cn } from '../../lib/utils';
+import type { CollectionClient, EntityRecord, EntityTypeDef } from './types';
+import { toCamelKey } from './data';
+import {
+  applyDecisionToData,
+  fieldStr,
+  resolveReviewConfig,
+  reviewDecisions,
+  type ReviewConfig,
+  type ReviewDecision,
+  type VerdictTone,
+} from './review';
+
+const ICON: Record<VerdictTone, typeof Check> = { good: Check, bad: X, neutral: PencilLine };
+const ACTIVE: Record<VerdictTone, string> = {
+  good: 'bg-emerald-600 text-white border-emerald-600',
+  bad: 'bg-rose-600 text-white border-rose-600',
+  neutral: 'bg-amber-500 text-white border-amber-500',
+};
+const IDLE: Record<VerdictTone, string> = {
+  good: 'border-border bg-card text-emerald-600 hover:bg-emerald-50',
+  bad: 'border-border bg-card text-rose-600 hover:bg-rose-50',
+  neutral: 'border-border bg-card text-amber-600 hover:bg-amber-50',
+};
+const BTN = 'flex h-8 w-8 items-center justify-center rounded-md border transition disabled:opacity-50';
+
+// Display order: ✕ reject · ✓ good · ✎ edit — a scan-left-to-right pass/fail/fix.
+const ORDER = ['reject', 'approve', 'needs_work'];
+
+export interface InlineReviewActionsProps {
+  client: CollectionClient;
+  type: EntityTypeDef;
+  record: EntityRecord;
+  /** Field-map + transition overrides; defaults match the OGMC content schema. */
+  config?: ReviewConfig;
+  /** Fired after a successful save so the parent can refetch/invalidate. */
+  onSaved?: () => void;
+}
+
+export function InlineReviewActions({ client, type, record, config, onSaved }: InlineReviewActionsProps) {
+  const cfg = useMemo(() => resolveReviewConfig(type, config), [type, config]);
+  const decisions = useMemo(
+    () => [...reviewDecisions(cfg)].sort((a, b) => ORDER.indexOf(a.key) - ORDER.indexOf(b.key)),
+    [cfg],
+  );
+  const [verdict, setVerdict] = useState(() => fieldStr(record.data, cfg.verdictAttr));
+  const [busy, setBusy] = useState<string | null>(null);
+  const [noteOpen, setNoteOpen] = useState(false);
+  const [note, setNote] = useState('');
+
+  /** Apply a decision (status + verdict), optionally attaching a note. Optimistic. */
+  async function apply(d: ReviewDecision, noteText?: string) {
+    const prev = verdict;
+    setVerdict(d.verdict ?? ''); // optimistic
+    setBusy(d.key);
+    try {
+      const data = applyDecisionToData(record.data, d, cfg);
+      if (noteText !== undefined) {
+        const camel = toCamelKey(cfg.noteAttr);
+        const t = noteText.trim();
+        if (t) {
+          data[camel] = t;
+          if (camel !== cfg.noteAttr) delete data[cfg.noteAttr];
+        } else {
+          delete data[camel];
+          delete data[cfg.noteAttr];
+        }
+      }
+      await client.updateEntity(record.id, { data });
+      onSaved?.();
+      return true;
+    } catch (err) {
+      setVerdict(prev); // roll back
+      notify.error(err instanceof Error ? err.message : 'Could not save.');
+      return false;
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  function iconButton(d: ReviewDecision, extraOnClick?: () => void) {
+    const Icon = ICON[d.tone];
+    const active = !!d.verdict && d.verdict === verdict;
+    return (
+      <button
+        type="button"
+        title={d.label}
+        aria-label={d.label}
+        aria-pressed={active}
+        disabled={busy === d.key}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (extraOnClick) extraOnClick();
+          else void apply(d);
+        }}
+        className={cn(BTN, active ? ACTIVE[d.tone] : IDLE[d.tone])}
+      >
+        <Icon className="h-4 w-4" />
+      </button>
+    );
+  }
+
+  if (decisions.length === 0) return null;
+  return (
+    <div className="flex items-center justify-end gap-1" onClick={(e) => e.stopPropagation()}>
+      {decisions.map((d) =>
+        d.promptNote ? (
+          // ✎ edit: open a note box for HOW it should change, then save note + move.
+          <Popover key={d.key} open={noteOpen} onOpenChange={setNoteOpen}>
+            <PopoverTrigger asChild>
+              {iconButton(d, () => setNote(fieldStr(record.data, cfg.noteAttr)))}
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-72" onClick={(e) => e.stopPropagation()}>
+              <p className="mb-1.5 text-xs font-medium text-foreground">What should change?</p>
+              <Textarea
+                value={note}
+                onChange={(e) => setNote(e.target.value)}
+                rows={3}
+                autoFocus
+                placeholder="e.g. angle too broad; needs a 2026 source"
+                className="text-sm"
+              />
+              <div className="mt-2 flex justify-end gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setNoteOpen(false)}
+                  disabled={busy === d.key}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  size="sm"
+                  onClick={() => {
+                    void apply(d, note).then((ok) => ok && setNoteOpen(false));
+                  }}
+                  disabled={busy === d.key}
+                >
+                  {busy === d.key ? 'Saving…' : 'Save'}
+                </Button>
+              </div>
+            </PopoverContent>
+          </Popover>
+        ) : (
+          <span key={d.key}>{iconButton(d)}</span>
+        ),
+      )}
+    </div>
+  );
+}

package/src/components/collection/__tests__/review.test.ts

@@ -2,6 +2,7 @@ import {
   deriveReviewTransitions,
   resolveReviewConfig,
   reviewDecisions,
+  applyDecisionToData,
   pickStatusAttr,
   shouldIgnoreShortcut,
   nextReviewIndex,
@@ -139,6 +140,34 @@ describe('reviewDecisions', () => {
   });
 });
 
+describe('applyDecisionToData', () => {
+  const topic = type([
+    enumAttr('status', ['suggested', 'ready', 'rejected', 'written']),
+    textAttr('team_verdict'),
+  ]);
+  const cfg = resolveReviewConfig(topic);
+  const decisions = reviewDecisions(cfg);
+  const byKey = (k: string) => decisions.find((d) => d.key === k)!;
+
+  it('writes status + verdict together (camelCased), preserving other keys', () => {
+    const out = applyDecisionToData({ title: 'T', status: 'suggested', teamVerdict: '' }, byKey('approve'), cfg);
+    expect(out.status).toBe('ready');
+    expect(out.teamVerdict).toBe('good');
+    expect(out.title).toBe('T');
+  });
+
+  it('reject writes rejected + bad', () => {
+    const out = applyDecisionToData({}, byKey('reject'), cfg);
+    expect(out).toEqual({ status: 'rejected', teamVerdict: 'bad' });
+  });
+
+  it('drops a snake-case duplicate of a camelCased key', () => {
+    const out = applyDecisionToData({ team_verdict: 'old' }, byKey('approve'), cfg);
+    expect(out.teamVerdict).toBe('good');
+    expect(out.team_verdict).toBeUndefined();
+  });
+});
+
 describe('shouldIgnoreShortcut', () => {
   it('ignores while typing in a form control', () => {
     expect(shouldIgnoreShortcut({ key: 'a', target: { tagName: 'INPUT' } })).toBe(true);

package/src/components/collection/index.ts

@@ -8,10 +8,12 @@
 export { TopicReviewWorkspace, type TopicReviewWorkspaceProps } from './TopicReviewWorkspace';
 export { DraftReviewWorkspace, type DraftReviewWorkspaceProps } from './DraftReviewWorkspace';
 export { ReviewDrawer, type ReviewDrawerProps } from './ReviewDrawer';
+export { InlineReviewActions, type InlineReviewActionsProps } from './InlineReviewActions';
 export {
   resolveReviewConfig,
   deriveReviewTransitions,
   reviewDecisions,
+  applyDecisionToData,
   type ReviewDecision,
   pickStatusAttr,
   shouldIgnoreShortcut,

package/src/components/collection/review.ts

@@ -15,7 +15,7 @@
  * Nothing here is tenant-specific — the defaults are conventions, not requirements.
  */
 import type { AttributeDef, EntityTypeDef } from './types';
-import { readData } from './data';
+import { readData, toCamelKey } from './data';
 
 // ---- keyboard guard (lifted so the drawer + any review surface share it) ----
 
@@ -297,6 +297,29 @@ export function reviewDecisions(r: ResolvedReview): ReviewDecision[] {
   return out;
 }
 
+/**
+ * Merge a decision's status + verdict into a record's (camelCased) data blob and
+ * return the FULL next blob — the backend PATCH replaces `data`, so callers must
+ * send the whole thing. Pure, so both the drawer and the inline row actions apply
+ * a decision identically (and it's unit-tested). Null status/verdict are skipped.
+ */
+export function applyDecisionToData(
+  data: Record<string, unknown> | undefined,
+  decision: ReviewDecision,
+  cfg: ResolvedReview,
+): Record<string, unknown> {
+  const next: Record<string, unknown> = { ...(data ?? {}) };
+  const set = (attr: string, value: string | null) => {
+    if (value == null || value === '') return;
+    const camel = toCamelKey(attr);
+    next[camel] = value;
+    if (camel !== attr) delete next[attr];
+  };
+  set(cfg.statusName, decision.status);
+  set(cfg.verdictAttr, decision.verdict);
+  return next;
+}
+
 // ---- small read helpers used by the component (kept here so they're tested) ----
 
 /** String read of an attr off a record's data blob ('' when missing). */