chore: cleanup

web/eslint.config.js

@@ -130,6 +130,7 @@ export default typescriptEslint.config(
       '@typescript-eslint/require-await': 'error',
       'object-shorthand': ['error', 'always'],
       'svelte/no-navigation-without-resolve': 'off',
+      'svelte/no-unnecessary-state-wrap': ['error', { allowReassign: true }],
     },
   },
   {

web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte

@@ -4,16 +4,16 @@
   import Portal from '$lib/elements/Portal.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { duplicateTiePreference } from '$lib/stores/duplicate-tie-preferences-manager.svelte';
   import { handlePromiseError } from '$lib/utils';
+  import { suggestBestDuplicate } from '$lib/utils/duplicate-utils';
   import { navigate } from '$lib/utils/navigation';
   import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
   import { Button } from '@immich/ui';
   import { mdiCheck, mdiImageMultipleOutline, mdiTrashCanOutline } from '@mdi/js';
-  import { onDestroy, onMount } from 'svelte';
+  import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
-  import { duplicateTiePreference } from '$lib/stores/duplicate-tie-preferences.svelte';
-  import { suggestBestDuplicate } from '$lib/utils/duplicate-utils';
   interface Props {
     assets: AssetResponseDto[];
     onResolve: (duplicateAssetIds: string[], trashIds: string[]) => void;
@@ -116,7 +116,7 @@
   ]}
 />
 
-<div class="rounded-3xl border dark:border-2 border-gray-300 dark:border-gray-700 max-w-256 mx-auto mb-4 py-6 px-0.2">
+<div class="rounded-3xl border dark:border-2 border-gray-300 dark:border-gray-700 max-w-5xl mx-auto mb-4 py-6 px-0.2">
   <div class="flex flex-wrap gap-y-6 mb-4 px-6 w-full place-content-end justify-between">
     <!-- MARK ALL BUTTONS -->
     <div class="flex text-xs text-black">

web/src/lib/modals/DuplicatesSettingsModal.svelte

@@ -1,99 +1,86 @@
 <script lang="ts">
-  import { Modal, ModalBody, Button, Text } from '@immich/ui';
-  import { t } from 'svelte-i18n';
   import {
     duplicateTiePreference,
     findDuplicateTiePreference,
-    type SourcePreference,
     setDuplicateTiePreference,
-  } from '$lib/stores/duplicate-tie-preferences.svelte';
+  } from '$lib/stores/duplicate-tie-preferences-manager.svelte';
+  import { Button, ConfirmModal, Text, VStack } from '@immich/ui';
   import { mdiCogOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    onClose: () => void;
+  };
 
-  let { onClose }: Props = $props();
+  const { onClose }: Props = $props();
 
   let tiePreferenceLocal = $state(duplicateTiePreference.value);
 
