[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_311":312,"_313":314},"routes/_app.x.$handle.$name",{"_96":95,"_32":44,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",134,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","2450a964-3c31-11f0-a89b-9e149126039e","name","fileType","content","# Matrix Client\n\nA beautiful web-based Matrix client built with React and TailwindCSS featuring customizable themes and accent colors.\n\n## Features\n\n- Connect to any Matrix homeserver\n- Login with username/password\n- View and join rooms\n- Send and receive messages\n- Real-time message updates\n- **Customizable themes with multiple color schemes**\n- **App settings page for theme customization**\n- **Responsive design with improved UI**\n- **Enhanced message display with better grouping**\n- **Smooth animations and transitions**\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Proxy server for Matrix API (CORS handling)\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── Login.tsx # Login form\n│ │ ├── RoomList.tsx # List of joined rooms\n│ │ ├── ChatView.tsx # Chat interface\n│ │ ├── MessageList.tsx # Message display\n│ │ ├── MessageInput.tsx # Message composition\n│ │ └── Settings.tsx # App settings and theme selection\n│ ├── index.html # Main HTML template\n│ └── index.tsx # Frontend entry point\n├── shared/\n│ ├── types.ts # Shared TypeScript types\n│ └── themes.ts # Theme definitions and utilities\n└── README.md\n```\n\n## Usage\n\n1. Open the application\n2. Enter your Matrix homeserver URL (e.g., https://matrix.org)\n3. Login with your Matrix credentials\n4. Browse rooms and start chatting!\n\n## Features Implemented\n\n- ✅ **Advanced Theme System**: Multiple color themes with CSS custom properties\n- ✅ **App Settings Page**: Dedicated settings interface for theme customization\n- ✅ **Theme Persistence**: Remembers selected theme across sessions\n- ✅ **Live Theme Preview**: See how themes look before applying them\n- ✅ **Smooth Theme Transitions**: Beautiful animated color changes\n- ✅ **No Flash Loading**: Theme applied before page render to prevent white flash\n- ✅ **System Integration**: Automatically follows system dark/light mode preference as default\n- ✅ **Responsive Design**: Works perfectly on desktop and mobile\n- ✅ **Enhanced Login**: Gradient background with improved form styling\n- ✅ **Tabbed Interface**: Separate tabs for public rooms and direct messages\n- ✅ **Private Messages**: Full support for direct message conversations\n- ✅ **Smart Room Detection**: Automatically categorizes rooms vs DMs\n- ✅ **Advanced Chat View**: Enhanced message bubbles with better grouping\n- ✅ **Smart Message Display**: Date separators and time grouping\n- ✅ **Fixed Input Box**: No more scrolling issues, proper auto-resize\n- ✅ **Duplicate Prevention**: Smart filtering to prevent message repetition\n- ✅ **Real-time Sync**: Live message updates with optimized polling\n- ✅ **Session Persistence**: Automatic login restoration\n- ✅ **Error Handling**: Comprehensive error states with retry options\n- ✅ **Optimistic Sending**: Messages appear instantly with proper fallback\n- ✅ **Smooth Animations**: CSS transitions and message animations\n- ✅ **Custom Scrollbars**: Styled for all themes\n\n## Technical Details\n\n- **Backend**: Hono-based proxy server to handle CORS issues with Matrix homeservers\n- **Frontend**: React SPA with TailwindCSS for styling\n- **Real-time**: Polling-based sync for new messages\n- **Storage**: LocalStorage for session persistence\n- **API**: Matrix Client-Server API v1.0\n\n## Development\n\nThe backend serves as a proxy to handle CORS issues with Matrix homeservers.\nAll Matrix API calls are proxied through `/api/matrix/*` endpoints.","# Matrix Client\n\nA beautiful web-based Matrix client built with React and TailwindCSS featuring customizable themes, responsive design, and mobile support.\n\n## Features\n\n- Connect to any Matrix homeserver\n- Login with username/password\n- View and join rooms\n- Send and receive messages\n- Real-time message updates\n- **Customizable themes with multiple color schemes**\n- **App settings page for theme customization**\n- **Fully responsive design optimized for mobile and desktop**\n- **Mobile-first UI with touch-friendly interactions**\n- **Enhanced message display with better grouping**\n- **Smooth animations and transitions**\n\n## Mobile Features\n\n- **Responsive Layout**: Adapts seamlessly to all screen sizes\n- **Mobile Sidebar**: Collapsible sidebar with overlay on mobile\n- **Touch Optimized**: Proper touch targets and gestures\n- **Safe Area Support**: Works with device notches and rounded corners\n- **Mobile Header**: Dedicated mobile navigation with room info\n- **Optimized Input**: Mobile-friendly message composition\n- **Swipe Navigation**: Easy room switching on mobile devices\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Proxy server for Matrix API (CORS handling)\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component (responsive)\n│ │ ├── Login.tsx # Login form (mobile-optimized)\n│ │ ├── RoomList.tsx # List of joined rooms (responsive)\n│ │ ├── ChatView.tsx # Chat interface (mobile-friendly)\n│ │ ├── MessageList.tsx # Message display\n│ │ ├── MessageInput.tsx # Message composition (touch-optimized)\n│ │ └── Settings.tsx # App settings and theme selection\n│ ├── index.html # Main HTML template (mobile meta tags)\n│ └── index.tsx # Frontend entry point\n├── shared/\n│ ├── types.ts # Shared TypeScript types\n│ └── themes.ts # Theme definitions and utilities\n└── README.md\n```\n\n## Usage\n\n1. Open the application on any device\n2. Enter your Matrix homeserver URL (e.g., https://matrix.org)\n3. Login with your Matrix credentials\n4. Browse rooms and start chatting!\n\n### Mobile Usage\n\n- **Tap the hamburger menu** to open/close the sidebar\n- **Tap a room** to open it and automatically close the sidebar\n- **Use the mobile header** to navigate back to room list\n- **Tap and hold** for additional options (future feature)\n\n## Features Implemented\n\n- ✅ **Advanced Theme System**: Multiple color themes with CSS custom properties\n- ✅ **App Settings Page**: Dedicated settings interface for theme customization\n- ✅ **Theme Persistence**: Remembers selected theme across sessions\n- ✅ **Live Theme Preview**: See how themes look before applying them\n- ✅ **Smooth Theme Transitions**: Beautiful animated color changes\n- ✅ **No Flash Loading**: Theme applied before page render to prevent white flash\n- ✅ **System Integration**: Automatically follows system dark/light mode preference as default\n- ✅ **Fully Responsive Design**: Works perfectly on desktop, tablet, and mobile\n- ✅ **Mobile-First UI**: Touch-optimized interface with proper spacing\n- ✅ **Collapsible Sidebar**: Mobile-friendly navigation with overlay\n- ✅ **Safe Area Support**: Handles device notches and rounded corners\n- ✅ **Touch Targets**: Minimum 44px touch targets for accessibility\n- ✅ **Mobile Headers**: Dedicated mobile navigation bars\n- ✅ **Enhanced Login**: Gradient background with responsive form styling\n- ✅ **Tabbed Interface**: Separate tabs for public rooms and direct messages\n- ✅ **Private Messages**: Full support for direct message conversations\n- ✅ **Smart Room Detection**: Automatically categorizes rooms vs DMs\n- ✅ **Advanced Chat View**: Enhanced message bubbles with better grouping\n- ✅ **Smart Message Display**: Date separators and time grouping\n- ✅ **Responsive Input**: Auto-resizing message input with mobile optimization\n- ✅ **Duplicate Prevention**: Smart filtering to prevent message repetition\n- ✅ **Real-time Sync**: Live message updates with optimized polling\n- ✅ **Session Persistence**: Automatic login restoration\n- ✅ **Error Handling**: Comprehensive error states with retry options\n- ✅ **Optimistic Sending**: Messages appear instantly with proper fallback\n- ✅ **Smooth Animations**: CSS transitions and message animations\n- ✅ **Custom Scrollbars**: Styled for all themes and devices\n\n## Responsive Breakpoints\n\n- **Mobile**: < 768px (single column, collapsible sidebar)\n- **Tablet**: 768px - 1024px (responsive layout)\n- **Desktop**: > 1024px (full sidebar always visible)\n\n## Technical Details\n\n- **Backend**: Hono-based proxy server to handle CORS issues with Matrix homeservers\n- **Frontend**: React SPA with TailwindCSS for responsive styling\n- **Real-time**: Polling-based sync for new messages\n- **Storage**: LocalStorage for session persistence\n- **API**: Matrix Client-Server API v1.0\n- **Mobile**: Viewport meta tags, safe area support, touch optimization\n\n## Development\n\nThe backend serves as a proxy to handle CORS issues with Matrix homeservers.\nAll Matrix API calls are proxied through `/api/matrix/*` endpoints.\n\n### Mobile Testing\n\nTest the responsive design using:\n- Browser developer tools device simulation\n- Real mobile devices\n- Different screen orientations\n- Various viewport sizes","createdAt",["D",1748637247211],"branchVersion","branchId","17fae508-3c31-11f0-8df2-9e149126039e","id","17faaeb2-3c31-11f0-8df2-9e149126039e","matrix",["D",1748484200184],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","simple matrix client","imageUrl","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","340eba9e-3c31-11f0-883d-9e149126039e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"isOwned",147,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","loading","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":307,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":308,"_80":309,"_82":310,"_84":25},"tree",[167,169,180,183],"files",[167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183],"counts",{"_156":62,"_157":158,"_159":62,"_160":161,"_162":163},"contents",[126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":150,"_32":151,"_30":152,"_131":-5,"_40":41,"_39":153,"_132":58,"_37":154,"_13":62,"_33":142,"_34":-5,"_24":25,"_135":-5,"_27":155},{"_42":144,"_32":145,"_30":146,"_131":-5,"_40":41,"_39":147,"_132":58,"_37":148,"_13":62,"_33":142,"_34":-5,"_24":25,"_135":-5,"_27":149},{"_42":137,"_32":138,"_30":139,"_131":-5,"_40":41,"_39":140,"_132":58,"_37":141,"_13":62,"_33":142,"_34":-5,"_24":25,"_135":-5,"_27":143},{"_42":130,"_32":28,"_30":31,"_131":-5,"_40":41,"_39":14,"_132":25,"_37":133,"_13":134,"_33":20,"_34":36,"_24":25,"_135":-5,"_27":136},"6f1f8e82-3d95-11f0-a16b-76b3cceeab13","parentId","latest",["D",1748637247211],16,"label",[28],"2ad6446a-3c31-11f0-ab74-9e149126039e","shared","5d578e7c-5ed0-428e-a8e4-93e4b8ae6c74",2,["D",1748484231814],"directory",[138],"38eca1fc-3c31-11f0-861b-9e149126039e","frontend","61ed27d5-bb56-4515-8699-6e4311eb10d5",4,["D",1748484255451],[145],"340ec444-3c31-11f0-883d-9e149126039e","backend","f0c23a58-f8e8-4cde-afe9-1c855e951c49",3,["D",1748484247288],[151],"pulls","branches",1,"forks","envVars",{"_164":62,"_166":62},"connections",{"_164":62,"_165":62},"count","unfilledCount","emptyCount",{"_42":150,"_32":151,"_30":152,"_131":-5,"_40":41,"_39":153,"_132":58,"_37":304,"_13":62,"_33":142,"_34":-5,"_24":25,"_135":-5,"_185":305,"_27":306},{"_42":296,"_32":297,"_30":56,"_131":152,"_40":41,"_39":298,"_132":58,"_37":299,"_13":147,"_33":300,"_34":301,"_24":25,"_135":44,"_185":302,"_27":303},{"_42":144,"_32":145,"_30":146,"_131":-5,"_40":41,"_39":147,"_132":58,"_37":293,"_13":62,"_33":142,"_34":-5,"_24":25,"_135":-5,"_185":294,"_27":295},{"_42":288,"_32":234,"_30":228,"_131":146,"_40":41,"_39":289,"_132":58,"_37":290,"_13":62,"_33":142,"_34":-5,"_24":25,"_135":-5,"_185":291,"_27":292},{"_42":279,"_32":280,"_30":281,"_131":228,"_40":41,"_39":282,"_132":25,"_37":283,"_13":284,"_33":193,"_34":285,"_24":25,"_135":-5,"_185":286,"_27":287},{"_42":270,"_32":271,"_30":272,"_131":228,"_40":41,"_39":273,"_132":58,"_37":274,"_13":275,"_33":193,"_34":276,"_24":25,"_135":-5,"_185":277,"_27":278},{"_42":261,"_32":262,"_30":263,"_131":228,"_40":41,"_39":264,"_132":25,"_37":265,"_13":266,"_33":193,"_34":267,"_24":25,"_135":-5,"_185":268,"_27":269},{"_42":252,"_32":253,"_30":254,"_131":228,"_40":41,"_39":255,"_132":58,"_37":256,"_13":257,"_33":193,"_34":258,"_24":25,"_135":-5,"_185":259,"_27":260},{"_42":244,"_32":245,"_30":246,"_131":228,"_40":41,"_39":247,"_132":58,"_37":248,"_13":147,"_33":193,"_34":249,"_24":25,"_135":-5,"_185":250,"_27":251},{"_42":235,"_32":236,"_30":237,"_131":228,"_40":41,"_39":238,"_132":58,"_37":239,"_13":240,"_33":193,"_34":241,"_24":25,"_135":-5,"_185":242,"_27":243},{"_42":225,"_32":226,"_30":227,"_131":228,"_40":41,"_39":229,"_132":58,"_37":230,"_13":158,"_33":193,"_34":231,"_24":25,"_135":-5,"_185":232,"_27":233},{"_42":216,"_32":217,"_30":218,"_131":146,"_40":41,"_39":219,"_132":25,"_37":220,"_13":221,"_33":20,"_34":222,"_24":25,"_135":-5,"_185":223,"_27":224},{"_42":208,"_32":209,"_30":210,"_131":146,"_40":41,"_39":211,"_132":58,"_37":212,"_13":62,"_33":193,"_34":213,"_24":25,"_135":-5,"_185":214,"_27":215},{"_42":137,"_32":138,"_30":139,"_131":-5,"_40":41,"_39":140,"_132":58,"_37":205,"_13":62,"_33":142,"_34":-5,"_24":25,"_135":-5,"_185":206,"_27":207},{"_42":197,"_32":198,"_30":199,"_131":139,"_40":41,"_39":200,"_132":58,"_37":201,"_13":62,"_33":193,"_34":202,"_24":25,"_135":-5,"_185":203,"_27":204},{"_42":188,"_32":189,"_30":190,"_131":139,"_40":41,"_39":191,"_132":58,"_37":192,"_13":153,"_33":193,"_34":194,"_24":25,"_135":-5,"_185":195,"_27":196},{"_42":130,"_32":28,"_30":31,"_131":-5,"_40":41,"_39":14,"_132":25,"_37":184,"_13":134,"_33":20,"_34":36,"_24":25,"_135":-5,"_185":186,"_27":187},["D",1748637247211],"children",[],[28],"71670d90-3c38-11f0-9012-9e149126039e","types.ts","2ad62782-3c31-11f0-ab74-9e149126039e",72,["D",1748487356684],"script","// Shared types for Matrix client\n\nexport interface MatrixLoginRequest {\n type: string;\n user: string;\n password: string;\n}\n\nexport interface MatrixLoginResponse {\n access_token: string;\n user_id: string;\n home_server: string;\n device_id: string;\n}\n\nexport interface MatrixRoom {\n room_id: string;\n name?: string;\n canonical_alias?: string;\n topic?: string;\n avatar_url?: string;\n num_joined_members?: number;\n world_readable?: boolean;\n guest_can_join?: boolean;\n join_rule?: string;\n isDirect?: boolean;\n}\n\nexport interface MatrixEvent {\n event_id: string;\n type: string;\n room_id: string;\n sender: string;\n content: any;\n origin_server_ts: number;\n unsigned?: any;\n}\n\nexport interface MatrixMessage extends MatrixEvent {\n content: {\n msgtype: string;\n body: string;\n format?: string;\n formatted_body?: string;\n };\n}\n\nexport interface MatrixSyncResponse {\n next_batch: string;\n rooms?: {\n join?: { [roomId: string]: any };\n invite?: { [roomId: string]: any };\n leave?: { [roomId: string]: any };\n };\n}\n\nexport interface UserSession {\n accessToken: string;\n userId: string;\n homeserver: string;\n deviceId: string;\n}",[],[138,189],"567c4530-3c39-11f0-818b-9e149126039e","themes.ts","567c46a2-3c39-11f0-818b-9e149126039e",84,["D",1748487741022],"// Theme management system for Matrix client\n\nexport interface Theme {\n id: string;\n name: string;\n description: string;\n colors: {\n primary: string;\n primaryHover: string;\n primaryLight: string;\n primaryDark: string;\n background: string;\n surface: string;\n surfaceHover: string;\n border: string;\n text: string;\n textSecondary: string;\n textMuted: string;\n accent: string;\n accentHover: string;\n success: string;\n warning: string;\n error: string;\n };\n isDark: boolean;\n}\n\nexport const themes: Theme[] = [\n {\n id: 'light',\n name: 'Light',\n description: 'Clean and bright',\n colors: {\n primary: '#3b82f6',\n primaryHover: '#2563eb',\n primaryLight: '#dbeafe',\n primaryDark: '#1d4ed8',\n background: '#ffffff',\n surface: '#f8fafc',\n surfaceHover: '#f1f5f9',\n border: '#e2e8f0',\n text: '#1e293b',\n textSecondary: '#475569',\n textMuted: '#64748b',\n accent: '#3b82f6',\n accentHover: '#2563eb',\n success: '#10b981',\n warning: '#f59e0b',\n error: '#ef4444',\n },\n isDark: false,\n },\n {\n id: 'dark',\n name: 'Dark',\n description: 'Easy on the eyes',\n colors: {\n primary: '#60a5fa',\n primaryHover: '#3b82f6',\n primaryLight: '#1e3a8a',\n primaryDark: '#1e40af',\n background: '#0f172a',\n surface: '#1e293b',\n surfaceHover: '#334155',\n border: '#475569',\n text: '#f8fafc',\n textSecondary: '#cbd5e1',\n textMuted: '#94a3b8',\n accent: '#60a5fa',\n accentHover: '#3b82f6',\n success: '#34d399',\n warning: '#fbbf24',\n error: '#f87171',\n },\n isDark: true,\n },\n {\n id: 'purple',\n name: 'Purple Dream',\n description: 'Royal and elegant',\n colors: {\n primary: '#8b5cf6',\n primaryHover: '#7c3aed',\n primaryLight: '#ede9fe',\n primaryDark: '#6d28d9',\n background: '#fefbff',\n surface: '#f8f4ff',\n surfaceHover: '#f3f0ff',\n border: '#e9d5ff',\n text: '#2d1b69',\n textSecondary: '#5b21b6',\n textMuted: '#7c3aed',\n accent: '#8b5cf6',\n accentHover: '#7c3aed',\n success: '#10b981',\n warning: '#f59e0b',\n error: '#ef4444',\n },\n isDark: false,\n },\n {\n id: 'purple-dark',\n name: 'Purple Night',\n description: 'Dark purple elegance',\n colors: {\n primary: '#a78bfa',\n primaryHover: '#8b5cf6',\n primaryLight: '#2d1b69',\n primaryDark: '#5b21b6',\n background: '#1a0b2e',\n surface: '#2d1b69',\n surfaceHover: '#3730a3',\n border: '#5b21b6',\n text: '#f3f0ff',\n textSecondary: '#c4b5fd',\n textMuted: '#a78bfa',\n accent: '#a78bfa',\n accentHover: '#8b5cf6',\n success: '#34d399',\n warning: '#fbbf24',\n error: '#f87171',\n },\n isDark: true,\n },\n {\n id: 'green',\n name: 'Forest',\n description: 'Natural and calming',\n colors: {\n primary: '#10b981',\n primaryHover: '#059669',\n primaryLight: '#d1fae5',\n primaryDark: '#047857',\n background: '#f0fdf4',\n surface: '#ecfdf5',\n surfaceHover: '#d1fae5',\n border: '#a7f3d0',\n text: '#064e3b',\n textSecondary: '#065f46',\n textMuted: '#059669',\n accent: '#10b981',\n accentHover: '#059669',\n success: '#10b981',\n warning: '#f59e0b',\n error: '#ef4444',\n },\n isDark: false,\n },\n {\n id: 'green-dark',\n name: 'Forest Night',\n description: 'Dark forest theme',\n colors: {\n primary: '#34d399',\n primaryHover: '#10b981',\n primaryLight: '#064e3b',\n primaryDark: '#047857',\n background: '#0c1f17',\n surface: '#064e3b',\n surfaceHover: '#065f46',\n border: '#047857',\n text: '#ecfdf5',\n textSecondary: '#a7f3d0',\n textMuted: '#6ee7b7',\n accent: '#34d399',\n accentHover: '#10b981',\n success: '#34d399',\n warning: '#fbbf24',\n error: '#f87171',\n },\n isDark: true,\n },\n {\n id: 'orange',\n name: 'Sunset',\n description: 'Warm and energetic',\n colors: {\n primary: '#f97316',\n primaryHover: '#ea580c',\n primaryLight: '#fed7aa',\n primaryDark: '#c2410c',\n background: '#fffbeb',\n surface: '#fef3c7',\n surfaceHover: '#fed7aa',\n border: '#fbbf24',\n text: '#92400e',\n textSecondary: '#b45309',\n textMuted: '#d97706',\n accent: '#f97316',\n accentHover: '#ea580c',\n success: '#10b981',\n warning: '#f59e0b',\n error: '#ef4444',\n },\n isDark: false,\n },\n {\n id: 'rose',\n name: 'Rose Garden',\n description: 'Soft and romantic',\n colors: {\n primary: '#f43f5e',\n primaryHover: '#e11d48',\n primaryLight: '#fce7f3',\n primaryDark: '#be123c',\n background: '#fdf2f8',\n surface: '#fce7f3',\n surfaceHover: '#fbcfe8',\n border: '#f9a8d4',\n text: '#881337',\n textSecondary: '#9f1239',\n textMuted: '#be185d',\n accent: '#f43f5e',\n accentHover: '#e11d48',\n success: '#10b981',\n warning: '#f59e0b',\n error: '#ef4444',\n },\n isDark: false,\n },\n {\n id: 'cyberpunk',\n name: 'Cyberpunk',\n description: 'Neon and futuristic',\n colors: {\n primary: '#00ffff',\n primaryHover: '#00e6e6',\n primaryLight: '#0a0a0a',\n primaryDark: '#00cccc',\n background: '#0a0a0a',\n surface: '#1a1a1a',\n surfaceHover: '#2a2a2a',\n border: '#333333',\n text: '#00ffff',\n textSecondary: '#00cccc',\n textMuted: '#666666',\n accent: '#ff00ff',\n accentHover: '#e600e6',\n success: '#00ff00',\n warning: '#ffff00',\n error: '#ff0040',\n },\n isDark: true,\n },\n];\n\nexport const getThemeById = (id: string): Theme => {\n return themes.find(theme => theme.id === id) || themes[0];\n};\n\nexport const applyTheme = (theme: Theme): void => {\n const root = document.documentElement;\n \n // Apply CSS custom properties\n Object.entries(theme.colors).forEach(([key, value]) => {\n root.style.setProperty(`--color-${key}`, value);\n });\n \n // Apply dark/light class\n if (theme.isDark) {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n \n // Store theme preference\n localStorage.setItem('matrix_theme', theme.id);\n};\n\nexport const getInitialTheme = (): Theme => {\n const savedThemeId = localStorage.getItem('matrix_theme');\n if (savedThemeId) {\n return getThemeById(savedThemeId);\n }\n \n // Check system preference for initial theme\n if (typeof window !== 'undefined' && window.matchMedia) {\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n return prefersDark ? getThemeById('dark') : getThemeById('light');\n }\n \n return getThemeById('light');\n};",[],[138,198],["D",1748484231814],[181,182],[138],"3b894834-3c31-11f0-8235-9e149126039e","index.tsx","3b8948fc-3c31-11f0-8235-9e149126039e",5,["D",1748484259836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[145,209],"584b9ca0-3d95-11f0-8d46-76b3cceeab13","index.html","38ec7da8-3c31-11f0-861b-9e149126039e",133,["D",1748637208916],8,"\n\n\n \n \n \n \n \n Matrix Client\n \n \n \n \n\n\n \n

Loading Matrix Client...

\n \n

\n \n \n \n\n",[],[145,217],"94f9ec62-3c3a-11f0-b3e6-9e149126039e","Settings.tsx","bbfebf6e-3c39-11f0-88d4-9e149126039e","dfdc8674-7222-4186-bca7-b68b66f56bb4",101,["D",1748488275360],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { themes, getThemeById, applyTheme, type Theme } from \"../../shared/themes.ts\";\n\ninterface SettingsProps {\n onClose: () => void;\n}\n\nexport default function Settings({ onClose }: SettingsProps) {\n const [selectedTheme, setSelectedTheme] = useState(() => {\n const savedThemeId = localStorage.getItem('matrix_theme');\n return savedThemeId ? getThemeById(savedThemeId) : themes[0];\n });\n\n const handleThemeChange = (theme: Theme) => {\n setSelectedTheme(theme);\n applyTheme(theme);\n };\n\n const handleClose = (e: React.MouseEvent) => {\n if (e.target === e.currentTarget) {\n onClose();\n }\n };\n\n return (\n

\n {/* Header */}\n

App Settings

\n \n \n \n

\n\n {/* Content */}\n

\n {/* Theme Selection */}\n

\n Choose Your Theme\n

\n Select a color theme that matches your style and preference.\n

\n \n

\n {themes.map((theme) => (\n handleThemeChange(theme)}\n style={{\n borderColor: selectedTheme.id === theme.id ? 'var(--color-primary)' : 'var(--color-border)'\n }}\n >\n {/* Theme Preview */}\n

\n\n {/* Theme Info */}\n

\n {theme.name}\n

\n {theme.description}\n

\n \n {theme.isDark ? '🌙 Dark' : '☀️ Light'}\n \n

\n\n {/* Selected Indicator */}\n {selectedTheme.id === theme.id && (\n

\n \n

\n )}\n

\n ))}\n

