wip

src/components/UI/Sidebar/sidebarButton.tsx

@@ -3,6 +3,7 @@ import type { LucideIcon } from "lucide-react";
 
 export interface SidebarButtonProps {
   label: string;
+  count?: number;
   active?: boolean;
   Icon?: LucideIcon;
   element?;
@@ -13,6 +14,7 @@ export const SidebarButton = ({
   label,
   active,
   Icon,
+  count,
   element,
   onClick,
 }: SidebarButtonProps) => (
@@ -25,5 +27,6 @@ export const SidebarButton = ({
     {Icon && <Icon size={16} />}
     {element && element}
     <span className="flex flex-1 justify-start shrink-0">{label}</span>
+    {count > 0 && <div className="justify-end notification-count">{count}</div>}
   </Button>
 );

src/core/stores/appStore.ts

@@ -9,6 +9,7 @@ export interface RasterSource {
   tileSize: number;
 }
 
+
 interface ErrorState {
   field: string;
   message: string;
@@ -19,7 +20,12 @@ interface ErrorState {
   message: string;
 }
 
-interface AppState {
+export interface App {
+  unreadCounts: Map<number, number>;
+  setUnread: (id: number, count: number) => void;
+}
+
+export interface AppState {
   selectedDevice: number;
   devices: {
     id: number;
@@ -34,6 +40,7 @@ interface AppState {
   activeChat: number;
   chatType: "broadcast" | "direct";
   errors: ErrorState[];
+  unreadCounts: Map<number, number>;
 
   setRasterSources: (sources: RasterSource[]) => void;
   addRasterSource: (source: RasterSource) => void;
@@ -56,6 +63,9 @@ interface AppState {
   removeError: (field: string) => void;
   clearErrors: () => void;
   setNewErrors: (newErrors: ErrorState[]) => void;
+
+  // unread counts
+  setUnread: (id: number, count: number) => void;
 }
 
 export const useAppStore = create<AppState>()((set, get) => ({
@@ -70,6 +80,7 @@ export const useAppStore = create<AppState>()((set, get) => ({
   activeChat: Types.ChannelNumber.Primary,
   chatType: "broadcast",
   errors: [],
+  unreadCounts: new Map([[0, 100],[2718471552, 1]]),
 
   setRasterSources: (sources: RasterSource[]) => {
     set(
@@ -178,4 +189,11 @@ export const useAppStore = create<AppState>()((set, get) => ({
       }),
     );
   },
+  setUnread: (id: number, count: number) => {
+    set(
+      produce<AppState>((draft) => {
+        draft.unreadCounts.set(id, count);
+      })
+    );
+  }
 }));

src/core/stores/deviceStore.ts

@@ -64,6 +64,7 @@ export interface Device {
     pkiBackup: boolean;
     nodeDetails: boolean;
   };
+  unreadCounts: Map<number, number>;
 
   setStatus: (status: Types.DeviceStatusEnum) => void;
   setConfig: (config: Protobuf.Config.Config) => void;
@@ -98,6 +99,7 @@ export interface Device {
   setDialogOpen: (dialog: DialogVariant, open: boolean) => void;
   processPacket: (data: ProcessPacketParams) => void;
   setMessageDraft: (message: string) => void;
+  setUnread: (id: number, count: number) => void;
 }
 
 export interface DeviceState {
@@ -149,6 +151,7 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
           },
           pendingSettingsChanges: false,
           messageDraft: "",
+          unreadCounts: new Map([[0, 100],[2718471552, 1]]),
 
           setStatus: (status: Types.DeviceStatusEnum) => {
             set(
@@ -631,6 +634,17 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
               }),
             );
           },
+          setUnread: (id: number, count: number) => {
+              set(
+                produce<DeviceState>((draft) => {
+                  console.log(id, count);
+                  const device = draft.devices.get(id);
+                  if (device) {
+                    device.unreadCounts.set(id, count);
+                  }
+                })
+              );
+            }
         });
       }),
     );

src/core/subscriptions.ts

@@ -1,6 +1,7 @@
 import type { Device } from "@core/stores/deviceStore.ts";
 import { Protobuf, type Types } from "@meshtastic/core";
 
+
 export const subscribeAll = (
   device: Device,
   connection: Types.ConnectionType,
@@ -84,6 +85,7 @@ export const subscribeAll = (
       ...messagePacket,
       state: messagePacket.from !== myNodeNum ? "ack" : "waiting",
     });
+    device.unreadCounts.set(messagePacket.from, 1);
   });
 
   connection.events.onTraceRoutePacket.subscribe((traceRoutePacket) => {

src/index.css

@@ -110,3 +110,11 @@ img {
 .animate-spin-slow {
   animation: spin-slower 2s linear infinite;
 }
+
+.notification-count {
+  color: white;
+  border-radius: 20%;
+  padding-left: 2%;
+  padding-right: 2%;
+  background-color: rgb(195,0,0);
+}

src/pages/Messages.tsx

@@ -14,7 +14,7 @@ import { HashIcon, LockIcon, LockOpenIcon } from "lucide-react";
 import { useState } from "react";
 
 export const MessagesPage = () => {
-  const { channels, nodes, hardware, messages } = useDevice();
+  const { channels, nodes, hardware, messages, unreadCounts } = useDevice();
   const { activeChat, chatType, setActiveChat, setChatType } = useAppStore();
   const [searchTerm, setSearchTerm] = useState<string>("");
   const filteredNodes = Array.from(nodes.values()).filter((node) => {
@@ -38,6 +38,7 @@ export const MessagesPage = () => {
           {filteredChannels.map((channel) => (
             <SidebarButton
               key={channel.index}
+              count={unreadCounts.get(channel.index)}
               label={channel.settings?.name.length
                 ? channel.settings?.name
                 : channel.index === 0
@@ -47,6 +48,7 @@ export const MessagesPage = () => {
               onClick={() => {
                 setChatType("broadcast");
                 setActiveChat(channel.index);
+                unreadCounts.set(channel.index, 0);
               }}
               element={<HashIcon size={16} className="mr-2" />}
             />
@@ -66,12 +68,14 @@ export const MessagesPage = () => {
             {filteredNodes.map((node) => (
               <SidebarButton
                 key={node.num}
+                count={unreadCounts.get(node.num)}
                 label={node.user?.longName ??
                   `!${numberToHexUnpadded(node.num)}`}
                 active={activeChat === node.num}
                 onClick={() => {
                   setChatType("direct");
                   setActiveChat(node.num);
+                  unreadCounts.set(node.num, 1)
                 }}
                 element={
                   <Avatar