frontend/messages/de.json

@@ -80,6 +80,8 @@
 	"docs_empty_heading": "Keine Dokumente gefunden",
 	"docs_empty_text": "Versuchen Sie, die Filter anzupassen oder den Suchbegriff zu ändern.",
 	"docs_empty_btn_clear": "Alle Filter löschen",
+	"docs_group_unknown_sender": "Unbekannter Absender",
+	"docs_group_unknown_receiver": "Unbekannter Empfänger",
 	"docs_list_from": "Von",
 	"docs_list_to": "An",
 	"docs_list_content": "Inhalt",

frontend/messages/en.json

@@ -80,6 +80,8 @@
 	"docs_empty_heading": "No documents found",
 	"docs_empty_text": "Try adjusting the filters or changing the search term.",
 	"docs_empty_btn_clear": "Clear all filters",
+	"docs_group_unknown_sender": "Unknown sender",
+	"docs_group_unknown_receiver": "Unknown recipient",
 	"docs_list_from": "From",
 	"docs_list_to": "To",
 	"docs_list_content": "Content",

frontend/messages/es.json

@@ -80,6 +80,8 @@
 	"docs_empty_heading": "No se encontraron documentos",
 	"docs_empty_text": "Intente ajustar los filtros o cambiar el término de búsqueda.",
 	"docs_empty_btn_clear": "Borrar todos los filtros",
+	"docs_group_unknown_sender": "Remitente desconocido",
+	"docs_group_unknown_receiver": "Destinatario desconocido",
 	"docs_list_from": "De",
 	"docs_list_to": "Para",
 	"docs_list_content": "Contenido",

frontend/src/lib/components/DocumentRow.svelte

