From 5abf62bfcf18cd236ced5cea395af9b18cfd3535 Mon Sep 17 00:00:00 2001
From: Maciej Bodek <maciej.bodek@gmail.com>
Date: Thu, 12 Oct 2023 09:36:51 +0200
Subject: [PATCH] Panel shadow on scroll

---
 .../web-console/src/components/Panel/header.tsx | 12 ++++++++++--
 .../web-console/src/scenes/Schema/index.tsx     | 17 +++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/web-console/src/components/Panel/header.tsx b/packages/web-console/src/components/Panel/header.tsx
index 6d9d8ce8c..267838139 100644
--- a/packages/web-console/src/components/Panel/header.tsx
+++ b/packages/web-console/src/components/Panel/header.tsx
@@ -28,7 +28,7 @@ import styled from "styled-components"
 import { color } from "../../utils"
 import { Text } from "../../components/Text"
 
-export const Root = styled.div`
+export const Root = styled.div<{ shadow?: boolean }>`
   position: relative;
   display: flex;
   justify-content: space-between;
@@ -38,6 +38,12 @@ export const Root = styled.div`
   background: ${color("backgroundLighter")};
   border-top: 1px solid transparent;
   z-index: 5;
+
+  ${({ shadow }) =>
+    shadow &&
+    `
+      box-shadow: 0 2px 10px 0 rgba(23, 23, 23, 0.65)
+  `}
 `
 
 const Title = styled(Text)`
@@ -51,11 +57,13 @@ const Title = styled(Text)`
 export const Header = ({
   title,
   afterTitle,
+  shadow,
 }: {
   title: React.ReactNode
   afterTitle?: React.ReactNode
+  shadow?: boolean
 }) => (
-  <Root>
+  <Root shadow={shadow}>
     <Title color="foreground">{title}</Title>
     {afterTitle}
   </Root>
diff --git a/packages/web-console/src/scenes/Schema/index.tsx b/packages/web-console/src/scenes/Schema/index.tsx
index aa316c0e5..64f21fa12 100644
--- a/packages/web-console/src/scenes/Schema/index.tsx
+++ b/packages/web-console/src/scenes/Schema/index.tsx
@@ -113,18 +113,13 @@ const Schema = ({
   const { updateSettings } = useLocalStorage()
   const dispatch = useDispatch()
   const { appendQuery } = useEditor()
+  const [scrollAtTop, setScrollAtTop] = useState(false)
+  const scrollerRef = useRef<HTMLDivElement | null>(null)
 
   const handleChange = useCallback((name: string) => {
     setOpened(name)
   }, [])
 
-  const handleScrollingStateChange = useCallback(
-    (isScrolling) => {
-      setIsScrolling(isScrolling)
-    },
-    [setIsScrolling],
-  )
-
   const listItemContent = useCallback(
     (index: number) => {
       if (tables) {
@@ -213,6 +208,10 @@ const Schema = ({
     })
   }, [errorRef, fetchTables])
 
+  useEffect(() => {
+    setScrollAtTop(scrollerRef.current?.scrollTop === 0)
+  }, [isScrolling])
+
   return (
     <Wrapper ref={innerRef} {...rest}>
       <Panel.Header
@@ -236,6 +235,7 @@ const Schema = ({
             )}
           </div>
         }
+        shadow={!scrollAtTop}
       />
       <Content _loading={loading}>
         {loading ? (
@@ -244,9 +244,10 @@ const Schema = ({
           <LoadingError error={loadingError} />
         ) : (
           <VirtualList
-            isScrolling={handleScrollingStateChange}
+            isScrolling={setIsScrolling}
             itemContent={listItemContent}
             totalCount={tables?.length}
+            scrollerRef={(ref) => (scrollerRef.current = ref as HTMLDivElement)}
           />
         )}
         {!loading && <FlexSpacer />}