frontend/src/lib/components/TrainingHistory.svelte

@@ -20,6 +20,12 @@ interface Props {
 
 let { runs }: Props = $props();
 
+const COLLAPSED_COUNT = 3;
+let expanded = $state(false);
+
+const visibleRuns = $derived(expanded ? runs : runs.slice(0, COLLAPSED_COUNT));
+const hasMore = $derived(runs.length > COLLAPSED_COUNT);
+
 const dateFormatter = new Intl.DateTimeFormat('de-DE', {
 	day: 'numeric',
 	month: 'short',
@@ -54,7 +60,7 @@ function formatCer(cer: number | undefined | null): string {
 				</td>
 			</tr>
 		{:else}
-			{#each runs as run (run.id)}
+			{#each visibleRuns as run (run.id)}
 				<tr class="border-b border-line/50 last:border-0">
 					<td class="py-2 text-ink-2">{formatDate(run.createdAt)}</td>
 					<td class="py-2">
@@ -117,3 +123,15 @@ function formatCer(cer: number | undefined | null): string {
 		{/if}
 	</tbody>
 </table>
+
+{#if hasMore}
+	<div class="mt-2 text-center">
+		<button
+			type="button"
+			class="text-xs font-medium text-ink-3 transition-colors hover:text-ink"
+			onclick={() => (expanded = !expanded)}
+		>
+			{expanded ? m.comp_expandable_show_less() : m.comp_expandable_show_more()}
+		</button>
+	</div>
+{/if}