feat: Integrate forum layout support across various components and enhance room handling logic

src/app/hooks/useFileDrop.ts

@@ -11,14 +11,15 @@ export const useFileDropHandler = (onDrop: (file: File[]) => void): DragEventHan
   );
 
 export const useFileDropZone = (
-  zoneRef: RefObject<HTMLElement>,
+  zoneRef: RefObject<HTMLElement> | undefined,
   onDrop: (file: File[]) => void
 ): boolean => {
   const dragStateRef = useRef<'start' | 'leave' | 'over'>();
   const [active, setActive] = useState(false);
 
   useEffect(() => {
-    const target = zoneRef.current;
+    const target = zoneRef?.current;
+    if (!target) return undefined;
     const handleDrop = (evt: DragEvent) => {
       evt.preventDefault();
       dragStateRef.current = undefined;
@@ -35,7 +36,9 @@ export const useFileDropZone = (
   }, [zoneRef, onDrop]);
 
   useEffect(() => {
-    const target = zoneRef.current;
+    const target = zoneRef?.current;
+    if (!target) return undefined;
+
     const handleDragEnter = (evt: DragEvent) => {
       if (evt.dataTransfer?.types.includes('Files')) {
         dragStateRef.current = 'start';

src/app/hooks/useRoomNavigate.ts

@@ -9,7 +9,7 @@ import {
   getSpaceRoomPath,
 } from '../pages/pathUtils';
 import { useMatrixClient } from './useMatrixClient';
-import { getOrphanParents, guessPerfectParent } from '../utils/room';
+import { getOrphanParents, guessPerfectParent, isSpace } from '../utils/room';
 import { roomToParentsAtom } from '../state/room/roomToParents';
 import { mDirectAtom } from '../state/mDirectList';
 import { useSelectedSpace } from './router/useSelectedSpace';
@@ -34,9 +34,15 @@ export const useRoomNavigate = () => {
 
   const navigateRoom = useCallback(
     (roomId: string, eventId?: string, opts?: NavigateOptions) => {
+      const room = mx.getRoom(roomId);
       const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
       const openSpaceTimeline = developerTools && spaceSelectedId === roomId;
 
+      if (room && isSpace(room) && !openSpaceTimeline) {
+        navigate(getSpacePath(roomIdOrAlias), opts);
+        return;
+      }
+
       const orphanParents = openSpaceTimeline ? [roomId] : getOrphanParents(roomToParents, roomId);
       if (orphanParents.length > 0) {
         let parentSpace: string;

src/app/hooks/useSpaceHierarchy.ts

@@ -6,7 +6,7 @@ import { QueryFunction, useInfiniteQuery } from '@tanstack/react-query';
 import { useMatrixClient } from './useMatrixClient';
 import { roomToParentsAtom } from '../state/room/roomToParents';
 import { MSpaceChildContent, StateEvent } from '../../types/matrix/room';
-import { getAllParents, getStateEvents, isValidChild } from '../utils/room';
+import { getAllParents, getStateEvents, isSpace, isValidChild } from '../utils/room';
 import { isRoomId } from '../utils/matrix';
 import { SortFunc, byOrderKey, byTsOldToNew, factoryRoomIdByActivity } from '../utils/sort';
 import { useStateEventCallback } from './useStateEventCallback';
@@ -64,7 +64,7 @@ const getHierarchySpaces = (
       // because we can not find if a childId is space without joining
       // or requesting room summary, we will look it into spaceRooms local
       // cache which we maintain as we load summary in UI.
-      if (getRoom(childId)?.isSpaceRoom() || spaceRooms.has(childId)) {
+      if (isSpace(getRoom(childId) ?? null) || spaceRooms.has(childId)) {
         const childItem: HierarchyItemSpace = {
           roomId: childId,
           content: childEvent.getContent<MSpaceChildContent>(),
@@ -114,7 +114,7 @@ const getSpaceHierarchy = (
       if (!isValidChild(childEvent)) return;
       const childId = childEvent.getStateKey();
       if (!childId || !isRoomId(childId)) return;
-      if (getRoom(childId)?.isSpaceRoom() || spaceRooms.has(childId)) return;
+      if (isSpace(getRoom(childId) ?? null) || spaceRooms.has(childId)) return;
 
       const childItem: HierarchyItemRoom = {
         roomId: childId,
@@ -189,7 +189,7 @@ const getSpaceJoinedHierarchy = (
       const childId = childEvent.getStateKey();
       if (!childId || !isRoomId(childId)) return false;
       const room = getRoom(childId);
-      if (!room || room.isSpaceRoom()) return false;
+      if (!room || isSpace(room)) return false;
 
       return true;
     });