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

src/app/features/settings/general/General.tsx

@@ -307,6 +307,7 @@ function Appearance() {
   const [systemTheme, setSystemTheme] = useSetting(settingsAtom, 'useSystemTheme');
   const [monochromeMode, setMonochromeMode] = useSetting(settingsAtom, 'monochromeMode');
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
+  const [perMessageProfiles, setPerMessageProfiles] = useSetting(settingsAtom, 'perMessageProfiles');
 
   return (
     <Box direction="Column" gap="100">
@@ -350,6 +351,22 @@ function Appearance() {
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile title="Page Zoom" after={<PageZoomInput />} />
       </SequenceCard>
+
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Chat Background"
+          description="Pattern applied behind the message timeline."
+          after={<SelectChatBackground />}
+        />
+      </SequenceCard>
+
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Show Profile on Every Message"
+          description="Display avatar and name on each message instead of grouping consecutive messages."
+          after={<Switch variant="Primary" value={perMessageProfiles} onChange={setPerMessageProfiles} />}
+        />
+      </SequenceCard>
     </Box>
   );
 }
@@ -741,6 +758,84 @@ function Editor() {
   );
 }
 
+
+const BG_OPTIONS: { value: ChatBackground; label: string }[] = [
+  { value: 'none', label: 'None' },
+  { value: 'dots', label: 'Dots' },
+  { value: 'grid', label: 'Grid' },
+  { value: 'diagonal', label: 'Diagonal' },
+  { value: 'solid-navy', label: 'Navy' },
+  { value: 'solid-void', label: 'Void' },
+];
+
+function SelectChatBackground() {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+  const [chatBackground, setChatBackground] = useSetting(settingsAtom, 'chatBackground');
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (value: ChatBackground) => {
+    setChatBackground(value);
+    setMenuCords(undefined);
+  };
+
+  return (
+    <>
+      <Button
+        size="300"
+        variant="Secondary"
+        outlined
+        fill="Soft"
+        radii="300"
+        after={<Icon size="300" src={Icons.ChevronBottom} />}
+        onClick={handleMenu}
+      >
+        <Text size="T300">
+          {BG_OPTIONS.find((o) => o.value === chatBackground)?.label ?? 'None'}
+        </Text>
+      </Button>
+      <PopOut
+        anchor={menuCords}
+        offset={5}
+        position="Bottom"
+        align="End"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setMenuCords(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+              isKeyBackward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                {BG_OPTIONS.map((opt) => (
+                  <MenuItem
+                    key={opt.value}
+                    size="300"
+                    variant={chatBackground === opt.value ? 'Primary' : 'Surface'}
+                    radii="300"
+                    onClick={() => handleSelect(opt.value)}
+                  >
+                    <Text size="T300">{opt.label}</Text>
+                  </MenuItem>
+                ))}
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
+
 function SelectMessageLayout() {
   const [menuCords, setMenuCords] = useState<RectCords>();
   const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');