From 23faef550ed769bf9f0f0fe4af302f0b01383bde Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Tue, 12 May 2026 20:02:30 +0200
Subject: [PATCH] feat(calendar): image/attachment per event, direct links,
 copy link, ImageModal component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- calendar_item schema: flyer → image (type: image), attachment (assetUrl)
- CalendarItemData: image + attachment fields
- event anchor IDs (#event-{slug}) with onMount hash scroll + auto-open
- share button uses direct calendar anchor URL
- copy link button (mdi:link-variant) copies anchor URL to clipboard
- ImageModal extracted as reusable component
- action buttons always show text (no expand-on-hover)
- onDestroy window guard (SSR fix)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/block-types.ts                        |  23 ++-
 src/lib/components/ImageModal.svelte          |  44 ++++++
 .../components/blocks/CalendarBlock.svelte    | 136 +++++++++++++++---
 src/lib/iconify-mdi-subset.generated.json     |   6 +
 4 files changed, 183 insertions(+), 26 deletions(-)
 create mode 100644 src/lib/components/ImageModal.svelte

diff --git a/src/lib/block-types.ts b/src/lib/block-types.ts
index e1b2b73..9da5a52 100644
--- a/src/lib/block-types.ts
+++ b/src/lib/block-types.ts
@@ -383,15 +383,30 @@ export interface LiveStrommixBlockData {
 }
 
 /** Kalender-Item (calendar_item) – aus OpenAPI; terminZeit = ISO date-time.
- *  Lokale Erweiterungen (terminEnde, location, tags) sind im RustyCMS-Schema
- *  ergänzt und werden bis zur OpenAPI-Regen hier inline mitgeführt. */
+ *  Lokale Erweiterungen sind im RustyCMS-Schema ergänzt und werden bis zur
+ *  OpenAPI-Regen hier inline mitgeführt. */
 export type CalendarItemData = components["schemas"]["calendar_item"] & {
   /** Optionales Endedatum für Mehrtagesveranstaltungen (ISO date-time). */
   terminEnde?: string;
-  /** Optionale Veranstaltungsort-Beschreibung (Adresse oder Name). */
-  location?: string;
+  /** Optionaler Veranstaltungsort (string oder {text, lat, lng}). */
+  location?: string | { text?: string; lat?: number; lng?: number };
   /** Optionale Tags zur Filterung. */
   tags?: string[];
+  /** Optionales Veranstaltungsbild (aufgelöstes image-Feld oder Slug). */
+  image?:
+    | string
+    | {
+        _type?: "img";
+        _slug?: string;
+        src?: string;
+        description?: string;
+        file?: { url?: string };
+      };
+  /** Optionaler Dateianhang (z.B. PDF-Flyer). */
+  attachment?: {
+    src?: string;
+    label?: string;
+  };
 };
 
 /** Kalender-Block (_type: "calendar"). items nach Resolve: CalendarItemData[]. Basis aus OpenAPI (calendar). */
diff --git a/src/lib/components/ImageModal.svelte b/src/lib/components/ImageModal.svelte
new file mode 100644
index 0000000..038cf99
--- /dev/null
+++ b/src/lib/components/ImageModal.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { onMount, onDestroy } from "svelte";
+    import Icon from "@iconify/svelte";
+    import "$lib/iconify-offline";
+
+    let {
+        src,
+        alt = "",
+        onclose,
+    }: { src: string; alt?: string; onclose: () => void } = $props();
+
+    function onKeydown(e: KeyboardEvent) {
+        if (e.key === "Escape") onclose();
+    }
+
+    onMount(() => window.addEventListener("keydown", onKeydown));
+    onDestroy(() => {
+        if (typeof window !== "undefined")
+            window.removeEventListener("keydown", onKeydown);
+    });
+</script>
+
+<div
+    class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 p-4 cursor-zoom-out"
+    onclick={onclose}
+    role="dialog"
+    aria-modal="true"
+    aria-label={alt || "Bild Vollansicht"}
+>
+    <img
+        {src}
+        {alt}
+        class="max-w-full max-h-full object-contain rounded shadow-2xl cursor-default"
+        onclick={(e) => e.stopPropagation()}
+    />
+    <button
+        type="button"
+        onclick={onclose}
+        class="absolute top-4 right-4 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
+        aria-label="Schließen"
+    >
+        <Icon icon="mdi:close" class="size-5" aria-hidden="true" />
+    </button>
+</div>
diff --git a/src/lib/components/blocks/CalendarBlock.svelte b/src/lib/components/blocks/CalendarBlock.svelte
index fe79b37..db712fd 100644
--- a/src/lib/components/blocks/CalendarBlock.svelte
+++ b/src/lib/components/blocks/CalendarBlock.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount, onDestroy } from "svelte";
+    import { onMount, onDestroy, tick } from "svelte";
     import { getBlockLayoutClasses } from "$lib/block-layout";
     import type { CalendarBlockData, CalendarItemData } from "$lib/block-types";
     import { t as tStatic, T } from "$lib/translations";
