@startsimpli/ui 0.4.156 → 0.4.158

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.156",
+  "version": "0.4.158",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -55,9 +55,9 @@
     "@codemirror/language": "^6.0.0",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
+    "@startsimpli/i18n": "^0.1.3",
     "@startsimpli/api": "^0.5.68",
-    "@startsimpli/auth": "^0.4.42",
-    "@startsimpli/i18n": "^0.1.3"
+    "@startsimpli/auth": "^0.4.42"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/collection/InlineReviewActions.tsx

@@ -32,6 +32,7 @@ import {
   activeDecisionKey,
   applyDecisionToData,
   fieldStr,
+  isDecisionInForce,
   resolveReviewConfig,
   reviewDecisions,
   type ReviewConfig,
@@ -126,19 +127,24 @@ export function InlineReviewActions({ client, type, record, config, onSaved }: I
   function iconButton(d: ReviewDecision, extraOnClick?: () => void) {
     const Icon = ICON[d.tone];
     const active = d.key === appliedKey;
+    // The decision already in force writes nothing (bd startsim-3c7h8). Not
+    // `disabled`: that dims the lit tick and it would read as un-approved.
+    const inert = isDecisionInForce(d, appliedKey);
     return (
       <button
         type="button"
         title={d.label}
         aria-label={d.label}
         aria-pressed={active}
+        aria-disabled={inert || undefined}
         disabled={busy === d.key}
         onClick={(e) => {
           e.stopPropagation();
+          if (inert) return;
           if (extraOnClick) extraOnClick();
           else void apply(d);
         }}
-        className={cn(BTN, active ? ACTIVE[d.tone] : IDLE[d.tone])}
+        className={cn(BTN, active ? ACTIVE[d.tone] : IDLE[d.tone], inert && 'cursor-default')}
       >
         <Icon className="h-4 w-4" />
       </button>

package/src/components/collection/ReviewDrawer.tsx

@@ -46,6 +46,7 @@ import { declaredBlob, isVersionNumber, readData, writeData } from './data';
 import { parseSources } from './drafts';
 import {
   activeDecisionKey,
+  isDecisionInForce,
   resolveReviewConfig,
   reviewDecisions,
   shouldIgnoreShortcut,
@@ -92,6 +93,16 @@ export interface ReviewDrawerProps {
    * see the decision that was just made.
    */
   renderExtra?: (record: EntityRecord, type: EntityTypeDef) => ReactNode;
+  /**
+   * False for a reader who cannot change this record (bd startsim-m7fdm.32).
+   * The record, its sources, its note and prev/next stay; the State select,
+   * "Edit fields", the decisions, "Add note" and their shortcuts are not drawn,
+   * so a view-only reader is not offered a control that can only end in
+   * "Could not save.". A control the person cannot use is hidden, not greyed
+   * out. The host decides it per record (a share on the record answers).
+   * Defaults to true.
+   */
+  canEdit?: boolean;
 }
 
 export function ReviewDrawer(props: ReviewDrawerProps) {
@@ -111,6 +122,7 @@ function ReviewDrawerInner({
   sourceTierByHost,
   renderEditFields,
   renderExtra,
+  canEdit = true,
 }: ReviewDrawerProps & { record: EntityRecord }) {
   const cfg = useMemo(() => resolveReviewConfig(type, config), [type, config]);
   const decisions = useMemo(() => reviewDecisions(cfg), [cfg]);
@@ -206,6 +218,13 @@ function ReviewDrawerInner({
 
   /** One decision → write status AND verdict together (the coherent pair). */
   function applyDecision(d: ReviewDecision) {
+    // Restating the decision in force writes nothing (bd startsim-3c7h8) — the
+    // button and its shortcut both land here. It still walks the queue, so
+    // `a` over already-approved work keeps moving the reviewer on.
+    if (isDecisionInForce(d, activeKey)) {
+      if (d.advance && next) onNavigate(next);
+      return;
+    }
     const changes: Record<string, unknown> = {};
     if (d.status) changes[cfg.statusName] = d.status;
     if (d.verdict) changes[cfg.verdictAttr] = d.verdict;
@@ -229,7 +248,7 @@ function ReviewDrawerInner({
     if (mode !== 'review') return;
     function onKey(e: KeyboardEvent) {
       if (shouldIgnoreShortcut(e)) return;
-      const d = decisions.find((x) => x.shortcut === e.key);
+      const d = canEdit ? decisions.find((x) => x.shortcut === e.key) : undefined;
       if (d) {
         e.preventDefault();
         applyDecision(d);
@@ -244,16 +263,20 @@ function ReviewDrawerInner({
         case 'ArrowUp':
           if (prev) { e.preventDefault(); onNavigate(prev); }
           break;
-        case 'e': e.preventDefault(); setMode('edit'); break;
+        case 'e':
+          if (canEdit) { e.preventDefault(); setMode('edit'); }
+          break;
         case 'Escape': e.preventDefault(); onClose(); break;
       }
     }
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, prev, next, decisions, data]);
+  }, [mode, prev, next, decisions, data, canEdit]);
 
-  const legend = [...decisions.map((d) => `${d.shortcut} ${d.label.toLowerCase()}`), 'e edit', 'j/k move'].join(' · ');
+  const legend = canEdit
+    ? [...decisions.map((d) => `${d.shortcut} ${d.label.toLowerCase()}`), 'e edit', 'j/k move'].join(' · ')
+    : 'j/k move';
 
   return (
     <div className="fixed inset-0 z-50 flex justify-end" role="dialog" aria-modal="true">
@@ -270,7 +293,13 @@ function ReviewDrawerInner({
           </div>
           <div className="flex shrink-0 items-center gap-1">
             {/* Current state — and the rare manual override (mark written, un-reject). */}
-            {cfg.statusChoices.length > 0 ? (
+            {!canEdit ? (
+              status ? (
+                <span className="rounded-full bg-muted px-2 py-0.5 text-xs capitalize text-muted-foreground">
+                  {status.replace(/_/g, ' ')}
+                </span>
+              ) : null
+            ) : cfg.statusChoices.length > 0 ? (
               <Select value={status || undefined} onValueChange={overrideStatus}>
                 <SelectTrigger className="h-7 w-auto gap-1 border-border text-xs capitalize">
                   <SelectValue placeholder="State…" />
@@ -302,13 +331,15 @@ function ReviewDrawerInner({
             >
               <ChevronRight className="h-4 w-4" />
             </button>
-            <button
-              onClick={() => setMode((m) => (m === 'review' ? 'edit' : 'review'))}
-              className="ml-1 rounded border border-border px-2.5 py-1 text-xs hover:bg-muted"
-              title="Edit fields (e)"
-            >
-              {mode === 'review' ? 'Edit fields' : 'Review'}
-            </button>
+            {canEdit ? (
+              <button
+                onClick={() => setMode((m) => (m === 'review' ? 'edit' : 'review'))}
+                className="ml-1 rounded border border-border px-2.5 py-1 text-xs hover:bg-muted"
+                title="Edit fields (e)"
+              >
+                {mode === 'review' ? 'Edit fields' : 'Review'}
+              </button>
+            ) : null}
             <button
               onClick={onClose}
               className="rounded p-1 text-muted-foreground hover:bg-muted"
@@ -319,7 +350,7 @@ function ReviewDrawerInner({
           </div>
         </header>
 
-        {mode === 'edit' ? (
+        {mode === 'edit' && canEdit ? (
           <div className="flex-1 overflow-y-auto px-4 py-4">
             {renderEditFields ? (
               renderEditFields({
@@ -374,7 +405,7 @@ function ReviewDrawerInner({
             </div>
 
             <footer className="space-y-3 border-t border-border px-4 py-3">
-              {decisions.length > 0 ? (
+              {canEdit && decisions.length > 0 ? (
                 <div className="flex items-stretch gap-2">
                   {decisions.map((d) => (
                     <DecisionButton
@@ -389,20 +420,24 @@ function ReviewDrawerInner({
               ) : null}
 
               <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setNoteOpen((o) => !o)}
-                  className={cn(
-                    'inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs hover:bg-muted',
-                    note && 'text-primary',
-                  )}
-                >
-                  <MessageSquarePlus className="h-3.5 w-3.5" />
-                  {note ? 'Note ✓' : 'Add note'}
-                </button>
+                {canEdit ? (
+                  <button
+                    onClick={() => setNoteOpen((o) => !o)}
+                    className={cn(
+                      'inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs hover:bg-muted',
+                      note && 'text-primary',
+                    )}
+                  >
+                    <MessageSquarePlus className="h-3.5 w-3.5" />
+                    {note ? 'Note ✓' : 'Add note'}
+                  </button>
+                ) : (
+                  <span className="text-xs text-muted-foreground">You can view this {type.label.toLowerCase()}.</span>
+                )}
                 <span className="ml-auto text-[11px] text-muted-foreground">{legend}</span>
               </div>
 
-              {noteOpen ? (
+              {noteOpen && canEdit ? (
                 <div className="space-y-2">
                   <Textarea
                     value={note}
@@ -467,6 +502,7 @@ function DecisionButton({
       type="button"
       onClick={onClick}
       disabled={busy}
+      aria-disabled={(active && !decision.promptNote) || undefined}
       title={`${decision.label} (${decision.shortcut})`}
       className={cn(
         'flex flex-1 flex-col items-center justify-center gap-0.5 rounded-md border px-3 py-2 text-sm font-medium transition disabled:opacity-60',

package/src/components/collection/__tests__/active-decision-inert.test.tsx

@@ -0,0 +1,155 @@
+/**
+ * The decision already in force is inert (bd startsim-3c7h8, startsim-tpz67,
+ * startsim-nyqbw).
+ *
+ * A lit Approve means the topic is `ready` or past it (`written`). Clicking it
+ * again used to write `status: ready` over a `written` topic, which moved it
+ * backwards and made the host treat the save as a fresh approval: it navigated
+ * to the story page and dispatched a writer the server then refused
+ * (drafts_exist). Clicking or pressing the decision that is already in force
+ * must write nothing.
+ */
+import * as React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { InlineReviewActions } from '../InlineReviewActions';
+import { ReviewDrawer } from '../ReviewDrawer';
+import type { CollectionClient, EntityRecord, EntityTypeDef, Paginated } from '../types';
+
+const TOPIC_TYPE: EntityTypeDef = {
+  id: 1,
+  key: 'topic',
+  label: 'Topic',
+  attributes: [
+    {
+      id: 'status',
+      name: 'status',
+      dataType: 'enum',
+      required: false,
+      config: { choices: ['suggested', 'ready', 'written', 'rejected'] },
+    },
+    { id: 'title', name: 'title', dataType: 'text', required: false, config: {} },
+    { id: 'team_verdict', name: 'team_verdict', dataType: 'text', required: false, config: {} },
+  ],
+};
+
+function topic(id: number, status: string): EntityRecord {
+  return {
+    id,
+    entityType: 'topic',
+    externalId: null,
+    name: `Topic ${id}`,
+    data: { title: `Topic ${id}`, status, team_verdict: 'good' },
+    createdAt: '2026-09-01T00:00:00Z',
+  };
+}
+
+function page<T>(results: T[]): Paginated<T> {
+  return { count: results.length, next: null, previous: null, results };
+}
+
+function stubClient(): CollectionClient & { updateEntity: jest.Mock } {
+  const updateEntity = jest.fn(async (id: number | string, input: { data?: Record<string, unknown> }) => ({
+    ...topic(Number(id), 'x'),
+    data: input.data ?? {},
+  }));
+  return {
+    listTypes: jest.fn(async () => page([TOPIC_TYPE])),
+    listAllEntities: jest.fn(async () => []),
+    updateEntity,
+  } as CollectionClient & { updateEntity: jest.Mock };
+}
+
+describe('InlineReviewActions: the lit decision writes nothing', () => {
+  it.each(['written', 'ready'])('clicking the lit Approve on a %s topic does not save', async (status) => {
+    const user = userEvent.setup();
+    const client = stubClient();
+    const onSaved = jest.fn();
+    render(<InlineReviewActions client={client} type={TOPIC_TYPE} record={topic(1, status)} onSaved={onSaved} />);
+
+    const approve = screen.getByRole('button', { name: /Approve/ });
+    expect(approve).toHaveAttribute('aria-pressed', 'true');
+    expect(approve).toHaveAttribute('aria-disabled', 'true');
+
+    await user.click(approve);
+
+    expect(client.updateEntity).not.toHaveBeenCalled();
+    expect(onSaved).not.toHaveBeenCalled();
+  });
+
+  it('a decision that is NOT in force still saves', async () => {
+    const user = userEvent.setup();
+    const client = stubClient();
+    render(<InlineReviewActions client={client} type={TOPIC_TYPE} record={topic(1, 'written')} />);
+
+    await user.click(screen.getByRole('button', { name: /Reject/ }));
+
+    await waitFor(() => expect(client.updateEntity).toHaveBeenCalledTimes(1));
+    expect(client.updateEntity.mock.calls[0][1].data).toMatchObject({ status: 'rejected' });
+  });
+
+  it('Approve on a suggested topic still saves ready', async () => {
+    const user = userEvent.setup();
+    const client = stubClient();
+    render(<InlineReviewActions client={client} type={TOPIC_TYPE} record={topic(1, 'suggested')} />);
+
+    const approve = screen.getByRole('button', { name: /Approve/ });
+    expect(approve).toHaveAttribute('aria-pressed', 'false');
+    await user.click(approve);
+
+    await waitFor(() => expect(client.updateEntity).toHaveBeenCalledTimes(1));
+    expect(client.updateEntity.mock.calls[0][1].data).toMatchObject({ status: 'ready' });
+  });
+});
+
+describe('ReviewDrawer: the decision in force writes nothing', () => {
+  function renderDrawer(status: string) {
+    const client = stubClient();
+    const onNavigate = jest.fn();
+    const onSaved = jest.fn();
+    const first = topic(1, status);
+    render(
+      <ReviewDrawer
+        client={client}
+        type={TOPIC_TYPE}
+        records={[first, topic(2, 'suggested')]}
+        record={first}
+        onClose={jest.fn()}
+        onNavigate={onNavigate}
+        onSaved={onSaved}
+      />,
+    );
+    return { client, onNavigate, onSaved };
+  }
+
+  it('clicking Approve on a written topic does not save, and still walks the queue', async () => {
+    const user = userEvent.setup();
+    const { client, onSaved, onNavigate } = renderDrawer('written');
+
+    await user.click(screen.getByRole('button', { name: /Approve/ }));
+
+    expect(client.updateEntity).not.toHaveBeenCalled();
+    expect(onSaved).not.toHaveBeenCalled();
+    expect(onNavigate).toHaveBeenCalledTimes(1);
+    expect(onNavigate.mock.calls[0][0].id).toBe(2);
+  });
+
+  it('the bare-key shortcut for the decision in force does not save either', async () => {
+    const user = userEvent.setup();
+    const { client } = renderDrawer('written');
+
+    await user.keyboard('a');
+
+    expect(client.updateEntity).not.toHaveBeenCalled();
+  });
+
+  it('a different decision from the drawer still saves', async () => {
+    const user = userEvent.setup();
+    const { client } = renderDrawer('written');
+
+    await user.click(screen.getByRole('button', { name: /Reject/ }));
+
+    await waitFor(() => expect(client.updateEntity).toHaveBeenCalledTimes(1));
+  });
+});

package/src/components/collection/__tests__/review-drawer-reader.test.tsx

@@ -0,0 +1,119 @@
+/**
+ * A reader who cannot change the record is not offered controls that can only
+ * end in "Could not save." (bd startsim-m7fdm.32, review bead startsim-j9agp).
+ *
+ * Before this, the drawer drew the State select, "Edit fields", Approve /
+ * Needs work / Reject and "Add note" for everyone, and a view-only reader
+ * learned the truth from an error toast after pressing one. The host now says
+ * per record whether it may be changed, and the drawer draws accordingly.
+ */
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { ReviewDrawer } from '../ReviewDrawer';
+import type { CollectionClient, EntityRecord, EntityTypeDef, Paginated } from '../types';
+
+const TOPIC_TYPE: EntityTypeDef = {
+  id: 1,
+  key: 'topic',
+  label: 'Topic',
+  attributes: [
+    {
+      id: 'status',
+      name: 'status',
+      dataType: 'enum',
+      required: false,
+      config: { choices: ['suggested', 'ready', 'written', 'rejected'] },
+    },
+    { id: 'title', name: 'title', dataType: 'text', required: false, config: {} },
+    { id: 'team_notes', name: 'team_notes', dataType: 'text', required: false, config: {} },
+  ],
+};
+
+function topic(id: number, title: string, note = ''): EntityRecord {
+  return {
+    id,
+    entityType: 'topic',
+    externalId: null,
+    name: title,
+    data: { title, status: 'suggested', ...(note ? { team_notes: note } : {}) },
+    createdAt: '2026-09-01T00:00:00Z',
+  };
+}
+
+function page<T>(results: T[]): Paginated<T> {
+  return { count: results.length, next: null, previous: null, results };
+}
+
+function stubClient(): CollectionClient & { updateEntity: jest.Mock } {
+  const updateEntity = jest.fn(async () => topic(1, 'x'));
+  return {
+    listTypes: jest.fn(async () => page([TOPIC_TYPE])),
+    listAllEntities: jest.fn(async () => []),
+    updateEntity,
+  } as CollectionClient & { updateEntity: jest.Mock };
+}
+
+function renderDrawer(canEdit: boolean | undefined, record = topic(1, 'Oman customs')) {
+  const client = stubClient();
+  const onNavigate = jest.fn();
+  const records = [record, topic(2, 'Bahrain filing')];
+  render(
+    <ReviewDrawer
+      client={client}
+      type={TOPIC_TYPE}
+      records={records}
+      record={record}
+      onClose={() => {}}
+      onNavigate={onNavigate}
+      renderEditFields={() => <div>FIELD EDITOR</div>}
+      {...(canEdit === undefined ? {} : { canEdit })}
+    />,
+  );
+  return { client, onNavigate };
+}
+
+describe('ReviewDrawer for a view-only reader', () => {
+  it('draws no State select, Edit fields, decisions or Add note', () => {
+    renderDrawer(false);
+
+    expect(screen.getByText('Oman customs')).toBeInTheDocument();
+    expect(screen.queryByRole('combobox')).toBeNull();
+    expect(screen.queryByRole('button', { name: /edit fields/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /approve/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /reject/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /needs work/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /add note/i })).toBeNull();
+    expect(screen.getByText('You can view this topic.')).toBeInTheDocument();
+  });
+
+  it('still shows where the record stands, and its note', () => {
+    renderDrawer(false, topic(1, 'Oman customs', 'Angle too broad.'));
+
+    expect(screen.getByText('suggested')).toBeInTheDocument();
+    expect(screen.getByText('Angle too broad.')).toBeInTheDocument();
+  });
+
+  it('ignores the decision and edit shortcuts, and still walks the queue', () => {
+    const { client, onNavigate } = renderDrawer(false);
+
+    fireEvent.keyDown(window, { key: 'a' });
+    fireEvent.keyDown(window, { key: 'x' });
+    fireEvent.keyDown(window, { key: 'e' });
+    expect(client.updateEntity).not.toHaveBeenCalled();
+    expect(screen.queryByText('FIELD EDITOR')).toBeNull();
+
+    fireEvent.keyDown(window, { key: 'j' });
+    expect(onNavigate).toHaveBeenCalledWith(expect.objectContaining({ id: 2 }));
+  });
+
+  it('an editor still gets every control (the default)', () => {
+    renderDrawer(undefined);
+
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /edit fields/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /approve/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add note/i })).toBeInTheDocument();
+    expect(screen.queryByText('You can view this topic.')).toBeNull();
+  });
+});

package/src/components/collection/index.ts

@@ -14,6 +14,7 @@ export {
   deriveReviewTransitions,
   reviewDecisions,
   activeDecisionKey,
+  isDecisionInForce,
   isTerminalStatus,
   decisionLabel,
   DEFAULT_DECISION_LABELS,

package/src/components/collection/review.ts

@@ -475,6 +475,20 @@ export function activeDecisionKey(
   return null;
 }
 
+/**
+ * True when clicking `d` would only restate the decision already in force, so
+ * the click must write nothing (bd startsim-3c7h8). A lit Approve on a
+ * `written` topic used to write `status: ready` over it: the topic went
+ * backwards and the host read the save as a fresh approval, navigating to a
+ * story page that claimed a writer was running when the server had refused one.
+ *
+ * A note-prompting decision is never inert: re-opening it is how a reviewer
+ * edits the note that came with it.
+ */
+export function isDecisionInForce(d: ReviewDecision, activeKey: string | null): boolean {
+  return !d.promptNote && activeKey != null && d.key === activeKey;
+}
+
 // ---- 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). */