Repository navigation
Show badge with unread counter #90
Description
Activity
- changed the title
[-]Show badge with unread counter (opt-in)[/-][+]Show badge with unread counter[/+]on Jan 9, 2019 @brunolemos how about Menubar mode badge in the status bar?
Reacted by Bruno LemosI might actually take a stab at implementing that. I'm familiar with the react-native-web architecture, but not the specifics of this project. Is this the right place for that change?
Also, for the number, the only way I can think to do it is to have different images for each number. Maybe created dynamically as discussed here: electron/electron#7322
@dkniffin yes that would be the file!
I think the hardest part will be that each column needs to have a config to enable or disable the badge (and I haven't created a UI for that or thought about config object structure yet); but we can think of a simpler solution to start.
I recently created a method called
getItemsFilterMetadatathat returns the number of unread items for a specific column and that was a requirement for the badge feature, so it will come handy.devhub/packages/components/src/components/columns/ColumnOptions.tsx
Lines 525 to 533 in e096f47
The code above shows the number
49at the screenshot below:
Also needs to think where is the best place to put a watcher for these unread numbers. Probably a react Context. And then, send the info to electron using the
window.ipc.sendmethod.@johnletey Yeah, if I do anything on here, it would be the menubar indicator
@brunolemos I'm trying to get the menubar/tray indicator working. I know how to render it, but I'm having a hard time figuring out how to get the data needed to determine which state to render it in. You mentioned
getItemsFilterMetadata, but I'm not sure how to use that in theTray.tsfile, since I need access to a column, but I don't know which column is being displayed. Thoughts?@dkniffin the
tray.tsfile is the last step, everything else will happen inside thecomponentspackage.Check the file
Sidebar.tsx, it is a mess but it has everything you need there. It lists all the columns and show an unread indicator.I think we need a React Context, e.g.
UnreadWatcherContext.tsx, that will be responsible to check the unread indicator for all columns. If there are columns with unread items, let’s sum the number of items and communicate it to Electron (which is running on a different thread).To send messages to Electron, first check that it is an electron app (
if (Platform.isElectron) {) and send the event (e.g.window.ipc.send(‘unread-counter’, numberOfUnreadItems)).You need to listen to this
unread-counterevent on Electron (filedesktop/src/index.ts), with aapp.on(‘unread-counter’, …event listener). And then change the menubar icon badge (tray.yourMethodHere(counter)).Ok, thanks. That makes sense. I'll give that a shot
You can use this to get all the columns:
const columns = useReduxState(selectors.columnsArrSelector)And then for each column you do something like this to get the unread count for each one:
devhub/packages/components/src/components/layout/Sidebar.tsx
Lines 614 to 635 in 838840a
@brunolemos These context objects are unfamiliar to me. Are these the same as React Contexts or is this a different thing?
1 remaining item
@brunolemos Sorry I keep pestering you with questions about this. I think I've got the context set up correctly, and I understand how to pass the event over to electron, but the piece I'm missing is where to actually do that passing. Does that belong in
MainScreen.tsxor somewhere else?Hm you can do it directly inside the context provider for now, or create a new file (e.g.
AppIconBadge.tsx) and include it at the MainScreen render (<AppIconBadge />). And then inside this file read the context value (that should return the number of unread items) and update the app icon accordingly.Reacted by Derek Kniffin- added 6 commits that reference this issue
on Jul 2, 2019 - added 2 commits that reference this issue
on Jul 11, 2019 This is now available on v0.93.0! For web and desktop.
To show an unread badge on mobile there are two possible ways:
- Run a script on app background every X minutes (has limitations: if app gets closed it will stop updating, minimum 15 minute interval to update, etc)
- Move this responsibility to the server (probably would not scale well, imagine the server having to do thousands of github API requests per minute)
N2 would provide a better UX but not sure if it's feasible, github would block the server for spamming/ddos. Help wanted on N1 for now!
- added a commit that references this issue
on Aug 31, 2026
Help wanted