Design for Global Dashboard

[taoeffect]

Problem

We need a place to:

• Handle DMs between users outside of groups
• Display important news related to Group Income (e.g. feature updates, etc.)
• Possibly host global widgets (for example, possible leaderboards to encourage competition between groups to perform well)

Solution

Design a global dashboard that has the capability of handling all of this stuff, or at the very least DMs + news.

[SebinSong]

[ Figma link ] : https://www.figma.com/file/mxGadAHfkWH6qApebQvcdN/Group-Income-2.0?type=design&node-id=26396-326779&mode=design&t=LHJ3EeI9yZVurepS-0

[SebinSong]

Hi @taoeffect , just started researching/working on this issue. One instant question is,

Q. is this Global dashboard expected to show only when there is a multiple groups for the user? Or do we show this page even when the user has only one group?

Also, to make the development&testing feel smoother, I'm thinking of splitting this issue into 3 PRs, which are

1. News&updates -> 2) Direct messages -> 3) Dashboard

which is 'smaller' -> 'larger' order. Does it sound good?

[taoeffect]

Q. is this Global dashboard expected to show only when there is a multiple groups for the user? Or do we show this page even when the user has only one group?

I'm thinking it probably makes sense to always show it.

which is 'smaller' -> 'larger' order. Does it sound good?

Well, I'm a bit confused because it's not clear to me what the difference between "News & Updates" and "Dashboard" is. Doesn't implementing the "News & Updates" require implementing the scaffolding for the Dashboard as well?

[SebinSong]

@taoeffect I might have misunderstood the figma. so are we only caring about this red-box but not the skeleton-like designs above it?

[taoeffect]

@SebinSong The two designs above it don't have the right names. Sorry that it's not clear! What I meant by the "Global Dashboard" is this entire page, and all of the sub pages within it, so the general layout of that page.

[SebinSong]

@taoeffect No worries on that (since there is no designer at the company atm). Okay, then I can split this task into two PRs which is,

Step 1) Entire layout of the Global dashboard (also making sure it looks good in all screen sizes) + adding 'News & Updates' sub-page. Step 2) Adding 'Direct messages' sub-page.

Does it sound good?

[taoeffect]

@SebinSong Yep! Perfect 👍

[SebinSong]

Hi @taoeffect , currently working on the 'step 2' of here and need your help with clarifying the scope of work.

I remember you saying in a Slack thread(was not able to find where) that DMing to people outside of the groups of an user is not something we are looking to implement for now. is this right?

So if the above statement is correct, to me it looks like this page will list the existing DMs of a user and clicking the items obviously navigates to the corresponding DM Chat page. is this correct?

Thanks,

[taoeffect]

So if the above statement is correct, to me it looks like this page will list the existing DMs of a user and clicking the items obviously navigates to the corresponding DM Chat page. is this correct?

No, this page should be a global view of all open DMs you have, across all groups, and in the future will include DMs outside of groups too. Clicking the "Direct Messages" should open up a chat view that's very similar to the one we already have, except it shouldn't show any chat channels, only all open DMs you have.

[SebinSong]

@taoeffect

Clicking the "Direct Messages" should open up a chat view that's very similar to the one we already have

You mean clicking each of these items will lead to showing the chat inside this Global dashboard, instead of navigating to the DM page?(the second screenshot) (Wouldn't it be also good to just navigate to this DM page instead of working on creating another chat UI that is part of Global-dashboard?)

[DM page]

[taoeffect]

You mean clicking each of these items will lead to showing the chat inside this Global dashboard, instead of navigating to the DM page?

Correct.

Wouldn't it be also good to just navigate to this DM page instead of working on creating another chat UI that is part of Global-dashboard

No, because we could have a DM with the same person in two different groups. Which group do you navigate to then?

And again, we will have DMs outside of groups. Which group do you navigate to if there's no group?

[SebinSong]

@taoeffect Makes sense. I will work on creating another chatroom UI in the global dashboard then.

[SebinSong]

Hi @Silver-IT , I'm currently working on implementing this 'Direct Messages' page in the Global dashboard of the app and need your advice/help, as you are someone who has spent more time in the chatroom area than any others.

So as you can guess from the screenshot above, obviously the core part of the implementation is to load all the DMs data a user has. I've been spending hours on researching how this is currently happening in GroupChat.vue of and this is what I've discovered so far (can be incorrect).

1. ourDirectMessages getter holds all the chatroom IDs of a user's open DMs.
2. we need to fetch the chelonia events data using either

• await sbp('gi.db/archive/load', 'messages/${this.ourIdentityContractId}/${chatroomId}')
• await sbp('chelonia/out/latestHEADInfo', chatroomId) and sbp('chelonia/out/eventsBefore', chatroomId, ...

3. and then we somehow need to process the event chain we got from 2. above using sbp('chelonia/in/processMessage', ...)

etc...

Which is way too complex to re-write and most importantly, currently this logic seems to be written in a way that is closely coupled to the utilities in ChatMain.vue (e.g. this.generateNewChatRoomState() in there is necessary for 3. above)

---

In summary,

Q1. is there a better way to get all DM data a particular user has? For example, do you think it's possible to create a function like

function getAllDMsByUserId (identityContractId) { 
...
  return [
     { chatroomID: ..., messages: [ ...], other attributes },
     ...
  ]
}

Q2. If the answer for Q1. is yes, would you be able to help with that part? (I think you have the best expertise for these parts so it better be worked on by you if needed.)

[Silver-IT]

@SebinSong, it's not efficient to save all the messages in the contract state, and that's why we render the events in ChatMain.vue only whenever it's needed. At the moment, we don't have any function that returns the response as you expected because we don't render chatroom contract events unless the user is in Chat page.

Of course, it's possible to make that kind of function, but I need to discuss the solution with @taoeffect beforehand. Will keep you updated soon.

[SebinSong]

@Silver-IT Thanks, Alex.

[SebinSong]

I have only worked on preparing the UI elements for the 'Direct Messages' sub-page like below (currently rendered with some dummy data I created for development). Once the solution for the above discussion regarding loading the DM data from outside of GroupChat.vue is confirmed & prepared, I will continue to work on this..!

[SebinSong]

@Silver-IT So from the mergence of this PR of yours on, it's possible to load DM data from outside the GroupChat.vue component, right? can you leave some notes on how to do this?

[Silver-IT]

It's possible to load DM data outside the GroupChat.vue, right? Can you leave some notes on how to do this?

What I did in the PR #1965 is that we added messages in the contract state. So no matter it's DM or not, all the chatroom contracts have the messages fields which saves the latest 20 messages. (Exactly, at most 20 messages). I remember the problem was to display the last message.

[SebinSong]

Thanks, @Silver-IT