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
2025-11-14 17:36:12 +00:00 · 2024-08-29 14:29:04 -05:00 · 2024-08-29 14:29:04 -05:00 · ebecb60f39
commit ebecb60f39
parent 9bfaa525db
32 changed files with 1418 additions and 296 deletions
--- a/web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte
@ -20,7 +20,7 @@
  };
 </script>

-{#if !isSharedLink() && $preferences?.rating?.enabled}
+{#if !isSharedLink() && $preferences?.ratings.enabled}
  <section class="px-4 pt-2">
    <StarRating {rating} readOnly={!isOwner} onRating={(rating) => handlePromiseError(handleChangeRating(rating))} />
  </section>
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@ -6,7 +6,7 @@
  import { boundingBoxesArray } from '$lib/stores/people.store';
  import { locale } from '$lib/stores/preferences.store';
  import { featureFlags } from '$lib/stores/server-config.store';
-  import { user } from '$lib/stores/user.store';
+  import { preferences, user } from '$lib/stores/user.store';
  import { getAssetThumbnailUrl, getPeopleThumbnailUrl, handlePromiseError, isSharedLink } from '$lib/utils';
  import { delay, isFlipped } from '$lib/utils/asset-utils';
  import {
@ -502,9 +502,11 @@
  </section>
 {/if}

-<section class="relative px-2 pb-12 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
-  <DetailPanelTags {asset} {isOwner} />
-</section>
+{#if $preferences?.tags?.enabled}
+  <section class="relative px-2 pb-12 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
+    <DetailPanelTags {asset} {isOwner} />
+  </section>
+{/if}

 {#if showEditFaces}
  <PersonSidePanel
--- a/web/src/lib/components/shared-components/settings/setting-accordion.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-accordion.svelte
@ -9,6 +9,7 @@
  export let subtitle = '';
  export let key: string;
  export let isOpen = $accordionState.has(key);
+  export let autoScrollTo = false;

  let accordionElement: HTMLDivElement;

@ -18,12 +19,14 @@
    if (isOpen) {
      $accordionState = $accordionState.add(key);

-      setTimeout(() => {
-        accordionElement.scrollIntoView({
-          behavior: 'smooth',
-          block: 'start',
-        });
-      }, 200);
+      if (autoScrollTo) {
+        setTimeout(() => {
+          accordionElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+          });
+        }, 200);
+      }
    } else {
      $accordionState.delete(key);
      $accordionState = $accordionState;
@ -72,7 +75,7 @@
  </button>

  {#if isOpen}
-    <ul transition:slide={{ duration: 250 }} class="mb-2 ml-4">
+    <ul transition:slide={{ duration: 150 }} class="mb-2 ml-4">
      <slot />
    </ul>
  {/if}
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@ -1,5 +1,4 @@
 <script lang="ts">
-  import { sidebarSettings } from '$lib/stores/preferences.store';
  import { featureFlags } from '$lib/stores/server-config.store';
  import {
    mdiAccount,
@ -29,6 +28,7 @@
  import MoreInformationAlbums from '$lib/components/shared-components/side-bar/more-information-albums.svelte';
  import { t } from 'svelte-i18n';
  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
+  import { preferences } from '$lib/stores/user.store';

  let isArchiveSelected: boolean;
  let isFavoritesSelected: boolean;
@ -52,6 +52,7 @@
        <MoreInformationAssets assetStats={{ isArchived: false }} />
      </svelte:fragment>
    </SideBarLink>
+
    {#if $featureFlags.search}
      <SideBarLink title={$t('explore')} routeId="/(user)/explore" icon={mdiMagnify} />
    {/if}
@ -65,7 +66,7 @@
      />
    {/if}

-    {#if $sidebarSettings.people}
+    {#if $preferences.people.enabled && $preferences.people.sidebarWeb}
      <SideBarLink
        title={$t('people')}
        routeId="/(user)/people"
@ -73,23 +74,23 @@
        icon={isPeopleSelected ? mdiAccount : mdiAccountOutline}
      />
    {/if}
-    {#if $sidebarSettings.sharing}
-      <SideBarLink
-        title={$t('sharing')}
-        routeId="/(user)/sharing"
-        icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
-        bind:isSelected={isSharingSelected}
-      >
-        <svelte:fragment slot="moreInformation">
-          <MoreInformationAlbums albumType="shared" />
-        </svelte:fragment>
-      </SideBarLink>
-    {/if}
+
+    <SideBarLink
+      title={$t('sharing')}
+      routeId="/(user)/sharing"
+      icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
+      bind:isSelected={isSharingSelected}
+    >
+      <svelte:fragment slot="moreInformation">
+        <MoreInformationAlbums albumType="shared" />
+      </svelte:fragment>
+    </SideBarLink>

    <div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
      <p class="hidden p-6 group-hover:sm:block md:block">{$t('library').toUpperCase()}</p>
      <hr class="mx-4 mb-[31px] mt-8 block group-hover:sm:hidden md:hidden" />
    </div>
+
    <SideBarLink
      title={$t('favorites')}
      routeId="/(user)/favorites"
@ -100,15 +101,20 @@
        <MoreInformationAssets assetStats={{ isFavorite: true }} />
      </svelte:fragment>
    </SideBarLink>
+
    <SideBarLink title={$t('albums')} routeId="/(user)/albums" icon={mdiImageAlbum} flippedLogo>
      <svelte:fragment slot="moreInformation">
        <MoreInformationAlbums albumType="owned" />
      </svelte:fragment>
    </SideBarLink>

-    <SideBarLink title={$t('tags')} routeId="/(user)/tags" icon={mdiTagMultipleOutline} flippedLogo />
+    {#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
+      <SideBarLink title={$t('tags')} routeId="/(user)/tags" icon={mdiTagMultipleOutline} flippedLogo />
+    {/if}

-    <SideBarLink title={$t('folders')} routeId="/(user)/folders" icon={mdiFolderOutline} flippedLogo />
+    {#if $preferences.folders.enabled && $preferences.folders.sidebarWeb}
+      <SideBarLink title={$t('folders')} routeId="/(user)/folders" icon={mdiFolderOutline} flippedLogo />
+    {/if}

    <SideBarLink
      title={$t('utilities')}
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/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>
--- a/web/src/lib/components/user-settings-page/feature-settings.svelte
+++ b/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>
--- a/web/src/lib/components/user-settings-page/memories-settings.svelte
+++ b/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>
--- a/web/src/lib/components/user-settings-page/user-settings-list.svelte
+++ b/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>