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

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>
    )
}