feat(web): automatically update user info (#5647)

* use svelte store

* fix: websocket error when not authenticated

* more routes

web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { api, SystemConfigStorageTemplateDto, SystemConfigTemplateStorageOptionDto, UserResponseDto } from '@api';
+  import { api, SystemConfigStorageTemplateDto, SystemConfigTemplateStorageOptionDto } from '@api';
   import * as luxon from 'luxon';
   import handlebar from 'handlebars';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
@@ -13,9 +13,9 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import { user } from '$lib/stores/user.store';
 
   export let storageConfig: SystemConfigStorageTemplateDto;
-  export let user: UserResponseDto;
   export let disabled = false;
 
   let savedConfig: SystemConfigStorageTemplateDto;
@@ -163,18 +163,18 @@
         <p class="text-sm">
           Approximately path length limit : <span
             class="font-semibold text-immich-primary dark:text-immich-dark-primary"
-            >{parsedTemplate().length + user.id.length + 'UPLOAD_LOCATION'.length}</span
+            >{parsedTemplate().length + $user.id.length + 'UPLOAD_LOCATION'.length}</span
           >/260
         </p>
 
         <p class="text-sm">
-          <code class="text-immich-primary dark:text-immich-dark-primary">{user.storageLabel || user.id}</code> is the user's
-          Storage Label
+          <code class="text-immich-primary dark:text-immich-dark-primary">{$user.storageLabel || $user.id}</code> is the
+          user's Storage Label
         </p>
 
         <p class="p-4 py-2 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
           <span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
-            >UPLOAD_LOCATION/{user.storageLabel || user.id}</span
+            >UPLOAD_LOCATION/{$user.storageLabel || $user.id}</span
           >/{parsedTemplate()}.jpg
         </p>
 

web/src/lib/components/album-page/album-card.svelte

@@ -8,10 +8,10 @@
   import type { OnClick, OnShowContextMenu } from './album-card';
   import { getContextMenuPosition } from '../../utils/context-menu';
   import { mdiDotsVertical } from '@mdi/js';
+  import { user } from '$lib/stores/user.store';
 
   export let album: AlbumResponseDto;
   export let isSharingView = false;
-  export let user: UserResponseDto;
   export let showItemCount = true;
   export let showContextMenu = true;
   let showVerticalDots = false;
@@ -119,7 +119,7 @@
 
       {#if isSharingView}
         {#await getAlbumOwnerInfo() then albumOwner}
-          {#if user.email == albumOwner.email}
+          {#if $user.email == albumOwner.email}
             <p>Owned</p>
           {:else}
             <p>

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
   import { clickOutside } from '$lib/utils/click-outside';
@@ -23,6 +22,7 @@
   import { createEventDispatcher } from 'svelte';
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
+  import { user } from '$lib/stores/user.store';
 
   export let asset: AssetResponseDto;
   export let showCopyButton: boolean;
@@ -34,7 +34,7 @@
   export let showSlideshow = false;
   export let hasStackChildren = false;
 
-  $: isOwner = asset.ownerId === $page.data.user?.id;
+  $: isOwner = asset.ownerId === $user?.id;
 
   type MenuItemEvent = 'addToAlbum' | 'addToSharedAlbum' | 'asProfileImage' | 'runJob' | 'playSlideShow' | 'unstack';
 

web/src/lib/components/layouts/user-page-layout.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
-  import type { UserResponseDto } from '@api';
   import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
   import SideBar from '../shared-components/side-bar/side-bar.svelte';
   import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
 
-  export let user: UserResponseDto;
   export let hideNavbar = false;
   export let showUploadButton = false;
   export let title: string | undefined = undefined;
@@ -18,7 +16,7 @@
 
 <header>
   {#if !hideNavbar}
-    <NavigationBar {user} {showUploadButton} on:uploadClicked={() => openFileUploadDialog()} />
+    <NavigationBar {showUploadButton} on:uploadClicked={() => openFileUploadDialog()} />
   {/if}
 
   <slot name="header" />

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -10,6 +10,7 @@
   import { notificationController, NotificationType } from '../notification/notification';
   import { handleError } from '$lib/utils/handle-error';
   import AvatarSelector from './avatar-selector.svelte';
+  import { setUser } from '$lib/stores/user.store';
 
   export let user: UserResponseDto;
 
@@ -33,6 +34,7 @@
       });
 
       user = data;
+      setUser(user);
       isShowSelectAvatar = false;
 
       notificationController.show({

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -4,7 +4,7 @@
   import { clickOutside } from '$lib/utils/click-outside';
   import { createEventDispatcher } from 'svelte';
   import { fade, fly } from 'svelte/transition';
-  import { api, UserResponseDto } from '@api';
+  import { api } from '@api';
   import ThemeButton from '../theme-button.svelte';
   import { AppRoute } from '../../../constants';
   import AccountInfoPanel from './account-info-panel.svelte';
@@ -16,7 +16,8 @@
   import UserAvatar from '../user-avatar.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { mdiMagnify, mdiTrayArrowUp, mdiCog } from '@mdi/js';
-  export let user: UserResponseDto;
+  import { user } from '$lib/stores/user.store';
+
   export let showUploadButton = true;
 
   let shouldShowAccountInfo = false;
@@ -71,7 +72,7 @@
           </div>
         {/if}
 
-        {#if user.isAdmin}
+        {#if $user.isAdmin}
           <a
             data-sveltekit-preload-data="hover"
             href={AppRoute.ADMIN_USER_MANAGEMENT}
@@ -121,8 +122,8 @@
             on:mouseleave={() => (shouldShowAccountInfo = false)}
             on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
           >
-            {#key user}
-              <UserAvatar {user} size="lg" showTitle={false} interactive />
+            {#key $user}
+              <UserAvatar user={$user} size="lg" showTitle={false} interactive />
             {/key}
           </button>
 
@@ -132,13 +133,13 @@
               out:fade={{ delay: 200, duration: 150 }}
               class="absolute -bottom-12 right-5 rounded-md border bg-gray-500 p-2 text-[12px] text-gray-100 shadow-md dark:border-immich-dark-gray dark:bg-immich-dark-gray"
             >
-              <p>{user.name}</p>
-              <p>{user.email}</p>
+              <p>{$user.name}</p>
+              <p>{$user.email}</p>
             </div>
           {/if}
 
           {#if shouldShowAccountInfoPanel}
-            <AccountInfoPanel bind:user on:logout={logOut} />
+            <AccountInfoPanel user={$user} on:logout={logOut} />
           {/if}
         </div>
       </section>

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

@@ -8,6 +8,7 @@
   import { handleError } from '../../utils/handle-error';
   import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
   import Button from '../elements/buttons/button.svelte';
+  import { setUser } from '$lib/stores/user.store';
 
   export let user: UserResponseDto;
 
@@ -22,6 +23,7 @@
       });
 
       Object.assign(user, data);
+      setUser(data);
 
       notificationController.show({
         message: 'Saved profile',

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

@@ -2,7 +2,7 @@
   import { browser } from '$app/environment';
   import { page } from '$app/stores';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { APIKeyResponseDto, AuthDeviceResponseDto, oauth, UserResponseDto } from '@api';
+  import { APIKeyResponseDto, AuthDeviceResponseDto, oauth } from '@api';
   import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
   import ChangePasswordSettings from './change-password-settings.svelte';
   import DeviceList from './device-list.svelte';
@@ -13,8 +13,7 @@
   import SidebarSettings from './sidebar-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
-
-  export let user: UserResponseDto;
+  import { user } from '$lib/stores/user.store';
 
   export let keys: APIKeyResponseDto[] = [];
   export let devices: AuthDeviceResponseDto[] = [];
@@ -26,7 +25,7 @@
 </script>
 
 <SettingAccordion title="Account" subtitle="Manage your account">
-  <UserProfileSettings {user} />
+  <UserProfileSettings user={$user} />
 </SettingAccordion>
 
 <SettingAccordion title="API Keys" subtitle="Manage your API keys">
@@ -42,7 +41,7 @@
 </SettingAccordion>
 
 <SettingAccordion title="Memories" subtitle="Manage what you see in your memories.">
-  <MemoriesSettings {user} />
+  <MemoriesSettings user={$user} />
 </SettingAccordion>
 
 {#if $featureFlags.loaded && $featureFlags.oauth}
@@ -51,7 +50,7 @@
     subtitle="Manage your OAuth connection"
     isOpen={oauthOpen || $page.url.searchParams.get('open') === 'oauth'}
   >
-    <OAuthSettings {user} />
+    <OAuthSettings user={$user} />
   </SettingAccordion>
 {/if}
 
@@ -60,7 +59,7 @@
 </SettingAccordion>
 
 <SettingAccordion title="Sharing" subtitle="Manage sharing with partners">
-  <PartnerSettings {user} />
+  <PartnerSettings user={$user} />
 </SettingAccordion>
 
 <SettingAccordion title="Sidebar" subtitle="Manage sidebar settings">