feat: homarr autohide top panel

[CrooLyyCheck]

⚠️WARNING: I provide javascript below, don't run any script u don't understand⚠️

Hi, im still surprised after little research on this repo, nobody ask for auto hide feature to top panel/header.
I made with perplexity AI script to do that feature (i can't even write by myself hello world in javascript :D). If that feature will not be implemented, well u can use this script below.

How to do it with tampermonkey extension:

1. Obviously download extension (chromium based broweser, i don't check it on another)
2. Turn on developer mode for extensions and allow your browser to execute scripts. Instruction here: https://www.tampermonkey.net/faq.php?locale=en#Q209
3. Put script provided below into tampermonkey (click on extension > dashboard > "+" icon)
4. In script need to change only 6th line to your homarr instance URL for autodetection to run only in this url (// @match https://homarr.example.com/*)

// ==UserScript==
// @name        Homarr header hover with generic "-dropdown" ID detection
// @namespace   http://tampermonkey.net/
// @version     1.2
// @description Hide header by default, show on hover top zone, header, and any element with id containing "-dropdown". Handles dynamic IDs. English comments.
// @match       https://homarr.example.com/*
// @grant       none
// ==/UserScript==

(function () {
  'use strict';

  // Selectors and constants
  const headerSelector = '.mantine-AppShell-header';
  const headerHideTop = '-80px';
  const hoverZoneHeight = '5vh';
  const allowedPaths = ['/', '/boards'];

  let header = null;
  let hoverZone = null;
  let hideTimeout = null;
  const listeners = [];
  let mutationObserver = null;

  // Utility: Add event listener and keep reference for later removal
  function addListener(element, event, handler) {
    element.addEventListener(event, handler);
    listeners.push({ element, event, handler });
  }

  // Remove all listeners attached by this script
  function removeListeners() {
    listeners.forEach(({ element, event, handler }) => {
      element.removeEventListener(event, handler);
    });
    listeners.length = 0;
  }

  // Cleanup listeners, styles and observer
  function cleanup() {
    removeListeners();
    if (mutationObserver) {
      mutationObserver.disconnect();
      mutationObserver = null;
    }
    if (hideTimeout) {
      clearTimeout(hideTimeout);
      hideTimeout = null;
    }
    if (hoverZone) {
      hoverZone.style.display = 'none';
      hoverZone.style.pointerEvents = 'auto';
    }
    if (header) {
      header.style.position = '';
      header.style.left = '';
      header.style.width = '';
      header.style.top = '';
      header.style.transition = '';
    }
  }

  // Show header immediately and disable pointer events on hover zone to allow interaction with header
  function showHeader() {
    clearTimeout(hideTimeout);
    if (header) header.style.top = '0';
    if (hoverZone) hoverZone.style.pointerEvents = 'none';
  }

  // Hide header after short delay, re-enable pointer events on hover zone
  function hideHeader() {
    clearTimeout(hideTimeout);
    hideTimeout = setTimeout(() => {
      if (header) header.style.top = headerHideTop;
      if (hoverZone) hoverZone.style.pointerEvents = 'auto';
    }, 200);
  }

  // Find all elements with id containing "-dropdown"
  function findDropdownsById() {
    return Array.from(document.querySelectorAll('[id*="-dropdown"]'));
  }

  // Add hover listeners to given elements
  function addHoverListenersToElements(elements) {
    elements.forEach((el) => {
      addListener(el, 'mouseenter', showHeader);
      addListener(el, 'mouseleave', hideHeader);
    });
  }

  // Setup hover zone, header, and appropriate dropdown listeners
  function setupHeaderAndListeners() {
    if (!header) return;
    // Style header for fixed positioning and hide animation
    Object.assign(header.style, {
      position: 'fixed',
      left: '0',
      width: '100vw',
      top: headerHideTop,
      transition: 'top 0.4s ease'
    });
    // Create hover zone if not exists
    if (!hoverZone) {
      hoverZone = document.createElement('div');
      Object.assign(hoverZone.style, {
        position: 'fixed',
        top: '0',
        left: '0',
        width: '100vw',
        height: hoverZoneHeight,
        zIndex: '1099',
        background: 'transparent',
        pointerEvents: 'auto'
      });
      document.body.appendChild(hoverZone);
    } else {
      hoverZone.style.display = 'block';
    }
    removeListeners();
    addListener(hoverZone, 'mouseenter', showHeader);
    addListener(hoverZone, 'mouseleave', hideHeader);
    addListener(header, 'mouseenter', showHeader);
    addListener(header, 'mouseleave', hideHeader);
    addHoverListenersToElements(findDropdownsById());
  }

  // MutationObserver callback to attach listeners to newly added dropdowns
  function onDomMutated() {
    if (!header) return;
    // Only remove/add dropdown listeners to avoid flicker on hoverZone/header
    const dropdowns = findDropdownsById();
    // Remove previous dropdown listeners
    listeners.filter(l => l.element !== hoverZone && l.element !== header).forEach(({ element, event, handler }) => {
      element.removeEventListener(event, handler);
    });
    // Remove dropdown entries from listener list
    for (let i = listeners.length - 1; i >= 0; i--) {
      if (listeners[i].element !== hoverZone && listeners[i].element !== header) listeners.splice(i, 1);
    }
    // Add new
    addHoverListenersToElements(dropdowns);
  }

  // Setup MutationObserver to watch for new dropdown elements dynamically added/removed
  function setupMutationObserver() {
    if (mutationObserver) mutationObserver.disconnect();
    mutationObserver = new MutationObserver(onDomMutated);
    mutationObserver.observe(document.body, { childList: true, subtree: true });
  }

  // Initialization function runs once and on SPA navigation
  function init() {
    // Check if on relevant page
    const path = window.location.pathname || '/';
    const onAllowedPath = allowedPaths.includes(path) || path.startsWith('/boards/');
    if (!onAllowedPath || path.includes('settings')) return cleanup();
    header = document.querySelector(headerSelector);
    if (!header) {
      // Wait until header is in DOM
      const headerObserver = new MutationObserver((mutations, obs) => {
        header = document.querySelector(headerSelector);
        if (header) {
          obs.disconnect();
          setupHeaderAndListeners();
          setupMutationObserver();
        }
      });
      headerObserver.observe(document.body, { childList: true, subtree: true });
    } else {
      setupHeaderAndListeners();
      setupMutationObserver();
    }
  }

  // Intercept history pushState and replaceState to detect SPA navigation
  (function () {
    ['pushState', 'replaceState'].forEach((name) => {
      const original = history[name];
      history[name] = function (...args) {
        const result = original.apply(this, args);
        window.dispatchEvent(new Event('urlchange'));
        return result;
      };
    });
  })();

  // Listen for URL changes to reinitialize
  window.addEventListener('urlchange', () => {
    cleanup();
    init();
  });
  window.addEventListener('popstate', () => {
    cleanup();
    init();
  });

  // Initial setup
  init();
})();

/*
--- Explanation ---
- Header is hidden by moving top to -80px, shown by resetting top to 0.
- An invisible hover zone at the top of the page triggers showing the header on mouse enter.
- Hovering the header also shows it.
- All elements whose IDs contain the substring "-dropdown" get hover event listeners to show/hide the header.
- A MutationObserver watches for DOM changes to detect dynamically added/removed dropdown elements and update listeners.
- SPA navigation is handled by intercepting history API methods and resetting listeners.
- All logic uses class and id-based detection that tolerates dynamic IDs but consistent "-dropdown" substring presence.
*/