feat(#145): add DashboardResumeStrip component
- Component reads familienarchiv.lastVisited from localStorage and shows a 'Zuletzt geöffnet' link to the last-visited document - Renders nothing when no localStorage entry exists - Document detail page writes id+title to localStorage on mount Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
36
frontend/src/lib/components/DashboardResumeStrip.svelte
Normal file
36
frontend/src/lib/components/DashboardResumeStrip.svelte
Normal file
@@ -0,0 +1,36 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
interface LastVisited {
|
||||
id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
let lastVisited = $state<LastVisited | null>(null);
|
||||
|
||||
onMount(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem('familienarchiv.lastVisited');
|
||||
if (raw) {
|
||||
const parsed = JSON.parse(raw) as LastVisited;
|
||||
if (parsed?.id) {
|
||||
lastVisited = parsed;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore malformed JSON
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if lastVisited}
|
||||
<div
|
||||
data-testid="resume-strip"
|
||||
class="border-brand-sand flex items-center gap-2 rounded-sm border bg-white px-4 py-3 font-sans text-sm"
|
||||
>
|
||||
<span class="text-gray-500">Zuletzt geöffnet:</span>
|
||||
<a href="/documents/{lastVisited.id}" class="font-medium text-brand-navy hover:underline">
|
||||
{lastVisited.title || 'Zuletzt geöffnet'}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
|
||||
import DashboardResumeStrip from './DashboardResumeStrip.svelte';
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
describe('DashboardResumeStrip', () => {
|
||||
it('renders nothing when no last-visited document in localStorage', async () => {
|
||||
render(DashboardResumeStrip, {});
|
||||
const strip = page.getByTestId('resume-strip');
|
||||
await expect.element(strip).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the strip with link when localStorage has a document', async () => {
|
||||
localStorage.setItem(
|
||||
'familienarchiv.lastVisited',
|
||||
JSON.stringify({ id: 'doc-123', title: 'Geburtsurkunde 1920' })
|
||||
);
|
||||
render(DashboardResumeStrip, {});
|
||||
const strip = page.getByTestId('resume-strip');
|
||||
await expect.element(strip).toBeInTheDocument();
|
||||
const link = page.getByRole('link', { name: /Geburtsurkunde 1920/ });
|
||||
await expect.element(link).toBeInTheDocument();
|
||||
await expect.element(link).toHaveAttribute('href', '/documents/doc-123');
|
||||
});
|
||||
|
||||
it('uses title fallback text when title is empty', async () => {
|
||||
localStorage.setItem(
|
||||
'familienarchiv.lastVisited',
|
||||
JSON.stringify({ id: 'doc-456', title: '' })
|
||||
);
|
||||
render(DashboardResumeStrip, {});
|
||||
const strip = page.getByTestId('resume-strip');
|
||||
await expect.element(strip).toBeInTheDocument();
|
||||
const link = page.getByRole('link');
|
||||
await expect.element(link).toHaveAttribute('href', '/documents/doc-456');
|
||||
});
|
||||
});
|
||||
@@ -113,6 +113,14 @@ onMount(() => {
|
||||
|
||||
localStorageRestored = true;
|
||||
|
||||
// Track last-visited document for the dashboard resume strip
|
||||
if (doc?.id) {
|
||||
localStorage.setItem(
|
||||
'familienarchiv.lastVisited',
|
||||
JSON.stringify({ id: doc.id, title: doc.title ?? '' })
|
||||
);
|
||||
}
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
if (activeAnnotationId) {
|
||||
|
||||
Reference in New Issue
Block a user