feat: folder view (#11880)

* feat: folder view poc

* fix(folder-view): ui modifications

* fix(folder-view): improves utility return types

* fix(folder-view): update getAssetsByOriginalPath

Endpoint now only returns direct children of the path instead of all images in all subfolders.  Functions renamed and scoped to "folder", endpoints renamed

* fix(folder-view): improve typing

* fix(folder-view): replaces css with tailwind

* fix(folder-view): includes folders in main panel

* feat(folder-view): folder cache implementation

* fix(folder-view): can now search for absolute paths

* fix(folder-view): sets default sort to alphabetical by filename

* refactor/styling the browser view

* double click to navigate

* folder tree

* use correct side bar icon

* styling when selected

* correct open icon

* folder layout

* return assetReponseDto

* it's alive

* update new api

* more styling for folder tree

* use query params and path viewer

* use arrow up left for parent folder backward navigation

* use arrow up left for parent folder backward navigation

* encode URL

* handle long folder name

* refactor to the view controller

* remove unused code

* clear cache when logout

* cleaning up

* cleaning up web

* clean as new

* clean as new

* pr feedback + show asset name

* add tests

* add tests

* remove generated file

* lint

* revert docker-compose.dev file

* Update server/src/services/view.service.ts

Co-authored-by: Jason Rasmussen <jason@rasm.me>

* Update server/src/services/view.service.ts

Co-authored-by: Jason Rasmussen <jason@rasm.me>

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
Co-authored-by: Jason Rasmussen <jason@rasm.me>

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

@@ -0,0 +1,65 @@
+<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,6 +3,7 @@
   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;
@@ -10,6 +11,7 @@
   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';
@@ -29,6 +31,8 @@
   <slot name="sidebar">
     {#if admin}
       <AdminSideBar />
+    {:else if isFolderView}
+      <FolderSideBar />
     {:else}
       <SideBar />
     {/if}

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -23,6 +23,7 @@
   export let disableAssetSelect = false;
   export let showArchiveIcon = false;
   export let viewport: Viewport;
+  export let showAssetName = false;
 
   let { isViewing: isViewerOpen, asset: viewingAsset, setAsset } = assetViewingStore;
 
@@ -121,6 +122,7 @@
         class="absolute"
         style="width: {geometry.boxes[i].width}px; height: {geometry.boxes[i].height}px; top: {geometry.boxes[i]
           .top}px; left: {geometry.boxes[i].left}px"
+        title={showAssetName ? asset.originalFileName : ''}
       >
         <Thumbnail
           {asset}
@@ -142,6 +144,13 @@
           thumbnailWidth={geometry.boxes[i].width}
           thumbnailHeight={geometry.boxes[i].height}
         />
+        {#if showAssetName}
+          <div
+            class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-gradient-to-t bg-slate-50/75 overflow-clip text-ellipsis"
+          >
+            {asset.originalFileName}
+          </div>
+        {/if}
       </div>
     {/each}
   </div>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -19,6 +19,7 @@
   import AccountInfoPanel from './account-info-panel.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { t } from 'svelte-i18n';
+  import { foldersStore } from '$lib/stores/folders.store';
 
   export let showUploadButton = true;
 
@@ -38,6 +39,7 @@
       window.location.href = redirectUri;
     }
     resetSavedUser();
+    foldersStore.clearCache();
   };
 </script>
 

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

@@ -0,0 +1,32 @@
+<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

@@ -0,0 +1,8 @@
+<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/side-bar/side-bar.svelte

@@ -20,6 +20,7 @@
     mdiTrashCanOutline,
     mdiToolbox,
     mdiToolboxOutline,
+    mdiFolderOutline,
   } from '@mdi/js';
   import SideBarSection from './side-bar-section.svelte';
   import SideBarLink from './side-bar-link.svelte';
@@ -104,6 +105,8 @@
       </svelte:fragment>
     </SideBarLink>
 
+    <SideBarLink title={$t('folders')} routeId="/(user)/folders" icon={mdiFolderOutline} flippedLogo />
+
     <SideBarLink
       title={$t('utilities')}
       routeId="/(user)/utilities"

web/src/lib/constants.ts

