Redesign chat backgrounds: blueprint, carbon, stars, topographic, herringbone, crosshatch

src/app/features/room/RoomView.tsx

@@ -59,22 +59,72 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
 
 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',
+
+  // 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',
   },
-  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',
+
+  // 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',
   },
-  diagonal: {
-    backgroundImage:
-      'repeating-linear-gradient(45deg, rgba(152,0,0,0.07) 0px, rgba(152,0,0,0.07) 1px, transparent 1px, transparent 16px)',
+
+  // 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',
   },
-  'solid-navy': { backgroundColor: '#0a0e1a' },
-  'solid-void': { backgroundColor: '#070709' },
 };
 
 export function RoomView({ eventId }: { eventId?: string }) {

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

@@ -761,11 +761,12 @@ 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' },
+  { value: 'blueprint', label: 'Blueprint' },
+  { value: 'carbon', label: 'Carbon' },
+  { value: 'stars', label: 'Stars' },
+  { value: 'topographic', label: 'Topographic' },
+  { value: 'herringbone', label: 'Herringbone' },
+  { value: 'crosshatch', label: 'Crosshatch' },
 ];
 
 function SelectChatBackground() {

src/app/state/settings.ts

@@ -3,7 +3,7 @@ import { atom } from 'jotai';
 const STORAGE_KEY = 'settings';
 export type DateFormat = 'D MMM YYYY' | 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD' | '';
 export type MessageSpacing = '0' | '100' | '200' | '300' | '400' | '500';
-export type ChatBackground = 'none' | 'dots' | 'grid' | 'diagonal' | 'solid-navy' | 'solid-void';
+export type ChatBackground = 'none' | 'blueprint' | 'carbon' | 'stars' | 'topographic' | 'herringbone' | 'crosshatch';
 export enum MessageLayout {
   Modern = 0,
   Compact = 1,