Zum Inhalt

src/hooks/useViewport.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// src/hooks/useViewport.ts
// Tracks viewport width via matchMedia and pushes the narrow flag into
// uiStore. Also auto-switches density to "compact" on narrow viewports
// (the user can still override afterwards via the settings menu).

import { onCleanup, onMount } from 'solid-js';
import { setDensity, setIsNarrow } from '~/stores/uiStore';

const NARROW_QUERY = '(max-width: 600px)';

export function useViewport(): void {
  onMount(() => {
    if (typeof window === 'undefined' || !window.matchMedia) return;
    const mql = window.matchMedia(NARROW_QUERY);
    const apply = (matches: boolean) => {
      setIsNarrow(matches);
      setDensity(matches ? 'compact' : 'comfortable');
    };
    apply(mql.matches);
    const handler = (e: MediaQueryListEvent) => apply(e.matches);
    mql.addEventListener('change', handler);
    onCleanup(() => mql.removeEventListener('change', handler));
  });
}