refactor(web): folder view (#11967)

refactor(web): tree view

web/src/lib/components/shared-components/side-bar/folder-browser-sidebar.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { page } from '$app/stores';
-  import FolderTree from '$lib/components/folder-tree/folder-tree.svelte';
-  import { buildFolderTree, type RecursiveObject } from '$lib/utils/folder-utils';
-  import { foldersStore } from '$lib/stores/folders.store';
-  import { get } from 'svelte/store';
-  import { t } from 'svelte-i18n';
-
-  let folderTree: RecursiveObject = {};
-  $: currentPath = $page.url.searchParams.get('folder') || '';
-
-  onMount(async () => {
-    await foldersStore.fetchUniquePaths();
-  });
-
-  $: {
-    const { uniquePaths } = get(foldersStore);
-    if (uniquePaths && uniquePaths.length > 0) {
-      folderTree = buildFolderTree(uniquePaths);
-    }
-  }
-</script>
-
-<section id="folder-browser-sidebar">
-  <div class="text-xs pl-4 mb-4 dark:text-white">{$t('explorer').toUpperCase()}</div>
-  <div class="overflow-auto pb-10 immich-scrollbar">
-    {#each Object.entries(folderTree) as [folderName, content]}
-      <FolderTree {folderName} {content} {currentPath} basePath="" />
-    {/each}
-  </div>
-</section>

web/src/lib/components/shared-components/side-bar/folder-side-bar.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-  import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
-  import FolderBrowserSidebar from '$lib/components/shared-components/side-bar/folder-browser-sidebar.svelte';
-</script>
-
-<SideBarSection>
-  <FolderBrowserSidebar />
-</SideBarSection>

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}