@startsimpli/ui 0.4.62 → 0.4.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.62",
+  "version": "0.4.63",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/collection/InlineReviewActions.tsx

@@ -0,0 +1,109 @@
+'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. 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 { notify } from '../toast/use-notify';
+import { cn } from '../../lib/utils';
+import type { CollectionClient, EntityRecord, EntityTypeDef } from './types';
+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',
+};
+
+// 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);
+
+  async function apply(d: ReviewDecision) {
+    const prev = verdict;
+    setVerdict(d.verdict ?? ''); // optimistic
+    setBusy(d.key);
+    try {
+      await client.updateEntity(record.id, { data: applyDecisionToData(record.data, d, cfg) });
+      onSaved?.();
+    } catch (err) {
+      setVerdict(prev); // roll back
+      notify.error(err instanceof Error ? err.message : 'Could not save.');
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  if (decisions.length === 0) return null;
+  return (
+    <div className="flex items-center justify-end gap-1" onClick={(e) => e.stopPropagation()}>
+      {decisions.map((d) => {
+        const Icon = ICON[d.tone];
+        const active = !!d.verdict && d.verdict === verdict;
+        return (
+          <button
+            key={d.key}
+            type="button"
+            title={d.label}
+            aria-label={d.label}
+            aria-pressed={active}
+            disabled={busy === d.key}
+            onClick={(e) => {
+              e.stopPropagation();
+              void apply(d);
+            }}
+            className={cn(
+              'flex h-8 w-8 items-center justify-center rounded-md border transition disabled:opacity-50',
+              active ? ACTIVE[d.tone] : IDLE[d.tone],
+            )}
+          >
+            <Icon className="h-4 w-4" />
+          </button>
+        );
+      })}
+    </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). */