replace complex eslint config with biome

commafeed-client/src/components/content/header/FeedEntryCompactHeader.tsx

@@ -1,72 +1,72 @@
-import { Box, Text } from "@mantine/core"
-import { type Entry } from "app/types"
-import { FeedFavicon } from "components/content/FeedFavicon"
-import { OpenExternalLink } from "components/content/header/OpenExternalLink"
-import { Star } from "components/content/header/Star"
-import { RelativeDate } from "components/RelativeDate"
-import { OnDesktop } from "components/responsive/OnDesktop"
-import { tss } from "tss"
-import { FeedEntryTitle } from "./FeedEntryTitle"
-
-export interface FeedEntryHeaderProps {
-    entry: Entry
-    showStarIcon?: boolean
-    showExternalLinkIcon?: boolean
-}
-
-const useStyles = tss
-    .withParams<{
-        read: boolean
-    }>()
-    .create(({ colorScheme, read }) => ({
-        wrapper: {
-            display: "flex",
-            alignItems: "center",
-            columnGap: "10px",
-        },
-        title: {
-            flexGrow: 1,
-            fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-        },
-        feedName: {
-            width: "145px",
-            minWidth: "145px",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-        },
-        date: {
-            whiteSpace: "nowrap",
-        },
-    }))
-
-export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
-    const { classes } = useStyles({
-        read: props.entry.read,
-    })
-    return (
-        <Box className={classes.wrapper}>
-            {props.showStarIcon && <Star entry={props.entry} />}
-            <Box>
-                <FeedFavicon url={props.entry.iconUrl} />
-            </Box>
-            <OnDesktop>
-                <Text c="dimmed" className={classes.feedName}>
-                    {props.entry.feedName}
-                </Text>
-            </OnDesktop>
-            <Box className={classes.title}>
-                <FeedEntryTitle entry={props.entry} />
-            </Box>
-            <OnDesktop>
-                <Text c="dimmed" className={classes.date}>
-                    <RelativeDate date={props.entry.date} />
-                </Text>
-            </OnDesktop>
-            {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
-        </Box>
-    )
-}
+import { Box, Text } from "@mantine/core"
+import type { Entry } from "app/types"
+import { RelativeDate } from "components/RelativeDate"
+import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "components/content/header/OpenExternalLink"
+import { Star } from "components/content/header/Star"
+import { OnDesktop } from "components/responsive/OnDesktop"
+import { tss } from "tss"
+import { FeedEntryTitle } from "./FeedEntryTitle"
+
+export interface FeedEntryHeaderProps {
+    entry: Entry
+    showStarIcon?: boolean
+    showExternalLinkIcon?: boolean
+}
+
+const useStyles = tss
+    .withParams<{
+        read: boolean
+    }>()
+    .create(({ colorScheme, read }) => ({
+        wrapper: {
+            display: "flex",
+            alignItems: "center",
+            columnGap: "10px",
+        },
+        title: {
+            flexGrow: 1,
+            fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        feedName: {
+            width: "145px",
+            minWidth: "145px",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        date: {
+            whiteSpace: "nowrap",
+        },
+    }))
+
+export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
+    const { classes } = useStyles({
+        read: props.entry.read,
+    })
+    return (
+        <Box className={classes.wrapper}>
+            {props.showStarIcon && <Star entry={props.entry} />}
+            <Box>
+                <FeedFavicon url={props.entry.iconUrl} />
+            </Box>
+            <OnDesktop>
+                <Text c="dimmed" className={classes.feedName}>
+                    {props.entry.feedName}
+                </Text>
+            </OnDesktop>
+            <Box className={classes.title}>
+                <FeedEntryTitle entry={props.entry} />
+            </Box>
+            <OnDesktop>
+                <Text c="dimmed" className={classes.date}>
+                    <RelativeDate date={props.entry.date} />
+                </Text>
+            </OnDesktop>
+            {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
+        </Box>
+    )
+}

commafeed-client/src/components/content/header/FeedEntryHeader.tsx

@@ -1,67 +1,67 @@
-import { Box, Flex, Space, Text } from "@mantine/core"
-import { type Entry } from "app/types"
-import { FeedFavicon } from "components/content/FeedFavicon"
-import { OpenExternalLink } from "components/content/header/OpenExternalLink"
-import { Star } from "components/content/header/Star"
-import { RelativeDate } from "components/RelativeDate"
-import { tss } from "tss"
-import { FeedEntryTitle } from "./FeedEntryTitle"
-
-export interface FeedEntryHeaderProps {
-    entry: Entry
-    expanded: boolean
-    showStarIcon?: boolean
-    showExternalLinkIcon?: boolean
-}
-
-const useStyles = tss
-    .withParams<{
-        read: boolean
-    }>()
-    .create(({ colorScheme, read }) => ({
-        main: {
-            fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
-        },
-        details: {
-            fontSize: "90%",
-        },
-    }))
-
-export function FeedEntryHeader(props: FeedEntryHeaderProps) {
-    const { classes } = useStyles({
-        read: props.entry.read,
-    })
-    return (
-        <Box>
-            <Flex align="flex-start" justify="space-between">
-                <Flex align="flex-start" className={classes.main}>
-                    {props.showStarIcon && (
-                        <Box ml={-5}>
-                            <Star entry={props.entry} />
-                        </Box>
-                    )}
-                    <FeedEntryTitle entry={props.entry} />
-                </Flex>
-                {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
-            </Flex>
-            <Flex align="center" className={classes.details}>
-                <FeedFavicon url={props.entry.iconUrl} />
-                <Space w={6} />
-                <Text c="dimmed">
-                    {props.entry.feedName}
-                    <span> · </span>
-                    <RelativeDate date={props.entry.date} />
-                </Text>
-            </Flex>
-            {props.expanded && (
-                <Box className={classes.details}>
-                    <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>}
-                    </Text>
-                </Box>
-            )}
-        </Box>
-    )
-}
+import { Box, Flex, Space, Text } from "@mantine/core"
+import type { Entry } from "app/types"
+import { RelativeDate } from "components/RelativeDate"
+import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "components/content/header/OpenExternalLink"
+import { Star } from "components/content/header/Star"
+import { tss } from "tss"
+import { FeedEntryTitle } from "./FeedEntryTitle"
+
+export interface FeedEntryHeaderProps {
+    entry: Entry
+    expanded: boolean
+    showStarIcon?: boolean
+    showExternalLinkIcon?: boolean
+}
+
+const useStyles = tss
+    .withParams<{
+        read: boolean
+    }>()
+    .create(({ colorScheme, read }) => ({
+        main: {
+            fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
+        },
+        details: {
+            fontSize: "90%",
+        },
+    }))
+
+export function FeedEntryHeader(props: FeedEntryHeaderProps) {
+    const { classes } = useStyles({
+        read: props.entry.read,
+    })
+    return (
+        <Box>
+            <Flex align="flex-start" justify="space-between">
+                <Flex align="flex-start" className={classes.main}>
+                    {props.showStarIcon && (
+                        <Box ml={-5}>
+                            <Star entry={props.entry} />
+                        </Box>
+                    )}
+                    <FeedEntryTitle entry={props.entry} />
+                </Flex>
+                {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
+            </Flex>
+            <Flex align="center" className={classes.details}>
+                <FeedFavicon url={props.entry.iconUrl} />
+                <Space w={6} />
+                <Text c="dimmed">
+                    {props.entry.feedName}
+                    <span> · </span>
+                    <RelativeDate date={props.entry.date} />
+                </Text>
+            </Flex>
+            {props.expanded && (
+                <Box className={classes.details}>
+                    <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>}
+                    </Text>
+                </Box>
+            )}
+        </Box>
+    )
+}

commafeed-client/src/components/content/header/FeedEntryTitle.tsx

@@ -1,22 +1,22 @@
-import { Highlight } from "@mantine/core"
-import { useAppSelector } from "app/store"
-import { type Entry } from "app/types"
-
-export interface FeedEntryTitleProps {
-    entry: Entry
-}
-
-export function FeedEntryTitle(props: FeedEntryTitleProps) {
-    const search = useAppSelector(state => state.entries.search)
-    const keywords = search?.split(" ")
-    return (
-        <Highlight
-            inherit
-            highlight={keywords ?? ""}
-            // make sure ellipsis is shown when title is too long
-            span
-        >
-            {props.entry.title}
-        </Highlight>
-    )
-}
+import { Highlight } from "@mantine/core"
+import { useAppSelector } from "app/store"
+import type { Entry } from "app/types"
+
+export interface FeedEntryTitleProps {
+    entry: Entry
+}
+
+export function FeedEntryTitle(props: FeedEntryTitleProps) {
+    const search = useAppSelector(state => state.entries.search)
+    const keywords = search?.split(" ")
+    return (
+        <Highlight
+            inherit
+            highlight={keywords ?? ""}
+            // make sure ellipsis is shown when title is too long
+            span
+        >
+            {props.entry.title}
+        </Highlight>
+    )
+}

commafeed-client/src/components/content/header/OpenExternalLink.tsx

@@ -1,30 +1,30 @@
-import { Trans } from "@lingui/macro"
-import { ActionIcon, Anchor, Tooltip } from "@mantine/core"
-import { Constants } from "app/constants"
-import { markEntry } from "app/entries/thunks"
-import { useAppDispatch } from "app/store"
-import { type Entry } from "app/types"
-import { TbExternalLink } from "react-icons/tb"
-
-export function OpenExternalLink(props: { entry: Entry }) {
-    const dispatch = useAppDispatch()
-    const onClick = (e: React.MouseEvent) => {
-        e.stopPropagation()
-        dispatch(
-            markEntry({
-                entry: props.entry,
-                read: true,
-            })
-        )
-    }
-
-    return (
-        <Anchor href={props.entry.url} target="_blank" rel="noreferrer" onClick={onClick}>
-            <Tooltip label={<Trans>Open link</Trans>} openDelay={Constants.tooltip.delay}>
-                <ActionIcon variant="transparent" c="dimmed">
-                    <TbExternalLink size={18} />
-                </ActionIcon>
-            </Tooltip>
-        </Anchor>
-    )
-}
+import { Trans } from "@lingui/macro"
+import { ActionIcon, Anchor, Tooltip } from "@mantine/core"
+import { Constants } from "app/constants"
+import { markEntry } from "app/entries/thunks"
+import { useAppDispatch } from "app/store"
+import type { Entry } from "app/types"
+import { TbExternalLink } from "react-icons/tb"
+
+export function OpenExternalLink(props: { entry: Entry }) {
+    const dispatch = useAppDispatch()
+    const onClick = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        dispatch(
+            markEntry({
+                entry: props.entry,
+                read: true,
+            })
+        )
+    }
+
+    return (
+        <Anchor href={props.entry.url} target="_blank" rel="noreferrer" onClick={onClick}>
+            <Tooltip label={<Trans>Open link</Trans>} openDelay={Constants.tooltip.delay}>
+                <ActionIcon variant="transparent" c="dimmed">
+                    <TbExternalLink size={18} />
+                </ActionIcon>
+            </Tooltip>
+        </Anchor>
+    )
+}

commafeed-client/src/components/content/header/Star.tsx

@@ -1,29 +1,29 @@
-import { Trans } from "@lingui/macro"
-import { ActionIcon, Tooltip } from "@mantine/core"
-import { Constants } from "app/constants"
-import { starEntry } from "app/entries/thunks"
-import { useAppDispatch } from "app/store"
-import type { Entry } from "app/types"
-import { TbStar, TbStarFilled } from "react-icons/tb"
-
-export function Star(props: { entry: Entry }) {
-    const dispatch = useAppDispatch()
-    const onClick = (e: React.MouseEvent) => {
-        e.stopPropagation()
-        e.preventDefault()
-        dispatch(
-            starEntry({
-                entry: props.entry,
-                starred: !props.entry.starred,
-            })
-        )
-    }
-
-    return (
-        <Tooltip label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>} openDelay={Constants.tooltip.delay}>
-            <ActionIcon variant="transparent" onClick={onClick}>
-                {props.entry.starred ? <TbStarFilled size={18} /> : <TbStar size={18} />}
-            </ActionIcon>
-        </Tooltip>
-    )
-}
+import { Trans } from "@lingui/macro"
+import { ActionIcon, Tooltip } from "@mantine/core"
+import { Constants } from "app/constants"
+import { starEntry } from "app/entries/thunks"
+import { useAppDispatch } from "app/store"
+import type { Entry } from "app/types"
+import { TbStar, TbStarFilled } from "react-icons/tb"
+
+export function Star(props: { entry: Entry }) {
+    const dispatch = useAppDispatch()
+    const onClick = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        e.preventDefault()
+        dispatch(
+            starEntry({
+                entry: props.entry,
+                starred: !props.entry.starred,
+            })
+        )
+    }
+
+    return (
+        <Tooltip label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>} openDelay={Constants.tooltip.delay}>
+            <ActionIcon variant="transparent" onClick={onClick}>
+                {props.entry.starred ? <TbStarFilled size={18} /> : <TbStar size={18} />}
+            </ActionIcon>
+        </Tooltip>
+    )
+}