Make headword and other utils writing-system aware

frontend/viewer/src/ProjectView.svelte

@@ -10,7 +10,6 @@
   } from '@mdi/js';
   import Editor from './lib/Editor.svelte';
   import {navigate, useLocation} from 'svelte-routing';
-  import {headword} from './lib/utils';
   import {useFwLiteConfig, useLexboxApi} from './lib/services/service-provider';
   import type {IEntry} from './lib/dotnet-types';
   import {onDestroy, onMount, setContext} from 'svelte';
@@ -29,11 +28,9 @@
   import {getSearchParam, getSearchParams, updateSearchParam, ViewerSearchParam} from './lib/utils/search-params';
   import SaveStatus from './lib/status/SaveStatus.svelte';
   import {saveEventDispatcher, saveHandler} from './lib/services/save-event-service';
-  import {AppNotification} from './lib/notifications/notifications';
-  import flexLogo from './lib/assets/flex-logo.png';
   import {initView, initViewSettings} from './lib/services/view-service';
   import {views} from './lib/entry-editor/view-data';
-  import {initWritingSystems} from './lib/writing-systems';
+  import {initWritingSystemService} from './lib/writing-system-service';
   import {useEventBus} from './lib/services/event-bus';
   import AboutDialog from './lib/about/AboutDialog.svelte';
   import {initProjectCommands, type NewEntryDialogOptions} from './lib/commands';
@@ -111,14 +108,11 @@
   setContext('selectedIndexExamplar', selectedIndexExemplar);
   $: updateSearchParam(ViewerSearchParam.IndexCharacter, $selectedIndexExemplar, false);
 
