frontend/viewer/src/lib/layout/DevToolsDialog.svelte (1)

9-12: Guard API usage and optionally batch-create in parallel

• Add a quick guard for missing api to avoid a runtime if Dev Tools is opened without a project.
• Minor: for dev productivity, consider parallelizing creation.

 export async function generateEntries(n: number) {
-  for (let i = 0; i < n; i++) {
-    const entry = defaultEntry();
-    const vWsId = writingSystems.defaultVernacular?.wsId;
-    if (vWsId) entry.citationForm[vWsId] = `*Test ${Math.random().toString(36).substring(2, 7)}`;
-    await projectContext.api.createEntry(entry);
-  }
+  if (!projectContext.maybeApi) return; // or show a toast
+  const tasks: Promise<unknown>[] = [];
+  for (let i = 0; i < n; i++) {
+    const entry = defaultEntry();
+    const vWsId = writingSystems.defaultVernacular?.wsId;
+    if (vWsId) entry.citationForm[vWsId] = `*Test ${Math.random().toString(36).substring(2, 7)}`;
+    tasks.push(projectContext.api.createEntry(entry));
+  }
+  await Promise.all(tasks);
 }

Also applies to: 20-27

frontend/viewer/src/project/browse/BrowseView.svelte (1)

21-24: Right pane renders empty when API is unavailable—show a fallback

If projectContext.maybeApi is falsy and an entry is selected, the pane is empty. Consider a lightweight message.

-          {:else if projectContext.maybeApi}
+          {:else if projectContext.maybeApi}
             <div class="md:p-4 md:pl-4 h-full">
               <EntryView
                 entryId={selectedEntryId.current}
                 onClose={() => (selectedEntryId.current = '')}
                 showClose={IsMobile.value}
               />
             </div>
+          {:else}
+            <div class="flex items-center justify-center h-full text-muted-foreground text-center m-2">
+              <p>{$t`Project API unavailable. Please try again or reload.`}</p>
+            </div>
           {/if}

Also applies to: 106-114

frontend/viewer/src/lib/components/audio/AudioDialog.svelte (1)

14-24: Allow async onSubmit and await it before closing

Let onSubmit be async-capable so parents can persist updates before the dialog closes.

