keep admin settings accordion state in search params

web/src/lib/components/admin-page/settings/setting-accordion.svelte

@@ -1,10 +1,37 @@
-<script lang="ts">
+<script lang="ts" context="module">
+  type T = string;
+</script>
+
+<script lang="ts" generics="T extends string">
   import { slide } from 'svelte/transition';
+  import { SearchParams } from '$lib/stores/search-params.store';
+  import { onMount } from 'svelte';
   export let title: string;
   export let subtitle = '';
-
+  export let key: T | Array<T> | undefined = undefined;
   export let isOpen = false;
-  const toggle = () => (isOpen = !isOpen);
+
+  let searchParams: SearchParams<T>;
+
+  onMount(() => {
+    if (key) {
+      searchParams = SearchParams.get<T>('isOpen');
+      searchParams.hasValue(key).subscribe((hasValue) => (isOpen = hasValue));
+    }
+  });
+
+  const toggle = () => {
+    if (!key) {
+      isOpen = !isOpen;
+      return;
+    }
+
+    if (isOpen) {
+      searchParams.removeValue(key);
+    } else {
+      searchParams.addValue(key);
+    }
+  };
 </script>
 
 <div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700">

web/src/lib/stores/search-params.store.ts

@@ -0,0 +1,57 @@
+import { goto } from '$app/navigation';
+import { page } from '$app/stores';
+import { writable, get, derived, readonly, type Writable } from 'svelte/store';
+
+// TODO re-visit the types.
+const searchParams = new Map<string, unknown>();
+
+export class SearchParams<T extends string> {
+  private key: string;
+  private store$: Writable<Array<T>>;
+
+  private constructor(key: string) {
+    this.key = key;
+    this.store$ = writable<Array<T>>((get(page).url.searchParams.get(this.key)?.split(',') || []) as Array<T>);
+    this.store$.subscribe(this.handleUpdate);
+  }
+
+  private handleUpdate = (values: Array<T>) => {
+    if (values.length === 0) {
+      get(page).url.searchParams.delete(this.key);
+    } else {
+      get(page).url.searchParams.set(this.key, values.join(','));
+    }
+    goto(`?${get(page).url.searchParams.toString()}`);
+  };
+
+  static get<T extends string>(key: string) {
+    const params = searchParams.get(key) as SearchParams<T>;
+
+    if (params) {
+      return params;
+    }
+
+    return searchParams.set(key, new this<T>(key)).get(key) as SearchParams<T>;
+  }
+
+  getValues() {
+    return readonly(this.store$);
+  }
+
+  hasValue(value: T | Array<T>) {
+    if (value instanceof Array) {
+      return derived(this.getValues(), (values) => values.some((searchValue) => value.includes(searchValue)));
+    }
+    return derived(this.getValues(), (values) => values.includes(value));
+  }
+
+  addValue(value: T | Array<T>) {
+    this.store$.update((values) => [...values, ...(value instanceof Array ? value : [value])]);
+  }
+
+  removeValue(value: T | Array<T>) {
+    this.store$.update((values) =>
+      values.filter((searchValue) => (value instanceof Array ? !value.includes(searchValue) : searchValue !== value)),
+    );
+  }
+}

web/src/routes/admin/system-settings/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import FFmpegSettings from '$lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte';
   import JobSettings from '$lib/components/admin-page/settings/job-settings/job-settings.svelte';
   import MachineLearningSettings from '$lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte';
@@ -30,7 +29,22 @@
   export let data: PageData;
 
   let config = data.configs;
-  let openSettings = ($page.url.searchParams.get('open')?.split(',') || []) as Array<keyof SystemConfigDto>;
+
+  type Settings =
+    | typeof JobSettings
+    | typeof LibrarySettings
+    | typeof LoggingSettings
+    | typeof MachineLearningSettings
+    | typeof MapSettings
+    | typeof OAuthSettings
+    | typeof PasswordLoginSettings
+    | typeof ServerSettings
+    | typeof StorageTemplateSettings
+    | typeof ThemeSettings
+    | typeof ThumbnailSettings
+    | typeof TrashSettings
+    | typeof NewVersionCheckSettings
+    | typeof FFmpegSettings;
 
   const downloadConfig = () => {
     const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
@@ -41,90 +55,95 @@
     setTimeout(() => downloadManager.clear(downloadKey), 5_000);
   };
 
