style(ui): improve shadcn primitives and add shared components (#10153)

ui/hooks/index.ts

@@ -3,6 +3,7 @@ export * from "./use-credentials-form";
 export * from "./use-form-server-errors";
 export * from "./use-local-storage";
 export * from "./use-related-filters";
+export * from "./use-scroll-hint";
 export * from "./use-sidebar";
 export * from "./use-store";
 export * from "./use-url-filters";

ui/hooks/use-scroll-hint.ts

@@ -0,0 +1,63 @@
+"use client";
+
+import { UIEvent, useEffect, useRef, useState } from "react";
+
+interface UseScrollHintOptions {
+  enabled?: boolean;
+  refreshToken?: string | number;
+}
+
+const SCROLL_THRESHOLD_PX = 4;
+
+function shouldShowScrollHint(element: HTMLDivElement) {
+  const hasOverflow =
+    element.scrollHeight - element.clientHeight > SCROLL_THRESHOLD_PX;
+  const isAtBottom =
+    element.scrollTop + element.clientHeight >=
+    element.scrollHeight - SCROLL_THRESHOLD_PX;
+
+  return hasOverflow && !isAtBottom;
+}
+
+export function useScrollHint({
+  enabled = true,
+  refreshToken,
+}: UseScrollHintOptions = {}) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [showScrollHint, setShowScrollHint] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      setShowScrollHint(false);
+      return;
+    }
+
+    const element = containerRef.current;
+    if (!element) return;
+
+    const recalculate = () => {
+      const el = containerRef.current;
+      if (!el) return;
+      setShowScrollHint(shouldShowScrollHint(el));
+    };
+
+    const observer = new ResizeObserver(recalculate);
+    observer.observe(element);
+
+    recalculate();
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [enabled, refreshToken]);
+
+  const handleScroll = (event: UIEvent<HTMLDivElement>) => {
+    setShowScrollHint(shouldShowScrollHint(event.currentTarget));
+  };
+
+  return {
+    containerRef,
+    showScrollHint,
+    handleScroll,
+  };
+}