cleanup

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

@@ -10,9 +10,10 @@ import {
     redirectToTagDetails,
 } from "app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
+import type { TreeSubscription } from "app/tree/slice"
 import { collapseTreeCategory } from "app/tree/thunks"
-import type { Category, Subscription, TreeSubscription } from "app/types"
-import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
+import type { Category, Subscription } from "app/types"
+import { categoryHasNewEntries, categoryUnreadCount, flattenCategoryTree } from "app/utils"
 import { Loader } from "components/Loader"
 import { OnDesktop } from "components/responsive/OnDesktop"
 import React from "react"
@@ -89,6 +90,7 @@ export function Tree() {
             name={<Trans>All</Trans>}
             icon={allIcon}
             unread={categoryUnreadCount(root)}
+            hasNewEntries={categoryHasNewEntries(root)}
             selected={source.type === "category" && source.id === Constants.categories.all.id}
             expanded={false}
             level={0}
@@ -103,6 +105,7 @@ export function Tree() {
             name={<Trans>Starred</Trans>}
             icon={starredIcon}
             unread={0}
+            hasNewEntries={false}
             selected={source.type === "category" && source.id === Constants.categories.starred.id}
             expanded={false}
             level={0}
@@ -122,6 +125,7 @@ export function Tree() {
                 name={category.name}
                 icon={category.expanded ? expandedIcon : collapsedIcon}
                 unread={categoryUnreadCount(category)}
+                hasNewEntries={categoryHasNewEntries(category)}
                 selected={source.type === "category" && source.id === category.id}
                 expanded={category.expanded}
                 level={level}
@@ -143,12 +147,12 @@ export function Tree() {
                 name={feed.name}
                 icon={feed.iconUrl}
                 unread={feed.unread}
+                hasNewEntries={!!feed.hasNewEntries}
                 selected={source.type === "feed" && source.id === String(feed.id)}
                 level={level}
                 hasError={feed.errorCount > errorThreshold}
                 onClick={feedClicked}
                 key={feed.id}
-                newMessages={feed.hasNewEntries}
             />
         )
     }
@@ -160,6 +164,7 @@ export function Tree() {
             name={tag}
             icon={tagIcon}
             unread={0}
+            hasNewEntries={false}
             selected={source.type === "tag" && source.id === tag}
             level={0}
             hasError={false}

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

@@ -15,7 +15,7 @@ interface TreeNodeProps {
     expanded?: boolean
     level: number
     hasError: boolean
-    newMessages?: boolean
+    hasNewEntries: boolean
     onClick: (e: React.MouseEvent, id: string) => void
     onIconClick?: (e: React.MouseEvent, id: string) => void
 }
@@ -65,12 +65,12 @@ export function TreeNode(props: TreeNodeProps) {
         hasError: props.hasError,
         hasUnread: props.unread > 0,
     })
-
     return (
         <Box
             py={1}
             pl={props.level * 20}
             className={`${classes.node} cf-treenode cf-treenode-${props.type}`}
+            onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}
             data-id={props.id}
             data-type={props.type}
             data-unread-count={props.unread}
@@ -81,7 +81,7 @@ export function TreeNode(props: TreeNodeProps) {
             <Box className={classes.nodeText}>{props.name}</Box>
             {!props.expanded && (
                 <Box className="cf-treenode-unread-count">
-                    <UnreadCount unreadCount={props.unread} newMessages={props.id !== "all" ? props.newMessages : false} />
+                    <UnreadCount unreadCount={props.unread} showIndicator={props.hasNewEntries} />
                 </Box>
             )}
         </Box>

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

@@ -5,20 +5,20 @@ 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; newMessages: boolean | undefined }) {
+export function UnreadCount(props: { unreadCount: number; showIndicator: boolean }) {
     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}>
-            <Indicator disabled={!props.newMessages} size={4} offset={10} position="top-start" color="orange" withBorder={false} zIndex={5}>
+            <Indicator disabled={!props.showIndicator} size={4} offset={10} position="middle-start">
                 <Badge className={`${classes.badge} cf-badge`} variant="light" fullWidth>
                     {count}
                 </Badge>