feat: user's features preferences (#12099)

* feat: metadata in UserPreference

* feat: web metadata settings

* feat: web metadata settings

* fix: typo

* patch openapi

* fix: missing translation key

* new organization of preference strucutre

* feature settings on web

* localization

* added and used feature settings

* add default value to response dto

* patch openapi

* format en.json file

* implement helper method

* use tags preference logic

* Fix logic bug and add tests

* fix preference can be null in detail panel

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

@@ -11,7 +11,6 @@
     loopVideo,
     playVideoThumbnailOnHover,
     showDeleteModal,
-    sidebarSettings,
   } from '$lib/stores/preferences.store';
   import { findLocale } from '$lib/utils';
   import { getClosestAvailableLocale, langCodes } from '$lib/utils/i18n';
@@ -19,13 +18,6 @@
   import { locale as i18nLocale, t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import { invalidateAll } from '$app/navigation';
-  import { preferences } from '$lib/stores/user.store';
-  import { updateMyPreferences } from '@immich/sdk';
-  import { handleError } from '../../utils/handle-error';
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
 
   let time = new Date();
 
@@ -46,7 +38,6 @@
     label: findLocale(editedLocale).name || fallbackLocale.name,
   };
   $: closestLanguage = getClosestAvailableLocale([$lang], langCodes);
