refactor: move shared components to lib/shared/ sub-packages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-05 14:40:14 +02:00
parent d6db7a07bd
commit efcc347c00
84 changed files with 43 additions and 43 deletions
--- a/frontend/src/lib/shared/dashboard/DashboardResumeStrip.svelte
+++ b/frontend/src/lib/shared/dashboard/DashboardResumeStrip.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import type { DashboardResumeDTO } from '$lib/generated/api';
+
+interface Props {
+	resumeDoc: DashboardResumeDTO | null;
+}
+
+const { resumeDoc }: Props = $props();
+
+function safeColor(color: string): string {
+	return /^#[0-9a-fA-F]{6}$/.test(color) ? color : '#8c9aa3';
+}
+</script>
+
+{#if resumeDoc === null}
+	<div
+		data-testid="resume-strip-empty"
+		class="rounded-sm border border-line bg-surface p-8 text-center"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="mx-auto text-ink-3"
+		>
+			<rect width="20" height="16" x="2" y="4" rx="2" />
+			<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+		</svg>
+		<h2 class="mt-3 font-serif text-xl text-ink">{m.dashboard_empty_title()}</h2>
+		<p class="mt-1 font-sans text-sm text-ink-2">{m.dashboard_empty_body()}</p>
+		<a
+			href="/documents"
+			class="mt-4 inline-block font-sans text-sm font-bold text-accent hover:underline"
+		>
+			{m.dashboard_empty_cta()}
+		</a>
+	</div>
+{:else}
+	<div data-testid="resume-strip" class="flex gap-4 rounded-sm border border-line bg-surface p-5">
+		<div
+			class="relative h-[252px] w-[180px] flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white"
+		>
+			{#if resumeDoc.thumbnailUrl}
+				<img
+					data-testid="resume-thumbnail-img"
+					src={resumeDoc.thumbnailUrl}
+					alt=""
+					class="h-full w-full object-cover object-top dark:mix-blend-multiply"
+					loading="lazy"
+					decoding="async"
+				/>
+			{:else}
+				<div
+					data-testid="resume-thumbnail-fallback"
+					class="flex h-full w-full items-center justify-center text-ink-3"
+					aria-hidden="true"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="h-24 w-24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z M9 12.75h6M9 15.75h6M9 18.75h3"
+						/>
+					</svg>
+				</div>
+			{/if}
+		</div>
+
+		<div class="flex flex-1 flex-col gap-2">
+			<p class="flex items-center gap-1.5 font-sans text-xs text-ink-3">
+				<span class="text-[#A6DAD8]">●</span>
+				{m.dashboard_resume_label()}
+				·
+				{m.dashboard_blocks({ count: resumeDoc.totalBlocks })}
+			</p>
+
+			<h2 class="font-serif text-[1.75rem] leading-tight text-ink">{resumeDoc.title}</h2>
+
+			<p class="font-sans text-sm text-ink-2 italic">{resumeDoc.caption}</p>
+
+			<blockquote
+				class="border-l-[3px] border-accent pl-3 font-serif text-[1.0625rem] leading-relaxed text-ink-2"
+			>
+				{resumeDoc.excerpt}
+			</blockquote>
+
+			<div class="mt-auto flex items-center gap-3 pt-2">
+				<span class="font-sans text-xs font-bold text-ink">{resumeDoc.pct}%</span>
+				<div
+					role="progressbar"
+					aria-valuenow={resumeDoc.pct}
+					aria-valuemin={0}
+					aria-valuemax={100}
+					class="h-1.5 flex-1 overflow-hidden rounded-full bg-line"
+				>
+					<div class="h-full rounded-full bg-accent" style="width:{resumeDoc.pct}%"></div>
+				</div>
+				{#each resumeDoc.collaborators.slice(0, 3) as collab (collab.initials + collab.color)}
+					<span
+						class="-ml-1 inline-flex h-6 w-6 items-center justify-center rounded-full font-sans text-[10px] font-bold text-white ring-2 ring-white"
+						style="background:{safeColor(collab.color)}">{collab.initials}</span
+					>
+				{/each}
+			</div>
+
+			<div class="mt-1 flex items-center gap-4">
+				<a
+					href="/documents/{resumeDoc.documentId}"
+					class="inline-block rounded-sm bg-accent px-4 py-1.5 font-sans text-sm font-bold text-white transition-opacity hover:opacity-90"
+				>
+					{m.dashboard_resume_cta()}
+				</a>
+				<a href="/documents" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink">
+					{m.dashboard_resume_other()}
+				</a>
+			</div>
+		</div>
+	</div>
+{/if}