[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_310":311,"_312":313},"routes/_app.x.$handle.$name",{"_98":97,"_32":46,"_106":88,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":60,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",103,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","47558a38-3c31-11f0-b20c-9e149126039e","name","App.tsx","fileType","script","content","/** @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\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 };\n\n if (loading) {\n return (\n

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

\n {/* Sidebar */}\n

\n {/* Header */}\n

Matrix Client

{session.userId}

\n {/* Settings button */}\n setShowSettings(true)}\n className=\"p-2 theme-text-muted hover:theme-text rounded-lg hover:theme-surface transition-colors group\"\n title=\"Settings\"\n style={{\n color: 'var(--color-textMuted)',\n ':hover': { color: 'var(--color-text)', backgroundColor: 'var(--color-surfaceHover)' }\n }}\n >\n \n \n {/* Tooltip */}\n

\n Settings\n

\n \n \n {/* Logout button */}\n \n \n \n {/* Tooltip */}\n

\n Logout\n

\n \n

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

\n \n

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

\n {selectedRoom ? (\n \n ) : (\n

\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 )}\n

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

\n );\n}","/** @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\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 };\n\n if (loading) {\n return (\n

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

\n {/* Sidebar */}\n

\n {/* Header */}\n

Matrix Client

{session.userId}

\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 ) : (\n

\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 )}\n

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

\n );\n}","createdAt",["D",1748488337092],"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",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"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",{"_44":45,"_32":46,"_39":306,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":307,"_82":308,"_84":309,"_86":25},"tree",[173,175,186,189],"files",[173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189],"counts",{"_162":64,"_163":164,"_165":64,"_166":167,"_168":169},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":156,"_32":157,"_30":158,"_135":-5,"_42":43,"_41":159,"_137":60,"_39":160,"_13":64,"_34":148,"_36":-5,"_24":25,"_141":-5,"_27":161},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":60,"_39":154,"_13":64,"_34":148,"_36":-5,"_24":25,"_141":-5,"_27":155},{"_44":143,"_32":144,"_30":145,"_135":-5,"_42":43,"_41":146,"_137":60,"_39":147,"_13":64,"_34":148,"_36":-5,"_24":25,"_141":-5,"_27":149},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":25,"_39":138,"_13":139,"_34":20,"_36":140,"_24":25,"_141":-5,"_27":142},"202d5d6a-3c3a-11f0-8683-9e149126039e","README.md","2450a964-3c31-11f0-a89b-9e149126039e","parentId",98,"latest",["D",1748488079404],14,"# 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- ✅ **Enhanced Dark/Light Mode**: Intelligent theme system with system preference detection\n- ✅ **Smooth Theme Transitions**: Beautiful animated icon transitions and smooth 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\n- ✅ **Persistent Preferences**: Remembers manual theme selection across sessions\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 both light and dark modes\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.","label",[133],"2ad6446a-3c31-11f0-ab74-9e149126039e","shared","5d578e7c-5ed0-428e-a8e4-93e4b8ae6c74",2,["D",1748484231814],"directory",[144],"38eca1fc-3c31-11f0-861b-9e149126039e","frontend","61ed27d5-bb56-4515-8699-6e4311eb10d5",4,["D",1748484255451],[151],"340ec444-3c31-11f0-883d-9e149126039e","backend","f0c23a58-f8e8-4cde-afe9-1c855e951c49",3,["D",1748484247288],[157],"pulls","branches",1,"forks","envVars",{"_170":64,"_172":64},"connections",{"_170":64,"_171":64},"count","unfilledCount","emptyCount",{"_44":156,"_32":157,"_30":158,"_135":-5,"_42":43,"_41":159,"_137":60,"_39":303,"_13":64,"_34":148,"_36":-5,"_24":25,"_141":-5,"_191":304,"_27":305},{"_44":295,"_32":296,"_30":58,"_135":158,"_42":43,"_41":297,"_137":25,"_39":298,"_13":164,"_34":299,"_36":300,"_24":25,"_141":46,"_191":301,"_27":302},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":60,"_39":292,"_13":64,"_34":148,"_36":-5,"_24":25,"_141":-5,"_191":293,"_27":294},{"_44":287,"_32":238,"_30":232,"_135":152,"_42":43,"_41":288,"_137":60,"_39":289,"_13":64,"_34":148,"_36":-5,"_24":25,"_141":-5,"_191":290,"_27":291},{"_44":282,"_32":33,"_30":31,"_135":232,"_42":43,"_41":14,"_137":25,"_39":283,"_13":284,"_34":35,"_36":38,"_24":25,"_141":-5,"_191":285,"_27":286},{"_44":273,"_32":274,"_30":275,"_135":232,"_42":43,"_41":276,"_137":25,"_39":277,"_13":278,"_34":35,"_36":279,"_24":25,"_141":-5,"_191":280,"_27":281},{"_44":265,"_32":266,"_30":267,"_135":232,"_42":43,"_41":268,"_137":25,"_39":269,"_13":216,"_34":35,"_36":270,"_24":25,"_141":-5,"_191":271,"_27":272},{"_44":256,"_32":257,"_30":258,"_135":232,"_42":43,"_41":259,"_137":25,"_39":260,"_13":261,"_34":35,"_36":262,"_24":25,"_141":-5,"_191":263,"_27":264},{"_44":248,"_32":249,"_30":250,"_135":232,"_42":43,"_41":251,"_137":60,"_39":252,"_13":153,"_34":35,"_36":253,"_24":25,"_141":-5,"_191":254,"_27":255},{"_44":239,"_32":240,"_30":241,"_135":232,"_42":43,"_41":242,"_137":25,"_39":243,"_13":244,"_34":35,"_36":245,"_24":25,"_141":-5,"_191":246,"_27":247},{"_44":229,"_32":230,"_30":231,"_135":232,"_42":43,"_41":233,"_137":60,"_39":234,"_13":164,"_34":35,"_36":235,"_24":25,"_141":-5,"_191":236,"_27":237},{"_44":221,"_32":222,"_30":223,"_135":152,"_42":43,"_41":224,"_137":25,"_39":225,"_13":216,"_34":20,"_36":226,"_24":25,"_141":-5,"_191":227,"_27":228},{"_44":213,"_32":214,"_30":215,"_135":152,"_42":43,"_41":216,"_137":60,"_39":217,"_13":64,"_34":35,"_36":218,"_24":25,"_141":-5,"_191":219,"_27":220},{"_44":143,"_32":144,"_30":145,"_135":-5,"_42":43,"_41":146,"_137":60,"_39":210,"_13":64,"_34":148,"_36":-5,"_24":25,"_141":-5,"_191":211,"_27":212},{"_44":202,"_32":203,"_30":204,"_135":145,"_42":43,"_41":205,"_137":60,"_39":206,"_13":64,"_34":35,"_36":207,"_24":25,"_141":-5,"_191":208,"_27":209},{"_44":194,"_32":195,"_30":196,"_135":145,"_42":43,"_41":197,"_137":60,"_39":198,"_13":159,"_34":35,"_36":199,"_24":25,"_141":-5,"_191":200,"_27":201},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":25,"_39":190,"_13":139,"_34":20,"_36":140,"_24":25,"_141":-5,"_191":192,"_27":193},["D",1748488079404],"children",[],[133],"71670d90-3c38-11f0-9012-9e149126039e","types.ts","2ad62782-3c31-11f0-ab74-9e149126039e",72,["D",1748487356684],"// 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}",[],[144,195],"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};",[],[144,203],["D",1748484231814],[187,188],[144],"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();",[],[151,214],"a09d6b84-3c3a-11f0-b623-9e149126039e","index.html","38ec7da8-3c31-11f0-861b-9e149126039e",102,["D",1748488294886],"\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",[],[151,222],"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}",[],[151,238,230],"components","7f278068-3c38-11f0-856b-9e149126039e","RoomList.tsx","2b14c356-3c32-11f0-bdf0-9e149126039e",74,["D",1748487379757],9,"/** @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-3 py-2 text-sm font-medium rounded-md transition-colors ${\n activeTab === 'rooms'\n ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'\n : 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'\n }`}\n >\n

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

