Display favourite messages in a room-like view #9719

andybalaam · 2022-12-07T12:14:02Z

Originally developed by @yaya-usman but remodelled quite a bit now by @andybalaam

This creates a new view that you can access in a similar way to a room:

It displays all your favourite messages.

Apologies for the huge review. Do ask me and I can walk you through it interactively.

Here's what your changelog entry will look like:

✨ Features

Display favourite messages in a room-like view (#9719). Contributed by @andybalaam.

andybalaam · 2022-12-16T17:42:05Z

Work will continue on this in January

andybalaam · 2023-01-06T02:05:03Z

Prerequisite: matrix-org/matrix-analytics-events#76

turt2live

generally seems good, thank you!

src/components/structures/FavouriteMessagesView/ConfirmClearDialog.tsx

src/components/structures/FavouriteMessagesView/FavouriteMessagesPanel.tsx

turt2live · 2023-01-06T22:22:07Z

src/components/structures/FavouriteMessagesView/FavouriteMessagesTilesList.tsx

+                lastRoomId = roomId!;
+            }
+
+            const resultLink = "#/room/" + roomId + "/" + mxEvent.getId();


this appears to be an assumption of our url routing which isn't guaranteed - can we convert it to a view_room dispatch instead?

It's copied from here: https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/components/structures/RoomSearchView.tsx#L255

I presume that could do with fixing too?

Looking into the code, it seems that EventTile does not currently support an onClick or similar event, so the only way to allow clicking a tile to jump somewhere else is with its highlightLink property as we have done here and in RoomSearchView.

Given how long this PR has festered, I'd like to argue that fixing this is outside of the scope of this PR, and something we can do later.

src/components/structures/FavouriteMessagesView/FavouriteMessagesView.tsx

src/components/views/messages/MessageActionBar.tsx

src/dispatcher/actions.ts

src/hooks/useFavouriteMessages.ts

package.json

andybalaam · 2023-01-19T17:01:58Z

i18n test is failing with

fatal: couldn't find remote ref andybalaam/favourite-messages-rebased

which I don't understand

andybalaam · 2023-01-20T09:46:54Z

OK, CI seems happy so requesting a re-review from @t3chguy

andybalaam · 2023-01-20T09:49:12Z

OK, CI seems happy so requesting a re-review from @t3chguy

Scratch that - techguy is too busy today so I'll ask someone else.

weeman1337 · 2023-01-20T10:08:41Z

Played a bit around with it on the deployment here. I like it 👍
Some issues I found:

If you favourite a poll, it explodes with:

Uncaught (in promise) TypeError: f.content.body is undefined
    filterFavourites FavouriteMessagesView.tsx:72
    filterFavourites FavouriteMessagesView.tsx:71
    calcEvents FavouriteMessagesView.tsx:134
    recalcEvents FavouriteMessagesView.tsx:43
    FavouriteMessagesView FavouriteMessagesView.tsx:49
    fk React
    unstable_runWithPriority scheduler.production.min.js:18
    React 4
    unstable_runWithPriority scheduler.production.min.js:18
    React 6
    setState MatrixChat.tsx:414
    setPage MatrixChat.tsx:888
    viewFavouriteMessages MatrixChat.tsx:1051
    MatrixChat MatrixChat.tsx:848
    _invokeCallback Dispatcher.js:214
    dispatch Dispatcher.js:189
    setTimeout handler*dispatch dispatcher.ts:52
    onFavouriteClicked RoomList.tsx:716
    React 11
    unstable_runWithPriority scheduler.production.min.js:18
    React 11
    loadApp init.tsx:150
    start index.ts:228
    async* index.ts:239
    Webpack 3
