Show badge with unread counter

[brunolemos]

• Show an "unread dot" on sidebar items
• Show a badge counter on app icon:
  • Web
  • Desktop
  • iOS
  • Android
• Only enable for the columns the user specify

Help wanted

• Enable on mobile using a background task to keep it updated
• Fix Android badge (🔥 Badge counter does not work invertase/react-native-firebase#1945)

[panva]

@brunolemos how about Menubar mode badge in the status bar?

[dkniffin]

Menubar badge would be 💯. I've been using Gitify for a long time, and it changes the color when there's unread notifications, which works great. But knowing the number too somehow would be icing on that cake.

[dkniffin]

I 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

[brunolemos]

@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 getItemsFilterMetadata that 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

	const filteredItemsMetadata = getItemsFilterMetadata(
	column.type,
	getFilteredItems(
	column.type,
	allItems,
	{ ...column.filters, unread: undefined },
	getFilteredItemsOptions,
	),
	)

devhub/packages/components/src/components/columns/ColumnOptions.tsx

Line 625 in e096f47

unread: filteredItemsMetadata.inbox[inbox].unread,

The code above shows the number 49 at 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.send method.

[jletey]

@dkniffin are you going to just work on the icon badge counter? if so, I can have a go at the "unread dot" on sidebar items (kind of like Slack and Discord)

[dkniffin]

@johnletey Yeah, if I do anything on here, it would be the menubar indicator

[jletey]

@dkniffin Wonderful ... I will get started on the "unread dot" feature now!

[dkniffin]

@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 the Tray.ts file, since I need access to a column, but I don't know which column is being displayed. Thoughts?

[brunolemos]

@dkniffin the tray.ts file is the last step, everything else will happen inside the components package.

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-counter event on Electron (file desktop/src/index.ts), with a app.on(‘unread-counter’, … event listener). And then change the menubar icon badge (tray.yourMethodHere(counter)).

[dkniffin]

Ok, thanks. That makes sense. I'll give that a shot