-  const writingSystems = initWritingSystems(deriveAsync(connected, isConnected => {
+  const writingSystemService = initWritingSystemService(deriveAsync(connected, isConnected => {
     if (!isConnected) return Promise.resolve(null);
     return lexboxApi.getWritingSystems();
   }).value);
-  const indexExamplars = derived(writingSystems, wsList => {
-    return wsList?.vernacular[0].exemplars;
-  });
-  setContext('indexExamplars', indexExamplars);
+
   const trigger = writable(0);
 
 
@@ -212,12 +206,12 @@
     navigateToEntryId = null;
   }
 
-  $: _loading = !$entries || !$writingSystems || loading;
+  $: _loading = !$entries || !$writingSystemService || loading;
 
   function onEntryCreated(entry: IEntry, options?: NewEntryDialogOptions) {
     $entries?.push(entry);//need to add it before refresh, otherwise it won't get selected because it's not in the list
     if (!options?.dontNavigate) {
-      navigateToEntry(entry, headword(entry));
+      navigateToEntry(entry, $writingSystemService!.headword(entry));
     } else {
       refreshEntries();
     }
@@ -277,9 +271,9 @@
 
   let newEntryDialog: NewEntryDialog;
   async function openNewEntryDialog(text: string, options?: NewEntryDialogOptions): Promise<IEntry | undefined> {
-    const defaultWs = $writingSystems?.vernacular[0].wsId;
+    const defaultWs = $writingSystemService!.defaultVernacular();
     if (defaultWs === undefined) return undefined;
-    const entry = await newEntryDialog.openWithValue({lexemeForm: {[defaultWs]: text}});
+    const entry = await newEntryDialog.openWithValue({lexemeForm: {[defaultWs.wsId]: text}});
     if (entry) onEntryCreated(entry, options);
     return entry;
   }

frontend/viewer/src/lib/DictionaryEntry.svelte

@@ -12,47 +12,44 @@
   ] as const;
 </script>
 <script lang="ts">
-  import { derived } from 'svelte/store';
-
   import type { IEntry } from '$lib/dotnet-types';
-  import { headword } from './utils';
-  import {useWritingSystems} from './writing-systems';
+  import {useWritingSystemService} from './writing-system-service';
   import { usePartsOfSpeech } from './parts-of-speech';
 
   export let entry: IEntry;
   export let lines: number = 0;
 
   $: lines = entry.senses.length > 1 ? entry.senses.length + 1 : 1;
 
-  const allWritingSystems = useWritingSystems();
-  const wsColor = derived(allWritingSystems, ({vernacular, analysis}) => {
+  const writingSystemService = useWritingSystemService();
+  const wsColor = (() => {
     const vernacularColor: Record<string, typeof vernacularColors[number]> = {};
     const analysisColor: Record<string, typeof analysisColors[number]> = {};
-    vernacular.forEach((ws, i) => {
+    writingSystemService.vernacular.forEach((ws, i) => {
       vernacularColor[ws.wsId] = vernacularColors[i % vernacularColors.length];
     });
-    analysis.forEach((ws, i) => {
+    writingSystemService.analysis.forEach((ws, i) => {
       analysisColor[ws.wsId] = analysisColors[i % analysisColors.length];
     });
     return (ws: string, type: 'vernacular' | 'analysis') => {
       const colors = type === 'vernacular' ? vernacularColor : analysisColor;
       return colors[ws];
     };
-  });
+  })();
 
-  $: headwords = $allWritingSystems.vernacular
-    .map(ws => ({ws: ws.wsId, value: headword(entry, ws.wsId)}))
+  $: headwords = writingSystemService.vernacular
+    .map(ws => ({ws: ws.wsId, value: writingSystemService.headword(entry)}))
     .filter(({value}) => !!value);
 
-  const partsOfSpeech = usePartsOfSpeech(allWritingSystems);
+  const partsOfSpeech = usePartsOfSpeech(writingSystemService);
 </script>
 
 <div>
   <strong class="inline-flex gap-1">
     {#each headwords as {ws, value}, i}
       {#if value}
         {#if i > 0}/{/if}
-        <span class={$wsColor(ws, 'vernacular')}>{value}</span>
+        <span class={wsColor(ws, 'vernacular')}>{value}</span>
       {/if}
     {/each}
   </strong>
@@ -66,32 +63,32 @@
       <i>{partOfSpeech}</i>
     {/if}
     <span>
-      {#each $allWritingSystems.analysis as ws}
+      {#each writingSystemService.analysis as ws}
         {#if sense.gloss[ws.wsId] || sense.definition[ws.wsId]}
           <span class="ml-0.5">
             <sub class="-mr-0.5">{ws.abbreviation}</sub>
             {#if sense.gloss[ws.wsId]}
-              <span class={$wsColor(ws.wsId, 'analysis')}>{sense.gloss[ws.wsId]}</span>;
+              <span class={wsColor(ws.wsId, 'analysis')}>{sense.gloss[ws.wsId]}</span>;
             {/if}
             {#if sense.definition[ws.wsId]}
-              <span class={$wsColor(ws.wsId, 'analysis')}>{sense.definition[ws.wsId]}</span>
+              <span class={wsColor(ws.wsId, 'analysis')}>{sense.definition[ws.wsId]}</span>
             {/if}
           </span>
         {/if}
       {/each}
     </span>
     {#each sense.exampleSentences as example (example.id)}
-      {@const usedVernacular = $allWritingSystems.vernacular.filter(ws => !!example.sentence[ws.wsId])}
-      {@const usedAnalysis = $allWritingSystems.analysis.filter(ws => !!example.translation[ws.wsId])}
+      {@const usedVernacular = writingSystemService.vernacular.filter(ws => !!example.sentence[ws.wsId])}
+      {@const usedAnalysis = writingSystemService.analysis.filter(ws => !!example.translation[ws.wsId])}
       {#if usedVernacular.length || usedAnalysis.length}
         <span class="-mr-0.5">[</span>
           {#each usedVernacular as ws}
-            <span class={$wsColor(ws.wsId, 'vernacular')}>{example.sentence[ws.wsId]}</span>
+            <span class={wsColor(ws.wsId, 'vernacular')}>{example.sentence[ws.wsId]}</span>
             <span></span><!-- standardizes whitespace between texts -->
           {/each}
           <span></span>
           {#each usedAnalysis as ws}
-            <span class={$wsColor(ws.wsId, 'analysis')}>{example.translation[ws.wsId]}</span>
+            <span class={wsColor(ws.wsId, 'analysis')}>{example.translation[ws.wsId]}</span>
             <span></span><!-- standardizes whitespace between texts -->
           {/each}
         <span class="-ml-0.5">]</span>

frontend/viewer/src/lib/entry-editor/EntryOrSensePicker.svelte

@@ -14,17 +14,19 @@
   import { createEventDispatcher, getContext } from 'svelte';
   import { useLexboxApi } from '../services/service-provider';
   import { deriveAsync } from '../utils/time';
-  import { defaultSense, firstDef, firstGloss, glosses, headword } from '../utils';
+  import { defaultSense } from '../utils';
   import { useProjectCommands } from '../commands';
   import type { SaveHandler } from '../services/save-event-service';
   import {SortField} from '$lib/dotnet-types';
+  import {useWritingSystemService} from '$lib/writing-system-service';
 
   const dispatch = createEventDispatcher<{
     pick: EntrySenseSelection;
   }>();
 
   const projectCommands = useProjectCommands();
   const saveHandler = getContext<SaveHandler>('saveHandler');
+  const writingSystemService = useWritingSystemService();
 
   export let open = false;
   export let title: string;
@@ -161,8 +163,8 @@
               }
             }}>
             <ListItem
-              title={headword(entry).padStart(1, '–')}
-              subheading={glosses(entry).padStart(1, '–')}
+              title={writingSystemService.headword(entry).padStart(1, '–')}
+              subheading={writingSystemService.glosses(entry).padStart(1, '–')}
               noShadow />
             <div class="grow"></div>
             {#if disabledEntry}
@@ -184,8 +186,8 @@
               class:disabled={disabledSense}
               on:click={() => selectedSense = selectedSense?.id === sense.id ? undefined : sense}>
               <ListItem
-                title={firstGloss(sense).padStart(1, '–')}
-                subheading={firstDef(sense).padStart(1, '–')}
+                title={writingSystemService.firstGloss(sense).padStart(1, '–')}
+                subheading={writingSystemService.firstDef(sense).padStart(1, '–')}
                 classes={{icon: 'text-info'}}
                 noShadow />
               {#if disabledSense}

frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormComponents.svelte

@@ -2,12 +2,13 @@
   import FieldTitle from '../FieldTitle.svelte';
   import { useCurrentView } from '$lib/services/view-service';
   import EntryOrSensePicker, { type EntrySenseSelection } from '../EntryOrSensePicker.svelte';
-  import { headword, randomId } from '$lib/utils';
+  import { randomId } from '$lib/utils';
   import { createEventDispatcher } from 'svelte';
   import EntryOrSenseItemList from '../EntryOrSenseItemList.svelte';
   import { Button } from 'svelte-ux';
   import { mdiPlus } from '@mdi/js';
   import type { IEntry, ISense, IComplexFormComponent } from '$lib/dotnet-types';
+  import {useWritingSystemService} from '$lib/writing-system-service';
 
   const dispatch = createEventDispatcher<{
     change: { value: IComplexFormComponent[] };
@@ -19,6 +20,7 @@
   export let readonly: boolean;
   export let entry: IEntry;
   let currentView = useCurrentView();
+  const writingSystemService = useWritingSystemService();
 
   $: empty = !value?.length;
 
@@ -28,10 +30,10 @@
     const component: IComplexFormComponent = {
       id: randomId(),
       complexFormEntryId: entry.id,
-      complexFormHeadword: headword(entry),
+      complexFormHeadword: writingSystemService.headword(entry),
       componentEntryId: selection.entry.id,
       componentSenseId: selection.sense?.id,
-      componentHeadword: headword(selection.entry),
+      componentHeadword: writingSystemService.headword(selection.entry),
     };
     value = [...value, component];
     dispatch('change', { value });

frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormTypes.svelte

@@ -1,24 +1,23 @@
 <script lang="ts">
   import {useComplexFormTypes} from '$lib/complex-form-types';
   import type {IComplexFormType} from '$lib/dotnet-types';
-  import {pickBestAlternative} from '../../utils';
-  import {useWritingSystems} from '../../writing-systems';
+  import {useWritingSystemService} from '../../writing-system-service';
   import MultiOptionEditor from './MultiOptionEditor.svelte';
 
   export let id: string;
   export let value: IComplexFormType[];
   export let readonly: boolean;
 
   const complexFormTypes = useComplexFormTypes();
-  const writingSystems = useWritingSystems();
+  const writingSystemService = useWritingSystemService();
 </script>
 
 <MultiOptionEditor
   on:change
   bind:value
   preserveOrder
   options={$complexFormTypes}
-  getOptionLabel={(cft) => pickBestAlternative(cft.name, 'analysis', $writingSystems)}
+  getOptionLabel={(cft) => writingSystemService.pickBestAlternative(cft.name, 'analysis')}
   {readonly}
   {id}
   wsType="first-analysis" />

frontend/viewer/src/lib/entry-editor/field-editors/ComplexForms.svelte

@@ -2,12 +2,13 @@
   import FieldTitle from '../FieldTitle.svelte';
   import { useCurrentView } from '$lib/services/view-service';
   import EntryOrSensePicker, { type EntrySenseSelection } from '../EntryOrSensePicker.svelte';
-  import { headword, randomId } from '$lib/utils';
+  import { randomId } from '$lib/utils';
   import { createEventDispatcher } from 'svelte';
   import EntryOrSenseItemList from '../EntryOrSenseItemList.svelte';
   import { Button } from 'svelte-ux';
   import { mdiPlus } from '@mdi/js';
   import type { IEntry, IComplexFormComponent } from '$lib/dotnet-types';
+  import {useWritingSystemService} from '$lib/writing-system-service';
 
   const dispatch = createEventDispatcher<{
     change: { value: IComplexFormComponent[] };
@@ -19,6 +20,7 @@
   export let readonly: boolean;
   export let entry: IEntry;
   let currentView = useCurrentView();
+  let writingSystemService = useWritingSystemService();
 
   $: empty = !value?.length;
 
@@ -28,9 +30,9 @@
     const complexForm: IComplexFormComponent = {
       id: randomId(),
       complexFormEntryId: selection.entry.id,
-      complexFormHeadword: headword(selection.entry),
+      complexFormHeadword: writingSystemService.headword(selection.entry),
       componentEntryId: entry.id,
-      componentHeadword: headword(entry),
+      componentHeadword: writingSystemService.headword(entry),
     };
     value = [...value, complexForm];
     dispatch('change', { value });

frontend/viewer/src/lib/entry-editor/field-editors/MultiFieldEditor.svelte

@@ -4,15 +4,14 @@
   import { createEventDispatcher } from 'svelte';
   import type { IMultiString } from '$lib/dotnet-types';
   import type {WritingSystemSelection} from '../../config-types';
-  import { pickWritingSystems } from '../../utils';
   import {useCurrentView} from '../../services/view-service';
-  import {useWritingSystems} from '../../writing-systems';
+  import {useWritingSystemService} from '../../writing-system-service';
 
   const dispatch = createEventDispatcher<{
     change: { value: IMultiString };
   }>();
 
-  const allWritingSystems = useWritingSystems();
+  const writingSystemService = useWritingSystemService();
 
   export let id: string;
   export let name: string | undefined = undefined;
@@ -24,7 +23,7 @@
   let unsavedChanges: Record<string, boolean> = {};
   let currentView = useCurrentView();
 
-  $: writingSystems = pickWritingSystems(wsType, $allWritingSystems);
+  $: writingSystems = writingSystemService.pickWritingSystems(wsType);
   $: empty = !writingSystems.some((ws) => value[ws.wsId] || unsavedChanges[ws.wsId]);
   $: collapse = empty && writingSystems.length > 1;
 </script>

frontend/viewer/src/lib/entry-editor/field-editors/MultiOptionEditor.svelte

@@ -3,9 +3,8 @@
   import {createEventDispatcher} from 'svelte';
   import type {WritingSystemSelection} from '../../config-types';
   import {useCurrentView} from '../../services/view-service';
-  import {pickWritingSystems} from '../../utils';
   import MapBind from '../../utils/MapBind.svelte';
-  import {useWritingSystems} from '../../writing-systems';
+  import {useWritingSystemService} from '../../writing-system-service';
   import FieldTitle from '../FieldTitle.svelte';
   import CrdtMultiOptionField from '../inputs/CrdtMultiOptionField.svelte';
 
@@ -99,9 +98,9 @@
   }
 
   let currentView = useCurrentView();
-  const allWritingSystems = useWritingSystems();
+  const writingSystemService = useWritingSystemService();
 
-  $: [ws] = pickWritingSystems(wsType, $allWritingSystems);
+  $: [ws] = writingSystemService.pickWritingSystems(wsType);
   $: empty = !value?.length;
 </script>
 

frontend/viewer/src/lib/entry-editor/field-editors/SingleFieldEditor.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import FieldTitle from '../FieldTitle.svelte';
-  import { pickWritingSystems } from '../../utils';
   import type {WritingSystemSelection} from '../../config-types';
   import CrdtTextField from '../inputs/CrdtTextField.svelte';
   import {useCurrentView} from '../../services/view-service';
-  import {useWritingSystems} from '../../writing-systems';
+  import {useWritingSystemService} from '../../writing-system-service';
 
   export let id: string;
   export let name: string | undefined = undefined;
@@ -13,9 +12,9 @@
   export let readonly: boolean;
   let currentView = useCurrentView();
 
-  const allWritingSystems = useWritingSystems();
+  const writingSystemService = useWritingSystemService();
 
-  $: [ws] = pickWritingSystems(wsType, $allWritingSystems);
+  $: [ws] = writingSystemService.pickWritingSystems(wsType);
   $: empty = !value;
 </script>