From c8334dbd6cbbcb14eccf3d4d4af9d977827766fc Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Sun, 12 Jul 2026 11:18:02 +0200
Subject: [PATCH] feat(calendar): CalendarCompact nutzt SectionHeader; fix
 IconButton-Typing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CalendarCompactBlock: plain h3 → SectionHeader (title + 'Alle kommenden Termine'-
Action). IconButton props via HTMLButton/AnchorAttributes statt Index-Signatur
(brach Storybook-Typing).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/lib/components/IconButton.svelte             |  5 +++--
 .../blocks/CalendarCompactBlock.svelte           | 16 ++++++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/IconButton.svelte b/src/lib/components/IconButton.svelte
index e44e2a3..fcbeeaa 100644
--- a/src/lib/components/IconButton.svelte
+++ b/src/lib/components/IconButton.svelte
@@ -6,6 +6,7 @@
    */
   import Icon from "@iconify/svelte";
   import "$lib/iconify-offline";
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
 
   type Size = "sm" | "md";
   type Variant = "surface" | "ghost";
@@ -29,8 +30,8 @@
     variant?: Variant;
     disabled?: boolean;
     class?: string;
-    [key: string]: unknown;
-  } = $props();
+  } & HTMLButtonAttributes &
+    HTMLAnchorAttributes = $props();
 
   const sizeClass: Record<Size, string> = { sm: "size-7", md: "size-9" };
   const iconClass: Record<Size, string> = { sm: "size-4", md: "size-5" };
diff --git a/src/lib/components/blocks/CalendarCompactBlock.svelte b/src/lib/components/blocks/CalendarCompactBlock.svelte
index 30621e0..d967093 100644
--- a/src/lib/components/blocks/CalendarCompactBlock.svelte
+++ b/src/lib/components/blocks/CalendarCompactBlock.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getBlockLayoutClasses } from "$lib/block-layout";
-  import ArrowLink from "$lib/components/ArrowLink.svelte";
+  import SectionHeader from "$lib/components/SectionHeader.svelte";
   import type { CalendarBlockData, CalendarItemData } from "$lib/block-types";
   import { t as tStatic, T } from "$lib/translations";
   import type { Translations } from "$lib/translations";
@@ -81,13 +81,13 @@
   data-block-variant="compact"
   data-block-slug={block._slug}
 >
-  <div class="mb-2 flex items-baseline justify-between gap-4">
-    <h3 class="mb-0">{block.title ?? t(T.calendar_next_events)}</h3>
-    {#if linkHref()}
-      <div class="shrink-0">
-        <ArrowLink href={linkHref() ?? "#"} label={t(T.calendar_all_upcoming)} tone="wald" size="sm" />
-      </div>
-    {/if}
+  <div class="mb-4">
+    <SectionHeader
+      title={block.title ?? t(T.calendar_next_events)}
+      tag="h3"
+      actionLabel={linkHref() ? t(T.calendar_all_upcoming) : undefined}
+      actionHref={linkHref() ?? undefined}
+    />
   </div>
 
   {#if upcoming.length === 0}