mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor(web): tree data structure for folder and tag views (#18980)
* 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
GitHub
parent
ac0e94c003
commit
74f79cae69
12 changed files with 249 additions and 191 deletions
|
|
@ -1,23 +1,27 @@
|
|||
<script lang="ts">
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { TreeNode } from '$lib/utils/tree-utils';
|
||||
import { IconButton } from '@immich/ui';
|
||||
import { mdiArrowUpLeft, mdiChevronRight } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
pathSegments?: string[];
|
||||
node: TreeNode;
|
||||
getLink: (path: string) => string;
|
||||
title: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
let { pathSegments = [], getLink, title, icon }: Props = $props();
|
||||
const { node, getLink, title, icon }: Props = $props();
|
||||
|
||||
let isRoot = $derived(pathSegments.length === 0);
|
||||
const rootLink = getLink('');
|
||||
const isRoot = $derived(node.parent === null);
|
||||
const parentLink = $derived(getLink(node.parent ? node.parent.path : ''));
|
||||
const parents = $derived(node.parents);
|
||||
</script>
|
||||
|
||||
<nav class="flex items-center py-2">
|
||||
{#if !isRoot}
|
||||
{#if parentLink}
|
||||
<div>
|
||||
<IconButton
|
||||
shape="round"
|
||||
|
|
@ -25,9 +29,8 @@
|
|||
variant="ghost"
|
||||
icon={mdiArrowUpLeft}
|
||||
aria-label={$t('to_parent')}
|
||||
href={getLink(pathSegments.slice(0, -1).join('/'))}
|
||||
href={parentLink}
|
||||
class="me-2"
|
||||
onclick={() => {}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -42,31 +45,29 @@
|
|||
color="secondary"
|
||||
variant="ghost"
|
||||
{icon}
|
||||
href={getLink('')}
|
||||
href={rootLink}
|
||||
aria-label={title}
|
||||
size="medium"
|
||||
aria-current={isRoot ? 'page' : undefined}
|
||||
onclick={() => {}}
|
||||
/>
|
||||
</li>
|
||||
{#each pathSegments as segment, index (index)}
|
||||
{@const isLastSegment = index === pathSegments.length - 1}
|
||||
{#each parents as parent (parent)}
|
||||
<li
|
||||
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} ariaHidden />
|
||||
{#if isLastSegment}
|
||||
<p class="cursor-default whitespace-pre-wrap">{segment}</p>
|
||||
{:else}
|
||||
<a
|
||||
class="underline hover:font-semibold whitespace-pre-wrap"
|
||||
href={getLink(pathSegments.slice(0, index + 1).join('/'))}
|
||||
>
|
||||
{segment}
|
||||
</a>
|
||||
{/if}
|
||||
<a class="underline hover:font-semibold whitespace-pre-wrap" href={getLink(parent.path)}>
|
||||
{parent.value}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
<li
|
||||
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} ariaHidden />
|
||||
<p class="cursor-default whitespace-pre-wrap">{node.value}</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,31 @@
|
|||
<script lang="ts">
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import type { TreeNode } from '$lib/utils/tree-utils';
|
||||
|
||||
interface Props {
|
||||
items?: string[];
|
||||
items: TreeNode[];
|
||||
icon: string;
|
||||
onClick: (path: string) => void;
|
||||
}
|
||||
|
||||
let { items = [], icon, onClick }: Props = $props();
|
||||
let { items, icon, onClick }: Props = $props();
|
||||
</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"
|
||||
>
|
||||
{#each items as item (item)}
|
||||
<!-- eslint-disable-next-line svelte/require-each-key -->
|
||||
{#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"
|
||||
onclick={() => onClick(item)}
|
||||
title={item}
|
||||
onclick={() => onClick(item.value)}
|
||||
title={item.value}
|
||||
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 whitespace-pre-wrap">
|
||||
{item}
|
||||
{item.value}
|
||||
</p>
|
||||
</button>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,21 @@
|
|||
<script lang="ts">
|
||||
import Tree from '$lib/components/shared-components/tree/tree.svelte';
|
||||
import { normalizeTreePath, type RecursiveObject } from '$lib/utils/tree-utils';
|
||||
import { type TreeNode } from '$lib/utils/tree-utils';
|
||||
|
||||
interface Props {
|
||||
items: RecursiveObject;
|
||||
parent?: string;
|
||||
active?: string;
|
||||
tree: TreeNode;
|
||||
active: string;
|
||||
icons: { default: string; active: string };
|
||||
getLink: (path: string) => string;
|
||||
getColor?: (path: string) => string | undefined;
|
||||
}
|
||||
|
||||
let { items, parent = '', active = '', icons, getLink, getColor = () => undefined }: Props = $props();
|
||||
let { tree, active, icons, getLink }: Props = $props();
|
||||
</script>
|
||||
|
||||
<ul class="list-none ms-2">
|
||||
<!-- eslint-disable-next-line svelte/require-each-key -->
|
||||
{#each Object.entries(items).sort() as [path, tree]}
|
||||
{@const value = normalizeTreePath(`${parent}/${path}`)}
|
||||
{@const key = value + getColor(value)}
|
||||
{#key key}
|
||||
<li>
|
||||
<Tree {parent} value={path} {tree} {icons} {active} {getLink} {getColor} />
|
||||
</li>
|
||||
{/key}
|
||||
{#each tree.children as node (node.color ? node.path + node.color : node.path)}
|
||||
<li>
|
||||
<Tree {node} {icons} {active} {getLink} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue