Tracking issue for Favourite Messages

[andybalaam]

Our Outreachy intern will be working on a prototype of favourite messages.

This is going to be an experiment, so we have freedom to work without needing designers to help us at every step, BUT it would be good to do something as close to what the final feature will look like as possible.

Design guidance

Here is the design guidance we have so far:

• We should call it "Favourite Messages".
• The UI should show an empty star when you hover over a message, then when you click it, it should become a filled-in star.
• Favourite messages should look different in the timeline: they should have a different background colour, and there should be a star visible even when you are not hovering. Ideally, you should be able to click the star to un-star the message.
• When you have favourite messages, the top of the room list should show "Favourite Messages" as an item.
• When you click "Favourite Messages", you see a view that is like the Search Results view you get when you search within a room (by clicking the search button in the top right). Each starred message should be shown, and when you click on it you can jump to it.
• The "Favourite Messages" view might be grouped by room, and might be ordered by the most recent message - we are not sure yet.

Draft timeline

• June 6 - June 23:
  • [x] Design the UI mockups and prototype - see mockup
  • [x] Add a labs flag for starred messages - in #8842
  • [x] Add a "star" button to context menu on a message - in #8842
  • [x] Discuss with mentor and design concerning the UI mockup and receive potential suggestions
  • [x] Define the scope of the project
  • [x] Get familiar with the codebase
• June 23 - July 16:
  • [x] Allow un-favouriting messages from the message menu
  • [x] Write first blog post - introduction - published at https://yaya-usman.hashnode.dev/outreachy-blog-introducing-myself
  • [x] Persist clicked state of star button, either in memory or in localstorage. GET THIS PR MERGED!
• July 18 - July 31:
  • [x] Start on the "Favourite Messages" screen - make it look like the search results - NOW IT IS USEFUL!
  • [x] Mid-term Evaluation
  • [x] Allow deleting favourites from "Favourite messages" screen
• August (end date: 26th August):
  • [x] Finish first version of "Favourite Messages" screen
    • [x] Change RoomView to display favourite messages when that is clicked
    • [x] Change the format you are saving messages into local storage. It should be e.g. [{"event_id":"ev1","room_id":"r1"},{"event_id":"ev2","room_id":"r2"}]
    • [x] When you click a room, it should exit from the Favourite Messages screen.
    • [x] When you click a message in the Favourite Messages screen, it should jump to that message in the original room
    • [x] Make favourite messages look different in the timeline
    • [x] Make Favourite Messages really act like a separate room
    • [x] Tests for this
  • [x] Header for the Favourite Messages screen
  • [x] Add searching, clear all and sorting functionality to the Favourite Messages screen
  • [x] Do a demo
  • [x] Write final blog post - giving a summary of your journey, what you have done, and talk about problems
  • [ ] Final Evaluation
• Later, other things to do (for someone else to do, or for fun, not part of the internship)
  • [ ] Add Undo functionality for unstarring a message when on the Favourite Messages screen
  • [ ] Learn about Account data and MSC2437
  • [ ] Decide whether to use MSC2437
  • [ ] Store the favourites information in Account Data
  • [ ] Extra work we didn't think of
  • [ ] Code improvements

Tech notes

• Can be done through MSC2437
  • Read through relevant feature requests to double check that it’ll work e.g. element-web#2938, element-web#5405
• MSC2437 is apparently already implemented in mobile SDKs, so if we add something to matrix-js-sdk we should use the same pattern.

[yaya-usman]

Below is a rough first draft wireframe/sketch video of what i intend achieving . I am open to inputs or more suggestions.

PS: It is subjected to change

https://user-images.githubusercontent.com/38439166/172411946-253a54d7-d466-49a3-bb3d-f64634b409f1.mp4

Here is a link to the wireframe as well: https://balsamiq.cloud/sjjlpb7/p1e0s5y

[thoraj]

Our users are asking for a way to "tag" and prioritize messages. This seems to be adressing a similar concern. The "starred" message is in effekt a message tagged with "starred".

At the risk of scope-creep, it would be great if the resulting data structures would support different (possibly custom) "tag-values" (in audition to 'starred'). This would allow extending the feature and GUI to support more generic tag/prioritize functionality.

[acxz]

To build on this idea each message can have two types of tags. One type of tag can be visible to everyone (the public facing tags can be assigned by people with the appropriate power level), and another tag could be assigned by and visible to you alone.

In fact, you can just build off the emojis, since users can create custom emojis (even with text) this is exactly a tag.

A use case of this is the following: Say I want to list all the messages that have the "interesting" emoji/tag. I can then see what the room thinks a "interesting" message is, or the message with the most "interesting". I could also see which messages I have personally thought to be "interesting".

[mcg-matrix]

At the risk of scope-creep, it would be great if the resulting data structures would support different (possibly custom) "tag-values" (in audition to 'starred'). This would allow extending the feature and GUI to support more generic tag/prioritize functionality.

I would like to mention that https://github.com/vector-im/element-meta/issues/319 contains thoughts and wishes on what users might want to be able to do if messages could get filtered (and then acted on) on "marks", "tags", "stars", or other properties (with "read status" being one such possible other property discussed in https://github.com/vector-im/element-meta/issues/347).

[mhavelka]

Hey guys, can I ask you if there is any progress on this feature since August? I can see the final step "Final Evaluation" is the only one missing and we are almost desperate to start using this.

My colleague just told me I should use e-mail when contacting her as she is lost in the Element in sense what "tasks" (chats) are waiting for her action and what not (= she cannot mark messages / chats in any way)

Thank you @andybalaam

[andybalaam]

Hi @mhavelka , thanks for your support on this!

I am actively working on this - I was hoping to get it done before end of 2022 but the code needed more work that I expected.

My progress is visible in this draft PR:

https://github.com/matrix-org/matrix-react-sdk/pull/9719

I need to write more tests, but the code is working for me.

Note that this comes with some caveats: it only works on Element Web, and it doesn't share your favourite messages with other devices (even other copies of Element Web). The idea is to extend it to share across all devices, but that is not being actively worked on right now.

[mhavelka]

@andybalaam Hey Andy, thanks a lot for your wonderful answer, trully appreciate your work.

I apologize for my lack of knowledge but Element Web and Element Desktop App (which should be Web running in some Electron?) is the same thing, is that right? So it will work in the Desktop app as well?

Caveats you mentioned are not the best but ... have something is better than have nothing.

[andybalaam]

@andybalaam Hey Andy, thanks a lot for your wonderful answer, trully appreciate your work.

Thank you!

I apologize for my lack of knowledge but Element Web and Element Desktop App (which should be Web running in some Electron?) is the same thing, is that right? So it will work in the Desktop app as well?

Yes, Element Desktop is an Electron wrapper around mostly the same code as Element Web, so this feature should work in Element Desktop too.

Caveats you mentioned are not the best but ... have something is better than have nothing.

:+1:

[andybalaam]

Sad news: it turns out the PR to make this into a reality needs a lot more work, and I'm not going to be able to squeeze this in between my work at the moment, so this is stalled :-(

Any help much appreciated! See the PR for details of what needs fixing: https://github.com/matrix-org/matrix-react-sdk/pull/9719

[t3chguy]

Closing in favour of https://github.com/vector-im/element-web/issues/24261 which better scopes the remaining work