feat: folder view (#11880)

* feat: folder view poc * fix(folder-view): ui modifications * fix(folder-view): improves utility return types * fix(folder-view): update getAssetsByOriginalPath Endpoint now only returns direct children of the path instead of all images in all subfolders. Functions renamed and scoped to "folder", endpoints renamed * fix(folder-view): improve typing * fix(folder-view): replaces css with tailwind * fix(folder-view): includes folders in main panel * feat(folder-view): folder cache implementation * fix(folder-view): can now search for absolute paths * fix(folder-view): sets default sort to alphabetical by filename * refactor/styling the browser view * double click to navigate * folder tree * use correct side bar icon * styling when selected * correct open icon * folder layout * return assetReponseDto * it's alive * update new api * more styling for folder tree * use query params and path viewer * use arrow up left for parent folder backward navigation * use arrow up left for parent folder backward navigation * encode URL * handle long folder name * refactor to the view controller * remove unused code * clear cache when logout * cleaning up * cleaning up web * clean as new * clean as new * pr feedback + show asset name * add tests * add tests * remove generated file * lint * revert docker-compose.dev file * Update server/src/services/view.service.ts Co-authored-by: Jason Rasmussen <jason@rasm.me> * Update server/src/services/view.service.ts Co-authored-by: Jason Rasmussen <jason@rasm.me> --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com> Co-authored-by: Jason Rasmussen <jason@rasm.me>
2025-12-23 17:25:11 +03:00 · 2024-08-21 19:49:37 +01:00
parent 6cf5906813
commit 07538299cf
28 changed files with 843 additions and 1 deletions
--- a/web/src/lib/stores/folders.store.ts
+++ b/web/src/lib/stores/folders.store.ts
@@ -0,0 +1,69 @@
+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();