feat: add m.forum room type and dedicated view with threads as topics

.changeset/add-forum-room-type.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add the `forum` room type with a dedicated forum view that presents threads as topics.

src/app/components/create-room/CreateRoomTypeSelector.tsx

@@ -71,6 +71,32 @@ export function CreateRoomTypeSelector({
           </Box>
         </SettingTile>
       </SequenceCard>
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomType.ForumRoom ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomType.ForumRoom}
+        onClick={() => onSelect(CreateRoomType.ForumRoom)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={getIcon(CreateRoomType.ForumRoom)}
+          after={value === CreateRoomType.ForumRoom && sizedIcon(Check)}
+        >
+          <Box gap="200" alignItems="Baseline">
+            <Text size="H6" style={{ flexShrink: 0 }}>
+              Forum Room
+            </Text>
+            <Text size="T300" priority="300" truncate>
+              - Conversations split in topics.
+            </Text>
+            <BetaNoticeBadge />
+          </Box>
+        </SettingTile>
+      </SequenceCard>
     </Box>
   );
 }

src/app/components/create-room/types.ts

@@ -1,6 +1,7 @@
 export enum CreateRoomType {
   TextRoom = 'text',
   VoiceRoom = 'voice',
+  ForumRoom = 'forum',
 }
 
 export enum CreateRoomAccess {

src/app/components/create-room/utils.ts

@@ -8,13 +8,14 @@ import type {
 import { JoinRule, RestrictedAllowType, EventType, RoomType } from '$types/matrix-sdk';
 
 import type { StateEvents } from '$types/matrix-sdk';
+import type { CustomRoomType } from '$types/matrix/room';
 import { getViaServers } from '$plugins/via-servers';
 import { getMxIdServer } from '$utils/mxIdHelper';
 import { CreateRoomAccess } from './types';
 import * as prefix from '$unstable/prefixes';
 
-const createRoomCreationContent = (
-  type: RoomType | undefined,
+export const createRoomCreationContent = (
+  type: RoomType | CustomRoomType | undefined,
   allowFederation: boolean,
   additionalCreators: string[] | undefined
 ): object => {
@@ -32,7 +33,7 @@ const createRoomCreationContent = (
   return content;
 };
 
-const createRoomJoinRulesState = (
+export const createRoomJoinRulesState = (
   access: CreateRoomAccess,
   parent: Room | undefined,
   knock: boolean
@@ -66,7 +67,7 @@ const createRoomJoinRulesState = (
   };
 };
 
-const createRoomParentState = (parent: Room) => ({
+export const createRoomParentState = (parent: Room) => ({
   type: EventType.SpaceParent,
   state_key: parent.roomId,
   content: {
@@ -80,28 +81,28 @@ const createSpacePowerLevelsOverride = () => ({
 });
 
 export const createRoomEncryptionState = () => ({
-  type: EventType.RoomEncryption,
+  type: 'm.room.encryption',
   state_key: '',
   content: {
     algorithm: 'm.megolm.v1.aes-sha2',
   },
 });
 
-const createRoomCallState = () => ({
+export const createRoomCallState = () => ({
   type: prefix.MATRIX_UNSTABLE_ROOM_TYPE_CALL_PROPERTY_NAME,
   state_key: '',
   content: {},
 });
 
-const createVoiceRoomPowerLevelsOverride = () => ({
+export const createVoiceRoomPowerLevelsOverride = () => ({
   events: {
     [EventType.GroupCallMemberPrefix]: 0,
   },
 });
 
 export type CreateRoomData = {
   version: string;
-  type?: RoomType;
+  type?: RoomType | CustomRoomType;
   parent?: Room;
   access: CreateRoomAccess;
   name: string;

src/app/components/icons/roomIcons.tsx

@@ -1,7 +1,8 @@
 import { JoinRule, RoomType } from '$types/matrix-sdk';
 import type { ComponentType } from 'react';
 import type { IconProps } from '@phosphor-icons/react';
-import { Globe, HashStraight, Lock, SpeakerHigh, SquaresFour } from './phosphor';
+import { CustomRoomType } from '$types/matrix/room';
+import { Chats, Globe, HashStraight, Lock, SpeakerHigh, SquaresFour } from './phosphor';
 
 export type RoomPhosphorIcon = ComponentType<IconProps>;
 
@@ -59,6 +60,17 @@ export function getRoomStandaloneIconComponent(
     return SpeakerHigh;
   }
 
+  if (roomType === CustomRoomType.Forum) {
+    if (
+      joinRule === JoinRule.Invite ||
+      joinRule === JoinRule.Knock ||
+      joinRule === JoinRule.Private
+    ) {
+      return Lock;
+    }
+    return Chats;
+  }
+
   if (joinRule === JoinRule.Public) return Globe;
   if (
     joinRule === JoinRule.Invite ||
@@ -95,5 +107,16 @@ export function getRoomIconComponent(roomType?: string, joinRule?: JoinRule): Ro
     return SpeakerHigh;
   }
 
+  if (roomType === CustomRoomType.Forum) {
+    if (
+      joinRule === JoinRule.Invite ||
+      joinRule === JoinRule.Knock ||
+      joinRule === JoinRule.Private
+    ) {
+      return Lock;
+    }
+    return Chats;
+  }
+
   return HashStraight;
 }

src/app/components/message/PollEvent.tsx

@@ -224,7 +224,7 @@ export function PollEvent({ content, mEvent, mx, room }: PollEventProps) {
         rel_type: RelationType.Reference,
         event_id: eventId,
       },
-      'org.matrix.msc3381.poll.end': {},
+      [M_POLL_END.name]: {},
       [M_TEXT.name]: endText,
       body: endText,
       msgtype: MsgType.Text,

src/app/components/message/modals/Options.tsx

@@ -598,6 +598,7 @@ export type OptionMenuProps = {
   onEditId?: (eventId?: string) => void;
   onReproxyId?: (profileId?: string) => void;
   hideReadReceipts?: boolean;
+  hideReplyButton?: boolean;
   showDeveloperTools?: boolean;
   canPinEvent?: boolean;
   canDelete?: boolean;
@@ -622,6 +623,7 @@ function OptionMenu({
   onReplyClick,
   onEditId,
   hideReadReceipts,
+  hideReplyButton,
   showDeveloperTools,
   canPinEvent,
   canDelete,
@@ -808,20 +810,22 @@ function OptionMenu({
               {isGif && isModal && (
                 <MessageFavoriteGifItem room={room} mEvent={mEvent} onClose={closeMenu} />
               )}
-              <MenuItem
-                size="300"
-                after={menuIcon(ArrowBendUpLeftIcon)}
-                radii="300"
-                data-event-id={mEvent.getId()}
-                onClick={(evt) => {
-                  onReplyClick(evt);
-                  onTotalClose();
-                }}
-              >
-                <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
-                  Reply
-                </Text>
-              </MenuItem>
+              {!hideReplyButton && (
+                <MenuItem
+                  size="300"
+                  after={menuIcon(ArrowBendUpLeftIcon)}
+                  radii="300"
+                  data-event-id={mEvent.getId()}
+                  onClick={(evt) => {
+                    onReplyClick(evt);
+                    onTotalClose();
+                  }}
+                >
+                  <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
+                    Reply
+                  </Text>
+                </MenuItem>
+              )}
               {!isThreadedMessage && (
                 <MenuItem
                   size="300"

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

@@ -11,21 +11,24 @@ import * as css from './UploadBoard.css';
 
 type UploadBoardProps = {
   header: ReactNode;
+  showUploadCardBottom?: boolean;
 };
-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}
+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>
         </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/create-room/CreateRoom.tsx

@@ -27,12 +27,14 @@ import { getRoomStandaloneIconComponent } from '$components/icons/roomIcons';
 import {
   CaretDown,
   CaretUp,
+  Chats,
   Hash,
   sizedIcon,
   SpeakerHigh,
   Warning,
   type IconSizeToken,
 } from '$components/icons/phosphor';
+import { CustomRoomType } from '$types/matrix/room';
 import { createDebugLogger } from '$utils/debugLogger';
 import {
   restrictedSupported,
@@ -50,20 +52,20 @@ const getCreateRoomAccessToIcon = (
   type?: CreateRoomType,
   size: IconSizeToken = '400'
 ): ReactNode => {
-  const isVoiceRoom = type === CreateRoomType.VoiceRoom;
+  let roomType: string | undefined;
+  if (type === CreateRoomType.VoiceRoom) roomType = RoomType.UnstableCall;
+  if (type === CreateRoomType.ForumRoom) roomType = CustomRoomType.Forum;
 
   let joinRule: JoinRule = JoinRule.Public;
   if (access === CreateRoomAccess.Restricted) joinRule = JoinRule.Restricted;
   if (access === CreateRoomAccess.Private) joinRule = JoinRule.Knock;
 
-  return sizedIcon(
-    getRoomStandaloneIconComponent(isVoiceRoom ? RoomType.UnstableCall : undefined, joinRule),
-    size
-  );
+  return sizedIcon(getRoomStandaloneIconComponent(roomType, joinRule), size);
 };
 
 const getCreateRoomTypeToIcon = (type: CreateRoomType): ReactNode => {
   if (type === CreateRoomType.VoiceRoom) return sizedIcon(SpeakerHigh, '400');
+  if (type === CreateRoomType.ForumRoom) return sizedIcon(Chats, '400');
   return sizedIcon(Hash, '400');
 };
 
@@ -145,8 +147,9 @@ export function CreateRoomForm({
       roomKnock = knock;
     }
 
-    let roomType: RoomType | undefined;
+    let roomType: RoomType | CustomRoomType | undefined;
     if (type === CreateRoomType.VoiceRoom) roomType = RoomType.UnstableCall;
+    if (type === CreateRoomType.ForumRoom) roomType = CustomRoomType.Forum;
 
     debugLog.info('ui', 'Create room button clicked', {
       roomName,