refactor(web): folders store (#14305)

* refactor(web): folders store

* use typescript private

web/src/lib/stores/folders.store.ts

@@ -1,69 +0,0 @@
-import {
-  getAssetsByOriginalPath,
-  getUniqueOriginalPaths,
-  /**
-   * TODO: Incorrect type
-   */
-  type AssetResponseDto,
-} from '@immich/sdk';
-import { get, writable } from 'svelte/store';
-
-type AssetCache = {
-  [path: string]: AssetResponseDto[];
-};
-
-type FoldersStore = {
-  uniquePaths: string[] | null;
-  assets: AssetCache;
-};
-
-function createFoldersStore() {
-  const initialState: FoldersStore = {
-    uniquePaths: null,
-    assets: {},
-  };
-
-  const { subscribe, set, update } = writable(initialState);
-
-  async function fetchUniquePaths() {
-    const state = get(foldersStore);
-
-    if (state.uniquePaths !== null) {
-      return;
-    }
-
-    const uniquePaths = await getUniqueOriginalPaths();
-    if (uniquePaths) {
-      update((state) => ({ ...state, uniquePaths }));
-    }
-  }
-
-  async function fetchAssetsByPath(path: string) {
-    const state = get(foldersStore);
-
-    if (state.assets[path]) {
-      return;
-    }
-
-    const assets = await getAssetsByOriginalPath({ path });
-    if (assets) {
-      update((state) => ({
-        ...state,
-        assets: { ...state.assets, [path]: assets },
-      }));
-    }
-  }
-
-  function clearCache() {
-    set(initialState);
-  }
-
-  return {
-    subscribe,
-    fetchUniquePaths,
-    fetchAssetsByPath,
-    clearCache,
-  };
-}
-
-export const foldersStore = createFoldersStore();

web/src/lib/stores/folders.svelte.ts

@@ -0,0 +1,45 @@
+import {
+  getAssetsByOriginalPath,
+  getUniqueOriginalPaths,
+  /**
+   * TODO: Incorrect type
+   */
+  type AssetResponseDto,
+} from '@immich/sdk';
+
+type AssetCache = {
+  [path: string]: AssetResponseDto[];
+};
+
+class FoldersStore {
+  private initialized = false;
+  uniquePaths = $state<string[]>([]);
+  assets = $state<AssetCache>({});
+
+  async fetchUniquePaths() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+
+    const uniquePaths = await getUniqueOriginalPaths();
+    this.uniquePaths.push(...uniquePaths);
+    this.uniquePaths.sort();
+  }
+
+  async fetchAssetsByPath(path: string) {
+    if (this.assets[path]) {
+      return;
+    }
+
+    this.assets[path] = await getAssetsByOriginalPath({ path });
+  }
+
+  clearCache() {
+    this.initialized = false;
+    this.uniquePaths = [];
+    this.assets = {};
+  }
+}
+
+export const foldersStore = new FoldersStore();

web/src/lib/utils/auth.ts

@@ -1,6 +1,6 @@
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
-import { foldersStore } from '$lib/stores/folders.store';
+import { foldersStore } from '$lib/stores/folders.svelte';
 import { purchaseStore } from '$lib/stores/purchase.store';
 import { serverInfo } from '$lib/stores/server-info.store';
 import { preferences as preferences$, resetSavedUser, user as user$ } from '$lib/stores/user.store';

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

@@ -7,8 +7,6 @@ export const normalizeTreePath = (path: string) => path.replace(/^\//, '').repla
 export function buildTree(paths: string[]) {
   const root: RecursiveObject = {};
 
-  paths.sort();
-
   for (const path of paths) {
     const parts = path.split('/');
     let current = root;