feat(nav): Improved hover preview behavior (#97689)

This is meant to address user concerns that the nav preview delay is too
long. It should also hopefully address earlier concerns that it was too
easy to accidentally activate when browsing the secondary nav.

The old behavior was a 300ms delay on previewing primary nav items.

The comment on `useActiveNavGroupOnHover` describes the new behavior:

```tsx
/**
 * Hovering over a primary nav item will change the contents of the sidebar.
 * This hook returns event handlers which can be applied to a nav item.
 *
 * When a nav item detects a mouse enter event, it will either activate the group
 * immediately, or do so after a short delay depending on mouse position and angle of movement.
 *
 * There are two cases where we add a delay:
 *
 * 1. If it looks like the user is moving their mouse towards the secondary sidebar content,
 *    an extra delay is added to prevent other nav groups from being activated.
 * 2. If it looks like the user is skimming the side of the nav (e.g. they are browsing the secondary
 *    nav), an extra delay is added to prevent accidental activation.
 */
```

Author: malwilley

static/app/views/nav/constants.tsx

@@ -9,5 +9,4 @@ export const SECONDARY_SIDEBAR_MAX_WIDTH = 450;
 
 export const NAV_SIDEBAR_COLLAPSE_DELAY_MS = 200;
 export const NAV_SIDEBAR_OPEN_DELAY_MS = 250;
-export const NAV_SIDEBAR_PREVIEW_DELAY_MS = 300;
 export const NAV_SIDEBAR_RESET_DELAY_MS = 300;

static/app/views/nav/primary/components.tsx

@@ -1,9 +1,7 @@
-import {Fragment, useRef, type MouseEventHandler} from 'react';
+import {Fragment, type MouseEventHandler} from 'react';
 import type {Theme} from '@emotion/react';
 import {css, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import {useHover} from '@react-aria/interactions';
-import {mergeProps} from '@react-aria/utils';
 
 import type {ButtonProps} from 'sentry/components/core/button';
 import {Button} from 'sentry/components/core/button';
@@ -23,7 +21,6 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {
   NAV_PRIMARY_LINK_DATA_ATTRIBUTE,
-  NAV_SIDEBAR_PREVIEW_DELAY_MS,
   PRIMARY_SIDEBAR_WIDTH,
 } from 'sentry/views/nav/constants';
 import {useNavContext} from 'sentry/views/nav/context';
@@ -38,7 +35,6 @@ interface SidebarItemLinkProps {
   to: string;
   activeTo?: string;
   children?: React.ReactNode;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 
 interface SidebarItemDropdownProps {
@@ -167,43 +163,6 @@ export function SidebarMenu({
   );
 }
 
-function useActivateNavGroupOnHover(group: PrimaryNavGroup) {
-  const {setActivePrimaryNavGroup, isCollapsed, collapsedNavIsOpen} = useNavContext();
-
-  // Slightly delay changing the active nav group to prevent accidentally triggering a new menu
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const {hoverProps} = useHover({
-    onHoverStart: () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-
-      if (isCollapsed && !collapsedNavIsOpen) {
-        setActivePrimaryNavGroup(group);
-        return;
-      }
-
-      timeoutRef.current = setTimeout(() => {
-        setActivePrimaryNavGroup(group);
-      }, NAV_SIDEBAR_PREVIEW_DELAY_MS);
-    },
-    onHoverEnd: () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    },
-  });
-
-  return mergeProps(hoverProps, {
-    onClick: () => {
-      setActivePrimaryNavGroup(group);
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    },
-  });
-}
-
 function SidebarNavLink({
   children,
   to,
@@ -217,12 +176,6 @@ function SidebarNavLink({
   const location = useLocation();
   const isActive = isLinkActive(normalizeUrl(activeTo, location), location.pathname);
   const label = PRIMARY_NAV_GROUP_CONFIG[group].label;
-  const hoverProps = useActivateNavGroupOnHover(group);
-  const linkProps = mergeProps(hoverProps, {
-    onClick: () => {
-      recordPrimaryItemClick(analyticsKey, organization);
-    },
-  });
 
   return (
     <NavLink
@@ -231,10 +184,12 @@ function SidebarNavLink({
       aria-selected={activePrimaryNavGroup === group ? true : isActive}
       aria-current={isActive ? 'page' : undefined}
       isMobile={layout === NavLayout.MOBILE}
+      onClick={() => {
+        recordPrimaryItemClick(analyticsKey, organization);
+      }}
       {...{
         [NAV_PRIMARY_LINK_DATA_ATTRIBUTE]: true,
       }}
-      {...linkProps}
     >
       {layout === NavLayout.MOBILE ? (
         <Fragment>
@@ -258,11 +213,12 @@ export function SidebarLink({
   activeTo = to,
   analyticsKey,
   group,
+  ...props
 }: SidebarItemLinkProps) {
   const label = PRIMARY_NAV_GROUP_CONFIG[group].label;
 
   return (
-    <SidebarItem label={label} showLabel>
+    <SidebarItem label={label} showLabel {...props}>
       <SidebarNavLink
         to={to}
         activeTo={activeTo}

static/app/views/nav/primary/index.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useRef} from 'react';
 
 import Feature from 'sentry/components/acl/feature';
 import ErrorBoundary from 'sentry/components/errorBoundary';
@@ -24,16 +24,27 @@ import {
 import {PrimaryNavigationHelp} from 'sentry/views/nav/primary/help';
 import {PrimaryNavigationOnboarding} from 'sentry/views/nav/primary/onboarding';
 import {PrimaryNavigationServiceIncidents} from 'sentry/views/nav/primary/serviceIncidents';
+import {useActivateNavGroupOnHover} from 'sentry/views/nav/primary/useActivateNavGroupOnHover';
 import {PrimaryNavigationWhatsNew} from 'sentry/views/nav/primary/whatsNew';
 import {NavTourElement, StackedNavigationTour} from 'sentry/views/nav/tour/tour';
 import {NavLayout, PrimaryNavGroup} from 'sentry/views/nav/types';
 import {UserDropdown} from 'sentry/views/nav/userDropdown';
 import {PREVENT_AI_BASE_URL, PREVENT_BASE_URL} from 'sentry/views/prevent/settings';
 
-function SidebarBody({children}: {children: React.ReactNode}) {
+function SidebarBody({
+  children,
+  ref,
+}: {
+  children: React.ReactNode;
+  ref: React.RefObject<HTMLUListElement | null>;
+}) {
   const {layout} = useNavContext();
   return (
-    <SidebarList isMobile={layout === NavLayout.MOBILE} data-primary-list-container>
+    <SidebarList
+      isMobile={layout === NavLayout.MOBILE}
+      data-primary-list-container
+      ref={ref}
+    >
       {children}
     </SidebarList>
   );
@@ -56,15 +67,19 @@ function SidebarFooter({children}: {children: React.ReactNode}) {
 export function PrimaryNavigationItems() {
   const organization = useOrganization();
   const prefix = `organizations/${organization.slug}`;
+  const ref = useRef<HTMLUListElement>(null);
+
+  const makeNavItemProps = useActivateNavGroupOnHover({ref});
 
   return (
     <Fragment>
-      <SidebarBody>
+      <SidebarBody ref={ref}>
         <NavTourElement id={StackedNavigationTour.ISSUES} title={null} description={null}>
           <SidebarLink
             to={`/${prefix}/issues/`}
             analyticsKey="issues"
             group={PrimaryNavGroup.ISSUES}
+            {...makeNavItemProps(PrimaryNavGroup.ISSUES)}
           >
             <IconIssues />
           </SidebarLink>
@@ -80,6 +95,7 @@ export function PrimaryNavigationItems() {
             activeTo={`/${prefix}/explore`}
             analyticsKey="explore"
             group={PrimaryNavGroup.EXPLORE}
+            {...makeNavItemProps(PrimaryNavGroup.EXPLORE)}
           >
             <IconSearch />
           </SidebarLink>
@@ -100,6 +116,7 @@ export function PrimaryNavigationItems() {
               activeTo={`/${prefix}/dashboard`}
               analyticsKey="dashboards"
               group={PrimaryNavGroup.DASHBOARDS}
+              {...makeNavItemProps(PrimaryNavGroup.DASHBOARDS)}
             >
               <IconDashboard />
             </SidebarLink>
@@ -117,6 +134,7 @@ export function PrimaryNavigationItems() {
               activeTo={`/${prefix}/insights`}
               analyticsKey="insights"
               group={PrimaryNavGroup.INSIGHTS}
+              {...makeNavItemProps(PrimaryNavGroup.INSIGHTS)}
             >
               <IconGraph type="area" />
             </SidebarLink>
@@ -129,6 +147,7 @@ export function PrimaryNavigationItems() {
             activeTo={`/${prefix}/${PREVENT_BASE_URL}/`}
             analyticsKey="prevent"
             group={PrimaryNavGroup.PREVENT}
+            {...makeNavItemProps(PrimaryNavGroup.PREVENT)}
           >
             <IconPrevent />
           </SidebarLink>
@@ -146,6 +165,7 @@ export function PrimaryNavigationItems() {
             activeTo={`/settings/`}
             analyticsKey="settings"
             group={PrimaryNavGroup.SETTINGS}
+            {...makeNavItemProps(PrimaryNavGroup.SETTINGS)}
           >
             <IconSettings />
           </SidebarLink>

static/app/views/nav/primary/useActivateNavGroupOnHover.tsx

@@ -0,0 +1,113 @@
+import {useRef} from 'react';
+
+import {PRIMARY_SIDEBAR_WIDTH} from 'sentry/views/nav/constants';
+import {useNavContext} from 'sentry/views/nav/context';
+import {useMouseMovement} from 'sentry/views/nav/primary/useMouseMovement';
+import {useWindowHeight} from 'sentry/views/nav/primary/useWindowHeight';
+import {NavLayout, PrimaryNavGroup} from 'sentry/views/nav/types';
+
+/**
+ * Hovering over a primary nav item will change the contents of the sidebar.
+ * This hook returns event handlers which can be applied to a nav item.
+ *
+ * When a nav item detects a mouse enter event, it will either activate the group
+ * immediately, or do so after a short delay depending on mouse position and angle of movement.
+ *
+ * There are two cases where we add a delay:
+ *
+ * 1. If it looks like the user is moving their mouse towards the secondary sidebar content,
+ *    an extra delay is added to prevent other nav groups from being activated.
+ * 2. If it looks like the user is skimming the side of the nav (e.g. they are browsing the secondary
+ *    nav), an extra delay is added to prevent accidental activation.
+ */
+export function useActivateNavGroupOnHover({
+  ref,
+}: {
+  ref: React.RefObject<HTMLElement | null>;
+}) {
+  const {layout} = useNavContext();
+  const mouseAccelerationRef = useMouseMovement({
+    ref,
+    disabled: layout !== NavLayout.SIDEBAR,
+  });
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const {setActivePrimaryNavGroup, isCollapsed, collapsedNavIsOpen} = useNavContext();
+  const windowHeight = useWindowHeight();
+
+  return function makeNavItemProps(group: PrimaryNavGroup) {
+    const onMouseEnter = (e: MouseEvent) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      if (isCollapsed && !collapsedNavIsOpen) {
+        setActivePrimaryNavGroup(group);
+        return;
+      }
+
+      const getDelay = () => {
+        const {horizontalSpeed, verticalSpeed, horizontalDirection, verticalDirection} =
+          mouseAccelerationRef.current;
+
+        const mouseX = e.clientX;
+        const mouseY = e.clientY;
+
+        const distanceToRightEdge = PRIMARY_SIDEBAR_WIDTH - mouseX;
+        const distanceToTop = mouseY;
+        const distanceToBottom = windowHeight - mouseY;
+
+        // Find angle from mouse to top and bottom of nav
+        // This is the angle of motion that likely inidcates that the user is
+        // moving their mouse into the secondary nav.
+        // Similar to https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
+        const angleToTop =
+          Math.atan2(distanceToTop, distanceToRightEdge) * (180 / Math.PI);
+        const angleToBottom =
+          Math.atan2(distanceToBottom, distanceToRightEdge) * (180 / Math.PI);
+
+        const mouseDirectionAngle =
+          horizontalSpeed === 0
+            ? 90
+            : Math.atan2(verticalSpeed, horizontalSpeed) * (180 / Math.PI);
+
+        const isMovingTowardSecondaryNav =
+          horizontalDirection > 0
+            ? verticalDirection > 0
+              ? mouseDirectionAngle < angleToBottom
+              : mouseDirectionAngle < angleToTop
+            : false;
+
+        const isSkimmingRightSide =
+          horizontalDirection < 1 && mouseX > PRIMARY_SIDEBAR_WIDTH * 0.8;
+
+        // If we deem the user intention is _not_ to active another nav group, add a 200ms delay
+        if (isMovingTowardSecondaryNav || isSkimmingRightSide) {
+          return 200;
+        }
+
+        // Otherwise, activate immediately
+        return 0;
+      };
+
+      timeoutRef.current = setTimeout(() => {
+        setActivePrimaryNavGroup(group);
+      }, getDelay());
+    };
+
+    const onMouseLeave = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+
+    const onClick = () => {
+      setActivePrimaryNavGroup(group);
+    };
+
+    return {
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+    };
+  };
+}