[FavouriteMessagesView.tsx:72:9](webpack:///src/components/structures/FavouriteMessagesView/FavouriteMessagesView.tsx)

(same for broadcasts)

You cannot jump to the room message, if you favourite an image, voice message or location share (click the message in the favourites view).

The room separation in the favourite view could be improved.

Maybe just add more spacing above the room names.

If you favourite a thread root, the thread summary is shown in favourites. But clicking it does nothing.

Ctrl + F (enabled in options) doesn't trigger search in the favourites view.

It would be nice if the search field can get the focus if you click the 🔍

Room search with unexpected result, when hitting random keys on the keyboard.

bwindels · 2023-01-20T10:09:43Z

If I read correctly, this will save all favorite message ids in a single account data entry (favourite_messages with element settings prefix). The downsides of this approach would be that the array could grow quite large, and also data loss in case of a race between multiple clients/devices (a pain currently with the DM rooms mapping). Curious what your thoughts are on these, and if storing a single favorite (or only favorites for one room) per account data entry was considered. I can see that would probably be harder to integrate with the element settings code though.
The reason I bring it up (of lesser importance) is also that a pattern like io.element.favourite_messages.<roomid>.<eventid> for the type with only 1 favourite per account data entry would make things easier in Hydrogen as well to only load in memory what is needed.

andybalaam · 2023-01-20T10:17:00Z

If I read correctly, this will save all favorite message ids in a single account data entry (favourite_messages with element settings prefix). The downsides of this approach would be that the array could grow quite large, and also data loss in case of a race between multiple clients/devices (a pain currently with the DM rooms mapping). Curious what your thoughts are on these, and if storing a single favorite (or only favorites for one room) per account data entry was considered. I can see that would probably be harder to integrate with the element settings code though. The reason I bring it up (of lesser importance) is also that a pattern like io.element.favourite_messages.<roomid>.<eventid> for the type with only 1 favourite per account data entry would make things easier in Hydrogen as well to only load in memory what is needed.

Because this PR started out using local storage, I totally forgot when I converted it to use SettingsStorage that there is an MSC we are planning to follow: matrix-org/matrix-spec-proposals#2437

Note: that MSC proposes using Room Account Data, but I plan to use general Account Data because I think favourites should not be tied to rooms.

@bwindels I think that MSC also uses a single account data entry for everything - will that cause you similar problems?

bwindels · 2023-01-20T10:26:10Z

If I read correctly, this will save all favorite message ids in a single account data entry (favourite_messages with element settings prefix). The downsides of this approach would be that the array could grow quite large, and also data loss in case of a race between multiple clients/devices (a pain currently with the DM rooms mapping). Curious what your thoughts are on these, and if storing a single favorite (or only favorites for one room) per account data entry was considered. I can see that would probably be harder to integrate with the element settings code though. The reason I bring it up (of lesser importance) is also that a pattern like io.element.favourite_messages.<roomid>.<eventid> for the type with only 1 favourite per account data entry would make things easier in Hydrogen as well to only load in memory what is needed.

Because this PR started out using local storage, I totally forgot when I converted it to use SettingsStorage that there is an MSC we are planning to follow: matrix-org/matrix-spec-proposals#2437

Thanks for the MSC link. I always forget about room account data :) The size of the array would indeed be more reasonable when using room account data, as well as the scope for races would be smaller. The race is indeed described as a limitation. The size of the array would indeed be more reasonable when using room account data). So yeah, the race is a discussion for the MSC.

Note: that MSC proposes using Room Account Data, but I plan to use general Account Data because I think favourites should not be tied to rooms.

But favourites are always for events, which can only occur within a room, no?

@bwindels I think that MSC also uses a single account data entry for everything - will that cause you similar problems?

florianduros · 2023-01-20T10:06:01Z

res/css/structures/_FavouriteMessagesView.pcss

