Give the shell one header, a skip link, and a cookie-aware first paint.

Breakpoint clones were still in the tab order, marketing always painted Log in, and at 430px the logo overlay covered Use cases and Learn. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-09 17:12:59 -06:00
parent aecb890cc8
commit 5242f8c6bb
22 changed files with 309 additions and 320 deletions
@@ -15,18 +15,7 @@ import Avatar from "../../asset/Avatar";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import { prepareFreshCreateFlowEntrySync } from "../../../(app)/create/utils/prepareFreshCreateFlowEntry";
 import { TopView } from "./Top.view";
-import type { TopProps, NavSize } from "./Top.types";
-
-type MenuClusterSize = "X Small" | "Small" | "Medium" | "Large" | "X Large";
-
-/** Map responsive `NavSize` breakpoints to Figma menu item sizes (shared by nav links + login). */
-const NAV_SIZE_TO_MENU_ITEM_SIZE: Record<NavSize, MenuClusterSize> = {
-  xsmall: "X Small",
-  homeMd: "Medium",
-  large: "Large",
-  homeXlarge: "X Large",
-  xlarge: "X Large",
-};
+import type { TopProps } from "./Top.types";

 export const avatarImageSources = [
  getAssetPath(ASSETS.AVATAR_3),
@@ -40,6 +29,16 @@ export const avatarImages = avatarImageSources.map((src, index) => ({
  alt: `Avatar ${3 - index}`,
 }));

+/** Padding/type that tracks lg/xl Menu sizes without cloning the items per breakpoint. */
+const NAV_ITEM_RESPONSIVE_CLASS =
+  "lg:px-[var(--spacing-scale-016)] lg:py-[var(--spacing-scale-016)] lg:h-[44px] lg:text-medium-label xl:text-x-large-label";
+
+const FOLDER_NAV_ITEM_RESPONSIVE_CLASS =
+  "md:px-[var(--spacing-scale-008)] md:py-[var(--spacing-scale-008)] md:h-[32px] md:text-x-small-label lg:px-[var(--spacing-scale-016)] lg:py-[var(--spacing-scale-016)] lg:h-[44px] lg:text-medium-label xl:text-x-large-label";
+
+const CREATE_RULE_RESPONSIVE_CLASS =
+  "lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
+
 const TopContainer = memo<TopProps>(
  ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
    const pathname = usePathname();
@@ -61,7 +60,6 @@ const TopContainer = memo<TopProps>(
      router.push("/create/informational");
    }, [loggedIn, router]);

-    // Schema markup for site navigation
    const schemaData = {
      "@context": "https://schema.org",
      "@type": "WebSite",
@@ -77,32 +75,32 @@ const TopContainer = memo<TopProps>(
      },
    };

-    // Logo size based on folderTop prop
    const logoSize = folderTop ? "topNavFolderTop" : "topNavHeader";

-    // Navigation items with translations
    const navigationItems = [
      { href: "/use-cases", text: t("navigation.useCases"), extraPadding: true },
      { href: "/learn", text: t("navigation.learn") },
      { href: "/about", text: t("navigation.about") },
    ];

-    const renderNavigationItems = (size: NavSize) => {
+    const renderNavigationItems = () => {
      const mode = folderTop ? "inverse" : "default";
+      const sizeClass = folderTop
+        ? FOLDER_NAV_ITEM_RESPONSIVE_CLASS
+        : NAV_ITEM_RESPONSIVE_CLASS;

-      return navigationItems.map((item, index) => {
-        const itemSize = NAV_SIZE_TO_MENU_ITEM_SIZE[size];
-
+      return navigationItems.map((item) => {
        const isUseCases = item.extraPadding === true;

        return (
          <MenuItem
-            key={index}
+            key={item.href}
            href={item.href}
-            size={itemSize}
+            size="X Small"
            mode={mode}
            state={pathname === item.href ? "selected" : "default"}
            reducedPadding={isUseCases}
+            className={sizeClass}
            ariaLabel={t("ariaLabels.navigateToPage").replace(
              "{text}",
              item.text,
@@ -114,34 +112,7 @@ const TopContainer = memo<TopProps>(
      });
    };

-    const renderAvatarGroup = (
-      containerSize: "small" | "medium" | "large" | "xlarge",
-      avatarSize: "small" | "medium" | "large" | "xlarge",
-    ) => {
-      return (
-        <AvatarContainer size={containerSize}>
-          {avatarImageSources.map((src, index) => (
-            <Avatar
-              key={index}
-              src={src}
-              alt={tTopNav(`avatarAlts.${3 - index}`)}
-              size={avatarSize}
-            />
-          ))}
-        </AvatarContainer>
-      );
-    };
-
-    const renderLoginButton = (size: NavSize) => {
-      const itemSize = NAV_SIZE_TO_MENU_ITEM_SIZE[size];
-
-      // Determine mode based on folderTop and breakpoint size
-      // folderTop: inverse mode (black text) for smallest breakpoints (xsmall/home)
-      // folderTop: default mode (yellow text) for 640px+ breakpoints (homeMd/large/homeXlarge/xlarge)
-      // false folderTop: always default mode (yellow text on dark background)
-      const isSmallBreakpoint = size === "xsmall";
-      const mode = folderTop && isSmallBreakpoint ? "inverse" : "default";
-
+    const renderLoginButton = () => {
      const label = loggedIn ? t("buttons.profile") : t("buttons.logIn");
      const ariaLabel = loggedIn
        ? t("ariaLabels.goToProfile")
@@ -154,9 +125,10 @@ const TopContainer = memo<TopProps>(
        return (
          <MenuItem
            href="/profile"
-            size={itemSize}
-            mode={mode}
+            size="X Small"
+            mode="default"
            state={navSelected ? "selected" : "default"}
+            className={NAV_ITEM_RESPONSIVE_CLASS}
            ariaLabel={ariaLabel}
          >
            {label}
@@ -174,9 +146,10 @@ const TopContainer = memo<TopProps>(
            })
          }
          href="/login"
-          size={itemSize}
-          mode={mode}
+          size="X Small"
+          mode="default"
          state={navSelected ? "selected" : "default"}
+          className={NAV_ITEM_RESPONSIVE_CLASS}
          ariaLabel={ariaLabel}
        >
          {label}
@@ -184,20 +157,30 @@ const TopContainer = memo<TopProps>(
      );
    };

-    const renderCreateRuleButton = (
-      buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
-      containerSize: "small" | "medium" | "large" | "xlarge",
-      avatarSize: "small" | "medium" | "large" | "xlarge",
-    ) => {
+    const renderCreateRuleButton = () => {
      return (
        <Button
-          size={buttonSize}
+          size="xsmall"
          buttonType="filled"
          palette="inverse"
          onClick={handleCreateRuleClick}
          ariaLabel={t("ariaLabels.createNewRule")}
+          className={CREATE_RULE_RESPONSIVE_CLASS}
        >
-          {renderAvatarGroup(containerSize, avatarSize)}
+          <AvatarContainer
+            size="small"
+            className="lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
+          >
+            {avatarImageSources.map((src, index) => (
+              <Avatar
+                key={src}
+                src={src}
+                alt={tTopNav(`avatarAlts.${3 - index}`)}
+                size="small"
+                className="lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
+              />
+            ))}
+          </AvatarContainer>
          <span>{t("buttons.createRule")}</span>
        </Button>
      );