fix(forum): stop the forum route being read as a timeline route

Author: eleboucher

src/app/components/page/MobileNavDrawer.tsx

@@ -12,21 +12,9 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import { matchPath, useLocation, useNavigate } from 'react-router-dom';
 import { lastVisitedRoomAtom } from '$state/room/lastRoom';
 import { usePrefersReducedMotion } from '$hooks/usePrefersReducedMotion';
-import {
-  DIRECT_PATH,
-  DIRECT_ROOM_PATH,
-  DIRECT_ROOM_FORUM_PATH,
-  EXPLORE_PATH,
-  HOME_PATH,
-  HOME_ROOM_PATH,
-  HOME_ROOM_FORUM_PATH,
-  INBOX_PATH,
-  SPACE_PATH,
-  SPACE_ROOM_PATH,
-  SPACE_ROOM_FORUM_PATH,
-} from '$pages/paths';
+import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '$pages/paths';
 import { resolveSection } from '$pages/pathUtils';
-import { isRoomAlias, isRoomId } from '$utils/matrix';
+import { matchRoomRoute } from '$pages/roomRouteMatch';
 import { PersistentRoomHost } from './PersistentRoomHost';
 import { MobileNavDrawerContext, type MobileSwipeTarget } from './MobileNavDrawerContext';
 import {
@@ -69,19 +57,9 @@ export function MobileNavDrawer({ nav, rail, bottomNav, children }: MobileNavDra
     openableSection && openableSection.getRoomPath && lastRoom?.[openableSection.key]
   );
 
-  const roomMatch =
-    matchPath({ path: HOME_ROOM_FORUM_PATH, end: false }, location.pathname) ??
-    matchPath({ path: DIRECT_ROOM_FORUM_PATH, end: false }, location.pathname) ??
-    matchPath({ path: SPACE_ROOM_FORUM_PATH, end: false }, location.pathname) ??
-    matchPath({ path: HOME_ROOM_PATH, end: false }, location.pathname) ??
-    matchPath({ path: DIRECT_ROOM_PATH, end: false }, location.pathname) ??
-    matchPath({ path: SPACE_ROOM_PATH, end: false }, location.pathname);
-  const matchedRoomId = roomMatch?.params.roomIdOrAlias
-    ? decodeURIComponent(roomMatch.params.roomIdOrAlias)
-    : undefined;
-  // `:roomIdOrAlias` also matches non-room segments like `create`, `search`, and `lobby`.
-  // Only treat it as a room when it is a real Matrix ID or alias.
-  const isRoomRoute = !!matchedRoomId && (isRoomId(matchedRoomId) || isRoomAlias(matchedRoomId));
+  const roomRoute = matchRoomRoute(location.pathname);
+  const matchedRoomId = roomRoute?.roomIdOrAlias;
+  const isRoomRoute = roomRoute !== undefined;
 
   const listView =
     matchPath({ path: HOME_PATH, end: true }, location.pathname) !== null ||

src/app/components/page/PersistentRoomHost.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { matchPath, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
 import { Room } from '$features/room';
 import { IsInactivePanelProvider } from '$hooks/useRoom';
@@ -8,50 +8,16 @@ import { DirectRouteRoomProvider } from '$pages/client/direct';
 import { SpaceRouteRoomProvider } from '$pages/client/space';
 import { lastVisitedRoomAtom } from '$state/room/lastRoom';
 import { resolveSection, type SectionNav } from '$pages/pathUtils';
-import {
-  DIRECT_ROOM_PATH,
-  DIRECT_ROOM_FORUM_PATH,
-  HOME_ROOM_PATH,
-  HOME_ROOM_FORUM_PATH,
-  SPACE_ROOM_PATH,
-  SPACE_ROOM_FORUM_PATH,
-} from '$pages/paths';
-import { isRoomAlias, isRoomId } from '$utils/matrix';
+import { matchRoomRoute, type RoomRouteMatch } from '$pages/roomRouteMatch';
 
-type DisplayedRoom = {
-  roomIdOrAlias: string;
-  eventId?: string;
-};
-
-function useDisplayedRoom(section: SectionNav | null): DisplayedRoom | undefined {
+function useDisplayedRoom(section: SectionNav | null): RoomRouteMatch | undefined {
   const location = useLocation();
   const lastRoom = useAtomValue(lastVisitedRoomAtom);
 
   if (!section || !section.getRoomPath) return undefined;
 
-  const roomMatch =
-    matchPath({ path: HOME_ROOM_FORUM_PATH, end: false }, location.pathname) ??
-    matchPath({ path: DIRECT_ROOM_FORUM_PATH, end: false }, location.pathname) ??
-    matchPath({ path: SPACE_ROOM_FORUM_PATH, end: false }, location.pathname) ??
-    matchPath({ path: HOME_ROOM_PATH, end: false }, location.pathname) ??
-    matchPath({ path: DIRECT_ROOM_PATH, end: false }, location.pathname) ??
-    matchPath({ path: SPACE_ROOM_PATH, end: false }, location.pathname);
-
-  if (roomMatch) {
-    const encodedId = roomMatch.params.roomIdOrAlias;
-    const encodedEvent = roomMatch.params.eventId;
-    if (encodedId) {
-      const decodedId = decodeURIComponent(encodedId);
-      // `:roomIdOrAlias` also matches non-room segments like `create`, `search`, `lobby`.
-      // Only treat it as a room when it's a real Matrix id/alias.
-      if (isRoomId(decodedId) || isRoomAlias(decodedId)) {
-        return {
-          roomIdOrAlias: decodedId,
-          eventId: encodedEvent ? decodeURIComponent(encodedEvent) : undefined,
-        };
-      }
-    }
-  }
+  const roomRoute = matchRoomRoute(location.pathname);
+  if (roomRoute) return roomRoute;
 
   const lastRoomId = lastRoom?.[section.key];
   if (lastRoomId) {

src/app/hooks/useRoomNavigate.ts

@@ -8,11 +8,12 @@ import {
   getDirectRoomPath,
   getHomeForumPath,
   getHomeRoomPath,
-  getSpacePath,
   getSpaceForumPath,
+  getSpacePath,
   getSpaceRoomPath,
   resolveSection,
 } from '$pages/pathUtils';
+import { CustomRoomType } from '$types/matrix/room';
 import { getOrphanParents, guessPerfectParent } from '$utils/room/hierarchy';
 import { roomToParentsAtom } from '$state/room/roomToParents';
 import { mDirectAtom } from '$state/mDirectList';
@@ -21,7 +22,6 @@ import { settingsAtom } from '$state/settings';
 import { useSetting } from '$state/hooks/settings';
 import { useSelectedSpace } from './router/useSelectedSpace';
 import { useMatrixClient } from './useMatrixClient';
-import { CustomRoomType } from '$types/matrix/room';
 
 export const useRoomNavigate = () => {
   const navigate = useNavigate();
@@ -44,9 +44,10 @@ export const useRoomNavigate = () => {
     (roomId: string, eventId?: string, opts?: NavigateOptions) => {
       const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
       const openSpaceTimeline = developerTools && spaceSelectedId === roomId;
-      const isForum = mx.getRoom(roomId)?.getType() === CustomRoomType.Forum;
 
       const orphanParents = openSpaceTimeline ? [roomId] : getOrphanParents(roomToParents, roomId);
+      // The forum view has no jump target, so an event jump still uses the room path.
+      const forum = !eventId && mx.getRoom(roomId)?.getType() === CustomRoomType.Forum;
       let destPath: string;
       let roomPart: string;
       if (orphanParents.length > 0) {
@@ -59,19 +60,15 @@ export const useRoomNavigate = () => {
 
         const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, parentSpace);
         roomPart = openSpaceTimeline ? roomId : roomIdOrAlias;
-        destPath = isForum
-          ? getSpaceForumPath(pSpaceIdOrAlias, roomPart, eventId)
+        destPath = forum
+          ? getSpaceForumPath(pSpaceIdOrAlias, roomPart)
           : getSpaceRoomPath(pSpaceIdOrAlias, roomPart, eventId);
       } else if (mDirects.has(roomId)) {
         roomPart = roomIdOrAlias;
-        destPath = isForum
-          ? getDirectForumPath(roomPart, eventId)
-          : getDirectRoomPath(roomPart, eventId);
+        destPath = forum ? getDirectForumPath(roomPart) : getDirectRoomPath(roomPart, eventId);
       } else {
         roomPart = roomIdOrAlias;
-        destPath = isForum
-          ? getHomeForumPath(roomPart, eventId)
-          : getHomeRoomPath(roomPart, eventId);
+        destPath = forum ? getHomeForumPath(roomPart) : getHomeRoomPath(roomPart, eventId);
       }
 
       const section = resolveSection(destPath);

src/app/pages/client/home/Home.tsx

@@ -25,6 +25,7 @@ import {
   getHomeSearchPath,
   withSearchParam,
 } from '$pages/pathUtils';
+import { CustomRoomType } from '$types/matrix/room';
 import { useOpenShallowRoute } from '$pages/client/useShallowRoute';
 import { getCanonicalAliasOrRoomId } from '$utils/matrix';
 import { useSelectedOrLastRoom } from '$hooks/router/useSelectedRoom';
@@ -65,7 +66,6 @@ import { useClientConfig } from '$hooks/useClientConfig';
 import { getMxIdServer } from '$utils/mxIdHelper';
 import { NavMenu } from '$components/nav/NavMenu';
 import { useMenuAnchor } from '$hooks/useMenuAnchor';
-import { CustomRoomType } from '$types/matrix/room';
 
 type HomeMenuProps = {
   requestClose: () => void;

src/app/pages/roomRouteMatch.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from 'vitest';
+import { matchRoomRoute } from './roomRouteMatch';
+
+vi.mock('@tauri-apps/api/core', () => ({ isTauri: () => false, invoke: () => undefined }));
+
+const roomId = '!room:example.com';
+const encodedRoomId = encodeURIComponent(roomId);
+const eventId = '$event-id';
+
+describe('matchRoomRoute', () => {
+  it('matches a bare room route in every section', () => {
+    expect(matchRoomRoute(`/home/${encodedRoomId}/`)).toEqual({
+      roomIdOrAlias: roomId,
+      eventId: undefined,
+    });
+    expect(matchRoomRoute(`/direct/${encodedRoomId}/`)).toEqual({
+      roomIdOrAlias: roomId,
+      eventId: undefined,
+    });
+    expect(matchRoomRoute(`/!space:example.com/${encodedRoomId}/`)).toEqual({
+      roomIdOrAlias: roomId,
+      eventId: undefined,
+    });
+  });
+
+  it('matches a room route with an event id', () => {
+    expect(matchRoomRoute(`/home/${encodedRoomId}/${encodeURIComponent(eventId)}/`)).toEqual({
+      roomIdOrAlias: roomId,
+      eventId,
+    });
+  });
+
+  it('rejects forum routes', () => {
+    expect(matchRoomRoute(`/home/${encodedRoomId}/forum/`)).toBeUndefined();
+    expect(matchRoomRoute(`/direct/${encodedRoomId}/forum/`)).toBeUndefined();
+    expect(matchRoomRoute(`/!space:example.com/${encodedRoomId}/forum/`)).toBeUndefined();
+  });
+
+  it('drops a second segment that is not an event id', () => {
+    expect(matchRoomRoute(`/home/${encodedRoomId}/anything/`)).toEqual({
+      roomIdOrAlias: roomId,
+      eventId: undefined,
+    });
+  });
+
+  it('rejects non-room first segments', () => {
+    expect(matchRoomRoute('/home/create/')).toBeUndefined();
+    expect(matchRoomRoute('/!space:example.com/lobby/')).toBeUndefined();
+  });
+});

src/app/pages/roomRouteMatch.ts

@@ -0,0 +1,51 @@
+import { matchPath } from 'react-router-dom';
+import { isEventId, isRoomAlias, isRoomId } from '$utils/matrix';
+import {
+  DIRECT_ROOM_FORUM_PATH,
+  DIRECT_ROOM_PATH,
+  HOME_ROOM_FORUM_PATH,
+  HOME_ROOM_PATH,
+  SPACE_ROOM_FORUM_PATH,
+  SPACE_ROOM_PATH,
+} from './paths';
+
+export type RoomRouteMatch = {
+  roomIdOrAlias: string;
+  eventId?: string;
+};
+
+const isForumRoute = (pathname: string): boolean =>
+  [HOME_ROOM_FORUM_PATH, DIRECT_ROOM_FORUM_PATH, SPACE_ROOM_FORUM_PATH].some(
+    (path) => matchPath({ path, end: false }, pathname) !== null
+  );
+
+/**
+ * Matches the timeline room routes and returns their decoded params.
+ *
+ * `:roomIdOrAlias/:eventId?` also matches sibling routes like `:roomIdOrAlias/forum`
+ * and non-room segments like `create` or `search`. The router ranks the literal
+ * routes higher, but a bare `matchPath` does not — so forum routes are rejected and
+ * both params are validated as real Matrix ids.
+ */
+export const matchRoomRoute = (pathname: string): RoomRouteMatch | undefined => {
+  if (isForumRoute(pathname)) return undefined;
+
+  const match =
+    matchPath({ path: HOME_ROOM_PATH, end: false }, pathname) ??
+    matchPath({ path: DIRECT_ROOM_PATH, end: false }, pathname) ??
+    matchPath({ path: SPACE_ROOM_PATH, end: false }, pathname);
+  if (!match) return undefined;
+
+  const encodedId = match.params.roomIdOrAlias;
+  if (!encodedId) return undefined;
+  const roomIdOrAlias = decodeURIComponent(encodedId);
+  if (!isRoomId(roomIdOrAlias) && !isRoomAlias(roomIdOrAlias)) return undefined;
+
+  const encodedEvent = match.params.eventId;
+  const eventId = encodedEvent ? decodeURIComponent(encodedEvent) : undefined;
+
+  return {
+    roomIdOrAlias,
+    eventId: eventId && isEventId(eventId) ? eventId : undefined,
+  };
+};

src/app/utils/matrix.ts

@@ -46,6 +46,8 @@ export const isRoomId = (id: string): boolean => id.startsWith('!');
 
 export const isRoomAlias = (id: string): boolean => validMxId(id) && id.startsWith('#');
 
+export const isEventId = (id: string): boolean => id.startsWith('$');
+
 export const getCanonicalAliasRoomId = (mx: MatrixClient, alias: string): string | undefined =>
   mx
     .getRooms()