refactor: convert download manager into a state class (#17491)

* fix(web): download progress bar not functioning

* remove unused method

web/src/lib/components/asset-viewer/download-panel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type DownloadProgress, downloadAssets, downloadManager, isDownloading } from '$lib/stores/download';
+  import { type DownloadProgress, downloadManager, downloadStore } from '$lib/stores/download-store.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { fly, slide } from 'svelte/transition';
   import { getByteUnitString } from '../../utils/byte-units';
@@ -13,15 +13,15 @@
   };
 </script>
 
-{#if $isDownloading}
+{#if downloadStore.isDownloading}
   <div
     transition:fly={{ x: -100, duration: 350 }}
     class="fixed bottom-10 left-2 z-[10000] max-h-[270px] w-[315px] rounded-2xl border bg-immich-bg p-4 text-sm shadow-sm"
   >
     <p class="mb-2 text-xs text-gray-500">{$t('downloading').toUpperCase()}</p>
     <div class="my-2 mb-2 flex max-h-[200px] flex-col overflow-y-auto text-sm">
-      {#each Object.keys($downloadAssets) as downloadKey (downloadKey)}
+      {#each Object.keys(downloadStore.assets) as downloadKey (downloadKey)}
-        {@const download = $downloadAssets[downloadKey]}
+        {@const download = downloadStore.assets[downloadKey]}
         <div class="mb-2 flex place-items-center" transition:slide>
           <div class="w-full pr-10">
             <div class="flex place-items-center justify-between gap-2 text-xs font-medium">
@@ -31,7 +31,7 @@
               {/if}
             </div>
             <div class="flex place-items-center gap-2">
-              <div class="h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
+              <div class="h-[7px] w-full rounded-full bg-gray-200">
                 <div class="h-[7px] rounded-full bg-immich-primary" style={`width: ${download.percentage}%`}></div>
               </div>
               <p class="min-w-[4em] whitespace-nowrap text-right">

web/src/lib/stores/download-store.svelte.ts

@@ -0,0 +1,51 @@
+export interface DownloadProgress {
+  progress: number;
+  total: number;
+  percentage: number;
+  abort: AbortController | null;
+}
+
+class DownloadStore {
+  assets = $state<Record<string, DownloadProgress>>({});
+
+  isDownloading = $derived(Object.keys(this.assets).length > 0);
+
+  #update(key: string, value: Partial<DownloadProgress> | null) {
+    if (value === null) {
+      delete this.assets[key];
+      return;
+    }
+
+    if (!this.assets[key]) {
+      this.assets[key] = { progress: 0, total: 0, percentage: 0, abort: null };
+    }
+
+    const item = this.assets[key];
+    Object.assign(item, value);
+    item.percentage = Math.min(Math.floor((item.progress / item.total) * 100), 100);
+  }
+
+  add(key: string, total: number, abort?: AbortController) {
+    this.#update(key, { total, abort });
+  }
+
+  clear(key: string) {
+    this.#update(key, null);
+  }
+
+  update(key: string, progress: number, total?: number) {
+    const download: Partial<DownloadProgress> = { progress };
+    if (total !== undefined) {
+      download.total = total;
+    }
+    this.#update(key, download);
+  }
+}
+
+export const downloadStore = new DownloadStore();
+
+export const downloadManager = {
+  add: (key: string, total: number, abort?: AbortController) => downloadStore.add(key, total, abort),
+  clear: (key: string) => downloadStore.clear(key),
+  update: (key: string, progress: number, total?: number) => downloadStore.update(key, progress, total),
+};

web/src/lib/stores/download.ts

@@ -1,48 +0,0 @@
-import { derived, writable } from 'svelte/store';
-
-export interface DownloadProgress {
-  progress: number;
-  total: number;
-  percentage: number;
-  abort: AbortController | null;
-}
-
-export const downloadAssets = writable<Record<string, DownloadProgress>>({});
-
-export const isDownloading = derived(downloadAssets, ($downloadAssets) => {
-  return Object.keys($downloadAssets).length > 0;
-});
-
-const update = (key: string, value: Partial<DownloadProgress> | null) => {
-  downloadAssets.update((state) => {
-    const newState = { ...state };
-
-    if (value === null) {
-      delete newState[key];
-      return newState;
-    }
-
-    if (!newState[key]) {
-      newState[key] = { progress: 0, total: 0, percentage: 0, abort: null };
-    }
-
-    const item = newState[key];
-    Object.assign(item, value);
-    item.percentage = Math.min(Math.floor((item.progress / item.total) * 100), 100);
-    newState[key] = { ...item };
-
-    return newState;
-  });
-};
-
-export const downloadManager = {
-  add: (key: string, total: number, abort?: AbortController) => update(key, { total, abort }),
-  clear: (key: string) => update(key, null),
-  update: (key: string, progress: number, total?: number) => {
-    const download: Partial<DownloadProgress> = { progress };
-    if (total !== undefined) {
-      download.total = total;
-    }
-    update(key, download);
-  },
-};

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

@@ -5,7 +5,7 @@ import { NotificationType, notificationController } from '$lib/components/shared
 import { AppRoute } from '$lib/constants';
 import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 import { assetsSnapshot, isSelectingAllAssets, type AssetStore } from '$lib/stores/assets-store.svelte';
-import { downloadManager } from '$lib/stores/download';
+import { downloadManager } from '$lib/stores/download-store.svelte';
 import { preferences } from '$lib/stores/user.store';
 import { downloadRequest, getKey, withError } from '$lib/utils';
 import { createAlbum } from '$lib/utils/album-utils';

web/src/routes/admin/repair/+page.svelte

@@ -7,7 +7,7 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import { downloadManager } from '$lib/stores/download';
+  import { downloadManager } from '$lib/stores/download-store.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { copyToClipboard } from '$lib/utils';
   import { downloadBlob } from '$lib/utils/asset-utils';

web/src/routes/admin/system-settings/+page.svelte

@@ -22,7 +22,7 @@
   import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import { QueryParameter } from '$lib/constants';
-  import { downloadManager } from '$lib/stores/download';
+  import { downloadManager } from '$lib/stores/download-store.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { copyToClipboard } from '$lib/utils';
   import { downloadBlob } from '$lib/utils/asset-utils';