\n\n {/* Current Theme Preview */}\n

\n Current Theme Preview\n

\n Sample Chat Interface\n

\n Online\n

\n \n

\n \n You\n \n

\n This is how your messages will look with the selected theme.\n

\n\n

\n \n Friend\n \n

\n And this is how other people's messages will appear.\n

\n\n {/* Footer */}\n

\n \n Close\n \n

\n );\n}",[],[145,234,226],"components","0e29c368-3d95-11f0-8f28-76b3cceeab13","RoomList.tsx","2b14c356-3c32-11f0-bdf0-9e149126039e",128,["D",1748637084542],21,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { UserSession, MatrixRoom } from \"../../shared/types.ts\";\n\ninterface RoomListProps {\n session: UserSession;\n selectedRoom: MatrixRoom | null;\n onRoomSelect: (room: MatrixRoom) => void;\n}\n\nexport default function RoomList({ session, selectedRoom, onRoomSelect }: RoomListProps) {\n const [rooms, setRooms] = useState([]);\n const [directMessages, setDirectMessages] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n const [activeTab, setActiveTab] = useState<'rooms' | 'dms'>('rooms');\n\n useEffect(() => {\n fetchRooms();\n }, [session]);\n\n const fetchRooms = async () => {\n try {\n setLoading(true);\n setError(\"\");\n\n // Get joined rooms\n const response = await fetch(\"/api/matrix/_matrix/client/r0/joined_rooms\", {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch rooms: ${response.status}`);\n }\n\n const data = await response.json();\n const roomIds = data.joined_rooms || [];\n\n // Fetch room details for each room\n const roomDetails = await Promise.all(\n roomIds.map(async (roomId: string) => {\n try {\n const stateResponse = await fetch(`/api/matrix/_matrix/client/r0/rooms/${encodeURIComponent(roomId)}/state`, {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (!stateResponse.ok) {\n console.warn(`Failed to fetch state for room ${roomId}`);\n return {\n room_id: roomId,\n name: roomId,\n isDirect: false,\n };\n }\n\n const stateEvents = await stateResponse.json();\n \n // Extract room information from state events\n const nameEvent = stateEvents.find((event: any) => event.type === \"m.room.name\");\n const canonicalAliasEvent = stateEvents.find((event: any) => event.type === \"m.room.canonical_alias\");\n const topicEvent = stateEvents.find((event: any) => event.type === \"m.room.topic\");\n const avatarEvent = stateEvents.find((event: any) => event.type === \"m.room.avatar\");\n const createEvent = stateEvents.find((event: any) => event.type === \"m.room.create\");\n const memberEvents = stateEvents.filter((event: any) => event.type === \"m.room.member\");\n \n // Determine if this is a direct message room\n const isDirect = createEvent?.content?.is_direct === true || \n (memberEvents.length === 2 && !nameEvent?.content?.name && !canonicalAliasEvent?.content?.alias);\n \n // For direct messages, use the other user's display name\n let displayName = nameEvent?.content?.name || canonicalAliasEvent?.content?.alias || roomId;\n \n if (isDirect && memberEvents.length === 2) {\n const otherMember = memberEvents.find((event: any) => event.state_key !== session.userId);\n if (otherMember) {\n displayName = otherMember.content?.displayname || otherMember.state_key;\n }\n }\n\n const room: MatrixRoom & { isDirect?: boolean } = {\n room_id: roomId,\n name: displayName,\n canonical_alias: canonicalAliasEvent?.content?.alias,\n topic: topicEvent?.content?.topic,\n avatar_url: avatarEvent?.content?.url,\n isDirect,\n };\n\n return room;\n } catch (error) {\n console.error(`Error fetching details for room ${roomId}:`, error);\n return {\n room_id: roomId,\n name: roomId,\n isDirect: false,\n };\n }\n })\n );\n\n // Separate rooms and direct messages\n const publicRooms = roomDetails.filter(room => !room.isDirect);\n const dms = roomDetails.filter(room => room.isDirect);\n\n setRooms(publicRooms);\n setDirectMessages(dms);\n } catch (err) {\n console.error(\"Error fetching rooms:\", err);\n setError(err instanceof Error ? err.message : \"Failed to load rooms\");\n } finally {\n setLoading(false);\n }\n };\n\n if (loading) {\n return (\n