\n \n setActiveTab('dms')}\n className={`flex-1 px-3 py-2 text-sm font-medium rounded-md transition-colors ${\n activeTab === 'dms'\n ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'\n : 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'\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-3 p-3 rounded-xl text-left transition-all duration-200 ${\n selectedRoom?.room_id === room.room_id\n ? \"bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 shadow-sm\"\n : \"hover:bg-gray-100 dark:hover:bg-gray-700/50\"\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}",[],[151,238,240],"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}",[],[151,238,249],"e5ef67b6-3c38-11f0-9f8f-9e149126039e","MessageInput.tsx","642cb414-3c32-11f0-b43f-9e149126039e",80,["D",1748487552193],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } 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-5 py-4 pr-12 border border-gray-300 dark:border-gray-600 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none max-h-40 disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-colors text-base leading-relaxed overflow-hidden\"\n rows={1}\n style={{ minHeight: '52px' }}\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 {message.length > 0 && (\n \n {message.length} characters\n \n )}\n

\n );\n}",[],[151,238,257],"f9aebf08-3c39-11f0-8767-9e149126039e","Login.tsx","d33020d6-3c31-11f0-9c84-9e149126039e",94,["D",1748488014821],"/** @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=\"appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm transition-all duration-200\"\n placeholder=\"https://matrix.org\"\n />\n

\n\n

\n \n Username\n \n setUsername(e.target.value)}\n className=\"appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm transition-all duration-200\"\n placeholder=\"@username:matrix.org\"\n />\n

\n\n

\n \n Password\n \n setPassword(e.target.value)}\n className=\"appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm transition-all duration-200\"\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}",[],[151,238,266],"cb47d72c-3c38-11f0-ab7f-9e149126039e","ChatView.tsx","40325fe6-3c32-11f0-9b5a-9e149126039e",79,["D",1748487507472],24,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport MessageList from \"./MessageList.tsx\";\nimport MessageInput from \"./MessageInput.tsx\";\nimport type { UserSession, MatrixRoom, MatrixMessage } from \"../../shared/types.ts\";\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 => 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 */}\n

\n {getRoomDisplayName()}\n

\n {room.topic && (\n

{room.topic}

\n )}\n

\n \n \n \n

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

\n {loading ? (\n

Loading messages...

\n ) : error ? (\n

\n \n

Failed to load messages

{error}

\n \n Try again\n \n

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

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

\n \n

\n );\n}",[],[151,238,274],"b9c5833a-3c3a-11f0-8471-9e149126039e",["D",1748488337092],11,[],[151,238,33],"4755a9d2-3c31-11f0-b20c-9e149126039e",6,["D",1748484279629],[177,178,179,180,181,182,183],[151,238],["D",1748484255451],[176,184,185],[151],"67122f7e-3c32-11f0-b911-9e149126039e","index.ts",12,["D",1748484762370],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/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;",[],[157,296],["D",1748484247288],[174],[157],["D",1748484200184],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"ctx",{"_80":-5,"_125":343,"_344":345,"_346":347,"_348":25,"_349":25,"_350":25,"_351":60,"_352":-5,"_353":-7,"_354":-7,"_355":64,"_356":25,"_357":25,"_358":-5,"_359":25,"_360":25,"_361":25,"_362":-5},"ENV",{"_314":315,"_316":317,"_318":88,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v103