+
+.mx_FavMessagesHeader_cancelButton {
+    background-color: $alert;
+    mask: url("$(res)/img/cancel.svg");


We are trying to get rid of mask in favour of the svg as a React component directly

Example of use:
https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx#L21

florianduros · 2023-01-20T10:06:35Z

res/css/structures/_FavouriteMessagesView.pcss

+}
+
+.mx_FavMessagesHeader_sortButton::before {
+    mask-image: url("$(res)/img/element-icons/room/sort-twoway.svg");


Same comment about the mask

florianduros · 2023-01-20T10:06:39Z

res/css/structures/_FavouriteMessagesView.pcss

+}
+
+.mx_FavMessagesHeader_clearAllButton::before {
+    mask-image: url("$(res)/img/element-icons/room/clear-all.svg");


Same comment about the mask

florianduros · 2023-01-20T10:07:05Z

res/css/structures/_FavouriteMessagesView.pcss

+            color: $primary-content;
+            font-weight: $font-semi-bold;
+            font-size: $font-18px;
+            margin: 0 8px;


We can use here $spacing-8

florianduros · 2023-01-20T10:09:17Z

res/css/structures/_FavouriteMessagesView.pcss

+    mask-position: center;
+    mask-size: 17px;
+    padding: 9px;
+    margin: 0 12px 0 3px;


Use $spacing-*

florianduros · 2023-01-20T10:20:46Z

src/components/structures/FavouriteMessagesView/FavouriteMessageTile.tsx

+            let lastInSection = true;
+            const nextEv = props?.timeline[j + 1];
+            if (nextEv) {
+                lastInSection =


const lastInSection = nextEv && ( dateSeparator(mxEv, nextEv) || mxEv.getSender() !== nextEv.getSender() || !shouldFormContinuation(mxEv, nextEv, context?.showHiddenEvents, threadsEnabled) )

florianduros · 2023-01-20T10:37:56Z

src/components/structures/FavouriteMessagesView/FavouriteMessagesView.tsx

+        recalcEvents();
+    }, [searchQuery, recalcEvents]);
+
+    registerFavouritesChangedListener(() => recalcEvents());


At every render, it will call the registerFavouritesChangedListener and add listener

Do you have an alternative suggestion?

We can add the listener in a useEffect:

useEffect(() => { const handler = () => recalcEvents(); registerFavouritesChangedListener(handler); return () => { // here we would like to unregister the handler unregisterFavouritesChangedListener(handler); } }, [registerFavouritesChangedListener, recalcEvents]

If we want to avoid to repeat this behaviour every time we use the useFavourites hook. We can pass the handler as argument of the hook and make all the register/unregister in it.

florianduros · 2023-01-20T10:41:32Z

src/components/structures/FavouriteMessagesView/FavouriteMessagesView.tsx

+    const displayedFavourites: FavouriteStorage[] = filterFavourites(searchQuery, favouriteMessages);
+    const promises: Promise<MatrixEvent | null>[] = displayedFavourites.map((f) => fetchEvent(f, matrixClient));
+    const events = await Promise.all(promises);
+    return events.filter((e) => e !== null) as MatrixEvent[]; // force cast because typescript doesn't understand what `filter` does


We can use https://stackoverflow.com/questions/43118692/typescript-filter-out-nulls-from-an-array this kind of predicate to cleanly filter without casting the type

florianduros · 2023-01-20T10:43:59Z

src/components/views/messages/MessageActionBar.tsx

+        useFavouriteMessages(favouriteMessagesStore);
+    const [, forceRefresh] = useState([]);
+
+    registerFavouritesChangedListener(() => forceRefresh([]));


It seems to be a bit hacky here, maybe useFavouriteMessages should return something to trigger the rerender ?

florianduros · 2023-01-20T10:45:29Z

src/hooks/useFavouriteMessages.ts

 } {
-    const [, setX] = useState<string[]>();
+    const myListeners: (() => void)[] = [];


At every render, myListeners is replaced by an empty array which seems to be unwanted behaviour.

It needs to be a useState or useRef

andybalaam · 2023-01-20T10:53:33Z

Note: that MSC proposes using Room Account Data, but I plan to use general Account Data because I think favourites should not be tied to rooms.

But favourites are always for events, which can only occur within a room, no?

Yes, but I argue that:

a) When I want to view my favourites I don't want to iterate all rooms
b) When I leave a room I don't want to lose the information that I favourited a message inside it

weeman1337

Some minor findings in the code.

weeman1337 · 2023-01-20T10:25:03Z

res/css/structures/_FavouriteMessagesView.pcss

+    align-items: center;
+    min-width: 0;
+    margin: 0 20px 0 16px;
+    padding-top: 8px;


Can you use spacing variables, where possible?
Like for instance here $spacing-8.

weeman1337 · 2023-01-20T10:31:58Z

src/components/structures/FavouriteMessagesView/ConfirmClearFavouritesDialog.tsx

@@ -0,0 +1,57 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.


It's already 2023 🍾

weeman1337 · 2023-01-20T10:33:39Z

src/components/structures/FavouriteMessagesView/FavouriteMessageTile.tsx

+}
+
+const FavouriteMessageTile: FC<IProps> = (props: IProps) => {
+    let context!: React.ContextType<typeof RoomContext>;


context doesn't seem to be set anywhere.

weeman1337 · 2023-01-20T10:38:22Z

src/components/structures/FavouriteMessagesView/FavouriteMessagesHeader.tsx

+                        height={26}
+                        resizeMethod="crop"
+                    />
+                    <span>Favourite Messages</span>


String missing translation.

(also strings in some other places)

weeman1337 · 2023-01-20T10:41:50Z

src/components/structures/FavouriteMessagesView/ConfirmClearFavouritesDialog.tsx

+    );
+};
+
+export default ConfirmClearFavouritesDialog;


