the "new-feed-entries" websocket event no longer needs to reload the entire tree

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

@@ -26,6 +26,22 @@ export const treeSlice = createSlice({
         toggleSidebar: state => {
             state.sidebarVisible = !state.sidebarVisible
         },
+        incrementUnreadCount: (
+            state,
+            action: PayloadAction<{
+                feedId: number
+                amount: number
+            }>
+        ) => {
+            if (!state.rootCategory) return
+            visitCategoryTree(state.rootCategory, c =>
+                c.feeds
+                    .filter(f => f.id === action.payload.feedId)
+                    .forEach(f => {
+                        f.unread += action.payload.amount
+                    })
+            )
+        },
     },
     extraReducers: builder => {
         builder.addCase(reloadTree.fulfilled, (state, action) => {
@@ -53,4 +69,4 @@ export const treeSlice = createSlice({
     },
 })
 
-export const { setMobileMenuOpen, toggleSidebar } = treeSlice.actions
+export const { setMobileMenuOpen, toggleSidebar, incrementUnreadCount } = treeSlice.actions

commafeed-client/src/hooks/useWebSocket.ts

@@ -1,9 +1,22 @@
 import { setWebSocketConnected } from "app/server/slice"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { reloadTree } from "app/tree/thunks"
+import { type AppDispatch, useAppDispatch, useAppSelector } from "app/store"
+import { incrementUnreadCount } from "app/tree/slice"
 import { useEffect } from "react"
 import WebsocketHeartbeatJs from "websocket-heartbeat-js"
 
+const handleMessage = (dispatch: AppDispatch, message: string) => {
+    const parts = message.split(":")
+    const type = parts[0]
+    if (type === "new-feed-entries") {
+        dispatch(
+            incrementUnreadCount({
+                feedId: +parts[1],
+                amount: +parts[2],
+            })
+        )
+    }
+}
+
 export const useWebSocket = () => {
     const websocketEnabled = useAppSelector(state => state.server.serverInfos?.websocketEnabled)
     const websocketPingInterval = useAppSelector(state => state.server.serverInfos?.websocketPingInterval)
@@ -27,7 +40,7 @@ export const useWebSocket = () => {
             ws.onmessage = event => {
                 const { data } = event
                 if (typeof data === "string") {
-                    if (data.startsWith("new-feed-entries:")) dispatch(reloadTree())
+                    handleMessage(dispatch, data)
                 }
             }
         }