responsiveness fix

frontend/src/components/DashboardPage.jsx

@@ -28,6 +28,8 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { getCurrentAccount, getMyCompanyDomain } from "../api";
 import Brand from "./Brand";
+import MobileChrome from "./MobileChrome";
+import { ShellModeContext } from "../shellMode";
 import CompanyDnsSetup from "./CompanyDnsSetup";
 import CompanyDomains from "./CompanyDomains";
 import CompanyAdministrators from "./CompanyAdministrators";
@@ -110,6 +112,7 @@ export default function DashboardPage() {
   const [domainError, setDomainError] = useState("");
   const [active, setActive] = useState("Inbox");
   const [menuOpen, setMenuOpen] = useState(false);
+  const [sheet, setSheet] = useState(null);
   const [notice, setNotice] = useState("");
   const [loading, setLoading] = useState(true);
   const [mailRefreshKey, setMailRefreshKey] = useState(0);
@@ -174,6 +177,7 @@ export default function DashboardPage() {
     setCompanyActive(label);
     setAgentNav(null);
     setMenuOpen(false);
+    setSheet(null);
   }
 
   function selectMailItem(item) {
@@ -190,6 +194,7 @@ export default function DashboardPage() {
       setLens("all");
     }
     setMenuOpen(false);
+    setSheet(null);
   }
 
   function selectLabel(name) {
@@ -198,6 +203,7 @@ export default function DashboardPage() {
     setActive("Inbox");
     setLens(name);
     setMenuOpen(false);
+    setSheet(null);
   }
 
   function selectAgentItem(item, actionKey) {
@@ -206,6 +212,32 @@ export default function DashboardPage() {
     setLens("all");
     setAgentNav(actionKey);
     setMenuOpen(false);
+    const compact = window.matchMedia("(max-width: 1199px)").matches;
+    setSheet(actionKey === "handoff" || !compact ? null : "agent");
+  }
+
+  function openAgentDestination(actionKey) {
+    setCompanyActive(null);
+    setActive("Inbox");
+    setLens("all");
+    setAgentNav(actionKey);
+    setMenuOpen(false);
+    setSheet("agent");
+  }
+
+  function showMailboxForSheet() {
+    setCompanyActive(null);
+    setActive("Inbox");
+    setLens("all");
+    setMenuOpen(false);
+  }
+
+  function openSheet(next) {
+    if (next === "agent" || next === "calendar" || next === "notes") {
+      showMailboxForSheet();
+      setAgentNav(next === "agent" ? "ask" : null);
+    }
+    setSheet(next);
   }
 
   function openCompose(context = null) {
@@ -277,10 +309,15 @@ export default function DashboardPage() {
         : active;
 
   return (
-    <div className="dashboard">
+    <ShellModeContext.Provider value={{ sheet, setSheet }}>
+    <div
+      className="dashboard"
+      data-sheet={sheet || undefined}
+      data-onboarding={isOrgOnboarding ? "true" : undefined}
+    >
       <header className="dashboard-mobile-header">
         <Brand />
-        <button aria-label="Open navigation" type="button" onClick={() => setMenuOpen(true)}>
+        <button aria-label="Open navigation" type="button" onClick={() => { setSheet(null); setMenuOpen(true); }}>
           <Menu size={21} />
         </button>
       </header>
@@ -525,7 +562,31 @@ export default function DashboardPage() {
           }}
         />
       )}
+      {sheet && sheet !== "more" && (
+        <button className="shell-drawer-scrim" type="button" aria-label="Close panel" onClick={() => setSheet(null)} />
+      )}
+      {!isOrgOnboarding && (
+        <MobileChrome
+          sheet={sheet}
+          mailActive={!sheet && !companyActive && agentNav !== "handoff"}
+          account={account}
+          onMail={() => selectMailItem("Inbox")}
+          onAgent={() => openSheet("agent")}
+          onCompose={() => openCompose()}
+          onCalendar={() => openSheet("calendar")}
+          onMore={() => setSheet((current) => (current === "more" ? null : "more"))}
+          onClose={() => setSheet(null)}
+          onSettings={() => selectMailItem("Settings")}
+          onNotes={() => openSheet("notes")}
+          onHandoff={() => selectAgentItem("Human Handoff", "handoff")}
+          onActionItems={() => openAgentDestination("actions")}
+          onSummaries={() => openAgentDestination("summaries")}
+          onIntegrations={() => openAgentDestination("integrations")}
+          onLogout={logout}
+        />
+      )}
       <ComposeDock account={account} onSent={emailSent} agentOpen={!companyActive} />
     </div>
+    </ShellModeContext.Provider>
   );
 }