Applies to the entire PR: We should use named exports.

weeman1337 · 2023-01-20T10:43:07Z

src/components/structures/FavouriteMessagesView/FavouriteMessagesPanel.tsx

+}
+
+const FavouriteMessagesPanel: FC<IProps> = (props: IProps) => {
+    const favouriteMessagesPanelRef = useRef<ScrollPanel>();


This should also solve the TS error:

Suggested change

const favouriteMessagesPanelRef = useRef<ScrollPanel>();

const favouriteMessagesPanelRef = useRef<ScrollPanel | null>(null);

weeman1337 · 2023-01-20T10:53:15Z

src/stores/FavouriteMessagesStore.ts

+     * new instance, anyone who is listening to a different instane will not
+     * be notified about changes to this instance.
+     */
+    public static get instance(): FavouriteMessagesStore {


This is a new store. Can we directly make it available via the SdkContext and get rid of the static instance here?

weeman1337 · 2023-01-20T10:57:34Z

src/stores/FavouriteMessagesStore.ts

+    content: IContent;
+}
+
+interface IState {


Suggested change

interface IState {

interface State {

as per new code style

weeman1337 · 2023-01-20T11:02:41Z

This is the last one for today. And maybe I am too picky here, but it hurts me 🙃 The header design for favourite message is not the same as for rooms:

andybalaam · 2023-01-20T16:42:22Z

This is the last one for today. And maybe I am too picky here, but it hurts me upside_down_face The header design for favourite message is not the same as for rooms:

Not too picky! Well spotted.

andybalaam · 2023-01-20T16:44:45Z

This is all awesome feedback - thank you @weeman1337 @florianduros @bwindels !

I was hoping to squeeze the work to get this PR into shape in between other things, and given how much work there is left to do, I don't think I can do that right now :-(

So, any of the following would be much appreciated:

Help with fixing some of the above comments
Suggestions for how to break this down into more manageable pieces so at least some of it can be merged

Thanks!

andybalaam · 2023-09-06T07:31:36Z

Not currently being worked on, so moving to draft.

andybalaam mentioned this pull request Dec 7, 2022

Starred Messages View Screen #9182

Closed

andybalaam added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Dec 7, 2022

github-actions bot deployed to Netlify December 7, 2022 12:17 View deployment

github-actions bot deployed to Netlify December 7, 2022 13:22 View deployment

github-actions bot deployed to Netlify December 7, 2022 17:30 View deployment

github-actions bot deployed to Netlify December 8, 2022 13:57 View deployment

andybalaam force-pushed the andybalaam/favourite-messages-rebased branch from c9c8950 to 24ee66c Compare December 16, 2022 17:41

github-actions bot deployed to Netlify December 16, 2022 17:45 View deployment

andybalaam force-pushed the andybalaam/favourite-messages-rebased branch from 24ee66c to 5db674d Compare January 3, 2023 16:27

github-actions bot deployed to Netlify January 3, 2023 16:31 View deployment

andybalaam mentioned this pull request Jan 4, 2023

Tracking issue for Favourite Messages element-hq/element-web#22453

Closed

31 tasks

andybalaam force-pushed the andybalaam/favourite-messages-rebased branch from d6f3607 to cfdf190 Compare January 5, 2023 16:23

github-actions bot deployed to Netlify January 5, 2023 16:28 View deployment

github-actions bot deployed to Netlify January 6, 2023 00:59 View deployment

github-actions bot deployed to Netlify January 6, 2023 01:10 View deployment

github-actions bot deployed to Netlify January 6, 2023 01:46 View deployment

github-actions bot deployed to Netlify January 6, 2023 01:55 View deployment

github-actions bot deployed to Netlify January 6, 2023 03:11 View deployment

github-actions bot deployed to Netlify January 6, 2023 03:33 View deployment

github-actions bot deployed to Netlify January 6, 2023 03:44 View deployment

github-actions bot deployed to Netlify January 6, 2023 04:39 View deployment

andybalaam force-pushed the andybalaam/favourite-messages-rebased branch 2 times, most recently from f399b7a to d0ac969 Compare January 6, 2023 08:38

github-actions bot deployed to Netlify January 6, 2023 08:43 View deployment

andybalaam force-pushed the andybalaam/favourite-messages-rebased branch from d0ac969 to 86e5b1b Compare January 6, 2023 09:08

github-actions bot deployed to Netlify January 6, 2023 09:13 View deployment

andybalaam force-pushed the andybalaam/favourite-messages-rebased branch from 86e5b1b to 7538692 Compare January 6, 2023 10:50

github-actions bot deployed to Netlify January 6, 2023 10:53 View deployment

andybalaam requested a review from artcodespace January 6, 2023 11:13

turt2live suggested changes Jan 6, 2023

View reviewed changes

github-actions bot deployed to Netlify January 9, 2023 10:12 View deployment

andybalaam self-assigned this Jan 12, 2023

Johennes mentioned this pull request Jan 19, 2023

Wrap up favourite messages element-hq/element-web#24261

Closed

17 tasks

Favourite Messages view

3ab2417

andybalaam force-pushed the andybalaam/favourite-messages-rebased branch from 2a7bb84 to 3ab2417 Compare January 19, 2023 16:29

github-actions bot deployed to Netlify January 19, 2023 16:34 View deployment

Fix incorrect import

193bdc9

github-actions bot deployed to Netlify January 19, 2023 17:03 View deployment

Add type ffor myListeners

3d51c8e

github-actions bot deployed to Netlify January 20, 2023 09:22 View deployment

andybalaam requested a review from t3chguy January 20, 2023 09:45

florianduros reviewed Jan 20, 2023

View reviewed changes

weeman1337 suggested changes Jan 20, 2023

View reviewed changes

t3chguy removed their request for review April 27, 2023 10:12

andybalaam marked this pull request as draft September 6, 2023 07:31

langleyd closed this Sep 11, 2024

		@@ -0,0 +1,57 @@
		/*
		Copyright 2022 The Matrix.org Foundation C.I.C.

	const favouriteMessagesPanelRef = useRef<ScrollPanel>();
	const favouriteMessagesPanelRef = useRef<ScrollPanel \| null>(null);

Display favourite messages in a room-like view #9719

Display favourite messages in a room-like view #9719

Conversation

andybalaam commented Dec 7, 2022 • edited by github-actions bot Loading

✨ Features

andybalaam commented Dec 16, 2022

andybalaam commented Jan 6, 2023

turt2live left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andybalaam commented Jan 19, 2023

andybalaam commented Jan 20, 2023

andybalaam commented Jan 20, 2023

weeman1337 commented Jan 20, 2023 • edited Loading

bwindels commented Jan 20, 2023

andybalaam commented Jan 20, 2023

bwindels commented Jan 20, 2023 • edited Loading

florianduros Jan 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

florianduros Jan 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

florianduros Jan 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andybalaam commented Jan 20, 2023

weeman1337 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weeman1337 commented Jan 20, 2023 • edited Loading

andybalaam commented Jan 20, 2023

andybalaam commented Jan 20, 2023

andybalaam commented Sep 6, 2023

andybalaam commented Dec 7, 2022 •

edited by github-actions bot

Loading

weeman1337 commented Jan 20, 2023 •

edited

Loading

bwindels commented Jan 20, 2023 •

edited

Loading

florianduros Jan 20, 2023 •

edited

Loading

florianduros Jan 20, 2023 •

edited

Loading

florianduros Jan 20, 2023 •

edited

Loading

weeman1337 commented Jan 20, 2023 •

edited

Loading