Move page controls into main content

client/src/App.jsx

@@ -8,7 +8,6 @@ import {
   resetMenu,
   updateOrderStatus
 } from "./api.js";
-import AppHeader from "./components/AppHeader.jsx";
 import MenuPage from "./pages/MenuPage.jsx";
 import OrderPage from "./pages/OrderPage.jsx";
 import QueuePage from "./pages/QueuePage.jsx";
@@ -169,23 +168,20 @@ export default function App() {
 
   return (
     <div className="app-shell">
-      <AppHeader
-        adminUnlocked={adminUnlocked}
-        logoPressing={logoPressing}
-        onLogoPointerDown={startAdminPress}
-        onLogoPointerUp={cancelAdminPress}
-        onLogoPointerLeave={cancelAdminPress}
-        onLogoPointerCancel={cancelAdminPress}
-        onHideAdmin={() => {
-          setAdminUnlocked(false);
-          setView("order");
-        }}
-        view={view}
-        setView={setView}
-      />
-
       {view === "order" && (
         <OrderPage
+          adminUnlocked={adminUnlocked}
+          logoPressing={logoPressing}
+          onLogoPointerDown={startAdminPress}
+          onLogoPointerUp={cancelAdminPress}
+          onLogoPointerLeave={cancelAdminPress}
+          onLogoPointerCancel={cancelAdminPress}
+          onHideAdmin={() => {
+            setAdminUnlocked(false);
+            setView("order");
+          }}
+          view={view}
+          setView={setView}
           menu={menu}
           settings={settings}
           selectedCategory={selectedCategory}
@@ -212,6 +208,18 @@ export default function App() {
 
       {view === "queue" && (
         <QueuePage
+          adminUnlocked={adminUnlocked}
+          logoPressing={logoPressing}
+          onLogoPointerDown={startAdminPress}
+          onLogoPointerUp={cancelAdminPress}
+          onLogoPointerLeave={cancelAdminPress}
+          onLogoPointerCancel={cancelAdminPress}
+          onHideAdmin={() => {
+            setAdminUnlocked(false);
+            setView("order");
+          }}
+          view={view}
+          setView={setView}
           orders={orders}
           updateOrderStatus={updateOrderStatus}
           deleteOrder={deleteOrder}
@@ -222,6 +230,18 @@ export default function App() {
 
       {view === "menu" && (
         <MenuPage
+          adminUnlocked={adminUnlocked}
+          logoPressing={logoPressing}
+          onLogoPointerDown={startAdminPress}
+          onLogoPointerUp={cancelAdminPress}
+          onLogoPointerLeave={cancelAdminPress}
+          onLogoPointerCancel={cancelAdminPress}
+          onHideAdmin={() => {
+            setAdminUnlocked(false);
+            setView("order");
+          }}
+          view={view}
+          setView={setView}
           menu={menu}
           menuForm={menuForm}
           setMenuForm={setMenuForm}

client/src/components/PageBar.jsx

@@ -5,7 +5,7 @@ const tabLabels = {
   menu: "Menu Admin"
 };
 
-export default function AppHeader({
+export default function PageBar({
   adminUnlocked,
   logoPressing,
   onLogoPointerDown,
@@ -19,7 +19,7 @@ export default function AppHeader({
   const visibleTabs = adminUnlocked ? ["queue", "menu"] : [];
 
   return (
-    <header className="topbar">
+    <div className="page-bar">
       <button
         className={`brand-mark ${logoPressing ? "is-pressing" : ""}`}
         onPointerDown={onLogoPointerDown}
@@ -47,6 +47,6 @@ export default function AppHeader({
           </button>
         </nav>
       )}
-    </header>
+    </div>
   );
 }

client/src/pages/MenuPage.jsx

@@ -1,7 +1,17 @@
+import PageBar from "../components/PageBar.jsx";
 import { formatCurrency } from "../lib/formatters.js";
 import { initialBuilder } from "../lib/order.js";
 
 export default function MenuPage({
+  adminUnlocked,
+  logoPressing,
+  onLogoPointerDown,
+  onLogoPointerUp,
+  onLogoPointerLeave,
+  onLogoPointerCancel,
+  onHideAdmin,
+  view,
+  setView,
   menu,
   menuForm,
   setMenuForm,
@@ -16,6 +26,17 @@ export default function MenuPage({
 }) {
   return (
     <section className="menu-screen">
+      <PageBar
+        adminUnlocked={adminUnlocked}
+        logoPressing={logoPressing}
+        onLogoPointerDown={onLogoPointerDown}
+        onLogoPointerUp={onLogoPointerUp}
+        onLogoPointerLeave={onLogoPointerLeave}
+        onLogoPointerCancel={onLogoPointerCancel}
+        onHideAdmin={onHideAdmin}
+        view={view}
+        setView={setView}
+      />
       <div className="panel">
         <div className="panel-header">
           <div>

client/src/pages/OrderPage.jsx

@@ -2,6 +2,7 @@ import milkTeaBadge from "../../../assets/milk-tea-badge.png";
 import fruitTeaBadge from "../../../assets/fruit-tea-badge-transparent.png";
 import slushBadge from "../../../assets/slush-badge.png";
 import OptionGroup from "../components/OptionGroup.jsx";
+import PageBar from "../components/PageBar.jsx";
 import {
   categoryMonogram,
   HERO_CATEGORIES,
@@ -18,6 +19,15 @@ const heroCategoryImages = {
 };
 
 export default function OrderPage({
+  adminUnlocked,
+  logoPressing,
+  onLogoPointerDown,
+  onLogoPointerUp,
+  onLogoPointerLeave,
+  onLogoPointerCancel,
+  onHideAdmin,
+  view,
+  setView,
   menu,
   settings,
   selectedCategory,
@@ -61,6 +71,17 @@ export default function OrderPage({
 
   return (
     <section className={`screen order-screen ${orderMode === "premade" || showCart ? "is-single" : ""}`}>
+      <PageBar
+        adminUnlocked={adminUnlocked}
+        logoPressing={logoPressing}
+        onLogoPointerDown={onLogoPointerDown}
+        onLogoPointerUp={onLogoPointerUp}
+        onLogoPointerLeave={onLogoPointerLeave}
+        onLogoPointerCancel={onLogoPointerCancel}
+        onHideAdmin={onHideAdmin}
+        view={view}
+        setView={setView}
+      />
       {orderMode && (
         <div className="order-toolbar">
           <button className="text-btn" onClick={() => {
@@ -102,7 +123,6 @@ export default function OrderPage({
                   }}
                 >
                   <img src={heroCategoryImages[category.asset]} alt="" />
-                  <span>{category.displayLabel}</span>
                 </button>
               ))}
             </div>

client/src/pages/QueuePage.jsx

@@ -1,9 +1,19 @@
+import PageBar from "../components/PageBar.jsx";
 import SummaryCard from "../components/SummaryCard.jsx";
 import { formatCurrency, formatTime, titleCase } from "../lib/formatters.js";
 
 const queueStatuses = ["new", "making", "ready"];
 
 export default function QueuePage({
+  adminUnlocked,
+  logoPressing,
+  onLogoPointerDown,
+  onLogoPointerUp,
+  onLogoPointerLeave,
+  onLogoPointerCancel,
+  onHideAdmin,
+  view,
+  setView,
   orders,
   updateOrderStatus,
   deleteOrder,
@@ -12,6 +22,17 @@ export default function QueuePage({
 }) {
   return (
     <section className="queue-screen">
+      <PageBar
+        adminUnlocked={adminUnlocked}
+        logoPressing={logoPressing}
+        onLogoPointerDown={onLogoPointerDown}
+        onLogoPointerUp={onLogoPointerUp}
+        onLogoPointerLeave={onLogoPointerLeave}
+        onLogoPointerCancel={onLogoPointerCancel}
+        onHideAdmin={onHideAdmin}
+        view={view}
+        setView={setView}
+      />
       <div className="queue-summary">
         <SummaryCard label="Open orders" value={orders.filter((order) => order.status !== "completed").length} />
         <SummaryCard label="New" value={orders.filter((order) => order.status === "new").length} />

client/src/styles.css

@@ -60,28 +60,23 @@ button {
   padding: 0.9rem 1rem 1rem;
 }
 
-.topbar {
+.page-bar {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   align-items: center;
-  margin-bottom: 0.85rem;
+  grid-column: 1 / -1;
-  padding: 0.85rem 1.05rem;
+  margin-bottom: 0.2rem;
-  border: 1px solid rgba(16, 16, 16, 0.08);
-  border-radius: 30px;
-  background:
-    linear-gradient(135deg, rgba(255, 252, 247, 0.96), rgba(250, 239, 214, 0.94));
-  box-shadow: var(--shadow);
 }
 
-.topbar h1,
+.page-bar h1,
 .panel h2,
 .panel h3 {
   margin: 0.2rem 0 0;
   font-family: Georgia, "Times New Roman", serif;
 }
 
-.topbar h1 {
+.page-bar h1 {
   font-weight: 800;
 }
 
@@ -292,11 +287,6 @@ button {
   object-fit: contain;
 }
 
-.hero-category-btn span {
-  font-weight: 800;
-  letter-spacing: 0.02em;
-}
-
 .mode-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -643,7 +633,7 @@ select {
 }
 
 @media (max-width: 980px) {
-  .topbar,
+  .page-bar,
   .screen,
   .mode-hero,
   .hero-category-row,
@@ -654,7 +644,7 @@ select {
     grid-template-columns: 1fr;
   }
 
-  .topbar {
+  .page-bar {
     align-items: flex-start;
     flex-direction: column;
   }