From 771f9a46cdb1bed36e16de2a89713743daa34149 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 5 Feb 2025 18:13:39 -0600
Subject: [PATCH] Add fade to /grid sidebar scroll

---
 .../primitives/TooltipPrimitive.tsx           |  5 +-
 src/photo/PhotoGridPage.tsx                   | 49 +++++++++++++------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/components/primitives/TooltipPrimitive.tsx b/src/components/primitives/TooltipPrimitive.tsx
index 3b89fbcf..1cfa9e2f 100644
--- a/src/components/primitives/TooltipPrimitive.tsx
+++ b/src/components/primitives/TooltipPrimitive.tsx
@@ -27,10 +27,7 @@ export default function TooltipPrimitive({
 
   useClickInsideOutside({
     htmlElements: [refTrigger, refContent],
-    onClickOutside: () => {
-      console.log('onClickOutside');
-      setIsOpen(false);
-    },
+    onClickOutside: () => setIsOpen(false),
   });
 
   return (
diff --git a/src/photo/PhotoGridPage.tsx b/src/photo/PhotoGridPage.tsx
index 389d9322..036d405b 100644
--- a/src/photo/PhotoGridPage.tsx
+++ b/src/photo/PhotoGridPage.tsx
@@ -17,7 +17,7 @@ export default function PhotoGridPage({
   tags,
   cameras,
   simulations,
-}:{
+}: {
   photos: Photo[]
   photosCount: number
   tags: Tags
@@ -25,30 +25,51 @@ export default function PhotoGridPage({
   simulations: FilmSimulations
 }) {
   const { setSelectedPhotoIds } = useAppState();
-  
+
   useEffect(
     () => () => setSelectedPhotoIds?.(undefined),
     [setSelectedPhotoIds],
   );
 
+  const renderGuard = (side: 'top' | 'bottom') =>
+    <div
+      className={clsx(
+        'absolute left-0 right-0',
+        side === 'top'
+          ? 'top-0 bg-gradient-to-b from-white dark:from-black'
+          : 'bottom-0 bg-gradient-to-t from-white dark:from-black',
+        'h-6 z-10 pointer-events-none',
+      )}
+    />;
+
   return (
     <PhotoGridContainer
       cacheKey={`page-${PATH_GRID_INFERRED}`}
       photos={photos}
       count={photosCount}
       sidebar={
-        <div className={clsx(
-          'sticky top-0 -mt-5',
-          'max-h-screen overflow-y-auto py-4',
-          '[scrollbar-width:none]',
-        )}>
-          <PhotoGridSidebar {...{
-            tags,
-            cameras,
-            simulations,
-            photosCount,
-          }} />
-        </div>}
+        <div
+          className={clsx(
+            'sticky top-0 -mb-5 -mt-5',
+            'max-h-screen h-full',
+          )}
+        >
+          {renderGuard('top')}
+          <div className={clsx(
+            'max-h-full overflow-y-auto [scrollbar-width:none]',
+            'py-4',
+          )}>
+            <PhotoGridSidebar {...{
+              tags,
+              cameras,
+              simulations,
+              photosCount,
+            }}
+            />
+          </div>
+          {renderGuard('bottom')}
+        </div>
+      }
       canSelect
     />
   );