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

src/app/features/room/RoomViewHeader.tsx

@@ -48,6 +48,7 @@ import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { useMarkAsRead } from '../../hooks/useMarkAsRead';
 import { copyToClipboard } from '../../utils/dom';
+import { SpeechBubble } from '../../components/speech-bubble/SpeechBubble';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
 import { mDirectAtom } from '../../state/mDirectList';
@@ -316,35 +317,19 @@ function CallIndicator({ roomId }: CallIndicatorProps) {
               position="Bottom"
               offset={8}
               tooltip={
-                <Box
-                  direction="Column"
-                  gap="50"
-                  style={{
-                    padding: `${toRem(8)} ${toRem(12)}`,
-                    backgroundColor: color.SurfaceVariant.Container,
-                    color: color.SurfaceVariant.OnContainer,
-                    borderRadius: toRem(8),
-                    boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
-                    position: 'relative',
-                  }}
-                >
-                  {/* Speech bubble arrow */}
-                  <div
-                    style={{
-                      position: 'absolute',
-                      top: toRem(-6),
-                      left: '50%',
-                      transform: 'translateX(-50%)',
-                      width: 0,
-                      height: 0,
-                      borderLeft: `${toRem(6)} solid transparent`,
-                      borderRight: `${toRem(6)} solid transparent`,
-                      borderBottom: `${toRem(6)} solid ${color.SurfaceVariant.Container}`,
-                    }}
-                  />
-                  <Text size="T300" style={{ fontWeight: 600, color: color.SurfaceVariant.OnContainer }}>{displayName}</Text>
-                  <Text size="T200" style={{ opacity: 0.7, color: color.SurfaceVariant.OnContainer }}>{member.userId}</Text>
-                </Box>
+                <SpeechBubble tail="top" tailX="50%">
+                  <Box direction="Column" gap="50">
+                    <Text
+                      size="T300"
+                      style={{ fontWeight: 600, color: color.SurfaceVariant.OnContainer }}
+                    >
+                      {displayName}
+                    </Text>
+                    <Text size="T200" style={{ opacity: 0.7, color: color.SurfaceVariant.OnContainer }}>
+                      {member.userId}
+                    </Text>
+                  </Box>
+                </SpeechBubble>
               }
             >
               {(triggerRef) => (
@@ -490,7 +475,11 @@ function RoomCallButtons({ roomId }: RoomCallButtonsProps) {
   );
 }
 
-export function RoomViewHeader() {
+type RoomViewHeaderProps = {
+  forumLayout?: boolean;
+};
+
+export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
   const navigate = useNavigate();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -564,9 +553,16 @@ export function RoomViewHeader() {
             </Avatar>
           )}
           <Box direction="Column">
-            <Text size={topic ? 'H5' : 'H3'} truncate>
-              {name}
-            </Text>
+            <Box alignItems="Center" gap="100">
+              <Text size={topic ? 'H5' : 'H3'} truncate>
+                {name}
+              </Text>
+              {forumLayout && (
+                <Badge variant="Secondary" fill="Soft" outlined>
+                  <Text size="T200">Forum</Text>
+                </Badge>
+              )}
+            </Box>
             {topic && (
               <UseStateProvider initial={false}>
                 {(viewTopic, setViewTopic) => (