Persist entry list view mode and dictionary preview pin per project (#2284)

Author: myieye

frontend/viewer/src/lib/storage/project-storage.svelte.ts

@@ -35,9 +35,13 @@ class ProjectStorageProp extends StorageProp {
 export class ProjectStorage {
   readonly selectedTaskId: ProjectStorageProp;
   readonly currentView: ProjectStorageProp;
+  readonly entryListViewMode: ProjectStorageProp;
+  readonly dictionaryPreview: ProjectStorageProp;
 
   constructor(projectCode: string, backend: IPreferencesService) {
     this.selectedTaskId = new ProjectStorageProp(projectCode, 'selectedTaskId', backend);
     this.currentView = new ProjectStorageProp(projectCode, 'currentView', backend);
+    this.entryListViewMode = new ProjectStorageProp(projectCode, 'entryListViewMode', backend);
+    this.dictionaryPreview = new ProjectStorageProp(projectCode, 'dictionaryPreview', backend);
   }
 }

frontend/viewer/src/project/browse/BrowseView.svelte

@@ -19,10 +19,12 @@
   import {useProjectContext} from '$project/project-context.svelte';
   import type {EntryListViewMode} from './EntryListViewOptions.svelte';
   import EntryListViewOptions from './EntryListViewOptions.svelte';
+  import {useProjectStorage} from '$lib/storage/project-storage.svelte';
 
   const projectContext = useProjectContext();
   const viewService = useViewService();
   const dialogsService = useDialogsService();
+  const entryListViewMode = useProjectStorage().entryListViewMode;
 
   // DESKTOP: the entry is a sibling of the list (it's a split view). We can switch between selected entries.
   // So, selectedEntryId itself drives navigation.
@@ -37,7 +39,7 @@
   let semanticDomain = $state<ISemanticDomain>();
   let partOfSpeech = $state<IPartOfSpeech>();
   let sort = $state<SortConfig>();
-  let entryMode: EntryListViewMode = $state('simple');
+  const entryMode: EntryListViewMode = $derived(entryListViewMode.current === 'preview' ? 'preview' : 'simple');
 
   async function newEntry() {
     const entry = await dialogsService.createNewEntry(undefined, {
@@ -85,7 +87,7 @@
             <div class="my-2 flex items-center justify-between">
               <SortMenu bind:value={sort}
                 autoSelector={() => search ? SortField.SearchRelevance : SortField.Headword} />
-              <EntryListViewOptions bind:entryMode />
+              <EntryListViewOptions bind:entryMode={() => entryMode, (v) => void entryListViewMode.set(v)} />
             </div>
           </div>
           <EntriesList bind:this={entriesList}

frontend/viewer/src/project/browse/EntryView.svelte

@@ -23,12 +23,16 @@
   import * as Alert from '$lib/components/ui/alert';
   import {pt} from '$lib/views/view-text';
   import {useViewService} from '$lib/views/view-service.svelte';
+  import {useProjectStorage} from '$lib/storage/project-storage.svelte';
+
+  type DictionaryPreviewMode = 'show' | 'hide' | 'sticky';
 
   const writingSystemService = useWritingSystemService();
   const eventBus = useProjectEventBus();
   const miniLcmApi = useMiniLcmApi();
   const features = useFeatures();
   const viewService = useViewService();
+  const dictionaryPreviewStorage = useProjectStorage().dictionaryPreview;
   const {
     entryId,
     onClose,
@@ -88,8 +92,13 @@
   let entry = $derived(entryResource.current ?? undefined);
   const headword = $derived((entry && writingSystemService.headword(entry)) || $t`Untitled`);
   const loadingDebounced = new Debounced(() => entryResource.loading, 50);
-  let dictionaryPreview: 'show' | 'hide' | 'sticky' = $state('show');
-  const sticky = $derived.by(() => dictionaryPreview === 'sticky');
+  const dictionaryPreview: DictionaryPreviewMode = $derived(
+    isDictionaryPreviewMode(dictionaryPreviewStorage.current) ? dictionaryPreviewStorage.current : 'show'
+  );
+  function isDictionaryPreviewMode(value: string): value is DictionaryPreviewMode {
+    return value === 'show' || value === 'hide' || value === 'sticky';
+  }
+  const sticky = $derived(dictionaryPreview === 'sticky');
 
   let readonly = $state(false);
   let deleted = $state(false);
@@ -107,7 +116,7 @@
   <div class="md:pb-4">
     <DictionaryEntry {entry} showLinks class={cn('rounded bg-muted/80 dark:bg-muted/50 p-4')}>
       {#snippet actions()}
-        <Toggle bind:pressed={() => sticky, (value) => dictionaryPreview = value ? 'sticky' : 'show'}
+        <Toggle bind:pressed={() => sticky, (value) => void dictionaryPreviewStorage.set(value ? 'sticky' : 'show')}
           aria-label={$t`Toggle pinned`} class="aspect-square" size="sm">
           <Icon icon="i-mdi-pin-outline" class="size-5" />
         </Toggle>
@@ -125,7 +134,7 @@
         {/if}
         <h2 class="ml-4 text-2xl font-semibold mb-2 inline">{headword}</h2>
         <div class="flex">
-          <ViewPicker bind:dictionaryPreview bind:readonly />
+          <ViewPicker bind:dictionaryPreview={() => dictionaryPreview, (v) => void dictionaryPreviewStorage.set(v)} bind:readonly />
           <EntryMenu {entry} />
         </div>
       </div>