replace complex eslint config with biome

commafeed-client/src/components/sidebar/Tree.tsx

@@ -1,175 +1,175 @@
-import { Trans } from "@lingui/macro"
-import { Box, Stack } from "@mantine/core"
-import { Constants } from "app/constants"
-import {
-    redirectToCategory,
-    redirectToCategoryDetails,
-    redirectToFeed,
-    redirectToFeedDetails,
-    redirectToTag,
-    redirectToTagDetails,
-} from "app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { collapseTreeCategory } from "app/tree/thunks"
-import { type Category, type Subscription } from "app/types"
-import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
-import { Loader } from "components/Loader"
-import { OnDesktop } from "components/responsive/OnDesktop"
-import React from "react"
-import { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
-import { TreeNode } from "./TreeNode"
-import { TreeSearch } from "./TreeSearch"
-
-const allIcon = <TbInbox size={16} />
-const starredIcon = <TbStar size={16} />
-const tagIcon = <TbTag size={16} />
-const expandedIcon = <TbChevronDown size={16} />
-const collapsedIcon = <TbChevronRight size={16} />
-
-const errorThreshold = 9
-
-export function Tree() {
-    const root = useAppSelector(state => state.tree.rootCategory)
-    const source = useAppSelector(state => state.entries.source)
-    const tags = useAppSelector(state => state.user.tags)
-    const showRead = useAppSelector(state => state.user.settings?.showRead)
-    const dispatch = useAppDispatch()
-
-    const feedClicked = (e: React.MouseEvent, id: string) => {
-        if (e.detail === 2) {
-            dispatch(redirectToFeedDetails(id))
-        } else {
-            dispatch(redirectToFeed(id))
-        }
-    }
-    const categoryClicked = (e: React.MouseEvent, id: string) => {
-        if (e.detail === 2) {
-            dispatch(redirectToCategoryDetails(id))
-        } else {
-            dispatch(redirectToCategory(id))
-        }
-    }
-    const categoryIconClicked = (e: React.MouseEvent, category: Category) => {
-        e.stopPropagation()
-
-        dispatch(
-            collapseTreeCategory({
-                id: +category.id,
-                collapse: category.expanded,
-            })
-        )
-    }
-    const tagClicked = (e: React.MouseEvent, id: string) => {
-        if (e.detail === 2) {
-            dispatch(redirectToTagDetails(id))
-        } else {
-            dispatch(redirectToTag(id))
-        }
-    }
-
-    const allCategoryNode = () => (
-        <TreeNode
-            id={Constants.categories.all.id}
-            name={<Trans>All</Trans>}
-            icon={allIcon}
-            unread={categoryUnreadCount(root)}
-            selected={source.type === "category" && source.id === Constants.categories.all.id}
-            expanded={false}
-            level={0}
-            hasError={false}
-            onClick={categoryClicked}
-        />
-    )
-    const starredCategoryNode = () => (
-        <TreeNode
-            id={Constants.categories.starred.id}
-            name={<Trans>Starred</Trans>}
-            icon={starredIcon}
-            unread={0}
-            selected={source.type === "category" && source.id === Constants.categories.starred.id}
-            expanded={false}
-            level={0}
-            hasError={false}
-            onClick={categoryClicked}
-        />
-    )
-
-    const categoryNode = (category: Category, level = 0) => {
-        const unreadCount = categoryUnreadCount(category)
-        if (unreadCount === 0 && !showRead) return null
-
-        const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
-        return (
-            <TreeNode
-                id={category.id}
-                name={category.name}
-                icon={category.expanded ? expandedIcon : collapsedIcon}
-                unread={unreadCount}
-                selected={source.type === "category" && source.id === category.id}
-                expanded={category.expanded}
-                level={level}
-                hasError={hasError}
-                onClick={categoryClicked}
-                onIconClick={e => categoryIconClicked(e, category)}
-                key={category.id}
-            />
-        )
-    }
-
-    const feedNode = (feed: Subscription, level = 0) => {
-        if (feed.unread === 0 && !showRead) return null
-
-        return (
-            <TreeNode
-                id={String(feed.id)}
-                name={feed.name}
-                icon={feed.iconUrl}
-                unread={feed.unread}
-                selected={source.type === "feed" && source.id === String(feed.id)}
-                level={level}
-                hasError={feed.errorCount > errorThreshold}
-                onClick={feedClicked}
-                key={feed.id}
-            />
-        )
-    }
-
-    const tagNode = (tag: string) => (
-        <TreeNode
-            id={tag}
-            name={tag}
-            icon={tagIcon}
-            unread={0}
-            selected={source.type === "tag" && source.id === tag}
-            level={0}
-            hasError={false}
-            onClick={tagClicked}
-            key={tag}
-        />
-    )
-
-    const recursiveCategoryNode = (category: Category, level = 0) => (
-        <React.Fragment key={`recursiveCategoryNode-${category.id}`}>
-            {categoryNode(category, level)}
-            {category.expanded && category.children.map(c => recursiveCategoryNode(c, level + 1))}
-            {category.expanded && category.feeds.map(f => feedNode(f, level + 1))}
-        </React.Fragment>
-    )
-
-    if (!root) return <Loader />
-    const feeds = flattenCategoryTree(root).flatMap(c => c.feeds)
-    return (
-        <Stack>
-            <OnDesktop>
-                <TreeSearch feeds={feeds} />
-            </OnDesktop>
-            <Box>
-                {allCategoryNode()}
-                {starredCategoryNode()}
-                {root.children.map(c => recursiveCategoryNode(c))}
-                {root.feeds.map(f => feedNode(f))}
-                {tags?.map(tag => tagNode(tag))}
-            </Box>
-        </Stack>
-    )
-}
+import { Trans } from "@lingui/macro"
+import { Box, Stack } from "@mantine/core"
+import { Constants } from "app/constants"
+import {
+    redirectToCategory,
+    redirectToCategoryDetails,
+    redirectToFeed,
+    redirectToFeedDetails,
+    redirectToTag,
+    redirectToTagDetails,
+} from "app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { collapseTreeCategory } from "app/tree/thunks"
+import type { Category, Subscription } from "app/types"
+import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
+import { Loader } from "components/Loader"
+import { OnDesktop } from "components/responsive/OnDesktop"
+import React from "react"
+import { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
+import { TreeNode } from "./TreeNode"
+import { TreeSearch } from "./TreeSearch"
+
+const allIcon = <TbInbox size={16} />
+const starredIcon = <TbStar size={16} />
+const tagIcon = <TbTag size={16} />
+const expandedIcon = <TbChevronDown size={16} />
+const collapsedIcon = <TbChevronRight size={16} />
+
+const errorThreshold = 9
+
+export function Tree() {
+    const root = useAppSelector(state => state.tree.rootCategory)
+    const source = useAppSelector(state => state.entries.source)
+    const tags = useAppSelector(state => state.user.tags)
+    const showRead = useAppSelector(state => state.user.settings?.showRead)
+    const dispatch = useAppDispatch()
+
+    const feedClicked = (e: React.MouseEvent, id: string) => {
+        if (e.detail === 2) {
+            dispatch(redirectToFeedDetails(id))
+        } else {
+            dispatch(redirectToFeed(id))
+        }
+    }
+    const categoryClicked = (e: React.MouseEvent, id: string) => {
+        if (e.detail === 2) {
+            dispatch(redirectToCategoryDetails(id))
+        } else {
+            dispatch(redirectToCategory(id))
+        }
+    }
+    const categoryIconClicked = (e: React.MouseEvent, category: Category) => {
+        e.stopPropagation()
+
+        dispatch(
+            collapseTreeCategory({
+                id: +category.id,
+                collapse: category.expanded,
+            })
+        )
+    }
+    const tagClicked = (e: React.MouseEvent, id: string) => {
+        if (e.detail === 2) {
+            dispatch(redirectToTagDetails(id))
+        } else {
+            dispatch(redirectToTag(id))
+        }
+    }
+
+    const allCategoryNode = () => (
+        <TreeNode
+            id={Constants.categories.all.id}
+            name={<Trans>All</Trans>}
+            icon={allIcon}
+            unread={categoryUnreadCount(root)}
+            selected={source.type === "category" && source.id === Constants.categories.all.id}
+            expanded={false}
+            level={0}
+            hasError={false}
+            onClick={categoryClicked}
+        />
+    )
+    const starredCategoryNode = () => (
+        <TreeNode
+            id={Constants.categories.starred.id}
+            name={<Trans>Starred</Trans>}
+            icon={starredIcon}
+            unread={0}
+            selected={source.type === "category" && source.id === Constants.categories.starred.id}
+            expanded={false}
+            level={0}
+            hasError={false}
+            onClick={categoryClicked}
+        />
+    )
+
+    const categoryNode = (category: Category, level = 0) => {
+        const unreadCount = categoryUnreadCount(category)
+        if (unreadCount === 0 && !showRead) return null
+
+        const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
+        return (
+            <TreeNode
+                id={category.id}
+                name={category.name}
+                icon={category.expanded ? expandedIcon : collapsedIcon}
+                unread={unreadCount}
+                selected={source.type === "category" && source.id === category.id}
+                expanded={category.expanded}
+                level={level}
+                hasError={hasError}
+                onClick={categoryClicked}
+                onIconClick={e => categoryIconClicked(e, category)}
+                key={category.id}
+            />
+        )
+    }
+
+    const feedNode = (feed: Subscription, level = 0) => {
+        if (feed.unread === 0 && !showRead) return null
+
+        return (
+            <TreeNode
+                id={String(feed.id)}
+                name={feed.name}
+                icon={feed.iconUrl}
+                unread={feed.unread}
+                selected={source.type === "feed" && source.id === String(feed.id)}
+                level={level}
+                hasError={feed.errorCount > errorThreshold}
+                onClick={feedClicked}
+                key={feed.id}
+            />
+        )
+    }
+
+    const tagNode = (tag: string) => (
+        <TreeNode
+            id={tag}
+            name={tag}
+            icon={tagIcon}
+            unread={0}
+            selected={source.type === "tag" && source.id === tag}
+            level={0}
+            hasError={false}
+            onClick={tagClicked}
+            key={tag}
+        />
+    )
+
+    const recursiveCategoryNode = (category: Category, level = 0) => (
+        <React.Fragment key={`recursiveCategoryNode-${category.id}`}>
+            {categoryNode(category, level)}
+            {category.expanded && category.children.map(c => recursiveCategoryNode(c, level + 1))}
+            {category.expanded && category.feeds.map(f => feedNode(f, level + 1))}
+        </React.Fragment>
+    )
+
+    if (!root) return <Loader />
+    const feeds = flattenCategoryTree(root).flatMap(c => c.feeds)
+    return (
+        <Stack>
+            <OnDesktop>
+                <TreeSearch feeds={feeds} />
+            </OnDesktop>
+            <Box>
+                {allCategoryNode()}
+                {starredCategoryNode()}
+                {root.children.map(c => recursiveCategoryNode(c))}
+                {root.feeds.map(f => feedNode(f))}
+                {tags?.map(tag => tagNode(tag))}
+            </Box>
+        </Stack>
+    )
+}

commafeed-client/src/components/sidebar/TreeNode.tsx

@@ -1,78 +1,78 @@
-import { Box, Center } from "@mantine/core"
-import { FeedFavicon } from "components/content/FeedFavicon"
-import React, { type ReactNode } from "react"
-import { tss } from "tss"
-import { UnreadCount } from "./UnreadCount"
-
-interface TreeNodeProps {
-    id: string
-    name: ReactNode
-    icon: ReactNode
-    unread: number
-    selected: boolean
-    expanded?: boolean
-    level: number
-    hasError: boolean
-    onClick: (e: React.MouseEvent, id: string) => void
-    onIconClick?: (e: React.MouseEvent, id: string) => void
-}
-
-const useStyles = tss
-    .withParams<{
-        selected: boolean
-        hasError: boolean
-        hasUnread: boolean
-    }>()
-    .create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
-        let backgroundColor = "inherit"
-        if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
-
-        let color
-        if (hasError) {
-            color = theme.colors.red[6]
-        } else if (colorScheme === "dark") {
-            color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
-        } else {
-            color = hasUnread ? theme.black : theme.colors.gray[6]
-        }
-
-        return {
-            node: {
-                display: "flex",
-                alignItems: "center",
-                cursor: "pointer",
-                color,
-                backgroundColor,
-                "&:hover": {
-                    backgroundColor: colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
-                },
-            },
-            nodeText: {
-                flexGrow: 1,
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-            },
-        }
-    })
-
-export function TreeNode(props: TreeNodeProps) {
-    const { classes } = useStyles({
-        selected: props.selected,
-        hasError: props.hasError,
-        hasUnread: props.unread > 0,
-    })
-    return (
-        <Box py={1} pl={props.level * 20} className={classes.node} onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}>
-            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)}>
-                <Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
-            </Box>
-            <Box className={classes.nodeText}>{props.name}</Box>
-            {!props.expanded && (
-                <Box>
-                    <UnreadCount unreadCount={props.unread} />
-                </Box>
-            )}
-        </Box>
-    )
-}
+import { Box, Center } from "@mantine/core"
+import { FeedFavicon } from "components/content/FeedFavicon"
+import type React from "react"
+import { tss } from "tss"
+import { UnreadCount } from "./UnreadCount"
+
+interface TreeNodeProps {
+    id: string
+    name: React.ReactNode
+    icon: React.ReactNode
+    unread: number
+    selected: boolean
+    expanded?: boolean
+    level: number
+    hasError: boolean
+    onClick: (e: React.MouseEvent, id: string) => void
+    onIconClick?: (e: React.MouseEvent, id: string) => void
+}
+
+const useStyles = tss
+    .withParams<{
+        selected: boolean
+        hasError: boolean
+        hasUnread: boolean
+    }>()
+    .create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
+        let backgroundColor = "inherit"
+        if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
+
+        let color: string
+        if (hasError) {
+            color = theme.colors.red[6]
+        } else if (colorScheme === "dark") {
+            color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
+        } else {
+            color = hasUnread ? theme.black : theme.colors.gray[6]
+        }
+
+        return {
+            node: {
+                display: "flex",
+                alignItems: "center",
+                cursor: "pointer",
+                color,
+                backgroundColor,
+                "&:hover": {
+                    backgroundColor: colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+                },
+            },
+            nodeText: {
+                flexGrow: 1,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+            },
+        }
+    })
+
+export function TreeNode(props: TreeNodeProps) {
+    const { classes } = useStyles({
+        selected: props.selected,
+        hasError: props.hasError,
+        hasUnread: props.unread > 0,
+    })
+    return (
+        <Box py={1} pl={props.level * 20} className={classes.node} onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}>
+            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)}>
+                <Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
+            </Box>
+            <Box className={classes.nodeText}>{props.name}</Box>
+            {!props.expanded && (
+                <Box>
+                    <UnreadCount unreadCount={props.unread} />
+                </Box>
+            )}
+        </Box>
+    )
+}

commafeed-client/src/components/sidebar/TreeSearch.tsx

@@ -1,69 +1,69 @@
-import { t, Trans } from "@lingui/macro"
-import { Box, Center, Kbd, TextInput } from "@mantine/core"
-import { useOs } from "@mantine/hooks"
-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"
-import { FeedFavicon } from "components/content/FeedFavicon"
-import { useMousetrap } from "hooks/useMousetrap"
-import { TbSearch } from "react-icons/tb"
-
-export interface TreeSearchProps {
-    feeds: Subscription[]
-}
-
-export function TreeSearch(props: TreeSearchProps) {
-    const dispatch = useAppDispatch()
-    const isMacOS = useOs() === "macos"
-    const actions: SpotlightActionData[] = props.feeds
-        .map(f => ({
-            id: `${f.id}`,
-            label: f.name,
-            leftSection: <FeedFavicon url={f.iconUrl} />,
-            onClick: async () => await dispatch(redirectToFeed(f.id)),
-        }))
-        .sort((f1, f2) => f1.label.localeCompare(f2.label))
-
-    const searchIcon = <TbSearch size={18} />
-    const rightSection = (
-        <Center style={{ cursor: "pointer" }} onClick={() => spotlight.open()}>
-            <Kbd>{isMacOS ? "Cmd" : "Ctrl"}</Kbd>
-            <Box mx={5}>+</Box>
-            <Kbd>K</Kbd>
-        </Center>
-    )
-
-    // additional keyboard shortcut used by commafeed v1
-    useMousetrap("g u", () => spotlight.open())
-
-    return (
-        <>
-            <TextInput
-                placeholder={t`Search`}
-                leftSection={searchIcon}
-                rightSectionWidth={100}
-                rightSection={rightSection}
-                styles={{
-                    input: {
-                        cursor: "pointer",
-                    },
-                }}
-                onClick={() => spotlight.open()}
-                // prevent focus
-                onFocus={e => e.target.blur()}
-                readOnly
-            />
-            <Spotlight
-                actions={actions}
-                limit={10}
-                shortcut="mod+k"
-                searchProps={{
-                    leftSection: searchIcon,
-                    placeholder: t`Search`,
-                }}
-                nothingFound={<Trans>Nothing found</Trans>}
-            ></Spotlight>
-        </>
-    )
-}
+import { Trans, t } from "@lingui/macro"
+import { Box, Center, Kbd, TextInput } from "@mantine/core"
+import { useOs } from "@mantine/hooks"
+import { Spotlight, type SpotlightActionData, spotlight } from "@mantine/spotlight"
+import { redirectToFeed } from "app/redirect/thunks"
+import { useAppDispatch } from "app/store"
+import type { Subscription } from "app/types"
+import { FeedFavicon } from "components/content/FeedFavicon"
+import { useMousetrap } from "hooks/useMousetrap"
+import { TbSearch } from "react-icons/tb"
+
+export interface TreeSearchProps {
+    feeds: Subscription[]
+}
+
+export function TreeSearch(props: TreeSearchProps) {
+    const dispatch = useAppDispatch()
+    const isMacOS = useOs() === "macos"
+    const actions: SpotlightActionData[] = props.feeds
+        .map(f => ({
+            id: `${f.id}`,
+            label: f.name,
+            leftSection: <FeedFavicon url={f.iconUrl} />,
+            onClick: async () => await dispatch(redirectToFeed(f.id)),
+        }))
+        .sort((f1, f2) => f1.label.localeCompare(f2.label))
+
+    const searchIcon = <TbSearch size={18} />
+    const rightSection = (
+        <Center style={{ cursor: "pointer" }} onClick={() => spotlight.open()}>
+            <Kbd>{isMacOS ? "Cmd" : "Ctrl"}</Kbd>
+            <Box mx={5}>+</Box>
+            <Kbd>K</Kbd>
+        </Center>
+    )
+
+    // additional keyboard shortcut used by commafeed v1
+    useMousetrap("g u", () => spotlight.open())
+
+    return (
+        <>
+            <TextInput
+                placeholder={t`Search`}
+                leftSection={searchIcon}
+                rightSectionWidth={100}
+                rightSection={rightSection}
+                styles={{
+                    input: {
+                        cursor: "pointer",
+                    },
+                }}
+                onClick={() => spotlight.open()}
+                // prevent focus
+                onFocus={e => e.target.blur()}
+                readOnly
+            />
+            <Spotlight
+                actions={actions}
+                limit={10}
+                shortcut="mod+k"
+                searchProps={{
+                    leftSection: searchIcon,
+                    placeholder: t`Search`,
+                }}
+                nothingFound={<Trans>Nothing found</Trans>}
+            />
+        </>
+    )
+}

