feat: plakat redesign phase 3 (windows on desktop, sheets on mobile)

- Tapping an object on the desk opens a window (desktop) or a bottom sheet
  (mobile) instead of flipping: projects, now, servers, reading, about, contact
- Desktop windows in poster style (2px ink rule, hard offset shadow), open
  from the tapped object, thrown by the title bar with momentum and elastic
  viewport edges, stack by focus, minimize into a tray, Escape closes the top
  window, focus moves to close and returns to the trigger
- Mobile sheets via vaul 1.1.2: drag down to dismiss, overlay, focus trap
- Project window shows live/source links from Directus when present
- Hero "Write me" opens the contact window; still a plain #contact link
  without JavaScript
- Shared current-book loader for desk, deck and reading window
- Texts in de/en, i18n key check extended

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/components/tisch/Board.tsx

@@ -12,6 +12,8 @@ import {
   type MotionValue,
 } from "framer-motion";
 import ObjectFace from "./ObjectFace";
+import { useOpenWindow } from "../fenster/WindowProvider";
+import { labelFor, windowFor } from "./windowFor";
 import { BOARD_SIZE, BOARD_SPOTS, type TischLabels, type TischObject } from "./types";
 
 interface Handle {
@@ -138,7 +140,6 @@ interface BoardItemProps {
 
 function BoardItem({ obj, labels, spot, z, tableRef, onFront, register }: BoardItemProps) {
   const reduce = useReducedMotion();
-  const [flipped, setFlipped] = useState(false);
   const [lifted, setLifted] = useState(false);
   // Framer meldet nach einem Wurf trotzdem einen Tap; der soll die Karte nicht umdrehen
   const dragged = useRef(false);
@@ -151,12 +152,17 @@ function BoardItem({ obj, labels, spot, z, tableRef, onFront, register }: BoardI
   const rotate = useTransform(() => base.get() + (reduce ? 0 : tilt.get()));
 
   const { w, h } = BOARD_SIZE[obj.kind];
-  const canFlip = obj.kind === "project";
+  const openWindow = useOpenWindow();
+  const elRef = useRef<HTMLDivElement | null>(null);
+  const openIt = () => openWindow?.(windowFor(obj), elRef.current);
   const radius = { sticker: "rounded-full", photo: "rounded-md", book: "rounded-[6px_14px_14px_6px]" }[obj.kind as string] ?? "rounded-2xl";
 
   return (
     <motion.div
-      ref={(el) => register(el ? { el, x, y, base, spotRotation: spot.r } : null)}
+      ref={(el) => {
+        elRef.current = el;
+        register(el ? { el, x, y, base, spotRotation: spot.r } : null);
+      }}
       drag
       dragConstraints={tableRef}
       dragElastic={0.18}
@@ -171,21 +177,17 @@ function BoardItem({ obj, labels, spot, z, tableRef, onFront, register }: BoardI
         setLifted(true);
       }}
       onDragEnd={() => setLifted(false)}
-      onTap={canFlip ? () => !dragged.current && setFlipped((f) => !f) : undefined}
-      onKeyDown={
-        canFlip
-          ? (e) => {
-              if (e.key === " ") {
-                e.preventDefault();
-                setFlipped((f) => !f);
-              }
-            }
-          : undefined
-      }
-      tabIndex={canFlip ? 0 : undefined}
-      role={canFlip ? "button" : undefined}
-      aria-pressed={canFlip ? flipped : undefined}
-      aria-label={canFlip && obj.kind === "project" ? obj.title : undefined}
+      onTap={() => !dragged.current && openIt()}
+      onKeyDown={(e) => {
+        if (e.key === " ") {
+          e.preventDefault();
+          openIt();
+        }
+      }}
+      tabIndex={0}
+      role="button"
+      aria-haspopup="dialog"
+      aria-label={labelFor(obj, labels)}
       className={`absolute cursor-grab touch-none select-none active:cursor-grabbing ${radius} transition-shadow duration-200 ease-out ${
         lifted ? "shadow-[14px_16px_0_rgb(var(--plakat-ink))]" : "shadow-[6px_6px_0_rgb(var(--plakat-ink))]"
       }`}
@@ -200,7 +202,7 @@ function BoardItem({ obj, labels, spot, z, tableRef, onFront, register }: BoardI
         zIndex: z,
       }}
     >
-      <ObjectFace obj={obj} labels={labels} flipped={flipped} />
+      <ObjectFace obj={obj} labels={labels} />
     </motion.div>
   );
 }

app/components/tisch/Deck.tsx

@@ -3,6 +3,8 @@
 import { useRef, useState } from "react";
 import { AnimatePresence, motion, useMotionValue, useTransform, type PanInfo, type Variants } from "framer-motion";
 import ObjectFace from "./ObjectFace";
+import { useOpenWindow } from "../fenster/WindowProvider";
+import { labelFor, windowFor } from "./windowFor";
 import type { TischLabels, TischObject } from "./types";
 
 interface DeckProps {
@@ -101,12 +103,13 @@ interface DeckCardProps {
 }
 
 function DeckCard({ obj, labels, depth, enteringFromLeft, onDismiss }: DeckCardProps) {
-  const [flipped, setFlipped] = useState(false);
   const dragged = useRef(false);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const openWindow = useOpenWindow();
+  const openIt = () => openWindow?.(windowFor(obj), cardRef.current);
   const x = useMotionValue(0);
   const dragRotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]);
   const isTop = depth === 0;
-  const canFlip = obj.kind === "project";
   const restRotate = depth === 0 ? 0 : depth % 2 ? 3 : -3;
 
   const handleDragEnd = (_: unknown, info: PanInfo) => {
@@ -126,6 +129,7 @@ function DeckCard({ obj, labels, depth, enteringFromLeft, onDismiss }: DeckCardP
       transition={{ type: "spring", bounce: 0, duration: 0.45 }}
     >
       <motion.div
+        ref={cardRef}
         className={`h-full w-full ${obj.kind === "sticker" ? "rounded-full" : "rounded-2xl"} shadow-[6px_6px_0_rgb(var(--plakat-ink))] ${isTop ? "cursor-grab" : "pointer-events-none"}`}
         style={{ x, rotate: dragRotate, touchAction: "pan-y" }}
         drag={isTop ? "x" : false}
@@ -138,13 +142,20 @@ function DeckCard({ obj, labels, depth, enteringFromLeft, onDismiss }: DeckCardP
           dragged.current = true;
         }}
         onDragEnd={handleDragEnd}
-        onTap={isTop && canFlip ? () => !dragged.current && setFlipped((f) => !f) : undefined}
-        tabIndex={isTop && canFlip ? 0 : -1}
-        role={canFlip ? "button" : undefined}
-        aria-pressed={canFlip ? flipped : undefined}
+        onTap={isTop ? () => !dragged.current && openIt() : undefined}
+        onKeyDown={(e) => {
+          if (isTop && e.key === " ") {
+            e.preventDefault();
+            openIt();
+          }
+        }}
+        tabIndex={isTop ? 0 : -1}
+        role="button"
+        aria-haspopup="dialog"
+        aria-label={labelFor(obj, labels)}
         aria-hidden={!isTop}
       >
-        <ObjectFace obj={obj} labels={labels} flipped={flipped} />
+        <ObjectFace obj={obj} labels={labels} />
       </motion.div>
     </motion.div>
   );

app/components/tisch/ObjectFace.tsx

@@ -4,11 +4,11 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import type { TischLabels, TischObject } from "./types";
+import { loadCurrentBook, type CurrentBook } from "./currentBook";
 
 interface ObjectFaceProps {
   obj: TischObject;
   labels: TischLabels;
-  flipped?: boolean;
 }
 
 const pad = (n: number) => String(n).padStart(2, "0");
@@ -17,48 +17,21 @@ const pad = (n: number) => String(n).padStart(2, "0");
 const edge = "h-full w-full overflow-hidden rounded-2xl border-2 border-ink";
 
 /** Zeichnet ein Objekt. Größe und Position bestimmt der Container (Tisch oder Stapel). */
-export default function ObjectFace({ obj, labels, flipped = false }: ObjectFaceProps) {
+export default function ObjectFace({ obj, labels }: ObjectFaceProps) {
   switch (obj.kind) {
     case "project":
       return (
-        <div className="h-full w-full [perspective:1200px]">
-          <div
-            className={`relative h-full w-full rounded-2xl transition-transform duration-[560ms] ease-in-out [transform-style:preserve-3d] ${
-              flipped ? "[transform:rotateY(180deg)]" : ""
-            }`}
-          >
-            <div
-              className={`${edge} absolute inset-0 flex flex-col justify-between p-4 [backface-visibility:hidden]`}
-              style={{ background: obj.color, color: obj.textColor }}
-            >
-              <div className="flex justify-between font-mono text-xs">
-                <span>({pad(obj.index + 1)})</span>
-                <span>{obj.year}</span>
-              </div>
-              <h3 className="font-display text-[2.4rem] font-extrabold leading-[0.88] tracking-[-0.045em] [overflow-wrap:anywhere] [font-variation-settings:'wdth'_78] [color:inherit]">
-                {obj.title}
-              </h3>
-              <div className="font-mono text-xs leading-snug">
-                <div>{obj.tags.slice(0, 3).join(" · ")}</div>
-                <div className="mt-2 opacity-70">{labels.flip} ↻</div>
-              </div>
-            </div>
-            <div
-              className={`${edge} absolute inset-0 flex flex-col justify-between bg-paper p-4 text-ink [backface-visibility:hidden] [transform:rotateY(180deg)]`}
-            >
-              <div className="flex justify-between font-mono text-xs">
-                <span className="truncate pr-2">{obj.title}</span>
-                <span>{obj.year}</span>
-              </div>
-              <p className="line-clamp-6 text-[15px] leading-snug">{obj.description}</p>
-              <Link
-                href={obj.href}
-                className="inline-flex w-fit items-center gap-1.5 rounded-full bg-ink px-3.5 py-2 text-sm font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]"
-                onPointerDownCapture={(e) => e.stopPropagation()}
-              >
-                {labels.details} <span aria-hidden="true">→</span>
-              </Link>
-            </div>
+        <div className={`${edge} flex flex-col justify-between p-4`} style={{ background: obj.color, color: obj.textColor }}>
+          <div className="flex justify-between font-mono text-xs">
+            <span>({pad(obj.index + 1)})</span>
+            <span>{obj.year}</span>
+          </div>
+          <h3 className="font-display text-[2.4rem] font-extrabold leading-[0.88] tracking-[-0.045em] [overflow-wrap:anywhere] [font-variation-settings:'wdth'_78] [color:inherit]">
+            {obj.title}
+          </h3>
+          <div className="font-mono text-xs leading-snug">
+            <div>{obj.tags.slice(0, 3).join(" · ")}</div>
+            <div className="mt-2 opacity-70">{labels.flip} ↗</div>
           </div>
         </div>
       );
@@ -121,29 +94,6 @@ export default function ObjectFace({ obj, labels, flipped = false }: ObjectFaceP
   }
 }
 
-interface CurrentBook {
-  title: string;
-  authors: string[];
-  image: string | null;
-  progress: number;
-}
-
-// Tisch und Stapel zeigen das Buch beide; so wird es nur einmal geladen
-let bookRequest: Promise<CurrentBook | null> | null = null;
-function loadCurrentBook(): Promise<CurrentBook | null> {
-  if (!bookRequest) {
-    bookRequest = fetch("/api/n8n/hardcover/currently-reading")
-      .then((res) => (res.ok ? res.json() : null))
-      .then((data) => {
-        const list = data?.currentlyReading;
-        const first = Array.isArray(list) ? list[0] : list;
-        return first ?? null;
-      })
-      .catch(() => null);
-  }
-  return bookRequest;
-}
-
 function BookFace({ href, labels }: { href: string; labels: TischLabels }) {
   const [book, setBook] = useState<CurrentBook | null | undefined>(undefined);
 

app/components/tisch/TischSection.tsx

@@ -61,6 +61,8 @@ export default async function TischSection({ locale }: TischSectionProps) {
       href: `/${locale}/projects/${p.slug}`,
       color: color.bg,
       textColor: color.text,
+      liveUrl: p.live_url && p.live_url !== "#" ? p.live_url : undefined,
+      githubUrl: p.github_url && p.github_url !== "#" ? p.github_url : undefined,
     };
   });
 

app/components/tisch/currentBook.ts

@@ -0,0 +1,24 @@
+// Aktuelles Buch aus Hardcover (über n8n). Tisch, Stapel und Lese-Fenster teilen sich eine Anfrage.
+
+export interface CurrentBook {
+  title: string;
+  authors: string[];
+  image: string | null;
+  progress: number;
+}
+
+// Tisch und Stapel zeigen das Buch beide; so wird es nur einmal geladen
+let bookRequest: Promise<CurrentBook | null> | null = null;
+export function loadCurrentBook(): Promise<CurrentBook | null> {
+  if (!bookRequest) {
+    bookRequest = fetch("/api/n8n/hardcover/currently-reading")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        const list = data?.currentlyReading;
+        const first = Array.isArray(list) ? list[0] : list;
+        return first ?? null;
+      })
+      .catch(() => null);
+  }
+  return bookRequest;
+}

