forked from Archives/Athou_commafeed
replace complex eslint config with biome
This commit is contained in:
Athou
@@ -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