commafeed-client/src/components/sidebar/UnreadCount.tsx

@@ -1,26 +1,26 @@
-import { Badge, Tooltip } from "@mantine/core"
-import { Constants } from "app/constants"
-import { tss } from "tss"
-
-const useStyles = tss.create(() => ({
-    badge: {
-        width: "3.2rem",
-        // for some reason, mantine Badge has "cursor: 'default'"
-        cursor: "pointer",
-    },
-}))
-
-export function UnreadCount(props: { unreadCount: number }) {
-    const { classes } = useStyles()
-
-    if (props.unreadCount <= 0) return null
-
-    const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
-    return (
-        <Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}>
-            <Badge className={classes.badge} variant="light">
-                {count}
-            </Badge>
-        </Tooltip>
-    )
-}
+import { Badge, Tooltip } from "@mantine/core"
+import { Constants } from "app/constants"
+import { tss } from "tss"
+
+const useStyles = tss.create(() => ({
+    badge: {
+        width: "3.2rem",
+        // for some reason, mantine Badge has "cursor: 'default'"
+        cursor: "pointer",
+    },
+}))
+
+export function UnreadCount(props: { unreadCount: number }) {
+    const { classes } = useStyles()
+
+    if (props.unreadCount <= 0) return null
+
+    const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
+    return (
+        <Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}>
+            <Badge className={classes.badge} variant="light">
+                {count}
+            </Badge>
+        </Tooltip>
+    )
+}