app/components/tisch/types.ts

@@ -11,6 +11,8 @@ export interface TischProject {
   href: string;
   color: string;
   textColor: string;
+  liveUrl?: string;
+  githubUrl?: string;
 }
 
 export interface TischTicket {

app/components/tisch/windowFor.ts

@@ -0,0 +1,37 @@
+import type { WindowRequest } from "../fenster/types";
+import type { TischLabels, TischObject } from "./types";
+
+/** Welches Fenster ein Objekt auf dem Tisch öffnet */
+export function windowFor(obj: TischObject): WindowRequest {
+  switch (obj.kind) {
+    case "project":
+      return { kind: "project", project: obj };
+    case "ticket":
+      return { kind: "now" };
+    case "server":
+    case "sticker":
+      return { kind: "server" };
+    case "book":
+      return { kind: "read" };
+    case "photo":
+      return { kind: "about" };
+  }
+}
+
+/** Vorlesetext für das Objekt als Knopf */
+export function labelFor(obj: TischObject, labels: TischLabels): string {
+  switch (obj.kind) {
+    case "project":
+      return obj.title;
+    case "ticket":
+      return labels.ticketTitle;
+    case "server":
+      return labels.serverTitle;
+    case "book":
+      return labels.bookLabel;
+    case "photo":
+      return labels.photoCaption;
+    case "sticker":
+      return labels.sticker;
+  }
+}