Chore/mobile sheet app state (#33361)

* init

* Update app-state.ts

* Update ProjectLayout.tsx

apps/studio/components/layouts/AccountLayout/WithSidebar.tsx

@@ -2,11 +2,11 @@ import { isUndefined } from 'lodash'
 import { ArrowUpRight, LogOut } from 'lucide-react'
 import Link from 'next/link'
 import { PropsWithChildren, ReactNode, useState } from 'react'
-
-import { Badge, cn, Menu, Sheet, SheetContent } from 'ui'
+import { Badge, cn, Menu } from 'ui'
+import MobileSheetNav from 'ui-patterns/MobileSheetNav/MobileSheetNav'
 import { LayoutHeader } from '../ProjectLayout/LayoutHeader'
 import type { SidebarLink, SidebarSection } from './AccountLayout.types'
-import MobileSheetNav from 'ui-patterns/MobileSheetNav/MobileSheetNav'
+import { useAppStateSnapshot } from 'state/app-state'
 
 interface WithSidebarProps {
   title: string
@@ -31,11 +31,7 @@ const WithSidebar = ({
   customSidebarContent,
 }: PropsWithChildren<WithSidebarProps>) => {
   const noContent = !sections && !customSidebarContent
-  const [isSheetOpen, setIsSheetOpen] = useState(false)
-
-  const handleMobileMenu = () => {
-    setIsSheetOpen(true)
-  }
+  const { mobileMenuOpen, setMobileMenuOpen } = useAppStateSnapshot()
 
   return (
     <div className="flex flex-col md:flex-row h-full">
@@ -51,14 +47,10 @@ const WithSidebar = ({
         />
       )}
       <div className="flex flex-1 flex-col">
-        <LayoutHeader
-          breadcrumbs={breadcrumbs}
-          showProductMenu={!hideSidebar && !noContent}
-          handleMobileMenu={handleMobileMenu}
-        />
+        <LayoutHeader breadcrumbs={breadcrumbs} showProductMenu={!hideSidebar && !noContent} />
         <div className="flex-1 flex-grow overflow-y-auto">{children}</div>
       </div>
-      <MobileSheetNav open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+      <MobileSheetNav open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
         <SidebarContent
           title={title}
           header={header}

apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx

@@ -19,6 +19,7 @@ import BreadcrumbsView from './BreadcrumbsView'
 import { FeedbackDropdown } from './FeedbackDropdown'
 import HelpPopover from './HelpPopover'
 import NotificationsPopoverV2 from './NotificationsPopoverV2/NotificationsPopover'
+import { useAppStateSnapshot } from 'state/app-state'
 
 const LayoutHeaderDivider = () => (
   <span className="text-border-stronger">
@@ -44,7 +45,6 @@ interface LayoutHeaderProps {
   headerBorder?: boolean
   showProductMenu?: boolean
   customSidebarContent?: ReactNode
-  handleMobileMenu: Function
 }
 
 const LayoutHeader = ({
@@ -52,11 +52,11 @@ const LayoutHeader = ({
   breadcrumbs = [],
   headerBorder = true,
   showProductMenu,
-  handleMobileMenu,
 }: LayoutHeaderProps) => {
   const { ref: projectRef } = useParams()
   const selectedProject = useSelectedProject()
   const selectedOrganization = useSelectedOrganization()
+  const { mobileMenuOpen, setMobileMenuOpen } = useAppStateSnapshot()
   const isBranchingEnabled = selectedProject?.is_branch_enabled === true
 
   const { data: subscription } = useOrgSubscriptionQuery({
@@ -91,7 +91,7 @@ const LayoutHeader = ({
             className={cn(
               'group/view-toggle ml-4 flex justify-center flex-col border-none space-x-0 items-start gap-1 !bg-transparent rounded-md min-w-[30px] w-[30px] h-[30px]'
             )}
-            onClick={() => handleMobileMenu()}
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
           >
             <div className="h-px inline-block left-0 w-4 transition-all ease-out bg-foreground-lighter group-hover/view-toggle:bg-foreground p-0 m-0" />
             <div className="h-px inline-block left-0 w-3 transition-all ease-out bg-foreground-lighter group-hover/view-toggle:bg-foreground p-0 m-0" />

apps/studio/components/layouts/ProjectLayout/NavigationBar/MobileViewNav.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react'
+import { useAppStateSnapshot } from 'state/app-state'
 import { cn } from 'ui'
 
 export const ICON_SIZE = 20
@@ -6,10 +7,11 @@ export const ICON_STROKE_WIDTH = 1.5
 
 interface Props {
   title?: string
-  handleMobileMenu: Function
 }
 
-const MobileViewNav = ({ title, handleMobileMenu }: PropsWithChildren<Props>) => {
+const MobileViewNav = ({ title }: PropsWithChildren<Props>) => {
+  const { mobileMenuOpen, setMobileMenuOpen } = useAppStateSnapshot()
+
   return (
     <nav
       className={cn(
@@ -24,7 +26,7 @@ const MobileViewNav = ({ title, handleMobileMenu }: PropsWithChildren<Props>) =>
         className={cn(
           'group/view-toggle flex justify-center flex-col border-none space-x-0 items-start gap-1 !bg-transparent rounded-md min-w-[30px] w-[30px] h-[30px]'
         )}
-        onClick={() => handleMobileMenu()}
+        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
       >
         <div className="h-px inline-block left-0 w-4 transition-all ease-out bg-foreground-lighter group-hover/view-toggle:bg-foreground p-0 m-0" />
         <div className="h-px inline-block left-0 w-3 transition-all ease-out bg-foreground-lighter group-hover/view-toggle:bg-foreground p-0 m-0" />

apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx

@@ -91,11 +91,11 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
   ) => {
     const router = useRouter()
     const [isClient, setIsClient] = useState(false)
-    const [isSheetOpen, setIsSheetOpen] = useState(false)
     const { ref: projectRef } = useParams()
     const selectedOrganization = useSelectedOrganization()
     const selectedProject = useSelectedProject()
-    const { aiAssistantPanel, setAiAssistantPanel } = useAppStateSnapshot()
+    const { aiAssistantPanel, setAiAssistantPanel, mobileMenuOpen, setMobileMenuOpen } =
+      useAppStateSnapshot()
     const { open } = aiAssistantPanel
 
     const projectName = selectedProject?.name
@@ -112,10 +112,6 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
       router.pathname === '/project/[ref]' || router.pathname.includes('/project/[ref]/settings')
     const showPausedState = isPaused && !ignorePausedState
 
-    const handleMobileMenu = () => {
-      setIsSheetOpen(true)
-    }
-
     useEffect(() => {
       setIsClient(true)
     }, [])
@@ -156,7 +152,7 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
             {/* Top Nav to access products from mobile */}
             {!hideIconBar && <MobileNavigationBar />}
             {showProductMenu && productMenu && !(!hideHeader && IS_PLATFORM) && (
-              <MobileViewNav title={product} handleMobileMenu={handleMobileMenu} />
+              <MobileViewNav title={product} />
             )}
 
             {/* Product menu bar */}
@@ -192,10 +188,7 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
               />
               <ResizablePanel id="panel-right" className="h-full flex flex-col">
                 {!hideHeader && IS_PLATFORM && (
-                  <LayoutHeader
-                    showProductMenu={!!(showProductMenu && productMenu)}
-                    handleMobileMenu={handleMobileMenu}
-                  />
+                  <LayoutHeader showProductMenu={!!(showProductMenu && productMenu)} />
                 )}
                 <ResizablePanelGroup
                   className="h-full w-full overflow-x-hidden flex-1"
@@ -245,7 +238,7 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
           <AISettingsModal />
           <ProjectAPIDocs />
         </ProjectContextProvider>
-        <MobileSheetNav open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <MobileSheetNav open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
           {productMenu}
         </MobileSheetNav>
       </AppLayout>

apps/studio/state/app-state.ts

@@ -69,6 +69,7 @@ const getInitialState = () => {
       navigationPanelOpen: false,
       navigationPanelJustClosed: false,
       ongoingQueriesPanelOpen: false,
+      mobileMenuOpen: false,
     }
   }
 
@@ -113,6 +114,7 @@ const getInitialState = () => {
     navigationPanelOpen: false,
     navigationPanelJustClosed: false,
     ongoingQueriesPanelOpen: false,
+    mobileMenuOpen: false,
   }
 }
 
@@ -224,6 +226,11 @@ export const appState = proxy({
   setOnGoingQueriesPanelOpen: (value: boolean) => {
     appState.ongoingQueriesPanelOpen = value
   },
+
+  mobileMenuOpen: false,
+  setMobileMenuOpen: (value: boolean) => {
+    appState.mobileMenuOpen = value
+  },
 })
 
 // Set up localStorage subscription