-  let {
+  let {
     open = $bindable(false),
     title = undefined,
-    onSubmit = () => {},
+    onSubmit = () => {},
     children = undefined
   } : {
     open: boolean,
     title?: string,
-    onSubmit?: (audioId: string) => void,
+    onSubmit?: (audioId: string) => void | Promise<void>,
     children?: Snippet
   } = $props();

   try {
     const audioId = await uploadAudio();
-    onSubmit(audioId);
+    await onSubmit(audioId);
     close();
   } finally {
     submitting = false;
   }

Also applies to: 61-62

frontend/viewer/src/lib/components/field-editors/audio-input.svelte (1)

226-230: Explicitly close the dialog on submit (defensive).

If AudioDialog doesn’t auto-close after onSubmit in all paths, the open state could remain true.

 function onAudioDialogSubmit(newAudioId: string) {
   audioId = newAudioId;
   onchange(newAudioId);
+  audioDialogOpen = false;
 }

frontend/viewer/src/lib/entry-editor/object-editors/ExampleEditorPrimitive.svelte (3)

38-48: Avoid accidentally rendering the class "true".

If $currentView.fields.sentence.show can be boolean, class={cn(show || 'hidden')} may yield class="true". Prefer an explicit ternary.

Apply:

-  <Editor.Field.Root fieldId="sentence" class={cn($currentView.fields.sentence.show || 'hidden')}>
+  <Editor.Field.Root fieldId="sentence" class={cn($currentView.fields.sentence.show ? undefined : 'hidden')}>

---

49-58: Same class boolean-guard nit as above.

-  <Editor.Field.Root fieldId="translation" class={cn($currentView.fields.translation.show || 'hidden')}>
+  <Editor.Field.Root fieldId="translation" class={cn($currentView.fields.translation.show ? undefined : 'hidden')}>

---

61-70: Use Svelte’s class directive for boolean-guard
Replace

class={cn($currentView.fields.reference.show || 'hidden')}

with

class:hidden={!$currentView.fields.reference.show}

frontend/viewer/src/lib/entry-editor/object-editors/EntryEditorPrimitive.svelte (7)

44-54: Field wiring LGTM; apply the class boolean-guard nit.

-  <Editor.Field.Root fieldId="lexemeForm" class={cn($currentView.fields.lexemeForm.show || 'hidden')}>
+  <Editor.Field.Root fieldId="lexemeForm" class={cn($currentView.fields.lexemeForm.show ? undefined : 'hidden')}>

---

56-65: Citation form block looks good; same class nit.

-  <Editor.Field.Root fieldId="citationForm" class={cn($currentView.fields.citationForm.show || 'hidden')}>
+  <Editor.Field.Root fieldId="citationForm" class={cn($currentView.fields.citationForm.show ? undefined : 'hidden')}>

---

68-76: Complex forms section LGTM; same class nit.

-  <Editor.Field.Root fieldId="complexForms" class={cn($currentView.fields.complexForms.show || 'hidden')}>
+  <Editor.Field.Root fieldId="complexForms" class={cn($currentView.fields.complexForms.show ? undefined : 'hidden')}>

---

78-87: Components section LGTM; same class nit.

-  <Editor.Field.Root fieldId="components" class={cn($currentView.fields.components.show || 'hidden')}>
+  <Editor.Field.Root fieldId="components" class={cn($currentView.fields.components.show ? undefined : 'hidden')}>

---

89-101: Complex form types: consider minor perf hoists.

The labelSelector calls pickBestAlternative per option each render. If options are stable, memoization/hoisting can cut work. Also apply the class nit.

-  <Editor.Field.Root fieldId="complexFormTypes" class={cn($currentView.fields.complexFormTypes.show || 'hidden')}>
+  <Editor.Field.Root fieldId="complexFormTypes" class={cn($currentView.fields.complexFormTypes.show ? undefined : 'hidden')}>

Outside this hunk, you can hoist:

const analysisWs = writingSystemService.viewAnalysis($currentView);
const vernacularWs = writingSystemService.viewVernacular($currentView);

…and reuse analysisWs/vernacularWs where referenced.

---

104-113: Literal meaning block LGTM; same class nit.

-  <Editor.Field.Root fieldId="literalMeaning" class={cn($currentView.fields.literalMeaning.show || 'hidden')}>
+  <Editor.Field.Root fieldId="literalMeaning" class={cn($currentView.fields.literalMeaning.show ? undefined : 'hidden')}>

---

115-124: Note block LGTM; same class nit.

-  <Editor.Field.Root fieldId="note" class={cn($currentView.fields.note.show || 'hidden')}>
+  <Editor.Field.Root fieldId="note" class={cn($currentView.fields.note.show ? undefined : 'hidden')}>

frontend/viewer/src/lib/entry-editor/object-editors/LexiconEditorPrimitive.svelte (1)

14-20: Render routing by type guards is clean.

Optional: Provide a tiny fallback (e.g., empty state) for unexpected values to aid debugging in the audio dialog.

 {:else if isExample(object)}
   <ExampleEditorPrimitive example={object} readonly />
 {:else}
-{/if}
+  <!-- no object / unknown type -->
+{/if}

frontend/viewer/src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte (3)

41-50: Gloss field wiring LGTM; apply the class boolean-guard nit.

-  <Editor.Field.Root fieldId="gloss" class={cn($currentView.fields.gloss.show || 'hidden')}>
+  <Editor.Field.Root fieldId="gloss" class={cn($currentView.fields.gloss.show ? undefined : 'hidden')}>

---

52-61: Definition field LGTM; same class nit.

-  <Editor.Field.Root fieldId="definition" class={cn($currentView.fields.definition.show || 'hidden')}>
+  <Editor.Field.Root fieldId="definition" class={cn($currentView.fields.definition.show ? undefined : 'hidden')}>

---

79-91: Semantic domains LGTM; same class nit.

-  <Editor.Field.Root fieldId="semanticDomains" class={cn($currentView.fields.semanticDomains.show || 'hidden')}>
+  <Editor.Field.Root fieldId="semanticDomains" class={cn($currentView.fields.semanticDomains.show ? undefined : 'hidden')}>

frontend/viewer/src/lib/entry-editor/object-editors/subject-context.ts (2)

4-8: Consider generic typing for stronger narrowing.

Making EditorPrimitiveSubject generic preserves the concrete subject type for consumers.

-interface EditorPrimitiveSubject {
-  readonly current: IEntry | ISense | IExampleSentence | undefined
-}
-export const subjectContext = new Context<EditorPrimitiveSubject>('subject-context');
+type Subject = IEntry | ISense | IExampleSentence;
+interface EditorPrimitiveSubject<T extends Subject = Subject> {
+  readonly current: T | undefined;
+}
+export const subjectContext = new Context<EditorPrimitiveSubject>('subject-context');

---

9-17: Tighten/relax types and drop unnecessary optional call.

subject is required here, so subject?.() is unnecessary. Optionally allow undefined subjects to make the API reusable in wrappers.

-export function initSubjectContext(subject: () => IEntry | ISense | IExampleSentence) {
+export function initSubjectContext(subject: () => IEntry | ISense | IExampleSentence | undefined) {
   const editorPrimitiveSubject: EditorPrimitiveSubject = {
     get current() {
-      return subject?.();
+      return subject();
     }
   };
   subjectContext.set(editorPrimitiveSubject);
   return editorPrimitiveSubject;
 }

frontend/viewer/src/lib/components/editor/field/field-root.svelte (2)

43-46: Prop-to-state bridge: keep, but tiny clarity tweak optional

The $effect correctly syncs the external prop into context state. If you want to avoid any TDZ confusion for readers, destructure props before registering the effect (no functional change).

-const fieldProps = usesFieldRoot(new FieldRootState(fieldLabelId));
-$effect(() => {
-  fieldProps.fieldId = fieldId;
-});
+const fieldProps = usesFieldRoot(new FieldRootState(fieldLabelId));
+// after props destructure below, this will run with the correct value
+$effect(() => {
+  fieldProps.fieldId = fieldId;
+});

---

57-57: Use Svelte style directive for grid-area
Replace the inline string style so the declaration is omitted when fieldId is undefined:

-<div style="grid-area: {fieldId}" class={cn(...)} {...restProps}>
+<div style:grid-area={fieldId} class={cn(...)} {...restProps}>

All FieldId values (e.g. lexemeForm, definition, sentence, etc.) are camelCase keys and conform to CSS custom-ident rules, so no additional sanitization is needed.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

Learnt from: rmunn
PR: sillsdev/languageforge-lexbox#1844
File: frontend/viewer/src/lib/entry-editor/ItemListItem.svelte:26-37
Timestamp: 2025-07-30T04:53:41.702Z
Learning: In frontend/viewer/src/lib/entry-editor/ItemListItem.svelte, the TODO comments for unused props `index` and `actions` are intentional reminders for future work to be completed in a separate PR, not issues to be resolved immediately. These represent planned functionality that will be implemented later.

Learnt from: hahn-kev
PR: sillsdev/languageforge-lexbox#1841
File: frontend/viewer/src/project/browse/filter/OpFilter.svelte:10-17
Timestamp: 2025-07-24T03:26:59.388Z
Learning: In Svelte 5, reactive statements use `$derived()` instead of the Svelte 4 `$:` syntax. For example, to make an array reactive to translation changes, use `const ops = $derived([...])` instead of `$: ops = [...]`.

Learnt from: myieye
PR: sillsdev/languageforge-lexbox#1906
File: frontend/viewer/src/lib/components/ui/dialog-shared/dialog-shared-root.svelte:3-3
Timestamp: 2025-08-14T12:50:25.135Z
Learning: In the dialog-shared-root.svelte component, the module-level `openDialogs` state is intentionally shared across all component instances to coordinate dialog stacking and overlay behavior across the entire application. This enables proper z-index management where newer dialogs appear on top and only the bottom dialog shows its overlay.