Hide top on scroll (#589)

# Motivation

To improve the mobile experience by maximizing screen space, this update
hides the header when the user scrolls down.

Initially, the approach was to hide the header on scroll down and show
it on scroll up. However, this caused glitches due to container resizing
because of SplitPage/padding: 0. Instead, a more reliable solution was
chosen: hiding the header when the scrollable content starts leaving the
visible viewport.

demo:
https://qsgjb-riaaa-aaaaa-aaaga-cai.mstr-ingress.devenv.dfinity.network/

# Changes

- Introduced a new ScrollSentinel component that observes when it leaves
the viewport and updates layoutContentTopHidden.
- The layoutContentTopHidden value is now used to toggle the header’s
visibility (to removed SplitPage top padding and the header when the
value is true)

- Tested on iOS and Android.

# Screenshots


https://github.com/user-attachments/assets/72df4b50-f0b6-4a80-862c-4b6f48fe95fd

### The glitch of the first approach


https://github.com/user-attachments/assets/e3b3c78e-7185-42a9-a92b-a4b40e127b35

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

Author: mstrasinskis

e2e/tooltip.e2e.ts-snapshots/Should-render-tooltip-1-Google-Chrome-linux.png

@@ -7,11 +7,14 @@
   import { onDestroy } from "svelte";
   import ContentBackdrop from "$lib/components/ContentBackdrop.svelte";
   import Header from "$lib/components/Header.svelte";
+  import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
 
   export let back = false;
 
   // Observed: nested component - bottom sheet - might not call destroy when navigating route and therefore offset might not be reseted which is not the case here
   onDestroy(() => ($layoutBottomOffset = 0));
+
+  let scrollContainer: HTMLDivElement;
 </script>
 
 <div
@@ -25,9 +28,13 @@
     <slot name="toolbar-end" slot="toolbar-end" />
   </Header>
 
-  <div class="scrollable-content" class:open={$layoutMenuOpen}>
+  <div
+    class="scrollable-content"
+    class:open={$layoutMenuOpen}
+    bind:this={scrollContainer}
+  >
     <ContentBackdrop />
-
+    <ScrollSentinel {scrollContainer} />
     <slot />
   </div>
 </div>

src/lib/components/Content.svelte

@@ -2,11 +2,12 @@
   import Toolbar from "$lib/components/Toolbar.svelte";
   import MenuButton from "$lib/components/MenuButton.svelte";
   import Back from "$lib/components/Back.svelte";
+  import { layoutContentTopHidden } from "$lib/stores/layout.store";
 
   export let back = false;
 </script>
 
-<header data-tid="header-component">
+<header data-tid="header-component" class:hidden={$layoutContentTopHidden}>
   <Toolbar>
     <svelte:fragment slot="start">
       {#if back}
@@ -27,11 +28,23 @@
 
   header {
     --toolbar-padding: 0;
+    transition: all var(--animation-time-normal) ease-in-out;
+
     @include media.min-width(medium) {
       --toolbar-padding: 0 var(--padding-2x);
     }
     @include media.min-width(large) {
       --toolbar-padding: 0;
     }
+
+    &.hidden {
+      opacity: 0;
+      transform: translateY(-100%);
+      // Reset on tablet+
+      @include media.min-width(medium) {
+        opacity: 1;
+        transform: none;
+      }
+    }
   }
 </style>

src/lib/components/Header.svelte

@@ -2,6 +2,7 @@
   import { onDestroy } from "svelte";
   import { layoutContentScrollY } from "$lib/stores/layout.store";
   import { BREAKPOINT_LARGE } from "$lib/constants/constants";
+  import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
 
   export let testId: string | undefined = undefined;
 
@@ -10,12 +11,15 @@
     layoutContentScrollY.set(innerWidth < BREAKPOINT_LARGE ? "auto" : "hidden");
 
   onDestroy(() => layoutContentScrollY.set("auto"));
+
+  let scrollContainer: HTMLElement;
 </script>
 
 <svelte:window bind:innerWidth />
 
 <div class="island" data-tid={testId}>
-  <div class="scrollable-island">
+  <div class="scrollable-island" bind:this={scrollContainer}>
+    <ScrollSentinel {scrollContainer} />
     <slot />
   </div>
 </div>

src/lib/components/Island.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { layoutContentTopHidden } from "$lib/stores/layout.store";
+  import { onMount } from "svelte";
+
+  // The ScrollSentinel component should be placed right before the content
+  // inside the scrollable container.
+  export let scrollContainer: HTMLElement;
+
+  // To observe when the top leaves the view
+  let element: HTMLElement;
+
+  onMount(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => layoutContentTopHidden.set(!entry.isIntersecting),
+      { root: scrollContainer, threshold: 0 },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  });
+</script>
+
+<div data-tid="sentinel" class="sentinel" bind:this={element}></div>
+
+<style lang="scss">
+  .sentinel {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    visibility: hidden;
+  }
+</style>

src/lib/components/ScrollSentinel.svelte

@@ -7,6 +7,7 @@
   } from "$lib/stores/layout.store";
   import Header from "$lib/components/Header.svelte";
   import ContentBackdrop from "$lib/components/ContentBackdrop.svelte";