-  const settings = [
+  const settings: Array<{
+    item: Settings;
+    title: string;
+    subtitle: string;
+    key: keyof SystemConfigDto | Array<keyof SystemConfigDto>;
+  }> = [
     {
       item: JobSettings,
       title: 'Job Settings',
       subtitle: 'Manage job concurrency',
-      isOpen: openSettings.includes('job'),
+      key: 'job',
     },
     {
       item: LibrarySettings,
       title: 'Library',
       subtitle: 'Manage library settings',
-      isOpen: openSettings.includes('library'),
+      key: 'library',
     },
     {
       item: LoggingSettings,
       title: 'Logging',
       subtitle: 'Manage log settings',
-      isOpen: openSettings.includes('logging'),
+      key: 'logging',
     },
     {
       item: MachineLearningSettings,
       title: 'Machine Learning Settings',
       subtitle: 'Manage machine learning features and settings',
-      isOpen: openSettings.includes('machineLearning'),
+      key: 'machineLearning',
     },
     {
       item: MapSettings,
       title: 'Map & GPS Settings',
       subtitle: 'Manage map related features and setting',
-      isOpen: openSettings.some((key) => ['map', 'reverseGeocoding'].includes(key)),
+      key: ['map', 'reverseGeocoding'],
     },
     {
       item: OAuthSettings,
       title: 'OAuth Authentication',
       subtitle: 'Manage the login with OAuth settings',
-      isOpen: openSettings.includes('oauth'),
+      key: 'oauth',
     },
     {
       item: PasswordLoginSettings,
       title: 'Password Authentication',
       subtitle: 'Manage the login with password settings',
-      isOpen: openSettings.includes('passwordLogin'),
+      key: 'passwordLogin',
     },
     {
       item: ServerSettings,
       title: 'Server Settings',
       subtitle: 'Manage server settings',
-      isOpen: openSettings.includes('server'),
+      key: 'server',
     },
     {
       item: StorageTemplateSettings,
       title: 'Storage Template',
       subtitle: 'Manage the folder structure and file name of the upload asset',
-      isOpen: openSettings.includes('storageTemplate'),
+      key: 'storageTemplate',
     },
     {
       item: ThemeSettings,
       title: 'Theme Settings',
       subtitle: 'Manage customization of the Immich web interface',
-      isOpen: openSettings.includes('theme'),
+      key: 'theme',
     },
     {
       item: ThumbnailSettings,
       title: 'Thumbnail Settings',
       subtitle: 'Manage the resolution of thumbnail sizes',
-      isOpen: openSettings.includes('thumbnail'),
+      key: 'thumbnail',
     },
     {
       item: TrashSettings,
       title: 'Trash Settings',
       subtitle: 'Manage trash settings',
-      isOpen: openSettings.includes('trash'),
+      key: 'trash',
     },
     {
       item: NewVersionCheckSettings,
       title: 'Version Check',
       subtitle: 'Enable/disable the new version notification',
-      isOpen: openSettings.includes('newVersionCheck'),
+      key: 'newVersionCheck',
     },
     {
       item: FFmpegSettings,
       title: 'Video Transcoding Settings',
       subtitle: 'Manage the resolution and encoding information of the video files',
-      isOpen: openSettings.includes('ffmpeg'),
+      key: 'ffmpeg',
     },
   ];
 </script>
@@ -155,8 +174,8 @@
   <AdminSettings bind:config let:handleReset let:handleSave let:savedConfig let:defaultConfig>
     <section id="setting-content" class="flex place-content-center sm:mx-4">
       <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
-        {#each settings as { item, title, subtitle, isOpen }}
-          <SettingAccordion {title} {subtitle} {isOpen}>
+        {#each settings as { item, title, subtitle, key }}
+          <SettingAccordion {title} {subtitle} {key}>
             <svelte:component
               this={item}
               on:save={({ detail }) => handleSave(detail)}