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:
  • Design the UI mockups and prototype - see mockup
  • Add a labs flag for starred messages - in #8842
  • Add a "star" button to context menu on a message - in #8842
  • Discuss with mentor and design concerning the UI mockup and receive potential suggestions
  • Define the scope of the project
  • Get familiar with the codebase
• June 23 - July 16:
  • Allow un-favouriting messages from the message menu
  • Write first blog post - introduction - published at https://yaya-usman.hashnode.dev/outreachy-blog-introducing-myself
  • Persist clicked state of star button, either in memory or in localstorage. GET THIS PR MERGED!
• July 18 - July 31:
  • Start on the "Favourite Messages" screen - make it look like the search results - NOW IT IS USEFUL!
  • Mid-term Evaluation
  • Allow deleting favourites from "Favourite messages" screen
• August (end date: 26th August):
  • Finish first version of "Favourite Messages" screen
    • Change RoomView to display favourite messages when that is clicked
    • 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"}]
    • When you click a room, it should exit from the Favourite Messages screen.
    • When you click a message in the Favourite Messages screen, it should jump to that message in the original room
    • Make favourite messages look different in the timeline
    • Make Favourite Messages really act like a separate room
    • Tests for this
  • Header for the Favourite Messages screen
  • Add searching, clear all and sorting functionality to the Favourite Messages screen
  • Do a demo
  • 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.