fix(korrespondenz): larger empty state text, hide divider+chips when no history
- Icon: 36px (was 24px), heading text-xl font-black (was text-sm)
- Subtext: text-base (was text-xs), max-w-sm (was max-w-[280px])
- Search button: h-10, text-sm, full max-w-sm width (was fixed 260px)
- Recent persons divider and chip block moved inside the {#if recentPersons.length > 0}
block so no blank "oder" section renders when localStorage is empty
- Chips: text-sm px-4 py-2 (was text-xs), avatar h-5 w-5
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -28,13 +28,13 @@ onMount(() => {
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="mx-auto flex max-w-sm flex-col items-center gap-4 py-16 text-center">
|
<div class="mx-auto flex max-w-lg flex-col items-center gap-5 py-12 text-center">
|
||||||
<!-- Icon circle -->
|
<!-- Icon circle -->
|
||||||
<div class="rounded-full bg-muted p-4">
|
<div class="rounded-full bg-muted p-5">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="24"
|
width="36"
|
||||||
height="24"
|
height="36"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
@@ -50,10 +50,10 @@ onMount(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Heading -->
|
<!-- Heading -->
|
||||||
<h2 class="font-serif text-sm font-black text-ink">Korrespondenz durchsuchen</h2>
|
<h2 class="font-serif text-xl font-black text-ink">Korrespondenz durchsuchen</h2>
|
||||||
|
|
||||||
<!-- Subtext -->
|
<!-- Subtext -->
|
||||||
<p class="max-w-[280px] text-xs text-ink-3">
|
<p class="max-w-sm text-base text-ink-3">
|
||||||
Wähle eine Person aus dem Archiv um deren Briefe zu sehen — mit oder ohne Korrespondent.
|
Wähle eine Person aus dem Archiv um deren Briefe zu sehen — mit oder ohne Korrespondent.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@@ -63,19 +63,19 @@ onMount(() => {
|
|||||||
data-testid="conv-empty-search"
|
data-testid="conv-empty-search"
|
||||||
aria-label={conv_empty_search_placeholder()}
|
aria-label={conv_empty_search_placeholder()}
|
||||||
onclick={() => onSelectPerson('')}
|
onclick={() => onSelectPerson('')}
|
||||||
class="flex h-[28px] w-[260px] items-center rounded-sm border border-line bg-muted px-3 text-xs text-ink-3 italic transition-colors hover:border-primary"
|
class="flex h-10 w-full max-w-sm items-center rounded border border-line bg-muted px-4 text-sm text-ink-3 italic transition-colors hover:border-primary"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="12"
|
width="14"
|
||||||
height="12"
|
height="14"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
class="mr-1.5 shrink-0"
|
class="mr-2 shrink-0"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<circle cx="11" cy="11" r="8" />
|
<circle cx="11" cy="11" r="8" />
|
||||||
@@ -84,17 +84,17 @@ onMount(() => {
|
|||||||
Person suchen…
|
Person suchen…
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Divider -->
|
<!-- Recent persons — only shown when localStorage has entries -->
|
||||||
<div class="flex w-full items-center gap-2">
|
|
||||||
<div class="flex-1 border-t border-line"></div>
|
|
||||||
<span class="text-[10px] font-bold tracking-wider text-ink-3 uppercase">oder</span>
|
|
||||||
<div class="flex-1 border-t border-line"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Recent persons -->
|
|
||||||
{#if recentPersons.length > 0}
|
{#if recentPersons.length > 0}
|
||||||
<div class="flex w-full flex-col items-center gap-2">
|
<!-- Divider -->
|
||||||
<span class="text-[10px] font-bold tracking-widest text-ink-3 uppercase">
|
<div class="flex w-full max-w-sm items-center gap-2">
|
||||||
|
<div class="flex-1 border-t border-line"></div>
|
||||||
|
<span class="text-xs font-bold tracking-wider text-ink-3 uppercase">oder</span>
|
||||||
|
<div class="flex-1 border-t border-line"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex w-full max-w-sm flex-col items-center gap-3">
|
||||||
|
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||||
{conv_empty_recent_label()}
|
{conv_empty_recent_label()}
|
||||||
</span>
|
</span>
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
@@ -103,10 +103,10 @@ onMount(() => {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onclick={() => onSelectPerson(person.id)}
|
onclick={() => onSelectPerson(person.id)}
|
||||||
class="flex items-center gap-1.5 rounded-full border border-line bg-surface px-3 py-1.5 text-xs font-bold text-ink transition-colors hover:border-primary hover:text-primary"
|
class="flex items-center gap-2 rounded-full border border-line bg-surface px-4 py-2 text-sm font-bold text-ink transition-colors hover:border-primary hover:text-primary"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] text-primary-fg"
|
class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-xs text-primary-fg"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
{person.name.charAt(0).toUpperCase()}
|
{person.name.charAt(0).toUpperCase()}
|
||||||
|
|||||||
Reference in New Issue
Block a user