♻️(frontend) refactor thread query cache management

The thread query is an infinite one and the frontend logic is
based on the structuralSharing concept of react-query to
optimiscally update the react query cache on thread mutation in
order to improve ux. This part is a tricky one and it's easy to
introduce regression, that's why refactor it by moving the corresponding
logic into a mailbox-cache module and battle test it.

Author: jbpenrath

src/frontend/src/features/layouts/components/thread-panel/components/thread-panel-header.tsx

@@ -184,13 +184,15 @@ const ThreadPanelTitle = ({ selectedThreadIds, isAllSelected, isSomeSelected, is
                     <Tooltip content={mainReadTooltip}>
                         <Button
                             onClick={() => {
+                                // Close the open thread before firing the mutation. Waiting for
+                                // onSuccess would let the visibility observer re-observe the
+                                // newly-unread messages and debounce a mark-as-read that silently
+                                // reverts the action.
+                                unselectThread();
+                                onClearSelection();
                                 markAsReadAt({
                                     threadIds: threadIdsToMark,
                                     readAt: selectionReadStatus === SelectionReadStatus.READ ? null : new Date().toISOString(),
-                                    onSuccess: () => {
-                                        unselectThread();
-                                        onClearSelection();
-                                    }
                                 });
                             }}
                             icon={<Icon name={selectionReadStatus === SelectionReadStatus.READ ? 'mark_email_unread' : 'mark_email_read'} type={IconType.OUTLINED} />}
@@ -304,13 +306,13 @@ const ThreadPanelTitle = ({ selectedThreadIds, isAllSelected, isSomeSelected, is
                                 label: markAllUnreadLabel,
                                 icon: <span className="material-icons">mark_email_unread</span>,
                                 callback: () => {
+                                    // Close the open thread before the mutation so the visibility
+                                    // observer cannot re-mark the newly-unread messages as read.
+                                    unselectThread();
+                                    onClearSelection();
                                     markAsReadAt({
                                         threadIds: threadIdsToMark,
                                         readAt: null,
-                                        onSuccess: () => {
-                                            unselectThread();
-                                            onClearSelection();
-                                        }
                                     });
                                 },
                             }] : []),

src/frontend/src/features/layouts/components/thread-view/components/thread-action-bar/index.tsx

@@ -184,7 +184,14 @@ export const ThreadActionBar = ({ canUndelete, canUnarchive }: ThreadActionBarPr
                     {
                         label: t('Mark as unread'),
                         icon: <Icon name="mark_email_unread" type={IconType.OUTLINED} />,
-                        callback: () => markAsReadAt({ threadIds: [selectedThread!.id], readAt: null, onSuccess: unselectThread })
+                        // Unmount the thread view before firing the mutation. If we waited for
+                        // onSuccess, the cache patch would re-flag visible messages as unread
+                        // while the view is still mounted, letting the visibility observer
+                        // debounce a mark-as-read request that silently reverts this action.
+                        callback: () => {
+                            unselectThread();
+                            markAsReadAt({ threadIds: [selectedThread!.id], readAt: null });
+                        },
                     },
                     ...(canLeaveThread ? [{
                         label: t('Leave this thread'),

src/frontend/src/features/layouts/components/thread-view/components/thread-message/thread-message-actions.tsx

@@ -57,9 +57,12 @@ const ThreadMessageActions = ({
     const toggleReadStateFrom = useCallback((is_unread: boolean) => {
         if (!selectedThread) return;
         if (is_unread) {
-            // Mark as unread from here: subtract 1ms so this message becomes unread
+            // Mark as unread from here: subtract 1ms so this message becomes unread.
+            // Unmount the thread view before the mutation so the visibility observer
+            // cannot debounce a mark-as-read request on the newly-unread messages.
             const readAt = new Date(new Date(message.created_at!).getTime() - 1).toISOString();
-            markAsReadAt({ threadIds: [selectedThread.id], readAt, onSuccess: unselectThread });
+            unselectThread();
+            markAsReadAt({ threadIds: [selectedThread.id], readAt });
         } else {
             // Mark as read from here: read up to this message's created_at
             markAsReadAt({ threadIds: [selectedThread.id], readAt: message.created_at! });