\n {[...Array(5)].map((_, i) => (\n

\n ))}\n

\n );\n }\n\n if (error) {\n return (\n

\n \n {error}\n

\n \n Try again\n \n

\n );\n }\n\n return (\n

\n {/* Header with tabs */}\n

\n setActiveTab('rooms')}\n className={`flex-1 px-2 sm:px-3 py-2 text-xs sm:text-sm font-medium rounded-md transition-colors ${\n activeTab === 'rooms'\n ? 'theme-background theme-text shadow-sm'\n : 'theme-text-secondary theme-hover'\n }`}\n >\n

\n \n Rooms\n \n {rooms.length}\n \n

\n \n setActiveTab('dms')}\n className={`flex-1 px-2 sm:px-3 py-2 text-xs sm:text-sm font-medium rounded-md transition-colors ${\n activeTab === 'dms'\n ? 'theme-background theme-text shadow-sm'\n : 'theme-text-secondary theme-hover'\n }`}\n >\n

\n \n DMs\n \n {directMessages.length}\n \n

\n \n

\n\n

\n {loading ? (\n

\n {[...Array(5)].map((_, i) => (\n

\n ))}\n

\n ) : error ? (\n

\n \n {error}\n

\n \n Try again\n \n

\n ) : (\n \n )}\n

