refactor(web): folder view (#11967)

refactor(web): tree view

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

@@ -1,65 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiChevronDown, mdiChevronRight, mdiFolder, mdiFolderEye, mdiFolderOutline } from '@mdi/js';
-  import FolderBrowser from './folder-tree.svelte';
-  import { AppRoute } from '$lib/constants';
-  import type { RecursiveObject } from '$lib/utils/folder-utils';
-
-  // Exported props
-  export let folderName: string;
-  export let content: RecursiveObject;
-  export let basePath: string;
-  export let currentPath: string = '';
-
-  let isExpanded = false;
-  let currentFolderPath = `${basePath}/${folderName}`.replace(/^\//, '').replace(/\/$/, '');
-
-  $: isExpanded = currentPath.startsWith(currentFolderPath);
-  $: isOpened = currentPath === currentFolderPath;
-
-  function toggleExpand(event: MouseEvent) {
-    event.stopPropagation();
-    isExpanded = !isExpanded;
-  }
-
-  const handleNavigation = async () => {
-    const url = new URL(AppRoute.FOLDERS, window.location.href);
-    url.searchParams.set('folder', currentFolderPath);
-    await goto(url);
-  };
-</script>
-
-<button
-  class={`flex place-items-center gap-1 mt-1 px-3 py-1 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-lg font-mono text-sm hover:font-semibold ${isOpened ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
-  on:click={toggleExpand}
-  on:dblclick|stopPropagation|preventDefault={handleNavigation}
-  title={folderName}
-  type="button"
->
-  <a href={`${AppRoute.FOLDERS}?folder=${currentFolderPath}`} on:click|preventDefault={handleNavigation} class="flex">
-    <Icon
-      path={isExpanded ? mdiChevronDown : mdiChevronRight}
-      class={isExpanded ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400 dark:text-gray-700'}
-      size={20}
-    />
-    <Icon
-      path={isOpened ? mdiFolderEye : isExpanded ? mdiFolder : mdiFolderOutline}
-      class={isExpanded ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400 dark:text-gray-700'}
-      size={20}
-    />
-  </a>
-  <button on:click={toggleExpand} type="button">
-    <p class="text-nowrap overflow-clip">{folderName}</p>
-  </button>
-</button>
-
-{#if isExpanded}
-  <ul class="list-none ml-2">
-    {#each Object.entries(content) as [subFolderName, subContent], index (index)}
-      <li class="my-1">
-        <FolderBrowser folderName={subFolderName} content={subContent} basePath={currentFolderPath} {currentPath} />
-      </li>
-    {/each}
-  </ul>
-{/if}

web/src/lib/components/layouts/user-page-layout.svelte

@@ -3,7 +3,6 @@
   import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
   import SideBar from '../shared-components/side-bar/side-bar.svelte';
   import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
-  import FolderSideBar from '$lib/components/shared-components/side-bar/folder-side-bar.svelte';
 
   export let hideNavbar = false;
   export let showUploadButton = false;
@@ -11,7 +10,6 @@
   export let description: string | undefined = undefined;
   export let scrollbar = true;
   export let admin = false;
-  export let isFolderView = false;
 
   $: scrollbarClass = scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden';
   $: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';
@@ -31,8 +29,6 @@
   <slot name="sidebar">
     {#if admin}
       <AdminSideBar />
-    {:else if isFolderView}
-      <FolderSideBar />
     {:else}
       <SideBar />
     {/if}

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}

web/src/lib/constants.ts

@@ -80,6 +80,7 @@ export enum QueryParameter {
   SEARCHED_PEOPLE = 'searchedPeople',
   SMART_SEARCH = 'smartSearch',
   PAGE = 'page',
+  PATH = 'path',
 }
 
 export enum OpenSettingQueryParameterValue {

web/src/lib/utils/tree-utils.ts

@@ -2,7 +2,9 @@ export interface RecursiveObject {
   [key: string]: RecursiveObject;
 }
 
-export function buildFolderTree(paths: string[]) {
+export const normalizeTreePath = (path: string) => path.replace(/^\//, '').replace(/\/$/, '');
+
+export function buildTree(paths: string[]) {
   const root: RecursiveObject = {};
   for (const path of paths) {
     const parts = path.split('/');

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

@@ -1,14 +1,22 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import type { PageData } from './$types';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import { type AssetResponseDto } from '@immich/sdk';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiArrowUpLeft, mdiChevronRight, mdiFolder, mdiFolderHome } from '@mdi/js';
+  import { page } from '$app/stores';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+  import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
+  import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
+  import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
+  import { AppRoute, QueryParameter } from '$lib/constants';
   import type { Viewport } from '$lib/stores/assets.store';
-  import { AppRoute } from '$lib/constants';
+  import { foldersStore } from '$lib/stores/folders.store';
+  import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
+  import { type AssetResponseDto } from '@immich/sdk';
+  import { mdiArrowUpLeft, mdiChevronRight, mdiFolder, mdiFolderHome } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
 
   export let data: PageData;
 
@@ -16,10 +24,15 @@
   const viewport: Viewport = { width: 0, height: 0 };
 
   $: pathSegments = data.path ? data.path.split('/') : [];
+  $: tree = buildTree($foldersStore?.uniquePaths || []);
+  $: currentPath = $page.url.searchParams.get(QueryParameter.PATH) || '';
+
+  onMount(async () => {
+    await foldersStore.fetchUniquePaths();
+  });
 
   const handleNavigation = async (folderName: string) => {
-    const folderFullPath = `${data.path ? data.path + '/' : ''}${folderName}`.replaceAll(/^\/|\/$/g, '');
-    await navigateToView(folderFullPath);
+    await navigateToView(normalizeTreePath(`${data.path || ''}/${folderName}`));
   };
 
   const handleBackNavigation = async () => {
@@ -33,16 +46,25 @@
     await navigateToView(targetPath);
   };
 
-  const navigateToView = async (folderPath: string) => {
+  const getLink = (path: string) => {
     const url = new URL(AppRoute.FOLDERS, window.location.href);
-    url.searchParams.set('folder', folderPath);
-    await goto(url);
+    url.searchParams.set(QueryParameter.PATH, path);
+    return url.href;
   };
 
-  const loadNextPage = () => {};
+  const navigateToView = (path: string) => goto(getLink(path));
 </script>
 
-<UserPageLayout title={data.meta.title} isFolderView>
+<UserPageLayout title={data.meta.title}>
+  <SideBarSection slot="sidebar">
+    <section>
+      <div class="text-xs pl-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
+      <div class="h-full">
+        <TreeItems items={tree} active={currentPath} {getLink} />
+      </div>
+    </section>
+  </SideBarSection>
+
   <section id="path-summary" class="text-immich-primary dark:text-immich-dark-primary rounded-xl flex">
     {#if data.path}
       <CircleIconButton icon={mdiArrowUpLeft} title="Back" on:click={handleBackNavigation} class="mr-2" padding="2" />
@@ -71,42 +93,20 @@
     </div>
   </section>
 
-  <section id="folder-detail-view" class="mt-2">
-    <!-- Sub Folders -->
-    {#if data.currentFolders.length > 0}
-      <div
-        class="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 data.currentFolders as folder}
-          <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={() => handleNavigation(folder)}
-            title={folder}
-            type="button"
-          >
-            <Icon path={mdiFolder} 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">{folder}</p>
-          </button>
-        {/each}
-      </div>
-    {/if}
+  <section class="mt-2">
+    <TreeItemThumbnails items={data.currentFolders} icon={mdiFolder} onClick={handleNavigation} />
 
     <!-- Assets -->
-    <div
-      bind:clientHeight={viewport.height}
-      bind:clientWidth={viewport.width}
-      class:mt-4={data.currentFolders.length > 0}
-    >
     {#if data.pathAssets && data.pathAssets.length > 0}
+      <div bind:clientHeight={viewport.height} bind:clientWidth={viewport.width} class="mt-2">
         <GalleryViewer
           assets={data.pathAssets}
           bind:selectedAssets
-          on:intersected={loadNextPage}
           {viewport}
           disableAssetSelect={true}
           showAssetName={true}
         />
-      {/if}
       </div>
+    {/if}
   </section>
 </UserPageLayout>

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'),