-  $: ratingEnabled = $preferences?.rating?.enabled;
 
   onMount(() => {
     const interval = setInterval(() => {
@@ -98,17 +89,6 @@
       $locale = newLocale;
     }
   };
-
-  const handleRatingChange = async (enabled: boolean) => {
-    try {
-      const data = await updateMyPreferences({ userPreferencesUpdateDto: { rating: { enabled } } });
-      $preferences.rating.enabled = data.rating.enabled;
-
-      notificationController.show({ message: $t('saved_settings'), type: NotificationType.Info });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_update_settings'));
-    }
-  };
 </script>
 
 <section class="my-4">
@@ -189,29 +169,6 @@
           bind:checked={$showDeleteModal}
         />
       </div>
-
-      <div class="ml-4">
-        <SettingSwitch
-          title={$t('people')}
-          subtitle={$t('people_sidebar_description')}
-          bind:checked={$sidebarSettings.people}
-        />
-      </div>
-      <div class="ml-4">
-        <SettingSwitch
-          title={$t('sharing')}
-          subtitle={$t('sharing_sidebar_description')}
-          bind:checked={$sidebarSettings.sharing}
-        />
-      </div>
-      <div class="ml-4">
-        <SettingSwitch
-          title={$t('rating')}
-          subtitle={$t('rating_description')}
-          bind:checked={ratingEnabled}
-          on:toggle={({ detail: enabled }) => handleRatingChange(enabled)}
-        />
-      </div>
     </div>
   </div>
 </section>

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

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  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';
+  import { t } from 'svelte-i18n';
+  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+
+  // Folders
+  let foldersEnabled = $preferences?.folders?.enabled ?? false;
+  let foldersSidebar = $preferences?.folders?.sidebarWeb ?? false;
+
+  // Memories
+  let memoriesEnabled = $preferences?.memories?.enabled ?? true;
+
+  // People
+  let peopleEnabled = $preferences?.people?.enabled ?? false;
+  let peopleSidebar = $preferences?.people?.sidebarWeb ?? false;
+
+  // Ratings
+  let ratingsEnabled = $preferences?.ratings?.enabled ?? false;
+
+  // Tags
+  let tagsEnabled = $preferences?.tags?.enabled ?? false;
+  let tagsSidebar = $preferences?.tags?.sidebarWeb ?? false;
+
+  const handleSave = async () => {
+    try {
+      const data = await updateMyPreferences({
+        userPreferencesUpdateDto: {
+          folders: { enabled: foldersEnabled, sidebarWeb: foldersSidebar },
+          memories: { enabled: memoriesEnabled },
+          people: { enabled: peopleEnabled, sidebarWeb: peopleSidebar },
+          ratings: { enabled: ratingsEnabled },
+          tags: { enabled: tagsEnabled, sidebarWeb: tagsSidebar },
+        },
+      });
+
+      $preferences = { ...data };
+
+      notificationController.show({ message: $t('saved_settings'), type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_update_settings'));
+    }
+  };
+</script>
+
+<section class="my-4">
+  <div in:fade={{ duration: 500 }}>
+    <form autocomplete="off" on:submit|preventDefault>
+      <div class="ml-4 mt-4 flex flex-col gap-4">
+        <SettingAccordion key="folders" title={$t('folders')} subtitle={$t('folders_feature_description')}>
+          <div class="ml-4 mt-6">
+            <SettingSwitch title={$t('enable')} bind:checked={foldersEnabled} />
+          </div>
+
+          {#if foldersEnabled}
+            <div class="ml-4 mt-6">
+              <SettingSwitch
+                title={$t('sidebar')}
+                subtitle={$t('sidebar_display_description')}
+                bind:checked={foldersSidebar}
+              />
+            </div>
+          {/if}
+        </SettingAccordion>
+
+        <SettingAccordion key="memories" title={$t('time_based_memories')} subtitle={$t('photos_from_previous_years')}>
+          <div class="ml-4 mt-6">
+            <SettingSwitch title={$t('enable')} bind:checked={memoriesEnabled} />
+          </div>
+        </SettingAccordion>
+
+        <SettingAccordion key="people" title={$t('people')} subtitle={$t('people_feature_description')}>
+          <div class="ml-4 mt-6">
+            <SettingSwitch title={$t('enable')} bind:checked={peopleEnabled} />
+          </div>
+
+          {#if peopleEnabled}
+            <div class="ml-4 mt-6">
+              <SettingSwitch
+                title={$t('sidebar')}
+                subtitle={$t('sidebar_display_description')}
+                bind:checked={peopleSidebar}
+              />
+            </div>
+          {/if}
+        </SettingAccordion>
+
+        <SettingAccordion key="rating" title={$t('rating')} subtitle={$t('rating_description')}>
+          <div class="ml-4 mt-6">
+            <SettingSwitch title={$t('enable')} bind:checked={ratingsEnabled} />
+          </div>
+        </SettingAccordion>
+
+        <SettingAccordion key="tags" title={$t('tags')} subtitle={$t('tag_feature_description')}>
+          <div class="ml-4 mt-6">
+            <SettingSwitch title={$t('enable')} bind:checked={tagsEnabled} />
+          </div>
+          {#if tagsEnabled}
+            <div class="ml-4 mt-6">
+              <SettingSwitch
+                title={$t('sidebar')}
+                subtitle={$t('sidebar_display_description')}
+                bind:checked={tagsSidebar}
+              />
+            </div>
+          {/if}
+        </SettingAccordion>
+
+        <div class="flex justify-end">
+          <Button type="submit" size="sm" on:click={() => handleSave()}>{$t('save')}</Button>
+        </div>
+      </div>
+    </form>
+  </div>
+</section>

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

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
-  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';
-  import { t } from 'svelte-i18n';
-
-  let memoriesEnabled = $preferences?.memories?.enabled ?? false;
-
-  const handleSave = async () => {
-    try {
-      const data = await updateMyPreferences({ userPreferencesUpdateDto: { memories: { enabled: memoriesEnabled } } });
-      $preferences.memories.enabled = data.memories.enabled;
-
-      notificationController.show({ message: $t('saved_settings'), type: NotificationType.Info });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_update_settings'));
-    }
-  };
-</script>
-
-<section class="my-4">
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" on:submit|preventDefault>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
-        <div class="ml-4">
-          <SettingSwitch
-            title={$t('time_based_memories')}
-            subtitle={$t('photos_from_previous_years')}
-            bind:checked={memoriesEnabled}
-          />
-        </div>
-        <div class="flex justify-end">
-          <Button type="submit" size="sm" on:click={() => handleSave()}>{$t('save')}</Button>
-        </div>
-      </div>
-    </form>
-  </div>
-</section>

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

@@ -10,7 +10,6 @@
   import AppSettings from './app-settings.svelte';
   import ChangePasswordSettings from './change-password-settings.svelte';
   import DeviceList from './device-list.svelte';
-  import MemoriesSettings from './memories-settings.svelte';
   import OAuthSettings from './oauth-settings.svelte';
   import PartnerSettings from './partner-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
@@ -19,6 +18,7 @@
   import { t } from 'svelte-i18n';
   import DownloadSettings from '$lib/components/user-settings-page/download-settings.svelte';
   import UserPurchaseSettings from '$lib/components/user-settings-page/user-purchase-settings.svelte';
+  import FeatureSettings from '$lib/components/user-settings-page/feature-settings.svelte';
 
   export let keys: ApiKeyResponseDto[] = [];
   export let sessions: SessionResponseDto[] = [];
@@ -53,8 +53,8 @@
     <DownloadSettings />
   </SettingAccordion>
 
-  <SettingAccordion key="memories" title={$t('memories')} subtitle={$t('memories_setting_description')}>
-    <MemoriesSettings />
+  <SettingAccordion key="feature" title={$t('features')} subtitle={$t('features_setting_description')}>
+    <FeatureSettings />
   </SettingAccordion>
 
   <SettingAccordion key="notifications" title={$t('notifications')} subtitle={$t('notifications_setting_description')}>
@@ -84,6 +84,7 @@
     key="user-purchase-settings"
     title={$t('user_purchase_settings')}
     subtitle={$t('user_purchase_settings_description')}
+    autoScrollTo={true}
   >
     <UserPurchaseSettings />
   </SettingAccordion>