[ui] Restore wide-screen left nav docking (#25177)

## Summary & Motivation

Restore the behavior of the left nav on wide viewports: when open, the
nav does not slide over the main content. It can also be permanently
kept open, via a localStorage value.

This is a selective revert of #24976. The "small screen" behavior
(sliding nav) and "wide screen" behavior (docked nav) distinction will
be restored.

## How I Tested These Changes

View app in wide screen and narrow screen. Verify that open/close of
left nav works correctly, and that in the wide screen version, the
preference is preserved through reload.

Verify in both legacy nav and new nav. (This affects top navigation and
other pages.)

## Changelog

[ui] Restore docked left nav behavior for wide viewports.

Author: hellendag

js_modules/dagster-ui/packages/ui-core/src/app/App.tsx

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import {getFeatureFlags, setFeatureFlags, useFeatureFlags} from './Flags';
 import {LayoutContext} from './LayoutProvider';
 import {useStateWithStorage} from '../hooks/useStateWithStorage';
-import {LeftNav} from '../nav/LeftNav';
+import {LEFT_NAV_WIDTH, LeftNav} from '../nav/LeftNav';
 
 interface Props {
   banner?: React.ReactNode;
@@ -25,13 +25,15 @@ export const App = ({banner, children}: Props) => {
   );
 
   const onClickMain = React.useCallback(() => {
-    nav.close();
+    if (nav.isSmallScreen) {
+      nav.close();
+    }
   }, [nav]);
 
   return (
     <Container>
       <LeftNav />
-      <Main $navOpen={nav.isOpen} onClick={onClickMain}>
+      <Main $smallScreen={nav.isSmallScreen} $navOpen={nav.isOpen} onClick={onClickMain}>
         <div>{banner}</div>
         {!flagLegacyNav && !didDismissNavAlert ? (
           <ExperimentalNavAlert setDidDismissNavAlert={setDidDismissNavAlert} />
@@ -88,12 +90,25 @@ const ExperimentalNavAlert = (props: AlertProps) => {
   );
 };
 
-const Main = styled.div<{$navOpen: boolean}>`
+const Main = styled.div<{$smallScreen: boolean; $navOpen: boolean}>`
   height: 100%;
   z-index: 1;
   display: flex;
   flex-direction: column;
-  width: 100%;
+
+  ${({$navOpen, $smallScreen}) => {
+    if ($smallScreen || !$navOpen) {
+      return `
+        margin-left: 0;
+        width: 100%;
+      `;
+    }
+
+    return `
+      margin-left: ${LEFT_NAV_WIDTH}px;
+      width: calc(100% - ${LEFT_NAV_WIDTH}px);
+    `;
+  }}
 `;
 
 const Container = styled.div`

js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx

@@ -10,6 +10,7 @@ import {
   useRepositoryLocationReload,
 } from '../../nav/useRepositoryLocationReload';
 import {SearchDialog} from '../../search/SearchDialog';
+import {useFeatureFlags} from '../Flags';
 import {LayoutContext} from '../LayoutProvider';
 import {ShortcutHandler} from '../ShortcutHandler';
 import {WebSocketStatus} from '../WebSocketProvider';
@@ -55,6 +56,7 @@ export const AppTopNav = ({children, allowGlobalReload = false}: Props) => {
 
 export const AppTopNavLogo = () => {
   const {nav} = React.useContext(LayoutContext);
+  const {flagSettingsPage} = useFeatureFlags();
   const navButton = React.useRef<null | HTMLButtonElement>(null);
 
   const onToggle = React.useCallback(() => {
@@ -73,7 +75,7 @@ export const AppTopNavLogo = () => {
 
   return (
     <LogoContainer>
-      {nav.canOpen ? (
+      {!flagSettingsPage && nav.canOpen ? (
         <ShortcutHandler
           onShortcut={() => onToggle()}
           shortcutLabel="."

js_modules/dagster-ui/packages/ui-core/src/app/LayoutProvider.tsx

@@ -1,10 +1,29 @@
 import * as React from 'react';
 import {useLocation} from 'react-router-dom';
 
+import {useStateWithStorage} from '../hooks/useStateWithStorage';
+
+function useMatchMedia(query: string) {
+  const match = React.useRef(matchMedia(query));
+  const [result, setResult] = React.useState(match.current.matches);
+
+  React.useEffect(() => {
+    const matcher = match.current;
+    const onChange = () => setResult(matcher.matches);
+    matcher.addEventListener('change', onChange);
+    return () => {
+      matcher.removeEventListener('change', onChange);
+    };
+  }, [query]);
+
+  return result;
+}
+
 type LayoutContextValue = {
   nav: {
     canOpen: boolean;
     isOpen: boolean;
+    isSmallScreen: boolean;
     open: () => void;
     close: () => void;
     setCanOpen: (canOpen: boolean) => void;
@@ -15,41 +34,64 @@ export const LayoutContext = React.createContext<LayoutContextValue>({
   nav: {
     canOpen: true,
     isOpen: false,
+    isSmallScreen: false,
     open: () => {},
     close: () => {},
     setCanOpen: (_canOpen: boolean) => {},
   },
 });
 
+const STORAGE_KEY = 'large-screen-nav-open';
+
 export const LayoutProvider = (props: {children: React.ReactNode}) => {
-  const [navOpen, setNavOpen] = React.useState(false);
+  const [navOpenIfLargeScreen, setNavOpenIfLargeScreen] = useStateWithStorage(
+    STORAGE_KEY,
+    (json: any) => {
+      if (typeof json !== 'boolean') {
+        return false;
+      }
+      return json;
+    },
+  );
+
+  const [navOpenIfSmallScreen, setNavOpenIfSmallScreen] = React.useState(false);
   const location = useLocation();
+  const isSmallScreen = useMatchMedia('(max-width: 1440px)');
 
   const open = React.useCallback(() => {
-    setNavOpen(true);
-  }, []);
+    setNavOpenIfSmallScreen(true);
+    if (!isSmallScreen) {
+      setNavOpenIfLargeScreen(true);
+    }
+  }, [isSmallScreen, setNavOpenIfLargeScreen]);
 
   const close = React.useCallback(() => {
-    setNavOpen(false);
-  }, []);
+    setNavOpenIfSmallScreen(false);
+    if (!isSmallScreen) {
+      setNavOpenIfLargeScreen(false);
+    }
+  }, [isSmallScreen, setNavOpenIfLargeScreen]);
 
   React.useEffect(() => {
-    setNavOpen(false);
+    setNavOpenIfSmallScreen(false);
   }, [location]);
 
+  const isOpen = isSmallScreen ? navOpenIfSmallScreen : navOpenIfLargeScreen;
+
   const [canOpen, setCanOpen] = React.useState(true);
 
   const value = React.useMemo(
     () => ({
       nav: {
-        isOpen: canOpen && navOpen,
+        isOpen: canOpen && isOpen,
+        isSmallScreen,
         open,
         close,
         canOpen,
         setCanOpen,
       },
     }),
-    [canOpen, navOpen, open, close],
+    [isOpen, isSmallScreen, open, close, canOpen, setCanOpen],
   );
 
   return <LayoutContext.Provider value={value}>{props.children}</LayoutContext.Provider>;

js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsButton.tsx

@@ -2,13 +2,20 @@ import {Icon} from '@dagster-io/ui-components';
 import {useState} from 'react';
 import {useVisibleFeatureFlagRows} from 'shared/app/useVisibleFeatureFlagRows.oss';
 
+import {useFeatureFlags} from './Flags';
 import {TopNavButton} from './TopNavButton';
 import {UserSettingsDialog} from './UserSettingsDialog/UserSettingsDialog';
 
 export const UserSettingsButton = () => {
+  const {flagSettingsPage} = useFeatureFlags();
   const [isOpen, setIsOpen] = useState(false);
+
   const visibleFlags = useVisibleFeatureFlagRows();
 
+  if (flagSettingsPage) {
+    return null;
+  }
+
   return (
     <>
       <TopNavButton onClick={() => setIsOpen(true)} title="User settings">

js_modules/dagster-ui/packages/ui-core/src/nav/LeftNav.tsx

@@ -14,27 +14,33 @@ export const LeftNav = () => {
   }
 
   return (
-    <LeftNavContainer $open={nav.isOpen}>
+    <LeftNavContainer $open={nav.isOpen} $smallScreen={nav.isSmallScreen}>
       {wasEverOpen.current ? <LeftNavRepositorySection /> : null}
     </LeftNavContainer>
   );
 };
 
 export const LEFT_NAV_WIDTH = 332;
 
-const LeftNavContainer = styled.div<{$open: boolean}>`
+const LeftNavContainer = styled.div<{$open: boolean; $smallScreen: boolean}>`
   position: fixed;
   z-index: 2;
   top: 64px;
   bottom: 0;
   left: 0;
   width: ${LEFT_NAV_WIDTH}px;
-  display: flex;
+  display: ${({$open, $smallScreen}) => ($open || $smallScreen ? 'flex' : 'none')};
   flex-shrink: 0;
   flex-direction: column;
   justify-content: start;
   background: ${Colors.backgroundDefault()};
   box-shadow: 1px 0px 0px ${Colors.keylineDefault()};
-  transform: translateX(${({$open}) => ($open ? '0' : `-${LEFT_NAV_WIDTH}px`)});
-  transition: transform 150ms ease-in-out;
+
+  ${(p) =>
+    p.$smallScreen
+      ? `
+        transform: translateX(${p.$open ? '0' : `-${LEFT_NAV_WIDTH}px`});
+        transition: transform 150ms ease-in-out;
+      `
+      : ``}
 `;