\n\n

\n \n \n Refresh {activeTab === 'rooms' ? 'Rooms' : 'Messages'}\n \n

\n );\n}\n\n// Separate component for room list content\nfunction RoomListContent({ \n rooms, \n selectedRoom, \n onRoomSelect, \n type \n}: { \n rooms: MatrixRoom[], \n selectedRoom: MatrixRoom | null, \n onRoomSelect: (room: MatrixRoom) => void,\n type: 'rooms' | 'dms'\n}) {\n const getRoomDisplayName = (room: MatrixRoom) => {\n if (room.name && room.name !== room.room_id) {\n return room.name;\n }\n if (room.canonical_alias) {\n return room.canonical_alias;\n }\n return room.room_id;\n };\n\n const getRoomInitials = (room: MatrixRoom) => {\n const name = getRoomDisplayName(room);\n if (name.startsWith(\"#\") || name.startsWith(\"@\")) {\n return name.substring(1, 3).toUpperCase();\n }\n return name.substring(0, 2).toUpperCase();\n };\n\n if (rooms.length === 0) {\n return (\n

\n {type === 'rooms' ? (\n \n ) : (\n \n )}\n

\n {type === 'rooms' ? 'No rooms found' : 'No direct messages'}\n

\n {type === 'rooms' ? 'Join some rooms to get started' : 'Start a conversation with someone'}\n

