From 66cbab3a022930d5c2742c601ba96361b1d323a5 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Thu, 15 Oct 2026 11:34:54 +0000
Subject: [PATCH] Kiosk: Home button in the app's own header (posts
 hnf:kiosk-home)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 frontend/src/index.css       |  5 +++++
 frontend/src/pages/Kiosk.tsx | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6943083..4e25da1 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -439,3 +439,8 @@ table.data tr.clickable { cursor: pointer; }
 .kiosk-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 16px; }
 .kiosk-close { background: none; border: none; color: var(--text-mid); cursor: pointer; display: flex; padding: 4px; }
 .kiosk-modal-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+
+.kiosk-home {
+  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: none; border-radius: 10px;
+  background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
+}
diff --git a/frontend/src/pages/Kiosk.tsx b/frontend/src/pages/Kiosk.tsx
index 1aff8c7..cc98c45 100644
--- a/frontend/src/pages/Kiosk.tsx
+++ b/frontend/src/pages/Kiosk.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Sunrise, Sunset, PauseCircle, WifiOff, X, Lightbulb, LightbulbOff } from 'lucide-react'
+import { Sunrise, Sunset, PauseCircle, WifiOff, X, Lightbulb, LightbulbOff, Home } from 'lucide-react'
 import { fetchState, setDevicePower, setGroupPower, holdSchedules } from '../api'
 import type { StateResponse, LightDevice } from '../types'
 
@@ -11,6 +11,13 @@ function fmtTime(iso: string | null | undefined, tz: string) {
   return new Date(iso).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', timeZone: tz })
 }
 
+// Inside the portal's kiosk shell the app supplies its own Home button (the
+// shell has no bar) — it asks the shell to go back to the app list.
+const embedded = window.self !== window.top
+function goHome() {
+  window.parent.postMessage({ type: 'hnf:kiosk-home' }, window.location.origin)
+}
+
 // Back to the shared kiosk home (or, if opened standalone, just say so) when the
 // kiosk session is gone — never the staff login.
 function leaveToKioskHome() {
@@ -81,6 +88,11 @@ export default function Kiosk() {
   return (
     <div className="kiosk-screen">
       <header className="kiosk-header">
+        {embedded && (
+          <button className="kiosk-home" onClick={goHome} aria-label="Back to home">
+            <Home size={16} strokeWidth={1.75} /> Home
+          </button>
+        )}
         <span className="kiosk-title"><Lightbulb size={20} strokeWidth={1.75} /> Lighting</span>
         <span className="kiosk-sun">
           <span><Sunrise size={16} strokeWidth={1.75} /> {fmtTime(data.sun?.sunrise, data.timezone)}</span>