fix: restore explorer scrolling (#186)

src/renderer/src/components/right-sidebar/FileExplorer.tsx

@@ -5,6 +5,7 @@ import { useAppStore } from '@/store'
 import { detectLanguage } from '@/lib/language-detect'
 import { joinPath, normalizeRelativePath } from '@/lib/path'
 import { cn } from '@/lib/utils'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import type { GitFileStatus } from '../../../../shared/types'
 import { splitPathSegments } from './path-tree'
 import {
@@ -268,9 +269,10 @@ export default function FileExplorer(): React.JSX.Element {
   }
 
   return (
-    <div
-      ref={scrollRef}
-      className="h-full min-h-0 overflow-auto scrollbar-sleek py-2"
+    <ScrollArea
+      className="h-full min-h-0"
+      viewportRef={scrollRef}
+      viewportClassName="h-full min-h-0 py-2"
       onWheelCapture={handleWheelCapture}
     >
       <div className="relative w-full" style={{ height: `${virtualizer.getTotalSize()}px` }}>
@@ -354,6 +356,6 @@ export default function FileExplorer(): React.JSX.Element {
           )
         })}
       </div>
-    </div>
+    </ScrollArea>
   )
 }

src/renderer/src/components/ui/scroll-area.tsx

@@ -5,9 +5,14 @@ import { cn } from '@/lib/utils'
 
 function ScrollArea({
   className,
+  viewportClassName,
+  viewportRef,
   children,
   ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+  viewportClassName?: string
+  viewportRef?: React.Ref<HTMLDivElement>
+}) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
@@ -15,8 +20,12 @@ function ScrollArea({
       {...props}
     >
       <ScrollAreaPrimitive.Viewport
+        ref={viewportRef}
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+        className={cn(
+          'size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1',
+          viewportClassName
+        )}
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -36,16 +45,16 @@ function ScrollBar({
       data-slot="scroll-area-scrollbar"
       orientation={orientation}
       className={cn(
-        'flex touch-none p-px transition-colors select-none',
-        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
-        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+        'flex touch-none p-px transition-colors select-none bg-transparent',
+        orientation === 'vertical' && 'h-full w-3 py-2 border-l border-l-transparent',
+        orientation === 'horizontal' && 'h-3 px-2 flex-col border-t border-t-transparent',
         className
       )}
       {...props}
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot="scroll-area-thumb"
-        className="relative flex-1 rounded-full bg-border"
+        className="relative flex-1 rounded-full bg-muted-foreground/40 hover:bg-muted-foreground/60"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   )