properly reload settings

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -26,6 +26,7 @@
     mdiServerOutline,
     mdiTwoFactorAuthentication,
   } from '@mdi/js';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import SettingAccordionState from '../shared-components/settings/setting-accordion-state.svelte';
   import SettingAccordion from '../shared-components/settings/setting-accordion.svelte';
@@ -36,7 +37,6 @@
   import PartnerSettings from './partner-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
-  import { onMount } from 'svelte';
 
   interface Props {
     sessions?: SessionResponseDto[];
@@ -48,7 +48,7 @@
 
   onMount(async () => {
     keys = await getApiKeys();
-  })
+  });
 
   let oauthOpen =
     oauth.isCallback(globalThis.location) ||

web/src/routes/(user)/user-settings/+layout.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
   import { getKeyboardActions } from '$lib/services/keyboard.service';
   import { Container } from '@immich/ui';
+  import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import type { Snippet } from 'svelte';
 
   type Props = {
     children?: Snippet;
@@ -19,8 +18,6 @@
 
 <UserPageLayout title={data.meta.title} actions={[KeyboardShortcuts]}>
   <Container size="medium" center>
-    <UserSettingsList sessions={data.sessions} />
-
     {@render children?.()}
   </Container>
 </UserPageLayout>

web/src/routes/(user)/user-settings/+layout.ts

@@ -1,16 +1,13 @@
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
-import { getSessions } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url);
 
-  const sessions = await getSessions();
   const $t = await getFormatter();
 
   return {
-    sessions,
     meta: {
       title: $t('settings'),
     },

web/src/routes/(user)/user-settings/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  let { data }: Props = $props();
+</script>
+
+<UserSettingsList sessions={data.sessions} />

web/src/routes/(user)/user-settings/+page.ts

@@ -0,0 +1,13 @@
+import { authenticate } from '$lib/utils/auth';
+import { getSessions } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url);
+
+  const sessions = await getSessions();
+
+  return {
+    sessions,
+  };
+}) satisfies PageLoad;