feat(frontend): editor area scroll shadow styling

4 files changed, 179 insertions, 14 deletions

diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index 7c5ac5fb..174b1205 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -1,7 +1,9 @@
+import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
+import EditorAreaDecorations from './EditorAreaDecorations';
 import type EditorStore from './EditorStore';
 import EditorTheme from './EditorTheme';
 
@@ -13,23 +15,40 @@ export default observer(function EditorArea({
   const {
     palette: { mode: paletteMode },
   } = useTheme();
+  const [parent, setParent] = useState<HTMLElement | undefined>();
+  const [scroller, setScroller] = useState<HTMLElement | undefined>();
 
   useEffect(
     () => editorStore.setDarkMode(paletteMode === 'dark'),
     [editorStore, paletteMode],
   );
 
+  const parentRef = useCallback(
+    (value: HTMLElement | null) => setParent(value ?? undefined),
+    [],
+  );
+
   const editorParentRef = useCallback(
     (editorParent: HTMLDivElement | null) => {
       editorStore.setEditorParent(editorParent ?? undefined);
+      setScroller(editorStore.view?.scrollDOM);
     },
-    [editorStore],
+    [editorStore, setScroller],
   );
 
   return (
-    <EditorTheme
-      showLineNumbers={editorStore.showLineNumbers}
-      ref={editorParentRef}
-    />
+    <Box
+      ref={parentRef}
+      position="relative"
+      flexGrow={1}
+      flexShrink={1}
+      overflow="auto"
+    >
+      <EditorTheme
+        showLineNumbers={editorStore.showLineNumbers}
+        ref={editorParentRef}
+      />
+      <EditorAreaDecorations parent={parent} scroller={scroller} />
+    </Box>
   );
 });
diff --git a/subprojects/frontend/src/editor/EditorAreaDecorations.tsx b/subprojects/frontend/src/editor/EditorAreaDecorations.tsx
new file mode 100644
index 00000000..f33bf25f
--- /dev/null
+++ b/subprojects/frontend/src/editor/EditorAreaDecorations.tsx
@@ -0,0 +1,149 @@
+import { type CSSObject, type Theme, styled } from '@mui/material/styles';
+import React, { memo, useEffect, useState } from 'react';
+
+const SHADOW_SIZE = 10;
+
+const EditorAreaDecoration = styled('div')({
+  position: 'absolute',
+  pointerEvents: 'none',
+});
+
+function shadowTheme(
+  origin: string,
+  scaleX: boolean,
+  scaleY: boolean,
+): CSSObject {
+  function radialGradient(opacity: number, scale: string): string {
+    return `radial-gradient(
+        farthest-side at ${origin},
+        rgba(0, 0, 0, ${opacity}),
+        rgba(0, 0, 0, 0)
+      )
+      ${origin} /
+      ${scaleX ? scale : '100%'}
+      ${scaleY ? scale : '100%'}
+      no-repeat`;
+  }
+
+  return {
+    background: `
+      ${radialGradient(0.2, '40%')},
+      ${radialGradient(0.14, '50%')},
+      ${radialGradient(0.12, '100%')}
+    `,
+  };
+}
+
+function animateSize(
+  theme: Theme,
+  direction: 'height' | 'width',
+  opacity: number,
+): CSSObject {
+  return {
+    [direction]: opacity * SHADOW_SIZE,
+    transition: theme.transitions.create(direction, {
+      duration: theme.transitions.duration.shortest,
+      easing: theme.transitions.easing.sharp,
+    }),
+  };
+}
+
+const TopDecoration = memo(
+  styled(EditorAreaDecoration, {
+    shouldForwardProp: (prop) => prop !== 'visible' && prop !== 'opacity',
+  })<{
+    visible: boolean;
+    opacity: number;
+  }>(({ theme, visible, opacity }) => ({
+    display: visible ? 'block' : 'none',
+    top: 0,
+    left: 0,
+    right: 0,
+    ...shadowTheme('50% 0', false, true),
+    ...animateSize(theme, 'height', opacity),
+  })),
+);
+
+const GutterDecoration = memo(
+  styled(EditorAreaDecoration, {
+    shouldForwardProp: (prop) =>
+      prop !== 'top' &&
+      prop !== 'bottom' &&
+      prop !== 'guttersWidth' &&
+      prop !== 'opacity',
+  })<{
+    top: number;
+    bottom: number;
+    guttersWidth: number;
+    opacity: number;
+  }>(({ theme, top, bottom, guttersWidth, opacity }) => ({
+    top,
+    left: guttersWidth,
+    bottom,
+    ...shadowTheme('0 50%', true, false),
+    ...animateSize(theme, 'width', opacity),
+  })),
+);
+
+function convertToOpacity(scroll: number): number {
+  return Math.max(0, Math.min(1, scroll / SHADOW_SIZE));
+}
+
+export default function EditorAreaDecorations({
+  parent,
+  scroller,
+}: {
+  parent: HTMLElement | undefined;
+  scroller: HTMLElement | undefined;
+}): JSX.Element {
+  const [top, setTop] = useState(0);
+  const [bottom, setBottom] = useState(0);
+  const [guttersWidth, setGuttersWidth] = useState(0);
+  const [topOpacity, setTopOpacity] = useState(0);
+  const [gutterOpacity, setGutterOpacity] = useState(0);
+
+  useEffect(() => {
+    if (parent === undefined || scroller === undefined) {
+      return () => {};
+    }
+    const gutters = scroller.querySelector('.cm-gutters');
+
+    const updateBounds = () => {
+      const parentRect = parent.getBoundingClientRect();
+      const rect = scroller.getBoundingClientRect();
+      setTop(rect.top - parentRect.top);
+      setBottom(parentRect.bottom - rect.bottom);
+      setGuttersWidth(gutters?.clientWidth ?? 0);
+    };
+    updateBounds();
+    const resizeObserver = new ResizeObserver(updateBounds);
+    resizeObserver.observe(scroller);
+    if (gutters !== null) {
+      resizeObserver.observe(gutters);
+    }
+
+    const updateScroll = () => {
+      setTopOpacity(convertToOpacity(scroller.scrollTop));
+      setGutterOpacity(convertToOpacity(scroller.scrollLeft));
+    };
+    updateScroll();
+    scroller.addEventListener('scroll', updateScroll);
+
+    return () => {
+      resizeObserver.disconnect();
+      scroller.removeEventListener('scroll', updateScroll);
+    };
+  }, [parent, scroller, setTop]);
+
+  return (
+    <>
+      <GutterDecoration
+        top={top}
+        bottom={bottom}
+        guttersWidth={guttersWidth}
+        opacity={gutterOpacity}
+      />
+      <TopDecoration visible={top === 0} opacity={topOpacity} />
+    </>
+  );
+}
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index e433e714..bcd324e5 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -43,7 +43,7 @@ export default observer(function EditorPane(): JSX.Element {
         <EditorButtons editorStore={editorStore} />
         {showGenerateButton && <GenerateButton editorStore={editorStore} />}
       </Toolbar>
-      <Box flexGrow={1} flexShrink={1} overflow="auto">
+      <Box display="flex" flexGrow={1} flexShrink={1} overflow="auto">
         {editorStore === undefined ? (
           <EditorLoading />
         ) : (
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index dfeeb547..db051d0e 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -31,12 +31,7 @@ export default styled('div', {
       color: theme.palette.text.secondary,
     },
     '.cm-gutters': {
-      background: `linear-gradient(
-        to right,
-        ${theme.palette.background.default} 0%,
-        ${theme.palette.background.default} calc(100% - 12px),
-        transparent 100%
-      )`,
+      background: theme.palette.background.default,
       border: 'none',
     },
     '.cm-content': {
@@ -170,7 +165,9 @@ export default styled('div', {
     '.cm-panels-top': {
       color: theme.palette.text.primary,
       borderBottom: `1px solid ${theme.palette.outer.border}`,
-      marginBottom: theme.spacing(1),
+    },
+    '.cm-panels-top + div + .cm-scroller': {
+      paddingTop: theme.spacing(0.5),
     },
     '.cm-panel': {
       color: theme.palette.text.primary,