Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-09-22 20:14:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

force the header in mobile mode if it is too large even if above the mobile breakpoint (fixed #2080)

Browse Source
This commit is contained in:
Athou
2026-08-24 07:17:57 +02:00
parent 4ef27e3027
commit cf43988fae
4 changed files with 35 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
commafeed-client/src/components/header/Header.tsx
View File

@@ -2,7 +2,8 @@ import { msg } from "@lingui/core/macro"
import { useLingui } from "@lingui/react"
import { Box, Center, CloseButton, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
import { useForm } from "@mantine/form"
import { useEffect } from "react"
import { useElementSize, useViewportSize } from "@mantine/hooks"
import { type ReactNode, type RefCallback, useEffect } from "react"
import {
TbArrowDown,
TbArrowUp,
@@ -20,7 +21,7 @@ import {
import { markAllAsReadWithConfirmationIfRequired, reloadEntries, search, selectNextEntry, selectPreviousEntry } from "@/app/entries/thunks"
import { useAppDispatch, useAppSelector } from "@/app/store"
import { changeSettings } from "@/app/user/thunks"
import { ActionButton } from "@/components/ActionButton"
import { ActionButton, type Mode } from "@/components/ActionButton"
import { Loader } from "@/components/Loader"
import { useActionButton } from "@/hooks/useActionButton"
import { useBrowserExtension } from "@/hooks/useBrowserExtension"
@@ -31,7 +32,7 @@ function HeaderDivider() {
return <Divider orientation="vertical" />
}
function HeaderToolbar(props: { children: React.ReactNode }) {
function HeaderToolbar(props: { children: ReactNode; ref?: RefCallback<typeof HeaderToolbar> }) {
const { spacing } = useActionButton()
const mobile = useMobile("480px")
return mobile ? (
@@ -47,7 +48,7 @@ function HeaderToolbar(props: { children: React.ReactNode }) {
{props.children}
</Box>
) : (
<Group gap={spacing} className="cf-toolbar">
<Group gap={spacing} wrap="nowrap" className="cf-toolbar">
{props.children}
</Group>
)
@@ -61,6 +62,13 @@ export function Header() {
const searchFromStore = useAppSelector(state => state.entries.search)
const { isBrowserExtensionPopup, openSettingsPage, openAppInNewTab } = useBrowserExtension()
const dispatch = useAppDispatch()
const viewport = useViewportSize()
const { ref: headerRef, width: headerWidth } = useElementSize()
const sidebarWidth = useAppSelector(state => state.user.localSettings.sidebarWidth)
const headerTooLarge = headerWidth > viewport.width - sidebarWidth
const mode: Mode = headerTooLarge ? "mobile" : "auto"
const { _ } = useLingui()
const searchForm = useForm<{ search: string }>()
@@ -94,10 +102,11 @@ export function Header() {
return (
<Center className="cf-toolbar-wrapper">
<HeaderToolbar>
<HeaderToolbar ref={headerRef}>
<ActionButton
icon={<TbArrowUp size={iconSize} />}
label={msg`Previous`}
mode={mode}
onClick={async () =>
await dispatch(
selectPreviousEntry({
@@ -111,6 +120,7 @@ export function Header() {
<ActionButton
icon={<TbArrowDown size={iconSize} />}
label={msg`Next`}
mode={mode}
onClick={async () =>
await dispatch(
selectNextEntry({
@@ -127,11 +137,13 @@ export function Header() {
<ActionButton
icon={<TbRefresh size={iconSize} />}
label={msg`Refresh`}
mode={mode}
onClick={async () => await dispatch(reloadEntries())}
/>
<ActionButton
icon={<TbChecks size={iconSize} />}
label={msg`Mark all as read`}
mode={mode}
onClick={() => dispatch(markAllAsReadWithConfirmationIfRequired())}
/>
@@ -140,18 +152,20 @@ export function Header() {
<ActionButton
icon={settings.readingMode === "all" ? <TbEye size={iconSize} /> : <TbEyeOff size={iconSize} />}
label={settings.readingMode === "all" ? msg`All` : msg`Unread`}
mode={mode}
onClick={toggleReadingMode}
/>
<ActionButton
icon={settings.readingOrder === "asc" ? <TbSortAscending size={iconSize} /> : <TbSortDescending size={iconSize} />}
label={settings.readingOrder === "asc" ? msg`Asc` : msg`Desc`}
mode={mode}
onClick={toggleReadingOrder}
/>
<Popover>
<Popover.Target>
<Indicator disabled={!searchFromStore}>
<ActionButton icon={<TbSearch size={iconSize} />} label={msg`Search`} />
<ActionButton icon={<TbSearch size={iconSize} />} label={msg`Search`} mode={mode} />
</Indicator>
</Popover.Target>
<Popover.Dropdown>
@@ -169,7 +183,7 @@ export function Header() {
<HeaderDivider />
<ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} />} />
<ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} mode={mode} />} />
{isBrowserExtensionPopup && (
<>
@@ -178,11 +192,13 @@ export function Header() {
<ActionButton
icon={<TbSettings size={iconSize} />}
label={msg`Extension options`}
mode={mode}
onClick={() => openSettingsPage()}
/>
<ActionButton
icon={<TbExternalLink size={iconSize} />}
label={msg`Open CommaFeed`}
mode={mode}
onClick={() => openAppInNewTab()}
/>
</>