feat(frontend): limit training history to 3 runs with expand toggle
Both training panels (OCR and segmentation) share TrainingHistory. Show only the 3 most recent runs by default; render a Mehr/Weniger anzeigen button when there are more. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user