Refactor modal layer, remove dead code, and fix review findings

Quality cleanup stacked on the persisted-draft work, deferred out of that PR.

Modal layer:
- Add ModalShell, ConfirmDialog, useSubmitGuard, and parseLanguageTags and use them across the six project modals: shared overlay/dialog/title chrome, WipeConfirm and DiscardDraftConfirm collapsed into ConfirmDialog, and the duplicated comma-separated language parsing and double-submit guards unified.

Dead code:
- Remove the never-dispatched setAnalysis reducer and the unused selectPhraseAnalysisById selector (and their tests); drop needless exports on ProjectMetadataModalProps, ARC_CORNER_RADIUS, and RECENTER_FADE_EASING.

Correctness:
- isPhraseAnalysisLink rejects an empty tokens array (fail-safe at the load gate); resolveApprovedAnalysis uses findLast so it mutates the same approved link the read selectors surface under duplicate-link corruption.

Tailwind:
- Extract modal-actions, modal-form-label, and modal-error-box utilities for the repeated footer-row, form-label, and destructive-box class strings across the modals, and reuse the existing section-label utility in SegmentView instead of re-listing its classes. No unused custom utilities found.

Docs/simplification:
- Correct useGlossDispatch, ActiveProject (updateAnalysis), and firstIndex JSDoc; hoist ScriptureNavControls string keys to a module const; hoist the duplicated verseKey(liveScrRef) in InterlinearNavContext; extract closeCurrentVerse in usjBookExtractor.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: alex-rawlings-yyc

src/__tests__/store/analysisSlice.test.ts

@@ -15,17 +15,14 @@ import { makePhraseLink } from '../test-helpers';
 import { emptyAnalysis } from '../../types/empty-factories';
 import {
   createPhrase,
-  defaultState,
   deleteMorphemes,
   deletePhrase,
   mergePhrases,
   selectApprovedGloss,
   selectApprovedMorphemes,
   selectPhraseLinkByTokenRef,
-  selectPhraseAnalysisById,
   selectPhraseGloss,
   selectPhraseLinks,
-  setAnalysis,
   selectSegmentFreeTranslation,
   updatePhrase,
   writeGloss,
@@ -63,23 +60,6 @@ function makeAnalysis(ta: TokenAnalysis): TextAnalysis {
   };
 }
 
