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/components/shared-components/tree/tree-items.svelte

@@ -1,28 +1,21 @@
 <script lang="ts">
   import Tree from '$lib/components/shared-components/tree/tree.svelte';
-  import { normalizeTreePath, type RecursiveObject } from '$lib/utils/tree-utils';
+  import { type TreeNode } from '$lib/utils/tree-utils';
 
   interface Props {
-    items: RecursiveObject;
-    parent?: string;
-    active?: string;
+    tree: TreeNode;
+    active: string;
     icons: { default: string; active: string };
     getLink: (path: string) => string;
-    getColor?: (path: string) => string | undefined;
   }
 
-  let { items, parent = '', active = '', icons, getLink, getColor = () => undefined }: Props = $props();
+  let { tree, active, icons, getLink }: Props = $props();
 </script>
 
 <ul class="list-none ms-2">
-  <!-- eslint-disable-next-line svelte/require-each-key -->
-  {#each Object.entries(items).sort() as [path, tree]}
-    {@const value = normalizeTreePath(`${parent}/${path}`)}
-    {@const key = value + getColor(value)}
-    {#key key}
-      <li>
-        <Tree {parent} value={path} {tree} {icons} {active} {getLink} {getColor} />
-      </li>
-    {/key}
+  {#each tree.children as node (node.color ? node.path + node.color : node.path)}
+    <li>
+      <Tree {node} {icons} {active} {getLink} />
+    </li>
   {/each}
 </ul>