Tray icon/indicator Fix

[stkrknds]

Hello everyone. I was able to find a fix for the issue where the tray icon does not indicate if there are any unread messages(related issues #1995, #1825, #1823). I'm reluctant to open a pull request because I'm a complete newbie to ts/js/electron (I've been working on this for a few days) and I'm not sure about the quality of the code.

From what I understand, there seem to be two problems:

• The observer, which "observes" the sidebar, does not trigger when the conversation list changes.

• The conversation list selector is not receiving the actual list of the conversations.

The commit:
stkrknds@31c6fec

As I said, I don't know much about web development, so the code is probably lacking in quality. I would appreciate it if someone could take a look at it and suggest improvements.
Thank you very much for your time.

[wallneradam]

Hello, I've tried your modifications and unfortunately the tray icon remains if I get a message.

[stkrknds]

Hello @wallneradam . What language do you use in Messenger?

Sorry about closing and reopening the issue. Missclick.

[wallneradam]

I'm using it in Hungarian. Just looked at it again and see there is a dictionary with language codes. I added my language code to it and now waiting for a message...
I'm also not an Electron developer, though working with JS a lot. I would add a fallback to line 239 to use english if the locale is not in the dictianary.

[dusansimic]

Hi @stkrknds. Thanks for the contribution and the time you took to look over the issue and figure out your way around the codebase! 😄

The problematic thing about your implementation is that it relies on the display language to work. aria tags are used for accessibility features, not really for querying elements. What we mostly rely throughout the project are class names and role tags (example 1, example 2). This way it works for any display language but it does require us to monitor the page source changes (class name changes) and fix the query selectors accordingly.

Since both the observer and a query that gathers all the conversations rely on correct selectors, fixing them in a more universal way (for now we think it's roles and class names) would work for any display language. If you're interested in working on this issue, that would probably be a way to go. I understand you're not a web developer but I'm here if you need any pointers 😄.

Thanks again for the time and effort you invested into this issue!

[stkrknds]

Yes @wallneradam , you need to add your language to the dictionary. First you need to find out what the 'Mark as read' and 'Chats' strings are in Hungarian and then add them to the dictionary:

const translationDict = {
	hu : {markRead : 'String here',
		 chats : 'String here',
	     },
};

You don't have to wait for a new message, you can mark a conversation as unread(click on the three dots) and test it that way.

[stkrknds]

Hello @dusansimic. Yes I understand that this implementation is indeed problematic. I will try to find another way, that doesn't rely on aria tags. But, if I'm not mistaken, the current implementation of Caprine(without the changes), uses this to check if a conversation is unread.
conversation.unread = Boolean(element.querySelector('[aria-label="Mark as Read"]'));
So I modified it to work with different languages😁.

[stkrknds]

Hello there. I have replaced the aria labels, with class names/roles. Now it works fine regardless of the display language. Again, the code probably needs improvement.

stkrknds@50a1f20

There is also another way to update the tray icon. Instead of parsing the conversation list, we could just check the Chats icon(in the left sidebar). Do you think something like this would be a good idea?

Thanks for your time.

[dusansimic]

@stkrknds thanks for the contribution again! The code looks nice, however there are some things that should be changed but linter will probably tell you about that. You can run npm run test and see what should be changed.

There is also another way to update the tray icon. Instead of parsing the conversation list, we could just check the Chats icon(in the left sidebar). Do you think something like this would be a good idea?

That's a good idea! I think this solution is fine as a fix but if you'd like to try and fix it by checking out the icon, that would be great!

Could you send the solution via a pull request? GitHub workflow will automatically run all the tests on the code so we can make sure that everything is in order before getting merged.

[stkrknds]

Hello @dusansimic. I've implemented a fix by utilizing the "Chats" icon. It requires some big changes, but I find this implementation superior to the previous one. It's much simpler to get the number of unread messages, more stable and additionally, we don't have to worry about muted conversations, because messenger does the work for us. I would like to hear your thoughts. Thanks again for your time.
stkrknds@c0b1c56