@@ -140,9 +140,11 @@ function safeTagColor(color: string | null | undefined): string {
 					<div>
 						{doc.documentDate ? formatDate(doc.documentDate) : '—'}
 					</div>
-					<div class="flex items-center gap-2">
+					<div class="flex items-start gap-2">
 						<ProgressRing percentage={item.completionPercentage} />
-						<ContributorStack contributors={item.contributors} hasMore={hasMore} />
+						<div class="flex h-9 items-center">
+							<ContributorStack contributors={item.contributors} hasMore={hasMore} />
+						</div>
 					</div>
 				</div>
 			</div>
@@ -172,9 +174,11 @@ function safeTagColor(color: string | null | undefined): string {
 						{/if}
 					</span>
 				</div>
-				<div class="flex items-center gap-2">
+				<div class="flex items-start gap-2">
 					<ProgressRing percentage={item.completionPercentage} />
-					<ContributorStack contributors={item.contributors} hasMore={hasMore} />
+					<div class="flex h-9 items-center">
+						<ContributorStack contributors={item.contributors} hasMore={hasMore} />
+					</div>
 				</div>
 			</div>
 		</div>

frontend/src/routes/DocumentList.svelte

@@ -7,33 +7,68 @@ import type { components } from '$lib/generated/api';
 
 type DocumentSearchItem = components['schemas']['DocumentSearchItem'];
 
+type SortMode = 'DATE' | 'TITLE' | 'SENDER' | 'RECEIVER' | 'UPLOAD_DATE' | 'RELEVANCE';
+
 let {
 	items,
 	canWrite,
 	error,
 	total = 0,
-	q = ''
+	q = '',
+	sort = 'DATE'
 }: {
 	items: DocumentSearchItem[];
 	canWrite: boolean;
 	error?: string | null;
 	total?: number;
 	q?: string;
+	sort?: SortMode;
 } = $props();
 
-const yearGroups = $derived.by(() => {
+const groups = $derived.by(() => {
+	if (sort === 'SENDER') return groupBySender(items);
+	if (sort === 'RECEIVER') return groupByReceiver(items);
+	return groupByYear(items);
+});
+
+function groupByYear(docItems: DocumentSearchItem[]) {
 	const map = new SvelteMap<string, DocumentSearchItem[]>();
-	for (const item of items) {
+	for (const item of docItems) {
-		const year = item.document.documentDate?.substring(0, 4) ?? 'Ohne Datum';
+		const label = item.document.documentDate?.substring(0, 4) ?? m.docs_group_undated();
-		const group = map.get(year);
+		const bucket = map.get(label);
-		if (group) {
+		if (bucket) bucket.push(item);
-			group.push(item);
+		else map.set(label, [item]);
-		} else {
+	}
-			map.set(year, [item]);
+	return Array.from(map.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
+}
+
+function groupBySender(docItems: DocumentSearchItem[]) {
+	const map = new SvelteMap<string, DocumentSearchItem[]>();
+	for (const item of docItems) {
+		const label = item.document.sender?.displayName ?? m.docs_group_unknown_sender();
+		const bucket = map.get(label);
+		if (bucket) bucket.push(item);
+		else map.set(label, [item]);
+	}
+	return Array.from(map.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
+}
+
+function groupByReceiver(docItems: DocumentSearchItem[]) {
+	const map = new SvelteMap<string, DocumentSearchItem[]>();
+	for (const item of docItems) {
+		const receivers = item.document.receivers ?? [];
+		const labels =
+			receivers.length > 0
+				? receivers.map((r) => r.displayName)
+				: [m.docs_group_unknown_receiver()];
+		for (const label of labels) {
+			const bucket = map.get(label);
+			if (bucket) bucket.push(item);
+			else map.set(label, [item]);
 		}
 	}
-	return Array.from(map.entries()).map(([year, groupItems]) => ({ year, items: groupItems }));
+	return Array.from(map.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
-});
+}
 </script>
 
 <!-- DOCUMENT LIST HEADER -->
@@ -67,19 +102,23 @@ const yearGroups = $derived.by(() => {
 		</div>
 	</div>
 {:else if items.length > 0}
-	<!-- YEAR CARDS -->
+	<!-- GROUP CARDS -->
-	{#each yearGroups as group (group.year)}
+	{#each groups as group (group.label)}
 		<div
-			data-testid="year-card"
+			data-testid="group-card"
 			class="mb-4 overflow-hidden border border-line bg-surface shadow-sm"
 		>
 			<div class="border-b border-line bg-muted px-5 py-2">
-				<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
+				<span
-					>{group.year}</span
+					data-testid="group-header"
+					class="font-sans text-xs font-bold text-ink-3"
+					class:uppercase={sort !== 'SENDER' && sort !== 'RECEIVER'}
+					class:tracking-widest={sort !== 'SENDER' && sort !== 'RECEIVER'}
+					class:tracking-wide={sort === 'SENDER' || sort === 'RECEIVER'}>{group.label}</span
 				>
 			</div>
 			<ul class="divide-y divide-line">
-				{#each group.items as item (item.document.id)}
+				{#each group.items as item (group.label + '-' + item.document.id)}
 					<DocumentRow item={item} />
 				{/each}
 			</ul>

frontend/src/routes/DocumentList.svelte.spec.ts

@@ -18,7 +18,7 @@ function makeItem(overrides: Partial<DocumentSearchItem> = {}): DocumentSearchIt
 			originalFilename: 'testbrief.pdf',
 			status: 'UPLOADED',
 			documentDate: '2024-03-15',
-			sender: null,
+			sender: undefined,
 			receivers: [],
 			tags: [],
 			createdAt: '2024-01-01T00:00:00Z',
@@ -79,29 +79,158 @@ describe('DocumentList – year grouping', () => {
 			makeItem({ document: { ...makeItem().document, id: '2', documentDate: '1965-08-03' } })
 		];
 		render(DocumentList, { ...baseProps, items, total: 2 });
-		const yearCards = page.getByTestId('year-card');
+		const groupCards = page.getByTestId('group-card');
-		await expect.element(yearCards.first()).toBeInTheDocument();
+		await expect.element(groupCards.first()).toBeInTheDocument();
-		await expect.element(yearCards.nth(1)).toBeInTheDocument();
+		await expect.element(groupCards.nth(1)).toBeInTheDocument();
 	});
 
-	it('uses Ohne Datum for items with no documentDate', async () => {
+	it('uses undated label for items with no documentDate', async () => {
 		const items = [
 			makeItem({ document: { ...makeItem().document, id: '1', documentDate: undefined } })
 		];
 		render(DocumentList, { ...baseProps, items, total: 1 });
-		await expect.element(page.getByText('Ohne Datum')).toBeInTheDocument();
+		await expect.element(page.getByText('Undatiert')).toBeInTheDocument();
 	});
 
-	it('single year renders one year-card', async () => {
+	it('single year renders one group-card', async () => {
 		const items = [
 			makeItem({ document: { ...makeItem().document, id: '1', documentDate: '1938-01-01' } }),
 			makeItem({ document: { ...makeItem().document, id: '2', documentDate: '1938-06-15' } })
 		];
 		render(DocumentList, { ...baseProps, items, total: 2 });
-		const yearCards = page.getByTestId('year-card');
+		const groupCards = page.getByTestId('group-card');
-		// Only one card for 1938
+		await expect.element(groupCards.first()).toBeInTheDocument();
-		await expect.element(yearCards.first()).toBeInTheDocument();
+		await expect.element(groupCards.nth(1)).not.toBeInTheDocument();
-		await expect.element(yearCards.nth(1)).not.toBeInTheDocument();
+	});
+});
+
+// ─── Sort fallback ────────────────────────────────────────────────────────────
+
+describe('DocumentList – sort fallback', () => {
+	it('falls back to year grouping when sort is not SENDER or RECEIVER', async () => {
+		const items = [
+			makeItem({ document: { ...makeItem().document, id: '1', documentDate: '2024-03-15' } })
+		];
+		render(DocumentList, { ...baseProps, items, total: 1, sort: 'TITLE' });
+		await expect
+			.element(page.getByTestId('group-header').filter({ hasText: '2024' }))
+			.toBeInTheDocument();
+	});
+});
+
+// ─── Sender grouping ─────────────────────────────────────────────────────────
+
+describe('DocumentList – sender grouping', () => {
+	it('groups by sender displayName when sort is SENDER', async () => {
+		const items = [
+			makeItem({
+				document: {
+					...makeItem().document,
+					id: '1',
+					sender: {
+						id: 's1',
+						lastName: 'Mustermann',
+						displayName: 'Max Mustermann',
+						personType: 'PERSON'
+					}
+				}
+			}),
+			makeItem({
+				document: {
+					...makeItem().document,
+					id: '2',
+					sender: {
+						id: 's2',
+						lastName: 'Musterfrau',
+						displayName: 'Anna Musterfrau',
+						personType: 'PERSON'
+					}
+				}
+			})
+		];
+		render(DocumentList, { ...baseProps, items, total: 2, sort: 'SENDER' });
+		await expect
+			.element(page.getByTestId('group-header').filter({ hasText: 'Max Mustermann' }))
+			.toBeInTheDocument();
+		await expect
+			.element(page.getByTestId('group-header').filter({ hasText: 'Anna Musterfrau' }))
+			.toBeInTheDocument();
+	});
+
+	it('groups documents with the same sender into one card', async () => {
+		const sender = {
+			id: 's1',
+			lastName: 'Mustermann',
+			displayName: 'Max Mustermann',
+			personType: 'PERSON' as const
+		};
+		const items = [
+			makeItem({ document: { ...makeItem().document, id: '1', sender } }),
+			makeItem({ document: { ...makeItem().document, id: '2', sender } })
+		];
+		render(DocumentList, { ...baseProps, items, total: 2, sort: 'SENDER' });
+		const cards = page.getByTestId('group-card');
+		await expect.element(cards.first()).toBeInTheDocument();
+		await expect.element(cards.nth(1)).not.toBeInTheDocument();
+	});
+
+	it('places items with no sender under fallback label', async () => {
+		const items = [makeItem({ document: { ...makeItem().document, id: '1', sender: undefined } })];
+		render(DocumentList, { ...baseProps, items, total: 1, sort: 'SENDER' });
+		await expect.element(page.getByText('Unbekannter Absender')).toBeInTheDocument();
+	});
+});
+
+// ─── Receiver grouping ────────────────────────────────────────────────────────
+
+describe('DocumentList – receiver grouping', () => {
+	it('groups by receiver displayName when sort is RECEIVER', async () => {
+		const items = [
+			makeItem({
+				document: {
+					...makeItem().document,
+					id: '1',
+					receivers: [
+						{ id: 'r1', lastName: 'Brandt', displayName: 'Felix Brandt', personType: 'PERSON' }
+					]
+				}
+			})
+		];
+		render(DocumentList, { ...baseProps, items, total: 1, sort: 'RECEIVER' });
+		await expect
+			.element(page.getByTestId('group-header').filter({ hasText: 'Felix Brandt' }))
+			.toBeInTheDocument();
+	});
+
+	it('duplicates a document into each receiver group', async () => {
+		const items = [
+			makeItem({
+				document: {
+					...makeItem().document,
+					id: '1',
+					title: 'Rundbriefchen',
+					receivers: [
+						{ id: 'r1', lastName: 'Brandt', displayName: 'Felix Brandt', personType: 'PERSON' },
+						{ id: 'r2', lastName: 'Meier', displayName: 'Hans Meier', personType: 'PERSON' }
+					]
+				}
+			})
+		];
+		render(DocumentList, { ...baseProps, items, total: 1, sort: 'RECEIVER' });
+		await expect
+			.element(page.getByTestId('group-header').filter({ hasText: 'Felix Brandt' }))
+			.toBeInTheDocument();
+		await expect
+			.element(page.getByTestId('group-header').filter({ hasText: 'Hans Meier' }))
+			.toBeInTheDocument();
+		const cards = page.getByTestId('group-card');
+		await expect.element(cards.nth(1)).toBeInTheDocument();
+	});
+
+	it('places items with no receivers under fallback label', async () => {
+		const items = [makeItem({ document: { ...makeItem().document, id: '1', receivers: [] } })];
+		render(DocumentList, { ...baseProps, items, total: 1, sort: 'RECEIVER' });
+		await expect.element(page.getByText('Unbekannter Empfänger')).toBeInTheDocument();
 	});
 });
 

frontend/src/routes/documents/+page.svelte

@@ -119,5 +119,6 @@ $effect(() => {
 		q={data.q}
 		canWrite={data.canWrite}
 		error={data.error}
+		sort={sort}
 	/>
 </main>