helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

refactor(web): tree data structure for folder and tag views (#18980)

Browse source 
* refactor folder view

inline link

* improved tree collapsing

* handle tags

* linting

* formatting

* simplify

* .from is faster

* simplify

* add key
This commit is contained in:
Mert 2025-06-09 11:02:16 -04:00 • committed by GitHub
parent ac0e94c003
commit 74f79cae69
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 249 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

37
web/src/lib/components/shared-components/tree/tree.svelte
View file

@ -1,25 +1,20 @@
<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 { TreeNode } from '$lib/utils/tree-utils';
import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
interface Props {
tree: RecursiveObject;
parent: string;
value: string;
active?: string;
node: TreeNode;
active: string;
icons: { default: string; active: string };
getLink: (path: string) => string;
getColor: (path: string) => string | undefined;
}
let { tree, parent, value, active = '', icons, getLink, getColor }: Props = $props();
let { node, active, icons, getLink }: Props = $props();
const path = $derived(normalizeTreePath(`${parent}/${value}`));
const isActive = $derived(active === path || active.startsWith(`${path}/`));
const isTarget = $derived(active === path);
const color = $derived(getColor(path));
const isTarget = $derived(active === node.path);
const isActive = $derived(active === node.path || active.startsWith(node.value === '/' ? '/' : `${node.path}/`));
let isOpen = $derived(isActive);
const onclick = (event: MouseEvent) => {
@ -29,25 +24,27 @@
</script>
<a
href={getLink(path)}
title={value}
href={getLink(node.path)}
title={node.value}
class={`flex grow place-items-center ps-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'}`}
data-sveltekit-keepfocus
>
<button type="button" {onclick} class={Object.values(tree).length === 0 ? 'invisible' : ''}>
<Icon path={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size={20} />
</button>
<div>
{#if node.size > 0}
<button type="button" {onclick}>
<Icon path={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size={20} />
</button>
{/if}
<div class={node.size === 0 ? 'ml-[1.5em] ' : ''}>
<Icon
path={isActive ? icons.active : icons.default}
class={isActive ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400'}
{color}
color={node.color}
size={20}
/>
</div>
<span class="text-nowrap overflow-hidden text-ellipsis font-mono ps-1 pt-1 whitespace-pre-wrap">{value}</span>
<span class="text-nowrap overflow-hidden text-ellipsis font-mono ps-1 pt-1 whitespace-pre-wrap">{node.value}</span>
</a>
{#if isOpen}
<TreeItems parent={path} items={tree} {icons} {active} {getLink} {getColor} />
<TreeItems tree={node} {icons} {active} {getLink} />
{/if}