mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
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>
This commit is contained in:
David Kerr
GitHub
parent
6cf5906813
commit
07538299cf
28 changed files with 843 additions and 1 deletions
65
web/src/lib/components/folder-tree/folder-tree.svelte
Normal file
65
web/src/lib/components/folder-tree/folder-tree.svelte
Normal file
|
|
@ -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}
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue