Revert sidebar hover actions

Restore the previous File Explorer and Outline header and scrolling behavior.
The hover overlay did not produce the intended sidebar layout.

Author: mehmetozguldev

src/features/file-explorer/components/file-explorer-tree.tsx

@@ -63,7 +63,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/ui/dropdown";
-import { SidebarHeader, SidebarIconButton, SidebarPanel, SidebarSearchPopover } from "@/ui/sidebar";
+import { SidebarHeader, SidebarIconButton, SidebarSearchPopover } from "@/ui/sidebar";
 import { Spinner } from "@/ui/spinner";
 import { cn } from "@/utils/cn";
 import { frontendTrace } from "@/utils/frontend-trace";
@@ -1096,9 +1096,9 @@ function FileExplorerTreeComponent({
   }, [activePath]);
 
   return (
-    <SidebarPanel
+    <div
       className={cn(
-        "flex-1 select-none",
+        "relative flex min-h-0 min-w-0 flex-1 select-none flex-col overflow-hidden p-0",
         dragState.dragOverPath === "__ROOT__" &&
           "border-2! border-dashed! border-primary! bg-primary! bg-opacity-10!",
       )}
@@ -1281,7 +1281,7 @@ function FileExplorerTreeComponent({
       onMouseLeave={handleContainerMouseLeave}
     >
       <SidebarHeader
-        variant="hover-actions"
+        className="justify-end"
         onClick={(event) => event.stopPropagation()}
         onMouseDown={(event) => event.stopPropagation()}
       >
@@ -1670,7 +1670,7 @@ function FileExplorerTreeComponent({
           </p>
         </Dialog>
       )}
-    </SidebarPanel>
+    </div>
   );
 }
 

src/features/file-explorer/components/file-explorer-viewport.tsx

@@ -17,7 +17,6 @@ import {
   getFileTreeVirtualRange,
   type FileTreeScrollAlignment,
 } from "@/features/file-explorer/lib/file-tree-viewport";
-import { SidebarTreeScrollArea } from "@/ui/sidebar";
 import { cn } from "@/utils/cn";
 
 export interface FileExplorerViewportHandle {
@@ -208,17 +207,19 @@ export const FileExplorerViewport = forwardRef<
   const stickyIndexSet = useMemo(() => new Set(stickyIndexes), [stickyIndexes]);
 
   return (
-    <SidebarTreeScrollArea
-      className={cn("file-tree-container font-sans", className)}
-      contentPadding="inline"
-      viewportClassName="overscroll-none scroll-auto [overflow-anchor:none]"
-      viewportProps={{ ref: scrollRef, ...props }}
+    <div
+      ref={scrollRef}
+      className={cn(
+        "file-tree-container relative overflow-x-hidden overflow-y-auto overscroll-none scroll-auto scrollbar-gutter-both font-sans [overflow-anchor:none]",
+        className,
+      )}
       style={
         {
           "--file-tree-row-height": `${rowHeight}px`,
           ...style,
         } as React.CSSProperties
       }
+      {...props}
     >
       {stickyIndexes.length > 0 ? (
         <div
@@ -261,6 +262,6 @@ export const FileExplorerViewport = forwardRef<
         )}
       </div>
       {emptyState}
-    </SidebarTreeScrollArea>
+    </div>
   );
 });

src/features/layout/tests/sidebar-hover-actions.test.ts

@@ -30,13 +30,8 @@ import { readFileContent } from "@/features/file-system/controllers/file-operati
 import { openFile } from "@/features/file-system/controllers/platform";
 import { useBufferStore } from "@/features/editor/stores/buffer.store";
 import { EmptyState } from "@/ui/empty";
-import {
-  SidebarHeader,
-  SidebarIconButton,
-  SidebarPanel,
-  SidebarSearchPopover,
-  SidebarTreeScrollArea,
-} from "@/ui/sidebar";
+import { SidebarHeader, SidebarIconButton, SidebarSearchPopover, SidebarPanel } from "@/ui/sidebar";
+import { ScrollArea } from "@/ui/scroll-area";
 import { Spinner } from "@/ui/spinner";
 import { useDocumentOutline } from "../hooks/use-document-outline";
 import { getOutlineRevealScrollTop } from "../utils/outline-scroll";
@@ -278,7 +273,7 @@ export function OutlineSidebar() {
 
   return (
     <SidebarPanel onKeyDownCapture={handleSidebarKeyDown}>
-      <SidebarHeader variant="hover-actions">
+      <SidebarHeader>
         <SidebarSearchPopover
           value={query}
           onChange={setQuery}
@@ -329,7 +324,7 @@ export function OutlineSidebar() {
         </DropdownMenu>
       </SidebarHeader>
 
-      <SidebarTreeScrollArea
+      <ScrollArea
         className="min-h-0 min-w-0 flex-1"
         viewportClassName="overscroll-contain"
         viewportProps={{
@@ -340,6 +335,7 @@ export function OutlineSidebar() {
             scrollPaddingBlock: "4px",
           },
         }}
+        contentClassName="p-1"
       >
         {!isSupported ? (
           <EmptyState
@@ -426,7 +422,7 @@ export function OutlineSidebar() {
             </ContextMenu>
           ))
         )}
-      </SidebarTreeScrollArea>
+      </ScrollArea>
     </SidebarPanel>
   );
 }

src/features/outline/components/outline-sidebar.tsx

@@ -7,7 +7,6 @@ import {
   useEffect,
   useState,
 } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/ui/accordion";
 import { Button, type ButtonProps } from "@/ui/button";
 import { ChromeBar } from "@/ui/chrome";
@@ -27,10 +26,9 @@ export function SidebarPanel({
   return (
     <div
       className={cn(
-        "group/sidebar-panel relative flex size-full min-h-0 min-w-0 flex-col overflow-hidden bg-background",
+        "flex size-full min-h-0 min-w-0 flex-col overflow-hidden bg-background",
         className,
       )}
-      data-slot="sidebar-panel"
       {...props}
     >
       {children}
@@ -68,35 +66,6 @@ export function SidebarScrollArea({
   return <ScrollArea className={className} contentClassName="px-chrome-inline py-2" {...props} />;
 }
 
-const sidebarTreeScrollContentVariants = cva("", {
-  variants: {
-    padding: {
-      all: "p-1",
-      inline: "px-1",
-    },
-  },
-  defaultVariants: {
-    padding: "all",
-  },
-});
-
-export function SidebarTreeScrollArea({
-  className,
-  contentPadding = "all",
-  ...props
-}: Omit<ComponentProps<typeof ScrollArea>, "contentClassName" | "reserveScrollbarGutter"> & {
-  contentPadding?: "all" | "inline";
-}) {
-  return (
-    <ScrollArea
-      className={className}
-      contentClassName={sidebarTreeScrollContentVariants({ padding: contentPadding })}
-      reserveScrollbarGutter
-      {...props}
-    />
-  );
-}
-
 export function SidebarTitleBar({
   title,
   children,
@@ -169,32 +138,18 @@ export const SidebarFooter = forwardRef<
   );
 });
 
-const sidebarHeaderVariants = cva("select-none", {
-  variants: {
-    variant: {
-      default: "sticky top-0 z-20 h-sidebar-header py-1 backdrop-blur-sm",
-      "hover-actions":
-        "pointer-events-none absolute top-0 right-0 z-30 h-sidebar-header w-fit max-w-full justify-end py-1 opacity-0 backdrop-blur-sm transition-opacity duration-fast ease-smooth group-hover/sidebar-panel:pointer-events-auto group-hover/sidebar-panel:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-});
-
 export function SidebarHeader({
   children,
   className,
-  variant = "default",
   ...props
-}: ComponentProps<"div"> &
-  VariantProps<typeof sidebarHeaderVariants> & {
-    children: ReactNode;
-  }) {
+}: ComponentProps<"div"> & { children: ReactNode }) {
   return (
     <ChromeBar
       region="sidebar"
-      className={cn(sidebarHeaderVariants({ variant }), className)}
+      className={cn(
+        "sticky top-0 z-20 h-sidebar-header select-none py-1 backdrop-blur-sm",
+        className,
+      )}
       {...props}
     >
       {children}