@startsimpli/ui 0.4.63 → 0.4.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.63",
+  "version": "0.4.65",
   "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

@@ -5,9 +5,12 @@
  * 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.
+ * 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.
@@ -15,9 +18,13 @@
 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,
@@ -39,6 +46,7 @@ const IDLE: Record<VerdictTone, string> = {
   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'];
@@ -59,51 +67,119 @@ export function InlineReviewActions({ client, type, record, config, onSaved }: I
     () => [...reviewDecisions(cfg)].sort((a, b) => ORDER.indexOf(a.key) - ORDER.indexOf(b.key)),
     [cfg],
   );
-  const [verdict, setVerdict] = useState(() => fieldStr(record.data, cfg.verdictAttr));
+  // Which decision the record currently reflects — by verdict when the type has
+  // one (topics), else by status (news: acceptable→approve, rejected→reject). The
+  // matching button shows active. Optimistically updated on click.
+  const initialKey = useMemo(() => {
+    const v = fieldStr(record.data, cfg.verdictAttr);
+    const s = fieldStr(record.data, cfg.statusName);
+    return (
+      decisions.find((d) => (d.verdict ? d.verdict === v : d.status ? d.status === s : false))?.key ??
+      null
+    );
+  }, [record.data, cfg, decisions]);
+  const [appliedKey, setAppliedKey] = useState<string | null>(initialKey);
   const [busy, setBusy] = useState<string | null>(null);
+  const [noteOpen, setNoteOpen] = useState(false);
+  const [note, setNote] = useState('');
 
-  async function apply(d: ReviewDecision) {
-    const prev = verdict;
-    setVerdict(d.verdict ?? ''); // optimistic
+  /** Apply a decision (status + verdict), optionally attaching a note. Optimistic. */
+  async function apply(d: ReviewDecision, noteText?: string) {
+    const prev = appliedKey;
+    setAppliedKey(d.key); // optimistic
     setBusy(d.key);
     try {
-      await client.updateEntity(record.id, { data: applyDecisionToData(record.data, d, cfg) });
+      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
+      setAppliedKey(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.key === appliedKey;
+    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) => {
-        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>
-        );
-      })}
+      {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

@@ -124,6 +124,21 @@ describe('reviewDecisions', () => {
     expect(keys).not.toContain('reject');
   });
 
+  it('omitNeedsWork + custom transitions gives a binary accept/reject (news curation)', () => {
+    const news = type([enumAttr('status', ['new', 'surfaced', 'acceptable', 'rejected'])]);
+    const d = reviewDecisions(
+      resolveReviewConfig(news, {
+        approveStatus: 'acceptable',
+        rejectStatus: 'rejected',
+        verdicts: [],
+        omitNeedsWork: true,
+      }),
+    );
+    expect(d.map((x) => x.key).sort()).toEqual(['approve', 'reject']);
+    expect(d.find((x) => x.key === 'approve')).toMatchObject({ status: 'acceptable', verdict: null });
+    expect(d.find((x) => x.key === 'reject')).toMatchObject({ status: 'rejected', verdict: null });
+  });
+
   it('uses custom verdict vocab tones', () => {
     const d = reviewDecisions(
       resolveReviewConfig(topic, {

package/src/components/collection/review.ts

@@ -167,6 +167,8 @@ export interface ReviewConfig {
   metaAttrs?: string[];
   /** Attrs holding source urls/lines (default: source_1..3 + "sources"). */
   sourceAttrs?: string[];
+  /** Drop the middle "Needs work" decision — a binary accept/reject flow (default false). */
+  omitNeedsWork?: boolean;
 }
 
 export interface ResolvedReview {
@@ -182,6 +184,7 @@ export interface ResolvedReview {
   rankAttr: string;
   metaAttrs: string[];
   sourceAttrs: string[];
+  omitNeedsWork: boolean;
 }
 
 const DEFAULT_SOURCE_ATTRS = ['source_1', 'source_2', 'source_3', 'sources'];
@@ -212,6 +215,7 @@ export function resolveReviewConfig(
     metaAttrs: (config.metaAttrs ?? DEFAULT_META_ATTRS).filter((a) => declared.has(a)),
     // Keep source attrs the caller asked for; default to the ones this type declares.
     sourceAttrs: (config.sourceAttrs ?? DEFAULT_SOURCE_ATTRS).filter((a) => declared.has(a)),
+    omitNeedsWork: config.omitNeedsWork ?? false,
   };
 }
 
@@ -269,7 +273,7 @@ export function reviewDecisions(r: ResolvedReview): ReviewDecision[] {
   }
 
   const editVerdict = verdictOf('neutral');
-  if (entry && (editVerdict || entry !== r.transitions.approve)) {
+  if (!r.omitNeedsWork && entry && (editVerdict || entry !== r.transitions.approve)) {
     out.push({
       key: 'needs_work',
       label: 'Needs work',