chore: always show epoch bar on leader schedule page

Author: asuzuki-jumptrading

src/atoms.ts

@@ -39,7 +39,7 @@ export const clientAtom = atom(() => {
 export const containerElAtom = atom<HTMLDivElement | null>();
 export const slotsListElAtom = atom<HTMLDivElement | null>();
 
-export const isNavCollapsedAtom = atom(false);
+export const _isNavCollapsedAtom = atom(false);
 
 const _epochsAtom = atomWithImmer<Epoch[]>([]);
 export const epochAtom = atom(

src/features/Header/index.tsx

@@ -14,33 +14,29 @@ import {
 import Logo from "./Logo";
 import { CluserIndicator, Cluster } from "./Cluster";
 import NavCollapseToggle from "../Navigation/NavCollapseToggle";
-import { isNavCollapsedAtom } from "../../atoms";
-import { useAtomValue } from "jotai";
 import NavBlur from "../Navigation/NavBlur";
 import { slotNavBackgroundColor } from "../../colors";
-import { useCurrentRoute } from "../../hooks/useCurrentRoute";
 import { useMemo } from "react";
+import { useSlotsNavigation } from "../../hooks/useSlotsNavigation";
 
 export default function Header() {
   const showDropdownNav = useMedia("(max-width: 900px)");
   const isXNarrow = useMedia("(max-width: 401px)");
-  const isNarrow = useMedia("(max-width: 768px)");
-  const isNavCollapsed = useAtomValue(isNavCollapsedAtom);
 
-  const currentRoute = useCurrentRoute();
-  const isSchedule = currentRoute === "Schedule";
+  const { isNarrowScreen, blurBackground, showNav, showOnlyEpochBar } =
+    useSlotsNavigation();
 
   const leftBackground = useMemo(() => {
-    if (isNavCollapsed) return undefined;
-    if (isSchedule) {
+    if (!showNav) return undefined;
+    if (showOnlyEpochBar) {
       // only color the epoch bar portion
       const width = `${slotNavWithoutListWidth + epochThumbPadding}px`;
       return `linear-gradient(to right, ${slotNavBackgroundColor} 0px ${width}, transparent ${width} 100%)`;
     }
     return slotNavBackgroundColor;
-  }, [isNavCollapsed, isSchedule]);
+  }, [showOnlyEpochBar, showNav]);
 
-  const useExtraNarrowGap = isNavCollapsed && isXNarrow;
+  const useExtraNarrowGap = !showNav && isXNarrow;
   const extraNarrowGap = "3px";
 
   return (
@@ -69,11 +65,7 @@ export default function Header() {
             ml={`${-epochThumbPadding}px`}
             pl={`${epochThumbPadding}px`}
           >
-            {isNarrow && isNavCollapsed && (
-              <div style={{ width: isNavCollapsed ? undefined : "0" }}>
-                <NavCollapseToggle isLarge />
-              </div>
-            )}
+            {isNarrowScreen && !showNav && <NavCollapseToggle isLarge />}
             <Logo />
             <Cluster />
           </Flex>
@@ -97,11 +89,11 @@ export default function Header() {
 
             <IdentityKey />
 
-            {isNarrow && !isNavCollapsed && <NavBlur />}
+            {blurBackground && <NavBlur />}
           </Flex>
         </Flex>
 
-        {!isNarrow && (
+        {!isNarrowScreen && (
           <div
             style={{
               position: "relative",
@@ -114,7 +106,7 @@ export default function Header() {
                 left: 0,
               }}
             >
-              <NavCollapseToggle isFloating={isNavCollapsed} />
+              <NavCollapseToggle isFloating={!showNav} />
             </div>
           </div>
         )}

src/features/Navigation/EpochSlider.tsx

@@ -7,7 +7,6 @@ import {
   currentLeaderSlotAtom,
   epochAtom,
   firstProcessedSlotAtom,
-  isNavCollapsedAtom,
   leaderSlotsAtom,
   mostRecentSlotLeaderAtom,
   SlotNavFilter,
@@ -32,6 +31,7 @@ import {
 } from "@floating-ui/react";
 import { isScrollingAtom } from "./atoms";
 import { useEventListener } from "../../hooks/useEventListener";
+import { useSlotsNavigation } from "../../hooks/useSlotsNavigation";
 
 // 1 tick about 10 leaders or 40 slots
 const sliderMaxValue = 10_800;
@@ -301,7 +301,7 @@ function SliderEpochProgress({
 const MSliderEpochProgress = memo(SliderEpochProgress);
 
 function SliderThumbTooltip({ isOpen }: { isOpen: boolean }) {
-  const isNavCollapsed = useAtomValue(isNavCollapsedAtom);
+  const { showNav } = useSlotsNavigation();
   const { refs, elements, floatingStyles, update } = useFloating({
     placement: "right",
     middleware: [offset(5)],
@@ -324,7 +324,7 @@ function SliderThumbTooltip({ isOpen }: { isOpen: boolean }) {
       <Slider.Thumb
         ref={refs.setReference}
         className={clsx(styles.sliderThumb, {
-          [styles.collapsed]: isNavCollapsed,
+          [styles.collapsed]: !showNav,
         })}
       />
       <FloatingPortal id="app">

src/features/Navigation/NavBlur.tsx

@@ -1,9 +1,8 @@
-import { useSetAtom } from "jotai";
-import { isNavCollapsedAtom } from "../../atoms";
 import { maxZIndex } from "../../consts";
+import { useSlotsNavigation } from "../../hooks/useSlotsNavigation";
 
 export default function NavBlur() {
-  const setIsNavCollapsed = useSetAtom(isNavCollapsedAtom);
+  const { setIsNavCollapsed } = useSlotsNavigation();
 
   return (
     <div

src/features/Navigation/NavCollapseToggle.tsx

@@ -1,10 +1,9 @@
 import { IconButton } from "@radix-ui/themes";
 import clsx from "clsx";
-import { useAtom } from "jotai";
-import { isNavCollapsedAtom } from "../../atoms";
 import styles from "./navigation.module.css";
 import ReadMore from "@material-design-icons/svg/filled/read_more.svg?react";
 import { largeNavToggleHeight, navToggleHeight } from "../../consts";
+import { useSlotsNavigation } from "../../hooks/useSlotsNavigation";
 
 interface NavCollapseToggleProps {
   isFloating?: boolean;
@@ -15,28 +14,39 @@ export default function NavCollapseToggle({
   isFloating,
   isLarge,
 }: NavCollapseToggleProps) {
-  const [isNavCollapsed, setIsNavCollapsed] = useAtom(isNavCollapsedAtom);
+  const { showNav, setIsNavCollapsed, showOnlyEpochBar } = useSlotsNavigation();
 
   const buttonSize = `${isLarge ? largeNavToggleHeight : navToggleHeight}px`;
-  const iconSize = isLarge ? "18px" : "15px";
+
+  if (showOnlyEpochBar) {
+    // Don't allow collapsing when only the epoch bar is shown
+    return (
+      <div
+        style={{
+          height: buttonSize,
+          width: buttonSize,
+        }}
+      />
+    );
+  }
 
   return (
     <IconButton
       size="1"
       onClick={() => setIsNavCollapsed((prev) => !prev)}
-      className={clsx(styles.toggleButton, { [styles.floating]: isFloating })}
+      className={clsx(styles.toggleButton, {
+        [styles.floating]: isFloating,
+      })}
       style={{
         height: buttonSize,
         width: buttonSize,
       }}
     >
       <ReadMore
         className={clsx({
-          [styles.mirror]: !isNavCollapsed,
+          [styles.lg]: isLarge,
+          [styles.mirror]: showNav,
         })}
-        style={{
-          height: iconSize,
-        }}
       />
     </IconButton>
   );

src/features/Navigation/index.tsx

@@ -19,15 +19,13 @@ import {
 } from "../../consts";
 import { StatusIndicator } from "./Status";
 import AutoSizer from "react-virtualized-auto-sizer";
-import { useCurrentRoute } from "../../hooks/useCurrentRoute";
 import NavFilterToggles from "./NavFilterToggles";
 import EpochSlider from "./EpochSlider";
-import { isNavCollapsedAtom } from "../../atoms";
-import { useAtomValue } from "jotai";
 import clsx from "clsx";
 import styles from "./navigation.module.css";
 import NavCollapseToggle from "./NavCollapseToggle";
 import { useMedia } from "react-use";
+import { useSlotsNavigation } from "../../hooks/useSlotsNavigation";
 
 const top = clusterIndicatorHeight + headerHeight;
 
@@ -36,29 +34,29 @@ const top = clusterIndicatorHeight + headerHeight;
  * On collapse, content width shrinks to 0
  */
 export default function Navigation() {
-  const isNavCollapsed = useAtomValue(isNavCollapsedAtom);
   const isNarrow = useMedia(narrowNavMedia);
 
+  const { showNav, occupyRowWidth, showOnlyEpochBar } = useSlotsNavigation();
+
   // padding to make sure epoch thumb is visible,
   // as it is positioned slightly outside of the container
-  const thumbPadding = isNavCollapsed ? 0 : epochThumbPadding;
+  const thumbPadding = showNav ? epochThumbPadding : 0;
 
-  const currentRoute = useCurrentRoute();
   const width = useMemo(() => {
-    return currentRoute === "Schedule" ? slotNavWithoutListWidth : slotNavWidth;
-  }, [currentRoute]);
+    return showOnlyEpochBar ? slotNavWithoutListWidth : slotNavWidth;
+  }, [showOnlyEpochBar]);
 
   return (
     <div
       style={{
         // resizes outlet content immediately
         flexShrink: 0,
-        width: isNarrow || isNavCollapsed ? "0" : `${width}px`,
+        width: occupyRowWidth ? `${width}px` : "0",
       }}
     >
       <Flex
         // width transitions
-        width={isNavCollapsed ? "0" : `${width + thumbPadding}px`}
+        width={showNav ? `${width + thumbPadding}px` : "0"}
         overflow="hidden"
         className={clsx("sticky", styles.slotNavContainer)}
         style={{
@@ -87,7 +85,7 @@ export default function Navigation() {
           <EpochSlider />
         </Flex>
 
-        {currentRoute !== "Schedule" && (
+        {!showOnlyEpochBar && (
           <Flex
             ml={`${logoRightSpacing}px`}
             direction="column"

src/features/Navigation/navigation.module.css

@@ -40,6 +40,16 @@
   }
 }
 
+.toggle-button-size {
+  height: 15px;
+  width: 15px;
+
+  &.lg {
+    height: 18px;
+    width: 18px;
+  }
+}
+
 .toggle-button {
   border-radius: 5px;
   background-color: var(--epoch-slider-progress-color);
@@ -54,6 +64,13 @@
 
   svg {
     fill: var(--nav-button-text-color);
+    height: 15px;
+    width: 15px;
+
+    &.lg {
+      height: 18px;
+      width: 18px;
+    }
 
     &.mirror {
       transform: scaleX(-1);

src/hooks/useSlotsNavigation.ts

@@ -0,0 +1,23 @@
+import { narrowNavMedia } from "../consts";
+import { useCurrentRoute } from "./useCurrentRoute";
+import { useAtom } from "jotai";
+import { _isNavCollapsedAtom } from "../atoms";
+import { useMedia } from "react-use";
+
+export function useSlotsNavigation() {
+  const isNarrowScreen = useMedia(narrowNavMedia);
+  const [isNavCollapsed, setIsNavCollapsed] = useAtom(_isNavCollapsedAtom);
+  const isLeaderSchedule = useCurrentRoute() === "Schedule";
+
+  const showNav = isLeaderSchedule || !isNavCollapsed;
+  const showOnlyEpochBar = isLeaderSchedule;
+
+  return {
+    isNarrowScreen,
+    showNav,
+    setIsNavCollapsed,
+    showOnlyEpochBar,
+    blurBackground: isNarrowScreen && !isNavCollapsed && !showOnlyEpochBar,
+    occupyRowWidth: showOnlyEpochBar || (!isNarrowScreen && !isNavCollapsed),
+  };
+}

src/routes/__root.tsx

@@ -5,12 +5,10 @@ import StartupProgress from "../features/StartupProgress";
 import Toast from "../features/Toast";
 import Navigation from "../features/Navigation";
 import Header from "../features/Header";
-import { useMedia } from "react-use";
-import { isNavCollapsedAtom } from "../atoms";
-import { useAtom } from "jotai";
-import { headerSpacing, narrowNavMedia, slotsNavSpacing } from "../consts";
+import { headerSpacing, slotsNavSpacing } from "../consts";
 import NavBlur from "../features/Navigation/NavBlur";
 import { useCurrentRoute } from "../hooks/useCurrentRoute";
+import { useSlotsNavigation } from "../hooks/useSlotsNavigation";
 
 // import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 
@@ -59,14 +57,14 @@ function Root() {
 }
 
 function OutletContainer() {
-  const isNarrow = useMedia(narrowNavMedia);
-  const [isNavCollapsed, setIsNavCollapsed] = useAtom(isNavCollapsedAtom);
   const isSchedule = useCurrentRoute() === "Schedule";
+  const { setIsNavCollapsed, isNarrowScreen, occupyRowWidth, blurBackground } =
+    useSlotsNavigation();
 
   useEffect(() => {
     // automatically open / close on narrow switch
-    setIsNavCollapsed(isNarrow);
-  }, [isNarrow, setIsNavCollapsed]);
+    setIsNavCollapsed(isNarrowScreen);
+  }, [isNarrowScreen, setIsNavCollapsed]);
 
   return (
     <Box
@@ -75,13 +73,13 @@ function OutletContainer() {
       minWidth="0"
       pb="2"
       pl={
-        isNarrow || isNavCollapsed || isSchedule
+        isSchedule || !occupyRowWidth
           ? "0px"
           : `${headerSpacing - slotsNavSpacing}px`
       }
     >
       <Outlet />
-      {isNarrow && !isNavCollapsed && <NavBlur />}
+      {blurBackground && <NavBlur />}
     </Box>
   );
 }