Adding red dot indicator feature, got main components done

commafeed-client/src/app/tree/slice.ts

@@ -43,6 +43,20 @@ export const treeSlice = createSlice({
     },
     extraReducers: builder => {
         builder.addCase(reloadTree.fulfilled, (state, action) => {
+            visitCategoryTree(action.payload, category => {
+            category.feeds = category.feeds.map(feed => {
+            const storageKey = `feed-${feed.id}-unread`
+            const prevUnread = parseInt(localStorage.getItem(storageKey) || "0", 10)
+            const hasNewEntries = feed.unread > prevUnread
+
+            localStorage.setItem(storageKey, feed.unread.toString())
+
+            return {
+                ...feed,
+                hasNewEntries
+            }
+            })
+        })
             state.rootCategory = action.payload
         })
         builder.addCase(collapseTreeCategory.pending, (state, action) => {

commafeed-client/src/app/types.ts

@@ -30,13 +30,17 @@ export interface Subscription {
     filter?: string
 }
 
+export interface TreeSubscription extends Subscription {
+    hasNewEntries?: boolean
+}
+
 export interface Category {
     id: string
     parentId?: string
     parentName?: string
     name: string
     children: Category[]
-    feeds: Subscription[]
+    feeds: TreeSubscription[]
     expanded: boolean
     position: number
 }

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

@@ -11,7 +11,7 @@ import {
 } from "app/redirect/thunks";
 import { useAppDispatch, useAppSelector } from "app/store";
 import { collapseTreeCategory } from "app/tree/thunks";
-import type { Category, Subscription } from "app/types";
+import type { Category, Subscription, TreeSubscription } from "app/types";
 import { categoryUnreadCount, flattenCategoryTree } from "app/utils";
 import { Loader } from "components/Loader";
 import { OnDesktop } from "components/responsive/OnDesktop";
@@ -35,7 +35,6 @@ const collapsedIcon = <TbChevronRight size={16} />;
 const errorThreshold = 9;
 
 export function Tree() {
-  const [hasNewMessages, setHasNewMessages] = useState(false);
   const root = useAppSelector((state) => state.tree.rootCategory);
   const source = useAppSelector((state) => state.entries.source);
   const tags = useAppSelector((state) => state.user.tags);
@@ -91,15 +90,7 @@ export function Tree() {
     }
   };
 
-  useEffect(() => {
-    const prevCount = JSON.parse(localStorage.getItem("FeedCount") || "0");
-    const currentCount = categoryUnreadCount(root);
-
-    if (currentCount > prevCount) {
-      setHasNewMessages(true);
-    }
-    localStorage.setItem("FeedCount", JSON.stringify(currentCount));
-  }, [root?.feeds.length]);
+  console.log(root?.feeds.map(f => f.hasNewEntries));
 
   const allCategoryNode = () => (
 
@@ -116,7 +107,6 @@ export function Tree() {
       level={0}
       hasError={false}
       onClick={categoryClicked}
-      newMessages={hasNewMessages}
     />
   );
   const starredCategoryNode = () => (
@@ -163,7 +153,7 @@ export function Tree() {
     );
   };
 
-  const feedNode = (feed: Subscription, level = 0) => {
+  const feedNode = (feed: TreeSubscription, level = 0) => {
     if (!isFeedDisplayed(feed)) return null;
 
     return (
@@ -178,6 +168,7 @@ export function Tree() {
         hasError={feed.errorCount > errorThreshold}
         onClick={feedClicked}
         key={feed.id}
+        newMessages={feed.hasNewEntries}
       />
     );
   };

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

@@ -16,6 +16,9 @@ export function UnreadCount(props: { unreadCount: number, newMessages: boolean |
 
     const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
 
+    console.log(props.newMessages);
+    
+
     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}>