Move layout to use isDesktop and isMobile

code/ui/manager/src/App.tsx

@@ -11,7 +11,7 @@ import Preview from './container/Preview';
 import Panel from './container/Panel';
 
 import { Layout } from './components/layout/Layout';
-import { useMobileLayoutContext } from './components/mobile/MobileLayoutProvider';
+import { useLayout } from './components/layout/LayoutProvider';
 
 type Props = {
   managerLayoutState: ComponentProps<typeof Layout>['managerLayoutState'];
@@ -20,7 +20,7 @@ type Props = {
 };
 
 export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props) => {
-  const { setMobileAboutOpen } = useMobileLayoutContext();
+  const { setMobileAboutOpen } = useLayout();
 
   return (
     <>

code/ui/manager/src/components/layout/Layout.stories.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { styled } from '@storybook/theming';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Layout } from './Layout';
-import { MobileLayoutProvider } from '../mobile/MobileLayoutProvider';
+import { LayoutProvider } from './LayoutProvider';
 import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories';
 
 const PlaceholderBlock = styled.div({
@@ -65,7 +65,7 @@ const meta = {
   },
   decorators: [
     MobileNavigationStoriesMeta.decorators[0] as any,
-    (storyFn) => <MobileLayoutProvider>{storyFn()}</MobileLayoutProvider>,
+    (storyFn) => <LayoutProvider>{storyFn()}</LayoutProvider>,
   ],
   render: (args) => {
     const [managerLayoutState, setManagerLayoutState] = useState(args.managerLayoutState);

code/ui/manager/src/components/mobile/MobileLayoutProvider.tsx → code/ui/manager/src/components/layout/LayoutProvider.tsx

@@ -1,43 +1,52 @@
 import type { FC } from 'react';
 import React, { createContext, useContext, useState } from 'react';
+import { useMediaQuery } from '../hooks/useMedia';
 
-type MobileLayoutContextType = {
+type LayoutContextType = {
   isMobileMenuOpen: boolean;
   setMobileMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isMobileAboutOpen: boolean;
   setMobileAboutOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isMobilePanelOpen: boolean;
   setMobilePanelOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isDesktop: boolean;
+  isMobile: boolean;
 };
 
-const MobileLayoutContext = createContext<MobileLayoutContextType>({
+const LayoutContext = createContext<LayoutContextType>({
   isMobileMenuOpen: false,
   setMobileMenuOpen: () => {},
   isMobileAboutOpen: false,
   setMobileAboutOpen: () => {},
   isMobilePanelOpen: false,
   setMobilePanelOpen: () => {},
+  isDesktop: false,
+  isMobile: false,
 });
 
-export const MobileLayoutProvider: FC = ({ children }) => {
+export const LayoutProvider: FC = ({ children }) => {
   const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [isMobileAboutOpen, setMobileAboutOpen] = useState(false);
   const [isMobilePanelOpen, setMobilePanelOpen] = useState(false);
+  const isDesktop = useMediaQuery('(min-width: 600px)');
+  const isMobile = !isDesktop;
 
   return (
-    <MobileLayoutContext.Provider
+    <LayoutContext.Provider
       value={{
         isMobileMenuOpen,
         setMobileMenuOpen,
         isMobileAboutOpen,
         setMobileAboutOpen,
         isMobilePanelOpen,
         setMobilePanelOpen,
+        isDesktop,
+        isMobile,
       }}
     >
       {children}
-    </MobileLayoutContext.Provider>
+    </LayoutContext.Provider>
   );
 };
 
-export const useMobileLayoutContext = () => useContext(MobileLayoutContext);
+export const useLayout = () => useContext(LayoutContext);

code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx

@@ -3,13 +3,13 @@ import { ManagerContext } from '@storybook/manager-api';
 import React, { useEffect } from 'react';
 import { within } from '@storybook/testing-library';
 import { MobileAbout } from './MobileAbout';
-import { MobileLayoutProvider, useMobileLayoutContext } from '../MobileLayoutProvider';
+import { LayoutProvider, useLayout } from '../../layout/LayoutProvider';
 
 /**
  * A helper component to open the about page via the MobileLayoutContext
  */
 const OpenAboutHelper = ({ children }: { children: any }) => {
-  const { setMobileAboutOpen } = useMobileLayoutContext();
+  const { setMobileAboutOpen } = useLayout();
   useEffect(() => {
     setMobileAboutOpen(true);
   }, [setMobileAboutOpen]);
@@ -41,9 +41,9 @@ const meta = {
             } as any
           }
         >
-          <MobileLayoutProvider>
+          <LayoutProvider>
             <OpenAboutHelper>{storyFn()}</OpenAboutHelper>
-          </MobileLayoutProvider>
+          </LayoutProvider>
         </ManagerContext.Provider>
       );
     },

code/ui/manager/src/components/mobile/about/MobileAbout.tsx

@@ -5,10 +5,10 @@ import { styled } from '@storybook/theming';
 import { Icons, Link } from '@storybook/components';
 import { UpgradeBlock } from '../../upgrade/UpgradeBlock';
 import { MOBILE_TRANSITION_DURATION } from '../../../constants';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 export const MobileAbout: FC = () => {
-  const { isMobileAboutOpen, setMobileAboutOpen } = useMobileLayoutContext();
+  const { isMobileAboutOpen, setMobileAboutOpen } = useLayout();
   const aboutRef = useRef(null);
 
   return (

code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx

@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { styled } from '@storybook/theming';
 import { Transition } from 'react-transition-group';
 import type { TransitionStatus } from 'react-transition-group/Transition';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 interface MobileAddonsDrawerProps {
   children: ReactNode;
@@ -38,7 +38,7 @@ const Container = styled.div<{ state: TransitionStatus }>(({ theme, state }) =>
 }));
 
 export const MobileAddonsDrawer: FC<MobileAddonsDrawerProps> = ({ children }) => {
-  const { isMobilePanelOpen } = useMobileLayoutContext();
+  const { isMobilePanelOpen } = useLayout();
   const containerRef = useRef(null);
 
   return (

code/ui/manager/src/components/mobile/navigation/MobileMenuDrawer.tsx

@@ -5,7 +5,7 @@ import { Transition } from 'react-transition-group';
 import type { TransitionStatus } from 'react-transition-group/Transition';
 import { MobileAbout } from '../about/MobileAbout';
 import { MOBILE_TRANSITION_DURATION } from '../../../constants';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 interface MobileMenuDrawerProps {
   children?: React.ReactNode;
@@ -16,7 +16,7 @@ export const MobileMenuDrawer: FC<MobileMenuDrawerProps> = ({ children }) => {
   const sidebarRef = useRef<HTMLDivElement>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
   const { isMobileMenuOpen, setMobileMenuOpen, isMobileAboutOpen, setMobileAboutOpen } =
-    useMobileLayoutContext();
+    useLayout();
 
   return (
     <>

code/ui/manager/src/components/mobile/navigation/MobileNavigation.stories.tsx

@@ -4,10 +4,10 @@ import { ManagerContext } from '@storybook/manager-api';
 import { within } from '@storybook/testing-library';
 import { startCase } from 'lodash';
 import { MobileNavigation } from './MobileNavigation';
-import { MobileLayoutProvider, useMobileLayoutContext } from '../MobileLayoutProvider';
+import { LayoutProvider, useLayout } from '../../layout/LayoutProvider';
 
 const MockPanel = () => {
-  const { setMobilePanelOpen } = useMobileLayoutContext();
+  const { setMobilePanelOpen } = useLayout();
   return (
     <div>
       panel
@@ -67,12 +67,12 @@ const meta = {
   decorators: [
     (storyFn) => (
       <ManagerContext.Provider value={mockManagerStore}>
-        <MobileLayoutProvider>
+        <LayoutProvider>
           <div style={{ display: 'flex', flexDirection: 'column', height: '100svh' }}>
             <div style={{ flex: 1 }} />
             {storyFn()}
           </div>
-        </MobileLayoutProvider>
+        </LayoutProvider>
       </ManagerContext.Provider>
     ),
   ],

code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx

@@ -5,7 +5,7 @@ import { IconButton, Icons } from '@storybook/components';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { MobileMenuDrawer } from './MobileMenuDrawer';
 import { MobileAddonsDrawer } from './MobileAddonsDrawer';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 interface MobileNavigationProps {
   menu?: React.ReactNode;
@@ -35,7 +35,7 @@ const useFullStoryName = () => {
 };
 
 export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showPanel }) => {
-  const { isMobileMenuOpen, setMobileMenuOpen, setMobilePanelOpen } = useMobileLayoutContext();
+  const { isMobileMenuOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout();
   const fullStoryName = useFullStoryName();
 
   return (

code/ui/manager/src/components/panel/Panel.tsx

@@ -5,7 +5,7 @@ import { shortcutToHumanString } from '@storybook/manager-api';
 import type { Addon_BaseType } from '@storybook/types';
 import { useMediaQuery } from '../hooks/useMedia';
 import { BREAKPOINT_MIN_600 } from '../../constants';
-import { useMobileLayoutContext } from '../mobile/MobileLayoutProvider';
+import { useLayout } from '../layout/LayoutProvider';
 
 export interface SafeTabProps {
   title: Addon_BaseType['title'];
@@ -52,7 +52,7 @@ export const AddonPanel = React.memo<{
     absolute = true,
   }) => {
     const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
-    const { setMobilePanelOpen } = useMobileLayoutContext();
+    const { setMobilePanelOpen } = useLayout();
 
     return (
       <Tabs

code/ui/manager/src/components/sidebar/Tree.tsx

@@ -38,7 +38,7 @@ import {
 import { statusMapping, getHighestStatus, getGroupStatus } from '../../utils/status';
 import { useMediaQuery } from '../hooks/useMedia';
 import { BREAKPOINT_MIN_600 } from '../../constants';
-import { useMobileLayoutContext } from '../mobile/MobileLayoutProvider';
+import { useLayout } from '../layout/LayoutProvider';
 
 export const Action = styled.button<{ height?: number; width?: number }>(
   ({ theme, height, width }) => ({
@@ -205,7 +205,7 @@ const Node = React.memo<NodeProps>(function Node({
   api,
 }) {
   const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
-  const { setMobileMenuOpen } = useMobileLayoutContext();
+  const { setMobileMenuOpen } = useLayout();
 
   if (!isDisplayed) {
     return null;

code/ui/manager/src/index.tsx

@@ -16,7 +16,7 @@ import { App } from './App';
 
 import Provider from './provider';
 import { settingsPageAddon } from './settings/index';
-import { MobileLayoutProvider } from './components/mobile/MobileLayoutProvider';
+import { LayoutProvider } from './components/layout/LayoutProvider';
 
 // @ts-expect-error (Converted from ts-ignore)
 ThemeProvider.displayName = 'ThemeProvider';
@@ -65,14 +65,14 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => {
 
             return (
               <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
-                <MobileLayoutProvider>
+                <LayoutProvider>
                   <App
                     key="app"
                     pages={pages}
                     managerLayoutState={{ ...state.layout, viewMode: state.viewMode }}
                     setManagerLayoutState={setManagerLayoutState}
                   />
-                </MobileLayoutProvider>
+                </LayoutProvider>
               </ThemeProvider>
             );
           }}