Backgrounds: theme-aware patterns and visual preview grid

src/app/features/room/RoomView.tsx

@@ -16,7 +16,9 @@ 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 { settingsAtom } from '../../state/settings';
+import { useTheme, ThemeKind } from '../../hooks/useTheme';
+import { getChatBg } from '../lotus/chatBackground';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
 import { settingsAtom } from '../../state/settings';
@@ -57,80 +59,13 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
 };
 
 
-const CHAT_BG: Record<ChatBackground, React.CSSProperties> = {
-  none: {},
-
-  // Dark navy with light-blue grid lines — technical/clean
-  blueprint: {
-    backgroundColor: '#0a1628',
-    backgroundImage: [
-      'linear-gradient(rgba(100,149,237,0.14) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(100,149,237,0.14) 1px, transparent 1px)',
-      'linear-gradient(rgba(100,149,237,0.05) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(100,149,237,0.05) 1px, transparent 1px)',
-    ].join(','),
-    backgroundSize: '80px 80px, 80px 80px, 16px 16px, 16px 16px',
-  },
-
-  // Near-black diagonal weave — carbon fiber look
-  carbon: {
-    backgroundColor: '#0e0e0e',
-    backgroundImage: [
-      'repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 2px, transparent 0, transparent 50%)',
-      'repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 2px, transparent 0, transparent 50%)',
-    ].join(','),
-    backgroundSize: '8px 8px',
-  },
-
-  // Deep space with three offset star layers
-  stars: {
-    backgroundColor: '#050510',
-    backgroundImage: [
-      'radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1px)',
-      'radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px)',
-      'radial-gradient(circle, rgba(200,200,255,0.3) 1px, transparent 1px)',
-    ].join(','),
-    backgroundSize: '130px 130px, 190px 190px, 260px 260px',
-    backgroundPosition: '0 0, 65px 32px, 32px 97px',
-  },
-
-  // Concentric rings from three focal points — map contour effect
-  topographic: {
-    backgroundColor: '#0f0f17',
-    backgroundImage: [
-      'repeating-radial-gradient(circle at 20% 20%, transparent 0, transparent 30px, rgba(152,0,0,0.07) 31px, transparent 32px)',
-      'repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 25px, rgba(100,100,200,0.06) 26px, transparent 27px)',
-      'repeating-radial-gradient(circle at 50% 10%, transparent 0, transparent 45px, rgba(152,0,0,0.04) 46px, transparent 47px)',
-    ].join(','),
-  },
-
-  // 60°/120° diagonal stripe pair — classic herringbone weave
-  herringbone: {
-    backgroundColor: '#111118',
-    backgroundImage: [
-      'repeating-linear-gradient(60deg, rgba(180,160,210,0.07) 0, rgba(180,160,210,0.07) 1px, transparent 0, transparent 50%)',
-      'repeating-linear-gradient(120deg, rgba(180,160,210,0.07) 0, rgba(180,160,210,0.07) 1px, transparent 0, transparent 50%)',
-    ].join(','),
-    backgroundSize: '20px 36px',
-  },
-
-  // Fine white grid with larger subdivision — graph paper
-  crosshatch: {
-    backgroundColor: '#0f0f0f',
-    backgroundImage: [
-      'linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)',
-      'linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)',
-    ].join(','),
-    backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
-  },
-};
 
 export function RoomView({ eventId }: { eventId?: string }) {
   const roomInputRef = useRef<HTMLDivElement>(null);
   const roomViewRef = useRef<HTMLDivElement>(null);
   const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
+  const theme = useTheme();
+  const isDark = theme.kind === ThemeKind.Dark;
 
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
@@ -165,7 +100,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
   );
 
   return (
-    <Page ref={roomViewRef} style={CHAT_BG[chatBackground]}>
+    <Page ref={roomViewRef} style={getChatBg(chatBackground, isDark)}>
       <Box grow="Yes" direction="Column">
         <RoomTimeline
           key={roomId}