\n );\n }\n\n return (\n

\n {rooms.map((room) => (\n onRoomSelect(room)}\n className={`w-full flex items-center space-x-2 sm:space-x-3 p-2 sm:p-3 rounded-lg sm:rounded-xl text-left transition-all duration-200 ${\n selectedRoom?.room_id === room.room_id\n ? \"border shadow-sm\"\n : \"theme-hover\"\n }`}\n style={selectedRoom?.room_id === room.room_id ? {\n backgroundColor: 'var(--color-primaryLight)',\n borderColor: 'var(--color-primary)',\n color: 'var(--color-primary)'\n } : {}}\n >\n

\n {room.avatar_url ? (\n \n ) : type === 'dms' ? (\n \n ) : (\n getRoomInitials(room)\n )}\n

\n {getRoomDisplayName(room)}\n

\n {room.topic && (\n

\n {room.topic}\n

\n )}\n

\n \n ))}\n

\n );\n}\n}",[],[145,234,236],"fc1f1a90-3c38-11f0-b5db-9e149126039e","MessageList.tsx","57581ef4-3c32-11f0-8585-9e149126039e",81,["D",1748487589415],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { MatrixMessage } from \"../../shared/types.ts\";\n\ninterface MessageListProps {\n messages: MatrixMessage[];\n currentUserId: string;\n}\n\nexport default function MessageList({ messages, currentUserId }: MessageListProps) {\n const messagesEndRef = useRef(null);\n const containerRef = useRef(null);\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n const formatTime = (timestamp: number) => {\n const date = new Date(timestamp);\n const now = new Date();\n const isToday = date.toDateString() === now.toDateString();\n \n if (isToday) {\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n } else {\n return date.toLocaleDateString([], { \n month: 'short', \n day: 'numeric',\n hour: '2-digit', \n minute: '2-digit' \n });\n }\n };\n\n const getUserDisplayName = (userId: string) => {\n // Extract username from Matrix ID (@username:homeserver.com)\n const match = userId.match(/@([^:]+):/);\n return match ? match[1] : userId;\n };\n\n const getUserInitials = (userId: string) => {\n const displayName = getUserDisplayName(userId);\n return displayName.substring(0, 2).toUpperCase();\n };\n\n const getUserColor = (userId: string) => {\n // Generate a consistent color based on user ID\n let hash = 0;\n for (let i = 0; i < userId.length; i++) {\n hash = userId.charCodeAt(i) + ((hash << 5) - hash);\n }\n \n const colors = [\n \"bg-red-500\", \"bg-blue-500\", \"bg-green-500\", \"bg-yellow-500\",\n \"bg-purple-500\", \"bg-pink-500\", \"bg-indigo-500\", \"bg-teal-500\"\n ];\n \n return colors[Math.abs(hash) % colors.length];\n };\n\n const renderMessageContent = (message: MatrixMessage) => {\n const { content } = message;\n \n switch (content.msgtype) {\n case \"m.text\":\n return (\n

