forked from Archives/Athou_commafeed
replace complex eslint config with biome
This commit is contained in:
Athou
@@ -1,169 +1,169 @@
|
||||
import { t, Trans } from "@lingui/macro"
|
||||
import { Box, Center, CloseButton, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { reloadEntries, search, selectNextEntry, selectPreviousEntry } from "app/entries/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { changeReadingMode, changeReadingOrder } from "app/user/thunks"
|
||||
import { ActionButton } from "components/ActionButton"
|
||||
import { Loader } from "components/Loader"
|
||||
import { useActionButton } from "hooks/useActionButton"
|
||||
import { useBrowserExtension } from "hooks/useBrowserExtension"
|
||||
import { useMobile } from "hooks/useMobile"
|
||||
import { useEffect } from "react"
|
||||
import {
|
||||
TbArrowDown,
|
||||
TbArrowUp,
|
||||
TbExternalLink,
|
||||
TbEye,
|
||||
TbEyeOff,
|
||||
TbRefresh,
|
||||
TbSearch,
|
||||
TbSettings,
|
||||
TbSortAscending,
|
||||
TbSortDescending,
|
||||
TbUser,
|
||||
} from "react-icons/tb"
|
||||
import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
|
||||
import { ProfileMenu } from "./ProfileMenu"
|
||||
|
||||
function HeaderDivider() {
|
||||
return <Divider orientation="vertical" />
|
||||
}
|
||||
|
||||
function HeaderToolbar(props: { children: React.ReactNode }) {
|
||||
const { spacing } = useActionButton()
|
||||
const mobile = useMobile("480px")
|
||||
return mobile ? (
|
||||
// on mobile use all available width
|
||||
<Box
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</Box>
|
||||
) : (
|
||||
<Group gap={spacing}>{props.children}</Group>
|
||||
)
|
||||
}
|
||||
|
||||
const iconSize = 18
|
||||
|
||||
export function Header() {
|
||||
const settings = useAppSelector(state => state.user.settings)
|
||||
const profile = useAppSelector(state => state.user.profile)
|
||||
const searchFromStore = useAppSelector(state => state.entries.search)
|
||||
const { isBrowserExtensionPopup, openSettingsPage, openAppInNewTab } = useBrowserExtension()
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const searchForm = useForm<{ search: string }>({
|
||||
validate: {
|
||||
search: value => (value.length > 0 && value.length < 3 ? t`Search requires at least 3 characters` : null),
|
||||
},
|
||||
})
|
||||
const { setValues } = searchForm
|
||||
|
||||
useEffect(() => {
|
||||
setValues({
|
||||
search: searchFromStore,
|
||||
})
|
||||
}, [setValues, searchFromStore])
|
||||
|
||||
if (!settings) return <Loader />
|
||||
return (
|
||||
<Center>
|
||||
<HeaderToolbar>
|
||||
<ActionButton
|
||||
icon={<TbArrowUp size={iconSize} />}
|
||||
label={<Trans>Previous</Trans>}
|
||||
onClick={async () =>
|
||||
await dispatch(
|
||||
selectPreviousEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<ActionButton
|
||||
icon={<TbArrowDown size={iconSize} />}
|
||||
label={<Trans>Next</Trans>}
|
||||
onClick={async () =>
|
||||
await dispatch(
|
||||
selectNextEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<HeaderDivider />
|
||||
|
||||
<ActionButton
|
||||
icon={<TbRefresh size={iconSize} />}
|
||||
label={<Trans>Refresh</Trans>}
|
||||
onClick={async () => await dispatch(reloadEntries())}
|
||||
/>
|
||||
<MarkAllAsReadButton iconSize={iconSize} />
|
||||
|
||||
<HeaderDivider />
|
||||
|
||||
<ActionButton
|
||||
icon={settings.readingMode === "all" ? <TbEye size={iconSize} /> : <TbEyeOff size={iconSize} />}
|
||||
label={settings.readingMode === "all" ? <Trans>All</Trans> : <Trans>Unread</Trans>}
|
||||
onClick={async () => await dispatch(changeReadingMode(settings.readingMode === "all" ? "unread" : "all"))}
|
||||
/>
|
||||
<ActionButton
|
||||
icon={settings.readingOrder === "asc" ? <TbSortAscending size={iconSize} /> : <TbSortDescending size={iconSize} />}
|
||||
label={settings.readingOrder === "asc" ? <Trans>Asc</Trans> : <Trans>Desc</Trans>}
|
||||
onClick={async () => await dispatch(changeReadingOrder(settings.readingOrder === "asc" ? "desc" : "asc"))}
|
||||
/>
|
||||
|
||||
<Popover>
|
||||
<Popover.Target>
|
||||
<Indicator disabled={!searchFromStore}>
|
||||
<ActionButton icon={<TbSearch size={iconSize} />} label={<Trans>Search</Trans>} />
|
||||
</Indicator>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<form onSubmit={searchForm.onSubmit(async values => await dispatch(search(values.search)))}>
|
||||
<TextInput
|
||||
placeholder={t`Search`}
|
||||
{...searchForm.getInputProps("search")}
|
||||
leftSection={<TbSearch size={iconSize} />}
|
||||
rightSection={<CloseButton onClick={async () => await (searchFromStore && dispatch(search("")))} />}
|
||||
autoFocus
|
||||
/>
|
||||
</form>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
|
||||
<HeaderDivider />
|
||||
|
||||
<ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} />} />
|
||||
|
||||
{isBrowserExtensionPopup && (
|
||||
<>
|
||||
<HeaderDivider />
|
||||
|
||||
<ActionButton
|
||||
icon={<TbSettings size={iconSize} />}
|
||||
label={<Trans>Extension options</Trans>}
|
||||
onClick={() => openSettingsPage()}
|
||||
/>
|
||||
<ActionButton
|
||||
icon={<TbExternalLink size={iconSize} />}
|
||||
label={<Trans>Open CommaFeed</Trans>}
|
||||
onClick={() => openAppInNewTab()}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</HeaderToolbar>
|
||||
</Center>
|
||||
)
|
||||
}
|
||||
import { Trans, t } from "@lingui/macro"
|
||||
import { Box, Center, CloseButton, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { reloadEntries, search, selectNextEntry, selectPreviousEntry } from "app/entries/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { changeReadingMode, changeReadingOrder } from "app/user/thunks"
|
||||
import { ActionButton } from "components/ActionButton"
|
||||
import { Loader } from "components/Loader"
|
||||
import { useActionButton } from "hooks/useActionButton"
|
||||
import { useBrowserExtension } from "hooks/useBrowserExtension"
|
||||
import { useMobile } from "hooks/useMobile"
|
||||
import { useEffect } from "react"
|
||||
import {
|
||||
TbArrowDown,
|
||||
TbArrowUp,
|
||||
TbExternalLink,
|
||||
TbEye,
|
||||
TbEyeOff,
|
||||
TbRefresh,
|
||||
TbSearch,
|
||||
TbSettings,
|
||||
TbSortAscending,
|
||||
TbSortDescending,
|
||||
TbUser,
|
||||
} from "react-icons/tb"
|
||||
import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
|
||||
import { ProfileMenu } from "./ProfileMenu"
|
||||
|
||||
function HeaderDivider() {
|
||||
return <Divider orientation="vertical" />
|
||||
}
|
||||
|
||||
function HeaderToolbar(props: { children: React.ReactNode }) {
|
||||
const { spacing } = useActionButton()
|
||||
const mobile = useMobile("480px")
|
||||
return mobile ? (
|
||||
// on mobile use all available width
|
||||
<Box
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</Box>
|
||||
) : (
|
||||
<Group gap={spacing}>{props.children}</Group>
|
||||
)
|
||||
}
|
||||
|
||||
const iconSize = 18
|
||||
|
||||
export function Header() {
|
||||
const settings = useAppSelector(state => state.user.settings)
|
||||
const profile = useAppSelector(state => state.user.profile)
|
||||
const searchFromStore = useAppSelector(state => state.entries.search)
|
||||
const { isBrowserExtensionPopup, openSettingsPage, openAppInNewTab } = useBrowserExtension()
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const searchForm = useForm<{ search: string }>({
|
||||
validate: {
|
||||
search: value => (value.length > 0 && value.length < 3 ? t`Search requires at least 3 characters` : null),
|
||||
},
|
||||
})
|
||||
const { setValues } = searchForm
|
||||
|
||||
useEffect(() => {
|
||||
setValues({
|
||||
search: searchFromStore,
|
||||
})
|
||||
}, [setValues, searchFromStore])
|
||||
|
||||
if (!settings) return <Loader />
|
||||
return (
|
||||
<Center>
|
||||
<HeaderToolbar>
|
||||
<ActionButton
|
||||
icon={<TbArrowUp size={iconSize} />}
|
||||
label={<Trans>Previous</Trans>}
|
||||
onClick={async () =>
|
||||
await dispatch(
|
||||
selectPreviousEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<ActionButton
|
||||
icon={<TbArrowDown size={iconSize} />}
|
||||
label={<Trans>Next</Trans>}
|
||||
onClick={async () =>
|
||||
await dispatch(
|
||||
selectNextEntry({
|
||||
expand: true,
|
||||
markAsRead: true,
|
||||
scrollToEntry: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<HeaderDivider />
|
||||
|
||||
<ActionButton
|
||||
icon={<TbRefresh size={iconSize} />}
|
||||
label={<Trans>Refresh</Trans>}
|
||||
onClick={async () => await dispatch(reloadEntries())}
|
||||
/>
|
||||
<MarkAllAsReadButton iconSize={iconSize} />
|
||||
|
||||
<HeaderDivider />
|
||||
|
||||
<ActionButton
|
||||
icon={settings.readingMode === "all" ? <TbEye size={iconSize} /> : <TbEyeOff size={iconSize} />}
|
||||
label={settings.readingMode === "all" ? <Trans>All</Trans> : <Trans>Unread</Trans>}
|
||||
onClick={async () => await dispatch(changeReadingMode(settings.readingMode === "all" ? "unread" : "all"))}
|
||||
/>
|
||||
<ActionButton
|
||||
icon={settings.readingOrder === "asc" ? <TbSortAscending size={iconSize} /> : <TbSortDescending size={iconSize} />}
|
||||
label={settings.readingOrder === "asc" ? <Trans>Asc</Trans> : <Trans>Desc</Trans>}
|
||||
onClick={async () => await dispatch(changeReadingOrder(settings.readingOrder === "asc" ? "desc" : "asc"))}
|
||||
/>
|
||||
|
||||
<Popover>
|
||||
<Popover.Target>
|
||||
<Indicator disabled={!searchFromStore}>
|
||||
<ActionButton icon={<TbSearch size={iconSize} />} label={<Trans>Search</Trans>} />
|
||||
</Indicator>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<form onSubmit={searchForm.onSubmit(async values => await dispatch(search(values.search)))}>
|
||||
<TextInput
|
||||
placeholder={t`Search`}
|
||||
{...searchForm.getInputProps("search")}
|
||||
leftSection={<TbSearch size={iconSize} />}
|
||||
rightSection={<CloseButton onClick={async () => await (searchFromStore && dispatch(search("")))} />}
|
||||
autoFocus
|
||||
/>
|
||||
</form>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
|
||||
<HeaderDivider />
|
||||
|
||||
<ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} />} />
|
||||
|
||||
{isBrowserExtensionPopup && (
|
||||
<>
|
||||
<HeaderDivider />
|
||||
|
||||
<ActionButton
|
||||
icon={<TbSettings size={iconSize} />}
|
||||
label={<Trans>Extension options</Trans>}
|
||||
onClick={() => openSettingsPage()}
|
||||
/>
|
||||
<ActionButton
|
||||
icon={<TbExternalLink size={iconSize} />}
|
||||
label={<Trans>Open CommaFeed</Trans>}
|
||||
onClick={() => openAppInNewTab()}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</HeaderToolbar>
|
||||
</Center>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,97 +1,97 @@
|
||||
import { Trans } from "@lingui/macro"
|
||||
|
||||
import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
|
||||
import { markAllEntries } from "app/entries/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { ActionButton } from "components/ActionButton"
|
||||
import { useState } from "react"
|
||||
import { TbChecks } from "react-icons/tb"
|
||||
|
||||
export function MarkAllAsReadButton(props: { iconSize: number }) {
|
||||
const [opened, setOpened] = useState(false)
|
||||
const [threshold, setThreshold] = useState(0)
|
||||
const source = useAppSelector(state => state.entries.source)
|
||||
const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
|
||||
const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
|
||||
const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const buttonClicked = () => {
|
||||
if (markAllAsReadConfirmation) {
|
||||
setThreshold(0)
|
||||
setOpened(true)
|
||||
} else {
|
||||
dispatch(
|
||||
markAllEntries({
|
||||
sourceType: source.type,
|
||||
req: {
|
||||
id: source.id,
|
||||
read: true,
|
||||
olderThan: Date.now(),
|
||||
insertedBefore: entriesTimestamp,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal opened={opened} onClose={() => setOpened(false)} title={<Trans>Mark all entries as read</Trans>}>
|
||||
<Stack>
|
||||
<Text size="sm">
|
||||
{threshold === 0 && (
|
||||
<Trans>
|
||||
Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
|
||||
</Trans>
|
||||
)}
|
||||
{threshold > 0 && (
|
||||
<Trans>
|
||||
Are you sure you want to mark entries older than {threshold} days of <Code>{sourceLabel}</Code> as read?
|
||||
</Trans>
|
||||
)}
|
||||
</Text>
|
||||
<Slider
|
||||
py="xl"
|
||||
min={0}
|
||||
max={28}
|
||||
marks={[
|
||||
{ value: 0, label: "0" },
|
||||
{ value: 7, label: "7" },
|
||||
{ value: 14, label: "14" },
|
||||
{ value: 21, label: "21" },
|
||||
{ value: 28, label: "28" },
|
||||
]}
|
||||
value={threshold}
|
||||
onChange={setThreshold}
|
||||
/>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="default" onClick={() => setOpened(false)}>
|
||||
<Trans>Cancel</Trans>
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
setOpened(false)
|
||||
dispatch(
|
||||
markAllEntries({
|
||||
sourceType: source.type,
|
||||
req: {
|
||||
id: source.id,
|
||||
read: true,
|
||||
olderThan: Date.now() - threshold * 24 * 60 * 60 * 1000,
|
||||
insertedBefore: entriesTimestamp,
|
||||
},
|
||||
})
|
||||
)
|
||||
}}
|
||||
>
|
||||
<Trans>Confirm</Trans>
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
<ActionButton icon={<TbChecks size={props.iconSize} />} label={<Trans>Mark all as read</Trans>} onClick={buttonClicked} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
import { Trans } from "@lingui/macro"
|
||||
|
||||
import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
|
||||
import { markAllEntries } from "app/entries/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { ActionButton } from "components/ActionButton"
|
||||
import { useState } from "react"
|
||||
import { TbChecks } from "react-icons/tb"
|
||||
|
||||
export function MarkAllAsReadButton(props: { iconSize: number }) {
|
||||
const [opened, setOpened] = useState(false)
|
||||
const [threshold, setThreshold] = useState(0)
|
||||
const source = useAppSelector(state => state.entries.source)
|
||||
const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
|
||||
const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
|
||||
const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const buttonClicked = () => {
|
||||
if (markAllAsReadConfirmation) {
|
||||
setThreshold(0)
|
||||
setOpened(true)
|
||||
} else {
|
||||
dispatch(
|
||||
markAllEntries({
|
||||
sourceType: source.type,
|
||||
req: {
|
||||
id: source.id,
|
||||
read: true,
|
||||
olderThan: Date.now(),
|
||||
insertedBefore: entriesTimestamp,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal opened={opened} onClose={() => setOpened(false)} title={<Trans>Mark all entries as read</Trans>}>
|
||||
<Stack>
|
||||
<Text size="sm">
|
||||
{threshold === 0 && (
|
||||
<Trans>
|
||||
Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
|
||||
</Trans>
|
||||
)}
|
||||
{threshold > 0 && (
|
||||
<Trans>
|
||||
Are you sure you want to mark entries older than {threshold} days of <Code>{sourceLabel}</Code> as read?
|
||||
</Trans>
|
||||
)}
|
||||
</Text>
|
||||
<Slider
|
||||
py="xl"
|
||||
min={0}
|
||||
max={28}
|
||||
marks={[
|
||||
{ value: 0, label: "0" },
|
||||
{ value: 7, label: "7" },
|
||||
{ value: 14, label: "14" },
|
||||
{ value: 21, label: "21" },
|
||||
{ value: 28, label: "28" },
|
||||
]}
|
||||
value={threshold}
|
||||
onChange={setThreshold}
|
||||
/>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="default" onClick={() => setOpened(false)}>
|
||||
<Trans>Cancel</Trans>
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
setOpened(false)
|
||||
dispatch(
|
||||
markAllEntries({
|
||||
sourceType: source.type,
|
||||
req: {
|
||||
id: source.id,
|
||||
read: true,
|
||||
olderThan: Date.now() - threshold * 24 * 60 * 60 * 1000,
|
||||
insertedBefore: entriesTimestamp,
|
||||
},
|
||||
})
|
||||
)
|
||||
}}
|
||||
>
|
||||
<Trans>Confirm</Trans>
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
<ActionButton icon={<TbChecks size={props.iconSize} />} label={<Trans>Mark all as read</Trans>} onClick={buttonClicked} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,217 +1,217 @@
|
||||
import { Trans } from "@lingui/macro"
|
||||
import {
|
||||
Box,
|
||||
Divider,
|
||||
Group,
|
||||
type MantineColorScheme,
|
||||
Menu,
|
||||
SegmentedControl,
|
||||
type SegmentedControlItem,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core"
|
||||
import { showNotification } from "@mantine/notifications"
|
||||
import { client } from "app/client"
|
||||
import { redirectToAbout, redirectToAdminUsers, redirectToDonate, redirectToMetrics, redirectToSettings } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { type ViewMode } from "app/types"
|
||||
import { useViewMode } from "hooks/useViewMode"
|
||||
import { type ReactNode, useState } from "react"
|
||||
import {
|
||||
TbChartLine,
|
||||
TbHeartFilled,
|
||||
TbHelp,
|
||||
TbLayoutList,
|
||||
TbList,
|
||||
TbListDetails,
|
||||
TbMoon,
|
||||
TbNotes,
|
||||
TbPower,
|
||||
TbSettings,
|
||||
TbSun,
|
||||
TbSunMoon,
|
||||
TbUsers,
|
||||
TbWorldDownload,
|
||||
} from "react-icons/tb"
|
||||
|
||||
interface ProfileMenuProps {
|
||||
control: React.ReactElement
|
||||
}
|
||||
|
||||
const ProfileMenuControlItem = ({ icon, label }: { icon: ReactNode; label: ReactNode }) => {
|
||||
return (
|
||||
<Group>
|
||||
{icon}
|
||||
<Box ml={6}>{label}</Box>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
|
||||
const iconSize = 16
|
||||
|
||||
interface ColorSchemeControlItem extends SegmentedControlItem {
|
||||
value: MantineColorScheme
|
||||
}
|
||||
|
||||
const colorSchemeData: ColorSchemeControlItem[] = [
|
||||
{
|
||||
value: "light",
|
||||
label: <ProfileMenuControlItem icon={<TbSun size={iconSize} />} label={<Trans>Light</Trans>} />,
|
||||
},
|
||||
{
|
||||
value: "dark",
|
||||
label: <ProfileMenuControlItem icon={<TbMoon size={iconSize} />} label={<Trans>Dark</Trans>} />,
|
||||
},
|
||||
{
|
||||
value: "auto",
|
||||
label: <ProfileMenuControlItem icon={<TbSunMoon size={iconSize} />} label={<Trans>System</Trans>} />,
|
||||
},
|
||||
]
|
||||
|
||||
interface ViewModeControlItem extends SegmentedControlItem {
|
||||
value: ViewMode
|
||||
}
|
||||
|
||||
const viewModeData: ViewModeControlItem[] = [
|
||||
{
|
||||
value: "title",
|
||||
label: <ProfileMenuControlItem icon={<TbList size={iconSize} />} label={<Trans>Compact</Trans>} />,
|
||||
},
|
||||
{
|
||||
value: "cozy",
|
||||
label: <ProfileMenuControlItem icon={<TbLayoutList size={iconSize} />} label={<Trans>Cozy</Trans>} />,
|
||||
},
|
||||
{
|
||||
value: "detailed",
|
||||
label: <ProfileMenuControlItem icon={<TbListDetails size={iconSize} />} label={<Trans>Detailed</Trans>} />,
|
||||
},
|
||||
{
|
||||
value: "expanded",
|
||||
label: <ProfileMenuControlItem icon={<TbNotes size={iconSize} />} label={<Trans>Expanded</Trans>} />,
|
||||
},
|
||||
]
|
||||
|
||||
export function ProfileMenu(props: ProfileMenuProps) {
|
||||
const [opened, setOpened] = useState(false)
|
||||
const { viewMode, setViewMode } = useViewMode()
|
||||
const profile = useAppSelector(state => state.user.profile)
|
||||
const admin = useAppSelector(state => state.user.profile?.admin)
|
||||
const dispatch = useAppDispatch()
|
||||
const { colorScheme, setColorScheme } = useMantineColorScheme()
|
||||
|
||||
const logout = () => {
|
||||
window.location.href = "logout"
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu position="bottom-end" closeOnItemClick={false} opened={opened} onChange={setOpened}>
|
||||
<Menu.Target>{props.control}</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
{profile && <Menu.Label>{profile.name}</Menu.Label>}
|
||||
<Menu.Item
|
||||
leftSection={<TbSettings size={iconSize} />}
|
||||
onClick={() => {
|
||||
dispatch(redirectToSettings())
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Trans>Settings</Trans>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<TbWorldDownload size={iconSize} />}
|
||||
onClick={async () =>
|
||||
await client.feed.refreshAll().then(() => {
|
||||
showNotification({
|
||||
message: <Trans>Your feeds have been queued for refresh.</Trans>,
|
||||
color: "green",
|
||||
autoClose: 1000,
|
||||
})
|
||||
setOpened(false)
|
||||
})
|
||||
}
|
||||
>
|
||||
<Trans>Fetch all my feeds now</Trans>
|
||||
</Menu.Item>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Menu.Label>
|
||||
<Trans>Theme</Trans>
|
||||
</Menu.Label>
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
orientation="vertical"
|
||||
data={colorSchemeData}
|
||||
value={colorScheme}
|
||||
onChange={e => setColorScheme(e as MantineColorScheme)}
|
||||
mb="xs"
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Menu.Label>
|
||||
<Trans>Display</Trans>
|
||||
</Menu.Label>
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
orientation="vertical"
|
||||
data={viewModeData}
|
||||
value={viewMode}
|
||||
onChange={e => setViewMode(e as ViewMode)}
|
||||
mb="xs"
|
||||
/>
|
||||
|
||||
{admin && (
|
||||
<>
|
||||
<Divider />
|
||||
<Menu.Label>
|
||||
<Trans>Admin</Trans>
|
||||
</Menu.Label>
|
||||
<Menu.Item
|
||||
leftSection={<TbUsers size={iconSize} />}
|
||||
onClick={() => {
|
||||
dispatch(redirectToAdminUsers())
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Trans>Manage users</Trans>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<TbChartLine size={iconSize} />}
|
||||
onClick={() => {
|
||||
dispatch(redirectToMetrics())
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Trans>Metrics</Trans>
|
||||
</Menu.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<TbHeartFilled size={iconSize} color="red" />}
|
||||
onClick={() => {
|
||||
dispatch(redirectToDonate())
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Trans>Donate</Trans>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<TbHelp size={iconSize} />}
|
||||
onClick={() => {
|
||||
dispatch(redirectToAbout())
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Trans>About</Trans>
|
||||
</Menu.Item>
|
||||
<Menu.Item leftSection={<TbPower size={iconSize} />} onClick={logout}>
|
||||
<Trans>Logout</Trans>
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
import { Trans } from "@lingui/macro"
|
||||
import {
|
||||
Box,
|
||||
Divider,
|
||||
Group,
|
||||
type MantineColorScheme,
|
||||
Menu,
|
||||
SegmentedControl,
|
||||
type SegmentedControlItem,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core"
|
||||
import { showNotification } from "@mantine/notifications"
|
||||
import { client } from "app/client"
|
||||
import { redirectToAbout, redirectToAdminUsers, redirectToDonate, redirectToMetrics, redirectToSettings } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import type { ViewMode } from "app/types"
|
||||
import { useViewMode } from "hooks/useViewMode"
|
||||
import { type ReactNode, useState } from "react"
|
||||
import {
|
||||
TbChartLine,
|
||||
TbHeartFilled,
|
||||
TbHelp,
|
||||
TbLayoutList,
|
||||
TbList,
|
||||
TbListDetails,
|
||||
TbMoon,
|
||||
TbNotes,
|
||||
TbPower,
|
||||
TbSettings,
|
||||
TbSun,
|
||||
TbSunMoon,
|
||||
TbUsers,
|
||||
TbWorldDownload,
|
||||
} from "react-icons/tb"
|
||||
|
||||
interface ProfileMenuProps {
|
||||
control: React.ReactElement
|
||||
}
|
||||
|
||||
const ProfileMenuControlItem = ({ icon, label }: { icon: ReactNode; label: ReactNode }) => {
|
||||
return (
|
||||
<Group>
|
||||
{icon}
|
||||
<Box ml={6}>{label}</Box>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
|
||||
const iconSize = 16
|
||||
|
||||
interface ColorSchemeControlItem extends SegmentedControlItem {
|
||||
value: MantineColorScheme
|
||||
}
|
||||
|
||||
const colorSchemeData: ColorSchemeControlItem[] = [
|
||||
{
|
||||
value: "light",
|
||||
label: <ProfileMenuControlItem icon={<TbSun size={iconSize} />} label={<Trans>Light</Trans>} />,
|
||||
},
|
||||
{
|
||||
value: "dark",
|
||||
label: <ProfileMenuControlItem icon={<TbMoon size={iconSize} />} label={<Trans>Dark</Trans>} />,
|
||||
},
|
||||
{
|
||||
value: "auto",
|
||||
label: <ProfileMenuControlItem icon={<TbSunMoon size={iconSize} />} label={<Trans>System</Trans>} />,
|
||||
},
|
||||
]
|
||||
|
||||
interface ViewModeControlItem extends SegmentedControlItem {
|
||||
value: ViewMode
|
||||
}
|
||||
|
||||
const viewModeData: ViewModeControlItem[] = [
|
||||
{
|
||||
value: "title",
|
||||
label: <ProfileMenuControlItem icon={<TbList size={iconSize} />} label={<Trans>Compact</Trans>} />,
|
||||
},
|
||||
{
|
||||
value: "cozy",
|
||||
label: <ProfileMenuControlItem icon={<TbLayoutList size={iconSize} />} label={<Trans>Cozy</Trans>} />,
|
||||
},
|
||||
{
|
||||
value: "detailed",
|
||||
label: <ProfileMenuControlItem icon={<TbListDetails size={iconSize} />} label={<Trans>Detailed</Trans>} />,
|
||||
},
|
||||
{
|
||||
value: "expanded",
|
||||
label: <ProfileMenuControlItem icon={<TbNotes size={iconSize} />} label={<Trans>Expanded</Trans>} />,
|
||||
},
|
||||
]
|
||||
|
||||
export function ProfileMenu(props: ProfileMenuProps) {
|
||||
const [opened, setOpened] = useState(false)
|
||||
const { viewMode, setViewMode } = useViewMode()
|
||||
const profile = useAppSelector(state => state.user.profile)
|
||||
const admin = useAppSelector(state => state.user.profile?.admin)
|
||||
const dispatch = useAppDispatch()
|
||||
const { colorScheme, setColorScheme } = useMantineColorScheme()
|
||||
|
||||
const logout = () => {
|
||||
window.location.href = "logout"
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu position="bottom-end" closeOnItemClick={false} opened={opened} onChange={setOpened}>
|
||||
<Menu.Target>{props.control}</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
{profile && <Menu.Label>{profile.name}</Menu.Label>}
|
||||
<Menu.Item
|
||||
leftSection={<TbSettings size={iconSize} />}
|
||||
onClick={() => {
|
||||
dispatch(redirectToSettings())
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Trans>Settings</Trans>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<TbWorldDownload size={iconSize} />}
|
||||
onClick={async () =>
|
||||
await client.feed.refreshAll().then(() => {
|
||||
showNotification({
|
||||
message: <Trans>Your feeds have been queued for refresh.</Trans>,
|
||||
color: "green",
|
||||
autoClose: 1000,
|
||||
})
|
||||
setOpened(false)
|
||||
})
|
||||
}
|
||||
>
|
||||
<Trans>Fetch all my feeds now</Trans>
|
||||
</Menu.Item>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Menu.Label>
|
||||
<Trans>Theme</Trans>
|
||||
</Menu.Label>
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
orientation="vertical"
|
||||
data={colorSchemeData}
|
||||
value={colorScheme}
|
||||
onChange={e => setColorScheme(e as MantineColorScheme)}
|
||||
mb="xs"
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Menu.Label>
|
||||
<Trans>Display</Trans>
|
||||
</Menu.Label>
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
orientation="vertical"
|
||||
data={viewModeData}
|
||||
value={viewMode}
|
||||
onChange={e => setViewMode(e as ViewMode)}
|
||||
mb="xs"
|
||||
/>
|
||||
|
||||
{admin && (
|
||||
<>
|
||||
<Divider />
|
||||
<Menu.Label>
|
||||
<Trans>Admin</Trans>
|
||||
</Menu.Label>
|
||||
<Menu.Item
|
||||
leftSection={<TbUsers size={iconSize} />}
|
||||
onClick={() => {
|
||||
dispatch(redirectToAdminUsers())
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Trans>Manage users</Trans>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<TbChartLine size={iconSize} />}
|
||||
onClick={() => {
|
||||
dispatch(redirectToMetrics())
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Trans>Metrics</Trans>
|
||||
</Menu.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<TbHeartFilled size={iconSize} color="red" />}
|
||||
onClick={() => {
|
||||
dispatch(redirectToDonate())
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Trans>Donate</Trans>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<TbHelp size={iconSize} />}
|
||||
onClick={() => {
|
||||
dispatch(redirectToAbout())
|
||||
setOpened(false)
|
||||
}}
|
||||
>
|
||||
<Trans>About</Trans>
|
||||
</Menu.Item>
|
||||
<Menu.Item leftSection={<TbPower size={iconSize} />} onClick={logout}>
|
||||
<Trans>Logout</Trans>
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user