Enhance Dashboard Navigation Fade Logic and Styles

- Introduced a new hook for managing delayed visibility of navigation elements, improving fade transitions.
- Updated CSS transitions for smoother visibility changes, ensuring better user experience during interactions.
- Refactored NavigationFade component to accept a className prop for enhanced styling flexibility.
- Adjusted logic for rendering window titles and dashboard items based on Electron context, improving overall navigation behavior.

assets/stylesheets/App.css

@@ -124,6 +124,7 @@
 .dashboard-navigation-fade {
   opacity: 1;
   visibility: visible;
+  /* Incoming chrome waits for the outgoing fade, then fades in. */
   transition:
     opacity 0.2s ease 0.2s,
     visibility 0s linear 0.2s;
@@ -133,9 +134,14 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
+  /*
+    Visibility must use a non-zero duration on hide. A 0s visibility
+    transition makes WebKit apply hidden immediately, so opacity never
+    animates and the chrome glitches out instead of fading.
+  */
   transition:
     opacity 0.2s ease 0s,
-    visibility 0s linear 0.2s;
+    visibility 0.2s linear 0s;
 }
 
 .dashboard-navigation-window-title {
@@ -162,7 +168,7 @@
   pointer-events: none;
   opacity: 1;
   /* Wait for outgoing chrome to finish fading before this line appears. */
-  transition: opacity 0s ease 0s;
+  transition: opacity 0.2s ease 0s;
 }
 
 .dashboard-navigation-center-border-hidden {

src/components/Dashboard/common/DashboardNavigation.jsx

@@ -86,19 +86,40 @@ const NAV_BADGE_STYLE = { padding: 0, fontWeight: 600 }
 const NAV_UPDATE_TAG_STYLE = { cursor: 'pointer', margin: '2px 0 0 0' }
 const NAV_OVERFLOW_BUTTON_STYLE = { marginBottom: '4px' }
 
+const NAV_FADE_MS = 200
+
 const navigationFadeClass = (visible) =>
   `dashboard-navigation-fade${visible ? '' : ' dashboard-navigation-fade-hidden'}`
 
+const useDelayedInactive = (visible) => {
+  const [inactive, setInactive] = useState(!visible)
+
+  useEffect(() => {
+    if (visible) {
+      setInactive(false)
+      return undefined
+    }
+
+    const timeoutId = window.setTimeout(() => setInactive(true), NAV_FADE_MS)
+    return () => window.clearTimeout(timeoutId)
+  }, [visible])
+
+  return inactive
+}
+
 const NavigationFade = memo(function NavigationFade({
   visible,
   children,
-  style
+  style,
+  className
 }) {
+  const inactive = useDelayedInactive(visible)
+
   return (
     <div
-      className={navigationFadeClass(visible)}
+      className={classNames(navigationFadeClass(visible), className)}
-      inert={visible ? undefined : true}
+      inert={inactive ? true : undefined}
-      aria-hidden={visible ? undefined : true}
+      aria-hidden={inactive ? true : undefined}
       style={style}
     >
       {children}
@@ -109,7 +130,8 @@ const NavigationFade = memo(function NavigationFade({
 NavigationFade.propTypes = {
   visible: PropTypes.bool,
   children: PropTypes.node,
-  style: PropTypes.object
+  style: PropTypes.object,
+  className: PropTypes.string
 }
 
 const DashboardNavigationTrailingItems = memo(
@@ -246,13 +268,17 @@ DashboardElectronCenterItems.propTypes = {
 const DashboardNavigationTrailing = memo(function DashboardNavigationTrailing({
   showControls,
   isOtherApp,
+  isElectron,
   ...itemProps
 }) {
   return (
     <>
       <div className='electrobun-webkit-app-region-no-drag'>
-        <NavigationFade visible={showControls}>
+        <NavigationFade visible={!isElectron || showControls}>
-          <DashboardNavigationTrailingItems {...itemProps} />
+          <DashboardNavigationTrailingItems
+            isElectron={isElectron}
+            {...itemProps}
+          />
         </NavigationFade>
       </div>
       {isOtherApp ? <DashboardWindowButtons /> : null}
@@ -470,6 +496,11 @@ const DashboardNavigation = () => {
   const showMobileLogo = !isElectron && isMobile
 
   useEffect(() => {
+    if (!isElectron) {
+      setAnyModalVisible(false)
+      return
+    }
+
     const isModalWrapVisible = (node) => {
       if (!(node instanceof Element)) return false
       if (node.getAttribute('aria-hidden') === 'true') return false
@@ -508,7 +539,7 @@ const DashboardNavigation = () => {
       observer.disconnect()
       if (frameId) window.cancelAnimationFrame(frameId)
     }
-  }, [])
+  }, [isElectron])
 
   const controlsReady = !isElectron || authenticated
   const showControls = controlsReady && !anyModalVisible
@@ -618,16 +649,15 @@ const DashboardNavigation = () => {
     </>
   )
 
+  const showWindowTitle = isElectron && !showControls
+
   const windowTitle = (
-    <div
+    <NavigationFade
-      className={`dashboard-navigation-window-title ${navigationFadeClass(
+      visible={showWindowTitle}
-        !showControls
+      className='dashboard-navigation-window-title'
-      )}`}
-      aria-hidden={showControls}
-      inert={showControls ? true : undefined}
     >
       <Text type='secondary'>Farm Control</Text>
-    </div>
+    </NavigationFade>
   )
 
   const navigationCenterBorder = (
@@ -644,12 +674,11 @@ const DashboardNavigation = () => {
       {navigationLeading}
       <div className='dashboard-navigation-center'>
         {!isMobile ? (
-          <NavigationFade visible={showControls} style={NAV_CENTER_FADE_STYLE}>
+          <NavigationFade visible style={NAV_CENTER_FADE_STYLE}>
             {menu}
           </NavigationFade>
         ) : null}
         {windowTitle}
-        {navigationCenterBorder}
       </div>
       {navigationTrailing}
     </Flex>