Fix sidebar expand

packages/extension/src/newtab/ExtensionTopBanners.tsx

@@ -88,6 +88,7 @@ const ShortcutsIllustration = (): ReactElement => {
 type UseShortcutsOnboardingResult = {
   shouldShow: boolean;
   onAddClick: () => void;
+  onClose: () => void;
 };
 
 const useShortcutsOnboarding = (): UseShortcutsOnboardingResult => {
@@ -98,7 +99,8 @@ const useShortcutsOnboarding = (): UseShortcutsOnboardingResult => {
   const { shortcutLinks } = useShortcutLinks();
 
   const hasShortcuts = (shortcutLinks?.length ?? 0) > 0;
-  const shouldShow = !hasShortcuts;
+  const hasClosedBanner = checkHasCompleted(ActionType.ClosedShortcutsBanner);
+  const shouldShow = !hasShortcuts && !hasClosedBanner;
 
   const completeFirstSession = () => {
     if (!checkHasCompleted(ActionType.FirstShortcutsSession)) {
@@ -116,7 +118,9 @@ const useShortcutsOnboarding = (): UseShortcutsOnboardingResult => {
     });
   };
 
-  return { shouldShow, onAddClick };
+  const onClose = () => completeAction(ActionType.ClosedShortcutsBanner);
+
+  return { shouldShow, onAddClick, onClose };
 };
 
 export const ExtensionTopBanners = (): ReactElement | null => {
@@ -177,6 +181,7 @@ export const ExtensionTopBanners = (): ReactElement | null => {
         ctaLabel="Add shortcuts"
         illustration={<ShortcutsIllustration />}
         onCtaClick={shortcuts.onAddClick}
+        onClose={shortcuts.onClose}
       />,
     );
   }

packages/shared/src/components/sidebar/SidebarDesktopV2.tsx

@@ -1139,25 +1139,6 @@ export const SidebarDesktopV2 = ({
   const isHoverExpanded = isCollapsedHoverMode && isRailHovered;
   const isExpanded = sidebarExpanded || forceExpanded || isHoverExpanded;
 
-  // ChatGPT-style affordance: while collapsed, the whole sidebar reads as a
-  // resize handle (ew cursor). Clicking the empty surface pins it open — same
-  // as the toggle — while clicks on nav items / avatar / toggle keep their own
-  // behavior.
-  const pinFromEmptyClick = (event: React.MouseEvent<HTMLElement>) => {
-    if (!isCollapsedHoverMode) {
-      return;
-    }
-    const target = event.target as HTMLElement;
-    if (
-      target.closest(
-        'a, button, input, select, textarea, [role="tab"], [role="button"], [role="menuitem"]',
-      )
-    ) {
-      return;
-    }
-    onToggleExpanded();
-  };
-
   const renderCategoryTab = (
     categoryId: SidebarCategoryId,
   ): ReactElement | null => {
@@ -1324,7 +1305,6 @@ export const SidebarDesktopV2 = ({
       onMouseEnter={handleRailMouseEnter}
       onMouseLeave={handleRailMouseLeave}
       onMouseMove={handleRailMouseMove}
-      onClick={pinFromEmptyClick}
       className={classNames(
         'laptop:bottom-0 laptop:h-dvh laptop:min-h-dvh laptop:flex-row laptop:border-r-0',
         isExpanded ? railExpandedWidth : railCollapsedWidth,
@@ -1341,9 +1321,6 @@ export const SidebarDesktopV2 = ({
         // its edge reads clearly against the content behind it.
         isHoverExpanded &&
           'laptop:!border-r laptop:border-border-subtlest-tertiary',
-        // Collapsed sidebar reads as a resize handle: click the empty surface
-        // to pin it open.
-        isCollapsedHoverMode && 'laptop:cursor-ew-resize',
         featureTheme && 'bg-transparent',
         suppressTransition,
       )}

packages/shared/src/graphql/actions.ts

@@ -68,6 +68,7 @@ export enum ActionType {
   AskUpsellSearch = 'ask_upsell_search',
   DismissCompanionDemoWidget = 'dismiss_companion_demo_widget',
   ClickedNewStripCta = 'click_new_strip_cta',
+  ClosedShortcutsBanner = 'closed_shortcuts_banner',
 }
 
 export const cvActions = [