HeaderSize as shared component

packages/ui/src/hooks/useDebouncedState.ts

@@ -0,0 +1,12 @@
+import { debounce } from '@yaakapp-internal/lib';
+import type { Dispatch, SetStateAction } from 'react';
+import { useMemo, useState } from 'react';
+
+export function useDebouncedState<T>(
+  defaultValue: T,
+  delay = 500,
+): [T, Dispatch<SetStateAction<T>>, Dispatch<SetStateAction<T>>] {
+  const [state, setState] = useState<T>(defaultValue);
+  const debouncedSetState = useMemo(() => debounce(setState, delay), [delay]);
+  return [state, debouncedSetState, setState];
+}

packages/ui/src/hooks/useDebouncedValue.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+import { useDebouncedState } from './useDebouncedState';
+
+export function useDebouncedValue<T>(value: T, delay = 500) {
+  const [state, setState] = useDebouncedState<T>(value, delay);
+  useEffect(() => setState(value), [setState, value]);
+  return state;
+}

packages/ui/src/hooks/useIsFullscreen.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
+import { useWindowSize } from 'react-use';
+import { useDebouncedValue } from './useDebouncedValue';
+
+export function useIsFullscreen() {
+  const windowSize = useWindowSize();
+  const debouncedWindowWidth = useDebouncedValue(windowSize.width);
+
+  // NOTE: Fullscreen state isn't updated right after resize event on Mac (needs to wait for animation) so
+  // we'll wait for a bit using the debounced window size. Hopefully Tauri eventually adds a way to listen
+  // for fullscreen change events.
+
+  return (
+    useQuery({
+      queryKey: ['is_fullscreen', debouncedWindowWidth],
+      queryFn: async () => {
+        return getCurrentWebviewWindow().isFullscreen();
+      },
+    }).data ?? false
+  );
+}