fix(person): remove redundant role badges from document lists
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled

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>
This commit is contained in:
Marcel
2026-03-20 10:05:19 +01:00
parent fa4bfb8e5c
commit ba04e62f87

View File

@@ -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>