fix(forum): restore the menu entries dropped in the rebase

Author: eleboucher

src/app/components/upload-board/UploadBoard.tsx

@@ -11,24 +11,21 @@ import * as css from './UploadBoard.css';
 
 type UploadBoardProps = {
   header: ReactNode;
-  showUploadCardBottom?: boolean;
 };
-export const UploadBoard = as<'div', UploadBoardProps>(
-  ({ header, showUploadCardBottom, children, ...props }, ref) => (
-    <Box className={css.UploadBoardBase} {...props} ref={ref}>
-      <Box className={css.UploadBoardContainer} justifyContent="End">
-        <Box className={classNames(css.UploadBoard)} direction="Column">
-          <Box grow="Yes" direction="Column">
-            {children}
-          </Box>
-          <Box direction="Column" shrink="No">
-            {header}
-          </Box>
+export const UploadBoard = as<'div', UploadBoardProps>(({ header, children, ...props }, ref) => (
+  <Box className={css.UploadBoardBase} {...props} ref={ref}>
+    <Box className={css.UploadBoardContainer} justifyContent="End">
+      <Box className={classNames(css.UploadBoard)} direction="Column">
+        <Box grow="Yes" direction="Column">
+          {children}
+        </Box>
+        <Box direction="Column" shrink="No">
+          {header}
         </Box>
       </Box>
     </Box>
-  )
-);
+  </Box>
+));
 
 // Progress ticks re-render this header, so the caller reads uploads on demand here
 // instead of subscribing to them itself.

src/app/features/forum/ForumMenu.tsx

@@ -23,10 +23,12 @@ import {
   GearSix,
   Link,
   menuIcon,
+  SignOut,
   Terminal,
   UserCircle,
   UserPlus,
 } from '$components/icons/phosphor';
+import { useRoomMenuActions } from '$hooks/useRoomMenuActions';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { RoomSettingsPage } from '$state/roomSettings';
 
@@ -48,6 +50,7 @@ export const ForumMenu = forwardRef<HTMLDivElement, ForumMenuProps>(
     const navigate = useNavigate();
     const parentSpace = useSpaceOptionally();
     const isDirectRoom = useIsDirectRoom();
+    const { handleLeaveRoom } = useRoomMenuActions(room);
 
     const [invitePrompt, setInvitePrompt] = useState(false);
 
@@ -157,6 +160,23 @@ export const ForumMenu = forwardRef<HTMLDivElement, ForumMenuProps>(
             </MenuItem>
           )}
         </Box>
+        <Line variant="Surface" size="300" />
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+          <MenuItem
+            onClick={async () => {
+              if (await handleLeaveRoom()) requestClose();
+            }}
+            variant="Critical"
+            fill="None"
+            size="300"
+            after={menuIcon(SignOut)}
+            radii="300"
+          >
+            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+              Leave Room
+            </Text>
+          </MenuItem>
+        </Box>
       </Menu>
     );
   }

src/app/features/lobby/SpaceItem.tsx

@@ -15,6 +15,8 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { mxcUrlToHttp } from '$utils/matrix';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import { AddExistingModal } from '$features/add-existing';
+import { BetaNoticeBadge } from '$components/BetaNoticeBadge';
+import { CreateRoomType } from '$components/create-room/types';
 import { useOpenShallowRoute } from '$pages/client/useShallowRoute';
 import { getCreateRoomPath, getCreateSpacePath } from '$pages/pathUtils';
 import { stopPropagation } from '$utils/keyboard';
@@ -234,8 +236,8 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
-  const handleCreateRoom = () => {
-    openShallowRoute(getCreateRoomPath(item.roomId));
+  const handleCreateRoom = (type?: CreateRoomType) => {
+    openShallowRoute(getCreateRoomPath(item.roomId, type));
     setCords(undefined);
   };
 
@@ -266,10 +268,20 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
               radii="300"
               variant="Primary"
               fill="None"
-              onClick={handleCreateRoom}
+              onClick={() => handleCreateRoom()}
             >
               <Text size="T300">New Room</Text>
             </MenuItem>
+            <MenuItem
+              size="300"
+              radii="300"
+              variant="Primary"
+              fill="None"
+              onClick={() => handleCreateRoom(CreateRoomType.ForumRoom)}
+              after={<BetaNoticeBadge />}
+            >
+              <Text size="T300">Forum Room</Text>
+            </MenuItem>
             <MenuItem size="300" radii="300" fill="None" onClick={handleAddExisting}>
               <Text size="T300">Existing Room</Text>
             </MenuItem>

src/app/pages/pathUtils.ts

@@ -183,8 +183,13 @@ export const getExploreServerPath = (server: string): string => {
 export const getCreatePath = (): string => CREATE_PATH;
 export const getCreateSpacePath = (spaceId?: string): string =>
   spaceId ? withSearchParam(CREATE_PATH, { spaceId }) : CREATE_PATH;
-export const getCreateRoomPath = (spaceId?: string): string =>
-  spaceId ? withSearchParam(CREATE_ROOM_PATH, { spaceId }) : CREATE_ROOM_PATH;
+export const getCreateRoomPath = (spaceId?: string, type?: string): string => {
+  const params: Record<string, string> = {};
+  if (spaceId) params.spaceId = spaceId;
+  if (type) params.type = type;
+
+  return Object.keys(params).length ? withSearchParam(CREATE_ROOM_PATH, params) : CREATE_ROOM_PATH;
+};
 export const getBugReportPath = (): string => BUG_REPORT_PATH;
 export const getNavigatePath = (): string => NAVIGATE_PATH;
 export const getProfilePath = (): string => PROFILE_PATH;