feat(widget): add collapsible split view for responsive dashboard

packages/widget/src/App.tsx

@@ -47,6 +47,7 @@ export const SKApp = (props: SKAppProps) => {
   return (
     <SettingsContextProvider {...variantProps} {...props}>
       <Box
+        data-sk-layout={props.dashboardVariant ? "dashboard" : "widget"}
         className={appContainer({
           variant: props.dashboardVariant ? "dashboard" : "widget",
         })}

packages/widget/src/hooks/use-media-query.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+const getMatches = (query: string) => {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return false;
+  }
+
+  return window.matchMedia(query).matches;
+};
+
+export const useMediaQuery = (query: string) => {
+  const [matches, setMatches] = useState(() => getMatches(query));
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+
+    const mediaQueryList = window.matchMedia(query);
+    const onChange = () => setMatches(mediaQueryList.matches);
+
+    onChange();
+    mediaQueryList.addEventListener("change", onChange);
+
+    return () => mediaQueryList.removeEventListener("change", onChange);
+  }, [query]);
+
+  return matches;
+};

packages/widget/src/pages-dashboard/common/components/split-view/index.tsx

@@ -0,0 +1,91 @@
+import clsx from "clsx";
+import { type ReactNode, useState } from "react";
+import { Box } from "../../../../components/atoms/box";
+import { CaretLeftIcon } from "../../../../components/atoms/icons/caret-left";
+import { useMediaQuery } from "../../../../hooks/use-media-query";
+import { splitCollapsedMediaQuery } from "../../../../styles/tokens/breakpoints";
+import { VerticalDivider } from "../divider";
+import * as styles from "./styles.css";
+
+type Side = "primary" | "secondary";
+
+type SplitViewProps = {
+  primary: ReactNode;
+  secondary: ReactNode;
+  primaryBarLabel: string;
+  secondaryBarLabel: string;
+};
+
+export const SplitView = ({
+  primary,
+  secondary,
+  primaryBarLabel,
+  secondaryBarLabel,
+}: SplitViewProps) => {
+  const isCollapsed = useMediaQuery(splitCollapsedMediaQuery);
+  const [activeSide, setActiveSide] = useState<Side>("primary");
+
+  if (!primary || !secondary) {
+    return <Box className={styles.container}>{primary || secondary}</Box>;
+  }
+
+  const showPrimary = !isCollapsed || activeSide === "primary";
+  const showSecondary = !isCollapsed || activeSide === "secondary";
+  const revealLabel =
+    activeSide === "primary" ? secondaryBarLabel : primaryBarLabel;
+
+  const primaryClass = !isCollapsed
+    ? styles.panelWrapContents
+    : showPrimary
+      ? styles.panelWrapActiveFromLeft
+      : styles.panelWrapHidden;
+
+  const secondaryClass = !isCollapsed
+    ? styles.panelWrapContents
+    : showSecondary
+      ? styles.panelWrapActiveFromRight
+      : styles.panelWrapHidden;
+
+  return (
+    <Box className={styles.container}>
+      <Box className={primaryClass}>{primary}</Box>
+
+      {isCollapsed ? (
+        <Box
+          as="button"
+          type="button"
+          aria-label={revealLabel}
+          className={clsx(
+            styles.bar,
+            activeSide === "primary"
+              ? styles.barBleedRight
+              : styles.barBleedLeft
+          )}
+          onClick={() =>
+            setActiveSide((side) =>
+              side === "primary" ? "secondary" : "primary"
+            )
+          }
+        >
+          <Box
+            as="span"
+            className={clsx(
+              styles.barIcon,
+              activeSide === "secondary" && styles.barIconFlipped
+            )}
+          >
+            <CaretLeftIcon />
+          </Box>
+
+          <Box as="span" className={styles.barLabel}>
+            {revealLabel}
+          </Box>
+        </Box>
+      ) : (
+        <VerticalDivider />
+      )}
+
+      <Box className={secondaryClass}>{secondary}</Box>
+    </Box>
+  );
+};

packages/widget/src/pages-dashboard/common/components/split-view/styles.css.ts

