feat(server): user preferences (#9736)

* refactor(server): user endpoints

* feat(server): user preferences

* mobile: user preference

* wording

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

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

@@ -1,18 +1,18 @@
 <script lang="ts">
   import Button from '$lib/components/elements/buttons/button.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
   import { AppRoute } from '$lib/constants';
-  import { user } from '$lib/stores/user.store';
+  import { preferences, user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
-  import { deleteProfileImage, updateMyUser, type UserAvatarColor } from '@immich/sdk';
+  import { deleteProfileImage, updateMyPreferences, type UserAvatarColor } from '@immich/sdk';
   import { mdiCog, mdiLogout, mdiPencil } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import { notificationController, NotificationType } from '../notification/notification';
+  import { NotificationType, notificationController } from '../notification/notification';
   import UserAvatar from '../user-avatar.svelte';
   import AvatarSelector from './avatar-selector.svelte';
-  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   let isShowSelectAvatar = false;
 
@@ -27,14 +27,7 @@
         await deleteProfileImage();
       }
 
-      $user = await updateMyUser({
-        userUpdateMeDto: {
-          email: $user.email,
-          name: $user.name,
-          avatarColor: color,
-        },
-      });
-
+      $preferences = await updateMyPreferences({ userPreferencesUpdateDto: { avatar: { color } } });
       isShowSelectAvatar = false;
 
       notificationController.show({

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

@@ -3,20 +3,20 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { updateMyUser, type UserAdminResponseDto } from '@immich/sdk';
+  import { updateMyPreferences } from '@immich/sdk';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
 
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { preferences } from '$lib/stores/user.store';
   import Button from '../elements/buttons/button.svelte';
 
-  export let user: UserAdminResponseDto;
+  let memoriesEnabled = $preferences?.memories?.enabled ?? false;
 
   const handleSave = async () => {
     try {
-      const data = await updateMyUser({ userUpdateMeDto: { memoriesEnabled: user.memoriesEnabled } });
-
-      Object.assign(user, data);
+      const data = await updateMyPreferences({ userPreferencesUpdateDto: { memories: { enabled: memoriesEnabled } } });
+      $preferences.memories.enabled = data.memories.enabled;
 
       notificationController.show({ message: 'Saved settings', type: NotificationType.Info });
     } catch (error) {
@@ -34,7 +34,7 @@
             id="time-based-memories"
             title="Time-based memories"
             subtitle="Photos from previous years"
-            bind:checked={user.memoriesEnabled}
+            bind:checked={memoriesEnabled}
           />
         </div>
         <div class="flex justify-end">

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

@@ -42,7 +42,7 @@
   </SettingAccordion>
 
   <SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories">
-    <MemoriesSettings user={$user} />
+    <MemoriesSettings />
   </SettingAccordion>
 
   {#if $featureFlags.loaded && $featureFlags.oauth}

web/src/lib/stores/user.store.ts

@@ -1,7 +1,8 @@
-import type { UserAdminResponseDto } from '@immich/sdk';
+import { type UserAdminResponseDto, type UserPreferencesResponseDto } from '@immich/sdk';
 import { writable } from 'svelte/store';
 
 export const user = writable<UserAdminResponseDto>();
+export const preferences = writable<UserPreferencesResponseDto>();
 
 /**
  * Reset the store to its initial undefined value. Make sure to
@@ -9,4 +10,5 @@ export const user = writable<UserAdminResponseDto>();
  */
 export const resetSavedUser = () => {
   user.set(undefined as unknown as UserAdminResponseDto);
+  preferences.set(undefined as unknown as UserPreferencesResponseDto);
 };

web/src/lib/utils/auth.ts

@@ -1,7 +1,7 @@
 import { browser } from '$app/environment';
 import { serverInfo } from '$lib/stores/server-info.store';
-import { user } from '$lib/stores/user.store';
-import { getMyUser, getStorage } from '@immich/sdk';
+import { preferences as preferences$, user as user$ } from '$lib/stores/user.store';
+import { getMyPreferences, getMyUser, getStorage } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
 import { get } from 'svelte/store';
 import { AppRoute } from '../constants';
@@ -13,12 +13,14 @@ export interface AuthOptions {
 
 export const loadUser = async () => {
   try {
-    let loaded = get(user);
-    if (!loaded && hasAuthCookie()) {
-      loaded = await getMyUser();
-      user.set(loaded);
+    let user = get(user$);
+    let preferences = get(preferences$);
+    if ((!user || !preferences) && hasAuthCookie()) {
+      [user, preferences] = await Promise.all([getMyUser(), getMyPreferences()]);
+      user$.set(user);
+      preferences$.set(preferences);
     }
-    return loaded;
+    return user;
   } catch {
     return null;
   }
@@ -57,7 +59,7 @@ export const authenticate = async (options?: AuthOptions) => {
 };
 
 export const requestServerInfo = async () => {
-  if (get(user)) {
+  if (get(user$)) {
     const data = await getStorage();
     serverInfo.set(data);
   }