refactor(web): folder view (#11967)

refactor(web): tree view

web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+
+  export let items: string[] = [];
+  export let icon: string;
+  export let onClick: (path: string) => void;
+</script>
+
+{#if items.length > 0}
+  <div
+    class="w-full grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-8 gap-2 bg-gray-50 dark:bg-immich-dark-gray/50 rounded-2xl border border-gray-100 dark:border-gray-900 max-h-[500px] overflow-auto immich-scrollbar"
+  >
+    {#each items as item}
+      <button
+        class="flex flex-col place-items-center gap-2 py-2 px-4 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/40 rounded-xl"
+        on:click={() => onClick(item)}
+        title={item}
+        type="button"
+      >
+        <Icon path={icon} class="text-immich-primary dark:text-immich-dark-primary" size={64} />
+        <p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full">{item}</p>
+      </button>
+    {/each}
+  </div>
+{/if}

web/src/lib/components/shared-components/tree/tree-items.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Tree from '$lib/components/shared-components/tree/tree.svelte';
+  import type { RecursiveObject } from '$lib/utils/tree-utils';
+
+  export let items: RecursiveObject;
+  export let parent = '';
+  export let active = '';
+  export let getLink: (path: string) => string;
+</script>
+
+<ul class="list-none ml-2">
+  {#each Object.entries(items) as [path, tree], index (index)}
+    <li>
+      <Tree {parent} value={path} {tree} {active} {getLink} />
+    </li>
+  {/each}
+</ul>

web/src/lib/components/shared-components/tree/tree.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
+  import { normalizeTreePath, type RecursiveObject } from '$lib/utils/tree-utils';
+  import { mdiChevronDown, mdiChevronRight, mdiFolder, mdiFolderOutline } from '@mdi/js';
+
+  export let tree: RecursiveObject;
+  export let parent: string;
+  export let value: string;
+  export let active = '';
+  export let getLink: (path: string) => string;
+
+  $: path = normalizeTreePath(`${parent}/${value}`);
+  $: isActive = active.startsWith(path);
+  $: isOpen = isActive;
+  $: isTarget = active === path;
+</script>
+
+<a
+  href={getLink(path)}
+  title={value}
+  class={`flex flex-grow place-items-center pl-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
+>
+  <button type="button" on:click|preventDefault={() => (isOpen = !isOpen)}>
+    <Icon path={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size={20} />
+  </button>
+  <div>
+    <Icon
+      path={isActive ? mdiFolder : mdiFolderOutline}
+      class={isActive ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400'}
+      size={20}
+    />
+  </div>
+  <span class="text-nowrap overflow-clip font-mono pl-1 pt-1">{value}</span>
+</a>
+
+{#if isOpen}
+  <TreeItems parent={path} items={tree} {active} {getLink} />
+{/if}