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

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

14
web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte
View file

@ -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}