@@ -45,6 +45,8 @@ export enum AppRoute {
 
   UTILITIES = '/utilities',
   DUPLICATES = '/utilities/duplicates',
+
+  FOLDERS = '/folders',
 }
 
 export enum ProjectionType {

web/src/lib/i18n/en.json

@@ -683,6 +683,7 @@
   "expired": "Expired",
   "expires_date": "Expires {date}",
   "explore": "Explore",
+  "explorer": "Explorer",
   "export": "Export",
   "export_as_json": "Export as JSON",
   "extension": "Extension",
@@ -700,6 +701,7 @@
   "filter_people": "Filter people",
   "find_them_fast": "Find them fast by name with search",
   "fix_incorrect_match": "Fix incorrect match",
+  "folders": "Folders",
   "force_re-scan_library_files": "Force Re-scan All Library Files",
   "forward": "Forward",
   "general": "General",

web/src/lib/stores/folders.store.ts

@@ -0,0 +1,69 @@
+import {
+  getAssetsByOriginalPath,
+  getUniqueOriginalPaths,
+  /**
+   * TODO: Incorrect type
+   */
+  type AssetResponseDto,
+} from '@immich/sdk';
+import { get, writable } from 'svelte/store';
+
+type AssetCache = {
+  [path: string]: AssetResponseDto[];
+};
+
+type FoldersStore = {
+  uniquePaths: string[] | null;
+  assets: AssetCache;
+};
+
+function createFoldersStore() {
+  const initialState: FoldersStore = {
+    uniquePaths: null,
+    assets: {},
+  };
+
+  const { subscribe, set, update } = writable(initialState);
+
+  async function fetchUniquePaths() {
+    const state = get(foldersStore);
+
+    if (state.uniquePaths !== null) {
+      return;
+    }
+
+    const uniquePaths = await getUniqueOriginalPaths();
+    if (uniquePaths) {
+      update((state) => ({ ...state, uniquePaths }));
+    }
+  }
+
+  async function fetchAssetsByPath(path: string) {
+    const state = get(foldersStore);
+
+    if (state.assets[path]) {
+      return;
+    }
+
+    const assets = await getAssetsByOriginalPath({ path });
+    if (assets) {
+      update((state) => ({
+        ...state,
+        assets: { ...state.assets, [path]: assets },
+      }));
+    }
+  }
+
+  function clearCache() {
+    set(initialState);
+  }
+
+  return {
+    subscribe,
+    fetchUniquePaths,
+    fetchAssetsByPath,
+    clearCache,
+  };
+}
+
+export const foldersStore = createFoldersStore();

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

@@ -0,0 +1,18 @@
+export interface RecursiveObject {
+  [key: string]: RecursiveObject;
+}
+
+export function buildFolderTree(paths: string[]) {
+  const root: RecursiveObject = {};
+  for (const path of paths) {
+    const parts = path.split('/');
+    let current = root;
+    for (const part of parts) {
+      if (!current[part]) {
+        current[part] = {};
+      }
+      current = current[part];
+    }
+  }
+  return root;
+}

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

@@ -0,0 +1,112 @@
+<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 CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+  import type { Viewport } from '$lib/stores/assets.store';
+  import { AppRoute } from '$lib/constants';
+
+  export let data: PageData;
+
+  let selectedAssets: Set<AssetResponseDto> = new Set();
+  const viewport: Viewport = { width: 0, height: 0 };
+
+  $: pathSegments = data.path ? data.path.split('/') : [];
+
+  const handleNavigation = async (folderName: string) => {
+    const folderFullPath = `${data.path ? data.path + '/' : ''}${folderName}`.replaceAll(/^\/|\/$/g, '');
+    await navigateToView(folderFullPath);
+  };
+
+  const handleBackNavigation = async () => {
+    if (data.path) {
+      const parentPath = data.path.split('/').slice(0, -1).join('/');
+      await navigateToView(parentPath);
+    }
+  };
+
+  const handleBreadcrumbNavigation = async (targetPath: string) => {
+    await navigateToView(targetPath);
+  };
+
+  const navigateToView = async (folderPath: string) => {
+    const url = new URL(AppRoute.FOLDERS, window.location.href);
+    url.searchParams.set('folder', folderPath);
+    await goto(url);
+  };
+
+  const loadNextPage = () => {};
+</script>
+
+<UserPageLayout title={data.meta.title} isFolderView>
+  <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" />
+    {/if}
+
+    <div
+      class="flex place-items-center gap-2 bg-gray-50 dark:bg-immich-dark-gray/50 w-full py-2 px-4 rounded-2xl border border-gray-100 dark:border-gray-900"
+    >
+      <a href={`${AppRoute.FOLDERS}`} title="To root">
+        <Icon path={mdiFolderHome} class="text-immich-primary dark:text-immich-dark-primary mr-2" size={28} />
+      </a>
+      {#each pathSegments as segment, index}
+        <button
+          class="text-sm font-mono underline hover:font-semibold"
+          on:click={() => handleBreadcrumbNavigation(pathSegments.slice(0, index + 1).join('/'))}
+          type="button"
+        >
+          {segment}
+        </button>
+        <p class="text-gray-500">
+          {#if index < pathSegments.length - 1}
+            <Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} />
+          {/if}
+        </p>
+      {/each}
+    </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}
+
+    <!-- Assets -->
+    <div
+      bind:clientHeight={viewport.height}
+      bind:clientWidth={viewport.width}
+      class:mt-4={data.currentFolders.length > 0}
+    >
+      {#if data.pathAssets && data.pathAssets.length > 0}
+        <GalleryViewer
+          assets={data.pathAssets}
+          bind:selectedAssets
+          on:intersected={loadNextPage}
+          {viewport}
+          disableAssetSelect={true}
+          showAssetName={true}
+        />
+      {/if}
+    </div>
+  </section>
+</UserPageLayout>

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

@@ -0,0 +1,41 @@
+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 { get } from 'svelte/store';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params, url }) => {
+  await authenticate();
+  const asset = await getAssetInfoFromParam(params);
+  const $t = await getFormatter();
+
+  await foldersStore.fetchUniquePaths();
+  const { uniquePaths } = get(foldersStore);
+
+  let pathAssets = null;
+  const path = url.searchParams.get('folder');
+
+  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);
+
+  return {
+    asset,
+    path,
+    currentFolders,
+    pathAssets,
+    meta: {
+      title: $t('folders'),
+    },
+  };
+}) satisfies PageLoad;