{content.body}

\n );\n case \"m.emote\":\n return (\n

\n {getUserDisplayName(message.sender)} {content.body}\n

\n );\n case \"m.notice\":\n return (\n

\n {content.body}\n

\n );\n case \"m.image\":\n return (\n

\n {content.body && (\n

{content.body}

\n )}\n

\n );\n case \"m.file\":\n return (\n

\n \n {content.body || \"File\"}\n

\n );\n default:\n return (\n

\n Unsupported message type: {content.msgtype}\n

\n );\n }\n };\n\n const groupMessagesByDate = (messages: MatrixMessage[]) => {\n const groups: { [date: string]: MatrixMessage[] } = {};\n \n messages.forEach(message => {\n const date = new Date(message.origin_server_ts).toDateString();\n if (!groups[date]) {\n groups[date] = [];\n }\n groups[date].push(message);\n });\n \n return groups;\n };\n\n const messageGroups = groupMessagesByDate(messages);\n\n if (messages.length === 0) {\n return (\n

\n \n

No messages yet

\n Be the first to send a message in this room! Start a conversation and connect with your community.\n

\n );\n }\n\n return (\n

\n {Object.entries(messageGroups).map(([date, dayMessages]) => (\n

\n {/* Date separator */}\n

\n {new Date(date).toLocaleDateString([], { \n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n })}\n

\n\n {/* Messages for this date */}\n

\n {dayMessages.map((message, index) => {\n const isOwnMessage = message.sender === currentUserId;\n const prevMessage = index > 0 ? dayMessages[index - 1] : null;\n const showAvatar = !prevMessage || prevMessage.sender !== message.sender;\n const timeDiff = prevMessage ? message.origin_server_ts - prevMessage.origin_server_ts : 0;\n const showTime = showAvatar || timeDiff > 300000; // Show time if more than 5 minutes apart\n \n return (\n \n

\n {/* Avatar */}\n

\n {showAvatar && !isOwnMessage ? (\n

\n {getUserInitials(message.sender)}\n

\n ) : (\n

\n )}\n

\n\n {/* Message content */}\n

\n {showAvatar && (\n

\n \n {isOwnMessage ? 'You' : getUserDisplayName(message.sender)}\n \n \n {formatTime(message.origin_server_ts)}\n \n

\n )}\n \n

\n {renderMessageContent(message)}\n

\n \n {!showAvatar && showTime && (\n \n {formatTime(message.origin_server_ts)}\n \n )}\n

\n );\n })}\n

\n ))}\n \n

\n );\n}",[],[145,234,245],"e05ea3cc-3d94-11f0-a665-76b3cceeab13","MessageInput.tsx","642cb414-3c32-11f0-b43f-9e149126039e",124,["D",1748637007713],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface MessageInputProps {\n onSendMessage: (content: string) => void;\n}\n\nexport default function MessageInput({ onSendMessage }: MessageInputProps) {\n const [message, setMessage] = useState(\"\");\n const [sending, setSending] = useState(false);\n const textareaRef = useRef(null);\n\n useEffect(() => {\n // Auto-resize textarea but prevent scrolling\n if (textareaRef.current) {\n const textarea = textareaRef.current;\n textarea.style.height = \"auto\";\n const newHeight = Math.min(textarea.scrollHeight, 150);\n textarea.style.height = `${newHeight}px`;\n textarea.style.overflowY = newHeight >= 150 ? \"auto\" : \"hidden\";\n }\n }, [message]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n const trimmedMessage = message.trim();\n if (!trimmedMessage || sending) return;\n\n setSending(true);\n try {\n await onSendMessage(trimmedMessage);\n setMessage(\"\");\n // Reset textarea height\n if (textareaRef.current) {\n textareaRef.current.style.height = \"auto\";\n }\n } catch (error) {\n console.error(\"Failed to send message:\", error);\n } finally {\n setSending(false);\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit(e);\n }\n };\n\n const handlePaste = (e: React.ClipboardEvent) => {\n // Handle file uploads in the future\n const items = e.clipboardData?.items;\n if (items) {\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n if (item.type.indexOf(\"image\") !== -1) {\n // TODO: Handle image uploads\n console.log(\"Image paste detected - file uploads not implemented yet\");\n }\n }\n }\n };\n\n return (\n

\n {/* Message input */}\n

\n setMessage(e.target.value)}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n placeholder=\"Type a message...\"\n disabled={sending}\n className=\"w-full px-3 sm:px-5 py-3 sm:py-4 pr-10 sm:pr-12 theme-input rounded-xl sm:rounded-2xl resize-none max-h-32 sm:max-h-40 disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base leading-relaxed overflow-hidden transition-all duration-200\"\n style={{ \n minHeight: \"44px\",\n borderColor: 'var(--color-border)',\n backgroundColor: 'var(--color-background)',\n color: 'var(--color-text)'\n }}\n rows={1}\n />\n\n {/* Character count for long messages */}\n {message.length > 500 && (\n

\n {message.length}/65536\n

\n )}\n

\n\n {/* Send button */}\n \n {sending\n ?

\n : (\n \n )}\n \n \n\n {/* Help text */}\n

\n Press Enter to send, Shift+Enter for new line\n Tap to send\n {message.length > 0 && (\n \n {message.length} characters\n \n )}\n

\n );\n}",[],[145,234,253],"4931ce60-3d95-11f0-a16b-76b3cceeab13","Login.tsx","d33020d6-3c31-11f0-9c84-9e149126039e",130,["D",1748637183565],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { UserSession, MatrixLoginResponse } from \"../../shared/types.ts\";\n\ninterface LoginProps {\n onLogin: (session: UserSession) => void;\n}\n\nexport default function Login({ onLogin }: LoginProps) {\n const [homeserver, setHomeserver] = useState(\"https://matrix.org\");\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError(\"\");\n\n try {\n // Ensure homeserver URL is properly formatted\n const serverUrl = homeserver.startsWith(\"http\") ? homeserver : `https://${homeserver}`;\n \n const response = await fetch(\"/api/matrix/_matrix/client/r0/login\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-Homeserver\": serverUrl,\n },\n body: JSON.stringify({\n type: \"m.login.password\",\n user: username,\n password: password,\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || `Login failed: ${response.status}`);\n }\n\n const loginData: MatrixLoginResponse = await response.json();\n \n const session: UserSession = {\n accessToken: loginData.access_token,\n userId: loginData.user_id,\n homeserver: serverUrl,\n deviceId: loginData.device_id,\n };\n\n onLogin(session);\n } catch (err) {\n console.error(\"Login error:\", err);\n setError(err instanceof Error ? err.message : \"Login failed\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

