garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

update to mantine 7

Browse Source
This commit is contained in:
Athou
2023-12-29 23:09:30 +01:00
parent 2742b7fff6
commit 7e02380858
52 changed files with 653 additions and 751 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
commafeed-client/src/components/ActionButton.tsx
View File

@@ -1,6 +1,5 @@
import { ActionIcon, Button, Tooltip, useMantineTheme } from "@mantine/core"
import { type ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
import { type ButtonProps } from "@mantine/core/lib/Button/Button"
import { ActionIcon, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core"
import { type ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon"
import { useActionButton } from "hooks/useActionButton"
import { forwardRef, type MouseEventHandler, type ReactNode } from "react"
@@ -9,7 +8,7 @@ interface ActionButtonProps {
icon?: ReactNode
label: ReactNode
onClick?: MouseEventHandler
variant?: ActionIconProps["variant"] & ButtonProps["variant"]
variant?: ActionIconVariant & ButtonVariant
hideLabelOnDesktop?: boolean
showLabelOnMobile?: boolean
}
@@ -29,7 +28,7 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((pr
</ActionIcon>
</Tooltip>
) : (
<Button ref={ref} variant={variant} size="xs" className={props.className} leftIcon={props.icon} onClick={props.onClick}>
<Button ref={ref} variant={variant} size="xs" className={props.className} leftSection={props.icon} onClick={props.onClick}>
{props.label}
</Button>
)

2
commafeed-client/src/components/AnnouncementDialog.tsx
View File

@@ -24,7 +24,7 @@ export function AnnouncementDialog() {
return (
<Dialog opened={opened} withCloseButton onClose={onClosed} size="xl" radius="md">
<Box>
<Text weight="bold">
<Text fw="bold">
<Trans>Announcement</Trans>
</Text>
</Box>

9
commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx
View File

@@ -1,4 +1,5 @@
import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core"
import { useColorScheme } from "hooks/useColorScheme"
import { useState } from "react"
import { TbPhoto } from "react-icons/tb"
import { tss } from "tss"
@@ -19,6 +20,7 @@ interface ImageWithPlaceholderWhileLoadingProps {
const useStyles = tss
.withParams<{
theme: MantineTheme
colorScheme: "light" | "dark"
placeholderWidth?: number
placeholderHeight?: number
placeholderBackgroundColor?: string
@@ -31,13 +33,14 @@ const useStyles = tss
maxWidth: "100%",
color:
props.placeholderIconColor ??
props.theme.fn.variant({
props.theme.variantColorResolver({
theme: props.theme,
color: props.theme.primaryColor,
variant: "subtle",
}).color,
backgroundColor:
props.placeholderBackgroundColor ??
(props.theme.colorScheme === "dark" ? props.theme.colors.dark[5] : props.theme.colors.gray[1]),
(props.colorScheme === "dark" ? props.theme.colors.dark[5] : props.theme.colors.gray[1]),
},
}))
@@ -54,8 +57,10 @@ export function ImageWithPlaceholderWhileLoading({
width,
}: ImageWithPlaceholderWhileLoadingProps) {
const theme = useMantineTheme()
const colorScheme = useColorScheme()
const { classes } = useStyles({
theme,
colorScheme,
placeholderWidth,
placeholderHeight,
placeholderBackgroundColor,

246
commafeed-client/src/components/KeyboardShortcutsHelp.tsx
View File

@@ -4,64 +4,64 @@ import { Constants } from "app/constants"
export function KeyboardShortcutsHelp() {
return (
<Stack spacing="xs">
<Stack gap="xs">
<Table striped highlightOnHover>
<tbody>
<tr>
<td>
<Table.Tbody>
<Table.Tr>
<Table.Td>
<Trans>Refresh</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>R</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Open next entry</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>J</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Open previous entry</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>K</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Set focus on next entry without opening it</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>N</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Set focus on previous entry without opening it</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>P</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Move the page down</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>
<Trans>Space</Trans>
</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Move the page up</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>
<Trans>Shift</Trans>
</Kbd>
@@ -69,85 +69,85 @@ export function KeyboardShortcutsHelp() {
<Kbd>
<Trans>Space</Trans>
</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Open/close current entry</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>O</Kbd>
<span>, </span>
<Kbd>
<Trans>Enter</Trans>
</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Open current entry in a new tab</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>V</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Open current entry in a new tab in the background</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>B</Kbd>
<span>*, </span>
<Kbd>
<Trans>Middle click</Trans>
</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Toggle read status of current entry</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>M</Kbd>
<span>, </span>
<Trans>Swipe header to the right</Trans>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Toggle starred status of current entry</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>S</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Mark all entries as read</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>
<Trans>Shift</Trans>
</Kbd>
<span> + </span>
<Kbd>A</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Go to the All view</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>G</Kbd>
<span> </span>
<Kbd>A</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Navigate to a subscription by entering its name</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>
<Trans>Ctrl</Trans>
</Kbd>
@@ -157,23 +157,23 @@ export function KeyboardShortcutsHelp() {
<Kbd>G</Kbd>
<span> </span>
<Kbd>U</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Show entry menu (desktop)</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>
<Trans>Right click</Trans>
</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Show native menu (desktop)</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>
<Trans>Shift</Trans>
</Kbd>
@@ -181,35 +181,35 @@ export function KeyboardShortcutsHelp() {
<Kbd>
<Trans>Right click</Trans>
</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Show entry menu (mobile)</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>
<Trans>Long press</Trans>
</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Toggle sidebar</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>F</Kbd>
</td>
</tr>
<tr>
<td>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<Trans>Show keyboard shortcut help</Trans>
</td>
<td>
</Table.Td>
<Table.Td>
<Kbd>?</Kbd>
</td>
</tr>
</tbody>
</Table.Td>
</Table.Tr>
</Table.Tbody>
</Table>
<Box>
<span>* </span>

2
commafeed-client/src/components/Loader.tsx
View File

@@ -3,7 +3,7 @@ import { Center, Loader as MantineLoader } from "@mantine/core"
export function Loader() {
return (
<Center>
<MantineLoader size="xl" variant="bars" />
<MantineLoader size="lg" type="bars" />
</Center>
)
}

2
commafeed-client/src/components/Logo.tsx
View File

@@ -6,5 +6,5 @@ export interface LogoProps {
}
export function Logo(props: LogoProps) {
return <Image src={logo} width={props.size} />
return <Image src={logo} w={props.size} />
}

2
commafeed-client/src/components/admin/UserEdit.tsx
View File

@@ -43,7 +43,7 @@ export function UserEdit(props: UserEditProps) {
<Button variant="default" onClick={props.onCancel}>
<Trans>Cancel</Trans>
</Button>
<Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveUser.loading}>
<Button type="submit" leftSection={<TbDeviceFloppy size={16} />} loading={saveUser.loading}>
<Trans>Save</Trans>
</Button>
</Group>

6
commafeed-client/src/components/code/RichCodeEditor.tsx
View File

@@ -1,5 +1,5 @@
import { useMantineTheme } from "@mantine/core"
import { Loader } from "components/Loader"
import { useColorScheme } from "hooks/useColorScheme"
import { useAsync } from "react-async-hook"
const init = async () => {
@@ -32,8 +32,8 @@ interface RichCodeEditorProps {
}
function RichCodeEditor(props: RichCodeEditorProps) {
const theme = useMantineTheme()
const editorTheme = theme.colorScheme === "dark" ? "vs-dark" : "light"
const colorScheme = useColorScheme()
const editorTheme = colorScheme === "dark" ? "vs-dark" : "light"
const { result: Editor } = useAsync(init, [])
if (!Editor) return <Loader />

11
commafeed-client/src/components/content/BasicHtmlStyles.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { TypographyStylesProvider } from "@mantine/core"
import { type ReactNode } from "react"
/**
* This component is used to provide basic styles to html typography elements.
*
* see https://mantine.dev/core/typography-styles-provider/
*/
export const BasicHtmlStyles = (props: { children: ReactNode }) => {
return <TypographyStylesProvider pl={0}>{props.children}</TypographyStylesProvider>
}

13
commafeed-client/src/components/content/Content.tsx
View File

@@ -1,6 +1,7 @@
import { Box, type MantineTheme, Mark, TypographyStylesProvider, useMantineTheme } from "@mantine/core"
import { Box, type MantineTheme, Mark, useMantineTheme } from "@mantine/core"
import { Constants } from "app/constants"
import { calculatePlaceholderSize } from "app/utils"
import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
import escapeStringRegexp from "escape-string-regexp"
import { type ChildrenNode, Interweave, Matcher, type MatchResponse, type Node, type TransformCallback } from "interweave"
@@ -21,7 +22,11 @@ const useStyles = tss
// break long links or long words
overflowWrap: "anywhere",
"& a": {
color: theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
color: theme.variantColorResolver({
theme,
color: theme.primaryColor,
variant: "subtle",
}).color,
},
"& iframe": {
maxWidth: "100%",
@@ -96,11 +101,11 @@ const Content = React.memo((props: ContentProps) => {
const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : []
return (
<TypographyStylesProvider>
<BasicHtmlStyles>
<Box className={classes.content}>
<Interweave content={props.content} transform={transform} matchers={matchers} />
</Box>
</TypographyStylesProvider>
</BasicHtmlStyles>
)
})
Content.displayName = "Content"

12
commafeed-client/src/components/content/Enclosure.tsx
View File

@@ -1,13 +1,13 @@
import { TypographyStylesProvider } from "@mantine/core"
import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
export function Enclosure(props: { enclosureType: string; enclosureUrl: string }) {
const hasVideo = props.enclosureType && props.enclosureType.indexOf("video") === 0
const hasAudio = props.enclosureType && props.enclosureType.indexOf("audio") === 0
const hasImage = props.enclosureType && props.enclosureType.indexOf("image") === 0
const hasVideo = props.enclosureType?.startsWith("video")
const hasAudio = props.enclosureType?.startsWith("audio")
const hasImage = props.enclosureType?.startsWith("image")
return (
<TypographyStylesProvider>
<BasicHtmlStyles>
{hasVideo && (
<video controls>
<source src={props.enclosureUrl} type={props.enclosureType} />
@@ -19,6 +19,6 @@ export function Enclosure(props: { enclosureType: string; enclosureUrl: string }
</audio>
)}
{hasImage && <ImageWithPlaceholderWhileLoading src={props.enclosureUrl} alt="enclosure" />}
</TypographyStylesProvider>
</BasicHtmlStyles>
)
}

23
commafeed-client/src/components/content/FeedEntry.tsx
View File

@@ -1,7 +1,7 @@
import { Box, Divider, type MantineTheme, Paper, useMantineTheme } from "@mantine/core"
import { type MantineNumberSize } from "@mantine/styles"
import { Box, Divider, type MantineRadius, type MantineSpacing, type MantineTheme, Paper, useMantineTheme } from "@mantine/core"
import { Constants } from "app/constants"
import { type Entry, type ViewMode } from "app/types"
import { useColorScheme } from "hooks/useColorScheme"
import { useViewMode } from "hooks/useViewMode"
import React from "react"
import { useSwipeable } from "react-swipeable"
@@ -27,6 +27,7 @@ interface FeedEntryProps {
const useStyles = tss
.withParams<{
theme: MantineTheme
colorScheme: "light" | "dark"
read: boolean
expanded: boolean
viewMode: ViewMode
@@ -34,9 +35,9 @@ const useStyles = tss
showSelectionIndicator: boolean
maxWidth?: number
}>()
.create(({ theme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => {
.create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => {
let backgroundColor
if (theme.colorScheme === "dark") {
if (colorScheme === "dark") {
backgroundColor = read ? "inherit" : theme.colors.dark[5]
} else {
backgroundColor = read && !expanded ? theme.colors.gray[0] : "inherit"
@@ -58,12 +59,12 @@ const useStyles = tss
let backgroundHoverColor = backgroundColor
if (!expanded && !read) {
backgroundHoverColor = theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
backgroundHoverColor = colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
}
let paperBorderLeftColor
if (showSelectionIndicator) {
const borderLeftColor = theme.colorScheme === "dark" ? theme.colors.orange[4] : theme.colors.orange[6]
const borderLeftColor = colorScheme === "dark" ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6]
paperBorderLeftColor = `${borderLeftColor} !important`
}
@@ -73,7 +74,7 @@ const useStyles = tss
borderLeftColor: paperBorderLeftColor,
marginTop: marginY,
marginBottom: marginY,
[theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
[`@media (max-width: ${Constants.layout.mobileBreakpoint}px)`]: {
marginTop: mobileMarginY,
marginBottom: mobileMarginY,
},
@@ -96,9 +97,11 @@ const useStyles = tss
export function FeedEntry(props: FeedEntryProps) {
const theme = useMantineTheme()
const colorScheme = useColorScheme()
const { viewMode } = useViewMode()
const { classes, cx } = useStyles({
theme,
colorScheme,
read: props.entry.read,
expanded: props.expanded,
viewMode,
@@ -111,17 +114,17 @@ export function FeedEntry(props: FeedEntryProps) {
onSwipedRight: props.onSwipedRight,
})
let paddingX: MantineNumberSize = "xs"
let paddingX: MantineSpacing = "xs"
if (viewMode === "title" || viewMode === "cozy") paddingX = 6
let paddingY: MantineNumberSize = "xs"
let paddingY: MantineSpacing = "xs"
if (viewMode === "title") {
paddingY = 4
} else if (viewMode === "cozy") {
paddingY = 8
}
let borderRadius: MantineNumberSize = "sm"
let borderRadius: MantineRadius = "sm"
if (viewMode === "title") {
borderRadius = 0
} else if (viewMode === "cozy") {

17
commafeed-client/src/components/content/FeedEntryCompactHeader.tsx
View File

@@ -1,7 +1,8 @@
import { Box, type MantineTheme, Text, useMantineTheme } from "@mantine/core"
import { Box, Text } from "@mantine/core"
import { type Entry } from "app/types"
import { RelativeDate } from "components/RelativeDate"
import { OnDesktop } from "components/responsive/OnDesktop"
import { useColorScheme } from "hooks/useColorScheme"
import { tss } from "tss"
import { FeedEntryTitle } from "./FeedEntryTitle"
import { FeedFavicon } from "./FeedFavicon"
@@ -12,10 +13,10 @@ export interface FeedEntryHeaderProps {
const useStyles = tss
.withParams<{
theme: MantineTheme
colorScheme: "light" | "dark"
read: boolean
}>()
.create(({ read, theme }) => ({
.create(({ colorScheme, read }) => ({
wrapper: {
display: "flex",
alignItems: "center",
@@ -23,7 +24,7 @@ const useStyles = tss
},
title: {
flexGrow: 1,
fontWeight: theme.colorScheme === "light" && !read ? "bold" : "inherit",
fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
@@ -41,9 +42,9 @@ const useStyles = tss
}))
export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
const theme = useMantineTheme()
const colorScheme = useColorScheme()
const { classes } = useStyles({
theme,
colorScheme,
read: props.entry.read,
})
return (
@@ -52,7 +53,7 @@ export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
<FeedFavicon url={props.entry.iconUrl} />
</Box>
<OnDesktop>
<Text color="dimmed" className={classes.feedName}>
<Text c="dimmed" className={classes.feedName}>
{props.entry.feedName}
</Text>
</OnDesktop>
@@ -60,7 +61,7 @@ export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
<FeedEntryTitle entry={props.entry} />
</Box>
<OnDesktop>
<Text color="dimmed" className={classes.date}>
<Text c="dimmed" className={classes.date}>
<RelativeDate date={props.entry.date} />
</Text>
</OnDesktop>

16
commafeed-client/src/components/content/FeedEntryContextMenu.tsx
View File

@@ -7,6 +7,7 @@ import { useAppDispatch, useAppSelector } from "app/store"
import { type Entry } from "app/types"
import { truncate } from "app/utils"
import { useBrowserExtension } from "hooks/useBrowserExtension"
import { useColorScheme } from "hooks/useColorScheme"
import { Item, Menu, Separator } from "react-contexify"
import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
import { tss } from "tss"
@@ -19,30 +20,31 @@ const iconSize = 16
const useStyles = tss
.withParams<{
theme: MantineTheme
colorScheme: "light" | "dark"
}>()
.create(({ theme }) => ({
.create(({ theme, colorScheme }) => ({
menu: {
// apply mantine theme from MenuItem.styles.ts
fontSize: theme.fontSizes.sm,
"--contexify-item-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
"--contexify-activeItem-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
"--contexify-activeItem-bgColor": `${
theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[3], 0.35) : theme.colors.gray[1]
} !important`,
"--contexify-item-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
"--contexify-activeItem-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
"--contexify-activeItem-bgColor": `${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]} !important`,
},
}))
export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
const theme = useMantineTheme()
const colorScheme = useColorScheme()
const { classes } = useStyles({
theme,
colorScheme,
})
const sourceType = useAppSelector(state => state.entries.source.type)
const dispatch = useAppDispatch()
const { openLinkInBackgroundTab } = useBrowserExtension()
return (
<Menu id={Constants.dom.entryContextMenuId(props.entry)} theme={theme.colorScheme} animation={false} className={classes.menu}>
<Menu id={Constants.dom.entryContextMenuId(props.entry)} theme={colorScheme} animation={false} className={classes.menu}>
<Item
onClick={() => {
window.open(props.entry.url, "_blank", "noreferrer")

19
commafeed-client/src/components/content/FeedEntryFooter.tsx
View File

@@ -1,5 +1,5 @@
import { t, Trans } from "@lingui/macro"
import { Group, Indicator, MultiSelect, Popover } from "@mantine/core"
import { Group, Indicator, Popover, TagsInput } from "@mantine/core"
import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/entries/thunks"
import { useAppDispatch, useAppSelector } from "app/store"
import { type Entry } from "app/types"
@@ -38,8 +38,8 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
)
return (
<Group position="apart">
<Group spacing={spacing}>
<Group justify="space-between">
<Group gap={spacing}>
{props.entry.markable && (
<ActionButton
icon={props.entry.read ? <TbEyeOff size={18} /> : <TbEyeCheck size={18} />}
@@ -72,22 +72,21 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
)}
{tags && (
<Popover withArrow withinPortal shadow="md" closeOnClickOutside={!mobile}>
<Popover withArrow shadow="md" closeOnClickOutside={!mobile}>
<Popover.Target>
<Indicator label={props.entry.tags.length} disabled={props.entry.tags.length === 0} inline size={16}>
<ActionButton icon={<TbTag size={18} />} label={<Trans>Tags</Trans>} />
</Indicator>
</Popover.Target>
<Popover.Dropdown>
<MultiSelect
<TagsInput
placeholder={t`Tags`}
data={tags}
placeholder="Tags"
searchable
creatable
autoFocus
getCreateLabel={query => t`Create tag: ${query}`}
value={props.entry.tags}
onChange={onTagsChange}
comboboxProps={{
withinPortal: false,
}}
/>
</Popover.Dropdown>
</Popover>

17
commafeed-client/src/components/content/FeedEntryHeader.tsx
View File

@@ -1,6 +1,7 @@
import { Box, type MantineTheme, Space, Text, useMantineTheme } from "@mantine/core"
import { Box, Space, Text } from "@mantine/core"
import { type Entry } from "app/types"
import { RelativeDate } from "components/RelativeDate"
import { useColorScheme } from "hooks/useColorScheme"
import { tss } from "tss"
import { FeedEntryTitle } from "./FeedEntryTitle"
import { FeedFavicon } from "./FeedFavicon"
@@ -12,12 +13,12 @@ export interface FeedEntryHeaderProps {
const useStyles = tss
.withParams<{
theme: MantineTheme
colorScheme: "light" | "dark"
read: boolean
}>()
.create(({ theme, read }) => ({
.create(({ colorScheme, read }) => ({
headerText: {
fontWeight: theme.colorScheme === "light" && !read ? "bold" : "inherit",
fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
},
headerSubtext: {
display: "flex",
@@ -27,9 +28,9 @@ const useStyles = tss
}))
export function FeedEntryHeader(props: FeedEntryHeaderProps) {
const theme = useMantineTheme()
const colorScheme = useColorScheme()
const { classes } = useStyles({
theme,
colorScheme,
read: props.entry.read,
})
return (
@@ -40,7 +41,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
<Box className={classes.headerSubtext}>
<FeedFavicon url={props.entry.iconUrl} />
<Space w={6} />
<Text color="dimmed">
<Text c="dimmed">
{props.entry.feedName}
<span> · </span>
<RelativeDate date={props.entry.date} />
@@ -48,7 +49,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
</Box>
{props.expanded && (
<Box className={classes.headerSubtext}>
<Text color="dimmed">
<Text c="dimmed">
{props.entry.author && <span>by {props.entry.author}</span>}
{props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
{props.entry.categories && <span>{props.entry.categories}</span>}

7
commafeed-client/src/components/content/Media.tsx
View File

@@ -1,6 +1,7 @@
import { Box, TypographyStylesProvider } from "@mantine/core"
import { Box } from "@mantine/core"
import { Constants } from "app/constants"
import { calculatePlaceholderSize } from "app/utils"
import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
import { Content } from "./Content"
@@ -20,7 +21,7 @@ export function Media(props: MediaProps) {
maxWidth: Constants.layout.entryMaxWidth,
})
return (
<TypographyStylesProvider>
<BasicHtmlStyles>
<ImageWithPlaceholderWhileLoading
src={props.thumbnailUrl}
alt="media thumbnail"
@@ -34,6 +35,6 @@ export function Media(props: MediaProps) {
<Content content={props.description} />
</Box>
)}
</TypographyStylesProvider>
</BasicHtmlStyles>
)
}

12
commafeed-client/src/components/content/ShareButtons.tsx
View File

@@ -2,6 +2,7 @@ import { ActionIcon, Box, type MantineTheme, SimpleGrid, useMantineTheme } from
import { Constants } from "app/constants"
import { useAppSelector } from "app/store"
import { type SharingSettings } from "app/types"
import { useColorScheme } from "hooks/useColorScheme"
import { type IconType } from "react-icons"
import { tss } from "tss"
@@ -10,20 +11,23 @@ type Color = `#${string}`
const useStyles = tss
.withParams<{
theme: MantineTheme
colorScheme: "light" | "dark"
color: Color
}>()
.create(({ theme, color }) => ({
.create(({ theme, colorScheme, color }) => ({
socialIcon: {
color,
backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[2] : "white",
backgroundColor: colorScheme === "dark" ? theme.colors.gray[2] : "white",
borderRadius: "50%",
},
}))
function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: Color }) {
const theme = useMantineTheme()
const colorScheme = useColorScheme()
const { classes } = useStyles({
theme,
colorScheme,
color,
})
@@ -33,7 +37,7 @@ function ShareButton({ url, icon, color }: { url: string; icon: IconType; color:
}
return (
<ActionIcon>
<ActionIcon variant="transparent">
<a href={url} target="_blank" rel="noreferrer" onClick={onClick}>
<Box p={6} className={classes.socialIcon}>
{icon({ size: 18 })}
@@ -51,7 +55,7 @@ export function ShareButtons(props: { url: string; description: string }) {
return (
<SimpleGrid cols={4}>
{(Object.keys(Constants.sharing) as Array<keyof SharingSettings>)
.filter(site => sharingSettings && sharingSettings[site])
.filter(site => sharingSettings?.[site])
.map(site => (
<ShareButton
key={site}

4
commafeed-client/src/components/content/add/AddCategory.tsx
View File

@@ -35,11 +35,11 @@ export function AddCategory() {
<Stack>
<TextInput label={<Trans>Category</Trans>} placeholder={t`Category`} {...form.getInputProps("name")} required />
<CategorySelect label={<Trans>Parent</Trans>} {...form.getInputProps("parentId")} clearable />
<Group position="center">
<Group justify="center">
<Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
<Trans>Cancel</Trans>
</Button>
<Button type="submit" leftIcon={<TbFolderPlus size={16} />} loading={addCategory.loading}>
<Button type="submit" leftSection={<TbFolderPlus size={16} />} loading={addCategory.loading}>
<Trans>Add</Trans>
</Button>
</Group>

7
commafeed-client/src/components/content/add/CategorySelect.tsx
View File

@@ -1,5 +1,6 @@
import { t } from "@lingui/macro"
import { Select, type SelectItem, type SelectProps } from "@mantine/core"
import { Select, type SelectProps } from "@mantine/core"
import { type ComboboxItem } from "@mantine/core/lib/components/Combobox/Combobox.types"
import { Constants } from "app/constants"
import { useAppSelector } from "app/store"
import { flattenCategoryTree } from "app/utils"
@@ -12,9 +13,9 @@ type CategorySelectProps = Partial<SelectProps> & {
export function CategorySelect(props: CategorySelectProps) {
const rootCategory = useAppSelector(state => state.tree.rootCategory)
const categories = rootCategory && flattenCategoryTree(rootCategory)
const selectData: SelectItem[] | undefined = categories
const selectData: ComboboxItem[] | undefined = categories
?.filter(c => c.id !== Constants.categories.all.id)
.filter(c => !props.withoutCategoryIds || !props.withoutCategoryIds.includes(c.id))
.filter(c => !props.withoutCategoryIds?.includes(c.id))
.sort((c1, c2) => c1.name.localeCompare(c2.name))
.map(c => ({
label: c.parentName ? t`${c.name} (in ${c.parentName})` : c.name,

6
commafeed-client/src/components/content/add/ImportOpml.tsx
View File

@@ -37,7 +37,7 @@ export function ImportOpml() {
<Stack>
<FileInput
label={<Trans>OPML file</Trans>}
icon={<TbFileImport />}
leftSection={<TbFileImport />}
// https://github.com/mantinedev/mantine/issues/5401
{...{ placeholder: t`OPML file` }}
description={
@@ -50,11 +50,11 @@ export function ImportOpml() {
required
accept="application/xml"
/>
<Group position="center">
<Group justify="center">
<Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
<Trans>Cancel</Trans>
</Button>
<Button type="submit" leftIcon={<TbFileImport size={16} />} loading={importOpml.loading}>
<Button type="submit" leftSection={<TbFileImport size={16} />} loading={importOpml.loading}>
<Trans>Import</Trans>
</Button>
</Group>

4
commafeed-client/src/components/content/add/Subscribe.tsx
View File

@@ -108,7 +108,7 @@ export function Subscribe() {
</Stepper.Step>
</Stepper>
<Group position="center" mt="xl">
<Group justify="center" mt="xl">
<Button variant="default" onClick={previousStep}>
<Trans>Back</Trans>
</Button>
@@ -118,7 +118,7 @@ export function Subscribe() {
</Button>
)}
{activeStep === 1 && (
<Button type="submit" leftIcon={<TbRss size={16} />} loading={fetchFeed.loading || subscribe.loading}>
<Button type="submit" leftSection={<TbRss size={16} />} loading={fetchFeed.loading || subscribe.loading}>
<Trans>Subscribe</Trans>
</Button>
)}

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

@@ -37,7 +37,7 @@ function HeaderToolbar(props: { children: React.ReactNode }) {
return mobile ? (
// on mobile use all available width
<Box
sx={{
style={{
width: "100%",
display: "flex",
justifyContent: "space-between",
@@ -46,7 +46,7 @@ function HeaderToolbar(props: { children: React.ReactNode }) {
{props.children}
</Box>
) : (
<Group spacing={spacing}>{props.children}</Group>
<Group gap={spacing}>{props.children}</Group>
)
}
@@ -136,7 +136,7 @@ export function Header() {
<TextInput
placeholder={t`Search`}
{...searchForm.getInputProps("search")}
icon={<TbSearch size={iconSize} />}
leftSection={<TbSearch size={iconSize} />}
rightSection={
<ActionIcon onClick={async () => await (searchFromStore && dispatch(search("")))}>
<TbX />

2
commafeed-client/src/components/header/MarkAllAsReadButton.tsx
View File

@@ -65,7 +65,7 @@ export function MarkAllAsReadButton(props: { iconSize: number }) {
value={threshold}
onChange={setThreshold}
/>
<Group position="right">
<Group justify="flex-end">
<Button variant="default" onClick={() => setOpened(false)}>
<Trans>Cancel</Trans>
</Button>

16
commafeed-client/src/components/header/ProfileMenu.tsx
View File

@@ -99,7 +99,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Menu.Dropdown>
{profile && <Menu.Label>{profile.name}</Menu.Label>}
<Menu.Item
icon={<TbSettings size={iconSize} />}
leftSection={<TbSettings size={iconSize} />}
onClick={() => {
dispatch(redirectToSettings())
setOpened(false)
@@ -108,7 +108,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Trans>Settings</Trans>
</Menu.Item>
<Menu.Item
icon={<TbWorldDownload size={iconSize} />}
leftSection={<TbWorldDownload size={iconSize} />}
onClick={async () =>
await client.feed.refreshAll().then(() => {
showNotification({
@@ -128,7 +128,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Menu.Label>
<Trans>Theme</Trans>
</Menu.Label>
<Menu.Item icon={dark ? <TbSun size={iconSize} /> : <TbMoon size={iconSize} />} onClick={() => toggleColorScheme()}>
<Menu.Item leftSection={dark ? <TbSun size={iconSize} /> : <TbMoon size={iconSize} />} onClick={() => toggleColorScheme()}>
{dark ? <Trans>Switch to light theme</Trans> : <Trans>Switch to dark theme</Trans>}
</Menu.Item>
@@ -153,7 +153,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Trans>Admin</Trans>
</Menu.Label>
<Menu.Item
icon={<TbUsers size={iconSize} />}
leftSection={<TbUsers size={iconSize} />}
onClick={() => {
dispatch(redirectToAdminUsers())
setOpened(false)
@@ -162,7 +162,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Trans>Manage users</Trans>
</Menu.Item>
<Menu.Item
icon={<TbChartLine size={iconSize} />}
leftSection={<TbChartLine size={iconSize} />}
onClick={() => {
dispatch(redirectToMetrics())
setOpened(false)
@@ -176,7 +176,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
<Divider />
<Menu.Item
icon={<TbHeartFilled size={iconSize} color="red" />}
leftSection={<TbHeartFilled size={iconSize} color="red" />}
onClick={() => {
dispatch(redirectToDonate())
setOpened(false)
@@ -186,7 +186,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
</Menu.Item>
<Menu.Item
icon={<TbHelp size={iconSize} />}
leftSection={<TbHelp size={iconSize} />}
onClick={() => {
dispatch(redirectToAbout())
setOpened(false)
@@ -194,7 +194,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
>
<Trans>About</Trans>
</Menu.Item>
<Menu.Item icon={<TbPower size={iconSize} />} onClick={logout}>
<Menu.Item leftSection={<TbPower size={iconSize} />} onClick={logout}>
<Trans>Logout</Trans>
</Menu.Item>
</Menu.Dropdown>

2
commafeed-client/src/components/metrics/MetricAccordionItem.tsx
View File

@@ -11,7 +11,7 @@ export function MetricAccordionItem({ metricKey, name, headerValue, children }:
return (
<Accordion.Item value={metricKey} key={metricKey}>
<Accordion.Control>
<Group position="apart">
<Group justify="space-between">
<Box>{name}</Box>
<Box>{headerValue}</Box>
</Group>

2
commafeed-client/src/components/settings/CustomCodeSettings.tsx
View File

@@ -72,7 +72,7 @@ export function CustomCodeSettings() {
<Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
<Trans>Cancel</Trans>
</Button>
<Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveCustomCode.loading}>
<Button type="submit" leftSection={<TbDeviceFloppy size={16} />} loading={saveCustomCode.loading}>
<Trans>Save</Trans>
</Button>
</Group>

2
commafeed-client/src/components/settings/DisplaySettings.tsx
View File

@@ -81,7 +81,7 @@ export function DisplaySettings() {
<Switch
key={site}
label={Constants.sharing[site].label}
checked={sharingSettings && sharingSettings[site]}
checked={sharingSettings?.[site]}
onChange={async e =>
await dispatch(
changeSharingSetting({

4
commafeed-client/src/components/settings/ProfileSettings.tsx
View File

@@ -132,13 +132,13 @@ export function ProfileSettings() {
<Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
<Trans>Cancel</Trans>
</Button>
<Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveProfile.loading}>
<Button type="submit" leftSection={<TbDeviceFloppy size={16} />} loading={saveProfile.loading}>
<Trans>Save</Trans>
</Button>
<Divider orientation="vertical" />
<Button
color="red"
leftIcon={<TbTrash size={16} />}
leftSection={<TbTrash size={16} />}
onClick={() => openDeleteProfileModal()}
loading={deleteProfile.loading}
>

12
commafeed-client/src/components/sidebar/TreeNode.tsx
View File

@@ -1,5 +1,6 @@
import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core"
import { FeedFavicon } from "components/content/FeedFavicon"
import { useColorScheme } from "hooks/useColorScheme"
import React, { type ReactNode } from "react"
import { tss } from "tss"
import { UnreadCount } from "./UnreadCount"
@@ -20,18 +21,19 @@ interface TreeNodeProps {
const useStyles = tss
.withParams<{
theme: MantineTheme
colorScheme: "dark" | "light"
selected: boolean
hasError: boolean
hasUnread: boolean
}>()
.create(({ theme, selected, hasError, hasUnread }) => {
.create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
let backgroundColor = "inherit"
if (selected) backgroundColor = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
let color
if (hasError) {
color = theme.colors.red[6]
} else if (theme.colorScheme === "dark") {
} else if (colorScheme === "dark") {
color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
} else {
color = hasUnread ? theme.black : theme.colors.gray[6]
@@ -45,7 +47,7 @@ const useStyles = tss
color,
backgroundColor,
"&:hover": {
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
backgroundColor: colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
},
},
nodeText: {
@@ -59,8 +61,10 @@ const useStyles = tss
export function TreeNode(props: TreeNodeProps) {
const theme = useMantineTheme()
const colorScheme = useColorScheme()
const { classes } = useStyles({
theme,
colorScheme,
selected: props.selected,
hasError: props.hasError,
hasUnread: props.unread > 0,

46
commafeed-client/src/components/sidebar/TreeSearch.tsx
View File

@@ -1,6 +1,6 @@
import { t, Trans } from "@lingui/macro"
import { Box, Center, Kbd, TextInput } from "@mantine/core"
import { openSpotlight, type SpotlightAction, SpotlightProvider } from "@mantine/spotlight"
import { Spotlight, spotlight, type SpotlightActionData } from "@mantine/spotlight"
import { redirectToFeed } from "app/redirect/thunks"
import { useAppDispatch } from "app/store"
import { type Subscription } from "app/types"
@@ -15,17 +15,18 @@ export interface TreeSearchProps {
export function TreeSearch(props: TreeSearchProps) {
const dispatch = useAppDispatch()
const actions: SpotlightAction[] = props.feeds
.sort((f1, f2) => f1.name.localeCompare(f2.name))
const actions: SpotlightActionData[] = props.feeds
.toSorted((f1, f2) => f1.name.localeCompare(f2.name))
.map(f => ({
title: f.name,
icon: <FeedFavicon url={f.iconUrl} />,
onTrigger: async () => await dispatch(redirectToFeed(f.id)),
id: `${f.id}`,
label: f.name,
leftSection: <FeedFavicon url={f.iconUrl} />,
onClick: async () => await dispatch(redirectToFeed(f.id)),
}))
const searchIcon = <TbSearch size={18} />
const rightSection = (
<Center>
<Center style={{ cursor: "pointer" }} onClick={() => spotlight.open()}>
<Kbd>Ctrl</Kbd>
<Box mx={5}>+</Box>
<Kbd>K</Kbd>
@@ -33,30 +34,35 @@ export function TreeSearch(props: TreeSearchProps) {
)
// additional keyboard shortcut used by commafeed v1
useMousetrap("g u", () => openSpotlight())
useMousetrap("g u", () => spotlight.open())
return (
<SpotlightProvider
actions={actions}
searchIcon={searchIcon}
searchPlaceholder={t`Search`}
shortcut="ctrl+k"
nothingFoundMessage={<Trans>Nothing found</Trans>}
>
<>
<TextInput
placeholder={t`Search`}
icon={searchIcon}
leftSection={searchIcon}
rightSectionWidth={100}
rightSection={rightSection}
styles={{
input: { cursor: "pointer" },
rightSection: { pointerEvents: "none" },
input: {
cursor: "pointer",
},
}}
onClick={() => openSpotlight()}
onClick={() => spotlight.open()}
// prevent focus
onFocus={e => e.target.blur()}
readOnly
/>
</SpotlightProvider>
<Spotlight
actions={actions}
limit={10}
shortcut="ctrl+k"
searchProps={{
leftSection: searchIcon,
placeholder: t`Search`,
}}
nothingFound={<Trans>Nothing found</Trans>}
></Spotlight>
</>
)
}

4
commafeed-client/src/components/sidebar/UnreadCount.tsx
View File

@@ -17,7 +17,9 @@ export function UnreadCount(props: { unreadCount: number }) {
const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
return (
<Tooltip label={props.unreadCount} disabled={props.unreadCount === count}>
<Badge className={classes.badge}>{count}</Badge>
<Badge className={classes.badge} variant="light">
{count}
</Badge>
</Tooltip>
)
}