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/RenderMessageContent.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 import { memo, useMemo, useCallback } from 'react';
 import type { IPreviewUrlResponse, MatrixClient, MatrixEvent, Room } from '$types/matrix-sdk';
-import { MsgType } from '$types/matrix-sdk';
+import { EventType, MsgType } from '$types/matrix-sdk';
 import { parseSettingsLink } from '$features/settings/settingsLink';
 import { useSettingsLinkBaseUrl } from '$features/settings/useSettingsLinkBaseUrl';
 import { testMatrixTo } from '$plugins/matrix-to';
@@ -23,6 +23,7 @@ import {
   MImage,
   MLocation,
   MNotice,
+  MStrickerWrappper,
   MText,
   MVideo,
   ReadPdfFile,
@@ -48,7 +49,7 @@ import { TextViewer } from './text-viewer';
 import { ClientSideHoverFreeze } from './ClientSideHoverFreeze';
 import { CuteEventType, MCuteEvent } from './message/MCuteEvent';
 import { PollEvent } from './message/PollEvent';
-import { M_TEXT } from 'matrix-js-sdk';
+import { M_POLL_START, M_TEXT } from 'matrix-js-sdk';
 import type { IImageInfo } from '$types/matrix/common';
 
 type RenderMessageContentProps = {
@@ -70,6 +71,7 @@ type RenderMessageContentProps = {
   mEvent?: MatrixEvent;
   mx?: MatrixClient;
   room?: Room;
+  autoplayStickers?: boolean;
 };
 
 const getMediaType = (url: string) => {
@@ -106,6 +108,7 @@ function RenderMessageContentInternal({
   mEvent,
   mx,
   room,
+  autoplayStickers,
 }: RenderMessageContentProps) {
   const content = useMemo(() => getContent() as Record<string, unknown>, [getContent]);
 
@@ -460,11 +463,21 @@ function RenderMessageContentInternal({
         }
       />
     );
-  if (content['org.matrix.msc3381.poll.start']) {
+  if (content[M_POLL_START.name]) {
     if (mEvent && mx && room)
       return <PollEvent content={content} mEvent={mEvent} mx={mx} room={room} />;
     else return <UnsupportedContent />;
   }
+  if (mEvent?.getType() === EventType.Sticker) {
+    return (
+      <MStrickerWrappper
+        mEvent={mEvent}
+        autoplayStickers={autoplayStickers}
+        mediaAutoLoad={mediaAutoLoad}
+      />
+    );
+  }
+
   return (
     <UnsupportedContent
       body={

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,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/MsgTypeRenderers.tsx

@@ -1,6 +1,7 @@
 import { type CSSProperties, type ReactNode, useMemo } from 'react';
 import { ArrowSquareOut, sizedIcon, Link } from '$components/icons/phosphor';
 import { Box, Chip, Text, toRem } from 'folds';
+import type { MatrixEvent } from '$types/matrix-sdk';
 import { type IContent, type IPreviewUrlResponse, type MatrixClient } from '$types/matrix-sdk';
 import { isJumboEmojiText } from '$utils/emojiDetection';
 import { trimReplyFromBody } from '$utils/room';
@@ -25,6 +26,7 @@ import type { PerMessageProfileBeeperFormat } from '$hooks/usePerMessageProfile'
 import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
 import { FileHeader, FileDownloadButton } from './FileHeader';
 import {
+  ImageContent,
   MessageBadEncryptedContent,
   MessageBrokenContent,
   MessageDeletedContent,
@@ -40,9 +42,12 @@ import { copyToClipboard } from '$utils/dom';
 import { MapContainer, Marker, TileLayer } from 'react-leaflet';
 import type { LatLngExpression } from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+import { Image } from '$components/media';
+import { ImageViewer } from '$components/image-viewer';
 
 import * as css from './MsgTypeRenderers.css';
 import { markerIcon } from '$features/room/location-modal/LocationDialog';
+import { ClientSideHoverFreeze } from '$components/ClientSideHoverFreeze';
 
 export interface BundleContent extends IPreviewUrlResponse {
   matched_url: string;
@@ -777,3 +782,37 @@ export function MSticker({ content, renderImageContent }: MStickerProps) {
     </AttachmentBox>
   );
 }
+type MStrickerWrappperProps = {
+  mEvent: MatrixEvent;
+  autoplayStickers?: boolean;
+  mediaAutoLoad?: boolean;
+};
+
+export function MStrickerWrappper({
+  mEvent,
+  autoplayStickers,
+  mediaAutoLoad,
+}: MStrickerWrappperProps) {
+  return (
+    <MSticker
+      content={mEvent.getContent() as unknown as IImageContent}
+      renderImageContent={(props) => (
+        <ImageContent
+          {...props}
+          autoPlay={mediaAutoLoad}
+          renderImage={(p) => {
+            if (!autoplayStickers && p.src) {
+              return (
+                <ClientSideHoverFreeze src={p.src}>
+                  <Image {...p} loading="lazy" />
+                </ClientSideHoverFreeze>
+              );
+            }
+            return <Image {...p} loading="lazy" />;
+          }}
+          renderViewer={(p) => <ImageViewer {...p} />}
+        />
+      )}
+    />
+  );
+}