[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_297":298,"_299":300},"routes/_app.x.$handle.$name",{"_96":95,"_31":44,"_104":86,"_26":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":24,"_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,"_31":44,"_37":45,"_46":-5,"_47":24,"_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":24},"version",84,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","shared/themes.ts","latestPath","fileId","567c46a2-3c39-11f0-818b-9e149126039e","name","themes.ts","fileType","script","content","// 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};","createdAt",["D",1748487741022],"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":24},"branch",{"_13":85,"_31":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,"_31":44,"_37":293,"_46":-5,"_47":24,"_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":294,"_80":295,"_82":296,"_84":24},"tree",[171,173,183,186],"files",[171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186],"counts",{"_160":62,"_161":162,"_163":62,"_164":165,"_166":167},"contents",[126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":154,"_31":155,"_29":156,"_133":-5,"_40":41,"_39":157,"_135":58,"_37":158,"_13":62,"_33":146,"_35":-5,"_23":24,"_139":-5,"_26":159},{"_42":148,"_31":149,"_29":150,"_133":-5,"_40":41,"_39":151,"_135":58,"_37":152,"_13":62,"_33":146,"_35":-5,"_23":24,"_139":-5,"_26":153},{"_42":141,"_31":142,"_29":143,"_133":-5,"_40":41,"_39":144,"_135":58,"_37":145,"_13":62,"_33":146,"_35":-5,"_23":24,"_139":-5,"_26":147},{"_42":130,"_31":131,"_29":132,"_133":-5,"_40":41,"_39":134,"_135":24,"_37":136,"_13":137,"_33":20,"_35":138,"_23":24,"_139":-5,"_26":140},"0f3a4050-3c39-11f0-9cca-9e149126039e","README.md","2450a964-3c31-11f0-a89b-9e149126039e","parentId",83,"latest",["D",1748487621468],12,"# Matrix Client\n\nA beautiful web-based Matrix client built with React and TailwindCSS featuring dark mode 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- **Beautiful dark/light mode toggle**\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│ ├── index.html # Main HTML template\n│ └── index.tsx # Frontend entry point\n├── shared/\n│ └── types.ts # Shared TypeScript types\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",[131],"2ad6446a-3c31-11f0-ab74-9e149126039e","shared","5d578e7c-5ed0-428e-a8e4-93e4b8ae6c74",2,["D",1748484231814],"directory",[142],"38eca1fc-3c31-11f0-861b-9e149126039e","frontend","61ed27d5-bb56-4515-8699-6e4311eb10d5",4,["D",1748484255451],[149],"340ec444-3c31-11f0-883d-9e149126039e","backend","f0c23a58-f8e8-4cde-afe9-1c855e951c49",3,["D",1748484247288],[155],"pulls","branches",1,"forks","envVars",{"_168":62,"_170":62},"connections",{"_168":62,"_169":62},"count","unfilledCount","emptyCount",{"_42":154,"_31":155,"_29":156,"_133":-5,"_40":41,"_39":157,"_135":58,"_37":290,"_13":62,"_33":146,"_35":-5,"_23":24,"_139":-5,"_188":291,"_26":292},{"_42":283,"_31":284,"_29":56,"_133":156,"_40":41,"_39":137,"_135":24,"_37":285,"_13":162,"_33":286,"_35":287,"_23":24,"_139":44,"_188":288,"_26":289},{"_42":148,"_31":149,"_29":150,"_133":-5,"_40":41,"_39":151,"_135":58,"_37":280,"_13":62,"_33":146,"_35":-5,"_23":24,"_139":-5,"_188":281,"_26":282},{"_42":275,"_31":232,"_29":225,"_133":150,"_40":41,"_39":276,"_135":58,"_37":277,"_13":62,"_33":146,"_35":-5,"_23":24,"_139":-5,"_188":278,"_26":279},{"_42":267,"_31":268,"_29":269,"_133":225,"_40":41,"_39":270,"_135":24,"_37":271,"_13":144,"_33":34,"_35":272,"_23":24,"_139":-5,"_188":273,"_26":274},{"_42":258,"_31":259,"_29":260,"_133":225,"_40":41,"_39":261,"_135":24,"_37":262,"_13":263,"_33":34,"_35":264,"_23":24,"_139":-5,"_188":265,"_26":266},{"_42":250,"_31":251,"_29":252,"_133":225,"_40":41,"_39":253,"_135":24,"_37":254,"_13":144,"_33":34,"_35":255,"_23":24,"_139":-5,"_188":256,"_26":257},{"_42":241,"_31":242,"_29":243,"_133":225,"_40":41,"_39":244,"_135":24,"_37":245,"_13":246,"_33":34,"_35":247,"_23":24,"_139":-5,"_188":248,"_26":249},{"_42":233,"_31":234,"_29":235,"_133":225,"_40":41,"_39":236,"_135":58,"_37":237,"_13":151,"_33":34,"_35":238,"_23":24,"_139":-5,"_188":239,"_26":240},{"_42":222,"_31":223,"_29":224,"_133":225,"_40":41,"_39":226,"_135":24,"_37":227,"_13":228,"_33":34,"_35":229,"_23":24,"_139":-5,"_188":230,"_26":231},{"_42":214,"_31":215,"_29":216,"_133":150,"_40":41,"_39":217,"_135":24,"_37":218,"_13":144,"_33":20,"_35":219,"_23":24,"_139":-5,"_188":220,"_26":221},{"_42":206,"_31":207,"_29":208,"_133":150,"_40":41,"_39":209,"_135":58,"_37":210,"_13":62,"_33":34,"_35":211,"_23":24,"_139":-5,"_188":212,"_26":213},{"_42":141,"_31":142,"_29":143,"_133":-5,"_40":41,"_39":144,"_135":58,"_37":203,"_13":62,"_33":146,"_35":-5,"_23":24,"_139":-5,"_188":204,"_26":205},{"_42":199,"_31":32,"_29":30,"_133":143,"_40":41,"_39":14,"_135":58,"_37":200,"_13":62,"_33":34,"_35":36,"_23":24,"_139":-5,"_188":201,"_26":202},{"_42":191,"_31":192,"_29":193,"_133":143,"_40":41,"_39":194,"_135":58,"_37":195,"_13":157,"_33":34,"_35":196,"_23":24,"_139":-5,"_188":197,"_26":198},{"_42":130,"_31":131,"_29":132,"_133":-5,"_40":41,"_39":134,"_135":24,"_37":187,"_13":137,"_33":20,"_35":138,"_23":24,"_139":-5,"_188":189,"_26":190},["D",1748487621468],"children",[],[131],"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}",[],[142,192],"567c4530-3c39-11f0-818b-9e149126039e",["D",1748487741022],[],[142,32],["D",1748484231814],[184,185],[142],"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();",[],[149,207],"165f04d6-3c36-11f0-9211-9e149126039e","index.html","38ec7da8-3c31-11f0-861b-9e149126039e",46,["D",1748486344965],"\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",[],[149,215],"7f278068-3c38-11f0-856b-9e149126039e","RoomList.tsx","2b14c356-3c32-11f0-bdf0-9e149126039e","dfdc8674-7222-4186-bca7-b68b66f56bb4",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}",[],[149,232,223],"components","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}",[],[149,232,234],"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}",[],[149,232,242],"043f0152-3c36-11f0-991b-9e149126039e","Login.tsx","d33020d6-3c31-11f0-9c84-9e149126039e",45,["D",1748486314556],"/** @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 darkMode: boolean;\n onToggleDarkMode: () => void;\n}\n\nexport default function Login({ onLogin, darkMode, onToggleDarkMode }: 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 {/* Enhanced Dark mode toggle */}\n \n

\n {/* Sun icon */}\n \n \n {/* Moon icon */}\n \n

\n \n {/* Tooltip */}\n

\n Switch to {darkMode ? \"light\" : \"dark\"} mode\n

\n \n\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}",[],[149,232,251],"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}",[],[149,232,259],"dec57d84-3c35-11f0-b4d4-9e149126039e","App.tsx","47558a38-3c31-11f0-b20c-9e149126039e",44,["D",1748486251684],"/** @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 type { UserSession, MatrixRoom } from \"../../shared/types.ts\";\n\n// Theme management utilities\nconst getInitialTheme = () => {\n // Check localStorage first\n const savedTheme = localStorage.getItem(\"matrix_dark_mode\");\n if (savedTheme !== null) {\n return savedTheme === \"true\";\n }\n \n // Check system preference\n if (typeof window !== 'undefined' && window.matchMedia) {\n return window.matchMedia('(prefers-color-scheme: dark)').matches;\n }\n \n // Default to dark mode\n return true;\n};\n\nconst applyTheme = (isDark: boolean) => {\n const html = document.documentElement;\n if (isDark) {\n html.classList.add(\"dark\");\n } else {\n html.classList.remove(\"dark\");\n }\n localStorage.setItem(\"matrix_dark_mode\", isDark.toString());\n};\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 [darkMode, setDarkMode] = useState(getInitialTheme);\n\n // Initialize theme on mount\n useEffect(() => {\n applyTheme(darkMode);\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 // Listen for system theme changes\n useEffect(() => {\n if (typeof window !== 'undefined' && window.matchMedia) {\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n \n const handleChange = (e: MediaQueryListEvent) => {\n // Only auto-switch if user hasn't manually set a preference\n const savedTheme = localStorage.getItem(\"matrix_dark_mode\");\n if (savedTheme === null) {\n setDarkMode(e.matches);\n applyTheme(e.matches);\n }\n };\n\n mediaQuery.addEventListener('change', handleChange);\n return () => mediaQuery.removeEventListener('change', handleChange);\n }\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 const toggleDarkMode = () => {\n const newDarkMode = !darkMode;\n setDarkMode(newDarkMode);\n applyTheme(newDarkMode);\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 {/* Enhanced Dark mode toggle */}\n \n

\n {/* Sun icon */}\n \n \n {/* Moon icon */}\n \n

\n \n {/* Tooltip */}\n

\n {darkMode ? \"Light mode\" : \"Dark mode\"}\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}",[],[149,232,268],"4755a9d2-3c31-11f0-b20c-9e149126039e",6,["D",1748484279629],[175,176,177,178,179,180],[149,232],["D",1748484255451],[174,181,182],[149],"67122f7e-3c32-11f0-b911-9e149126039e","index.ts",["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;",[],[155,284],["D",1748484247288],[172],[155],["D",1748484200184],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":24},{"_13":85,"_31":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_123":330,"_331":332,"_333":334,"_335":24,"_336":24,"_337":24,"_338":58,"_339":-5,"_340":-7,"_341":-7,"_342":62,"_343":24,"_344":24,"_345":-5,"_346":24,"_347":24,"_348":24,"_349":-5},"ENV",{"_301":302,"_303":304,"_305":86,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329},"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 · v84