From e849d95a776bc3e8b14daadeb6828f9a40358bc0 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 11 Mar 2025 14:02:29 -0600
Subject: [PATCH] scrolling variant

---
 .../ui/layouts/AppPageLayout.stories.tsx      |  2 ++
 .../components/ui/layouts/AppPageLayout.tsx   |  9 +++++-
 .../ui/layouts/AppPageLayoutHeader.tsx        |  2 +-
 web/src/styles/buster.scss                    | 28 +++++++++++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ui/layouts/AppPageLayout.stories.tsx b/web/src/components/ui/layouts/AppPageLayout.stories.tsx
index 315023ee0..15cf35672 100644
--- a/web/src/components/ui/layouts/AppPageLayout.stories.tsx
+++ b/web/src/components/ui/layouts/AppPageLayout.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { AppPageLayout } from './AppPageLayout';
+import React from 'react';
 
 const meta: Meta<typeof AppPageLayout> = {
   title: 'UI/Layouts/AppPageLayout',
@@ -53,6 +54,7 @@ export const LongContent: Story = {
   args: {
     header: <div className="bg-gray-100">Header Content</div>,
     scrollable: true,
+    headerBorderVariant: 'ghost',
     children: (
       <>
         {Array.from({ length: 100 }, (_, i) => (
diff --git a/web/src/components/ui/layouts/AppPageLayout.tsx b/web/src/components/ui/layouts/AppPageLayout.tsx
index 3e89c3354..d3abaff71 100644
--- a/web/src/components/ui/layouts/AppPageLayout.tsx
+++ b/web/src/components/ui/layouts/AppPageLayout.tsx
@@ -39,7 +39,14 @@ export const AppPageLayout: React.FC<
           {header}
         </AppPageLayoutHeader>
       )}
-      <AppPageLayoutContent scrollable={scrollable}>{children}</AppPageLayoutContent>
+
+      <AppPageLayoutContent className="scroll-shadow-container" scrollable={scrollable}>
+        {header && scrollable && headerBorderVariant === 'ghost' && (
+          <div className="scroll-header"></div>
+        )}
+
+        {children}
+      </AppPageLayoutContent>
     </div>
   );
 };
diff --git a/web/src/components/ui/layouts/AppPageLayoutHeader.tsx b/web/src/components/ui/layouts/AppPageLayoutHeader.tsx
index 5b58eaa18..eb8a88e3d 100644
--- a/web/src/components/ui/layouts/AppPageLayoutHeader.tsx
+++ b/web/src/components/ui/layouts/AppPageLayoutHeader.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const headerVariants = cva(
-  'bg-page-background flex max-h-[38px] min-h-[38px] items-center justify-between gap-x-2.5 ',
+  'bg-page-background flex max-h-[38px] min-h-[38px] items-center justify-between gap-x-2.5 relative z-10',
   {
     variants: {
       sizeVariant: {
diff --git a/web/src/styles/buster.scss b/web/src/styles/buster.scss
index f7f28847c..cfa941976 100644
--- a/web/src/styles/buster.scss
+++ b/web/src/styles/buster.scss
@@ -5,3 +5,31 @@
     display: none;
   }
 }
+
+// This approach has very limited browser support
+:root {
+  --globalScrollTimeline: none; // Define the timeline globally
+}
+
+.scroll-shadow-container {
+  position: relative;
+  scroll-timeline-name: --globalScrollTimeline;
+  @apply relative;
+
+  .scroll-header {
+    @apply fixed top-[30px] right-0 left-0 h-2 w-full;
+    animation: shadowAnimation linear;
+    animation-range: 0px 125px;
+    animation-timeline: --globalScrollTimeline;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes shadowAnimation {
+    from {
+      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    }
+    to {
+      box-shadow: 0px 1px 8px 0px #00000029;
+    }
+  }
+}