feat(app): v2 review panel overhaul (#31882)

Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>

packages/ui/src/components/collapsible.css

@@ -127,6 +127,12 @@
       height: 24px;
     }
   }
+
+  &[data-variant="ghost"][data-scope="file-tree-v2"] {
+    > [data-slot="collapsible-trigger"] {
+      height: 28px;
+    }
+  }
 }
 
 @keyframes slideDown {

packages/ui/src/components/scroll-view.tsx

@@ -1,11 +1,14 @@
-import { onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
+import { onCleanup, onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createStore } from "solid-js/store"
 import { useI18n } from "../context/i18n"
 
+export type ScrollViewThumbVisibility = "hover" | "scroll"
+
 export interface ScrollViewProps extends ComponentProps<"div"> {
   viewportRef?: (el: HTMLDivElement) => void
   orientation?: "vertical" | "horizontal" // currently only vertical is fully implemented for thumb
+  thumbVisibility?: ScrollViewThumbVisibility
 }
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
@@ -72,10 +75,10 @@ export function scrollTopFromThumbPointer(input: {
 
 export function ScrollView(props: ScrollViewProps) {
   const i18n = useI18n()
-  const merged = mergeProps({ orientation: "vertical" }, props)
+  const merged = mergeProps({ orientation: "vertical", thumbVisibility: "hover" }, props)
   const [local, events, rest] = splitProps(
     merged,
-    ["class", "children", "viewportRef", "orientation", "style"],
+    ["class", "children", "viewportRef", "orientation", "thumbVisibility", "style"],
     [
       "onScroll",
       "onWheel",
@@ -96,16 +99,37 @@ export function ScrollView(props: ScrollViewProps) {
   const [state, setState] = createStore({
     isHovered: false,
     isDragging: false,
+    isScrolling: false,
     thumbHeight: 0,
     thumbTop: 0,
     showThumb: false,
   })
   const isHovered = () => state.isHovered
   const isDragging = () => state.isDragging
+  const isScrolling = () => state.isScrolling
   const thumbHeight = () => state.thumbHeight
   const thumbTop = () => state.thumbTop
   const showThumb = () => state.showThumb
 
+  let scrollIdleTimer: ReturnType<typeof setTimeout> | undefined
+
+  const markScrolling = () => {
+    if (local.thumbVisibility !== "scroll") return
+    setState("isScrolling", true)
+    if (scrollIdleTimer !== undefined) clearTimeout(scrollIdleTimer)
+    scrollIdleTimer = setTimeout(() => setState("isScrolling", false), 800)
+  }
+
+  const thumbVisible = () => {
+    if (isDragging()) return true
+    if (local.thumbVisibility === "scroll") return isScrolling()
+    return isHovered()
+  }
+
+  onCleanup(() => {
+    if (scrollIdleTimer !== undefined) clearTimeout(scrollIdleTimer)
+  })
+
   const updateThumb = () => {
     if (!viewportRef) return
     const { scrollTop, scrollHeight, clientHeight } = viewportRef
@@ -240,9 +264,15 @@ export function ScrollView(props: ScrollViewProps) {
         data-scrollable
         onScroll={(e) => {
           updateThumb()
+          markScrolling()
           if (typeof events.onScroll === "function") events.onScroll(e as any)
         }}
-        onWheel={events.onWheel as any}
+        onWheel={(e) => {
+          markScrolling()
+          const handler = events.onWheel
+          if (typeof handler === "function") handler(e as any)
+          if (Array.isArray(handler)) handler[0](handler[1], e as any)
+        }}
         onTouchStart={events.onTouchStart as any}
         onTouchMove={events.onTouchMove as any}
         onTouchEnd={events.onTouchEnd as any}
@@ -266,7 +296,7 @@ export function ScrollView(props: ScrollViewProps) {
           ref={thumbRef}
           onPointerDown={onThumbPointerDown}
           class="scroll-view__thumb"
-          data-visible={isHovered() || isDragging()}
+          data-visible={thumbVisible()}
           data-dragging={isDragging()}
           style={{
             height: `${thumbHeight()}px`,