From 93f0a866a303114e12d70551d8e297a4a623fdbd Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Wed, 28 Feb 2024 22:40:08 +0100
Subject: [PATCH] fix(web): settings accordion open state (#7504)

---
 .../settings/setting-accordion-state.svelte   | 35 +++++++
 .../settings/setting-accordion.svelte         | 26 +++---
 .../user-settings-list.svelte                 | 91 +++++++++----------
 web/src/lib/utils.ts                          | 33 -------
 .../routes/admin/system-settings/+page.svelte | 30 +++---
 5 files changed, 108 insertions(+), 107 deletions(-)
 create mode 100644 web/src/lib/components/shared-components/settings/setting-accordion-state.svelte

diff --git a/web/src/lib/components/shared-components/settings/setting-accordion-state.svelte b/web/src/lib/components/shared-components/settings/setting-accordion-state.svelte
new file mode 100644
index 0000000000..a6257fce29
--- /dev/null
+++ b/web/src/lib/components/shared-components/settings/setting-accordion-state.svelte
@@ -0,0 +1,35 @@
+<script lang="ts" context="module">
+  export type AccordionState = Set<string>;
+
+  const { get: getAccordionState, set: setAccordionState } = createContext<Writable<AccordionState>>();
+  export { getAccordionState };
+</script>
+
+<script lang="ts">
+  import { writable, type Writable } from 'svelte/store';
+  import { createContext } from '$lib/utils/context';
+  import { page } from '$app/stores';
+  import { handlePromiseError } from '$lib/utils';
+  import { goto } from '$app/navigation';
+
+  const getParamValues = (param: string) => {
+    return new Set(($page.url.searchParams.get(param) || '').split(' ').filter((x) => x !== ''));
+  };
+
+  export let queryParam: string;
+  export let state: Writable<AccordionState> = writable(getParamValues(queryParam));
+  setAccordionState(state);
+
+  $: if (queryParam && $state) {
+    const searchParams = new URLSearchParams($page.url.searchParams);
+    if ($state.size > 0) {
+      searchParams.set(queryParam, [...$state].join(' '));
+    } else {
+      searchParams.delete(queryParam);
+    }
+
+    handlePromiseError(goto(`?${searchParams.toString()}`, { replaceState: true, noScroll: true, keepFocus: true }));
+  }
+</script>
+
+<slot />
diff --git a/web/src/lib/components/shared-components/settings/setting-accordion.svelte b/web/src/lib/components/shared-components/settings/setting-accordion.svelte
index b6ce4b3de0..37bc2be62d 100755
--- a/web/src/lib/components/shared-components/settings/setting-accordion.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-accordion.svelte
@@ -1,28 +1,28 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-  import { QueryParameter } from '$lib/constants';
-  import { hasParamValue, handlePromiseError, updateParamList } from '$lib/utils';
   import { slide } from 'svelte/transition';
+  import { getAccordionState } from './setting-accordion-state.svelte';
+
+  const accordionState = getAccordionState();
 
   export let title: string;
   export let subtitle = '';
   export let key: string;
-  export let isOpen = false;
+  export let isOpen = $accordionState.has(key);
 
-  const syncFromUrl = () => (isOpen = hasParamValue(QueryParameter.IS_OPEN, key));
-  const syncToUrl = (isOpen: boolean) => updateParamList({ param: QueryParameter.IS_OPEN, value: key, add: isOpen });
+  $: setIsOpen(isOpen);
 
-  isOpen ? handlePromiseError(syncToUrl(true)) : syncFromUrl();
-  $: $page.url && syncFromUrl();
-
-  const toggle = async () => {
-    isOpen = !isOpen;
-    await syncToUrl(isOpen);
+  const setIsOpen = (isOpen: boolean) => {
+    if (isOpen) {
+      $accordionState = $accordionState.add(key);
+    } else {
+      $accordionState.delete(key);
+      $accordionState = $accordionState;
+    }
   };
 </script>
 
 <div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700">
-  <button on:click={toggle} class="flex w-full place-items-center justify-between text-left">
+  <button on:click={() => (isOpen = !isOpen)} class="flex w-full place-items-center justify-between text-left">
     <div>
       <h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
         {title}
diff --git a/web/src/lib/components/user-settings-page/user-settings-list.svelte b/web/src/lib/components/user-settings-page/user-settings-list.svelte
index 6771e6471f..a14c2a8c85 100644
--- a/web/src/lib/components/user-settings-page/user-settings-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-settings-list.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
   import { page } from '$app/stores';
   import { OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants';
   import { featureFlags } from '$lib/stores/server-config.store';
@@ -17,60 +16,56 @@
   import TrashSettings from './trash-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
+  import SettingAccordionState from '../shared-components/settings/setting-accordion-state.svelte';
 
   export let keys: ApiKeyResponseDto[] = [];
   export let devices: AuthDeviceResponseDto[] = [];
 
-  let oauthOpen = false;
-  if (browser) {
-    oauthOpen = oauth.isCallback(window.location);
-  }
+  let oauthOpen =
+    oauth.isCallback(window.location) ||
+    $page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenSettingQueryParameterValue.OAUTH;
 </script>
 
-<SettingAccordion key="appearance" title="Appearance" subtitle="Manage the app appearance">
-  <AppearanceSettings />
-</SettingAccordion>
-
-<SettingAccordion key="account" title="Account" subtitle="Manage your account">
-  <UserProfileSettings />
-</SettingAccordion>
-
-<SettingAccordion key="api-keys" title="API Keys" subtitle="Manage your API keys">
-  <UserAPIKeyList bind:keys />
-</SettingAccordion>
-
-<SettingAccordion key="authorized-devices" title="Authorized Devices" subtitle="Manage your logged-in devices">
-  <DeviceList bind:devices />
-</SettingAccordion>
-
-<SettingAccordion key="libraries" title="Libraries" subtitle="Manage your asset libraries">
-  <LibraryList />
-</SettingAccordion>
-
-<SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories.">
-  <MemoriesSettings user={$user} />
-</SettingAccordion>
-
-{#if $featureFlags.loaded && $featureFlags.oauth}
-  <SettingAccordion
-    key="oauth"
-    title="OAuth"
-    subtitle="Manage your OAuth connection"
-    isOpen={oauthOpen ||
-      $page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenSettingQueryParameterValue.OAUTH}
-  >
-    <OAuthSettings user={$user} />
+<SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
+  <SettingAccordion key="appearance" title="Appearance" subtitle="Manage the app appearance">
+    <AppearanceSettings />
   </SettingAccordion>
-{/if}
 
-<SettingAccordion key="password" title="Password" subtitle="Change your password">
-  <ChangePasswordSettings />
-</SettingAccordion>
+  <SettingAccordion key="account" title="Account" subtitle="Manage your account">
+    <UserProfileSettings />
+  </SettingAccordion>
 
-<SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners">
-  <PartnerSettings user={$user} />
-</SettingAccordion>
+  <SettingAccordion key="api-keys" title="API Keys" subtitle="Manage your API keys">
+    <UserAPIKeyList bind:keys />
+  </SettingAccordion>
 
-<SettingAccordion key="trash" title="Trash" subtitle="Manage trash settings">
-  <TrashSettings />
-</SettingAccordion>
+  <SettingAccordion key="authorized-devices" title="Authorized Devices" subtitle="Manage your logged-in devices">
+    <DeviceList bind:devices />
+  </SettingAccordion>
+
+  <SettingAccordion key="libraries" title="Libraries" subtitle="Manage your asset libraries">
+    <LibraryList />
+  </SettingAccordion>
+
+  <SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories.">
+    <MemoriesSettings user={$user} />
+  </SettingAccordion>
+
+  {#if $featureFlags.loaded && $featureFlags.oauth}
+    <SettingAccordion key="oauth" title="OAuth" subtitle="Manage your OAuth connection" isOpen={oauthOpen || undefined}>
+      <OAuthSettings user={$user} />
+    </SettingAccordion>
+  {/if}
+
+  <SettingAccordion key="password" title="Password" subtitle="Change your password">
+    <ChangePasswordSettings />
+  </SettingAccordion>
+
+  <SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners">
+    <PartnerSettings user={$user} />
+  </SettingAccordion>
+
+  <SettingAccordion key="trash" title="Trash" subtitle="Manage trash settings">
+    <TrashSettings />
+  </SettingAccordion>
+</SettingAccordionState>
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index fa914bfcb2..35172ddc4f 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -1,5 +1,3 @@
-import { goto } from '$app/navigation';
-import { page } from '$app/stores';
 import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
 import { locales } from '$lib/constants';
 import { handleError } from '$lib/utils/handle-error';
@@ -14,37 +12,6 @@ import {
   unlinkOAuthAccount,
   type UserResponseDto,
 } from '@immich/sdk';
-import { get } from 'svelte/store';
-
-interface UpdateParamAction {
-  param: string;
-  value: string;
-  add: boolean;
-}
-
-const getParamValues = (param: string) =>
-  new Set((get(page).url.searchParams.get(param) || '').split(' ').filter((x) => x !== ''));
-
-export const hasParamValue = (param: string, value: string) => getParamValues(param).has(value);
-
-export const updateParamList = async ({ param, value, add }: UpdateParamAction) => {
-  const values = getParamValues(param);
-
-  if (add) {
-    values.add(value);
-  } else {
-    values.delete(value);
-  }
-
-  const searchParams = new URLSearchParams(get(page).url.searchParams);
-  searchParams.set(param, [...values.values()].join(' '));
-
-  if (values.size === 0) {
-    searchParams.delete(param);
-  }
-
-  await goto(`?${searchParams.toString()}`, { replaceState: true, noScroll: true, keepFocus: true });
-};
 
 export const getJobName = (jobName: JobName) => {
   const names: Record<JobName, string> = {
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index df1160dd87..e5d67bb99a 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -24,6 +24,8 @@
   import { downloadBlob } from '$lib/utils/asset-utils';
   import { mdiAlert, mdiContentCopy, mdiDownload } from '@mdi/js';
   import type { PageData } from './$types';
+  import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
+  import { QueryParameter } from '$lib/constants';
 
   export let data: PageData;
 
@@ -176,19 +178,21 @@
     <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, key }}
-            <SettingAccordion {title} {subtitle} {key}>
-              <svelte:component
-                this={item}
-                on:save={({ detail }) => handleSave(detail)}
-                on:reset={({ detail }) => handleReset(detail)}
-                disabled={$featureFlags.configFile}
-                {defaultConfig}
-                {config}
-                {savedConfig}
-              />
-            </SettingAccordion>
-          {/each}
+          <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
+            {#each settings as { item, title, subtitle, key }}
+              <SettingAccordion {title} {subtitle} {key}>
+                <svelte:component
+                  this={item}
+                  on:save={({ detail }) => handleSave(detail)}
+                  on:reset={({ detail }) => handleReset(detail)}
+                  disabled={$featureFlags.configFile}
+                  {defaultConfig}
+                  {config}
+                  {savedConfig}
+                />
+              </SettingAccordion>
+            {/each}
+          </SettingAccordionState>
         </section>
       </section>
     </AdminSettings>