refactor: admin settings (#23843)

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -10,7 +10,7 @@
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { featureFlags } from '$lib/stores/server-config.store';
+  import { featureFlags } from '$lib/stores/system-config-manager.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { deleteAssets } from '$lib/utils/actions';
   import { archiveAssets, cancelMultiselect } from '$lib/utils/asset-utils';

web/src/lib/components/shared-components/map/map.svelte

@@ -14,7 +14,7 @@
   import { themeManager } from '$lib/managers/theme-manager.svelte';
   import MapSettingsModal from '$lib/modals/MapSettingsModal.svelte';
   import { mapSettings } from '$lib/stores/preferences.store';
-  import { serverConfig } from '$lib/stores/server-config.store';
+  import { serverConfig } from '$lib/stores/system-config-manager.svelte';
   import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
   import { Icon, modalManager } from '@immich/ui';

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

@@ -13,8 +13,8 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { notificationManager } from '$lib/stores/notification-manager.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
+  import { featureFlags } from '$lib/stores/system-config-manager.svelte';
   import { user } from '$lib/stores/user.store';
   import { Button, IconButton, Logo } from '@immich/ui';
   import { mdiBellBadge, mdiBellOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';

web/src/lib/components/shared-components/search-bar/search-text-section.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import RadioButton from '$lib/elements/RadioButton.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
+  import { featureFlags } from '$lib/stores/system-config-manager.svelte';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -72,7 +72,7 @@
 {:else if queryType === 'ocr'}
   <label for="ocr-input" class="immich-form-label">{$t('search_by_ocr')}</label>
   <input
-    class="immich-form-input hover:cursor-text w-full !mt-1"
+    class="immich-form-input hover:cursor-text w-full mt-1!"
     type="text"
     id="ocr-input"
     name="ocr"

web/src/lib/components/shared-components/settings/SystemConfigButtonRow.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { handleSystemConfigSave } from '$lib/services/system-config.service';
+  import { systemConfigManager } from '$lib/stores/system-config-manager.svelte';
+  import type { SystemConfigDto } from '@immich/sdk';
+  import { Button, toastManager } from '@immich/ui';
+  import { isEqual, pick } from 'lodash-es';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    disabled?: boolean;
+    keys: Array<keyof SystemConfigDto>;
+    configToEdit: SystemConfigDto;
+    onBeforeSave?: () => Promise<boolean>;
+  };
+
+  let { disabled, keys, configToEdit = $bindable(), onBeforeSave }: Props = $props();
+
+  const showResetToDefault = $derived(
+    !isEqual(pick(systemConfigManager.value, keys), pick(systemConfigManager.defaultValue, keys)),
+  );
+
+  const handleReset = () => {
+    configToEdit = systemConfigManager.cloneValue();
+    toastManager.info($t('admin.reset_settings_to_recent_saved'));
+  };
+
+  const handleResetToDefault = () => {
+    const defaultConfig = systemConfigManager.cloneDefaultValue();
+
+    configToEdit = { ...configToEdit, ...pick(defaultConfig, keys) };
+
+    toastManager.info($t('admin.reset_settings_to_default'));
+  };
+
+  const handleSave = async () => {
+    const shouldSave = await onBeforeSave?.();
+
+    if (shouldSave ?? true) {
+      await handleSystemConfigSave(pick(configToEdit, keys));
+    }
+  };
+</script>
+
+<div class="mt-8 flex justify-between gap-2">
+  <div class="left">
+    {#if showResetToDefault}
+      <Button variant="ghost" shape="round" size="small" onclick={handleResetToDefault}>
+        {$t('reset_to_default')}
+      </Button>
+    {/if}
+  </div>
+
+  <div class="flex gap-1">
+    <Button shape="round" {disabled} size="small" color="secondary" onclick={handleReset}>{$t('reset')}</Button>
+    <Button shape="round" type="submit" {disabled} size="small" onclick={handleSave}>{$t('save')}</Button>
+  </div>
+</div>

web/src/lib/components/shared-components/settings/setting-buttons-row.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import type { ResetOptions } from '$lib/utils/dipatch';
-  import { Button } from '@immich/ui';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    showResetToDefault?: boolean;
-    disabled?: boolean;
-    onReset: (options: ResetOptions) => void;
-    onSave: () => void;
-  }
-
-  let { showResetToDefault = true, disabled = false, onReset, onSave }: Props = $props();
-</script>
-
-<div class="mt-8 flex justify-between gap-2">
-  <div class="left">
-    {#if showResetToDefault}
-      <Button variant="ghost" shape="round" size="small" onclick={() => onReset({ default: true })}
-        >{$t('reset_to_default')}</Button
-      >
-    {/if}
-  </div>
-
-  <div class="flex gap-1">
-    <Button shape="round" {disabled} size="small" color="secondary" onclick={() => onReset({ default: false })}
-      >{$t('reset')}</Button
-    >
-    <Button shape="round" type="submit" {disabled} size="small" onclick={() => onSave()}>{$t('save')}</Button>
-  </div>
-</div>

web/src/lib/components/shared-components/side-bar/user-sidebar.svelte

@@ -4,7 +4,7 @@
   import RecentAlbums from '$lib/components/shared-components/side-bar/recent-albums.svelte';
   import Sidebar from '$lib/components/sidebar/sidebar.svelte';
   import { recentAlbumsDropdown } from '$lib/stores/preferences.store';
-  import { featureFlags } from '$lib/stores/server-config.store';
+  import { featureFlags } from '$lib/stores/system-config-manager.svelte';
   import { preferences } from '$lib/stores/user.store';
   import {
     mdiAccount,