refactor(web): tree data structure for folder and tag views (#18980)

* refactor folder view

inline link

* improved tree collapsing

* handle tags

* linting

* formatting

* simplify

* .from is faster

* simplify

* add key

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

@@ -1,4 +1,5 @@
 import { eventManager } from '$lib/managers/event-manager.svelte';
+import { TreeNode } from '$lib/utils/tree-utils';
 import {
   getAssetsByOriginalPath,
   getUniqueOriginalPaths,
@@ -13,47 +14,41 @@ type AssetCache = {
 };
 
 class FoldersStore {
+  folders = $state.raw<TreeNode | null>(null);
   private initialized = false;
-  uniquePaths = $state<string[]>([]);
-  assets = $state<AssetCache>({});
+  private assets = $state<AssetCache>({});
 
   constructor() {
     eventManager.on('auth.logout', () => this.clearCache());
   }
 
-  async fetchUniquePaths() {
+  async fetchTree(): Promise<TreeNode> {
     if (this.initialized) {
-      return;
+      return this.folders!;
     }
     this.initialized = true;
 
-    const uniquePaths = await getUniqueOriginalPaths();
-    this.uniquePaths.push(...uniquePaths);
+    this.folders = TreeNode.fromPaths(await getUniqueOriginalPaths());
+    this.folders.collapse();
+    return this.folders;
   }
 
   bustAssetCache() {
     this.assets = {};
   }
 
-  async refreshAssetsByPath(path: string | null) {
-    if (!path) {
-      return;
-    }
-    this.assets[path] = await getAssetsByOriginalPath({ path });
+  async refreshAssetsByPath(path: string) {
+    return (this.assets[path] = await getAssetsByOriginalPath({ path }));
   }
 
   async fetchAssetsByPath(path: string) {
-    if (this.assets[path]) {
-      return;
-    }
-
-    this.assets[path] = await getAssetsByOriginalPath({ path });
+    return (this.assets[path] ??= await getAssetsByOriginalPath({ path }));
   }
 
   clearCache() {
     this.initialized = false;
-    this.uniquePaths = [];
     this.assets = {};
+    this.folders = null;
   }
 }