Revert "feat(header): add opt-in auto-hide-on-scroll for the header (#6738)" (#6740)

This reverts commit e58c229664.

apps/nextjs/src/components/layout/header/configurable-header.module.css

@@ -1,16 +1,11 @@
 .header {
   overflow: hidden;
-  transition: transform 220ms ease;
 }
 
 .header[data-visible="false"] {
   display: none;
 }
 
-.header[data-auto-hidden="true"]:not(:focus-within) {
-  transform: translateY(-100%);
-}
-
 .desktopContent {
   width: 100%;
   height: 100%;
@@ -181,7 +176,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .header,
   .floatingControls {
     transition: none;
   }

apps/nextjs/src/components/layout/header/configurable-header.tsx

@@ -7,7 +7,6 @@ import { IconBrandDocker, IconHome, IconReplace, IconRobot, IconSettings, IconSu
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { useOptionalEditMode } from "@homarr/boards/edit-mode";
 import { invariantTechnicalLabels } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
@@ -25,7 +24,6 @@ import { HeaderLogo } from "./header-logo";
 import { LazySpotlight } from "./lazy-spotlight";
 import { DesktopSearchInput, MobileSearchButton } from "./search";
 import { TourTarget } from "./tour-target";
-import { useHeaderAutoHide } from "./use-header-auto-hide";
 import { UserButtonClient } from "./user-client";
 import classes from "./configurable-header.module.css";
 
@@ -71,10 +69,6 @@ export const ConfigurableHeader = ({
     staleTime: 60_000,
   });
   const boardsById = useMemo(() => new Map(boards.map((board) => [board.id, board])), [boards]);
-  const isEditMode = useOptionalEditMode();
-  const isAutoHidden = useHeaderAutoHide(
-    headerPreferences.visible && headerPreferences.autoHideOnScroll && !isEditMode,
-  );
 
   return (
     <BoardSwitcher>
@@ -120,7 +114,6 @@ export const ConfigurableHeader = ({
               zIndex="var(--homarr-z-index-board-header)"
               className={classes.header}
               data-visible={headerPreferences.visible}
-              data-auto-hidden={isAutoHidden || undefined}
               data-advanced-focus-background
               data-app-shell-header
             >

apps/nextjs/src/components/layout/header/use-header-auto-hide.ts

@@ -1,48 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-const SCROLL_HIDE_THRESHOLD = 24;
-const SCROLL_DIRECTION_HYSTERESIS = 6;
-
-export const useHeaderAutoHide = (enabled: boolean) => {
-  const [isHidden, setIsHidden] = useState(false);
-  const lastScrollYRef = useRef(0);
-
-  useEffect(() => {
-    if (!enabled) {
-      setIsHidden(false);
-      return;
-    }
-
-    lastScrollYRef.current = window.scrollY;
-    let frame: number | null = null;
-
-    const handleScroll = () => {
-      if (frame !== null) return;
-      frame = window.requestAnimationFrame(() => {
-        frame = null;
-        const currentY = window.scrollY;
-        const delta = currentY - lastScrollYRef.current;
-
-        if (currentY <= SCROLL_HIDE_THRESHOLD) {
-          setIsHidden(false);
-        } else if (delta > SCROLL_DIRECTION_HYSTERESIS) {
-          setIsHidden(true);
-        } else if (delta < -SCROLL_DIRECTION_HYSTERESIS) {
-          setIsHidden(false);
-        }
-
-        lastScrollYRef.current = currentY;
-      });
-    };
-
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-      if (frame !== null) window.cancelAnimationFrame(frame);
-    };
-  }, [enabled]);
-
-  return enabled && isHidden;
-};