-describe('setAnalysis', () => {
-  it('replaces the full analysis in state', () => {
-    const store = createAnalysisStore();
-    const next = makeAnalysis({ id: 'ta-1', surfaceText: 'word', gloss: { und: 'hi' } });
-
-    store.dispatch(setAnalysis(next));
-
-    expect(store.getState().analysis.analysis).toStrictEqual(next);
-  });
-
-  it('does not mutate analysisLanguage', () => {
-    const store = createAnalysisStore({ analysis: { ...defaultState, analysisLanguage: 'fr' } });
-    store.dispatch(setAnalysis(emptyAnalysis()));
-    expect(store.getState().analysis.analysisLanguage).toBe('fr');
-  });
-});
-
 describe('writeGloss', () => {
   it('removes an orphaned approved link and creates a fresh one', () => {
     // Orphaned state: an approved link whose analysisId has no matching TokenAnalysis.
@@ -564,27 +544,6 @@ describe('selectPhraseLinkByTokenRef', () => {
   });
 });
 
-describe('selectPhraseAnalysisById', () => {
-  it('returns the PhraseAnalysis for a known id', () => {
-    const link = makePhraseLink('phrase-1', ['tok-a']);
-    const store = createAnalysisStore({
-      analysis: { analysis: makeAnalysisWithPhrase(link), analysisLanguage: 'und' },
-    });
-
-    const result = selectPhraseAnalysisById(store.getState().analysis, 'phrase-1');
-
-    expect(result?.id).toBe('phrase-1');
-  });
-
-  it('returns undefined for an unknown id', () => {
-    const store = createAnalysisStore();
-
-    const result = selectPhraseAnalysisById(store.getState().analysis, 'nonexistent');
-
-    expect(result).toBeUndefined();
-  });
-});
-
 describe('writePhraseGloss', () => {
   it('writes the gloss for the active language on a phrase', () => {
     const link = makePhraseLink('phrase-1', ['tok-a']);

src/components/AnalysisStore.tsx

@@ -273,9 +273,9 @@ export function useAnalysis(): TextAnalysis {
 }
 
 /**
- * Returns the stable `onGlossChange` callback from the nearest {@link AnalysisStoreProvider}. The
- * callback creates or updates the approved `TokenAnalysis` for the token on each call, then
- * synchronously invokes `onSave` and the `onGlossChange` spy.
+ * Returns a stable callback that creates or updates the approved `TokenAnalysis` for a token, then
+ * synchronously invokes `onSave` and the optional `onGlossChange` spy. The `onGlossChange` spy is
+ * test-only observability and has no effect on store behavior (see {@link AnalysisStoreProvider}).
  *
  * @returns A function `(tokenRef, surfaceText, value) => void`.
  * @throws When called outside an {@link AnalysisStoreProvider}.

src/components/InterlinearNavContext.tsx

@@ -318,6 +318,9 @@ export function InterlinearNavProvider({
   /** Handle of the in-flight fade-in→idle timer, or `undefined` when none is pending. */
   const fadeInTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
+  /** Verse key of the live ref, computed once for the cross-book / mid-reveal render guards below. */
+  const liveKey = verseKey(liveScrRef);
+
   // Detect a cross-book navigation *during render* and start the fade-out synchronously, so the
   // curtain drops in the same commit the book ref changes — never a paint later (an effect-driven
   // fade-out would let the mounted views render one frame against the new book's ref before the
@@ -332,8 +335,8 @@ export function InterlinearNavProvider({
     setFadePhase('out');
   } else if (
     fadePhase === 'in' &&
-    verseKey(liveScrRef) !== verseKey(prevLiveScrRef) &&
-    !isInternalNavMarkerFresh(pendingInternalNavRef.current.get(verseKey(liveScrRef)))
+    liveKey !== verseKey(prevLiveScrRef) &&
+    !isInternalNavMarkerFresh(pendingInternalNavRef.current.get(liveKey))
   ) {
     // A follow-up external navigation landing mid-fade-in: the host resolves one picker selection
     // as two navigations (book change, then precise target), so the second routinely arrives while

src/components/SegmentView.tsx

@@ -175,11 +175,7 @@ export function SegmentView({
   // it stays a bare verse number (the chapter is carried by SegmentListView's inline header).
   const verseLabelText = chapterLabelInVerse ? `${chapter}:${verse}` : `${verse}`;
 
-  const segmentHeader = (
-    <span className="tw:mb-2 tw:block tw:text-xs tw:font-medium tw:text-muted-foreground tw:uppercase tw:tracking-wide">
-      {verseLabelText}
-    </span>
-  );
+  const segmentHeader = <span className="tw:section-label tw:mb-2 tw:block">{verseLabelText}</span>;
 
   /**
    * `false` until just after the first paint, then `true`. Gates the link-slot fade transition: the

src/components/controls/ScriptureNavControls.tsx

@@ -1,5 +1,4 @@
 import { useLocalizedStrings, useRecentScriptureRefs } from '@papi/frontend/react';
-import { useMemo } from 'react';
 import {
   BOOK_CHAPTER_CONTROL_STRING_KEYS,
   BookChapterControl,
@@ -11,6 +10,13 @@ import {
 /** Fixed set of scroll-group IDs offered in the selector; `undefined` means "unlinked". */
 const AVAILABLE_SCROLL_GROUPS = [undefined, 0, 1, 2, 3, 4];
 
+/**
+ * Localized string keys for {@link BookChapterControl}, hoisted to module scope so the array
+ * reference passed to `useLocalizedStrings` is stable across renders (a fresh array each render
+ * would make the hook re-fetch every render). Mirrors the `STRING_KEYS` pattern in the views.
+ */
+const STRING_KEYS = [...BOOK_CHAPTER_CONTROL_STRING_KEYS];
+
 /**
  * Props for {@link ScriptureNavControls}. Combines the scripture-reference fields from
  * `BookChapterControlProps` with the scroll-group fields from `ScrollGroupSelectorProps`.
@@ -35,9 +41,7 @@ export default function ScriptureNavControls({
   scrollGroupId,
   onChangeScrollGroupId,
 }: ScriptureNavControlsProps) {
-  const [localizedStrings] = useLocalizedStrings(
-    useMemo(() => [...BOOK_CHAPTER_CONTROL_STRING_KEYS], []),
-  );
+  const [localizedStrings] = useLocalizedStrings(STRING_KEYS);
   const { recentScriptureRefs: recentRefs, addRecentScriptureRef: onAddRecentRef } =
     useRecentScriptureRefs();
 

src/components/modals/ConfirmDialog.tsx

@@ -0,0 +1,63 @@
+/** @file Shared confirm/cancel dialog for destructive or discard confirmations. */
+import { Button } from 'platform-bible-react';
+import { ModalShell } from './ModalShell';
+
+/**
+ * A small modal asking the user to confirm or cancel a single action (a destructive wipe, a discard
+ * of unsaved work, etc.). Presentational: it renders the shared {@link ModalShell} chrome with a
+ * body paragraph and a secondary Cancel / destructive Confirm pair, and delegates the decision to
+ * the caller via {@link onConfirm} / {@link onCancel}.
+ *
+ * @param props - Component props
+ * @param props.titleId - DOM id wired to the dialog's `aria-labelledby` and title.
+ * @param props.title - Localized title text.
+ * @param props.body - Localized body text explaining the consequence.
+ * @param props.confirmLabel - Localized label for the destructive confirm button.
+ * @param props.cancelLabel - Localized label for the secondary cancel button.
+ * @param props.confirmTestId - `data-testid` placed on the confirm button so tests can target it.
+ * @param props.isSubmitting - When `true`, both buttons are disabled to prevent interaction while
+ *   the caller is processing the confirmed action.
+ * @param props.onConfirm - Called when the user confirms the action.
+ * @param props.onCancel - Called when the user backs out, leaving state untouched.
+ * @returns The confirmation overlay.
+ */
+export function ConfirmDialog({
+  titleId,
+  title,
+  body,
+  confirmLabel,
+  cancelLabel,
+  confirmTestId,
+  isSubmitting = false,
+  onConfirm,
+  onCancel,
+}: Readonly<{
+  titleId: string;
+  title: string;
+  body: string;
+  confirmLabel: string;
+  cancelLabel: string;
+  confirmTestId: string;
+  isSubmitting?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}>) {
+  return (
+    <ModalShell titleId={titleId} title={title} width="tw:w-96">
+      <p className="tw:text-sm tw:mb-4">{body}</p>
+      <div className="tw:modal-actions">
+        <Button variant="secondary" onClick={onCancel} disabled={isSubmitting}>
+          {cancelLabel}
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={onConfirm}
+          data-testid={confirmTestId}
+          disabled={isSubmitting}
+        >
+          {confirmLabel}
+        </Button>
+      </div>
+    </ModalShell>
+  );
+}

src/components/modals/CreateProjectModal.tsx

@@ -1,6 +1,8 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { Button } from 'platform-bible-react';
 import { useState, useCallback } from 'react';
+import { parseLanguageTags } from '../../utils/language-tags';
+import { ModalShell } from './ModalShell';
 
 /** Localized string keys used by {@link CreateProjectModal}. */
 const CREATE_PROJECT_MODAL_STRING_KEYS: `%${string}%`[] = [
@@ -68,10 +70,7 @@ export function CreateProjectModal({
    * {@link onCreateDraft}.
    */
   const handleSubmit = useCallback(() => {
-    const parsedLanguages = analysisLanguages
-      .split(',')
-      .map((t) => t.trim())
-      .filter((t) => t.length > 0);
+    const parsedLanguages = parseLanguageTags(analysisLanguages);
     const normalizedAnalysisLanguages = parsedLanguages.length > 0 ? parsedLanguages : ['und'];
     onCreateDraft({
       analysisLanguages: normalizedAnalysisLanguages,
@@ -83,56 +82,50 @@ export function CreateProjectModal({
   /* v8 ignore next */ if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:modal-overlay">
-      <dialog
-        aria-labelledby="create-project-modal-title"
-        aria-modal="true"
-        className="tw:modal-dialog tw:rounded tw:w-96"
-        open
-      >
-        <h2 id="create-project-modal-title" className="tw:modal-title">
-          {localizedStrings['%interlinearizer_modal_create_title%']}
-        </h2>
-        <label className="tw:block tw:text-sm tw:mb-1" htmlFor="project-name">
-          {localizedStrings['%interlinearizer_modal_create_name_label%']}
-        </label>
-        <input
-          id="project-name"
-          className="tw:modal-form-input tw:mb-3"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
-        />
-        <label className="tw:block tw:text-sm tw:mb-1" htmlFor="project-description">
-          {localizedStrings['%interlinearizer_modal_create_description_label%']}
-        </label>
-        <textarea
-          id="project-description"
-          className="tw:modal-form-input tw:mb-3 tw:resize-none"
-          rows={2}
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          placeholder={localizedStrings['%interlinearizer_modal_create_description_placeholder%']}
-        />
-        <label className="tw:block tw:text-sm tw:mb-1" htmlFor="analysis-language">
-          {localizedStrings['%interlinearizer_modal_create_language_label%']}
-        </label>
-        <input
-          id="analysis-language"
-          className="tw:modal-form-input tw:mb-4"
-          value={analysisLanguages}
-          onChange={(e) => setAnalysisLanguages(e.target.value)}
-          placeholder={localizedStrings['%interlinearizer_modal_create_language_placeholder%']}
-        />
-        <div className="tw:flex tw:gap-2 tw:justify-end">
-          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
-            {localizedStrings['%interlinearizer_modal_create_cancel%']}
-          </Button>
-          <Button onClick={handleSubmit} disabled={isSubmitting}>
-            {localizedStrings['%interlinearizer_modal_create_submit%']}
-          </Button>
-        </div>
-      </dialog>
-    </div>
+    <ModalShell
+      titleId="create-project-modal-title"
+      title={localizedStrings['%interlinearizer_modal_create_title%']}
+      width="tw:w-96"
+    >
+      <label className="tw:modal-form-label" htmlFor="project-name">
+        {localizedStrings['%interlinearizer_modal_create_name_label%']}
+      </label>
+      <input
+        id="project-name"
+        className="tw:modal-form-input tw:mb-3"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
+      />
+      <label className="tw:modal-form-label" htmlFor="project-description">
+        {localizedStrings['%interlinearizer_modal_create_description_label%']}
+      </label>
+      <textarea
+        id="project-description"
+        className="tw:modal-form-input tw:mb-3 tw:resize-none"
+        rows={2}
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        placeholder={localizedStrings['%interlinearizer_modal_create_description_placeholder%']}
+      />
+      <label className="tw:modal-form-label" htmlFor="analysis-language">
+        {localizedStrings['%interlinearizer_modal_create_language_label%']}
+      </label>
+      <input
+        id="analysis-language"
+        className="tw:modal-form-input tw:mb-4"
+        value={analysisLanguages}
+        onChange={(e) => setAnalysisLanguages(e.target.value)}
+        placeholder={localizedStrings['%interlinearizer_modal_create_language_placeholder%']}
+      />
+      <div className="tw:modal-actions">
+        <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
+          {localizedStrings['%interlinearizer_modal_create_cancel%']}
+        </Button>
+        <Button onClick={handleSubmit} disabled={isSubmitting}>
+          {localizedStrings['%interlinearizer_modal_create_submit%']}
+        </Button>
+      </div>
+    </ModalShell>
   );
 }

src/components/modals/DiscardDraftConfirm.tsx

@@ -1,5 +1,5 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { Button } from 'platform-bible-react';
+import { ConfirmDialog } from './ConfirmDialog';
 
 /** Localized string keys used by {@link DiscardDraftConfirm}. */
 const DISCARD_DRAFT_CONFIRM_STRING_KEYS: `%${string}%`[] = [
@@ -35,33 +35,16 @@ export function DiscardDraftConfirm({
   /* v8 ignore next */ if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:modal-overlay">
-      <dialog
-        aria-labelledby="discard-draft-modal-title"
-        aria-modal="true"
-        className="tw:modal-dialog tw:rounded tw:w-96"
-        open
-      >
-        <h2 id="discard-draft-modal-title" className="tw:modal-title">
-          {localizedStrings['%interlinearizer_confirm_discard_title%']}
-        </h2>
-        <p className="tw:text-sm tw:mb-4">
-          {localizedStrings['%interlinearizer_confirm_discard_body%']}
-        </p>
-        <div className="tw:flex tw:gap-2 tw:justify-end">
-          <Button disabled={isSubmitting} onClick={onCancel} variant="secondary">
-            {localizedStrings['%interlinearizer_confirm_discard_cancel%']}
-          </Button>
-          <Button
-            data-testid="discard-draft-confirm"
-            disabled={isSubmitting}
-            onClick={onConfirm}
-            variant="destructive"
-          >
-            {localizedStrings['%interlinearizer_confirm_discard_ok%']}
-          </Button>
-        </div>
-      </dialog>
-    </div>
+    <ConfirmDialog
+      titleId="discard-draft-modal-title"
+      title={localizedStrings['%interlinearizer_confirm_discard_title%']}
+      body={localizedStrings['%interlinearizer_confirm_discard_body%']}
+      confirmLabel={localizedStrings['%interlinearizer_confirm_discard_ok%']}
+      cancelLabel={localizedStrings['%interlinearizer_confirm_discard_cancel%']}
+      confirmTestId="discard-draft-confirm"
+      isSubmitting={isSubmitting}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+    />
   );
 }