Add Shared Media drawer and harden same-room navigation.

Widen the media panel, support skinny full-page mode, keep jump-to-latest and return-to-previous reliable, and stop same-room event jumps from remounting the outlet or yanking the sidebar.

src/app/features/room/RoomViewHeader.tsx

@@ -7,18 +7,16 @@ import { JoinRule, Room } from 'matrix-js-sdk';
 import { useAtom, useAtomValue } from 'jotai';
 import { activeThreadIdAtomFamily } from '../../state/activeThread';
 
-import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { RoomTopicViewer } from '../../components/room-topic-viewer';
-import { StateEvent } from '../../../types/matrix/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoom } from '../../hooks/useRoom';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
-import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
+import { getHomeSearchPath, getSpaceSearchPath, getDirectSearchPath, withSearchParam } from '../../pages/pathUtils';
 import { getCanonicalAliasOrRoomId, guessDmRoomUserId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
 import colorMXID from '../../../util/colorMXID';
 import { useOtherUserColor } from '../../hooks/useUserColor';
@@ -43,6 +41,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
 import { RoomPinMenu } from './room-pin-menu';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
+import { isMediaDrawerAtom } from '../../state/mediaDrawer';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import {
   getRoomNotificationMode,
@@ -58,6 +57,8 @@ import { useRoomCall, useRoomCallMembers } from '../call';
 import { CallState, CallType } from '../call/types';
 import { UserAvatar } from '../../components/user-avatar';
 import { getMemberDisplayName, getMemberAvatarMxc } from '../../utils/room';
+import { useDirectSelected } from '../../hooks/router/useDirectSelected';
+import { isStationeryTheme, useTheme } from '../../hooks/useTheme';
 
 type RoomMenuProps = {
   room: Room;
@@ -471,10 +472,11 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
   const mDirects = useAtomValue(mDirectAtom);
+  const onDirectPath = useDirectSelected();
+  const theme = useTheme();
+  const stationery = isStationeryTheme(theme);
 
   const pinnedEvents = useRoomPinnedEvents(room);
-  const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
-  const ecryptedRoom = !!encryptionEvent;
   const isDirect = mDirects.has(room.roomId);
   const avatarMxc = useRoomAvatar(room, isDirect);
   const name = useRoomName(room);
@@ -488,11 +490,13 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
     (dmUserId ? room.getMember(dmUserId)?.getMxcAvatarUrl() : undefined) ||
     (isDirect ? avatarMxc : undefined);
   const dmCustomColor = useOtherUserColor(dmUserId ?? '', dmAvatarMxc);
-  const dmFolderTabColor = isDirect
-    ? `color-mix(in srgb, ${dmCustomColor ?? colorMXID(dmUserId ?? room.roomId)} 50%, var(--folder-tab-room, #f3e6c8))`
-    : undefined;
+  const dmFolderTabColor =
+    stationery && isDirect
+      ? `color-mix(in srgb, ${dmCustomColor ?? colorMXID(dmUserId ?? room.roomId)} 50%, var(--folder-tab-room, #f3e6c8))`
+      : undefined;
 
   const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+  const [isMediaDrawer, setMediaDrawer] = useAtom(isMediaDrawerAtom);
   const [activeThreadId, setActiveThreadId] = useAtom(activeThreadIdAtomFamily(room.roomId));
 
   const handleSearchClick = () => {
@@ -501,7 +505,9 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
     };
     const path = space
       ? getSpaceSearchPath(getCanonicalAliasOrRoomId(mx, space.roomId))
-      : getHomeSearchPath();
+      : isDirect || onDirectPath
+        ? getDirectSearchPath()
+        : getHomeSearchPath();
     navigate(withSearchParam(path, searchParams));
   };
 
@@ -513,6 +519,22 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
     setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
+  const handleTogglePeopleDrawer = () => {
+    setPeopleDrawer((drawer) => {
+      const next = !drawer;
+      if (next) setMediaDrawer(false);
+      return next;
+    });
+  };
+
+  const handleToggleMediaDrawer = () => {
+    setMediaDrawer((open) => {
+      const next = !open;
+      if (next) setPeopleDrawer(false);
+      return next;
+    });
+  };
+
   return (
     <PageHeader balance={showInPageHeader}>
       <Box grow="Yes" gap="300">
@@ -611,23 +633,21 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
         <Box shrink="No" alignItems="Center" gap="100">
           <CallIndicator roomId={room.roomId} />
           <RoomCallButtons roomId={room.roomId} />
-          {!ecryptedRoom && (
-            <TooltipProvider
-              position="Bottom"
-              offset={4}
-              tooltip={
-                <Tooltip>
-                  <Text>Search</Text>
-                </Tooltip>
-              }
-            >
-              {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={handleSearchClick}>
-                  <Icon size="300" src={Icons.Search} />
-                </IconButton>
-              )}
-            </TooltipProvider>
-          )}
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>Search</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton ref={triggerRef} onClick={handleSearchClick}>
+                <Icon size="300" src={Icons.Search} />
+              </IconButton>
+            )}
+          </TooltipProvider>
           <TooltipProvider
             position="Bottom"
             offset={4}
@@ -695,8 +715,12 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
-                  <Icon size="300" src={Icons.User} />
+                <IconButton
+                  ref={triggerRef}
+                  onClick={handleTogglePeopleDrawer}
+                  aria-pressed={peopleDrawer}
+                >
+                  <Icon size="300" src={Icons.User} filled={peopleDrawer} />
                 </IconButton>
               )}
             </TooltipProvider>
@@ -720,6 +744,26 @@ export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
               </IconButton>
             )}
           </TooltipProvider>
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>{isMediaDrawer ? 'Hide Shared Media' : 'Show Shared Media'}</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                ref={triggerRef}
+                onClick={handleToggleMediaDrawer}
+                aria-pressed={isMediaDrawer}
+                aria-label="Shared Media"
+              >
+                <Icon size="300" src={Icons.Photo} filled={isMediaDrawer} />
+              </IconButton>
+            )}
+          </TooltipProvider>
           <PluginButtonSlot location="room-header" />
           <TooltipProvider
             position="Bottom"