refactor(web): folder view (#11967)

refactor(web): tree view

web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,7 +1,9 @@
+import { QueryParameter } from '$lib/constants';
 import { foldersStore } from '$lib/stores/folders.store';
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
 import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
@@ -14,25 +16,24 @@ export const load = (async ({ params, url }) => {
   const { uniquePaths } = get(foldersStore);
 
   let pathAssets = null;
-  const path = url.searchParams.get('folder');
 
+  const path = url.searchParams.get(QueryParameter.PATH);
   if (path) {
     await foldersStore.fetchAssetsByPath(path);
     const { assets } = get(foldersStore);
     pathAssets = assets[path] || null;
   }
 
-  const currentPath = path ? `${path}/`.replaceAll('//', '/') : '';
-
-  const currentFolders = (uniquePaths || [])
-    .filter((path) => path.startsWith(currentPath) && path !== currentPath)
-    .map((path) => path.replaceAll(currentPath, '').split('/')[0])
-    .filter((value, index, self) => self.indexOf(value) === index);
+  let tree = buildTree(uniquePaths || []);
+  const parts = normalizeTreePath(path || '').split('/');
+  for (const part of parts) {
+    tree = tree?.[part];
+  }
 
   return {
     asset,
     path,
-    currentFolders,
+    currentFolders: Object.keys(tree || {}),
     pathAssets,
     meta: {
       title: $t('folders'),