From 7c40a230bc8f6e2127ab71061719ffef5ce399b8 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 23 Mar 2026 14:15:04 +0100
Subject: [PATCH] feat: add reusable MobileScreenHeader component

Extracts the back-button header pattern used across all mobile screens
into a single component. Props: title (string), rightActions (ReactNode).
---
 .../components/layout/MobileScreenHeader.tsx  | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 packages/web/src/components/layout/MobileScreenHeader.tsx

diff --git a/packages/web/src/components/layout/MobileScreenHeader.tsx b/packages/web/src/components/layout/MobileScreenHeader.tsx
new file mode 100644
index 00000000..779ae22b
--- /dev/null
+++ b/packages/web/src/components/layout/MobileScreenHeader.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useUIStore } from '../../stores/uiStore';
+
+interface MobileScreenHeaderProps {
+  title: string;
+  rightActions?: React.ReactNode;
+}
+
+export function MobileScreenHeader({ title, rightActions }: MobileScreenHeaderProps) {
+  const popMobileScreen = useUIStore((s) => s.popMobileScreen);
+
+  return (
+    <header className="h-12 flex items-center gap-2 px-3 border-b border-border-soft bg-surface-base shrink-0">
+      <button
+        onClick={popMobileScreen}
+        className="w-8 h-8 flex items-center justify-center text-txt-secondary hover:text-txt-primary"
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+        </svg>
+      </button>
+      <h1 className="text-sm font-semibold text-txt-primary flex-1 truncate">{title}</h1>
+      {rightActions}
+    </header>
+  );
+}