\n \n

Matrix Client

\n Connect to the decentralized future\n

\n\n

\n {error && (\n

\n \n {error}\n

\n )}\n\n

\n \n Homeserver\n \n setHomeserver(e.target.value)}\n className=\"theme-input appearance-none relative block w-full px-4 py-3 rounded-xl focus:outline-none focus:ring-2 focus:z-10 text-sm sm:text-base transition-all duration-200\"\n style={{\n borderColor: 'var(--color-border)',\n backgroundColor: 'var(--color-background)',\n color: 'var(--color-text)',\n ':focus': {\n borderColor: 'var(--color-primary)',\n boxShadow: `0 0 0 3px ${CSS.supports('color', 'var(--color-primary)') ? 'var(--color-primary)' : '#3b82f6'}10`\n }\n }}\n placeholder=\"https://matrix.org\"\n />\n

\n\n

\n \n Username\n \n setUsername(e.target.value)}\n className=\"theme-input appearance-none relative block w-full px-4 py-3 rounded-xl focus:outline-none focus:ring-2 focus:z-10 text-sm sm:text-base transition-all duration-200\"\n style={{\n borderColor: 'var(--color-border)',\n backgroundColor: 'var(--color-background)',\n color: 'var(--color-text)'\n }}\n placeholder=\"@username:matrix.org\"\n />\n

\n\n

\n \n Password\n \n setPassword(e.target.value)}\n className=\"theme-input appearance-none relative block w-full px-4 py-3 rounded-xl focus:outline-none focus:ring-2 focus:z-10 text-sm sm:text-base transition-all duration-200\"\n style={{\n borderColor: 'var(--color-border)',\n backgroundColor: 'var(--color-background)',\n color: 'var(--color-text)'\n }}\n placeholder=\"Password\"\n />\n

\n\n

\n \n {loading ? (\n

\n Signing in...\n

\n ) : (\n

\n \n Sign in to Matrix\n

\n )}\n \n

\n\n

\n Don't have an account?{\" \"}\n \n Learn about Matrix\n \n

\n );\n}",[],[145,234,262],"26771db2-3d95-11f0-af54-76b3cceeab13","ChatView.tsx","40325fe6-3c32-11f0-9b5a-9e149126039e",129,["D",1748637125315],26,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { MatrixMessage, MatrixRoom, UserSession } from \"../../shared/types.ts\";\nimport MessageInput from \"./MessageInput.tsx\";\nimport MessageList from \"./MessageList.tsx\";\n\ninterface ChatViewProps {\n session: UserSession;\n room: MatrixRoom;\n}\n\nexport default function ChatView({ session, room }: ChatViewProps) {\n const [messages, setMessages] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n const [syncToken, setSyncToken] = useState(null);\n const syncIntervalRef = useRef(null);\n const currentRoomRef = useRef(null);\n\n useEffect(() => {\n // Clear messages when switching rooms\n if (currentRoomRef.current !== room.room_id) {\n setMessages([]);\n currentRoomRef.current = room.room_id;\n }\n\n loadMessages();\n startSync();\n\n return () => {\n if (syncIntervalRef.current) {\n clearInterval(syncIntervalRef.current);\n }\n };\n }, [room.room_id]);\n\n const loadMessages = async () => {\n try {\n setLoading(true);\n setError(\"\");\n\n const response = await fetch(\n `/api/matrix/_matrix/client/r0/rooms/${encodeURIComponent(room.room_id)}/messages?dir=b&limit=100`,\n {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n },\n );\n\n if (!response.ok) {\n throw new Error(`Failed to load messages: ${response.status}`);\n }\n\n const data = await response.json();\n\n const messageEvents = data.chunk\n .filter((event: any) => {\n return event.type === \"m.room.message\" && event.content?.body;\n })\n .reverse(); // Reverse to show oldest first\n\n // Remove duplicates based on event_id\n const uniqueMessages = messageEvents.filter((message: any, index: number, array: any[]) =>\n array.findIndex(m => m.event_id === message.event_id) === index\n );\n\n setMessages(uniqueMessages);\n } catch (err) {\n console.error(\"Error loading messages:\", err);\n setError(err instanceof Error ? err.message : \"Failed to load messages\");\n } finally {\n setLoading(false);\n }\n };\n\n const startSync = async () => {\n try {\n // Clear any existing sync interval\n if (syncIntervalRef.current) {\n clearInterval(syncIntervalRef.current);\n }\n\n // Get initial sync token if we don't have one\n if (!syncToken) {\n const syncResponse = await fetch(\"/api/matrix/_matrix/client/r0/sync?timeout=0\", {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (syncResponse.ok) {\n const syncData = await syncResponse.json();\n setSyncToken(syncData.next_batch);\n }\n }\n\n // Start polling for new messages\n syncIntervalRef.current = window.setInterval(async () => {\n try {\n const url = syncToken\n ? `/api/matrix/_matrix/client/r0/sync?since=${syncToken}&timeout=10000`\n : \"/api/matrix/_matrix/client/r0/sync?timeout=10000\";\n\n const syncResponse = await fetch(url, {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (syncResponse.ok) {\n const syncData = await syncResponse.json();\n setSyncToken(syncData.next_batch);\n\n // Check for new messages in current room\n if (syncData.rooms?.join?.[room.room_id]?.timeline?.events) {\n const newMessages = syncData.rooms.join[room.room_id].timeline.events\n .filter((event: any) => event.type === \"m.room.message\" && event.content?.body);\n\n if (newMessages.length > 0) {\n setMessages(prev => {\n // Prevent duplicates by checking event IDs\n const existingIds = new Set(prev.map(msg => msg.event_id));\n const uniqueNewMessages = newMessages.filter((msg: any) => !existingIds.has(msg.event_id));\n\n if (uniqueNewMessages.length > 0) {\n return [...prev, ...uniqueNewMessages];\n }\n return prev;\n });\n }\n }\n }\n } catch (error) {\n console.error(\"Sync error:\", error);\n }\n }, 10000); // Increased interval to 10 seconds to reduce API calls\n } catch (error) {\n console.error(\"Failed to start sync:\", error);\n }\n };\n\n const sendMessage = async (content: string) => {\n try {\n const txnId = Date.now().toString();\n\n // Optimistically add the message to the UI first\n const optimisticMessage: MatrixMessage = {\n event_id: `temp_${txnId}`,\n type: \"m.room.message\",\n room_id: room.room_id,\n sender: session.userId,\n content: {\n msgtype: \"m.text\",\n body: content,\n },\n origin_server_ts: Date.now(),\n };\n\n setMessages(prev => [...prev, optimisticMessage]);\n\n const response = await fetch(\n `/api/matrix/_matrix/client/r0/rooms/${encodeURIComponent(room.room_id)}/send/m.room.message/${txnId}`,\n {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n body: JSON.stringify({\n msgtype: \"m.text\",\n body: content,\n }),\n },\n );\n\n if (!response.ok) {\n // Remove optimistic message on failure\n setMessages(prev => prev.filter(msg => msg.event_id !== `temp_${txnId}`));\n throw new Error(`Failed to send message: ${response.status}`);\n }\n\n const result = await response.json();\n\n // Replace optimistic message with real one\n setMessages(prev =>\n prev.map(msg =>\n msg.event_id === `temp_${txnId}`\n ? { ...msg, event_id: result.event_id }\n : msg\n )\n );\n } catch (error) {\n console.error(\"Error sending message:\", error);\n }\n };\n\n const getRoomDisplayName = () => {\n if (room.name && room.name !== room.room_id) {\n return room.name;\n }\n if (room.canonical_alias) {\n return room.canonical_alias;\n }\n return room.room_id;\n };\n\n return (\n

