chore: uptick

apps/desktop/src/hooks/use-media-query.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+
+export const matchesQuery = (query: string) =>
+  typeof window !== 'undefined' && !!window.matchMedia && window.matchMedia(query).matches
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => matchesQuery(query))
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+      return
+    }
+
+    const mql = window.matchMedia(query)
+    const onChange = () => setMatches(mql.matches)
+
+    setMatches(mql.matches)
+    mql.addEventListener('change', onChange)
+
+    return () => mql.removeEventListener('change', onChange)
+  }, [query])
+
+  return matches
+}

apps/desktop/src/hooks/use-mobile.ts

@@ -1,24 +1,3 @@
-import * as React from 'react'
+import { useMediaQuery } from './use-media-query'
 
-const MOBILE_BREAKPOINT = 768
-const MOBILE_BREAKPOINT_REM = MOBILE_BREAKPOINT / 16
-const ONE_PIXEL_IN_REM = 1 / 16
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT_REM - ONE_PIXEL_IN_REM}rem)`)
-
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-
-    mql.addEventListener('change', onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-
-    return () => mql.removeEventListener('change', onChange)
-  }, [])
-
-  return !!isMobile
-}
+export const useIsMobile = () => useMediaQuery(`(max-width: ${768 / 16 - 1 / 16}rem)`)