From ba04e62f87691fcc96247d4319f734168ed2f82d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 20 Mar 2026 10:05:19 +0100
Subject: [PATCH] fix(person): remove redundant role badges from document lists

The Gesendet/Empfangen badge is redundant since documents already appear
in separate Gesendete/Empfangene sections.

Refs #21
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/persons/[id]/+page.svelte | 36 ++++++++++++++-----
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/frontend/src/routes/persons/[id]/+page.svelte b/frontend/src/routes/persons/[id]/+page.svelte
index c5bb0045..02b0e813 100644
--- a/frontend/src/routes/persons/[id]/+page.svelte
+++ b/frontend/src/routes/persons/[id]/+page.svelte
@@ -10,10 +10,18 @@
     const sentDocuments = $derived(data.sentDocuments);
     const receivedDocuments = $derived(data.receivedDocuments);
 
+    const DOCS_PREVIEW_LIMIT = 5;
+
     let sortDir = $state<SortDir>('DESC');
+    let showAllSent = $state(false);
+    let showAllReceived = $state(false);
+
     const sortedSentDocuments = $derived(sortDocumentsByDate(sentDocuments, sortDir));
     const sortedReceivedDocuments = $derived(sortDocumentsByDate(receivedDocuments, sortDir));
 
+    const visibleSentDocuments = $derived(showAllSent ? sortedSentDocuments : sortedSentDocuments.slice(0, DOCS_PREVIEW_LIMIT));
+    const visibleReceivedDocuments = $derived(showAllReceived ? sortedReceivedDocuments : sortedReceivedDocuments.slice(0, DOCS_PREVIEW_LIMIT));
+
     const allDocuments = $derived([...sentDocuments, ...receivedDocuments]);
 
     const docStats = $derived(() => {
@@ -309,7 +317,7 @@
         <h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-3">{m.person_co_correspondents_heading()}</h3>
         <div class="flex flex-wrap gap-2">
             {#each coCorrespondents() as c}
-                <a href="/persons/{c.id}"
+                <a href="/conversations?senderId={person.id}&receiverId={c.id}"
                    class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-sand text-sm font-serif text-brand-navy hover:border-brand-navy transition-colors">
                     {c.name}
                     <span class="text-xs text-gray-400 font-sans">({c.count})</span>
@@ -362,7 +370,7 @@
             </div>
         {:else}
             <ul class="space-y-3">
-                {#each sortedSentDocuments as doc}
+                {#each visibleSentDocuments as doc}
                     <li class="group">
                         <a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
                             <div class="flex items-center justify-between">
@@ -384,9 +392,6 @@
                                     </div>
                                 </div>
                                 <div class="flex items-center flex-shrink-0 pl-4 gap-2">
-                                    <span class="hidden sm:inline-flex text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-brand-navy text-white">
-                                        {m.person_role_sender()}
-                                    </span>
                                     <span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
                                         {doc.status === 'UPLOADED'
                                             ? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
@@ -400,6 +405,14 @@
                     </li>
                 {/each}
             </ul>
+            {#if sentDocuments.length > DOCS_PREVIEW_LIMIT && !showAllSent}
+                <button
+                    onclick={() => (showAllSent = true)}
+                    class="mt-3 text-xs font-bold uppercase tracking-widest text-brand-navy/50 hover:text-brand-navy transition-colors"
+                >
+                    + {sentDocuments.length - DOCS_PREVIEW_LIMIT} weitere anzeigen
+                </button>
+            {/if}
         {/if}
     </div>
 
@@ -418,7 +431,7 @@
             </div>
         {:else}
             <ul class="space-y-3">
-                {#each sortedReceivedDocuments as doc}
+                {#each visibleReceivedDocuments as doc}
                     <li class="group">
                         <a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
                             <div class="flex items-center justify-between">
@@ -440,9 +453,6 @@
                                     </div>
                                 </div>
                                 <div class="flex items-center flex-shrink-0 pl-4 gap-2">
-                                    <span class="hidden sm:inline-flex text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-brand-mint text-brand-navy">
-                                        {m.person_role_receiver()}
-                                    </span>
                                     <span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
                                         {doc.status === 'UPLOADED'
                                             ? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
@@ -456,6 +466,14 @@
                     </li>
                 {/each}
             </ul>
+            {#if receivedDocuments.length > DOCS_PREVIEW_LIMIT && !showAllReceived}
+                <button
+                    onclick={() => (showAllReceived = true)}
+                    class="mt-3 text-xs font-bold uppercase tracking-widest text-brand-navy/50 hover:text-brand-navy transition-colors"
+                >
+                    + {receivedDocuments.length - DOCS_PREVIEW_LIMIT} weitere anzeigen
+                </button>
+            {/if}
         {/if}
     </div>