-
+
+
+
+
+
+
+
+ );
+}
+
+/** Optimistic room navigation: brief pending chrome until the route settles. */
+export function AnimatedOutlet() {
+ const selectedRoomId = useSelectedRoom();
+ const [pendingRoomId, setPendingRoomId] = useAtom(pendingRoomNavigationAtom);
+
+ // Safety: if navigation never lands, don't leave pending forever.
+ useEffect(() => {
+ if (!pendingRoomId) return undefined;
+ const t = window.setTimeout(() => setPendingRoomId(null), 4000);
+ return () => window.clearTimeout(t);
+ }, [pendingRoomId, setPendingRoomId]);
+
+ // Only cover the gap before the target room route is active.
+ const showOverlay =
+ typeof pendingRoomId === 'string' &&
+ pendingRoomId.length > 0 &&
+ pendingRoomId !== selectedRoomId;
+
+ return (
+
+ {showOverlay &&
}
+ {/*
+ Do NOT key this by pathname — room switches share CachedRooms keep-alive.
+ Remounting here wiped the cache and made warm rooms feel as slow as cold ones.
+ */}
+
+
+
);
}
diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index 7f29d36..6ade4a4 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -27,8 +27,8 @@ import {
MATRIX_SPOILER_REASON_PROPERTY_NAME,
} from '../../../types/matrix/common';
import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
-import { parseGeoUri, scaleYDimension, fitMediaSize } from '../../utils/common';
-import { getMediaDimensions } from '../../state/mediaDimensionCache';
+import { parseGeoUri, scaleYDimension } from '../../utils/common';
+import { resolveAttachmentBoxSize } from '../../state/mediaDimensionCache';
import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
import { FileHeader, FileDownloadButton } from './FileHeader';
@@ -206,18 +206,11 @@ type MImageProps = {
outlined?: boolean;
};
-const ATTACHMENT_MAX = 400;
-
const resolveMediaBoxSize = (
mxcUrl: string,
w?: number,
h?: number
-): { width: number; height: number } => {
- const cached = (!w || !h) ? getMediaDimensions(mxcUrl) : undefined;
- const naturalW = w && w > 0 ? w : cached?.w;
- const naturalH = h && h > 0 ? h : cached?.h;
- return fitMediaSize(naturalW ?? 0, naturalH ?? 0, ATTACHMENT_MAX, ATTACHMENT_MAX);
-};
+): { width: number; height: number } => resolveAttachmentBoxSize(mxcUrl, w, h);
export function MImage({ content, renderImageContent, outlined }: MImageProps) {
const imgInfo = content?.info;
diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx
index 1891867..0f3520f 100644
--- a/src/app/components/message/content/ImageContent.tsx
+++ b/src/app/components/message/content/ImageContent.tsx
@@ -169,7 +169,7 @@ export const ImageContent = as<'div', ImageContentProps>(
setShowPlaceholder(true);
return undefined;
}
- const timer = window.setTimeout(() => setShowPlaceholder(false), 300);
+ const timer = window.setTimeout(() => setShowPlaceholder(false), 540);
return () => window.clearTimeout(timer);
}, [load]);
diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx
index 9fcf31a..ca615a6 100644
--- a/src/app/components/message/content/VideoContent.tsx
+++ b/src/app/components/message/content/VideoContent.tsx
@@ -134,7 +134,7 @@ export const VideoContent = as<'div', VideoContentProps>(
setShowPlaceholder(true);
return undefined;
}
- const timer = window.setTimeout(() => setShowPlaceholder(false), 300);
+ const timer = window.setTimeout(() => setShowPlaceholder(false), 540);
return () => window.clearTimeout(timer);
}, [load]);
diff --git a/src/app/components/message/content/style.css.ts b/src/app/components/message/content/style.css.ts
index f777f9b..481ef65 100644
--- a/src/app/components/message/content/style.css.ts
+++ b/src/app/components/message/content/style.css.ts
@@ -78,6 +78,15 @@ export const MediaSkeleton = style([
},
]);
+const blurhashFadeIn = keyframes({
+ from: {
+ opacity: 0,
+ },
+ to: {
+ opacity: 1,
+ },
+});
+
/** Soft blurhash layer that fills the reserved media box. */
export const BlurhashPlaceholder = style([
DefaultReset,
@@ -90,6 +99,8 @@ export const BlurhashPlaceholder = style([
// Soften the decode so it reads as color blobs; slight scale hides blur edges.
filter: 'blur(14px)',
transform: 'scale(1.06)',
+ opacity: 0,
+ animation: `${blurhashFadeIn} 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards`,
},
]);
@@ -97,7 +108,7 @@ export const BlurhashPlaceholder = style([
export const MediaFadeIn = style({
zIndex: 1,
opacity: 0,
- transition: 'opacity 280ms ease-out',
+ transition: 'opacity 520ms cubic-bezier(0.22, 1, 0.36, 1)',
});
export const MediaFadeInLoaded = style({
diff --git a/src/app/components/page/Page.tsx b/src/app/components/page/Page.tsx
index 29b0e26..0252012 100644
--- a/src/app/components/page/Page.tsx
+++ b/src/app/components/page/Page.tsx
@@ -1,12 +1,17 @@
-import React, { ComponentProps, MutableRefObject, ReactNode } from 'react';
+import React, { ComponentProps, MutableRefObject, ReactNode, Suspense, lazy } from 'react';
import { Box, Header, Line, Scroll, Text, as } from 'folds';
import classNames from 'classnames';
import { ContainerColor } from '../../styles/ContainerColor.css';
import * as css from './style.css';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-import { SidebarDockedCallPanel } from '../../features/call/SidebarDockedCallPanel';
import { useShowCompactMasterView } from '../../hooks/useCompactNav';
+const SidebarDockedCallPanel = lazy(() =>
+ import('../../features/call/SidebarDockedCallPanel').then((module) => ({
+ default: module.SidebarDockedCallPanel,
+ }))
+);
+
type PageRootProps = {
nav: ReactNode;
children: ReactNode;
@@ -46,7 +51,9 @@ export function PageNav({
>
{children}
-
+
+
+
);
diff --git a/src/app/features/call/callMemberUtils.ts b/src/app/features/call/callMemberUtils.ts
new file mode 100644
index 0000000..fb970c5
--- /dev/null
+++ b/src/app/features/call/callMemberUtils.ts
@@ -0,0 +1,60 @@
+import { MatrixEvent, Room } from 'matrix-js-sdk';
+
+/** The Matrix state event type for call membership (MSC3401) */
+export const CALL_MEMBER_EVENT_TYPE = 'org.matrix.msc3401.call.member';
+
+/** Represents an active call member in a room */
+export interface CallMember {
+ userId: string;
+ deviceId: string;
+ sessionId: string;
+ expiresTs: number;
+}
+
+/**
+ * Extracts active call members from a room's state events
+ */
+export function getActiveCallMembers(room: Room): CallMember[] {
+ const members: CallMember[] = [];
+ const now = Date.now();
+
+ try {
+ const stateEvents = room.currentState.getStateEvents(CALL_MEMBER_EVENT_TYPE);
+
+ stateEvents.forEach((event) => {
+ const content = event.getContent();
+ const userId = event.getStateKey();
+
+ if (!userId || !content['m.calls']) return;
+
+ const calls = content['m.calls'];
+ if (!Array.isArray(calls)) return;
+
+ calls.forEach((call) => {
+ const devices = call['m.devices'];
+ if (!Array.isArray(devices)) return;
+
+ devices.forEach((device) => {
+ const expiresTs = device.expires_ts || 0;
+
+ if (expiresTs > now) {
+ members.push({
+ userId,
+ deviceId: device.device_id,
+ sessionId: device.session_id,
+ expiresTs,
+ });
+ }
+ });
+ });
+ });
+ } catch {
+ // Ignore malformed call member events
+ }
+
+ return members;
+}
+
+export function isCallMemberEvent(event: MatrixEvent): boolean {
+ return event.getType() === CALL_MEMBER_EVENT_TYPE;
+}
diff --git a/src/app/features/call/useCall.ts b/src/app/features/call/useCall.ts
index 6b0417d..914be50 100644
--- a/src/app/features/call/useCall.ts
+++ b/src/app/features/call/useCall.ts
@@ -230,62 +230,76 @@ export function useCallService(): CallContextValue {
/**
* Hook to check if a call is active in a specific room
*/
+/** Persists across keep-alive remounts so room switches don't re-hit well-known. */
+const roomCallSupportCache = new Map
();
+
export function useRoomCall(roomId: string) {
const { activeCall, startCall, endCall, callSupported: globalCallSupported, callSupportLoading: globalCallSupportLoading, callService } = useCall();
const mx = useMatrixClient();
- const [roomCallSupported, setRoomCallSupported] = useState(false);
- const [roomCallSupportLoading, setRoomCallSupportLoading] = useState(true);
+ const [roomCallSupported, setRoomCallSupported] = useState(
+ () => roomCallSupportCache.get(roomId) ?? false
+ );
+ const [roomCallSupportLoading, setRoomCallSupportLoading] = useState(
+ () => !roomCallSupportCache.has(roomId)
+ );
// Check if calls are supported for this specific room by checking all priority homeservers
useEffect(() => {
+ const cached = roomCallSupportCache.get(roomId);
+ if (cached !== undefined) {
+ setRoomCallSupported(cached);
+ setRoomCallSupportLoading(false);
+ return undefined;
+ }
+
+ let cancelled = false;
+
const checkRoomCallSupport = async () => {
setRoomCallSupportLoading(true);
-
+
const room = mx.getRoom(roomId);
if (!room) {
- setRoomCallSupported(false);
- setRoomCallSupportLoading(false);
+ if (!cancelled) {
+ setRoomCallSupported(false);
+ setRoomCallSupportLoading(false);
+ }
return;
}
- // Get homeserver priority list for this room
const homeserverPriority = getLiveKitHomeserverPriority(
room,
mx.getHomeserverUrl(),
mx.getSafeUserId()
);
- console.log(`Checking call support for room ${roomId}, homeserver priority:`, homeserverPriority);
-
- // Check each homeserver in priority order
for (const homeserver of homeserverPriority) {
try {
- console.log(`Fetching well-known from ${homeserver}...`);
const wellKnown = await fetchWellKnownWithRTC(homeserver);
- console.log(`Well-known response from ${homeserver}:`, wellKnown);
-
const livekitFocus = getLiveKitFocus(wellKnown);
- console.log(`LiveKit focus from ${homeserver}:`, livekitFocus);
-
if (livekitFocus) {
- console.log(`Call support found for room ${roomId} on homeserver: ${homeserver}`);
- setRoomCallSupported(true);
- setRoomCallSupportLoading(false);
+ roomCallSupportCache.set(roomId, true);
+ if (!cancelled) {
+ setRoomCallSupported(true);
+ setRoomCallSupportLoading(false);
+ }
return;
}
- } catch (error) {
- console.warn(`Failed to check call support on ${homeserver}:`, error);
+ } catch {
// Continue to next homeserver
}
}
- // No homeserver supports calls
- console.log(`No call support found for room ${roomId}`);
- setRoomCallSupported(false);
- setRoomCallSupportLoading(false);
+ roomCallSupportCache.set(roomId, false);
+ if (!cancelled) {
+ setRoomCallSupported(false);
+ setRoomCallSupportLoading(false);
+ }
};
checkRoomCallSupport();
+ return () => {
+ cancelled = true;
+ };
}, [roomId, mx]);
const isInCall = activeCall?.roomId === roomId;
diff --git a/src/app/features/call/useRoomCallMembers.ts b/src/app/features/call/useRoomCallMembers.ts
index b6ffde3..a39813a 100644
--- a/src/app/features/call/useRoomCallMembers.ts
+++ b/src/app/features/call/useRoomCallMembers.ts
@@ -1,115 +1,12 @@
-/* eslint-disable no-console */
-import { useCallback, useEffect, useState } from 'react';
-import { MatrixEvent, Room, RoomStateEvent } from 'matrix-js-sdk';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useRoomCallMembersFromRegistry } from '../../state/activeCallRoomsRegistry';
-/** The Matrix state event type for call membership (MSC3401) */
-const CALL_MEMBER_EVENT_TYPE = 'org.matrix.msc3401.call.member';
-
-/** Represents an active call member in a room */
-export interface CallMember {
- userId: string;
- deviceId: string;
- sessionId: string;
- expiresTs: number;
-}
+export type { CallMember } from './callMemberUtils';
+export { getActiveCallMembers, CALL_MEMBER_EVENT_TYPE } from './callMemberUtils';
/**
- * Extracts active call members from a room's state events
- * @param room - The Matrix room to check
- * @returns Array of active call members
+ * Hook to get the list of users currently in a call in a room.
+ * Backed by a shared registry — one state listener for all rooms.
*/
-export function getActiveCallMembers(room: Room): CallMember[] {
- const members: CallMember[] = [];
- const now = Date.now();
-
- try {
- const stateEvents = room.currentState.getStateEvents(CALL_MEMBER_EVENT_TYPE);
-
- stateEvents.forEach((event) => {
- const content = event.getContent();
- const userId = event.getStateKey();
-
- if (!userId || !content['m.calls']) return;
-
- const calls = content['m.calls'];
- if (!Array.isArray(calls)) return;
-
- calls.forEach((call) => {
- const devices = call['m.devices'];
- if (!Array.isArray(devices)) return;
-
- devices.forEach((device) => {
- const expiresTs = device.expires_ts || 0;
-
- // Check if the call membership is still valid (not expired)
- if (expiresTs > now) {
- members.push({
- userId,
- deviceId: device.device_id,
- sessionId: device.session_id,
- expiresTs,
- });
- }
- });
- });
- });
- } catch (e) {
- console.error('Error reading call member events:', e);
- }
-
- return members;
-}
-
-/**
- * Hook to get the list of users currently in a call in a room
- * @param roomId - The Matrix room ID to monitor
- * @returns Object with call members and whether a call is active
- */
-export function useRoomCallMembers(roomId: string) {
- const mx = useMatrixClient();
- const [callMembers, setCallMembers] = useState([]);
-
- const updateCallMembers = useCallback(() => {
- const room = mx.getRoom(roomId);
- if (!room) {
- setCallMembers([]);
- return;
- }
-
- const members = getActiveCallMembers(room);
- setCallMembers(members);
- }, [mx, roomId]);
-
- useEffect(() => {
- updateCallMembers();
-
- // Listen for state event changes
- const handleStateEvent = (event: MatrixEvent) => {
- if (event.getRoomId() === roomId && event.getType() === CALL_MEMBER_EVENT_TYPE) {
- updateCallMembers();
- }
- };
-
- mx.on(RoomStateEvent.Events, handleStateEvent);
-
- // Also refresh periodically to handle expired memberships
- const interval = setInterval(updateCallMembers, 30000);
-
- return () => {
- mx.off(RoomStateEvent.Events, handleStateEvent);
- clearInterval(interval);
- };
- }, [mx, roomId, updateCallMembers]);
-
- const isCallActive = callMembers.length > 0;
- const myUserId = mx.getUserId();
- const othersInCall = callMembers.filter((m) => m.userId !== myUserId);
-
- return {
- callMembers,
- isCallActive,
- othersInCall,
- callMemberCount: callMembers.length,
- };
+export function useRoomCallMembers(roomId: string, enabled = true) {
+ return useRoomCallMembersFromRegistry(roomId, enabled);
}
diff --git a/src/app/features/call/useRtcConfig.ts b/src/app/features/call/useRtcConfig.ts
index 84d74ce..8d2b636 100644
--- a/src/app/features/call/useRtcConfig.ts
+++ b/src/app/features/call/useRtcConfig.ts
@@ -10,9 +10,7 @@ import { getActiveCallMembers } from './useRoomCallMembers';
* Get room server from room ID (format: !roomid:server.com)
*/
function getRoomServer(roomId: string): string | undefined {
- const server = getMxIdServer(roomId);
- console.log(`[getRoomServer] Room ID: ${roomId} -> Server: ${server}`);
- return server;
+ return getMxIdServer(roomId);
}
/**
@@ -31,31 +29,24 @@ export function getLiveKitHomeserverPriority(
const servers: string[] = [];
const memberCount = room.getMembers().length;
const isDM = memberCount <= 2;
-
- console.log(`[getLiveKitHomeserverPriority] Room: ${room.roomId}`);
- console.log(`[getLiveKitHomeserverPriority] Member count: ${memberCount}, isDM: ${isDM}`);
- console.log(`[getLiveKitHomeserverPriority] User homeserver: ${userHomeserver}`);
-
+
// Check for active call members
const activeCallMembers = getActiveCallMembers(room);
const hasActiveCall = activeCallMembers.length > 0;
- console.log(`[getLiveKitHomeserverPriority] Active call members: ${activeCallMembers.length}, hasActiveCall: ${hasActiveCall}`);
-
if (hasActiveCall) {
// Joining existing call - prioritize room's homeserver (where call is hosted)
const roomServer = getRoomServer(room.roomId);
- console.log(`[getLiveKitHomeserverPriority] Room server (active call): ${roomServer}`);
if (roomServer) {
servers.push(`https://${roomServer}`);
}
-
+
// Add user's homeserver as fallback
const userDomain = userHomeserver.replace('https://', '').replace('http://', '');
if (!roomServer || roomServer !== userDomain) {
servers.push(userHomeserver);
}
-
+
// For DMs, also try other member's homeserver
if (isDM) {
const otherUserId = guessDmRoomUserId(room, myUserId);
@@ -66,42 +57,31 @@ export function getLiveKitHomeserverPriority(
}
}
}
- } else {
- // Starting new call - use original priority logic
- if (isDM) {
- console.log(`[getLiveKitHomeserverPriority] DM path - user homeserver first`);
- // For DMs: user's homeserver first, then other member's homeserver
- servers.push(userHomeserver);
-
- const otherUserId = guessDmRoomUserId(room, myUserId);
- console.log(`[getLiveKitHomeserverPriority] Other user ID: ${otherUserId}`);
- if (otherUserId && otherUserId !== myUserId) {
- const otherServer = getMxIdServer(otherUserId);
- console.log(`[getLiveKitHomeserverPriority] Other user server: ${otherServer}`);
- const userDomain = userHomeserver.replace('https://', '').replace('http://', '');
- if (otherServer && otherServer !== userDomain) {
- servers.push(`https://${otherServer}`);
- }
- }
- } else {
- console.log(`[getLiveKitHomeserverPriority] Channel path - room homeserver first`);
- // For channels: room's homeserver first, then user's homeserver
- const roomServer = getRoomServer(room.roomId);
- console.log(`[getLiveKitHomeserverPriority] Room server from ID: ${roomServer}`);
- if (roomServer) {
- servers.push(`https://${roomServer}`);
- }
-
- // Fallback to user's homeserver if different
+ } else if (isDM) {
+ // For DMs: user's homeserver first, then other member's homeserver
+ servers.push(userHomeserver);
+
+ const otherUserId = guessDmRoomUserId(room, myUserId);
+ if (otherUserId && otherUserId !== myUserId) {
+ const otherServer = getMxIdServer(otherUserId);
const userDomain = userHomeserver.replace('https://', '').replace('http://', '');
- console.log(`[getLiveKitHomeserverPriority] User domain: ${userDomain}, room server: ${roomServer}`);
- if (!roomServer || roomServer !== userDomain) {
- servers.push(userHomeserver);
+ if (otherServer && otherServer !== userDomain) {
+ servers.push(`https://${otherServer}`);
}
}
+ } else {
+ // For channels: room's homeserver first, then user's homeserver
+ const roomServer = getRoomServer(room.roomId);
+ if (roomServer) {
+ servers.push(`https://${roomServer}`);
+ }
+
+ const userDomain = userHomeserver.replace('https://', '').replace('http://', '');
+ if (!roomServer || roomServer !== userDomain) {
+ servers.push(userHomeserver);
+ }
}
- console.log(`[getLiveKitHomeserverPriority] Final server list:`, servers);
return servers;
}
@@ -112,46 +92,46 @@ export function getLiveKitHomeserverPriority(
*/
export function getLiveKitFocus(wellKnown: WellKnownWithRTC): LiveKitFocus | undefined {
const rtcFoci = wellKnown['org.matrix.msc4143.rtc_foci'];
- console.log(`[getLiveKitFocus] rtcFoci from well-known:`, rtcFoci);
-
+
if (!rtcFoci || !Array.isArray(rtcFoci)) {
- console.log(`[getLiveKitFocus] No rtc_foci found or not an array`);
return undefined;
}
- const livekitFocus = rtcFoci.find((focus): focus is LiveKitFocus => focus.type === 'livekit');
- console.log(`[getLiveKitFocus] Found LiveKit focus:`, livekitFocus);
- return livekitFocus;
+ return rtcFoci.find((focus): focus is LiveKitFocus => focus.type === 'livekit');
}
/**
- * Fetches the well-known client configuration from a homeserver
- * @param baseUrl - The homeserver base URL
- * @returns The well-known response with RTC configuration
+ * Fetches the well-known client configuration from a homeserver.
+ * Results are cached — room switches must not re-hit the network.
*/
+const wellKnownCache = new Map>();
+
export async function fetchWellKnownWithRTC(baseUrl: string): Promise {
- // In development mode (localhost), use CORS proxy to avoid CORS issues
+ const cacheKey = baseUrl.replace(/\/$/, '');
+ const cached = wellKnownCache.get(cacheKey);
+ if (cached) return cached;
+
const isDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
-
+
let wellKnownUrl: string;
if (isDev) {
- // Extract hostname from baseUrl for proxy
- const hostname = baseUrl.replace('https://', '').replace('http://', '').replace(/\/$/, '');
+ const hostname = cacheKey.replace('https://', '').replace('http://', '');
wellKnownUrl = `/_matrix-cors-proxy/${hostname}/.well-known/matrix/client`;
} else {
- wellKnownUrl = `${baseUrl}/.well-known/matrix/client`;
+ wellKnownUrl = `${cacheKey}/.well-known/matrix/client`;
}
- console.log(`[fetchWellKnownWithRTC] Fetching from: ${wellKnownUrl}`);
+ const fetchPromise = (async () => {
+ const response = await fetch(wellKnownUrl);
+ if (!response.ok) {
+ wellKnownCache.delete(cacheKey);
+ throw new Error(`Failed to fetch well-known: ${response.status}`);
+ }
+ return (await response.json()) as WellKnownWithRTC;
+ })();
- const response = await fetch(wellKnownUrl);
- if (!response.ok) {
- throw new Error(`Failed to fetch well-known: ${response.status}`);
- }
-
- const data = await response.json();
- console.log(`[fetchWellKnownWithRTC] Response data:`, data);
- return data;
+ wellKnownCache.set(cacheKey, fetchPromise);
+ return fetchPromise;
}
/**
diff --git a/src/app/features/forum/ForumAwareSpaceLayout.tsx b/src/app/features/forum/ForumAwareSpaceLayout.tsx
index 30750a9..650d9d2 100644
--- a/src/app/features/forum/ForumAwareSpaceLayout.tsx
+++ b/src/app/features/forum/ForumAwareSpaceLayout.tsx
@@ -1,9 +1,9 @@
import React, { useMemo } from 'react';
import { PageRoot } from '../../components/page';
-import { AnimatedOutlet } from '../../components/AnimatedOutlet';
import { MobileFriendlyPageNav } from '../../pages/MobileFriendly';
import { SPACE_PATH } from '../../pages/paths';
import { Space } from '../../pages/client/space/Space';
+import { SpaceRoomLayout } from '../../pages/client/space/SpaceRoomLayout';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
import { useSpace } from '../../hooks/useSpace';
@@ -11,7 +11,7 @@ import { isForumContainer, shouldShowForumLobby } from '../../utils/room';
import { ForumBoardProvider } from './ForumBoardContext';
/**
- * Space sidebar + outlet. Forum spaces render ForumFeedSidebar in Space.tsx.
+ * Space sidebar + room keep-alive host. Forum spaces render ForumFeedSidebar in Space.tsx.
*/
export function ForumAwareSpaceLayout() {
const mx = useMatrixClient();
@@ -33,7 +33,7 @@ export function ForumAwareSpaceLayout() {
}
>
-
+
);
diff --git a/src/app/features/lobby/Lobby.tsx b/src/app/features/lobby/Lobby.tsx
index d8de5f1..3027315 100644
--- a/src/app/features/lobby/Lobby.tsx
+++ b/src/app/features/lobby/Lobby.tsx
@@ -60,6 +60,10 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
import { joiningProgressAtom } from '../../state/joiningProgress';
+import {
+ getCachedHierarchyRooms,
+ hierarchyRoomsToMap,
+} from '../../state/spaceHierarchyCache';
const useCanDropLobbyItem = (
space: Room,
@@ -166,7 +170,6 @@ function SpaceCardLobby() {
const isForum = shouldShowForumLobby(space);
const spacePowerLevels = usePowerLevels(space);
const lex = useMemo(() => new ASCIILexicalTable(' '.charCodeAt(0), '~'.charCodeAt(0), 6), []);
- const members = useRoomMembers(mx, space.roomId);
const joiningProgress = useAtomValue(joiningProgressAtom);
const currentJoiningProgress = joiningProgress.get(space.roomId);
@@ -174,7 +177,8 @@ function SpaceCardLobby() {
const heroSectionRef = useRef(null);
const [heroSectionHeight, setHeroSectionHeight] = useState();
const [spaceRooms, setSpaceRooms] = useAtom(spaceRoomsAtom);
- const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+ const [isDrawer] = useSetting(settingsAtom, 'peopleDrawerInRooms');
+ const members = useRoomMembers(mx, space.roomId, isDrawer);
const screenSize = useScreenSizeContext();
const [onTop, setOnTop] = useState(true);
const [closedCategories, setClosedCategories] = useAtom(useClosedLobbyCategoriesAtom());
@@ -190,7 +194,10 @@ function SpaceCardLobby() {
return new Set(sideSpaces);
}, [sidebarItems]);
- const [spacesItems, setSpacesItem] = useState>(() => new Map());
+ const [spacesItems, setSpacesItem] = useState>(() => {
+ const cached = getCachedHierarchyRooms(space.roomId, 3);
+ return cached ? hierarchyRoomsToMap(cached) : new Map();
+ });
useEffect(() => {
let cancelled = false;
@@ -202,11 +209,7 @@ function SpaceCardLobby() {
type: 'PUT',
roomIds: all.filter(isHierarchySpaceRoom).map((r) => r.room_id),
});
- setSpacesItem((current) =>
- produce(current, (draft) => {
- all.forEach((r) => draft.set(r.room_id, r));
- })
- );
+ setSpacesItem(hierarchyRoomsToMap(all));
} catch {
// hierarchy may be unavailable for some memberships
}
@@ -246,20 +249,33 @@ function SpaceCardLobby() {
});
const vItems = virtualizer.getVirtualItems();
- const roomsPowerLevels = useRoomsPowerLevels(
- useMemo(
- () =>
- hierarchy
- .flatMap((i) => {
- const childRooms = Array.isArray(i.rooms) ? i.rooms.map((r) => getRoom(r.roomId)) : [];
+ const powerLevelRoomIds = useMemo(() => {
+ const roomIds = new Set([space.roomId]);
+ vItems.forEach((vItem) => {
+ const item = hierarchy[vItem.index];
+ if (!item) return;
+ roomIds.add(item.space.roomId);
+ if (item.space.parentId) roomIds.add(item.space.parentId);
+ item.rooms?.forEach((room) => roomIds.add(room.roomId));
+ });
+ if (draggingItem) {
+ roomIds.add(draggingItem.roomId);
+ if (draggingItem.parentId) roomIds.add(draggingItem.parentId);
+ }
+ return Array.from(roomIds).sort().join('\0');
+ }, [vItems, hierarchy, space.roomId, draggingItem]);
- return [getRoom(i.space.roomId), ...childRooms];
- })
- .filter((r) => !!r) as Room[],
- [hierarchy, getRoom]
- )
+ const powerLevelRooms = useMemo(
+ () =>
+ powerLevelRoomIds
+ .split('\0')
+ .map((roomId) => getRoom(roomId))
+ .filter((room): room is Room => !!room),
+ [powerLevelRoomIds, getRoom]
);
+ const roomsPowerLevels = useRoomsPowerLevels(powerLevelRooms);
+
const canDrop: CanDropCallback = useCanDropLobbyItem(space, roomsPowerLevels, getRoom);
const [reorderSpaceState, reorderSpace] = useAsyncCallback(
diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx
index 0a96a14..7085781 100644
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -191,7 +191,7 @@ export function LobbyHeader({ showProfile, showSpaceToolbar, powerLevels }: Lobb
const space = useSpace();
const creators = useRoomCreators(space);
const spacePermissions = useRoomPermissions(creators, powerLevels);
- const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
+ const setPeopleDrawer = useSetSetting(settingsAtom, 'peopleDrawerInRooms');
const [menuAnchor, setMenuAnchor] = useState();
const [addExisting, setAddExisting] = useState(null);
const screenSize = useScreenSizeContext();
diff --git a/src/app/features/lobby/SpaceHierarchy.tsx b/src/app/features/lobby/SpaceHierarchy.tsx
index e6cad7f..4713e19 100644
--- a/src/app/features/lobby/SpaceHierarchy.tsx
+++ b/src/app/features/lobby/SpaceHierarchy.tsx
@@ -20,6 +20,7 @@ import { SequenceCard } from '../../components/sequence-card';
import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
import { PaarrotSubRoomsContent } from '../../hooks/useRoomSubRooms';
+import { useGlobalSubRoomIds } from '../../state/globalSubRoomIds';
type SpaceHierarchyProps = {
summary: IHierarchyRoom | undefined;
@@ -71,7 +72,14 @@ export const SpaceHierarchy = forwardRef(
) => {
const mx = useMatrixClient();
- const { fetching, error, rooms } = useFetchSpaceHierarchyLevel(spaceItem.roomId, true);
+ // Lobby bulk-fetches hierarchy once; per-category fetch duplicated N×50 API pages.
+ const parentHasSummaries = hierarchySummaries.size > 0;
+ const enableFetch = !closed && !parentHasSummaries;
+ const { fetching, error, rooms: fetchedRooms } = useFetchSpaceHierarchyLevel(
+ spaceItem.roomId,
+ enableFetch
+ );
+ const rooms = parentHasSummaries ? hierarchySummaries : fetchedRooms;
const subspaces = useMemo(() => {
const s: Map = new Map();
@@ -105,15 +113,7 @@ export const SpaceHierarchy = forwardRef(
// Build a global set of all sub-room IDs by checking ALL joined rooms
// This ensures sub-rooms are hidden even if their parent isn't in this space
- const globalSubRoomIds = useMemo(() => {
- const subRoomIds = new Set();
- mx.getRooms().forEach((room) => {
- const subRoomsEvent = room.currentState.getStateEvents(StateEvent.PaarrotSubRooms, '');
- const content = subRoomsEvent?.getContent();
- content?.children?.forEach((childId: string) => subRoomIds.add(childId));
- });
- return subRoomIds;
- }, [mx, allJoinedRooms]);
+ const globalSubRoomIds = useGlobalSubRoomIds();
// Build a map of parent room -> sub-room IDs for nested rendering (only for rooms in this space)
const subRoomsMap = useMemo(() => {
diff --git a/src/app/features/lobby/index.ts b/src/app/features/lobby/index.ts
index 08355c7..d3b7700 100644
--- a/src/app/features/lobby/index.ts
+++ b/src/app/features/lobby/index.ts
@@ -1 +1 @@
-export * from './Lobby';
+export { Lobby } from './Lobby';
diff --git a/src/app/features/room-nav/CallParticipantsIndicator.tsx b/src/app/features/room-nav/CallParticipantsIndicator.tsx
index 95cbd3d..18b8364 100644
--- a/src/app/features/room-nav/CallParticipantsIndicator.tsx
+++ b/src/app/features/room-nav/CallParticipantsIndicator.tsx
@@ -2,12 +2,13 @@ import React from 'react';
import { Avatar, Box, Text, config } from 'folds';
import { Icon, Icons } from '../../components/icons';
import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRoomCallMembers } from '../call/useRoomCallMembers';
import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
import { mxcUrlToHttp, getMxIdLocalPart } from '../../utils/matrix';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { nameInitials } from '../../utils/common';
import { useCall } from '../call/useCall';
+import { useRoomHasActiveCall } from '../../state/activeCallRoomsRegistry';
+import { useRoomCallMembers } from '../call/useRoomCallMembers';
import * as css from './CallParticipantsIndicator.css';
const MAX_VISIBLE_PARTICIPANTS = 8;
@@ -17,6 +18,12 @@ type CallParticipantsIndicatorProps = {
};
export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorProps) {
+ const hasCall = useRoomHasActiveCall(roomId);
+ if (!hasCall) return null;
+ return ;
+}
+
+function CallParticipantsIndicatorActive({ roomId }: CallParticipantsIndicatorProps) {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const room = mx.getRoom(roomId);
@@ -41,20 +48,14 @@ export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorP
return getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
};
- /**
- * Check if a participant is currently speaking
- */
const isParticipantSpeaking = (userId: string): boolean => {
if (!activeCall) return false;
-
- // Direct check for Matrix user ID (works for local user)
+
if (activeCall.activeSpeakers.has(userId)) return true;
-
- // For remote users, activeSpeakers contains LiveKit identities (deviceId_timestamp)
+
const member = callMembers.find((m) => m.userId === userId);
if (!member) return false;
-
- // Check if any active speaker has this user's deviceId
+
return Array.from(activeCall.activeSpeakers).some((speakerId) => {
const underscoreIndex = speakerId.lastIndexOf('_');
const deviceId = underscoreIndex > 0 ? speakerId.substring(0, underscoreIndex) : speakerId;
@@ -62,20 +63,14 @@ export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorP
});
};
- /**
- * Check if a participant is currently muted
- */
const isParticipantMuted = (userId: string): boolean => {
if (!activeCall) return false;
-
- // For local user, check activeCall.isMuted
+
if (userId === myUserId) return activeCall.isMuted;
-
- // For remote users, mutedParticipants contains LiveKit identities (deviceId_timestamp)
+
const member = callMembers.find((m) => m.userId === userId);
if (!member) return false;
-
- // Check if any muted participant has this user's deviceId
+
return Array.from(activeCall.mutedParticipants).some((mutedId) => {
const underscoreIndex = mutedId.lastIndexOf('_');
const deviceId = underscoreIndex > 0 ? mutedId.substring(0, underscoreIndex) : mutedId;
@@ -83,17 +78,11 @@ export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorP
});
};
- /**
- * Check if the local user is deafened
- */
const isLocalUserDeafened = (userId: string): boolean => {
if (!activeCall || userId !== myUserId) return false;
return activeCall.isDeafened;
};
- /**
- * Get the appropriate audio icon for a participant
- */
const getAudioIcon = (userId: string): string => {
if (isLocalUserDeafened(userId)) {
return Icons.VolumeMute;
@@ -115,7 +104,7 @@ export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorP
const isSpeaking = isParticipantSpeaking(member.userId);
const isMuted = isParticipantMuted(member.userId);
const isDeafened = isLocalUserDeafened(member.userId);
-
+
return (
-
@@ -148,13 +137,13 @@ export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorP
)}
-
{getParticipantName(member.userId)}
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index ae439e5..996e53e 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -1,7 +1,8 @@
import React, { MouseEventHandler, forwardRef, useState, useMemo } from 'react';
import { Room, EventTimeline } from 'matrix-js-sdk';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
import { useNavigate } from 'react-router-dom';
+import { flushSync } from 'react-dom';
import { Avatar, Box, IconButton, Text, Menu, MenuItem, config, PopOut, toRem, Line, RectCords, Badge, Spinner, Tooltip, TooltipProvider } from 'folds';
import { Icon, Icons } from '../../components/icons';
import { useFocusWithin, useHover } from 'react-aria';
@@ -48,6 +49,9 @@ import { mDirectAtom } from '../../state/mDirectList';
import { useOpenCreateSubRoomModal } from '../../state/hooks/createRoomModal';
import { PresenceAvatar } from '../../components/presence';
import { Presence, useUserPresence } from '../../hooks/useUserPresence';
+import { pendingRoomNavigationAtom, roomNavLoadingAtom } from '../../state/pendingRoomNavigation';
+import * as roomNavCss from './styles.css';
+import classNames from 'classnames';
type RoomNavItemMenuProps = {
room: Room;
@@ -287,6 +291,14 @@ export function RoomNavItem({
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
const [menuAnchor, setMenuAnchor] = useState();
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
+ const pendingRoomId = useAtomValue(pendingRoomNavigationAtom);
+ const setPendingRoomId = useSetAtom(pendingRoomNavigationAtom);
+ const loadingRoomId = useAtomValue(roomNavLoadingAtom);
+ const setLoadingRoomId = useSetAtom(roomNavLoadingAtom);
+ // Instant highlight on press — don't wait for the route to settle.
+ const isPending = pendingRoomId === room.roomId;
+ const isLoading = loadingRoomId === room.roomId;
+ const effectivelySelected = selected || isPending || isLoading;
const avatarUrl = direct
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
@@ -368,6 +380,21 @@ export function RoomNavItem({
if (shouldScroll) {
navigate(linkPath, { replace: true, state: { scrollToLatest: Date.now() } });
}
+ return;
+ }
+
+ // Always mark pending so the nav loading bar shows until the room view settles.
+ setPendingRoomId(room.roomId);
+ setLoadingRoomId(room.roomId);
+ };
+
+ const handleRoomPointerDown: MouseEventHandler = () => {
+ if (!selected) {
+ // Paint highlight + loading bar before click navigation blocks the main thread.
+ flushSync(() => {
+ setPendingRoomId(room.roomId);
+ setLoadingRoomId(room.roomId);
+ });
}
};
@@ -376,17 +403,32 @@ export function RoomNavItem({
return (
-
+ {isLoading && (
+ <>
+
+
+
+ )}
+
{shouldShowIcon &&
@@ -413,7 +455,7 @@ export function RoomNavItem({
) : (
@@ -436,7 +478,7 @@ export function RoomNavItem({
) : (
@@ -470,7 +512,7 @@ export function RoomNavItem({
{optionsVisible && (
-
+
{parentSpaceInfo && (
(null);
+ const savedScrollRef = useRef<{ top: number; atBottom: boolean } | null>(null);
+ const setLoadingRoomId = useSetAtom(roomNavLoadingAtom);
+ // After the first hide, the next show is a warm keep-alive switch.
+ const warmNextActivateRef = useRef(false);
+
+ useLayoutEffect(() => {
+ setRoomTimelineVisible(room.roomId, active);
+ return () => clearRoomTimelineVisibilityGate(room.roomId);
+ }, [active, room.roomId]);
+
+ // Save/restore timeline scroll so warm switches don't jump.
+ useLayoutEffect(() => {
+ const scrollEl = slotRef.current?.querySelector(
+ '[data-room-timeline-scroll]'
+ ) as HTMLElement | null;
+ if (!scrollEl) return undefined;
+
+ if (!active) {
+ const distanceFromBottom =
+ scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight;
+ savedScrollRef.current = {
+ top: scrollEl.scrollTop,
+ atBottom: distanceFromBottom <= 50,
+ };
+ return undefined;
+ }
+
+ const saved = savedScrollRef.current;
+ if (!saved) return undefined;
+
+ const restore = () => {
+ if (saved.atBottom) {
+ scrollEl.scrollTop = scrollEl.scrollHeight;
+ } else {
+ scrollEl.scrollTop = saved.top;
+ }
+ };
+
+ restore();
+ // Composer remounts on rAF and changes timeline height — re-apply after that.
+ const raf1 = window.requestAnimationFrame(() => {
+ restore();
+ const raf2 = window.requestAnimationFrame(() => {
+ restore();
+ window.setTimeout(restore, 50);
+ });
+ void raf2;
+ });
+ return () => window.cancelAnimationFrame(raf1);
+ }, [active]);
+
+ useLayoutEffect(() => {
+ if (!active) {
+ warmNextActivateRef.current = true;
+ return undefined;
+ }
+ if (!warmNextActivateRef.current) return undefined;
+ // Warm path: timeline already mounted — clear the nav bar after a short flash.
+ const t = window.setTimeout(() => {
+ setLoadingRoomId((id) => (id === room.roomId ? null : id));
+ }, 200);
+ return () => window.clearTimeout(t);
+ }, [active, room.roomId, setLoadingRoomId]);
+
+ return (
+ ) : undefined)}
+ >
+
+
+
+ {active && }
+
+
+
+
+
+ {ids.map((roomId) => {
+ const room = mx.getRoom(roomId);
+ if (!room) return null;
+ const active = roomId === selectedRoomId;
+
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index 0782a74..affb248 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -24,7 +24,8 @@ import { useDebounce } from '../../hooks/useDebounce';
import { TypingIndicator } from '../../components/typing-indicator';
import { getMemberDisplayName, getMemberSearchStr } from '../../utils/room';
import { getMxIdLocalPart } from '../../utils/matrix';
-import { useSetSetting, useSetting } from '../../state/hooks/settings';
+import { useSetting } from '../../state/hooks/settings';
+import { usePeopleDrawerSetting } from '../../state/hooks/peopleDrawer';
import { settingsAtom } from '../../state/settings';
import { millify } from '../../plugins/millify';
import { ScrollTopContainer } from '../../components/scroll-top-container';
@@ -41,12 +42,14 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
import { ContainerColor } from '../../styles/ContainerColor.css';
import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useIsDirectRoom } from '../../hooks/useRoom';
type MemberDrawerHeaderProps = {
room: Room;
};
function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
- const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
+ const isDirect = useIsDirectRoom();
+ const [, setPeopleDrawer] = usePeopleDrawerSetting(isDirect);
return (
diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 27ac886..bf383e2 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { memo, useCallback, useLayoutEffect } from 'react';
import { Box, Line } from 'folds';
+import { Room as MatrixRoom } from 'matrix-js-sdk';
import { decodeRouteParam } from '../../pages/pathUtils';
import { useParams } from 'react-router-dom';
import { isKeyHotkey } from 'is-hotkey';
@@ -8,9 +9,10 @@ import { RoomView } from './RoomView';
import { MembersDrawer } from './MembersDrawer';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { useSetting } from '../../state/hooks/settings';
+import { usePeopleDrawerSetting } from '../../state/hooks/peopleDrawer';
import { settingsAtom } from '../../state/settings';
import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
-import { useRoom } from '../../hooks/useRoom';
+import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
import { useKeyDown } from '../../hooks/useKeyDown';
import { useMarkAsRead } from '../../hooks/useMarkAsRead';
import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -19,25 +21,64 @@ import { activeRoomIdAtom } from '../../state/activeRoom';
import { isForum } from '../../utils/room';
import { ForumRoomView } from './ForumRoomView';
-export function Room() {
- const { eventId: rawEventId } = useParams();
- const eventId = decodeRouteParam(rawEventId);
- const room = useRoom();
- const mx = useMatrixClient();
- const setActiveRoomId = useSetAtom(activeRoomIdAtom);
+type RoomFrameProps = {
+ room: MatrixRoom;
+ eventId?: string;
+ /** Optimistic shell only — no live timeline. */
+ pending?: boolean;
+ /**
+ * Visible keep-alive slot. Drives composer mount immediately (Slate cannot
+ * stay mounted in hidden rooms). Timeline ignores this via memo.
+ */
+ active?: boolean;
+};
- const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
- const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+/** Shared room column layout used by the live room and the pending-nav shell. */
+export const RoomFrame = memo(function RoomFrame({
+ room,
+ eventId,
+ pending = false,
+ active = true,
+}: RoomFrameProps) {
+ const mx = useMatrixClient();
+ const isDirect = useIsDirectRoom();
+ const [isDrawer] = usePeopleDrawerSetting(isDirect);
const screenSize = useScreenSizeContext();
const powerLevels = usePowerLevels(room);
- const members = useRoomMembers(mx, room.roomId);
- const markAsRead = useMarkAsRead(mx);
const forumRoom = isForum(room);
+ // Mount whenever the account pref is on — including inactive keep-alive slots —
+ // so members are already loaded when you switch rooms (no pop-in).
+ const showDrawer = !pending && screenSize === ScreenSize.Desktop && isDrawer;
+ const members = useRoomMembers(mx, room.roomId, showDrawer);
- // Update titlebar with current room ID
- useEffect(() => {
+ return (
+
+
+ {forumRoom && !pending ? (
+
+ ) : (
+
+ )}
+ {showDrawer && (
+ <>
+
+
+
+ )}
+
+
+ );
+});
+
+/** Titlebar + escape-to-mark-read — only for the visible cached room. */
+export function ActiveRoomEffects({ room }: { room: MatrixRoom }) {
+ const mx = useMatrixClient();
+ const setActiveRoomId = useSetAtom(activeRoomIdAtom);
+ const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+ const markAsRead = useMarkAsRead(mx);
+
+ useLayoutEffect(() => {
setActiveRoomId(room.roomId);
- return () => setActiveRoomId(undefined);
}, [room.roomId, setActiveRoomId]);
useKeyDown(
@@ -52,17 +93,19 @@ export function Room() {
)
);
+ return null;
+}
+
+/** @deprecated Prefer CachedRooms for route outlets — kept for single-room mounts. */
+export function Room() {
+ const { eventId: rawEventId } = useParams();
+ const eventId = decodeRouteParam(rawEventId);
+ const room = useRoom();
+
return (
-
-
- {forumRoom ? : }
- {screenSize === ScreenSize.Desktop && isDrawer && (
- <>
-
-
-
- )}
-
-
+ <>
+
+
+
);
}
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index dd75ffe..81a35d3 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -10,6 +10,7 @@ import React, {
useMemo,
useRef,
useState,
+ memo,
} from 'react';
import {
Direction,
@@ -117,6 +118,8 @@ import { useRoomCreators } from '../../hooks/useRoomCreators';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
import { useTheme } from '../../hooks/useTheme';
+import { useRoomVisibilityRef } from './RoomViewActiveContext';
+import { roomNavLoadingAtom } from '../../state/pendingRoomNavigation';
import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
import {
@@ -553,8 +556,15 @@ const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
};
};
-export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
+export const RoomTimeline = memo(function RoomTimeline({
+ room,
+ eventId,
+ roomInputRef,
+ editor,
+}: RoomTimelineProps) {
const mx = useMatrixClient();
+ const visibilityRef = useRoomVisibilityRef();
+ const setLoadingRoomId = useSetAtom(roomNavLoadingAtom);
const useAuthentication = useMediaAuthentication();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
@@ -716,6 +726,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
[]
),
onEnd: handleTimelinePagination,
+ enabledRef: visibilityRef,
+ roomId: room.roomId,
});
const loadEventTimeline = useEventTimelineLoader(
@@ -759,6 +771,21 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
mEvt.getType() === MessageEvent.RoomMessage || mEvt.getType() === MessageEvent.Sticker;
const shouldStickToBottom = atBottomRef.current || (isOwnMessage && isBottomPinnedEvent);
+ // Hidden keep-alive: only slide the virtual window when stuck to bottom.
+ // Shifting range while scrolled-up remaps scrollTop onto different messages.
+ if (!visibilityRef.current) {
+ if (shouldStickToBottom) {
+ setTimeline((ct) => ({
+ ...ct,
+ range: {
+ start: ct.range.start + 1,
+ end: ct.range.end + 1,
+ },
+ }));
+ }
+ return;
+ }
+
// Always update timeline with new message
setTimeline((ct) => ({
...ct,
@@ -771,7 +798,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
// Handle own messages and focus
if (isOwnMessage) {
setLatestUnreadMessage(null);
- if (document.hasFocus() && (!unreadInfo)) {
+ if (document.hasFocus() && !unreadInfo) {
const roomId = mEvt.getRoomId();
if (roomId) {
requestAnimationFrame(() => markAsRead(roomId, hideActivity));
@@ -803,7 +830,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
});
}
},
- [mx, room, unreadInfo, hideActivity, markAsRead]
+ [visibilityRef, mx, room, unreadInfo, hideActivity, markAsRead]
)
);
@@ -840,10 +867,11 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
useLiveTimelineRefresh(
room,
useCallback(() => {
+ if (!visibilityRef.current) return;
if (liveTimelineLinked) {
setTimeline(getInitialTimeline(room));
}
- }, [room, liveTimelineLinked])
+ }, [visibilityRef, room, liveTimelineLinked])
);
// Stay at bottom when room editor resize
@@ -856,6 +884,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
mounted = true;
return;
}
+ if (!visibilityRef.current) return;
if (!roomInputRef.current) return;
const editorBaseEntry = getResizeObserverEntry(roomInputRef.current, entries);
const scrollElement = getScrollElement();
@@ -865,29 +894,37 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
autoScrollToBottom(scrollElement, false, true);
}
};
- }, [getScrollElement, roomInputRef]),
+ }, [getScrollElement, roomInputRef, visibilityRef]),
useCallback(() => roomInputRef.current, [roomInputRef])
);
useResizeObserver(
- useCallback((entries) => {
- const timelineContent = timelineContentRef.current;
- const scrollElement = getScrollElement();
- if (!timelineContent || !scrollElement) return;
+ useCallback(
+ (entries) => {
+ if (!visibilityRef.current) return;
+ const timelineContent = timelineContentRef.current;
+ const scrollElement = getScrollElement();
+ if (!timelineContent || !scrollElement) return;
- const timelineEntry = getResizeObserverEntry(timelineContent, entries);
- if (!timelineEntry) return;
+ const timelineEntry = getResizeObserverEntry(timelineContent, entries);
+ if (!timelineEntry) return;
- const nextHeight = timelineEntry.contentRect.height;
- const previousHeight = timelineContentHeightRef.current;
- timelineContentHeightRef.current = nextHeight;
+ const nextHeight = timelineEntry.contentRect.height;
+ const previousHeight = timelineContentHeightRef.current;
+ timelineContentHeightRef.current = nextHeight;
- if (previousHeight === 0 || nextHeight <= previousHeight || !isScrolledToBottom(scrollElement)) {
- return;
- }
+ if (
+ previousHeight === 0 ||
+ nextHeight <= previousHeight ||
+ !isScrolledToBottom(scrollElement)
+ ) {
+ return;
+ }
- autoScrollToBottom(scrollElement, false, true);
- }, [getScrollElement]),
+ autoScrollToBottom(scrollElement, false, true);
+ },
+ [getScrollElement, visibilityRef]
+ ),
useCallback(() => timelineContentRef.current, [])
);
@@ -915,6 +952,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
useIntersectionObserver(
useCallback(
(entries) => {
+ if (!visibilityRef.current) return;
const target = atBottomAnchorRef.current;
if (!target) return;
const targetEntry = getIntersectionObserverEntry(target, entries);
@@ -927,7 +965,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
}
}
},
- [debounceSetAtBottom, tryAutoMarkAsRead]
+ [visibilityRef, debounceSetAtBottom, tryAutoMarkAsRead]
),
useCallback(
() => ({
@@ -965,6 +1003,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
window,
useCallback(
(evt) => {
+ if (!visibilityRef.current) return;
if (
isKeyHotkey('arrowup', evt) &&
editableActiveElement() &&
@@ -980,7 +1019,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
evt.preventDefault();
}
},
- [mx, room, editor]
+ [visibilityRef, mx, room, editor]
)
);
@@ -1011,6 +1050,31 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
}
}, []);
+ // Drop the room-nav loading bar once this timeline has painted (or after a
+ // short idle). flushSync paints the bar before this heavy mount work.
+ useEffect(() => {
+ let cleared = false;
+ const clear = () => {
+ if (cleared) return;
+ cleared = true;
+ setLoadingRoomId((id) => (id === room.roomId ? null : id));
+ };
+
+ const idleId =
+ typeof window.requestIdleCallback === 'function'
+ ? window.requestIdleCallback(clear, { timeout: 2000 })
+ : undefined;
+ const timeoutId = window.setTimeout(clear, idleId === undefined ? 400 : 2500);
+
+ return () => {
+ cleared = true;
+ if (idleId !== undefined && typeof window.cancelIdleCallback === 'function') {
+ window.cancelIdleCallback(idleId);
+ }
+ window.clearTimeout(timeoutId);
+ };
+ }, [room.roomId, setLoadingRoomId]);
+
// if live timeline is linked and unreadInfo change
// Scroll to last read message
useLayoutEffect(() => {
@@ -1053,6 +1117,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
const scrollToBottomCount = scrollToBottomRef.current.count;
useLayoutEffect(() => {
if (scrollToBottomCount > 0) {
+ if (!visibilityRef.current) return;
const scrollEl = scrollRef.current;
if (scrollEl) {
autoScrollToBottom(
@@ -1062,7 +1127,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
);
}
}
- }, [scrollToBottomCount]);
+ }, [scrollToBottomCount, visibilityRef]);
// Remove unreadInfo on mark as read
useEffect(() => {
@@ -2291,7 +2356,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
)}
-
+
);
-}
+});
diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 6d7a7f7..f93d45e 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -1,9 +1,10 @@
-import React, { useCallback, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { Box, Text, config } from 'folds';
import { EventType, Room } from 'matrix-js-sdk';
import { ReactEditor } from 'slate-react';
import { isKeyHotkey } from 'is-hotkey';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom, getDefaultStore } from 'jotai';
+import { Editor } from 'slate';
import { useStateEvent } from '../../hooks/useStateEvent';
import { StateEvent } from '../../../types/matrix/room';
import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
@@ -24,6 +25,8 @@ import { useSetting } from '../../state/hooks/settings';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { useRoomCreators } from '../../hooks/useRoomCreators';
import { activeThreadIdAtomFamily } from '../../state/activeThread';
+import { pendingRoomNavigationAtom } from '../../state/pendingRoomNavigation';
+import { activeRoomIdAtom } from '../../state/activeRoom';
import { ThreadView } from './ThreadView';
const FN_KEYS_REGEX = /^F\d+$/;
@@ -33,10 +36,8 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
return false;
}
- // do not focus on F keys
if (FN_KEYS_REGEX.test(code)) return false;
- // do not focus on numlock/scroll lock
if (
code.startsWith('OS') ||
code.startsWith('Meta') ||
@@ -59,7 +60,99 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
return true;
};
-export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
+/**
+ * Slate must not stay mounted in hidden keep-alive rooms — multiple Editable
+ * trees crash with findPath. Timeline stays warm; only the composer remounts.
+ */
+function RoomComposerSlot({
+ room,
+ roomId,
+ editor,
+ canMessage,
+ active,
+ roomViewRef,
+ roomInputRef,
+}: {
+ room: Room;
+ roomId: string;
+ editor: Editor;
+ canMessage: boolean;
+ active: boolean;
+ roomViewRef: React.RefObject;
+ roomInputRef: React.RefObject;
+}) {
+ const [mountComposer, setMountComposer] = useState(active);
+
+ useLayoutEffect(() => {
+ if (!active) {
+ setMountComposer(false);
+ try {
+ ReactEditor.blur(editor);
+ } catch {
+ // Editor may already be disconnected.
+ }
+ return undefined;
+ }
+ const raf = window.requestAnimationFrame(() => setMountComposer(true));
+ return () => window.cancelAnimationFrame(raf);
+ }, [active, editor]);
+
+ useEffect(() => {
+ if (active) return undefined;
+ try {
+ ReactEditor.blur(editor);
+ } catch {
+ // ignore
+ }
+ return undefined;
+ }, [active, editor]);
+
+ if (!canMessage) {
+ return (
+
+ You do not have permission to post in this room
+
+ );
+ }
+
+ // Gate on `active` in render (not only state) so Slate unmounts the same
+ // commit the slot hides — waiting for useLayoutEffect is one frame too late.
+ if (active && mountComposer) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+
+export const RoomView = memo(function RoomView({
+ room,
+ eventId,
+ pending = false,
+ active = true,
+}: {
+ room: Room;
+ eventId?: string;
+ /** Optimistic shell only — no live timeline (used for press→navigate gap). */
+ pending?: boolean;
+ /** False for hidden keep-alive slots — unmounts Slate only. */
+ active?: boolean;
+}) {
const roomInputRef = useRef(null);
const roomViewRef = useRef(null);
@@ -69,6 +162,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
const editor = useEditor();
const mx = useMatrixClient();
+ const setPendingRoomId = useSetAtom(pendingRoomNavigationAtom);
const tombstoneEvent = useStateEvent(room, StateEvent.RoomTombstone);
const powerLevels = usePowerLevelsContext();
@@ -78,11 +172,20 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
const canMessage = permissions.event(EventType.RoomMessage, mx.getSafeUserId());
const activeThreadId = useAtomValue(activeThreadIdAtomFamily(roomId));
+ const showThread = !pending && !!activeThreadId;
+ const composerActive = active && !pending;
+
+ useLayoutEffect(() => {
+ if (!composerActive) return;
+ setPendingRoomId((id) => (id === roomId ? null : id));
+ }, [composerActive, roomId, setPendingRoomId]);
useKeyDown(
window,
useCallback(
(evt) => {
+ if (!composerActive) return;
+ if (getDefaultStore().get(activeRoomIdAtom) !== roomId) return;
if (editableActiveElement()) return;
const portalContainer = document.getElementById('portalContainer');
if (portalContainer && portalContainer.children.length > 0) {
@@ -90,33 +193,45 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
}
if (shouldFocusMessageField(evt)) {
evt.preventDefault();
- ReactEditor.focus(editor);
+ try {
+ ReactEditor.focus(editor);
+ } catch {
+ return;
+ }
if (evt.key.length === 1) {
editor.insertText(evt.key);
}
} else if (isKeyHotkey('mod+v', evt)) {
- ReactEditor.focus(editor);
+ try {
+ ReactEditor.focus(editor);
+ } catch {
+ // Composer may not be mounted yet.
+ }
}
},
- [editor]
+ [composerActive, editor, roomId]
)
);
return (
- {activeThreadId ? (
-
+ {showThread ? (
+
) : (
<>
-
-
+
+ {!pending && (
+
+
+
+ )}
@@ -128,26 +243,15 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
replacementRoomId={tombstoneEvent.getContent().replacement_room}
/>
) : (
- <>
- {canMessage && (
-
- )}
- {!canMessage && (
-
- You do not have permission to post in this room
-
- )}
-
+
)}