-  interface Props {
-    onClose: () => void;
-  }
-
-  const confirm = () => {
+  const handleConfirm = () => {
     setDuplicateTiePreference(tiePreferenceLocal);
     onClose();
   };
 
-  const resetToDefault = () => {
-    tiePreferenceLocal = undefined;
-  };
-
-  const makeSourcePref = (priority: 'internal' | 'external'): SourcePreference => ({ variant: 'source', priority });
+  const makeSourcePreference = (priority: 'internal' | 'external') => ({
+    variant: 'source' as const,
+    priority,
+  });
 </script>
 
-<Modal title={$t('duplicates_settings')} {onClose} icon={mdiCogOutline}>
-  <ModalBody>
-    <div class="space-y-3">
-      <section class="rounded-2xl border dark:border-2 border-gray-300 dark:border-gray-700 p-4">
-        <h4 class="text-sm font-semibold mb-3">{$t('deduplicate_source_preference')}</h4>
+<ConfirmModal
+  title={$t('duplicates_settings')}
+  icon={mdiCogOutline}
+  confirmColor="primary"
+  confirmText={$t('save')}
+  onClose={(confirmed) => (confirmed ? handleConfirm() : onClose())}
+>
+  {#snippet promptSnippet()}
+    <VStack class="items-start">
+      <Text class="font-bold">{$t('deduplicate_source_preference')}</Text>
 
-        <div
-          class="inline-flex rounded-full overflow-hidden border border-gray-700"
-          role="group"
-          aria-label={$t('duplicates_settings')}
+      <div
+        class="inline-flex rounded-full overflow-hidden border border-gray-700"
+        role="group"
+        aria-label={$t('duplicates_settings')}
+      >
+        <Button
+          size="small"
+          variant="ghost"
+          class="rounded-none"
+          color={findDuplicateTiePreference(tiePreferenceLocal, 'source')?.priority === 'external'
+            ? 'primary'
+            : 'secondary'}
+          aria-pressed={findDuplicateTiePreference(tiePreferenceLocal, 'source')?.priority === 'external'}
+          title={$t('deduplicate_prefer_external')}
+          onclick={() => (tiePreferenceLocal = [makeSourcePreference('external')])}
         >
-          <Button
-            size="small"
-            variant="ghost"
-            class="rounded-none"
-            color={findDuplicateTiePreference(tiePreferenceLocal, 'source')?.priority === 'external'
-              ? 'primary'
-              : 'secondary'}
-            aria-pressed={findDuplicateTiePreference(tiePreferenceLocal, 'source')?.priority === 'external'}
-            title={$t('deduplicate_prefer_external')}
-            onclick={() => (tiePreferenceLocal = [makeSourcePref('external')])}
-          >
-            <Text class="hidden md:block">{$t('deduplicate_prefer_external')}</Text>
-          </Button>
-          <Button
-            size="small"
-            variant="ghost"
-            class="rounded-none"
-            color={tiePreferenceLocal === undefined ? 'primary' : 'secondary'}
-            aria-pressed={tiePreferenceLocal === undefined}
-            title={$t('deduplicate_prefer_default')}
-            onclick={() => (tiePreferenceLocal = undefined)}
-          >
-            <Text class="hidden md:block">{$t('deduplicate_prefer_default')}</Text>
-          </Button>
-          <Button
-            size="small"
-            variant="ghost"
-            class="rounded-none"
-            color={findDuplicateTiePreference(tiePreferenceLocal, 'source')?.priority === 'internal'
-              ? 'primary'
-              : 'secondary'}
-            aria-pressed={findDuplicateTiePreference(tiePreferenceLocal, 'source')?.priority === 'internal'}
-            title={$t('deduplicate_prefer_internal')}
-            onclick={() => (tiePreferenceLocal = [makeSourcePref('internal')])}
-          >
-            <Text class="hidden md:block">{$t('deduplicate_prefer_internal')}</Text>
-          </Button>
-        </div>
-      </section>
-
-      <div class="flex items-center justify-between gap-2 pt-2">
-        <Button size="small" variant="ghost" color="secondary" onclick={resetToDefault}>
-          <Text>{$t('reset_to_default')}</Text>
+          <Text class="hidden md:block">{$t('deduplicate_prefer_external')}</Text>
+        </Button>
+        <Button
+          size="small"
+          variant="ghost"
+          class="rounded-none"
+          color={tiePreferenceLocal === undefined ? 'primary' : 'secondary'}
+          aria-pressed={tiePreferenceLocal === undefined}
+          title={$t('deduplicate_prefer_default')}
+          onclick={() => (tiePreferenceLocal = undefined)}
+        >
+          <Text class="hidden md:block">{$t('deduplicate_prefer_default')}</Text>
+        </Button>
+        <Button
+          size="small"
+          variant="ghost"
+          class="rounded-none"
+          color={findDuplicateTiePreference(tiePreferenceLocal, 'source')?.priority === 'internal'
+            ? 'primary'
+            : 'secondary'}
+          aria-pressed={findDuplicateTiePreference(tiePreferenceLocal, 'source')?.priority === 'internal'}
+          title={$t('deduplicate_prefer_internal')}
+          onclick={() => (tiePreferenceLocal = [makeSourcePreference('internal')])}
+        >
+          <Text class="hidden md:block">{$t('deduplicate_prefer_internal')}</Text>
         </Button>
-
-        <div class="flex items-center gap-2">
-          <Button size="small" variant="ghost" color="secondary" onclick={onClose}>
-            <Text>{$t('cancel')}</Text>
-          </Button>
-          <Button size="small" color="primary" onclick={confirm}>
-            <Text>{$t('confirm')}</Text>
-          </Button>
-        </div>
       </div>
-    </div>
-  </ModalBody>
-</Modal>
+    </VStack>
+  {/snippet}
+</ConfirmModal>

web/src/lib/stores/duplicate-tie-preferences-manager.svelte.ts

@@ -10,20 +10,15 @@ export type DuplicateTiePreferencesSvelte = PreferenceDuplicateTieItem[];
 
 export type PreferenceDuplicateTieItem = SourcePreference;
 
-export let duplicateTiePreference = $state<{
+export const duplicateTiePreference = $state<{
   value: DuplicateTiePreferencesSvelte | undefined;
 }>({ value: undefined });
 
 export const findDuplicateTiePreference = <T extends PreferenceDuplicateTieItem['variant']>(
   preference: DuplicateTiePreferencesSvelte | undefined,
   variant: T,
-): Extract<PreferenceDuplicateTieItem, { variant: T }> | undefined =>
-  preference?.find(
-    (preference): preference is Extract<PreferenceDuplicateTieItem, { variant: T }> => preference.variant === variant,
-  );
+) => preference?.find((preference) => preference.variant === variant);
 
-export function setDuplicateTiePreference(
-  nextDuplicateTiePreferences: DuplicateTiePreferencesSvelte | undefined,
-): void {
+export function setDuplicateTiePreference(nextDuplicateTiePreferences: DuplicateTiePreferencesSvelte | undefined) {
   duplicateTiePreference.value = nextDuplicateTiePreferences;
 }

web/src/lib/utils/duplicate-utils.spec.ts

@@ -1,4 +1,4 @@
-import type { SourcePreference } from '$lib/stores/duplicate-tie-preferences.svelte';
+import type { SourcePreference } from '$lib/stores/duplicate-tie-preferences-manager.svelte';
 import { suggestBestDuplicate } from '$lib/utils/duplicate-utils';
 import type { AssetResponseDto } from '@immich/sdk';
 

web/src/lib/utils/duplicate-utils.ts

@@ -1,12 +1,11 @@
 import {
   type DuplicateTiePreferencesSvelte,
   findDuplicateTiePreference,
-} from '$lib/stores/duplicate-tie-preferences.svelte';
+} from '$lib/stores/duplicate-tie-preferences-manager.svelte';
 import { getExifCount } from '$lib/utils/exif-utils';
 import type { AssetResponseDto } from '@immich/sdk';
 
 const sizeOf = (asset: AssetResponseDto) => asset.exifInfo?.fileSizeInByte ?? 0;
-const isExternal = (asset: AssetResponseDto) => Boolean(asset.libraryId);
 
 /**
  * Suggests the best duplicate asset to keep from a list of duplicates.
@@ -16,16 +15,12 @@ const isExternal = (asset: AssetResponseDto) => Boolean(asset.libraryId);
  *  - Largest count of exif data
  *  - Optional source preference (internal vs external)
  *
- * @param assets List of duplicate assets
- * @param preference Preference for selecting duplicates
- * @returns The best asset to keep
- *
  */
 export function suggestBestDuplicate(
   assets: AssetResponseDto[],
   preference: DuplicateTiePreferencesSvelte | undefined,
 ): AssetResponseDto | undefined {
-  if (!assets.length) {
+  if (assets.length === 0) {
     return;
   }
   let candidates = filterBySizeAndExif(assets);
@@ -38,11 +33,11 @@ export function suggestBestDuplicate(
 }
 
 const filterBySizeAndExif = (assets: AssetResponseDto[]): AssetResponseDto[] => {
-  const maxSize = Math.max(...assets.map(sizeOf));
-  const sizeFiltered = assets.filter((assets) => sizeOf(assets) === maxSize);
+  const maxSize = Math.max(...assets.map((asset) => sizeOf(asset)));
+  const sizeFilteredAssets = assets.filter((assets) => sizeOf(assets) === maxSize);
 
-  const maxExif = Math.max(...sizeFiltered.map(getExifCount));
-  return sizeFiltered.filter((assets) => getExifCount(assets) === maxExif);
+  const maxExif = Math.max(...sizeFilteredAssets.map((asset) => getExifCount(asset)));
+  return sizeFilteredAssets.filter((assets) => getExifCount(assets) === maxExif);
 };
 
 const filterBySource = (assets: AssetResponseDto[], priority: 'internal' | 'external'): AssetResponseDto[] => {

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -7,30 +7,30 @@
   import { AppRoute } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import DuplicatesInformationModal from '$lib/modals/DuplicatesInformationModal.svelte';
+  import DuplicatesSettingsModal from '$lib/modals/DuplicatesSettingsModal.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { duplicateTiePreference } from '$lib/stores/duplicate-tie-preferences-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { stackAssets } from '$lib/utils/asset-utils';
+  import { suggestBestDuplicate } from '$lib/utils/duplicate-utils';
   import { handleError } from '$lib/utils/handle-error';
   import type { AssetResponseDto } from '@immich/sdk';
   import { deleteAssets, deleteDuplicates, updateAssets } from '@immich/sdk';
-  import DuplicatesSettingsModal from '$lib/modals/DuplicatesSettingsModal.svelte';
   import { Button, HStack, IconButton, modalManager, Text, toastManager } from '@immich/ui';
   import {
     mdiCheckOutline,
     mdiChevronLeft,
     mdiChevronRight,
+    mdiCogOutline,
     mdiInformationOutline,
     mdiKeyboard,
     mdiPageFirst,
     mdiPageLast,
     mdiTrashCanOutline,
-    mdiCogOutline,
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import { duplicateTiePreference } from '$lib/stores/duplicate-tie-preferences.svelte';
-  import { suggestBestDuplicate } from '$lib/utils/duplicate-utils';
 
   interface Props {
     data: PageData;
@@ -127,16 +127,12 @@
   };
 
   const handleDeduplicateAll = async () => {
-    const keepCandidates = duplicates.map((group) => suggestBestDuplicate(group.assets, duplicateTiePreference.value));
-
-    const idsToKeep: (string | undefined)[] = keepCandidates.map((assets) => assets?.id);
+    const idsToKeep = duplicates.map((group) => suggestBestDuplicate(group.assets, duplicateTiePreference.value)?.id);
 
     const idsToDelete = duplicates.flatMap((group, i) =>
-      group.assets.map((asset) => asset.id).filter((id) => id !== idsToKeep[i]),
+      group.assets.map(({ id }) => id).filter((id) => id !== idsToKeep[i]),
     );
 
-    const keptIds = idsToKeep.filter((id): id is string => id !== undefined);
-
     let prompt, confirmText;
     if (featureFlagsManager.value.trash) {
       prompt = $t('bulk_trash_duplicates_confirmation', { values: { count: idsToDelete.length } });
@@ -151,7 +147,7 @@
         await deleteAssets({ assetBulkDeleteDto: { ids: idsToDelete, force: !featureFlagsManager.value.trash } });
         await updateAssets({
           assetBulkUpdateDto: {
-            ids: [...idsToDelete, ...keptIds],
+            ids: [...idsToDelete, ...idsToKeep.filter((id) => id !== undefined)],
             duplicateId: null,
           },
         });