+  import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
 
   export let back = false;
   export const resetScrollPosition = () => {
@@ -43,6 +44,7 @@
     <div class="scrollable-content-end" bind:this={scrollableElement}>
       <ContentBackdrop />
 
+      <ScrollSentinel scrollContainer={scrollableElement} />
       <slot name="end" />
     </div>
   </div>

src/lib/components/SplitContent.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { layoutMenuOpen } from "$lib/stores/layout.store";
+  import {
+    layoutContentTopHidden,
+    layoutMenuOpen,
+  } from "$lib/stores/layout.store";
 
   let innerWidth = 0;
 
@@ -18,7 +21,7 @@
 
 <svelte:window bind:innerWidth />
 
-<div class="split-pane">
+<div class="split-pane" class:header-hidden={$layoutContentTopHidden}>
   <slot name="menu" />
   <slot />
 </div>
@@ -42,6 +45,18 @@
       var(--header-offset, 0px) + var(--header-height)
     );
     padding-top: var(--split-pane-content-top-offset);
+    transition: padding-top var(--animation-time-normal) ease;
+
+    &.header-hidden {
+      padding-top: 0;
+      // Reset on tablet+
+      @include media.min-width(medium) {
+        padding-top: var(--split-pane-content-top-offset);
+      }
+      @include media.min-width(large) {
+        padding-top: var(--header-offset, 0);
+      }
+    }
 
     :global(header) {
       position: fixed;

src/lib/components/SplitPane.svelte

@@ -3,3 +3,4 @@ import { writable } from "svelte/store";
 export const layoutBottomOffset = writable<number>(0);
 export const layoutMenuOpen = writable<boolean>(false);
 export const layoutContentScrollY = writable<"hidden" | "auto">("auto");
+export const layoutContentTopHidden = writable<boolean>(false);

src/lib/stores/layout.store.ts

@@ -0,0 +1,53 @@
+import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
+import { layoutContentTopHidden } from "$lib/stores/layout.store";
+import { render } from "@testing-library/svelte";
+import { get } from "svelte/store";
+
+describe("ScrollSentinel", () => {
+  let mockObserverInstance: MockIntersectionObserver;
+
+  class MockIntersectionObserver implements IntersectionObserver {
+    observe: (target: Element) => void = vi.fn();
+    unobserve: (target: Element) => void = vi.fn();
+    disconnect: () => void = vi.fn();
+    takeRecords: () => IntersectionObserverEntry[] = () => [];
+    root: Element | Document | null = null;
+    rootMargin: string = "";
+    thresholds: ReadonlyArray<number> = [];
+
+    constructor(private callback: IntersectionObserverCallback) {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      mockObserverInstance = this;
+    }
+
+    // Simulates IntersectionObserver changes
+    trigger(entries: Partial<IntersectionObserverEntry>[]) {
+      this.callback(entries as IntersectionObserverEntry[], this);
+    }
+  }
+
+  beforeEach(() => {
+    vi.spyOn(global, "IntersectionObserver").mockImplementation(
+      (callback) => new MockIntersectionObserver(callback),
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should render a sentinel element", () => {
+    const { container } = render(ScrollSentinel);
+    expect(container.querySelector("[data-tid='sentinel']")).not.toBeNull();
+  });
+
+  it("should update the store on intersection", () => {
+    expect(get(layoutContentTopHidden)).toBe(false);
+
+    mockObserverInstance.trigger([{ isIntersecting: false }]);
+    expect(get(layoutContentTopHidden)).toBe(true);
+
+    mockObserverInstance.trigger([{ isIntersecting: true }]);
+    expect(get(layoutContentTopHidden)).toBe(false);
+  });
+});