From 3e0e6c220d5abc6ddeaa2a0350ff1728700fe965 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sat, 29 Aug 2026 23:08:49 +0000
Subject: [PATCH] Add cup/pause step icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Companion to the payload-repo commit adding these to StepRowBlock's
enum — none of the existing 10 fit a physical drink-related product.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013Eg6h91yngXmSnM51wxXM8
---
 app/components/icons/StepIcons.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/app/components/icons/StepIcons.tsx b/app/components/icons/StepIcons.tsx
index 7a5fd24..e3766b2 100644
--- a/app/components/icons/StepIcons.tsx
+++ b/app/components/icons/StepIcons.tsx
@@ -117,6 +117,29 @@ function IconShield() {
   );
 }
 
+function IconCup() {
+  // Mug + handle + steam — for "pour yourself a drink" steps (Tasse "Die
+  // Pause." was the first thing that needed this, none of the existing 10
+  // fit a physical cup product at all).
+  return (
+    <svg width="40" height="44" viewBox="0 0 40 44" fill="none">
+      <path d="M6 16h20v14a7 7 0 0 1-7 7h-6a7 7 0 0 1-7-7V16z" stroke="#f6a701" strokeWidth="2" strokeLinejoin="round" />
+      <path d="M26 20h3a5 5 0 0 1 0 10h-3" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
+      <path d="M12 4c-2 2-2 3.5 0 5.5M20 4c-2 2-2 3.5 0 5.5" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconPause() {
+  // Two rounded bars — "sit still for a moment" steps.
+  return (
+    <svg width="32" height="40" viewBox="0 0 32 40" fill="none">
+      <rect x="5" y="4" width="8" height="32" rx="3" stroke="#f6a701" strokeWidth="2" />
+      <rect x="19" y="4" width="8" height="32" rx="3" stroke="#f6a701" strokeWidth="2" />
+    </svg>
+  );
+}
+
 // Keys MUST match the Payload StepRowBlock's `icon` select field options
 // (docker/payload/src/blocks/StepRowBlock.ts) exactly.
 export const STEP_ICONS: Record<string, () => React.ReactNode> = {
@@ -130,6 +153,8 @@ export const STEP_ICONS: Record<string, () => React.ReactNode> = {
   target: IconTarget,
   trendingUp: IconTrendingUp,
   shield: IconShield,
+  cup: IconCup,
+  pause: IconPause,
 };
 
 // Same symbolic clock icon /lebensuhr uses above its "24 Stunden" heading