@@ -0,0 +1,122 @@
+import { keyframes, style } from "@vanilla-extract/css";
+import { atoms } from "../../../../styles/theme/atoms.css";
+import { vars } from "../../../../styles/theme/contract.css";
+import { OUTLET_PADDING } from "../styles.css";
+
+export const container = style({
+  alignItems: "stretch",
+  display: "flex",
+  flexDirection: "row",
+  gap: "24px",
+  justifyContent: "center",
+  minWidth: 0,
+  width: "100%",
+});
+
+export const panelWrapContents = style({
+  display: "contents",
+});
+
+export const panelWrapHidden = style({
+  display: "none",
+});
+
+const reduceMotion = "(prefers-reduced-motion: reduce)";
+
+const slideInFromLeft = keyframes({
+  from: { opacity: 0, transform: "translateX(-16px)" },
+  to: { opacity: 1, transform: "translateX(0)" },
+});
+
+const slideInFromRight = keyframes({
+  from: { opacity: 0, transform: "translateX(16px)" },
+  to: { opacity: 1, transform: "translateX(0)" },
+});
+
+const panelWrapActiveBase = style({
+  display: "flex",
+  flex: 1,
+  flexDirection: "row",
+  minWidth: 0,
+});
+
+export const panelWrapActiveFromLeft = style([
+  panelWrapActiveBase,
+  {
+    animation: `${slideInFromLeft} 260ms ease`,
+    "@media": {
+      [reduceMotion]: { animation: "none" },
+    },
+  },
+]);
+
+export const panelWrapActiveFromRight = style([
+  panelWrapActiveBase,
+  {
+    animation: `${slideInFromRight} 260ms ease`,
+    "@media": {
+      [reduceMotion]: { animation: "none" },
+    },
+  },
+]);
+
+export const bar = style([
+  atoms({
+    background: "stakeSectionBackground",
+  }),
+  {
+    alignItems: "center",
+    alignSelf: "stretch",
+    border: 0,
+    borderRadius: "10px",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    flexShrink: 0,
+    font: "inherit",
+    gap: "8px",
+    justifyContent: "center",
+    padding: "12px 0",
+    transition: "background 150ms ease",
+    width: "30px",
+    selectors: {
+      "&:hover": {
+        background: vars.color.backgroundMuted,
+      },
+    },
+  },
+]);
+
+/**
+ * Bleed the bar outward into the dashboard outlet padding, leaving an 8px gap
+ * to the card edge on whichever side it currently lives.
+ */
+export const barBleedRight = style({
+  marginRight: `calc(8px - ${OUTLET_PADDING})`,
+});
+
+export const barBleedLeft = style({
+  marginLeft: `calc(8px - ${OUTLET_PADDING})`,
+});
+
+export const barIcon = style({
+  alignItems: "center",
+  display: "flex",
+  justifyContent: "center",
+  transition: "transform 200ms ease",
+  "@media": {
+    [reduceMotion]: { transition: "none" },
+  },
+});
+
+export const barIconFlipped = style({
+  transform: "rotate(180deg)",
+});
+
+export const barLabel = style({
+  fontSize: "13px",
+  fontWeight: 600,
+  letterSpacing: "0.02em",
+  whiteSpace: "nowrap",
+  writingMode: "vertical-rl",
+});

packages/widget/src/pages-dashboard/common/components/styles.css.ts

@@ -11,7 +11,9 @@ export const wrapper = recipe({
       borderWidth: "1px",
       borderStyle: "solid",
       boxShadow: "0px 15px 40px 0px #0000000D",
-      width: "1000px",
+      maxWidth: "1000px",
+      width: "100%",
+      minWidth: "100%",
     },
   ],
   variants: {
@@ -59,16 +61,6 @@ export const outletWrapper = recipe({
   },
 });
 
-export const tabPageContainer = recipe({
-  base: {
-    display: "flex",
-    flexDirection: "row",
-    gap: "24px",
-    alignItems: "stretch",
-    justifyContent: "center",
-  },
-});
-
 export const tabPageDivider = recipe({
   base: {
     alignSelf: "stretch",

packages/widget/src/pages-dashboard/overview/index.tsx

@@ -1,38 +1,43 @@
+import { useTranslation } from "react-i18next";
 import { Outlet } from "react-router";
 import { Box } from "../../components/atoms/box";
 import { AnimationPage } from "../../navigation/containers/animation-page";
 import { BackButtonProvider } from "../common/components/back-button";
-import { VerticalDivider } from "../common/components/divider";
-import { TabPageContainer } from "../common/components/tab-page-container";
+import { SplitView } from "../common/components/split-view";
 import { EarnDetails } from "./earn-details";
 import { earnDetailsWrapper } from "./earn-details/styles.css";
 import { overviewPageContainer } from "./styles.css";
 
 export const OverviewPage = () => {
+  const { t } = useTranslation();
+
   return (
     <AnimationPage>
       <Box display="flex" flexDirection="column" gap="4">
-        <TabPageContainer>
-          <Box
-            display="flex"
-            flex={1}
-            flexDirection="column"
-            gap="8"
-            width="0"
-            className={overviewPageContainer}
-            justifyContent="space-between"
-          >
-            <BackButtonProvider>
-              <Outlet />
-            </BackButtonProvider>
-          </Box>
-
-          <VerticalDivider />
-
-          <Box className={earnDetailsWrapper} flex={1} width="0">
-            <EarnDetails />
-          </Box>
-        </TabPageContainer>
+        <SplitView
+          primaryBarLabel={t("dashboard.split_view.earn")}
+          secondaryBarLabel={t("dashboard.split_view.details")}
+          primary={
+            <Box
+              display="flex"
+              flex={1}
+              flexDirection="column"
+              gap="8"
+              width="0"
+              className={overviewPageContainer}
+              justifyContent="space-between"
+            >
+              <BackButtonProvider>
+                <Outlet />
+              </BackButtonProvider>
+            </Box>
+          }
+          secondary={
+            <Box className={earnDetailsWrapper} flex={1} width="0">
+              <EarnDetails />
+            </Box>
+          }
+        />
       </Box>
     </AnimationPage>
   );

packages/widget/src/pages-dashboard/overview/styles.css.ts

@@ -1,5 +1,10 @@
 import { style } from "@vanilla-extract/css";
+import { splitExpandedMediaQuery } from "../../styles/tokens/breakpoints";
 
 export const overviewPageContainer = style({
-  maxWidth: "380px",
+  "@media": {
+    [splitExpandedMediaQuery]: {
+      maxWidth: "380px",
+    },
+  },
 });