\n {/* Header - Hidden on mobile since we have the mobile header in App.tsx */}\n

\n {getRoomDisplayName()}\n

\n {room.topic &&

{room.topic}

}\n

\n \n \n \n

\n\n {/* Messages */}\n

\n {loading\n ? (\n

Loading messages...

\n )\n : error\n ? (\n

\n \n

Failed to load messages

{error}

\n \n Try again\n \n

\n )\n : }\n

\n\n {/* Message Input */}\n

\n \n

\n );\n}",[],[145,234,271],"d19a418e-3d94-11f0-a0c3-76b3cceeab13","App.tsx","47558a38-3c31-11f0-b20c-9e149126039e",123,["D",1748636982936],14,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport Login from \"./Login.tsx\";\nimport RoomList from \"./RoomList.tsx\";\nimport ChatView from \"./ChatView.tsx\";\nimport Settings from \"./Settings.tsx\";\nimport type { UserSession, MatrixRoom } from \"../../shared/types.ts\";\nimport { getInitialTheme, applyTheme } from \"../../shared/themes.ts\";\n\nexport default function App() {\n const [session, setSession] = useState(null);\n const [selectedRoom, setSelectedRoom] = useState(null);\n const [loading, setLoading] = useState(true);\n const [showSettings, setShowSettings] = useState(false);\n const [showSidebar, setShowSidebar] = useState(false);\n\n // Initialize theme on mount\n useEffect(() => {\n const theme = getInitialTheme();\n applyTheme(theme);\n }, []);\n\n // Check for existing session on load\n useEffect(() => {\n const savedSession = localStorage.getItem(\"matrix_session\");\n \n if (savedSession) {\n try {\n const parsedSession = JSON.parse(savedSession);\n setSession(parsedSession);\n } catch (error) {\n console.error(\"Failed to parse saved session:\", error);\n localStorage.removeItem(\"matrix_session\");\n }\n }\n \n setLoading(false);\n }, []);\n\n const handleLogin = (newSession: UserSession) => {\n setSession(newSession);\n localStorage.setItem(\"matrix_session\", JSON.stringify(newSession));\n };\n\n const handleLogout = () => {\n setSession(null);\n setSelectedRoom(null);\n localStorage.removeItem(\"matrix_session\");\n };\n\n const handleRoomSelect = (room: MatrixRoom) => {\n setSelectedRoom(room);\n // Close sidebar on mobile when room is selected\n setShowSidebar(false);\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!session) {\n return ;\n }\n\n return (\n

\n {/* Mobile Sidebar Overlay */}\n {showSidebar && (\n

setShowSidebar(false)}\n />\n )}\n\n {/* Sidebar */}\n

\n {/* Header */}\n

Matrix Client

{session.userId}

\n {/* Close sidebar button (mobile only) */}\n setShowSidebar(false)}\n className=\"p-2 theme-text-muted rounded-lg theme-hover transition-colors lg:hidden\"\n title=\"Close sidebar\"\n >\n \n \n\n {/* Settings button */}\n setShowSettings(true)}\n className=\"p-2 theme-text-muted rounded-lg theme-hover transition-colors group\"\n title=\"Settings\"\n >\n \n \n \n {/* Logout button */}\n \n \n \n

\n\n {/* Room List */}\n

\n \n

\n\n {/* Main Content */}\n

\n {selectedRoom ? (\n <>\n {/* Mobile Header */}\n

\n setShowSidebar(true)}\n className=\"p-2 theme-text-muted rounded-lg theme-hover transition-colors\"\n title=\"Open sidebar\"\n >\n \n \n

{selectedRoom.name}

\n {selectedRoom.topic && (\n

{selectedRoom.topic}

\n )}\n

\n \n \n ) : (\n <>\n {/* Mobile Header for welcome screen */}\n

\n setShowSidebar(true)}\n className=\"p-2 theme-text-muted rounded-lg theme-hover transition-colors\"\n title=\"Open sidebar\"\n >\n \n \n

Matrix Client

\n \n

Welcome to Matrix

\n Select a room from the sidebar to start chatting with your community. \n Your conversations are end-to-end encrypted and decentralized.\n

\n setShowSidebar(true)}\n className=\"mt-6 lg:hidden theme-button px-6 py-3 rounded-lg font-medium transition-colors\"\n >\n Browse Rooms\n \n

\n \n )}\n

\n\n {/* Settings Modal */}\n {showSettings && (\n setShowSettings(false)} />\n )}\n

\n );\n}",[],[145,234,280],"4755a9d2-3c31-11f0-b20c-9e149126039e",6,["D",1748484279629],[171,172,173,174,175,176,177],[145,234],["D",1748484255451],[170,178,179],[145],"1e55e448-3c3b-11f0-9f2e-9e149126039e","index.ts",107,["D",1748488505799],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Matrix API proxy to handle CORS\napp.all(\"/api/matrix/*\", async c => {\n const path = c.req.path.replace(\"/api/matrix\", \"\");\n const homeserver = c.req.header(\"X-Homeserver\");\n \n if (!homeserver) {\n return c.json({ error: \"Missing X-Homeserver header\" }, 400);\n }\n\n const url = `${homeserver}${path}`;\n const method = c.req.method;\n \n const headers: Record = {\n \"Content-Type\": \"application/json\",\n };\n \n // Forward authorization header if present\n const auth = c.req.header(\"Authorization\");\n if (auth) {\n headers[\"Authorization\"] = auth;\n }\n\n let body: string | undefined;\n if (method !== \"GET\" && method !== \"HEAD\") {\n body = await c.req.text();\n }\n\n try {\n const response = await fetch(url, {\n method,\n headers,\n body,\n });\n\n const responseData = await response.text();\n \n return new Response(responseData, {\n status: response.status,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization, X-Homeserver\",\n },\n });\n } catch (error) {\n console.error(\"Matrix API proxy error:\", error);\n return c.json({ error: \"Failed to proxy request\" }, 500);\n }\n});\n\n// Handle preflight requests\napp.options(\"/api/matrix/*\", c => {\n return new Response(null, {\n status: 200,\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization, X-Homeserver\",\n },\n });\n});\n\nexport default app.fetch;",[],[151,297],["D",1748484247288],[168],[151],["D",1748484200184],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_123":344,"_345":346,"_347":348,"_349":25,"_350":25,"_351":25,"_352":58,"_353":-5,"_354":-7,"_355":-7,"_356":62,"_357":25,"_358":25,"_359":-5,"_360":25,"_361":25,"_362":25,"_363":-5},"ENV",{"_315":316,"_317":318,"_319":86,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v134