d1d0acf029
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 3m46s
CI / OCR Service Tests (pull_request) Successful in 21s
CI / Backend Unit Tests (pull_request) Successful in 3m38s
CI / fail2ban Regex (pull_request) Successful in 43s
CI / Semgrep Security Scan (pull_request) Successful in 19s
CI / Compose Bucket Idempotency (pull_request) Successful in 1m3s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
86 lines
3.3 KiB
Svelte
86 lines
3.3 KiB
Svelte
<script lang="ts">
|
||
import * as m from '$lib/paraglide/messages.js';
|
||
import BackButton from '$lib/shared/primitives/BackButton.svelte';
|
||
import { hasAnyDocuments } from '$lib/shared/utils/tagUtils';
|
||
import type { components } from '$lib/generated/api';
|
||
|
||
type TagTreeNodeDTO = components['schemas']['TagTreeNodeDTO'];
|
||
|
||
const MAX_VISIBLE_CHILDREN = 5;
|
||
|
||
let { data }: { data: { tree: TagTreeNodeDTO[] } } = $props();
|
||
|
||
const visibleTree = $derived.by(() => data.tree.filter(hasAnyDocuments));
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>{m.themen_widget_title()}</title>
|
||
</svelte:head>
|
||
|
||
<main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||
<div class="mb-6 flex items-center gap-3">
|
||
<BackButton />
|
||
<h1 class="font-serif text-2xl font-semibold text-ink">{m.themen_widget_title()}</h1>
|
||
</div>
|
||
|
||
{#if visibleTree.length === 0}
|
||
<p class="font-sans text-sm text-ink-3">{m.themen_leer()}</p>
|
||
{:else}
|
||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||
{#each visibleTree as tag (tag.id)}
|
||
{@const visibleChildren = (tag.children ?? []).filter(hasAnyDocuments)}
|
||
{@const shownChildren = visibleChildren.slice(0, MAX_VISIBLE_CHILDREN)}
|
||
{@const hiddenCount = visibleChildren.length - shownChildren.length}
|
||
|
||
<div class="overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
|
||
<div
|
||
class="h-1.5 w-full flex-shrink-0"
|
||
aria-hidden="true"
|
||
style="background: var(--c-tag-{tag.color ?? 'slate'})"
|
||
></div>
|
||
|
||
<a
|
||
href="/?tag={encodeURIComponent(tag.name)}"
|
||
aria-label="{tag.name}{tag.documentCount > 0
|
||
? ', ' + m.themen_dokumente({ count: tag.documentCount })
|
||
: ''}"
|
||
class="flex min-h-[56px] items-center justify-between px-4 pt-4 pb-3 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none focus-visible:ring-inset"
|
||
>
|
||
<span class="font-serif text-base font-semibold text-ink">{tag.name}</span>
|
||
<span class="mr-1 ml-auto font-sans text-sm text-ink-3 tabular-nums">
|
||
{#if tag.documentCount > 0}{tag.documentCount}{/if}
|
||
</span>
|
||
<span aria-hidden="true" class="h-3.5 w-3.5 flex-shrink-0 text-brand-mint">›</span>
|
||
</a>
|
||
|
||
{#if shownChildren.length > 0}
|
||
<div class="mx-4 border-t border-line"></div>
|
||
|
||
{#each shownChildren as child (child.id)}
|
||
<a
|
||
href="/?tag={encodeURIComponent(child.name)}"
|
||
class="flex min-h-[44px] items-center justify-between px-4 py-2.5 hover:bg-canvas focus-visible:bg-canvas focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none focus-visible:ring-inset"
|
||
>
|
||
<span class="font-sans text-sm text-ink">{child.name}</span>
|
||
<span class="mr-1 ml-auto font-sans text-xs text-ink-3 tabular-nums">
|
||
{#if child.documentCount > 0}{child.documentCount}{/if}
|
||
</span>
|
||
<span aria-hidden="true" class="h-3 w-3 flex-shrink-0 text-brand-mint">›</span>
|
||
</a>
|
||
{/each}
|
||
|
||
{#if hiddenCount > 0}
|
||
<a
|
||
href="/?tag={encodeURIComponent(tag.name)}"
|
||
class="block min-h-[44px] px-4 py-2.5 font-sans text-sm text-ink-3 hover:bg-canvas hover:text-ink focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none focus-visible:ring-inset"
|
||
>
|
||
{m.themen_weitere({ count: hiddenCount })} →
|
||
</a>
|
||
{/if}
|
||
{/if}
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
{/if}
|
||
</main>
|