assets/stylesheets/App.css

@@ -112,79 +112,6 @@
   --webkit-user-select: none;
 }
 
-.dashboard-navigation-center {
-  position: relative;
-  flex: 1;
-  min-width: 0;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-}
-
-.dashboard-navigation-fade {
-  opacity: 1;
-  visibility: visible;
-  transition:
-    opacity 0.2s ease 0.2s,
-    visibility 0s linear 0.2s;
-}
-
-.dashboard-navigation-fade-hidden {
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition:
-    opacity 0.2s ease 0s,
-    visibility 0s linear 0.2s;
-}
-
-.dashboard-navigation-window-title {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: 16px;
-  padding-right: 16px;
-  font-size: 14px;
-  pointer-events: none;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.dashboard-navigation-center-border {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 1px;
-  background: var(--color-header-border);
-  pointer-events: none;
-  opacity: 1;
-  /* Wait for outgoing chrome to finish fading before this line appears. */
-  transition: opacity 0.2s ease 0.2s;
-}
-
-.dashboard-navigation-center-border-hidden {
-  opacity: 0;
-  /* Stay through the gap, then fade out as incoming chrome fades in. */
-  transition: opacity 0.2s ease 0.2s;
-}
-
-.dashboard-menu-container {
-  position: relative;
-  height: 42px;
-  padding-top: 2px;
-}
-.dashboard-menu-container:after {
-  border-bottom: 1px solid var(--color-header-border);
-  content: '';
-  position: absolute;
-  left: 0;
-  right: -2px;
-  bottom: 0;
-}
-
 .electron-navigation-leading,
 .electron-navigation-trailing {
   align-self: stretch;
@@ -263,17 +190,6 @@ html.macos-vibrancy .light-mode .ant-layout-sider {
   background: rgba(244, 244, 244, 0.82) !important;
 }
 
-html.macos-vibrancy .light-mode .ant-layout.main-content-layout:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.85) !important;
-  z-index: -1;
-}
-
 html.macos-vibrancy .dark-mode .ant-layout-sider {
   background: rgba(10, 10, 10, 0.82) !important;
 }
@@ -3497,7 +3413,7 @@ body.objectKanbanColumnResizing * {
   display: flex;
   align-items: flex-start;
   gap: 4px;
-  padding-left: 14px;
+  padding-left: 12px;
   height: 100%;
   max-height: 42px;
 }
