feat(header): icon nav redesign + migrate icons mdi→lucide
Deploy / verify (push) Successful in 1m26s
Deploy / deploy (push) Successful in 2m26s

- Header desktop nav: social icons grouped in a wald-tinted pill with
  labels, active-state (aria-current + bold), opacity hover (no per-item bg)
- Mobile overlay: social links as icon+label rows with active-state
- Search button: lucide:search, icon-only
- Migrate all icons mdi→lucide app-wide (234 refs); brand/language logos
  (google, whatsapp, mastodon, telegram, language-*) stay on mdi
- generate-icons: emit mdi + lucide subsets; add @iconify-json/lucide
- iconify-offline: register lucide collection
- scripts/icon-map|validate|apply: reusable migration tooling

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-06-24 10:44:56 +02:00
parent e434ee3620
commit 0ab2c58eb4
46 changed files with 823 additions and 598 deletions
@@ -144,7 +144,7 @@
aria-label="Karte aktivieren"
>
<span class="flex items-center gap-2 rounded-md bg-white/95 px-3 py-1.5 text-sm font-medium text-stein-800 shadow-md">
<Icon icon="mdi:cursor-default-click-outline" class="size-4" />
<Icon icon="lucide:mouse-pointer-click" class="size-4" />
Karte aktivieren
</span>
</button>
@@ -167,13 +167,13 @@
class="shrink-0 text-stein-400 transition-colors hover:text-stein-700"
aria-label="Schließen"
>
<Icon icon="mdi:close" class="size-4" />
<Icon icon="lucide:x" class="size-4" />
</button>
</div>
{#if selectedOrg.location?.text}
<p class="mb-3 flex items-center gap-1 text-xs text-stein-500">
<Icon icon="mdi:map-marker-outline" class="size-3.5 shrink-0" />
<Icon icon="lucide:map-pin" class="size-3.5 shrink-0" />
{selectedOrg.location.text}
</p>
{/if}
@@ -203,13 +203,13 @@
{/if}
{#if c.email}
<a href="mailto:{c.email}" class="mt-0.5 flex items-center gap-1 text-wald-700 hover:underline">
<Icon icon="mdi:email-outline" class="size-3 shrink-0" />
<Icon icon="lucide:mail" class="size-3 shrink-0" />
<span class="truncate">{c.email}</span>
</a>
{/if}
{#if c.phone}
<a href="tel:{c.phone.replace(/\s+/g, '')}" class="mt-0.5 flex items-center gap-1 text-wald-700 hover:underline">
<Icon icon="mdi:phone" class="size-3 shrink-0" />
<Icon icon="lucide:phone" class="size-3 shrink-0" />
{c.phone}
</a>
{/if}
@@ -228,7 +228,7 @@
rel="noopener noreferrer"
class="btn-outline btn-sm w-full justify-center no-underline!"
>
<Icon icon="mdi:open-in-new" class="size-3.5" />
<Icon icon="lucide:external-link" class="size-3.5" />
{getLinkLabel(selectedOrg)}
</a>
{/if}