@startsimpli/ui 0.4.63 → 0.4.64

package/package.json

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

@@ -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'];
@@ -61,49 +69,106 @@ export function InlineReviewActions({ client, type, record, config, onSaved }: I
   );
   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('');
 
-  async function apply(d: ReviewDecision) {
+  /** 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 {
-      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
       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) => {
-        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>
   );
 }