@@ -3523,7 +3439,7 @@ body.objectKanbanColumnResizing * {
 }
 
 .dashboard-tab-item-container:first-child:before {
-  left: -14px;
+  left: -12px;
 }
 
 .dashboard-tab-item-container:last-child:before {
@@ -3602,19 +3518,7 @@ body.objectKanbanColumnResizing * {
   margin-bottom: -1px;
   padding-bottom: 5px;
   border-color: transparent;
-  position: relative;
   border-radius: 12px 12px 0 0;
-}
-
-.dashboard-tab-item-active:after {
-  content: '';
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: -1px;
-  border-radius: 9px 9px 0 0;
-  z-index: -2;
   background: var(--color-layout-background);
 }
 
@@ -3638,7 +3542,7 @@ body.objectKanbanColumnResizing * {
 
 .dashboard-tab-item-corner {
   --tab-corner-size: 22px;
-  --tab-corner-radius: 16px;
+  --tab-corner-radius: 15.5px;
   --tab-corner-inset: 1px;
   --tab-corner-center: calc(
     var(--tab-corner-size) - var(--tab-corner-inset) - var(--tab-corner-radius)
@@ -3662,7 +3566,10 @@ body.objectKanbanColumnResizing * {
 
 .dashboard-tab-item-corner-fill {
   position: absolute;
-  inset: 0;
+  top: 1px;
+  left: 2px;
+  right: 2px;
+  bottom: -1px;
   background: var(--color-layout-background);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
@@ -3670,27 +3577,33 @@ body.objectKanbanColumnResizing * {
 
 .dashboard-tab-item-corner-left .dashboard-tab-item-corner-fill {
   -webkit-mask-image: radial-gradient(
-    circle at var(--tab-corner-center) var(--tab-corner-center),
+    circle var(--tab-corner-radius) at var(--tab-corner-center)
-    transparent calc(var(--tab-corner-radius) - 0.5px),
+      var(--tab-corner-center),
-    #000 calc(var(--tab-corner-radius) - 0.5px)
+    transparent var(--tab-corner-radius),
+    #000 var(--tab-corner-radius)
   );
   mask-image: radial-gradient(
-    circle at var(--tab-corner-center) var(--tab-corner-center),
+    circle var(--tab-corner-radius) at var(--tab-corner-center)
-    transparent calc(var(--tab-corner-radius) - 0.5px),
+      var(--tab-corner-center),
-    #000 calc(var(--tab-corner-radius) - 0.5px)
+    transparent var(--tab-corner-radius),
+    #000 var(--tab-corner-radius)
   );
 }
 
 .dashboard-tab-item-corner-right .dashboard-tab-item-corner-fill {
   -webkit-mask-image: radial-gradient(
-    circle at calc(100% - var(--tab-corner-center)) var(--tab-corner-center),
+    circle var(--tab-corner-radius) at
-    transparent calc(var(--tab-corner-radius) - 0.5px),
+      calc(var(--tab-corner-radius) + var(--tab-corner-inset))
-    #000 calc(var(--tab-corner-radius) - 0.5px)
+      var(--tab-corner-center),
+    transparent var(--tab-corner-radius),
+    #000 var(--tab-corner-radius)
   );
   mask-image: radial-gradient(
-    circle at calc(100% - var(--tab-corner-center)) var(--tab-corner-center),
+    circle var(--tab-corner-radius) at
-    transparent calc(var(--tab-corner-radius) - 0.5px),
+      calc(var(--tab-corner-radius) + var(--tab-corner-inset))
-    #000 calc(var(--tab-corner-radius) - 0.5px)
+      var(--tab-corner-center),
+    transparent var(--tab-corner-radius),
+    #000 var(--tab-corner-radius)
   );
 }
 
@@ -3739,7 +3652,7 @@ body.objectKanbanColumnResizing * {
   justify-content: center;
   width: 16px;
   height: 16px;
-  margin-left: 1px;
+  margin-left: 2px;
   border-radius: 8px;
   color: var(--color-text-secondary, inherit);
   opacity: 0.7;
@@ -3753,6 +3666,11 @@ body.objectKanbanColumnResizing * {
   inset: -8px -8px -8px -6px;
 }
 
+.dashboard-tabs-close:hover {
+  opacity: 1;
+  background: var(--color-button-background);
+}
+
 .dashboard-tabs-add-button {
   padding-inline: 4px;
   min-width: 20px;

src/components/Dashboard/common/DashboardDevControls.jsx

@@ -1,70 +0,0 @@
-import { useContext, useEffect, useState } from 'react'
-import { Space, Tag } from 'antd'
-import { LoadingOutlined } from '@ant-design/icons'
-import { useNavigate } from 'react-router-dom'
-import { ApiServerContext } from '../context/ApiServerContext'
-import Tooltip from './Tooltip'
-import CloudIcon from '../../Icons/CloudIcon'
-import DeveloperIcon from '../../Icons/DeveloperIcon'
-
-const DashboardDevControls = () => {
-  const { connecting, connected } = useContext(ApiServerContext)
-  const navigate = useNavigate()
-  const [apiServerState, setApiServerState] = useState('disconnected')
-
-  useEffect(() => {
-    if (connecting == true) {
-      setApiServerState('connecting')
-    } else if (connected == true) {
-      setApiServerState('connected')
-    } else {
-      setApiServerState('disconnected')
-    }
-  }, [connecting, connected])
-
-  if (import.meta.env.MODE !== 'development') return null
-
-  return (
-    <Space>
-      {apiServerState === 'connected' ? (
-        <Tooltip content='Connected to api server'>
-          <Tag
-            color='success'
-            style={{ marginRight: 0 }}
-            icon={<CloudIcon />}
-          />
-        </Tooltip>
-      ) : null}
-      {apiServerState === 'connecting' ? (
-        <Tooltip content='Connecting to api server...'>
-          <Tag
-            color='warning'
-            style={{ marginRight: 0 }}
-            icon={<LoadingOutlined />}
-          />
-        </Tooltip>
-      ) : null}
-      {apiServerState === 'disconnected' ? (
-        <Tooltip content='Disconnected from api server'>
-          <Tag
-            color='error'
-            style={{ marginRight: 0 }}
-            icon={<CloudIcon />}
-          />
-        </Tooltip>
-      ) : null}
-      <Tooltip content='Developer'>
-        <Tag
-          color='yellow'
-          style={{ marginRight: 0 }}
-          icon={<DeveloperIcon />}
-          onClick={() => {
-            navigate('/dashboard/developer/sessionstorage')
-          }}
-        />
-      </Tooltip>
-    </Space>
-  )
-}
-
-export default DashboardDevControls

src/components/Dashboard/common/DashboardNavigation.jsx

@@ -1,6 +1,5 @@
 // DashboardNavigation.js
-import { useContext, useEffect, useState, useMemo, useCallback, memo } from 'react'
+import { useContext, useEffect, useState, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import {
   Menu,
   Flex,
@@ -12,6 +11,7 @@ import {
   Typography,
   Popover
 } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import { AuthContext } from '../context/AuthContext'
 import { SpotlightContext } from '../context/SpotlightContext'
 import { ApiServerContext } from '../context/ApiServerContext'
@@ -35,9 +35,9 @@ import CloudIcon from '../../Icons/CloudIcon'
 import BellIcon from '../../Icons/BellIcon'
 import SearchIcon from '../../Icons/SearchIcon'
 import SettingsIcon from '../../Icons/SettingsIcon'
+import DeveloperIcon from '../../Icons/DeveloperIcon'
 import { ElectronContext } from '../context/ElectronContext'
 import DashboardWindowButtons from './DashboardWindowButtons'
-import DashboardDevControls from './DashboardDevControls'
 import WindowAppMenu from './WindowAppMenu'
 import WebAppSwitcher from './WebAppSwitcher'
 import DashboardTabs from './DashboardTabs'
@@ -57,225 +57,6 @@ import { getEffectiveAppearance } from '../../../database/Settings'
 
 const { Text } = Typography
 
-const NAV_CENTER_FADE_STYLE = {
-  width: '100%',
-  minWidth: 0,
-  display: 'flex',
-  alignItems: 'center'
-}
-const NAV_ELECTRON_CENTER_FADE_STYLE = {
-  flex: 1,
-  minWidth: 0,
-  display: 'flex',
-  alignItems: 'center'
-}
-const NAV_ELECTRON_TABS_STYLE = { flex: 1, minWidth: 0, display: 'flex' }
-const NAV_ELECTRON_DIVIDER_STYLE_WITH_LABELS = {
-  margin: '3px 1px 0 4px',
-  height: '14px'
-}
-const NAV_ELECTRON_DIVIDER_STYLE = {
-  margin: '3px 1px 0 0',
-  height: '14px'
-}
-const NAV_TRAILING_FLEX_STYLE = { marginTop: '-2px', marginRight: '6px' }
-const NAV_TRAILING_SPACE_STYLE = { paddingTop: '2px', marginRight: '8px' }
-const NAV_SEARCH_BUTTON_STYLE = { marginTop: '4px' }
-const NAV_BELL_BUTTON_STYLE = { marginTop: '2px' }
-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 navigationFadeClass = (visible) =>
-  `dashboard-navigation-fade${visible ? '' : ' dashboard-navigation-fade-hidden'}`
-
-const NavigationFade = memo(function NavigationFade({ visible, children, style }) {
-  return (
-    <div
-      className={navigationFadeClass(visible)}
-      inert={visible ? undefined : true}
-      aria-hidden={visible ? undefined : true}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-})
-
-NavigationFade.propTypes = {
-  visible: PropTypes.bool,
-  children: PropTypes.node,
-  style: PropTypes.object
-}
-
-const DashboardNavigationTrailingItems = memo(
-  function DashboardNavigationTrailingItems({
-    controlsReady,
-    isMobile,
-    isElectron,
-    unreadCount,
-    userProfile,
-    availableUpdate,
-    userPopoverOpen,
-    onUserPopoverOpenChange,
-    onSearch,
-    onNotifications,
-    onCheckUpdates
-  }) {
-    return (
-      <Flex gap='small' align='center' style={NAV_TRAILING_FLEX_STYLE}>
-        {controlsReady ? (
-          <Space style={NAV_TRAILING_SPACE_STYLE}>
-            <WebAppSwitcher />
-            <KeyboardShortcut
-              shortcut='alt+q'
-              hint='ALT Q'
-              onTrigger={onSearch}
-            >
-              <Button
-                icon={<SearchIcon />}
-                type='text'
-                style={NAV_SEARCH_BUTTON_STYLE}
-                onClick={onSearch}
-              />
-            </KeyboardShortcut>
-            <Badge
-              count={unreadCount}
-              size='small'
-              offset={[-5, 8]}
-              style={NAV_BADGE_STYLE}
-            >
-              <KeyboardShortcut
-                shortcut='alt+n'
-                hint='ALT N'
-                onTrigger={onNotifications}
-              >
-                <Button
-                  icon={<BellIcon />}
-                  type='text'
-                  style={NAV_BELL_BUTTON_STYLE}
-                  onClick={onNotifications}
-                />
-              </KeyboardShortcut>
-            </Badge>
-          </Space>
-        ) : null}
-        <DashboardDevControls />
-        {controlsReady && userProfile ? (
-          <Space>
-            <Popover
-              content={
-                <UserProfilePopover
-                  onClose={() => onUserPopoverOpenChange(false)}
-                />
-              }
-              placement='bottomRight'
-              trigger='hover'
-              open={userPopoverOpen}
-              onOpenChange={onUserPopoverOpenChange}
-              arrow={false}
-            >
-              <Tag style={{ marginRight: 0 }} icon={<PersonIcon />}>
-                {!isMobile && (userProfile?.name || userProfile.username)}
-              </Tag>
-            </Popover>
-          </Space>
-        ) : null}
-        {controlsReady && isElectron && availableUpdate ? (
-          <Tag
-            icon={<CloudIcon />}
-            style={NAV_UPDATE_TAG_STYLE}
-            color='cyan'
-            onClick={onCheckUpdates}
-          >
-            Update Available
-          </Tag>
-        ) : null}
-      </Flex>
-    )
-  }
-)
-
-DashboardNavigationTrailingItems.propTypes = {
-  controlsReady: PropTypes.bool,
-  isMobile: PropTypes.bool,
-  isElectron: PropTypes.bool,
-  unreadCount: PropTypes.number,
-  userProfile: PropTypes.shape({
-    name: PropTypes.string,
-    username: PropTypes.string
-  }),
-  availableUpdate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  userPopoverOpen: PropTypes.bool,
-  onUserPopoverOpenChange: PropTypes.func,
-  onSearch: PropTypes.func,
-  onNotifications: PropTypes.func,
-  onCheckUpdates: PropTypes.func
-}
-
-const DashboardElectronCenterItems = memo(function DashboardElectronCenterItems({
-  menu,
-  showNavigationLabels
-}) {
-  return (
-    <>
-      <div className='dashboard-menu-container'>{menu}</div>
-      <Divider
-        type='vertical'
-        style={
-          showNavigationLabels
-            ? NAV_ELECTRON_DIVIDER_STYLE_WITH_LABELS
-            : NAV_ELECTRON_DIVIDER_STYLE
-        }
-      />
-      <div style={NAV_ELECTRON_TABS_STYLE}>
-        <DashboardTabs />
-      </div>
-    </>
-  )
-})
-
-DashboardElectronCenterItems.propTypes = {
-  menu: PropTypes.node,
-  showNavigationLabels: PropTypes.bool
-}
-
-const DashboardNavigationTrailing = memo(function DashboardNavigationTrailing({
-  showControls,
-  isOtherApp,
-  ...itemProps
-}) {
-  return (
-    <>
-      <div className='electrobun-webkit-app-region-no-drag'>
-        <NavigationFade visible={showControls}>
-          <DashboardNavigationTrailingItems {...itemProps} />
-        </NavigationFade>
-      </div>
-      {isOtherApp ? <DashboardWindowButtons /> : null}
-    </>
-  )
-})
-
-DashboardNavigationTrailing.propTypes = {
-  showControls: PropTypes.bool,
-  isOtherApp: PropTypes.bool,
-  controlsReady: PropTypes.bool,
-  isMobile: PropTypes.bool,
-  isElectron: PropTypes.bool,
-  unreadCount: PropTypes.number,
-  userProfile: PropTypes.shape({
-    name: PropTypes.string,
-    username: PropTypes.string
-  }),
-  availableUpdate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  userPopoverOpen: PropTypes.bool,
-  onUserPopoverOpenChange: PropTypes.func,
-  onSearch: PropTypes.func,
-  onNotifications: PropTypes.func,
-  onCheckUpdates: PropTypes.func
-}
-
 const mapSidebarItemsToMenu = (items, navigate) =>
   items.map((item) => {
     if (item?.type === 'divider') {
@@ -302,7 +83,8 @@ const mapSidebarItemsToMenu = (items, navigate) =>
 const DashboardNavigation = () => {
   const { userProfile } = useContext(AuthContext)
   const { showSpotlight } = useContext(SpotlightContext)
-  const { userSettings, userSettingsLoaded } = useContext(ApiServerContext)
+  const { connecting, connected, userSettings, userSettingsLoaded } =
+    useContext(ApiServerContext)
   const { authenticated } = useContext(AuthContext)
   const {
     showNavigationLabels,
@@ -312,6 +94,7 @@ const DashboardNavigation = () => {
   } = useThemeContext()
   const { toggleNotificationCenter, unreadCount } =
     useContext(NotificationContext)
+  const [apiServerState, setApiServerState] = useState('disconnected')
   const navigate = useNavigate()
   const location = useLocation()
   const [selectedKey, setSelectedKey] = useState('production')
@@ -426,18 +209,17 @@ const DashboardNavigation = () => {
     [includeDevItems, location.pathname, selectedKey, userProfile]
   )
 
-  const headerMenuItems = useMemo(
+  const headerMenuItems = isMobile
-    () =>
+    ? sidebarMenuItems
-      isMobile
+    : showNavigationLabels
-        ? sidebarMenuItems
+      ? mainMenuItems
-        : showNavigationLabels
+      : mainMenuItems.map((item) => ({ ...item, label: undefined }))
-          ? mainMenuItems
-          : mainMenuItems.map((item) => ({ ...item, label: undefined })),
-    [isMobile, mainMenuItems, showNavigationLabels, sidebarMenuItems]
-  )
 
   const [userPopoverOpen, setUserPopoverOpen] = useState(false)
-  const [anyModalVisible, setAnyModalVisible] = useState(false)
+
+  const userPopoverContent = (
+    <UserProfilePopover onClose={() => setUserPopoverOpen(false)} />
+  )
 
   useEffect(() => {
     const pathParts = location.pathname.split('/').filter(Boolean)
@@ -447,12 +229,19 @@ const DashboardNavigation = () => {
     setSelectedKey(nextItem?.key || sectionKey)
   }, [location.pathname, mainMenuItems])
 
-  const handleMainMenuClick = useCallback(
+  useEffect(() => {
-    ({ key }) => {
+    if (connecting == true) {
-      navigate(getSidebarDefaultPath(key, { includeDev, userProfile }))
+      setApiServerState('connecting')
-    },
+    } else if (connected == true) {
-    [includeDev, navigate, userProfile]
+      setApiServerState('connected')
-  )
+    } else {
+      setApiServerState('disconnected')
+    }
+  }, [connecting, connected])
+
+  const handleMainMenuClick = ({ key }) => {
+    navigate(getSidebarDefaultPath(key, { includeDev, userProfile }))
+  }
 
   useEffect(() => {
     if (!isElectron || !setSidebarViewMenu) return
@@ -466,110 +255,146 @@ const DashboardNavigation = () => {
   const showDesktopLogo = !isElectron && !isMobile
   const showMobileLogo = !isElectron && isMobile
 
-  useEffect(() => {
+  const showControls = !isElectron || authenticated
-    const isModalWrapVisible = (node) => {
-      if (!(node instanceof Element)) return false
-      if (node.getAttribute('aria-hidden') === 'true') return false
-      const style = window.getComputedStyle(node)
-      return (
-        style.display !== 'none' &&
-        style.visibility !== 'hidden' &&
-        style.pointerEvents !== 'none'
-      )
-    }
 
-    const updateModalVisibility = () => {
+  const menu = (
-      const wraps = document.querySelectorAll('.ant-modal-wrap')
+    <Menu
-      setAnyModalVisible(Array.from(wraps).some(isModalWrapVisible))
+      mode='horizontal'
-    }
+      className={`${isElectron ? 'electron-navigation' : null} ${!showNavigationLabels && !isMobile ? 'no-navigation-labels' : ''}${isMobile ? 'mobile-menu' : ''}`}
-
+      items={headerMenuItems}
-    let frameId = 0
+      style={{
-    const scheduleUpdate = () => {
+        flexWrap: 'wrap',
-      if (frameId) return
+        flexGrow: isElectron && !isMobile ? 0 : 1,
-      frameId = window.requestAnimationFrame(() => {
+        border: 0,
-        frameId = 0
+        minWidth: 0
-        updateModalVisibility()
+      }}
-      })
+      onClick={isMobile ? undefined : handleMainMenuClick}
-    }
+      selectedKeys={[isMobile ? selectedSidebarItemKey : selectedKey]}
-
+      overflowedIndicator={
-    updateModalVisibility()
+        <Button
-    const observer = new MutationObserver(scheduleUpdate)
+          type='text'
-    observer.observe(document.body, {
+          icon={<MenuIcon />}
-      childList: true,
+          style={{ marginBottom: '4px' }}
-      subtree: true,
+        />
-      attributes: true,
+      }
-      attributeFilter: ['style', 'class', 'aria-hidden']
+    />
-    })
-
-    return () => {
-      observer.disconnect()
-      if (frameId) window.cancelAnimationFrame(frameId)
-    }
-  }, [])
-
-  const controlsReady = !isElectron || authenticated
-  const showControls = controlsReady && !anyModalVisible
-  const handleSearch = useCallback(() => {
-    showSpotlight()
-  }, [showSpotlight])
-  const handleNotifications = useCallback(() => {
-    toggleNotificationCenter()
-  }, [toggleNotificationCenter])
-  const handleCheckUpdates = useCallback(() => {
-    checkForUpdates()
-  }, [checkForUpdates])
-  const overflowedIndicator = useMemo(
-    () => (
-      <Button type='text' icon={<MenuIcon />} style={NAV_OVERFLOW_BUTTON_STYLE} />
-    ),
-    []
-  )
-
-  const menu = useMemo(
-    () => (
-      <Menu
-        mode='horizontal'
-        className={`${isElectron ? 'electron-navigation' : null} ${!showNavigationLabels && !isMobile ? 'no-navigation-labels' : ''}${isMobile ? 'mobile-menu' : ''}`}
-        items={headerMenuItems}
-        style={{
-          flexWrap: 'wrap',
-          flexGrow: isElectron && !isMobile ? 0 : 1,
-          border: 0,
-          minWidth: 0
-        }}
-        onClick={isMobile ? undefined : handleMainMenuClick}
-        selectedKeys={[isMobile ? selectedSidebarItemKey : selectedKey]}
-        overflowedIndicator={overflowedIndicator}
-      />
-    ),
-    [
-      handleMainMenuClick,
-      headerMenuItems,
-      isElectron,
-      isMobile,
-      overflowedIndicator,
-      selectedKey,
-      selectedSidebarItemKey,
-      showNavigationLabels
-    ]
   )
 
   const navigationTrailing = (
-    <DashboardNavigationTrailing
+    <>
-      showControls={showControls}
+      <div className='electrobun-webkit-app-region-no-drag'>
-      isOtherApp={isOtherApp}
+        <Flex
-      controlsReady={controlsReady}
+          gap={'small'}
-      isMobile={isMobile}
+          align='center'
-      isElectron={isElectron}
+          style={{ marginTop: '-2px', marginRight: '6px' }}
-      unreadCount={unreadCount}
+        >
-      userProfile={userProfile}
+          {showControls && (
-      availableUpdate={availableUpdate}
+            <Space style={{ paddingTop: '2px', marginRight: '8px' }}>
-      userPopoverOpen={userPopoverOpen}
+              <WebAppSwitcher />
-      onUserPopoverOpenChange={setUserPopoverOpen}
+              <KeyboardShortcut
-      onSearch={handleSearch}
+                shortcut='alt+q'
-      onNotifications={handleNotifications}
+                hint='ALT Q'
-      onCheckUpdates={handleCheckUpdates}
+                onTrigger={() => showSpotlight()}
-    />
+              >
+                <Button
+                  icon={<SearchIcon />}
+                  type='text'
+                  style={{ marginTop: '4px' }}
+                  onClick={() => showSpotlight()}
+                />
+              </KeyboardShortcut>
+              <Badge
+                count={unreadCount}
+                size='small'
+                offset={[-5, 8]}
+                style={{ padding: 0, fontWeight: 600 }}
+              >
+                <KeyboardShortcut
+                  shortcut='alt+n'
+                  hint='ALT N'
+                  onTrigger={() => toggleNotificationCenter()}
+                >
+                  <Button
+                    icon={<BellIcon />}
+                    type='text'
+                    style={{ marginTop: '2px' }}
+                    onClick={() => toggleNotificationCenter()}
+                  />
+                </KeyboardShortcut>
+              </Badge>
+            </Space>
+          )}
+          {import.meta.env.MODE === 'development' && (
+            <Space>
+              {apiServerState === 'connected' ? (
+                <Tooltip content='Connected to api server'>
+                  <Tag
+                    color='success'
+                    style={{ marginRight: 0 }}
+                    icon={<CloudIcon />}
+                  />
+                </Tooltip>
+              ) : null}
+              {apiServerState === 'connecting' ? (
+                <Tooltip content='Connecting to api erver...'>
+                  <Tag
+                    color='warning'
+                    style={{ marginRight: 0 }}
+                    icon={<LoadingOutlined />}
+                  />
+                </Tooltip>
+              ) : null}
+              {apiServerState === 'disconnected' ? (
+                <Tooltip content='Disconnected from api server'>
+                  <Tag
+                    color='error'
+                    style={{ marginRight: 0 }}
+                    icon={<CloudIcon />}
+                  />
+                </Tooltip>
+              ) : null}
+              <Tooltip content='Developer'>
+                <Tag
+                  color='yellow'
+                  style={{ marginRight: 0 }}
+                  icon={<DeveloperIcon />}
+                  onClick={() => {
+                    navigate('/dashboard/developer/sessionstorage')
+                  }}
+                />
+              </Tooltip>
+            </Space>
+          )}
+          {showControls && userProfile ? (
+            <Space>
+              <Popover
+                content={userPopoverContent}
+                placement='bottomRight'
+                trigger='hover'
+                open={userPopoverOpen}
+                onOpenChange={setUserPopoverOpen}
+                arrow={false}
+              >
+                <Tag style={{ marginRight: 0 }} icon={<PersonIcon />}>
+                  {!isMobile && (userProfile?.name || userProfile.username)}
+                </Tag>
+              </Popover>
+            </Space>
+          ) : null}
+          {showControls && isElectron && availableUpdate ? (
+            <Tag
+              icon={<CloudIcon />}
+              style={{ cursor: 'pointer', margin: '2px 0 0 0' }}
+              color='cyan'
+              onClick={() => checkForUpdates()}
+            >
+              Update Available
+            </Tag>
+          ) : null}
+        </Flex>
+      </div>
+      {isOtherApp ? <DashboardWindowButtons /> : null}
+    </>
   )
 
   const navigationLeading = (
@@ -589,9 +414,7 @@ const DashboardNavigation = () => {
           />
         </>
       ) : null}
-      {isMobile ? (
+      {showControls && isMobile && menu}
-        <NavigationFade visible={showControls}>{menu}</NavigationFade>
-      ) : null}
       {showDesktopLogo == true ? (
         <FarmControlLogo
           style={{
@@ -611,38 +434,28 @@ const DashboardNavigation = () => {
     </>
   )
 
-  const windowTitle = (
-    <div
-      className={`dashboard-navigation-window-title ${navigationFadeClass(
-        !showControls
-      )}`}
-      aria-hidden={showControls}
-      inert={showControls ? true : undefined}
-    >
-      <Text type='secondary'>Farm Control</Text>
-    </div>
-  )
-
-  const navigationCenterBorder = (
-    <div
-      className={`dashboard-navigation-center-border${
-        showControls ? ' dashboard-navigation-center-border-hidden' : ''
-      }`}
-      aria-hidden='true'
-    />
-  )
-
   const navigationContents = (
     <Flex style={{ width: '100%' }} align='center'>
       {navigationLeading}
-      <div className='dashboard-navigation-center'>
+      <div style={{ flexGrow: 1, minWidth: 0 }}>
-        {!isMobile ? (
+        {showControls && !isMobile ? (
-          <NavigationFade visible={showControls} style={NAV_CENTER_FADE_STYLE}>
+          <Flex align='center' style={{ width: '100%', minWidth: 0 }}>
             {menu}
-          </NavigationFade>
+          </Flex>
         ) : null}
-        {windowTitle}
+        {!showControls && (
-        {navigationCenterBorder}
+          <Text
+            type='secondary'
+            style={{
+              fontSize: '14px',
+              marginLeft: '8px',
+              userSelect: 'none',
+              '--webkit-user-select': 'none'
+            }}
+          >
+            Farm Control
+          </Text>
+        )}
       </div>
       {navigationTrailing}
     </Flex>
@@ -660,24 +473,39 @@ const DashboardNavigation = () => {
           className={`electron-navigation-wrapper ${electronDragClass}`}
           style={{ lineHeight: '40px', padding: '0 2px 0 2px' }}
         >
-          <Flex align='center' className='electron-navigation-leading'>
+          <Flex
+            align='center'
+            className='electron-navigation-leading'
+            style={{ flexGrow: !showControls ? 1 : 0 }}
+          >
             {navigationLeading}
-          </Flex>
+            {showControls && !isMobile ? menu : null}
-          <div className='dashboard-navigation-center'>
+            {showControls && !isMobile ? (
-            {!isMobile ? (
+              <Divider
-              <NavigationFade
+                type='vertical'
-                visible={showControls}
+                style={{
-                style={NAV_ELECTRON_CENTER_FADE_STYLE}
+                  margin: showNavigationLabels
-              >
+                    ? '3px 1px 0 4px'
-                <DashboardElectronCenterItems
+                    : '3px 1px 0 0',
-                  menu={menu}
+                  height: '14px'
-                  showNavigationLabels={showNavigationLabels}
+                }}
-                />
+              />
-              </NavigationFade>
             ) : null}
-            {windowTitle}
+            {!showControls ? (
-            {navigationCenterBorder}
+              <Text
-          </div>
+                type='secondary'
+                style={{
+                  fontSize: '14px',
+                  marginLeft: '8px',
+                  userSelect: 'none',
+                  '--webkit-user-select': 'none'
+                }}
+              >
+                Farm Control
+              </Text>
+            ) : null}
+          </Flex>
+          {showControls && !isMobile ? <DashboardTabs /> : null}
           <Flex align='center' className='electron-navigation-trailing'>
             {navigationTrailing}
           </Flex>