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/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"