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

[brunolemos]

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

	const { allItems } = useColumnData(column.id, getFilteredItemsOptions)
	const filteredItemsMetadata = getItemsFilterMetadata(
	column.type,
	getFilteredItems(
	column.type,
	allItems,
	{ ...column.filters, unread: undefined },
	getFilteredItemsOptions,
	),
	)
	const inbox =
	column.type === 'notifications' &&
	column.filters &&
	column.filters.notifications &&
	column.filters.notifications.participating
	? 'participating'
	: 'all'
	const isUnread =
	filteredItemsMetadata.inbox[inbox].unread > 0 ? true : false

[dkniffin]

@brunolemos These context objects are unfamiliar to me. Are these the same as React Contexts or is this a different thing?

[brunolemos]

@dkniffin yes, normal React Context, like this: https://github.com/devhubapp/devhub/blob/master/packages/components/src/components/context/ColumnWidthContext.tsx

That is initiated at the App.tsx file: https://github.com/devhubapp/devhub/blob/master/packages/components/src/components/App.tsx

[dkniffin]

@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.tsx or somewhere else?

[brunolemos]

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.

[brunolemos]

This is now available on v0.93.0! For web and desktop.

[brunolemos]

To show an unread badge on mobile there are two possible ways:

1. 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)
2. 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!