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 `m.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';
 
 export const createRoomCreationContent = (
-  type: RoomType | undefined,
+  type: RoomType | CustomRoomType | undefined,
   allowFederation: boolean,
   additionalCreators: string[] | undefined
 ): object => {
@@ -101,7 +102,7 @@ export const createVoiceRoomPowerLevelsOverride = () => ({
 
 export type CreateRoomData = {
   version: string;
-  type?: RoomType;
+  type?: RoomType | CustomRoomType;
   parent?: Room;
   access: CreateRoomAccess;
   name: string;

src/app/components/icons/roomIcons.tsx

@@ -1,14 +1,16 @@
 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>;
 
 export type RoomIconOverlay = 'globe' | 'lock';
 
 const isRegularRoom = (roomType?: string): boolean =>
-  roomType !== RoomType.Space && roomType !== RoomType.UnstableCall;
+  roomType !== RoomType.Space &&
+  roomType !== RoomType.UnstableCall;
 
 export function getRoomIconOverlay(
   roomType?: string,
@@ -59,6 +61,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 +108,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/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,
@@ -49,20 +51,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');
 };
 
@@ -144,8 +146,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,