fix: responsive slot details nav

Author: amliu-jumptrading

src/atoms.ts

@@ -147,12 +147,24 @@ export const setSlotStatusAtom = atom(
   },
 );
 
+const selectedSlotNearbyOffset = 2;
+const selectedSlotNearbyYouLeadersAtom = atom<number[] | undefined>((get) => {
+  const leaderSlots = get(leaderSlotsAtom);
+  const selectedSlot = get(selectedSlotAtom);
+  if (leaderSlots === undefined || selectedSlot === undefined) return undefined;
+  const index = leaderSlots.indexOf(getSlotGroupLeader(selectedSlot));
+  if (index === -1) return undefined;
+  return leaderSlots.slice(
+    Math.max(index - selectedSlotNearbyOffset, 0),
+    index + selectedSlotNearbyOffset,
+  );
+});
+
 const slotCacheBounds = 1_000;
 
 export const deleteSlotStatusBoundsAtom = atom(null, (get, set) => {
   const slotOverride = get(slotOverrideAtom);
-  const selectedSlot = get(selectedSlotAtom);
-
+  const selectedSlotNearbyLeaders = get(selectedSlotNearbyYouLeadersAtom);
   const currentSlot = get(currentSlotAtom);
   const searchSlots = get(searchLeaderSlotsAtom);
   const leaderSlots = get(leaderSlotsAtom);
@@ -168,14 +180,11 @@ export const deleteSlotStatusBoundsAtom = atom(null, (get, set) => {
         const numberVal = Number(cachedStatusSlot);
         const slotGroupStart = getSlotGroupLeader(numberVal);
 
-        if (searchSlots?.length && searchSlots.includes(slotGroupStart)) {
+        if (searchSlots?.includes(slotGroupStart)) {
           continue;
         }
 
-        if (
-          selectedSlot !== undefined &&
-          slotGroupStart === getSlotGroupLeader(selectedSlot)
-        ) {
+        if (selectedSlotNearbyLeaders?.includes(slotGroupStart)) {
           continue;
         }
 

src/features/SlotDetails/index.tsx

@@ -11,7 +11,7 @@ import {
 } from "../Overview/SlotPerformance/atoms";
 import type { FC, SVGProps } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useUnmount } from "react-use";
+import { useMedia, useUnmount } from "react-use";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { useSlotInfo } from "../../hooks/useSlotInfo";
 import styles from "./slotDetails.module.css";
@@ -282,6 +282,7 @@ function SlotNavigation({ slot }: { slot: number }) {
   const mostRecentSlotLeader = useAtomValue(mostRecentSlotLeaderAtom);
 
   const {
+    previousSlotGroupLeader,
     previousSlotGroupLastSlot,
     isPreviousDisabled,
     nextSlotGroupLeader,
@@ -312,6 +313,7 @@ function SlotNavigation({ slot }: { slot: number }) {
       mostRecentSlotLeader + slotsPerLeader <= nextSlotGroupLeader;
 
     return {
+      previousSlotGroupLeader,
       previousSlotGroupLastSlot,
       isPreviousDisabled,
       nextSlotGroupLeader,
@@ -326,57 +328,64 @@ function SlotNavigation({ slot }: { slot: number }) {
       pb="1"
       style={{ top: navigationTop, zIndex: maxZIndex - 3 }}
     >
-      <Flex
-        className={clsx(
-          styles.slotNavigation,
-          styles.previousNavigation,
-          isPreviousDisabled && styles.disabled,
-        )}
-      >
-        {previousSlotGroupLastSlot && (
-          <SlotStatus
-            slot={previousSlotGroupLastSlot}
-            searchSlot={previousSlotGroupLastSlot}
-            disabled={isPreviousDisabled}
-          />
-        )}
-      </Flex>
-      <Flex
-        gap="1"
-        flexGrow="1"
-        flexShrink="1"
-        wrap="wrap"
-        className={styles.slotNavigation}
-      >
-        {Array.from({ length: slotsPerLeader }).map((_, slotIdx) => {
-          const slotNumber = slot + slotIdx;
-          return (
-            <SlotStatus
-              key={slotNumber}
-              slot={slotNumber}
-              searchSlot={slotNumber}
-            />
-          );
-        })}
-      </Flex>
-      <Flex
-        className={clsx(
-          styles.slotNavigation,
-          styles.nextNavigation,
-          isNextDisabled && styles.disabled,
-        )}
-      >
-        {nextSlotGroupLeader && (
+      <PreviousNextNavigation
+        slot={previousSlotGroupLastSlot}
+        searchSlot={previousSlotGroupLeader}
+        isDisabled={isPreviousDisabled}
+        isPrevious={true}
+      />
+      <SelectedSlotGroup firstSlot={slot} />
+      <PreviousNextNavigation
+        slot={nextSlotGroupLeader}
+        searchSlot={nextSlotGroupLeader}
+        isDisabled={isNextDisabled}
+        isPrevious={false}
+      />
+    </Flex>
+  );
+}
+
+function SelectedSlotGroup({ firstSlot }: { firstSlot: number }) {
+  return (
+    <Flex gap="1" className={styles.slotNavigation}>
+      {Array.from({ length: slotsPerLeader }).map((_, slotIdx) => {
+        const slotNumber = firstSlot + slotIdx;
+        return (
           <SlotStatus
-            slot={nextSlotGroupLeader}
-            searchSlot={nextSlotGroupLeader}
-            disabled={isNextDisabled}
+            key={slotNumber}
+            slot={slotNumber}
+            searchSlot={slotNumber}
           />
-        )}
-      </Flex>
+        );
+      })}
     </Flex>
   );
 }
+function PreviousNextNavigation({
+  slot,
+  searchSlot,
+  isDisabled,
+  isPrevious,
+}: {
+  slot?: number;
+  searchSlot?: number;
+  isDisabled?: boolean;
+  isPrevious: boolean;
+}) {
+  return (
+    <div
+      className={clsx(styles.slotNavigation, {
+        [styles.previousNavigation]: isPrevious,
+        [styles.nextNavigation]: !isPrevious,
+        [styles.disabled]: isDisabled,
+      })}
+    >
+      {slot !== undefined && searchSlot !== undefined && (
+        <SlotStatus slot={slot} searchSlot={searchSlot} disabled={isDisabled} />
+      )}
+    </div>
+  );
+}
 
 function SlotHeader({ slot }: { slot: number }) {
   const { peer, isLeader, name } = useSlotInfo(slot);
@@ -407,10 +416,10 @@ function SlotStatus({
   searchSlot: number;
   disabled?: boolean;
 }) {
+  const includeIcon = !useMedia("(max-width: 920px)");
   const selectedSlot = useAtomValue(selectedSlotAtom);
   const queryPublish = useSlotQueryPublish(slot);
   const isSelected = useMemo(() => slot === selectedSlot, [slot, selectedSlot]);
-
   const isSkipped = useMemo(
     () => queryPublish.publish?.skipped,
     [queryPublish.publish?.skipped],
@@ -420,29 +429,19 @@ function SlotStatus({
     <Link
       to="/slotDetails"
       search={{ slot: searchSlot }}
-      className={styles.link}
+      className={clsx(styles.slotStatus, {
+        [styles.selectedSlot]: isSelected,
+        [styles.skippedSlot]: isSkipped,
+      })}
       disabled={disabled || isSelected}
     >
-      <Flex
-        align="center"
-        justify="center"
-        className={clsx(
-          styles.slotStatus,
-          isSelected && styles.selectedSlot,
-          isSkipped && styles.skippedSlot,
-        )}
-      >
-        {slot !== undefined && (
-          <Text style={disabled ? { cursor: "default" } : undefined}>
-            {slot}
-          </Text>
-        )}
-        {queryPublish.publish?.skipped ? (
+      <Text className={styles.slotStatusText}>{slot}</Text>
+      {includeIcon &&
+        (isSkipped ? (
           <SkippedIcon size="large" />
         ) : (
           <StatusIcon isCurrent={false} slot={slot} size="large" />
-        )}
-      </Flex>
+        ))}
     </Link>
   );
 }

src/features/SlotDetails/slotDetails.module.css

@@ -46,29 +46,35 @@
 }
 
 .slot-navigation {
-  padding: 3px;
-  align-items: center;
-  gap: 3px;
+  flex: 4;
+  padding: 2px;
   border-radius: 5px;
   border: 1px solid var(--slot-details-my-slots-color);
   border-top-width: 3px;
+  min-width: 0;
 
-  & .link {
+  .slot-status {
     text-decoration: none;
+    display: flex;
     flex: 1;
-  }
-
-  & .slot-status {
-    padding: 3px 10px;
     justify-content: center;
     align-items: center;
+    padding: 3px 10px;
     gap: 10px;
-    flex: 1 0 0;
     font-size: 12px;
     font-weight: 400;
     border-radius: 3px;
     background: var(--slot-details-background-color);
     color: var(--slot-details-color);
+    min-width: 0;
+
+    .slot-status-text {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      direction: rtl;
+      cursor: default;
+    }
 
     &.selected-slot {
       font-weight: 600;
@@ -87,30 +93,23 @@
 
   &.previous-navigation,
   &.next-navigation {
-    width: 125px;
+    flex: 1;
 
     &.disabled {
       border: 1px solid var(--slot-details-disabled-slot-border-color);
     }
 
-    & a {
-      height: 100%;
-    }
-
-    & .slot-status {
-      height: 100%;
+    .slot-status {
       font-size: 14px;
       font-weight: 600;
     }
   }
 
   &.previous-navigation {
-    justify-content: end;
     mask-image: linear-gradient(to right, transparent 0%, black 100%);
   }
 
   &.next-navigation {
-    justify-content: start;
     mask-image: linear-gradient(to left, transparent 0%, black 100%);
   }
 }