@@ -11,8 +11,13 @@
         mapsUrl,
         type CalendarItemICS,
     } from "$lib/calendar-ics";
+    import {
+        getCmsImageUrl,
+        extractCmsImageField,
+    } from "$lib/rusty-image";
     import "$lib/iconify-offline";
     import Icon from "@iconify/svelte";
+    import ImageModal from "$lib/components/ImageModal.svelte";
 
     type EventCardItem = CalendarItemData & {
         start: Date;
@@ -442,6 +447,18 @@
     }
 
     let shareToastKey = $state<string | null>(null);
+    let copyToastKey = $state<string | null>(null);
+    let modalImage = $state<{ src: string; alt: string } | null>(null);
+    let linkedSlug = $state<string | null>(null);
+
+    function eventId(item: EventCardItem): string {
+        if (item._slug) return `event-${item._slug}`;
+        const titlePart = (item.title || "event")
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, "-")
+            .replace(/^-|-$/g, "");
+        return `event-${titlePart}-${dayKey(item.start)}`;
+    }
 
     async function shareEvent(
         ev: EventCardItem,
@@ -457,8 +474,7 @@
         const timeInfo = ev.timeStr ? ` · ${ev.timeStr}` : "";
         const parts = [`${titleStr}`, `${dateStr}${timeInfo}`];
         if (locStr) parts.push(locStr);
-        const href = getEventLinkHref(ev.link);
-        const url = href || window.location.href;
+        const url = `${window.location.origin}${window.location.pathname}#${eventId(ev)}`;
         const text = parts.join("\n");
         const key = ev._slug ?? String(ev.start.getTime());
 
@@ -488,9 +504,19 @@
         }
     }
 
+    async function copyEventLink(ev: EventCardItem): Promise<void> {
+        const url = `${window.location.origin}${window.location.pathname}#${eventId(ev)}`;
+        const key = ev._slug ?? String(ev.start.getTime());
+        await navigator.clipboard.writeText(url).catch(() => {});
+        copyToastKey = key;
+        setTimeout(() => {
+            if (copyToastKey === key) copyToastKey = null;
+        }, 2000);
+    }
+
     let widgetEl: HTMLElement | null = $state(null);
 
