mirror of
https://github.com/Athou/commafeed.git
synced 2026-03-21 21:37:29 +00:00
replace complex eslint config with biome
This commit is contained in:
Athou
@@ -1,154 +1,154 @@
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { Anchor, Box, Center, Container, Divider, Group, Image, Space, Title, useMantineColorScheme } from "@mantine/core"
|
||||
import { client } from "app/client"
|
||||
import { redirectToApiDocumentation, redirectToLogin, redirectToRegistration, redirectToRootCategory } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import welcomePageDark from "assets/welcome_page_dark.png"
|
||||
import welcomePageLight from "assets/welcome_page_light.png"
|
||||
import { ActionButton } from "components/ActionButton"
|
||||
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"
|
||||
import { PageTitle } from "./PageTitle"
|
||||
|
||||
const iconSize = 18
|
||||
|
||||
export function WelcomePage() {
|
||||
const serverInfos = useAppSelector(state => state.server.serverInfos)
|
||||
const { colorScheme } = useMantineColorScheme()
|
||||
const dispatch = useAppDispatch()
|
||||
const image = colorScheme === "light" ? welcomePageLight : welcomePageDark
|
||||
|
||||
const login = useAsyncCallback(client.user.login, {
|
||||
onSuccess: () => {
|
||||
dispatch(redirectToRootCategory())
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Header />
|
||||
|
||||
<Center my="lg">
|
||||
<Title order={3}>Bloat-free feed reader</Title>
|
||||
</Center>
|
||||
|
||||
{serverInfos?.demoAccountEnabled && (
|
||||
<Center>
|
||||
<ActionButton
|
||||
label={<Trans>Try the demo!</Trans>}
|
||||
icon={<TbClock size={iconSize} />}
|
||||
variant="outline"
|
||||
onClick={async () => await login.execute({ name: "demo", password: "demo" })}
|
||||
showLabelOnMobile
|
||||
/>
|
||||
</Center>
|
||||
)}
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<Image src={image} />
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<Footer />
|
||||
|
||||
<Space h="lg" />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
function Header() {
|
||||
const mobile = useMobile()
|
||||
|
||||
if (mobile) {
|
||||
return (
|
||||
<>
|
||||
<PageTitle />
|
||||
<Center>
|
||||
<Buttons />
|
||||
</Center>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Group justify="space-between">
|
||||
<Box>
|
||||
<PageTitle />
|
||||
</Box>
|
||||
<Box>
|
||||
<Buttons />
|
||||
</Box>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
|
||||
function Buttons() {
|
||||
const serverInfos = useAppSelector(state => state.server.serverInfos)
|
||||
const { colorScheme, toggleColorScheme } = useMantineColorScheme()
|
||||
const { isBrowserExtensionPopup, openSettingsPage } = useBrowserExtension()
|
||||
const dispatch = useAppDispatch()
|
||||
const dark = colorScheme === "dark"
|
||||
|
||||
return (
|
||||
<Group gap={14}>
|
||||
<ActionButton
|
||||
label={<Trans>Log in</Trans>}
|
||||
icon={<TbKey size={iconSize} />}
|
||||
variant="outline"
|
||||
onClick={async () => await dispatch(redirectToLogin())}
|
||||
showLabelOnMobile
|
||||
/>
|
||||
{serverInfos?.allowRegistrations && (
|
||||
<ActionButton
|
||||
label={<Trans>Sign up</Trans>}
|
||||
icon={<TbUserPlus size={iconSize} />}
|
||||
variant="filled"
|
||||
onClick={async () => await dispatch(redirectToRegistration())}
|
||||
showLabelOnMobile
|
||||
/>
|
||||
)}
|
||||
|
||||
<ActionButton
|
||||
label={dark ? <Trans>Switch to light theme</Trans> : <Trans>Switch to dark theme</Trans>}
|
||||
icon={colorScheme === "dark" ? <TbSun size={18} /> : <TbMoon size={iconSize} />}
|
||||
onClick={() => toggleColorScheme()}
|
||||
hideLabelOnDesktop
|
||||
/>
|
||||
|
||||
{isBrowserExtensionPopup && (
|
||||
<ActionButton
|
||||
label={<Trans>Extension options</Trans>}
|
||||
icon={<TbSettings size={iconSize} />}
|
||||
onClick={() => openSettingsPage()}
|
||||
hideLabelOnDesktop
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
|
||||
function Footer() {
|
||||
const dispatch = useAppDispatch()
|
||||
return (
|
||||
<Group justify="space-between">
|
||||
<Group>
|
||||
<span>© CommaFeed</span>
|
||||
<Anchor variant="text" href="https://github.com/Athou/commafeed/" target="_blank" rel="noreferrer">
|
||||
<SiGithub />
|
||||
</Anchor>
|
||||
<Anchor variant="text" href="https://twitter.com/CommaFeed" target="_blank" rel="noreferrer">
|
||||
<SiTwitter />
|
||||
</Anchor>
|
||||
</Group>
|
||||
<Box>
|
||||
<Anchor variant="text" onClick={async () => await dispatch(redirectToApiDocumentation())}>
|
||||
API documentation
|
||||
</Anchor>
|
||||
</Box>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { Anchor, Box, Center, Container, Divider, Group, Image, Space, Title, useMantineColorScheme } from "@mantine/core"
|
||||
import { client } from "app/client"
|
||||
import { redirectToApiDocumentation, redirectToLogin, redirectToRegistration, redirectToRootCategory } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import welcomePageDark from "assets/welcome_page_dark.png"
|
||||
import welcomePageLight from "assets/welcome_page_light.png"
|
||||
import { ActionButton } from "components/ActionButton"
|
||||
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"
|
||||
import { PageTitle } from "./PageTitle"
|
||||
|
||||
const iconSize = 18
|
||||
|
||||
export function WelcomePage() {
|
||||
const serverInfos = useAppSelector(state => state.server.serverInfos)
|
||||
const { colorScheme } = useMantineColorScheme()
|
||||
const dispatch = useAppDispatch()
|
||||
const image = colorScheme === "light" ? welcomePageLight : welcomePageDark
|
||||
|
||||
const login = useAsyncCallback(client.user.login, {
|
||||
onSuccess: () => {
|
||||
dispatch(redirectToRootCategory())
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Header />
|
||||
|
||||
<Center my="lg">
|
||||
<Title order={3}>Bloat-free feed reader</Title>
|
||||
</Center>
|
||||
|
||||
{serverInfos?.demoAccountEnabled && (
|
||||
<Center>
|
||||
<ActionButton
|
||||
label={<Trans>Try the demo!</Trans>}
|
||||
icon={<TbClock size={iconSize} />}
|
||||
variant="outline"
|
||||
onClick={async () => await login.execute({ name: "demo", password: "demo" })}
|
||||
showLabelOnMobile
|
||||
/>
|
||||
</Center>
|
||||
)}
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<Image src={image} />
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<Footer />
|
||||
|
||||
<Space h="lg" />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
function Header() {
|
||||
const mobile = useMobile()
|
||||
|
||||
if (mobile) {
|
||||
return (
|
||||
<>
|
||||
<PageTitle />
|
||||
<Center>
|
||||
<Buttons />
|
||||
</Center>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Group justify="space-between">
|
||||
<Box>
|
||||
<PageTitle />
|
||||
</Box>
|
||||
<Box>
|
||||
<Buttons />
|
||||
</Box>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
|
||||
function Buttons() {
|
||||
const serverInfos = useAppSelector(state => state.server.serverInfos)
|
||||
const { colorScheme, toggleColorScheme } = useMantineColorScheme()
|
||||
const { isBrowserExtensionPopup, openSettingsPage } = useBrowserExtension()
|
||||
const dispatch = useAppDispatch()
|
||||
const dark = colorScheme === "dark"
|
||||
|
||||
return (
|
||||
<Group gap={14}>
|
||||
<ActionButton
|
||||
label={<Trans>Log in</Trans>}
|
||||
icon={<TbKey size={iconSize} />}
|
||||
variant="outline"
|
||||
onClick={async () => await dispatch(redirectToLogin())}
|
||||
showLabelOnMobile
|
||||
/>
|
||||
{serverInfos?.allowRegistrations && (
|
||||
<ActionButton
|
||||
label={<Trans>Sign up</Trans>}
|
||||
icon={<TbUserPlus size={iconSize} />}
|
||||
variant="filled"
|
||||
onClick={async () => await dispatch(redirectToRegistration())}
|
||||
showLabelOnMobile
|
||||
/>
|
||||
)}
|
||||
|
||||
<ActionButton
|
||||
label={dark ? <Trans>Switch to light theme</Trans> : <Trans>Switch to dark theme</Trans>}
|
||||
icon={colorScheme === "dark" ? <TbSun size={18} /> : <TbMoon size={iconSize} />}
|
||||
onClick={() => toggleColorScheme()}
|
||||
hideLabelOnDesktop
|
||||
/>
|
||||
|
||||
{isBrowserExtensionPopup && (
|
||||
<ActionButton
|
||||
label={<Trans>Extension options</Trans>}
|
||||
icon={<TbSettings size={iconSize} />}
|
||||
onClick={() => openSettingsPage()}
|
||||
hideLabelOnDesktop
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
|
||||
function Footer() {
|
||||
const dispatch = useAppDispatch()
|
||||
return (
|
||||
<Group justify="space-between">
|
||||
<Group>
|
||||
<span>© CommaFeed</span>
|
||||
<Anchor variant="text" href="https://github.com/Athou/commafeed/" target="_blank" rel="noreferrer">
|
||||
<SiGithub />
|
||||
</Anchor>
|
||||
<Anchor variant="text" href="https://twitter.com/CommaFeed" target="_blank" rel="noreferrer">
|
||||
<SiTwitter />
|
||||
</Anchor>
|
||||
</Group>
|
||||
<Box>
|
||||
<Anchor variant="text" onClick={async () => await dispatch(redirectToApiDocumentation())}>
|
||||
API documentation
|
||||
</Anchor>
|
||||
</Box>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user