add useMobile

commafeed-client/src/components/ActionButtton.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Button, Tooltip, useMantineTheme } from "@mantine/core"
 import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
 import { ButtonProps } from "@mantine/core/lib/Button/Button"
-import { useMediaQuery } from "@mantine/hooks"
+import { useMobile } from "hooks/useMobile"
 import { forwardRef, MouseEventHandler, ReactNode } from "react"
 
 interface ActionButtonProps {
@@ -20,7 +20,7 @@ interface ActionButtonProps {
 export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
     const theme = useMantineTheme()
     const variant = props.variant ?? "subtle"
-    const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg})`)
+    const mobile = useMobile(theme.breakpoints.lg)
     const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
     return iconOnly ? (
         <Tooltip label={props.label} openDelay={500}>

commafeed-client/src/components/content/FeedEntryFooter.tsx

@@ -1,12 +1,11 @@
 import { t, Trans } from "@lingui/macro"
 import { Group, Indicator, MultiSelect, Popover } from "@mantine/core"
-import { useMediaQuery } from "@mantine/hooks"
-import { Constants } from "app/constants"
 import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/slices/entries"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
 import { ActionButton } from "components/ActionButtton"
 import { ButtonToolbar } from "components/ButtonToolbar"
+import { useMobile } from "hooks/useMobile"
 import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
 import { ShareButtons } from "./ShareButtons"
 
@@ -17,7 +16,7 @@ interface FeedEntryFooterProps {
 export function FeedEntryFooter(props: FeedEntryFooterProps) {
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const tags = useAppSelector(state => state.user.tags)
-    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)
+    const mobile = useMobile()
     const dispatch = useAppDispatch()
 
     const showSharingButtons = sharingSettings && Object.values(sharingSettings).some(v => v)

commafeed-client/src/hooks/useMobile.ts

@@ -0,0 +1,4 @@
+import { useMediaQuery } from "@mantine/hooks"
+import { Constants } from "app/constants"
+
+export const useMobile = (breakpoint: string = Constants.layout.mobileBreakpoint) => !useMediaQuery(`(min-width: ${breakpoint})`)

commafeed-client/src/pages/WelcomePage.tsx

@@ -1,8 +1,6 @@
 import { Trans } from "@lingui/macro"
 import { Anchor, Box, Center, Container, Divider, Group, Image, Title, useMantineColorScheme } from "@mantine/core"
-import { useMediaQuery } from "@mantine/hooks"
 import { client } from "app/client"
-import { Constants } from "app/constants"
 import { redirectToApiDocumentation, redirectToLogin, redirectToRegistration, redirectToRootCategory } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
 import welcome_page_dark from "assets/welcome_page_dark.png"
@@ -10,6 +8,7 @@ import welcome_page_light from "assets/welcome_page_light.png"
 import { ActionButton } from "components/ActionButtton"
 import { ButtonToolbar } from "components/ButtonToolbar"
 import { useBrowserExtension } from "hooks/useBrowserExtension"
+import { useMobile } from "hooks/useMobile"
 import { useAsyncCallback } from "react-async-hook"
 import { SiGithub, SiTwitter } from "react-icons/si"
 import { TbClock, TbKey, TbMoon, TbSettings, TbSun, TbUserPlus } from "react-icons/tb"
@@ -38,7 +37,7 @@ export function WelcomePage() {
 }
 
 function Header() {
-    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)
+    const mobile = useMobile()
 
     if (mobile) {
         return (

commafeed-client/src/pages/app/Layout.tsx

@@ -13,7 +13,7 @@ import {
     Title,
     useMantineTheme,
 } from "@mantine/core"
-import { useMediaQuery, useViewportSize } from "@mantine/hooks"
+import { useViewportSize } from "@mantine/hooks"
 import { Constants } from "app/constants"
 import { redirectToAdd, redirectToRootCategory } from "app/slices/redirect"
 import { reloadTree, setMobileMenuOpen, setSidebarWidth } from "app/slices/tree"
@@ -24,6 +24,7 @@ import { Logo } from "components/Logo"
 import { OnDesktop } from "components/responsive/OnDesktop"
 import { OnMobile } from "components/responsive/OnMobile"
 import { useAppLoading } from "hooks/useAppLoading"
+import { useMobile } from "hooks/useMobile"
 import { useWebSocket } from "hooks/useWebSocket"
 import { LoadingPage } from "pages/LoadingPage"
 import { Resizable } from "re-resizable"
@@ -92,7 +93,7 @@ export default function Layout(props: LayoutProps) {
     const theme = useMantineTheme()
     const viewport = useViewportSize()
     const { loading } = useAppLoading()
-    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)
+    const mobile = useMobile()
     const mobileMenuOpen = useAppSelector(state => state.tree.mobileMenuOpen)
     const sidebarHidden = props.sidebarWidth === 0
     const dispatch = useAppDispatch()