Extract sticky mode logic into a custom hook and implement a hide animation on scroll down

- should show sticky mode only on scroll-up because currently it obscures the view as user scrolls down.
- the sticky mode hides abruptly when scrolling down, should use the same animation but in reverse
- move the sticky mode handling to a separate hook
- simplify the sticky mode as possible while preserving the behavior

Author: robertpiosik

apps/editor/src/views/panel/frontend/Home/Home.module.scss

@@ -88,13 +88,18 @@
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
       position: sticky;
       top: 10px;
-      animation: stickyFadeIn var(--transition-duration-150)
+      animation: stickyFadeIn var(--transition-duration-250)
         var(--transition-timing-function);
 
       &::after {
         height: 20px;
       }
     }
+
+    &--hiding {
+      animation: stickyFadeOut var(--transition-duration-250)
+        var(--transition-timing-function) forwards;
+    }
   }
 
   &__empty {
@@ -151,14 +156,25 @@
 @keyframes stickyFadeIn {
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(-15px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
 
+@keyframes stickyFadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+}
+
 .add-button {
   appearance: none;
   background: none;

apps/editor/src/views/panel/frontend/Home/Home.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import styles from './Home.module.scss'
 import { Scrollable as UiScrollable } from '@ui/components/editor/panel/Scrollable'
 import { Checkpoints as UiCheckpoints } from '@ui/components/editor/panel/Checkpoints'
@@ -15,6 +15,7 @@ import { IconButton as UiIconButton } from '@ui/components/editor/common/IconBut
 import { Tasks as UiTasks } from '@ui/components/editor/panel/Tasks'
 import { Task } from '@shared/types/task'
 import { use_tasks } from './hooks/use-tasks'
+import { use_sticky_mode } from './hooks/use-sticky-mode'
 import { SettingsButton as UiSettingsButton } from '@ui/components/editor/panel/SettingsButton'
 
 type Props = {
@@ -46,11 +47,8 @@ type Props = {
 
 export const Home: React.FC<Props> = (props) => {
   const { t } = use_translation()
-  const [is_mode_sticky, set_is_mode_sticky] = useState(false)
   const [active_tab, set_active_tab] = useState<'tasks' | 'checkpoints'>('tasks')
-  const full_mode_height_ref = useRef<number>(0)
-  const responses_ref = useRef<HTMLDivElement>(null)
-  const mode_ref = useRef<HTMLDivElement>(null)
+  const { is_mode_sticky, is_hiding, responses_ref, mode_ref, handle_scroll } = use_sticky_mode()
 
   useEffect(() => {
     const handle_mouse_up = (event: MouseEvent) => {
@@ -106,22 +104,7 @@ export const Home: React.FC<Props> = (props) => {
         />
       </div>
 
-      <UiScrollable
-        on_scroll={(top) => {
-          const responses_height = responses_ref.current?.clientHeight || 0
-          const current_mode_height = mode_ref.current?.offsetHeight || 0
-
-          if (!is_mode_sticky && current_mode_height > 0) {
-            full_mode_height_ref.current = current_mode_height
-          }
-
-          const height_to_use = is_mode_sticky
-            ? full_mode_height_ref.current
-            : current_mode_height
-
-          set_is_mode_sticky(top > responses_height + height_to_use + 4)
-        }}
-      >
+      <UiScrollable on_scroll={handle_scroll}>
         <div
           className={cn(styles.content, {
             [styles['content--sticky']]: is_mode_sticky
@@ -150,7 +133,8 @@ export const Home: React.FC<Props> = (props) => {
 
             <div
               className={cn(styles.inner__mode, {
-                [styles['inner__mode--sticky']]: is_mode_sticky
+                [styles['inner__mode--sticky']]: is_mode_sticky,
+                [styles['inner__mode--hiding']]: is_hiding
               })}
               ref={mode_ref}
             >

apps/editor/src/views/panel/frontend/Home/hooks/use-sticky-mode.ts

@@ -0,0 +1,61 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+
+export const use_sticky_mode = () => {
+  const [state, set_state] = useState<'normal' | 'sticky' | 'hiding'>('normal')
+  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const normal_height = useRef(0)
+  const responses_ref = useRef<HTMLDivElement>(null)
+  const mode_ref = useRef<HTMLDivElement>(null)
+  const prev_top = useRef(0)
+
+  const is_mode_sticky = state !== 'normal'
+
+  useEffect(() => {
+    return () => { if (timeout.current) clearTimeout(timeout.current) }
+  }, [])
+
+  const handle_scroll = useCallback(
+    (top: number) => {
+      const r_height = responses_ref.current?.clientHeight || 0
+      const m_height = mode_ref.current?.offsetHeight || 0
+
+      if (!is_mode_sticky && m_height > 0) {
+        normal_height.current = m_height
+      }
+
+      const height_to_use = is_mode_sticky ? normal_height.current : m_height
+      const is_past = top > r_height + height_to_use + 4
+
+      const is_up = top < prev_top.current
+      const is_down = top > prev_top.current
+      prev_top.current = top
+
+      set_state((prev) => {
+        if (!is_past) {
+          if (timeout.current) clearTimeout(timeout.current)
+          return 'normal'
+        }
+        if (is_up && prev !== 'sticky') {
+          if (timeout.current) clearTimeout(timeout.current)
+          return 'sticky'
+        }
+        if (is_down && prev === 'sticky') {
+          timeout.current = setTimeout(() => {
+            set_state((s) => (s === 'hiding' ? 'normal' : s))
+          }, 250)
+          return 'hiding'
+        }
+        return prev
+      })
+    },
+    [is_mode_sticky]
+  )
+
+  return {
+    is_mode_sticky,
+    is_hiding: state === 'hiding',
+    responses_ref,
+    mode_ref,
+    handle_scroll
+  }
+}