feat(webapp): remove the middle collapse handle in favor of the footer button

The side menu footer collapse button now handles toggling, so the middle-right handle (and its animated chevron) is redundant. The cmd+b shortcut is preserved.

Author: samejr

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -296,7 +296,6 @@ export function SideMenu({
         isCollapsed ? "w-[2.75rem]" : "w-56"
       )}
     >
-      <CollapseToggle isCollapsed={isCollapsed} onToggle={handleToggleCollapsed} />
       <div className="absolute inset-0 grid grid-cols-[100%] grid-rows-[2.5rem_auto_1fr_auto] overflow-hidden">
         <div className="flex min-w-0 items-center overflow-hidden border-b border-transparent px-1 py-1">
           <div className={cn("min-w-0", !isCollapsed && "flex-1")}>
@@ -1432,129 +1431,3 @@ function CollapseMenuButton({
     </div>
   );
 }
-
-function AnimatedChevron({
-  isHovering,
-  isCollapsed,
-}: {
-  isHovering: boolean;
-  isCollapsed: boolean;
-}) {
-  // When hovering and expanded: left chevron (pointing left to collapse)
-  // When hovering and collapsed: right chevron (pointing right to expand)
-  // When not hovering: straight vertical line
-
-  const getRotation = () => {
-    if (!isHovering) return { top: 0, bottom: 0 };
-    if (isCollapsed) {
-      // Right chevron
-      return { top: -17, bottom: 17 };
-    } else {
-      // Left chevron
-      return { top: 17, bottom: -17 };
-    }
-  };
-
-  const { top, bottom } = getRotation();
-
-  // Calculate horizontal offset to keep chevron centered when rotated
-  // Left chevron: translate left (-1.5px)
-  // Right chevron: translate right (+1.5px)
-  const getTranslateX = () => {
-    if (!isHovering) return 0;
-    return isCollapsed ? 1.5 : -1.5;
-  };
-
-  return (
-    <motion.svg
-      width="4"
-      height="30"
-      viewBox="0 0 4 30"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="pointer-events-none relative z-10 overflow-visible text-charcoal-600 transition-colors group-hover:text-text-bright"
-      initial={false}
-      animate={{
-        x: getTranslateX(),
-      }}
-      transition={{ duration: 0.4, ease: "easeOut" }}
-    >
-      {/* Top segment */}
-      <motion.line
-        x1="2"
-        y1="1.5"
-        x2="2"
-        y2="15"
-        stroke="currentColor"
-        strokeWidth="3"
-        strokeLinecap="round"
-        initial={false}
-        animate={{
-          rotate: top,
-        }}
-        transition={{ duration: 0.2, ease: "easeOut" }}
-        style={{ transformOrigin: "2px 15px" }}
-      />
-      {/* Bottom segment */}
-      <motion.line
-        x1="2"
-        y1="15"
-        x2="2"
-        y2="28.5"
-        stroke="currentColor"
-        strokeWidth="3"
-        strokeLinecap="round"
-        initial={false}
-        animate={{
-          rotate: bottom,
-        }}
-        transition={{ duration: 0.2, ease: "easeOut" }}
-        style={{ transformOrigin: "2px 15px" }}
-      />
-    </motion.svg>
-  );
-}
-
-function CollapseToggle({ isCollapsed, onToggle }: { isCollapsed: boolean; onToggle: () => void }) {
-  const [isHovering, setIsHovering] = useState(false);
-
-  return (
-    <div className="absolute -right-3 top-1/2 z-10 -translate-y-1/2">
-      {/* Vertical line to mask the side menu border */}
-      <div
-        className={cn(
-          "pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 transition-colors duration-200",
-          isHovering ? "bg-charcoal-750" : "bg-background-bright"
-        )}
-      />
-      <TooltipProvider disableHoverableContent>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              aria-label={isCollapsed ? "Expand side menu" : "Collapse side menu"}
-              onClick={onToggle}
-              onMouseEnter={() => setIsHovering(true)}
-              onMouseLeave={() => setIsHovering(false)}
-              className={cn(
-                "group flex h-12 w-6 items-center justify-center rounded-md text-text-dimmed transition-all duration-200 focus-custom",
-                isHovering
-                  ? "border border-grid-bright bg-background-bright shadow-md hover:bg-charcoal-750 hover:text-text-bright"
-                  : "border border-transparent bg-transparent"
-              )}
-            >
-              <AnimatedChevron isHovering={isHovering} isCollapsed={isCollapsed} />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="right" className="flex items-center gap-2 text-xs">
-            {isCollapsed ? "Expand" : "Collapse"}
-            <span className="flex items-center">
-              <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
-              <ShortcutKey shortcut={{ key: "b" }} variant="medium/bright" />
-            </span>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-}