Indicate active project better, improve pending edits system

Author: alex-rawlings-yyc

contributions/localizedStrings.json

@@ -72,6 +72,7 @@
       "%interlinearizer_modal_select_none%": "No interlinear projects exist for this source yet.",
       "%interlinearizer_modal_select_name_unnamed%": "Unnamed",
       "%interlinearizer_modal_select_info_button_label%": "Project info",
+      "%interlinearizer_modal_select_active_badge%": "Active",
       "%interlinearizer_modal_select_create_new%": "Create New",
       "%interlinearizer_modal_select_cancel%": "Cancel",
 

src/__tests__/components/AnalysisStore.test.tsx

@@ -21,6 +21,7 @@ import {
   usePhraseDispatch,
   usePhraseGloss,
   usePhraseGlossDispatch,
+  useReportGlossEditing,
 } from '../../components/AnalysisStore';
 
 // ---------------------------------------------------------------------------
@@ -1146,3 +1147,111 @@ describe('useMorphemeGlossDispatch', () => {
     );
   });
 });
+
+/**
+ * Reports its `isEditing` prop through {@link useReportGlossEditing}, used to drive the provider's
+ * pending-edits accounting from tests.
+ *
+ * @param props - Component props.
+ * @param props.isEditing - Whether this stand-in input currently holds uncommitted text.
+ * @returns An empty fragment; the component exists only for its hook side effect.
+ */
+function EditingReporter({ isEditing }: Readonly<{ isEditing: boolean }>) {
+  useReportGlossEditing(isEditing);
+  return undefined;
+}
+
+describe('useReportGlossEditing', () => {
+  it('reports true when the first input starts editing and false when it stops', () => {
+    const onPendingEditsChange = jest.fn();
+    const { rerender } = render(
+      <AnalysisStoreProvider analysisLanguage="und" onPendingEditsChange={onPendingEditsChange}>
+        <EditingReporter isEditing={false} />
+      </AnalysisStoreProvider>,
+    );
+    // No editor active yet: nothing reported.
+    expect(onPendingEditsChange).not.toHaveBeenCalled();
+
+    rerender(
+      <AnalysisStoreProvider analysisLanguage="und" onPendingEditsChange={onPendingEditsChange}>
+        <EditingReporter isEditing />
+      </AnalysisStoreProvider>,
+    );
+    expect(onPendingEditsChange).toHaveBeenLastCalledWith(true);
+
+    rerender(
+      <AnalysisStoreProvider analysisLanguage="und" onPendingEditsChange={onPendingEditsChange}>
+        <EditingReporter isEditing={false} />
+      </AnalysisStoreProvider>,
+    );
+    expect(onPendingEditsChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it('reports only the 0↔non-0 transitions when multiple inputs edit concurrently', () => {
+    const onPendingEditsChange = jest.fn();
+    const renderWith = (a: boolean, b: boolean) => (
+      <AnalysisStoreProvider analysisLanguage="und" onPendingEditsChange={onPendingEditsChange}>
+        <EditingReporter isEditing={a} />
+        <EditingReporter isEditing={b} />
+      </AnalysisStoreProvider>
+    );
+    const { rerender } = render(renderWith(false, false));
+    expect(onPendingEditsChange).not.toHaveBeenCalled();
+
+    rerender(renderWith(true, false));
+    expect(onPendingEditsChange).toHaveBeenCalledTimes(1);
+    expect(onPendingEditsChange).toHaveBeenLastCalledWith(true);
+
+    // Second input also starts editing: still pending, no new transition reported.
+    rerender(renderWith(true, true));
+    expect(onPendingEditsChange).toHaveBeenCalledTimes(1);
+
+    // First input stops: one editor remains, so still no transition.
+    rerender(renderWith(false, true));
+    expect(onPendingEditsChange).toHaveBeenCalledTimes(1);
+
+    // Last editor stops: now we cross back to zero.
+    rerender(renderWith(false, false));
+    expect(onPendingEditsChange).toHaveBeenCalledTimes(2);
+    expect(onPendingEditsChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it('reports false when an actively-editing input unmounts', () => {
+    const onPendingEditsChange = jest.fn();
+    const { rerender } = render(
+      <AnalysisStoreProvider analysisLanguage="und" onPendingEditsChange={onPendingEditsChange}>
+        <EditingReporter isEditing />
+      </AnalysisStoreProvider>,
+    );
+    expect(onPendingEditsChange).toHaveBeenLastCalledWith(true);
+
+    rerender(
+      <AnalysisStoreProvider analysisLanguage="und" onPendingEditsChange={onPendingEditsChange}>
+        <span />
+      </AnalysisStoreProvider>,
+    );
+    expect(onPendingEditsChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it('does not throw when no onPendingEditsChange is provided', () => {
+    const { rerender } = render(
+      <AnalysisStoreProvider analysisLanguage="und">
+        <EditingReporter isEditing={false} />
+      </AnalysisStoreProvider>,
+    );
+    expect(() =>
+      rerender(
+        <AnalysisStoreProvider analysisLanguage="und">
+          <EditingReporter isEditing />
+        </AnalysisStoreProvider>,
+      ),
+    ).not.toThrow();
+  });
+
+  it('throws when called outside an AnalysisStoreProvider', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<EditingReporter isEditing={false} />)).toThrow(
+      'useReportGlossEditing must be used inside an AnalysisStoreProvider',
+    );
+  });
+});

src/__tests__/components/InterlinearizerLoader.test.tsx

@@ -135,6 +135,7 @@ type CapturedInterlinearizerProps = {
   analysisLanguage: string;
   initialAnalysis?: TextAnalysis;
   onSaveAnalysis?: (analysis: TextAnalysis) => void;
+  onPendingEditsChange?: (pending: boolean) => void;
   phraseMode: PhraseMode;
   setPhraseMode: Dispatch<SetStateAction<PhraseMode>>;
   viewOptions: ViewOptions;
@@ -1013,6 +1014,28 @@ describe('InterlinearizerLoader', () => {
       expect(updateWebViewDefinition).toHaveBeenCalledWith({ title: 'Interlinearizer' });
     });
 
+    it('shows the tab unsaved marker for in-progress typing before the gloss commits', async () => {
+      let result: ReturnType<typeof renderLoader> | undefined;
+      await act(async () => {
+        result = renderLoader();
+      });
+      const updateWebViewDefinition = result?.updateWebViewDefinition;
+
+      // A gloss input begins holding uncommitted text: the marker appears even though no gloss has
+      // been written (the persisted draft is still clean).
+      act(() => {
+        capturedInterlinearizerProps?.onPendingEditsChange?.(true);
+      });
+      expect(updateWebViewDefinition).toHaveBeenCalledWith({ title: 'Interlinearizer ●' });
+
+      // The edit is reverted or the input unmounts with nothing committed: the marker clears.
+      updateWebViewDefinition?.mockClear();
+      act(() => {
+        capturedInterlinearizerProps?.onPendingEditsChange?.(false);
+      });
+      expect(updateWebViewDefinition).toHaveBeenCalledWith({ title: 'Interlinearizer' });
+    });
+
     it('logs an error when the saveAnalysis command rejects during Save', async () => {
       await act(async () =>
         renderLoader({ useWebViewState: makeWebViewState({ activeProject: STUB_ACTIVE_PROJECT }) }),
@@ -1094,7 +1117,8 @@ describe('InterlinearizerLoader', () => {
         return typeof json === 'string' ? JSON.parse(json) : undefined;
       })();
       expect(wiped?.analysis).toEqual(emptyAnalysis());
-      expect(wiped?.dirty).toBe(true);
+      // Wiping the whole draft is treated as a clean baseline, so it persists not-dirty.
+      expect(wiped?.dirty).toBe(false);
       expect(screen.queryByTestId('wipe-confirm')).not.toBeInTheDocument();
     });
 

src/__tests__/components/PhraseBox.test.tsx

@@ -45,6 +45,7 @@ jest.mock('../../components/AnalysisStore', () => ({
   usePhraseDispatch: () => mockUsePhraseDispatch(),
   usePhraseGloss: (...args: Parameters<typeof mockUsePhraseGloss>) => mockUsePhraseGloss(...args),
   usePhraseGlossDispatch: () => mockUsePhraseGlossDispatch(),
+  useReportGlossEditing: () => {},
 }));
 
 jest.mock('../../components/TokenChip', () => {

src/__tests__/components/modals/SelectInterlinearProjectModal.test.tsx

@@ -18,6 +18,7 @@ const LOCALIZED: Record<string, string> = {
   '%interlinearizer_modal_select_cancel%': 'Cancel',
   '%interlinearizer_modal_select_name_unnamed%': 'Unnamed',
   '%interlinearizer_modal_select_info_button_label%': 'Project info',
+  '%interlinearizer_modal_select_active_badge%': 'Active',
 };
 
 const STUB_PROJECT: InterlinearProjectSummary = {
@@ -72,6 +73,28 @@ describe('SelectInterlinearProjectModal', () => {
     expect(screen.getByText('Unnamed')).toBeInTheDocument();
   });
 
+  it('badges the active project and marks its row aria-current', async () => {
+    mockSendCommand.mockResolvedValue(JSON.stringify([STUB_PROJECT, STUB_PROJECT_2]));
+    render(<SelectInterlinearProjectModal {...defaultProps} activeProjectId={STUB_PROJECT_2.id} />);
+    await waitFor(() => expect(screen.getByText('French glosses')).toBeInTheDocument());
+
+    expect(screen.getByText('Active')).toBeInTheDocument();
+    // The active badge appears on the active project's row, not the other one.
+    expect(screen.getByRole('button', { name: /french glosses/i })).toHaveAttribute(
+      'aria-current',
+      'true',
+    );
+    expect(screen.getByRole('button', { name: /unnamed/i })).not.toHaveAttribute('aria-current');
+  });
+
+  it('shows no active badge when no project matches activeProjectId', async () => {
+    mockSendCommand.mockResolvedValue(JSON.stringify([STUB_PROJECT, STUB_PROJECT_2]));
+    render(<SelectInterlinearProjectModal {...defaultProps} activeProjectId="not-in-list" />);
+    await waitFor(() => expect(screen.getByText('French glosses')).toBeInTheDocument());
+
+    expect(screen.queryByText('Active')).not.toBeInTheDocument();
+  });
+
   it('shows the analysis writing system code in each row', async () => {
     mockSendCommand.mockResolvedValue(JSON.stringify([STUB_PROJECT]));
     render(<SelectInterlinearProjectModal {...defaultProps} />);

src/__tests__/hooks/useDraftProject.test.ts

@@ -300,19 +300,21 @@ describe('useDraftProject', () => {
   });
 
   describe('wipeAll', () => {
-    it('clears the analysis entirely, marks the draft dirty, bumps the version, and persists', async () => {
-      mockGetDraftResolves(makeDraft({ analysis: analysisWithToken('tok-wipe-all') }));
+    it('clears the analysis entirely, clears dirty (clean baseline), bumps the version, and persists', async () => {
+      // Start from a dirty draft so the transition to clean is observable.
+      mockGetDraftResolves(makeDraft({ analysis: analysisWithToken('tok-wipe-all'), dirty: true }));
       const { result } = await renderLoaded();
+      expect(result.current.dirty).toBe(true);
       const versionBefore = result.current.draftVersion;
 
       act(() => {
         result.current.wipeAll();
       });
 
       expect(result.current.draft?.analysis.tokenAnalyses).toEqual([]);
-      expect(result.current.dirty).toBe(true);
+      expect(result.current.dirty).toBe(false);
       expect(result.current.draftVersion).toBe(versionBefore + 1);
-      expect(lastSavedDraft().dirty).toBe(true);
+      expect(lastSavedDraft().dirty).toBe(false);
     });
   });
 

src/components/AnalysisStore.tsx

@@ -5,7 +5,7 @@ import type {
   TextAnalysis,
   TokenSnapshot,
 } from 'interlinearizer';
-import { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import type { ReactNode } from 'react';
 import { Provider as ReduxProvider, useDispatch, useSelector, useStore } from 'react-redux';
 import {
@@ -41,6 +41,14 @@ type CallbackRefs = {
   onSaveRef: { current: ((analysis: TextAnalysis) => void) | undefined };
   /** Ref to the `onGlossChange` spy prop of the nearest {@link AnalysisStoreProvider}. */
   onGlossChangeRef: { current: ((tokenRef: string, value: string) => void) | undefined };
+  /**
+   * Stable callback a gloss input calls to register (`true`) or unregister (`false`) itself as
+   * currently holding uncommitted text. Gloss edits are committed to the store only on blur, so
+   * without this the provider could not tell the parent that an edit is in progress until then. The
+   * provider counts active editors and reports the 0↔non-0 crossings via the `onPendingEditsChange`
+   * prop, driving the tab's unsaved indicator while the user types.
+   */
+  reportEditing: (active: boolean) => void;
 };
 
 /** Internal context that carries callback refs alongside the Redux {@link ReduxProvider}. */
@@ -70,6 +78,12 @@ type AnalysisStoreProviderProps = Readonly<{
    * effect on store behavior.
    */
   onGlossChange?: (tokenRef: string, value: string) => void;
+  /**
+   * Called with `true` when at least one gloss input begins holding uncommitted text and `false`
+   * when none do (the last edit is committed on blur, reverted, or the input unmounts). Lets the
+   * caller reflect in-progress typing in the tab's unsaved indicator before the edit commits.
+   */
+  onPendingEditsChange?: (pending: boolean) => void;
 }>;
 
 /**
@@ -83,6 +97,8 @@ type AnalysisStoreProviderProps = Readonly<{
  * @param props.analysisLanguage - BCP 47 tag for reading/writing gloss values
  * @param props.onSave - Callback receiving the updated `TextAnalysis` after each mutation
  * @param props.onGlossChange - Spy called after each gloss write; for test observability only
+ * @param props.onPendingEditsChange - Called with whether any gloss input currently holds
+ *   uncommitted text, so the caller can show the unsaved indicator while the user types
  * @returns A context provider wrapping the subtree
  */
 export function AnalysisStoreProvider({
@@ -91,6 +107,7 @@ export function AnalysisStoreProvider({
   analysisLanguage,
   onSave,
   onGlossChange,
+  onPendingEditsChange,
 }: AnalysisStoreProviderProps) {
   // Lazy initialization: useRef(createStore()) would create and discard a store on every render
   const storeRef = useRef<ReturnType<typeof createAnalysisStore> | undefined>(undefined);
@@ -106,8 +123,24 @@ export function AnalysisStoreProvider({
   onSaveRef.current = onSave;
   const onGlossChangeRef = useRef(onGlossChange);
   onGlossChangeRef.current = onGlossChange;
-
-  const callbackRefs = useMemo(() => ({ onSaveRef, onGlossChangeRef }), []);
+  const onPendingEditsChangeRef = useRef(onPendingEditsChange);
+  onPendingEditsChangeRef.current = onPendingEditsChange;
+
+  // Count of gloss inputs currently holding uncommitted text. Kept in a ref (not state) so
+  // registering/unregistering an editor never re-renders the provider; only the 0↔non-0 crossings
+  // are forwarded to the parent, which owns the indicator.
+  const editingCountRef = useRef(0);
+  const reportEditing = useCallback((active: boolean) => {
+    const wasPending = editingCountRef.current > 0;
+    editingCountRef.current += active ? 1 : -1;
+    const isPending = editingCountRef.current > 0;
+    if (wasPending !== isPending) onPendingEditsChangeRef.current?.(isPending);
+  }, []);
+
+  const callbackRefs = useMemo(
+    () => ({ onSaveRef, onGlossChangeRef, reportEditing }),
+    [reportEditing],
+  );
 
   return (
     <ReduxProvider store={store}>
@@ -158,6 +191,25 @@ function useAnalysisSave(hookName: string): {
   return { callbacks, dispatch, save };
 }
 
+/**
+ * Registers a gloss input as currently holding uncommitted text whenever `isEditing` is true,
+ * unregistering it when `isEditing` turns false or the input unmounts. The provider aggregates
+ * these across all inputs and reports whether any edit is in progress, so the tab's unsaved
+ * indicator can light up the moment the user starts typing — gloss writes themselves are deferred
+ * to blur, which would otherwise leave the indicator dark mid-edit.
+ *
+ * @param isEditing - Whether this input's draft currently differs from its committed value.
+ * @throws When called outside an {@link AnalysisStoreProvider}.
+ */
+export function useReportGlossEditing(isEditing: boolean): void {
+  const { reportEditing } = useRequiredCallbacks('useReportGlossEditing');
+  useEffect(() => {
+    if (!isEditing) return undefined;
+    reportEditing(true);
+    return () => reportEditing(false);
+  }, [isEditing, reportEditing]);
+}
+
 // #endregion
 
 // #region Token hooks

src/components/Interlinearizer.tsx

@@ -50,6 +50,11 @@ type InterlinearizerProps = Readonly<{
   initialAnalysis?: TextAnalysis;
   /** Called after each gloss write with the updated `TextAnalysis` so the caller can persist it. */
   onSaveAnalysis?: (analysis: TextAnalysis) => void;
+  /**
+   * Called with whether any gloss input currently holds uncommitted text, so the caller can show
+   * the unsaved indicator while the user is typing — before the edit commits on blur.
+   */
+  onPendingEditsChange?: (pending: boolean) => void;
   /** Current phrase-interaction mode; owned by the parent and passed down for rendering. */
   phraseMode: PhraseMode;
   /** Setter for `phraseMode`; passed down so child components can transition modes. */
@@ -312,6 +317,8 @@ function InterlinearizerInner({
  * @param props.initialAnalysis - Seed analysis data for the store; not reactive after mount
  * @param props.analysisLanguage - BCP 47 tag for gloss read/write
  * @param props.onSaveAnalysis - Called after each gloss write with the updated `TextAnalysis`
+ * @param props.onPendingEditsChange - Called with whether any gloss input currently holds
+ *   uncommitted text, so the caller can show the unsaved indicator while the user types
  * @param props.phraseMode - Current phrase-interaction mode owned by the parent
  * @param props.setPhraseMode - Setter for `phraseMode`
  * @param props.viewOptions - Bundled display toggles forwarded to the segment list and continuous
@@ -322,13 +329,15 @@ export default function Interlinearizer({
   initialAnalysis,
   analysisLanguage,
   onSaveAnalysis,
+  onPendingEditsChange,
   ...innerProps
 }: InterlinearizerProps) {
   return (
     <AnalysisStoreProvider
       initialAnalysis={initialAnalysis}
       analysisLanguage={analysisLanguage}
       onSave={onSaveAnalysis}
+      onPendingEditsChange={onPendingEditsChange}
     >
       <InterlinearizerInner {...innerProps} />
     </AnalysisStoreProvider>