From 1da8216b32b2b8795638bf92077b56e90b68a9fd Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 8 Oct 2025 12:45:39 -0500
Subject: [PATCH] add optional actions to mobile page header for top right
 buttons

---
 web/src/components/mobile/MobilePage.tsx |  7 +++
 web/src/pages/Settings.tsx               | 54 +++++++++++++-----------
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/web/src/components/mobile/MobilePage.tsx b/web/src/components/mobile/MobilePage.tsx
index 524e0839c..776831541 100644
--- a/web/src/components/mobile/MobilePage.tsx
+++ b/web/src/components/mobile/MobilePage.tsx
@@ -170,12 +170,14 @@ export function MobilePageContent({
 
 interface MobilePageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   onClose?: () => void;
+  actions?: React.ReactNode;
 }
 
 export function MobilePageHeader({
   children,
   className,
   onClose,
+  actions,
   ...props
 }: MobilePageHeaderProps) {
   const { t } = useTranslation(["common"]);
@@ -208,6 +210,11 @@ export function MobilePageHeader({
         <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
       </Button>
       <div className="flex flex-row text-center">{children}</div>
+      {actions && (
+        <div className="absolute right-0 flex items-center gap-2">
+          {actions}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 6dce7d853..44e069601 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -330,32 +330,36 @@ export default function Settings() {
           open={contentMobileOpen}
           onOpenChange={setContentMobileOpen}
         >
-          <MobilePageContent className="scrollbar-container overflow-y-auto px-4">
-            <MobilePageHeader>
-              <MobilePageTitle>{t("menu." + page)}</MobilePageTitle>
-              {[
-                "debug",
-                "cameras",
-                "masksAndZones",
-                "motionTuner",
-                "triggers",
-              ].includes(page) && (
-                <div className="absolute right-2 top-2 flex items-center gap-2">
-                  {page == "masksAndZones" && (
-                    <ZoneMaskFilterButton
-                      selectedZoneMask={filterZoneMask}
-                      updateZoneMaskFilter={setFilterZoneMask}
+          <MobilePageContent className="scrollbar-container overflow-y-auto px-2">
+            <MobilePageHeader
+              className="top-0"
+              actions={
+                [
+                  "debug",
+                  "cameras",
+                  "masksAndZones",
+                  "motionTuner",
+                  "triggers",
+                ].includes(page) ? (
+                  <div className="flex items-center gap-2">
+                    {page == "masksAndZones" && (
+                      <ZoneMaskFilterButton
+                        selectedZoneMask={filterZoneMask}
+                        updateZoneMaskFilter={setFilterZoneMask}
+                      />
+                    )}
+                    <CameraSelectButton
+                      allCameras={cameras}
+                      selectedCamera={selectedCamera}
+                      setSelectedCamera={setSelectedCamera}
+                      cameraEnabledStates={cameraEnabledStates}
+                      currentPage={page}
                     />
-                  )}
-                  <CameraSelectButton
-                    allCameras={cameras}
-                    selectedCamera={selectedCamera}
-                    setSelectedCamera={setSelectedCamera}
-                    cameraEnabledStates={cameraEnabledStates}
-                    currentPage={page}
-                  />
-                </div>
-              )}
+                  </div>
+                ) : undefined
+              }
+            >
+              <MobilePageTitle>{t("menu." + page)}</MobilePageTitle>
             </MobilePageHeader>
 
             <div className="p-2">