marcel/familienarchiv
1
0
Fork 0
Code Issues 103 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(topbar): add expandable metadata drawer with Details toggle (#175)

Browse Source 
- DocumentMetadataDrawer: 3-column grid (≥1024px), single-column mobile
  Shows document date, location, status, person cards, tag chips
  Person names link to /persons/{id}, tags link to filtered search
  Empty states for missing persons/tags, receiver cap with expand button
- DocumentTopBar: "Details" toggle button with animated SVG chevron
  44×44px tap target, aria-expanded, Svelte slide transition
  Semantic color tokens for dark mode compatibility
- Remove DocumentBottomPanel from document detail page
  Bottom panel replaced by topbar drawer for metadata access
  Simplify +page.server.ts (remove comments loading)
  Update page.server.spec.ts for new load signature

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-05 11:22:38 +02:00
parent 234f83c40b
commit 5211e0b9f7
6 changed files with 197 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/routes/documents/[id]/page.server.spec.ts
View File

@@ -8,17 +8,10 @@ import { createApiClient } from '$lib/api.server';
beforeEach(() => vi.clearAllMocks());
function makeCommentsResponse(comments: unknown[]) {
return {
ok: true,
json: vi.fn().mockResolvedValue(comments)
};
}
// ─── happy path ───────────────────────────────────────────────────────────────
describe('document detail load — happy path', () => {
it('returns document and comments on success', async () => {
it('returns document on success', async () => {
vi.mocked(createApiClient).mockReturnValue({
GET: vi.fn().mockResolvedValue({
response: { ok: true, status: 200 },
@@ -26,7 +19,7 @@ describe('document detail load — happy path', () => {
})
} as ReturnType<typeof createApiClient>);
const mockFetch = vi.fn().mockResolvedValue(makeCommentsResponse([{ id: 'c1', body: 'Hi' }]));
const mockFetch = vi.fn();
const result = await load({
params: { id: '123' },
@@ -34,45 +27,6 @@ describe('document detail load — happy path', () => {
});
expect(result.document.title).toBe('Testbrief');
expect(result.comments).toHaveLength(1);
});
it('returns empty comments when the comments fetch fails', async () => {
vi.mocked(createApiClient).mockReturnValue({
GET: vi.fn().mockResolvedValue({
response: { ok: true, status: 200 },
data: { id: '123', title: 'Testbrief' }
})
} as ReturnType<typeof createApiClient>);
// fetch throws a network error for the comments endpoint
const mockFetch = vi.fn().mockRejectedValue(new Error('Network error'));
const result = await load({
params: { id: '123' },
fetch: mockFetch as unknown as typeof fetch
});
expect(result.document.title).toBe('Testbrief');
expect(result.comments).toEqual([]);
});
it('returns empty comments when the comments response is not ok', async () => {
vi.mocked(createApiClient).mockReturnValue({
GET: vi.fn().mockResolvedValue({
response: { ok: true, status: 200 },
data: { id: '123', title: 'Testbrief' }
})
} as ReturnType<typeof createApiClient>);
const mockFetch = vi.fn().mockResolvedValue({ ok: false });
const result = await load({
params: { id: '123' },
fetch: mockFetch as unknown as typeof fetch
});
expect(result.comments).toEqual([]);
});
});
@@ -87,7 +41,7 @@ describe('document detail load — error paths', () => {
})
} as ReturnType<typeof createApiClient>);
const mockFetch = vi.fn().mockResolvedValue({ ok: false });
const mockFetch = vi.fn();
await expect(
load({ params: { id: 'missing' }, fetch: mockFetch as unknown as typeof fetch })
@@ -102,7 +56,7 @@ describe('document detail load — error paths', () => {
})
} as ReturnType<typeof createApiClient>);
const mockFetch = vi.fn().mockResolvedValue({ ok: false });
const mockFetch = vi.fn();
await expect(
load({ params: { id: 'secret' }, fetch: mockFetch as unknown as typeof fetch })
@@ -117,7 +71,7 @@ describe('document detail load — error paths', () => {
})
} as ReturnType<typeof createApiClient>);
const mockFetch = vi.fn().mockResolvedValue({ ok: false });
const mockFetch = vi.fn();
await expect(
load({ params: { id: 'any' }, fetch: mockFetch as unknown as typeof fetch })