Phase 2+3: Chat backgrounds and per-message profiles settings

src/app/features/room/RoomTimeline.tsx

@@ -436,6 +436,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const useAuthentication = useMediaAuthentication();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
+  const [perMessageProfiles] = useSetting(settingsAtom, 'perMessageProfiles');
   const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
   const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
   const direct = useIsDirectRoom();
@@ -1649,6 +1650,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     }
 
     const collapsed =
+      !perMessageProfiles &&
       isPrevRendered &&
       !dayDivider &&
       (!newDivider || eventSender === mx.getUserId()) &&

src/app/features/room/RoomView.tsx

@@ -15,6 +15,8 @@ import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
 import { Page } from '../../components/page';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom, ChatBackground } from '../../state/settings';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
 import { settingsAtom } from '../../state/settings';
@@ -54,9 +56,31 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   return true;
 };
 
+
+const CHAT_BG: Record<ChatBackground, React.CSSProperties> = {
+  none: {},
+  dots: {
+    backgroundImage: 'radial-gradient(circle, rgba(152,0,0,0.18) 1px, transparent 1px)',
+    backgroundSize: '22px 22px',
+  },
+  grid: {
+    backgroundImage:
+      'linear-gradient(rgba(152,0,0,0.09) 1px, transparent 1px),' +
+      'linear-gradient(90deg, rgba(152,0,0,0.09) 1px, transparent 1px)',
+    backgroundSize: '28px 28px',
+  },
+  diagonal: {
+    backgroundImage:
+      'repeating-linear-gradient(45deg, rgba(152,0,0,0.07) 0px, rgba(152,0,0,0.07) 1px, transparent 1px, transparent 16px)',
+  },
+  'solid-navy': { backgroundColor: '#0a0e1a' },
+  'solid-void': { backgroundColor: '#070709' },
+};
+
 export function RoomView({ eventId }: { eventId?: string }) {
   const roomInputRef = useRef<HTMLDivElement>(null);
   const roomViewRef = useRef<HTMLDivElement>(null);
+  const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
 
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
@@ -91,7 +115,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
   );
 
   return (
-    <Page ref={roomViewRef}>
+    <Page ref={roomViewRef} style={CHAT_BG[chatBackground]}>
       <Box grow="Yes" direction="Column">
         <RoomTimeline
           key={roomId}