-    onMount(() => {
+    onMount(async () => {
         feedHost = window.location.host;
         hasHover = window.matchMedia(
             "(hover: hover) and (pointer: fine)",
@@ -498,6 +524,15 @@
         tickTimer = setInterval(() => {
             nowMs = Date.now();
         }, 60_000);
+
+        const hash = window.location.hash.slice(1);
+        if (hash.startsWith("event-")) {
+            linkedSlug = hash;
+            await tick();
+            document
+                .getElementById(hash)
+                ?.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
     });
     onDestroy(() => {
         if (tickTimer) clearInterval(tickTimer);
@@ -527,10 +562,11 @@
             item.isMultiDay
         )}
         <li
+            id={eventId(item)}
             class="event-item {isNext ? 'event-item-next' : ''}"
             data-urgency={urgency}
         >
-            <details class="group" open={openByDefault}>
+            <details class="group/event" open={openByDefault || linkedSlug === eventId(item)}>
                 <summary
                     class="cursor-pointer list-none p-3 flex items-start gap-3 hover:bg-himmel-50/60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-himmel-500"
                 >
@@ -647,7 +683,7 @@
                     </div>
                     <Icon
                         icon="mdi:chevron-down"
-                        class="size-4 text-stein-400 shrink-0 mt-1 transition-transform group-open:rotate-180"
+                        class="size-4 text-stein-400 shrink-0 mt-1 transition-transform group-open/event:rotate-180"
                         aria-hidden="true"
                     />
                 </summary>
@@ -677,6 +713,31 @@
                             {/each}
                         </div>
                     {/if}
+                    {#if item.image}
+                        {@const imageField = extractCmsImageField(item.image)}
+                        {#if imageField}
+                            {@const thumbSrc = getCmsImageUrl(imageField.url, { width: 160, height: 160, fit: "cover" })}
+                            {@const fullSrc = getCmsImageUrl(imageField.url, { width: 1400, fit: "contain" })}
+                            {@const imageAlt = imageField.alt ?? (typeof item.image === "object" && "description" in item.image ? (item.image.description ?? "") : "")}
+                            <button
+                                type="button"
+                                onclick={() => (modalImage = { src: fullSrc, alt: imageAlt })}
+                                class="group relative w-24 h-24 rounded overflow-hidden border border-stein-200 shrink-0 hover:opacity-90 transition-opacity"
+                                aria-label="Bild vergrößern"
+                            >
+                                <img
+                                    src={thumbSrc}
+                                    alt={imageAlt}
+                                    class="w-full h-full object-cover"
+                                    loading="lazy"
+                                />
+                                <span class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/20 transition-colors">
+                                    <Icon icon="mdi:magnify-plus" class="size-5 text-white opacity-0 group-hover:opacity-100 transition-opacity drop-shadow" aria-hidden="true" />
+                                </span>
+                            </button>
+                        {/if}
+                    {/if}
+
                     <div class="flex flex-wrap gap-2 pt-1 text-xs">
                         {#if eventHref}
                             <a
@@ -698,76 +759,103 @@
                                 href={mapsUrl(locText)}
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                class="btn-outline btn-sm"
+                                class="btn-outline btn-sm group"
+                                aria-label={t(T.calendar_open_maps)}
                             >
                                 <Icon
                                     icon="mdi:map-marker"
                                     class="size-3.5 shrink-0"
                                     aria-hidden="true"
                                 />
-                                {t(T.calendar_open_maps)}
+                                <span class="whitespace-nowrap">{t(T.calendar_open_maps)}</span>
+                            </a>
+                        {/if}
+                        {#if item.attachment?.src}
+                            {@const dlSrc = `/cms-files?src=${encodeURIComponent(item.attachment.src)}&dl=1`}
+                            <a
+                                href={dlSrc}
+                                class="btn-outline btn-sm group"
+                                aria-label={item.attachment.label || "Anhang herunterladen"}
+                            >
+                                <Icon icon="mdi:file-download" class="size-3.5 shrink-0" aria-hidden="true" />
+                                <span class="whitespace-nowrap">{item.attachment.label || "Anhang herunterladen"}</span>
                             </a>
                         {/if}
                         <button
                             type="button"
                             onclick={() =>
                                 downloadICS(toICS(item), fileSlug(title))}
-                            class="btn-outline btn-sm"
+                            class="btn-outline btn-sm group"
+                            aria-label={t(T.calendar_download_ics)}
                         >
                             <Icon
                                 icon="mdi:download"
-                                class="size-3.5"
+                                class="size-3.5 shrink-0"
                                 aria-hidden="true"
                             />
-                            {t(T.calendar_download_ics)}
+                            <span class="whitespace-nowrap">{t(T.calendar_download_ics)}</span>
                         </button>
                         <a
                             href={googleCalUrl(toICS(item))}
                             target="_blank"
                             rel="noopener noreferrer"
-                            class="btn-outline btn-sm"
+                            class="btn-outline btn-sm group"
+                            aria-label={t(T.calendar_add_to_google)}
                         >
                             <Icon
                                 icon="mdi:google"
-                                class="size-3.5"
+                                class="size-3.5 shrink-0"
                                 aria-hidden="true"
                             />
-                            {t(T.calendar_add_to_google)}
+                            <span class="whitespace-nowrap">{t(T.calendar_add_to_google)}</span>
                         </a>
                         {#if feedHost}
                             {@const shareKey =
                                 item._slug ?? String(item.start.getTime())}
+                            {@const copied = copyToastKey === shareKey}
+                            <button
+                                type="button"
+                                onclick={() => copyEventLink(item)}
+                                class="btn-outline btn-sm group"
+                                aria-label={t(T.post_action_copy)}
+                            >
+                                <Icon
+                                    icon={copied ? "mdi:check" : "mdi:link-variant"}
+                                    class="size-3.5 shrink-0"
+                                    aria-hidden="true"
+                                />
+                                <span class="whitespace-nowrap">{copied ? t(T.post_action_copied) : t(T.post_action_copy)}</span>
+                            </button>
                             {@const shared = shareToastKey === shareKey}
                             <button
                                 type="button"
                                 onclick={() =>
                                     shareEvent(item, title, locText)}
-                                class="btn-outline btn-sm"
+                                class="btn-outline btn-sm group"
                                 aria-label={t(T.calendar_share_aria)}
                             >
                                 <Icon
                                     icon={shared
                                         ? "mdi:check"
                                         : "mdi:share-variant"}
-                                    class="size-3.5"
+                                    class="size-3.5 shrink-0"
                                     aria-hidden="true"
                                 />
-                                {shared
-                                    ? t(T.calendar_share_copied)
-                                    : t(T.calendar_share)}
+                                <span class="whitespace-nowrap">{shared ? t(T.calendar_share_copied) : t(T.calendar_share)}</span>
                             </button>
                         {/if}
                         <button
                             type="button"
                             onclick={() => jumpToEventInGrid(item)}
-                            class="btn-outline btn-sm"
+                            class="btn-outline btn-sm group"
+                            aria-label={t(T.calendar_jump_to_month)}
                         >
                             <Icon
                                 icon="mdi:calendar-search"
-                                class="size-3.5"
+                                class="size-3.5 shrink-0"
                                 aria-hidden="true"
                             />
-                            {t(T.calendar_jump_to_month)}
+                            <span class="whitespace-nowrap">{t(T.calendar_jump_to_month)}</span>
                         </button>
                     </div>
                 </div>
@@ -1136,6 +1224,10 @@
     </div>
 </div>
 
+{#if modalImage}
+    <ImageModal src={modalImage.src} alt={modalImage.alt} onclose={() => (modalImage = null)} />
+{/if}
+
 <style>
     /* Heute-Markierung im Kalendergrid: dezenter Rand + leichtes Glow.
      Ergänzt das Event-Badge, damit auch leere Tage als "Heute"
diff --git a/src/lib/iconify-mdi-subset.generated.json b/src/lib/iconify-mdi-subset.generated.json
index a6c6e80..a93571e 100644
--- a/src/lib/iconify-mdi-subset.generated.json
+++ b/src/lib/iconify-mdi-subset.generated.json
@@ -69,6 +69,12 @@
     "map-marker-outline": {
       "body": "<path fill=\"currentColor\" d=\"M12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5M12 2a7 7 0 0 1 7 7c0 5.25-7 13-7 13S5 14.25 5 9a7 7 0 0 1 7-7m0 2a5 5 0 0 0-5 5c0 1 0 3 5 9.71C17 12 17 10 17 9a5 5 0 0 0-5-5\"/>"
     },
+    "magnify-plus": {
+      "body": "<path fill=\"currentColor\" d=\"M9 2a7 7 0 0 1 7 7c0 1.57-.5 3-1.39 4.19l.8.81H16l6 6l-2 2l-6-6v-.59l-.81-.8A6.9 6.9 0 0 1 9 16a7 7 0 0 1-7-7a7 7 0 0 1 7-7M8 5v3H5v2h3v3h2v-3h3V8h-3V5z\"/>"
+    },
+    "file-download": {
+      "body": "<path fill=\"currentColor\" d=\"M14 2H6c-1.11 0-2 .89-2 2v16c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8zm-2 17l-4-4h2.5v-3h3v3H16zm1-10V3.5L18.5 9z\"/>"
+    },
     "download": {
       "body": "<path fill=\"currentColor\" d=\"M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7z\"/>"
     },