\n RChat\n

\n Loading...\n

\n );\n }\n\n if (state.currentView === 'auth') {\n return ;\n }\n\n if (state.currentView === 'settings') {\n return (\n setState(prev => ({ ...prev, currentView: 'chat' }))}\n onLogout={handleLogout}\n />\n );\n }\n\n return (\n setState(prev => ({ ...prev, currentView: 'settings' }))}\n onLogout={handleLogout}\n />\n );\n}",[],[260,266,272],{"_103":279,"_95":280,"_155":281,"_157":267,"_158":137,"_159":136,"_160":161,"_105":282,"_100":32,"_163":181,"_165":283,"_166":22,"_167":-5,"_168":284,"_98":285},"9bae20be-3fbe-11f0-9133-76b3cceeab13","AuthScreen.tsx","3808a732-5da9-4169-bbb6-8337d1fc2c64",["D",1748874833623],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0';\nimport type { User } from '../../shared/types.ts';\n\ninterface AuthScreenProps {\n onLogin: (user: User, token: string) => void;\n}\n\nexport default function AuthScreen({ onLogin }: AuthScreenProps) {\n const [isLogin, setIsLogin] = useState(true);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState('');\n const [formData, setFormData] = useState({\n username: '',\n email: '',\n password: '',\n phone: ''\n });\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n setError('');\n\n try {\n const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register';\n const payload = isLogin \n ? { email: formData.email, password: formData.password }\n : formData;\n\n const response = await fetch(endpoint, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(payload)\n });\n\n const data = await response.json();\n\n if (data.success) {\n onLogin(data.user, data.token);\n } else {\n setError(data.error || 'Authentication failed');\n }\n } catch (error) {\n setError('Network error. Please try again.');\n console.error('Auth error:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent) => {\n setFormData(prev => ({\n ...prev,\n [e.target.name]: e.target.value\n }));\n };\n\n return (\n

\n {/* App Logo and Title */}\n

\n RChat\n

\n Connect, Chat, Collaborate\n

\n\n {/* Auth Form */}\n

\n {isLogin ? 'Welcome Back' : 'Create Account'}\n

\n {isLogin ? 'Sign in to your account' : 'Join the RChat community'}\n

\n\n {error && (\n

{error}

\n )}\n\n

\n {!isLogin && (\n

\n \n Username\n \n \n

\n )}\n\n

\n \n Email\n \n \n

\n\n

\n \n Password\n \n \n

\n\n {!isLogin && (\n

\n \n Phone (Optional)\n \n \n

\n )}\n\n \n {isLoading ? (\n

\n {isLogin ? 'Signing In...' : 'Creating Account...'}\n

\n ) : (\n isLogin ? 'Sign In' : 'Create Account'\n )}\n \n \n\n

\n {\n setIsLogin(!isLogin);\n setError('');\n setFormData({ username: '', email: '', password: '', phone: '' });\n }}\n className=\"text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium\"\n >\n {isLogin ? \"Don't have an account? Sign up\" : \"Already have an account? Sign in\"}\n \n

\n\n {/* Features Preview */}\n

\n 💬\n Real-time Chat\n

\n 👥\n Group Chats\n

\n 🏆\n Challenge Room\n

\n ⚙️\n Customizable\n

\n );\n}",[],[260,266,280],{"_103":287,"_95":288,"_155":289,"_157":267,"_158":137,"_159":136,"_160":161,"_105":290,"_100":32,"_163":181,"_165":291,"_166":22,"_167":-5,"_168":292,"_98":293},"9bae2776-3fbe-11f0-9133-76b3cceeab13","ChatList.tsx","05ff5330-ee52-4cc7-9f4d-4dfb6cc3ecfb",["D",1748874833623],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport type { Chat, Contact } from '../../shared/types.ts';\n\ninterface ChatListProps {\n chats: Chat[];\n contacts: Contact[];\n isLoading: boolean;\n onChatSelect: (chat: Chat) => void;\n onNewChat: (contactId: string) => void;\n}\n\nexport default function ChatList({ chats, contacts, isLoading, onChatSelect, onNewChat }: ChatListProps) {\n const formatTime = (timestamp: string) => {\n const date = new Date(timestamp);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n \n if (diffInHours < 24) {\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n } else if (diffInHours < 168) { // 7 days\n return date.toLocaleDateString([], { weekday: 'short' });\n } else {\n return date.toLocaleDateString([], { month: 'short', day: 'numeric' });\n }\n };\n\n const getChatName = (chat: Chat) => {\n if (chat.type === 'group') {\n return chat.name || 'Group Chat';\n }\n \n // For individual chats, find the other participant\n const otherParticipant = contacts.find(contact => \n chat.participants.includes(contact.contactId)\n );\n \n return otherParticipant?.contactName || otherParticipant?.contact.username || 'Unknown User';\n };\n\n const getChatAvatar = (chat: Chat) => {\n if (chat.type === 'group') {\n return chat.avatar || '👥';\n }\n \n const otherParticipant = contacts.find(contact => \n chat.participants.includes(contact.contactId)\n );\n \n return otherParticipant?.contact.avatar || '👤';\n };\n\n if (isLoading) {\n return (\n

Loading chats...

\n );\n }\n\n if (chats.length === 0) {\n return (\n

💬

\n No chats yet\n

\n Start a conversation with your contacts or create a group chat\n

\n \n {contacts.length > 0 && (\n

\n Start chatting with:\n

\n {contacts.slice(0, 3).map((contact) => (\n onNewChat(contact.contactId)}\n className=\"w-full flex items-center p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\"\n >\n

\n \n {contact.contact.avatar || '👤'}\n \n

\n {contact.contactName || contact.contact.username}\n

\n {contact.contact.email}\n

\n \n \n ))}\n

\n )}\n

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

\n {chats.map((chat) => (\n onChatSelect(chat)}\n className=\"flex items-center p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors\"\n >\n {/* Avatar */}\n

\n \n {getChatAvatar(chat)}\n \n

\n \n {/* Chat Info */}\n

\n {getChatName(chat)}\n

\n {chat.lastMessage && (\n \n {formatTime(chat.lastMessage.timestamp)}\n \n )}\n

\n \n

\n {chat.lastMessage ? (\n <>\n {chat.lastMessage.sender.username}: {chat.lastMessage.content}\n \n ) : (\n No messages yet\n )}\n

\n \n {chat.unreadCount > 0 && (\n \n {chat.unreadCount > 99 ? '99+' : chat.unreadCount}\n \n )}\n

\n ))}\n

\n \n );\n}",[],[260,266,288],{"_103":295,"_95":296,"_155":297,"_157":267,"_158":137,"_159":136,"_160":161,"_105":298,"_100":32,"_163":181,"_165":299,"_166":22,"_167":-5,"_168":300,"_98":301},"9bae2cf8-3fbe-11f0-9133-76b3cceeab13","ChatRoom.tsx","2f54915d-e0aa-495f-878d-33b111313d61",["D",1748874833623],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport type { User, ChatRoomPost, ChatRoomReply } from '../../shared/types.ts';\n\ninterface ChatRoomProps {\n user: User;\n token: string;\n onBack: () => void;\n}\n\nexport default function ChatRoom({ user, token, onBack }: ChatRoomProps) {\n const [posts, setPosts] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [showNewPost, setShowNewPost] = useState(false);\n const [selectedPost, setSelectedPost] = useState(null);\n const [filterType, setFilterType] = useState<'all' | 'challenge' | 'help' | 'discussion'>('all');\n\n useEffect(() => {\n loadPosts();\n }, []);\n\n const loadPosts = async () => {\n try {\n const response = await fetch('/api/chatroom/posts', {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setPosts(data.data);\n }\n }\n } catch (error) {\n console.error('Failed to load posts:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const getFilteredPosts = () => {\n if (filterType === 'all') return posts;\n return posts.filter(post => post.type === filterType);\n };\n\n const formatTimeAgo = (timestamp: string) => {\n const now = new Date();\n const postTime = new Date(timestamp);\n const diffInMinutes = Math.floor((now.getTime() - postTime.getTime()) / (1000 * 60));\n \n if (diffInMinutes < 1) return 'Just now';\n if (diffInMinutes < 60) return `${diffInMinutes}m ago`;\n \n const diffInHours = Math.floor(diffInMinutes / 60);\n if (diffInHours < 24) return `${diffInHours}h ago`;\n \n const diffInDays = Math.floor(diffInHours / 24);\n return `${diffInDays}d ago`;\n };\n\n const getPostTypeIcon = (type: string) => {\n switch (type) {\n case 'challenge': return '🏆';\n case 'help': return '🆘';\n case 'discussion': return '💬';\n default: return '📝';\n }\n };\n\n const getPostTypeColor = (type: string) => {\n switch (type) {\n case 'challenge': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';\n case 'help': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';\n case 'discussion': return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';\n default: return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';\n }\n };\n\n if (selectedPost) {\n return (\n setSelectedPost(null)}\n onPostUpdate={loadPosts}\n />\n );\n }\n\n if (showNewPost) {\n return (\n setShowNewPost(false)}\n onPostCreated={() => {\n setShowNewPost(false);\n loadPosts();\n }}\n />\n );\n }\n\n return (\n

\n {/* Header */}\n

\n \n \n \n \n

🏆

\n Chat Room\n

\n Post challenges, seek help, and collaborate\n

\n \n setShowNewPost(true)}\n className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center\"\n >\n \n New Post\n \n

\n\n {/* Filter Tabs */}\n

\n {(['all', 'challenge', 'help', 'discussion'] as const).map((type) => (\n setFilterType(type)}\n className={`flex-1 py-3 px-4 text-sm font-medium capitalize transition-colors ${\n filterType === type\n ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'\n : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'\n }`}\n >\n {type === 'all' ? 'All Posts' : type}\n \n ))}\n

\n\n {/* Posts */}\n

\n {isLoading ? (\n

Loading posts...

\n ) : getFilteredPosts().length === 0 ? (\n

🏆

\n No posts yet\n

\n Be the first to post a challenge, ask for help, or start a discussion!\n

\n setShowNewPost(true)}\n className=\"bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors\"\n >\n Create First Post\n \n

\n ) : (\n

\n {getFilteredPosts().map((post) => (\n setSelectedPost(post)}\n className=\"bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 hover:shadow-md dark:hover:shadow-lg transition-shadow cursor-pointer\"\n >\n

\n {post.user.avatar || '👤'}\n

\n {post.user.username}\n

\n {formatTimeAgo(post.timestamp)}\n

\n \n \n {getPostTypeIcon(post.type)} {post.type}\n \n

\n \n

\n {post.title}\n

\n \n

\n {post.content}\n

\n \n {post.tags.length > 0 && (\n

\n {post.tags.map((tag, index) => (\n \n #{tag}\n \n ))}\n

\n )}\n \n

\n \n \n {post.replies.length} replies\n \n \n \n \n {post.upvotes}\n \n

\n \n Click to view details\n

\n ))}\n

\n )}\n

\n \n );\n}\n\n// New Post Form Component\nfunction NewPostForm({ user, token, onBack, onPostCreated }: {\n user: User;\n token: string;\n onBack: () => void;\n onPostCreated: () => void;\n}) {\n const [formData, setFormData] = useState({\n title: '',\n content: '',\n type: 'discussion' as 'challenge' | 'help' | 'discussion',\n tags: ''\n });\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!formData.title.trim() || !formData.content.trim()) return;\n \n setIsSubmitting(true);\n \n try {\n const tags = formData.tags\n .split(',')\n .map(tag => tag.trim())\n .filter(tag => tag.length > 0);\n \n const response = await fetch('/api/chatroom/posts', {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${token}`,\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n title: formData.title.trim(),\n content: formData.content.trim(),\n type: formData.type,\n tags\n })\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n onPostCreated();\n }\n }\n } catch (error) {\n console.error('Failed to create post:', error);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n

\n {/* Header */}\n

\n \n \n \n \n

\n Create New Post\n

\n\n {/* Form */}\n

\n \n Post Type\n \n

\n {(['challenge', 'help', 'discussion'] as const).map((type) => (\n setFormData(prev => ({ ...prev, type }))}\n className={`p-3 rounded-lg border-2 transition-colors capitalize ${\n formData.type === type\n ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'\n : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'\n }`}\n >\n

\n {type === 'challenge' ? '🏆' : type === 'help' ? '🆘' : '💬'}\n

\n {type}\n \n ))}\n

\n\n

\n \n Title\n \n setFormData(prev => ({ ...prev, title: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white\"\n placeholder=\"Enter a descriptive title...\"\n required\n />\n

\n\n

\n \n Content\n \n setFormData(prev => ({ ...prev, content: e.target.value }))}\n rows={6}\n className=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white\"\n placeholder=\"Describe your challenge, question, or topic in detail...\"\n required\n />\n

\n\n

\n \n Tags (Optional)\n \n setFormData(prev => ({ ...prev, tags: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white\"\n placeholder=\"javascript, react, help, beginner (comma separated)\"\n />\n

\n Add relevant tags to help others find your post\n

\n\n

\n \n Cancel\n \n \n {isSubmitting ? 'Creating...' : 'Create Post'}\n \n

\n );\n}\n\n// Post Detail Component\nfunction PostDetail({ post, user, token, onBack, onPostUpdate }: {\n post: ChatRoomPost;\n user: User;\n token: string;\n onBack: () => void;\n onPostUpdate: () => void;\n}) {\n const [replies, setReplies] = useState(post.replies);\n const [newReply, setNewReply] = useState('');\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const handleReply = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!newReply.trim()) return;\n \n setIsSubmitting(true);\n \n try {\n const response = await fetch(`/api/chatroom/posts/${post.id}/replies`, {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${token}`,\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({ content: newReply.trim() })\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setReplies(prev => [...prev, data.data]);\n setNewReply('');\n onPostUpdate();\n }\n }\n } catch (error) {\n console.error('Failed to create reply:', error);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const formatTimeAgo = (timestamp: string) => {\n const now = new Date();\n const postTime = new Date(timestamp);\n const diffInMinutes = Math.floor((now.getTime() - postTime.getTime()) / (1000 * 60));\n \n if (diffInMinutes < 1) return 'Just now';\n if (diffInMinutes < 60) return `${diffInMinutes}m ago`;\n \n const diffInHours = Math.floor(diffInMinutes / 60);\n if (diffInHours < 24) return `${diffInHours}h ago`;\n \n const diffInDays = Math.floor(diffInHours / 24);\n return `${diffInDays}d ago`;\n };\n\n const getPostTypeIcon = (type: string) => {\n switch (type) {\n case 'challenge': return '🏆';\n case 'help': return '🆘';\n case 'discussion': return '💬';\n default: return '📝';\n }\n };\n\n const getPostTypeColor = (type: string) => {\n switch (type) {\n case 'challenge': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';\n case 'help': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';\n case 'discussion': return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';\n default: return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';\n }\n };\n\n return (\n

\n {/* Header */}\n

\n \n \n \n \n

\n Post Details\n

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

\n {/* Post */}\n

\n {post.user.avatar || '👤'}\n

\n {post.user.username}\n

\n {formatTimeAgo(post.timestamp)}\n

\n \n \n {getPostTypeIcon(post.type)} {post.type}\n \n

\n \n

\n {post.title}\n

\n \n

\n {post.content}\n

\n \n {post.tags.length > 0 && (\n

\n {post.tags.map((tag, index) => (\n \n #{tag}\n \n ))}\n

\n )}\n \n

\n \n \n {post.upvotes} upvotes\n \n \n \n \n {replies.length} replies\n \n

\n\n {/* Replies */}\n

\n Replies ({replies.length})\n

\n \n {replies.map((reply) => (\n

\n {reply.user.avatar || '👤'}\n

\n {reply.user.username}\n

\n {formatTimeAgo(reply.timestamp)}\n

\n {reply.content}\n

\n ))}\n

\n\n {/* Reply Form */}\n

\n \n

\n );\n}",[],[260,266,296],{"_103":303,"_95":304,"_155":305,"_157":267,"_158":137,"_159":136,"_160":161,"_105":306,"_100":32,"_163":181,"_165":307,"_166":22,"_167":-5,"_168":308,"_98":309},"9bae5200-3fbe-11f0-9133-76b3cceeab13","ChatTabs.tsx","67d2d772-2c1e-4949-a485-ccbd2d1d6349",["D",1748874833623],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport type { User, UserSettings, Chat, Contact } from '../../shared/types.ts';\nimport ChatList from './ChatList.tsx';\nimport ChatWindow from './ChatWindow.tsx';\nimport GroupChat from './GroupChat.tsx';\nimport ChatRoom from './ChatRoom.tsx';\nimport ContactManager from './ContactManager.tsx';\n\ninterface ChatTabsProps {\n user: User;\n token: string;\n settings: UserSettings | null;\n onOpenSettings: () => void;\n onLogout: () => void;\n}\n\ntype TabType = 'all' | 'people' | 'groups' | 'community';\n\nexport default function ChatTabs({ user, token, settings, onOpenSettings, onLogout }: ChatTabsProps) {\n const [activeTab, setActiveTab] = useState('all');\n const [selectedChat, setSelectedChat] = useState(null);\n const [showChatRoom, setShowChatRoom] = useState(false);\n const [showContactManager, setShowContactManager] = useState(false);\n const [chats, setChats] = useState([]);\n const [contacts, setContacts] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n\n // Load chats and contacts\n useEffect(() => {\n loadChats();\n loadContacts();\n }, [token]);\n\n const loadChats = async () => {\n try {\n const response = await fetch('/api/chat', {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setChats(data.data);\n }\n }\n } catch (error) {\n console.error('Failed to load chats:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const loadContacts = async () => {\n try {\n const response = await fetch('/api/contacts', {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setContacts(data.data);\n }\n }\n } catch (error) {\n console.error('Failed to load contacts:', error);\n }\n };\n\n const getFilteredChats = () => {\n switch (activeTab) {\n case 'people':\n return chats.filter(chat => chat.type === 'individual');\n case 'groups':\n return chats.filter(chat => chat.type === 'group');\n case 'community':\n return []; // Community tab shows chat room\n default:\n return chats;\n }\n };\n\n const handleChatSelect = (chat: Chat) => {\n setSelectedChat(chat);\n setShowChatRoom(false);\n };\n\n const handleNewChat = async (contactId: string) => {\n try {\n const response = await fetch('/api/chat/individual', {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${token}`,\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({ contactId })\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setChats(prev => [data.data, ...prev.filter(c => c.id !== data.data.id)]);\n setSelectedChat(data.data);\n setShowContactManager(false);\n }\n }\n } catch (error) {\n console.error('Failed to create chat:', error);\n }\n };\n\n const handleNewGroup = async (name: string, memberIds: string[]) => {\n try {\n const response = await fetch('/api/groups', {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${token}`,\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({ name, memberIds })\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setChats(prev => [data.data, ...prev]);\n setSelectedChat(data.data);\n }\n }\n } catch (error) {\n console.error('Failed to create group:', error);\n }\n };\n\n if (showContactManager) {\n return (\n setShowContactManager(false)}\n onContactAdded={loadContacts}\n onStartChat={handleNewChat}\n onCreateGroup={handleNewGroup}\n />\n );\n }\n\n if (showChatRoom) {\n return (\n setShowChatRoom(false)}\n />\n );\n }\n\n if (selectedChat) {\n return selectedChat.type === 'group' ? (\n setSelectedChat(null)}\n />\n ) : (\n setSelectedChat(null)}\n />\n );\n }\n\n return (\n

\n {/* Header */}\n

\n RChat\n

\n Welcome, {user.username}\n

\n \n

\n setShowContactManager(true)}\n className=\"p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors\"\n title=\"Manage Contacts\"\n >\n \n \n \n \n \n \n

\n\n {/* Tabs */}\n

\n {(['all', 'people', 'groups', 'community'] as TabType[]).map((tab) => (\n {\n setActiveTab(tab);\n if (tab === 'community') {\n setShowChatRoom(true);\n }\n }}\n className={`flex-1 py-3 px-4 text-sm font-medium capitalize transition-colors ${\n activeTab === tab\n ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'\n : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'\n }`}\n >\n {tab}\n \n ))}\n

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

\n {activeTab === 'community' ? (\n

🏆

\n Community Chat Room\n

\n Post challenges, seek help, and collaborate with the community\n

\n setShowChatRoom(true)}\n className=\"bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors\"\n >\n Enter Chat Room\n \n

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

\n\n {/* Chat Room Icon (Bottom Left) */}\n

\n setShowChatRoom(true)}\n className=\"bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg chatroom-pulse transition-colors\"\n title=\"Chat Room - Post Challenges & Get Help\"\n >\n \n \n

\n );\n}",[],[260,266,304],{"_103":311,"_95":312,"_155":313,"_157":267,"_158":137,"_159":136,"_160":161,"_105":314,"_100":32,"_163":181,"_165":315,"_166":22,"_167":-5,"_168":316,"_98":317},"9bae5fca-3fbe-11f0-9133-76b3cceeab13","ChatWindow.tsx","12389a2a-ca7f-429f-b377-d15a44e6cd01",["D",1748874833623],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from 'https://esm.sh/react@18.2.0';\nimport type { Chat, User, Message } from '../../shared/types.ts';\n\ninterface ChatWindowProps {\n chat: Chat;\n user: User;\n token: string;\n onBack: () => void;\n}\n\nexport default function ChatWindow({ chat, user, token, onBack }: ChatWindowProps) {\n const [messages, setMessages] = useState([]);\n const [newMessage, setNewMessage] = useState('');\n const [isLoading, setIsLoading] = useState(true);\n const [isSending, setIsSending] = useState(false);\n const [replyTo, setReplyTo] = useState(null);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n useEffect(() => {\n loadMessages();\n }, [chat.id]);\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const loadMessages = async () => {\n try {\n const response = await fetch(`/api/chat/${chat.id}/messages`, {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setMessages(data.data);\n }\n }\n } catch (error) {\n console.error('Failed to load messages:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n };\n\n const sendMessage = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!newMessage.trim() || isSending) return;\n \n setIsSending(true);\n \n try {\n const response = await fetch(`/api/chat/${chat.id}/messages`, {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${token}`,\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n content: newMessage.trim(),\n replyTo: replyTo?.id\n })\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setMessages(prev => [...prev, data.data]);\n setNewMessage('');\n setReplyTo(null);\n }\n }\n } catch (error) {\n console.error('Failed to send message:', error);\n } finally {\n setIsSending(false);\n }\n };\n\n const formatTime = (timestamp: string) => {\n return new Date(timestamp).toLocaleTimeString([], { \n hour: '2-digit', \n minute: '2-digit' \n });\n };\n\n const formatDate = (timestamp: string) => {\n const date = new Date(timestamp);\n const today = new Date();\n const yesterday = new Date(today);\n yesterday.setDate(yesterday.getDate() - 1);\n \n if (date.toDateString() === today.toDateString()) {\n return 'Today';\n } else if (date.toDateString() === yesterday.toDateString()) {\n return 'Yesterday';\n } else {\n return date.toLocaleDateString();\n }\n };\n\n const shouldShowDateSeparator = (currentMessage: Message, previousMessage?: Message) => {\n if (!previousMessage) return true;\n \n const currentDate = new Date(currentMessage.timestamp).toDateString();\n const previousDate = new Date(previousMessage.timestamp).toDateString();\n \n return currentDate !== previousDate;\n };\n\n const getOtherParticipant = () => {\n const otherParticipantId = chat.participants.find(id => id !== user.id);\n return { id: otherParticipantId, username: 'Contact' }; // Simplified for demo\n };\n\n const otherParticipant = getOtherParticipant();\n\n if (isLoading) {\n return (\n

Loading messages...

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

\n {/* Header */}\n

\n \n \n \n \n

\n 👤\n

\n \n

\n {otherParticipant.username}\n

\n Online\n

\n \n \n

\n\n {/* Reply Banner */}\n {replyTo && (\n

\n Replying to {replyTo.sender.username}\n

\n {replyTo.content}\n

\n setReplyTo(null)}\n className=\"ml-2 p-1 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200\"\n >\n \n \n

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

\n {messages.length === 0 ? (\n

💬

\n No messages yet. Start the conversation!\n

\n ) : (\n messages.map((message, index) => (\n

\n {/* Date Separator */}\n {shouldShowDateSeparator(message, messages[index - 1]) && (\n

\n {formatDate(message.timestamp)}\n

\n )}\n \n {/* Message */}\n \n setReplyTo(message)}\n >\n {/* Reply Reference */}\n {message.replyTo && (\n

Replying to message

\n )}\n \n

{message.content}

\n {formatTime(message.timestamp)}\n

\n ))\n )}\n

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

\n \n );\n}",[],[260,266,312],{"_103":319,"_95":320,"_155":321,"_157":267,"_158":137,"_159":136,"_160":161,"_105":322,"_100":32,"_163":181,"_165":323,"_166":22,"_167":-5,"_168":324,"_98":325},"9bae6d80-3fbe-11f0-9133-76b3cceeab13","GroupChat.tsx","9729804b-f566-434a-bf5e-1aeff7facf8f",["D",1748874833623],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from 'https://esm.sh/react@18.2.0';\nimport type { Chat, User, Message } from '../../shared/types.ts';\n\ninterface GroupChatProps {\n chat: Chat;\n user: User;\n token: string;\n onBack: () => void;\n}\n\nexport default function GroupChat({ chat, user, token, onBack }: GroupChatProps) {\n const [messages, setMessages] = useState([]);\n const [newMessage, setNewMessage] = useState('');\n const [isLoading, setIsLoading] = useState(true);\n const [isSending, setIsSending] = useState(false);\n const [showGroupInfo, setShowGroupInfo] = useState(false);\n const [groupDetails, setGroupDetails] = useState(null);\n const [replyTo, setReplyTo] = useState(null);\n const messagesEndRef = useRef(null);\n\n useEffect(() => {\n loadMessages();\n loadGroupDetails();\n }, [chat.id]);\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const loadMessages = async () => {\n try {\n const response = await fetch(`/api/chat/${chat.id}/messages`, {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setMessages(data.data);\n }\n }\n } catch (error) {\n console.error('Failed to load messages:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const loadGroupDetails = async () => {\n try {\n const response = await fetch(`/api/groups/${chat.id}`, {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setGroupDetails(data.data);\n }\n }\n } catch (error) {\n console.error('Failed to load group details:', error);\n }\n };\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n };\n\n const sendMessage = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!newMessage.trim() || isSending) return;\n \n setIsSending(true);\n \n try {\n const response = await fetch(`/api/chat/${chat.id}/messages`, {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${token}`,\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n content: newMessage.trim(),\n replyTo: replyTo?.id\n })\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n setMessages(prev => [...prev, data.data]);\n setNewMessage('');\n setReplyTo(null);\n }\n }\n } catch (error) {\n console.error('Failed to send message:', error);\n } finally {\n setIsSending(false);\n }\n };\n\n const formatTime = (timestamp: string) => {\n return new Date(timestamp).toLocaleTimeString([], { \n hour: '2-digit', \n minute: '2-digit' \n });\n };\n\n const formatDate = (timestamp: string) => {\n const date = new Date(timestamp);\n const today = new Date();\n const yesterday = new Date(today);\n yesterday.setDate(yesterday.getDate() - 1);\n \n if (date.toDateString() === today.toDateString()) {\n return 'Today';\n } else if (date.toDateString() === yesterday.toDateString()) {\n return 'Yesterday';\n } else {\n return date.toLocaleDateString();\n }\n };\n\n const shouldShowDateSeparator = (currentMessage: Message, previousMessage?: Message) => {\n if (!previousMessage) return true;\n \n const currentDate = new Date(currentMessage.timestamp).toDateString();\n const previousDate = new Date(previousMessage.timestamp).toDateString();\n \n return currentDate !== previousDate;\n };\n\n const shouldShowSenderName = (currentMessage: Message, previousMessage?: Message) => {\n if (!previousMessage) return true;\n if (currentMessage.senderId === user.id) return false;\n \n return currentMessage.senderId !== previousMessage.senderId;\n };\n\n if (isLoading) {\n return (\n

Loading group chat...

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

\n {/* Header */}\n

\n \n \n \n \n

\n {chat.avatar || '👥'}\n

\n \n

\n {chat.name || 'Group Chat'}\n

\n {chat.participants.length} members\n

\n \n \n

\n\n {/* Group Info Panel */}\n {showGroupInfo && groupDetails && (\n

Group Members

\n {groupDetails.participantDetails?.map((participant: User) => (\n

\n {participant.avatar || '👤'}\n

\n {participant.username}\n {participant.id === user.id && ' (You)'}\n

\n {participant.status}\n

\n ))}\n

\n )}\n\n {/* Reply Banner */}\n {replyTo && (\n

\n Replying to {replyTo.sender.username}\n

\n {replyTo.content}\n

\n setReplyTo(null)}\n className=\"ml-2 p-1 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200\"\n >\n \n \n

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

\n {messages.length === 0 ? (\n

👥

\n Welcome to the group! Start the conversation.\n

\n ) : (\n messages.map((message, index) => (\n

\n {/* Date Separator */}\n {shouldShowDateSeparator(message, messages[index - 1]) && (\n

\n {formatDate(message.timestamp)}\n

\n )}\n \n {/* Message */}\n \n

\n {/* Sender Name (for others' messages) */}\n {message.senderId !== user.id && shouldShowSenderName(message, messages[index - 1]) && (\n

\n {message.sender.username}\n

\n )}\n \n setReplyTo(message)}\n >\n {/* Reply Reference */}\n {message.replyTo && (\n

Replying to message

\n )}\n \n

{message.content}

\n {formatTime(message.timestamp)}\n

\n ))\n )}\n

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

\n \n );\n}",[],[260,266,320],[260,266],{"_103":328,"_95":329,"_155":330,"_157":261,"_158":137,"_159":136,"_160":161,"_105":331,"_100":32,"_163":332,"_165":333,"_166":22,"_167":-5,"_168":334,"_98":335},"9bae8270-3fbe-11f0-9133-76b3cceeab13","index.html","b109d7b8-5b03-4dbb-8e83-d99d470ecb85",["D",1748874833623],"file","\n\n\n \n \n RChat - Real-Time Chat Application\n \n \n R\" type=\"image/svg+xml\">\n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n \n\n",[],[260,329],{"_103":337,"_95":338,"_155":339,"_157":261,"_158":137,"_159":136,"_160":161,"_105":340,"_100":32,"_163":181,"_165":341,"_166":22,"_167":-5,"_168":342,"_98":343},"9bae87b6-3fbe-11f0-9133-76b3cceeab13","index.tsx","99262465-d82b-4c79-8d53-d6266f38abe5",["D",1748874833623],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport App from './components/App.tsx';\n\nexport default function Index() {\n return ;\n}",[],[260,338],[260],{"_103":346,"_95":347,"_155":348,"_157":-5,"_158":137,"_159":136,"_160":161,"_105":349,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":350,"_98":359},"9bae97a6-3fbe-11f0-9133-76b3cceeab13","shared","7af4a5da-760b-4a9d-a22b-ad26284c3f06",["D",1748874833623],[351],{"_103":352,"_95":353,"_155":354,"_157":348,"_158":137,"_159":136,"_160":161,"_105":355,"_100":32,"_163":181,"_165":356,"_166":22,"_167":-5,"_168":357,"_98":358},"9bae8f22-3fbe-11f0-9133-76b3cceeab13","types.ts","57b4518a-04ea-40fb-ae53-ff73dbc33151",["D",1748874833623],"// Shared TypeScript types for RChat application\n\nexport interface User {\n id: string;\n username: string;\n email: string;\n phone?: string;\n avatar?: string;\n status: 'online' | 'offline' | 'away';\n lastSeen: string;\n createdAt: string;\n}\n\nexport interface Contact {\n id: string;\n userId: string;\n contactId: string;\n contactName?: string; // Custom name for contact\n addedAt: string;\n contact: User;\n}\n\nexport interface Chat {\n id: string;\n type: 'individual' | 'group';\n participants: string[]; // User IDs\n name?: string; // For groups\n avatar?: string; // For groups\n lastMessage?: Message;\n unreadCount: number;\n createdAt: string;\n updatedAt: string;\n}\n\nexport interface Message {\n id: string;\n chatId: string;\n senderId: string;\n content: string;\n type: 'text' | 'image' | 'file' | 'system';\n replyTo?: string; // Message ID being replied to\n timestamp: string;\n edited?: boolean;\n editedAt?: string;\n sender: User;\n}\n\nexport interface Group {\n id: string;\n name: string;\n description?: string;\n avatar?: string;\n adminIds: string[];\n memberIds: string[];\n createdBy: string;\n createdAt: string;\n updatedAt: string;\n}\n\nexport interface ChatRoomPost {\n id: string;\n userId: string;\n title: string;\n content: string;\n type: 'challenge' | 'help' | 'discussion';\n tags: string[];\n timestamp: string;\n edited?: boolean;\n editedAt?: string;\n user: User;\n replies: ChatRoomReply[];\n upvotes: number;\n downvotes: number;\n}\n\nexport interface ChatRoomReply {\n id: string;\n postId: string;\n userId: string;\n content: string;\n timestamp: string;\n edited?: boolean;\n editedAt?: string;\n user: User;\n upvotes: number;\n downvotes: number;\n}\n\nexport interface UserSettings {\n id: string;\n userId: string;\n theme: 'light' | 'dark' | 'auto';\n notifications: {\n messages: boolean;\n groups: boolean;\n chatroom: boolean;\n sound: boolean;\n };\n privacy: {\n lastSeen: 'everyone' | 'contacts' | 'nobody';\n profilePhoto: 'everyone' | 'contacts' | 'nobody';\n status: 'everyone' | 'contacts' | 'nobody';\n };\n chatSettings: {\n enterToSend: boolean;\n fontSize: 'small' | 'medium' | 'large';\n messagePreview: boolean;\n };\n}\n\nexport interface WebSocketMessage {\n type: 'message' | 'typing' | 'status' | 'notification';\n data: any;\n timestamp: string;\n}\n\nexport interface AuthResponse {\n success: boolean;\n user?: User;\n token?: string;\n error?: string;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n message?: string;\n}",[],[347,353],[347],{"_103":361,"_95":362,"_155":363,"_157":-5,"_158":137,"_159":136,"_160":161,"_105":364,"_100":32,"_163":332,"_165":365,"_166":22,"_167":-5,"_168":366,"_98":367},"9bae9a58-3fbe-11f0-9133-76b3cceeab13","README.md","074f10af-c782-4cbb-a4a5-04acb43ae0a9",["D",1748874833623],"# RChat - Real-Time Chat Application\n\nA comprehensive real-time chat application inspired by WhatsApp with the following features:\n\n## Features\n\n### Core Chat Functionality\n- **Tabs**: All, People, Groups, Community\n- **Individual Messaging**: Send messages to contacts\n- **Group Chat**: Create, join, and participate in group conversations\n- **Contact Management**: Add new contacts, manage group members\n\n### Special Features\n- **Chat Room**: Bottom-left icon for posting challenges and seeking help\n- **Real-time Updates**: Live message delivery and notifications\n- **Customizable Settings**: User preferences and app customization\n\n### UI/UX\n- **Custom Icon**: Slanted letter \"R\" as app icon\n- **User-friendly Interface**: Clean, intuitive design\n- **Responsive Design**: Works on all devices\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono server\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database operations\n│ └── routes/\n│ ├── auth.ts # Authentication routes\n│ ├── chat.ts # Chat operations\n│ ├── contacts.ts # Contact management\n│ └── groups.ts # Group management\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React app entry point\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── ChatTabs.tsx # Tab navigation\n│ │ ├── ChatList.tsx # Chat list view\n│ │ ├── ChatWindow.tsx # Individual chat window\n│ │ ├── GroupChat.tsx # Group chat component\n│ │ ├── ChatRoom.tsx # Challenge chat room\n│ │ └── Settings.tsx # User settings\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Technology Stack\n\n- **Backend**: Hono (TypeScript API framework)\n- **Frontend**: React with TypeScript\n- **Database**: SQLite\n- **Real-time**: WebSocket connections\n- **Styling**: TailwindCSS\n- **Storage**: Val Town Blob storage for media\n\n## Getting Started\n\nThe app will be available at the HTTP endpoint once deployed. Users can:\n\n1. Register/Login with their credentials\n2. Add contacts by username or phone\n3. Start individual chats or create groups\n4. Access the chat room for community challenges\n5. Customize settings according to preferences\n\n## API Endpoints\n\n- `GET /` - Serve the main application\n- `POST /api/auth/login` - User authentication\n- `POST /api/auth/register` - User registration\n- `GET /api/contacts` - Get user contacts\n- `POST /api/contacts` - Add new contact\n- `GET /api/chats` - Get user chats\n- `POST /api/chats/send` - Send message\n- `GET /api/groups` - Get user groups\n- `POST /api/groups` - Create new group\n- `GET /api/chatroom` - Get chat room messages\n- `POST /api/chatroom` - Post to chat room\n- `WS /ws` - WebSocket for real-time updates",[],[362],"files",[152,170,176,185,194,200,208,216,224,232,240,249,258,264,270,278,286,294,302,310,318,327,336,345,351,360],"counts",{"_372":32,"_373":136,"_374":32,"_375":32},"pulls","branches","forks","envVars","contents",[378,381,384,387,390,393,396],{"_103":271,"_95":272,"_155":273,"_157":267,"_158":137,"_159":136,"_160":161,"_105":379,"_100":32,"_163":181,"_165":275,"_166":22,"_167":-5,"_98":380},["D",1748874833623],[260,266,272],{"_103":279,"_95":280,"_155":281,"_157":267,"_158":137,"_159":136,"_160":161,"_105":382,"_100":32,"_163":181,"_165":283,"_166":22,"_167":-5,"_98":383},["D",1748874833623],[260,266,280],{"_103":287,"_95":288,"_155":289,"_157":267,"_158":137,"_159":136,"_160":161,"_105":385,"_100":32,"_163":181,"_165":291,"_166":22,"_167":-5,"_98":386},["D",1748874833623],[260,266,288],{"_103":295,"_95":296,"_155":297,"_157":267,"_158":137,"_159":136,"_160":161,"_105":388,"_100":32,"_163":181,"_165":299,"_166":22,"_167":-5,"_98":389},["D",1748874833623],[260,266,296],{"_103":303,"_95":304,"_155":305,"_157":267,"_158":137,"_159":136,"_160":161,"_105":391,"_100":32,"_163":181,"_165":307,"_166":22,"_167":-5,"_98":392},["D",1748874833623],[260,266,304],{"_103":311,"_95":312,"_155":313,"_157":267,"_158":137,"_159":136,"_160":161,"_105":394,"_100":32,"_163":181,"_165":315,"_166":22,"_167":-5,"_98":395},["D",1748874833623],[260,266,312],{"_103":319,"_95":320,"_155":321,"_157":267,"_158":137,"_159":136,"_160":161,"_105":397,"_100":32,"_163":181,"_165":323,"_166":22,"_167":-5,"_98":398},["D",1748874833623],[260,266,320],{"_103":265,"_95":266,"_155":267,"_157":261,"_158":137,"_159":136,"_160":161,"_105":400,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":401},["D",1748874833623],[260,266],"upstreamProject",{"_103":145,"_95":404,"_111":405,"_112":-5,"_109":110,"_23":406},"Remnachat","This is my trial application",{"_93":94,"_129":130},"upstreamBranch",{"_103":140,"_105":409,"_410":411,"_95":43,"_138":145,"_100":412,"_139":-5,"_141":-5,"_413":414,"_107":-5,"_149":22,"_109":110,"_148":94,"_16":118,"_147":404},["D",1748872945452],"updatedAt",["D",1748875965096],22,"lockfileKey","1749028858155-esm.town_v_Remna_Remnachat@22-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":421,"_150":426,"_368":505,"_332":506,"_376":508,"_523":524,"_527":161,"_528":-5,"_529":32,"_530":531,"_532":533},{"_103":104,"_95":96,"_105":422,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":423,"_131":424,"_134":425,"_149":22},["D",1748874833623],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":118,"_147":96,"_148":94},[427,463,496,502],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":137,"_159":136,"_160":161,"_105":162,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":428,"_98":462},[429,438,459],{"_103":171,"_95":172,"_155":173,"_157":156,"_158":137,"_159":136,"_160":161,"_105":174,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":430,"_98":437},[431,434],{"_103":177,"_95":178,"_155":179,"_157":173,"_158":137,"_159":136,"_160":161,"_105":180,"_100":32,"_163":181,"_165":182,"_166":22,"_167":-5,"_168":432,"_98":433},[],[154,172,178],{"_103":186,"_95":187,"_155":188,"_157":173,"_158":137,"_159":136,"_160":161,"_105":189,"_100":32,"_163":181,"_165":190,"_166":22,"_167":-5,"_168":435,"_98":436},[],[154,172,187],[154,172],{"_103":195,"_95":196,"_155":197,"_157":156,"_158":137,"_159":136,"_160":161,"_105":198,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":439,"_98":458},[440,443,446,449,452,455],{"_103":201,"_95":202,"_155":203,"_157":197,"_158":137,"_159":136,"_160":161,"_105":204,"_100":32,"_163":181,"_165":205,"_166":22,"_167":-5,"_168":441,"_98":442},[],[154,196,202],{"_103":209,"_95":210,"_155":211,"_157":197,"_158":137,"_159":136,"_160":161,"_105":212,"_100":32,"_163":181,"_165":213,"_166":22,"_167":-5,"_168":444,"_98":445},[],[154,196,210],{"_103":217,"_95":218,"_155":219,"_157":197,"_158":137,"_159":136,"_160":161,"_105":220,"_100":32,"_163":181,"_165":221,"_166":22,"_167":-5,"_168":447,"_98":448},[],[154,196,218],{"_103":225,"_95":226,"_155":227,"_157":197,"_158":137,"_159":136,"_160":161,"_105":228,"_100":32,"_163":181,"_165":229,"_166":22,"_167":-5,"_168":450,"_98":451},[],[154,196,226],{"_103":233,"_95":234,"_155":235,"_157":197,"_158":137,"_159":136,"_160":161,"_105":236,"_100":32,"_163":181,"_165":237,"_166":22,"_167":-5,"_168":453,"_98":454},[],[154,196,234],{"_103":241,"_95":242,"_155":243,"_157":197,"_158":137,"_159":136,"_160":161,"_105":244,"_100":32,"_163":181,"_165":245,"_166":22,"_167":-5,"_168":456,"_98":457},[],[154,196,242],[154,196],{"_103":250,"_95":251,"_155":252,"_157":156,"_158":137,"_159":136,"_160":161,"_105":253,"_100":32,"_163":181,"_165":254,"_166":22,"_167":-5,"_168":460,"_98":461},[],[154,251],[154],{"_103":259,"_95":260,"_155":261,"_157":-5,"_158":137,"_159":136,"_160":161,"_105":262,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":464,"_98":495},[465,489,492],{"_103":265,"_95":266,"_155":267,"_157":261,"_158":137,"_159":136,"_160":161,"_105":268,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":466,"_98":488},[467,470,473,476,479,482,485],{"_103":271,"_95":272,"_155":273,"_157":267,"_158":137,"_159":136,"_160":161,"_105":274,"_100":32,"_163":181,"_165":275,"_166":22,"_167":-5,"_168":468,"_98":469},[],[260,266,272],{"_103":279,"_95":280,"_155":281,"_157":267,"_158":137,"_159":136,"_160":161,"_105":282,"_100":32,"_163":181,"_165":283,"_166":22,"_167":-5,"_168":471,"_98":472},[],[260,266,280],{"_103":287,"_95":288,"_155":289,"_157":267,"_158":137,"_159":136,"_160":161,"_105":290,"_100":32,"_163":181,"_165":291,"_166":22,"_167":-5,"_168":474,"_98":475},[],[260,266,288],{"_103":295,"_95":296,"_155":297,"_157":267,"_158":137,"_159":136,"_160":161,"_105":298,"_100":32,"_163":181,"_165":299,"_166":22,"_167":-5,"_168":477,"_98":478},[],[260,266,296],{"_103":303,"_95":304,"_155":305,"_157":267,"_158":137,"_159":136,"_160":161,"_105":306,"_100":32,"_163":181,"_165":307,"_166":22,"_167":-5,"_168":480,"_98":481},[],[260,266,304],{"_103":311,"_95":312,"_155":313,"_157":267,"_158":137,"_159":136,"_160":161,"_105":314,"_100":32,"_163":181,"_165":315,"_166":22,"_167":-5,"_168":483,"_98":484},[],[260,266,312],{"_103":319,"_95":320,"_155":321,"_157":267,"_158":137,"_159":136,"_160":161,"_105":322,"_100":32,"_163":181,"_165":323,"_166":22,"_167":-5,"_168":486,"_98":487},[],[260,266,320],[260,266],{"_103":328,"_95":329,"_155":330,"_157":261,"_158":137,"_159":136,"_160":161,"_105":331,"_100":32,"_163":332,"_165":333,"_166":22,"_167":-5,"_168":490,"_98":491},[],[260,329],{"_103":337,"_95":338,"_155":339,"_157":261,"_158":137,"_159":136,"_160":161,"_105":340,"_100":32,"_163":181,"_165":341,"_166":22,"_167":-5,"_168":493,"_98":494},[],[260,338],[260],{"_103":346,"_95":347,"_155":348,"_157":-5,"_158":137,"_159":136,"_160":161,"_105":349,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":497,"_98":501},[498],{"_103":352,"_95":353,"_155":354,"_157":348,"_158":137,"_159":136,"_160":161,"_105":355,"_100":32,"_163":181,"_165":356,"_166":22,"_167":-5,"_168":499,"_98":500},[],[347,353],[347],{"_103":361,"_95":362,"_155":363,"_157":-5,"_158":137,"_159":136,"_160":161,"_105":364,"_100":32,"_163":332,"_165":365,"_166":22,"_167":-5,"_168":503,"_98":504},[],[362],[427,429,431,434,438,440,443,446,449,452,455,459,463,465,467,470,473,476,479,482,485,489,492,496,498,502],{"_103":265,"_95":266,"_155":267,"_157":261,"_158":137,"_159":136,"_160":161,"_105":400,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":507},[260,266],[509,511,513,515,517,519,521],{"_103":271,"_95":272,"_155":273,"_157":267,"_158":137,"_159":136,"_160":161,"_105":379,"_100":32,"_163":181,"_165":275,"_166":22,"_167":-5,"_98":510},[260,266,272],{"_103":279,"_95":280,"_155":281,"_157":267,"_158":137,"_159":136,"_160":161,"_105":382,"_100":32,"_163":181,"_165":283,"_166":22,"_167":-5,"_98":512},[260,266,280],{"_103":287,"_95":288,"_155":289,"_157":267,"_158":137,"_159":136,"_160":161,"_105":385,"_100":32,"_163":181,"_165":291,"_166":22,"_167":-5,"_98":514},[260,266,288],{"_103":295,"_95":296,"_155":297,"_157":267,"_158":137,"_159":136,"_160":161,"_105":388,"_100":32,"_163":181,"_165":299,"_166":22,"_167":-5,"_98":516},[260,266,296],{"_103":303,"_95":304,"_155":305,"_157":267,"_158":137,"_159":136,"_160":161,"_105":391,"_100":32,"_163":181,"_165":307,"_166":22,"_167":-5,"_98":518},[260,266,304],{"_103":311,"_95":312,"_155":313,"_157":267,"_158":137,"_159":136,"_160":161,"_105":394,"_100":32,"_163":181,"_165":315,"_166":22,"_167":-5,"_98":520},[260,266,312],{"_103":319,"_95":320,"_155":321,"_157":267,"_158":137,"_159":136,"_160":161,"_105":397,"_100":32,"_163":181,"_165":323,"_166":22,"_167":-5,"_98":522},[260,266,320],"upstream",{"_103":140,"_105":525,"_410":526,"_95":43,"_138":145,"_100":412,"_139":-5,"_141":-5,"_413":414,"_107":-5,"_149":22,"_109":110,"_148":94,"_16":118,"_147":404},["D",1748872945452],["D",1748875965096],"showCompareCallout","pull","ahead","behind",2,"templates",[534,551],{"_103":535,"_95":536,"_105":537,"_107":-5,"_108":22,"_109":110,"_111":538,"_112":539,"_14":540,"_114":541,"_115":161,"_116":542,"_117":543,"_16":544,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":545,"_131":548,"_134":549,"_149":22},"8e7382ae-d835-11ef-bbbf-e6cdfca9ef9f","markdownBlogStarter",["D",1737491000655],"Starter template for a markdown blog","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/44a31e5c-3e8a-48a8-d067-5785c0b08200/square512","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","a4a9ad14-d835-11ef-8351-e6cdfca9ef9f",167,11,"e81e7335-6d4c-4764-a902-d0962bbfa9f7",{"_93":546,"_129":547},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_93":546,"_133":547},{"_103":550,"_95":43,"_100":542,"_138":535,"_139":-5,"_141":-5},"8e73c264-d835-11ef-bbbf-e6cdfca9ef9f",{"_103":552,"_95":553,"_105":554,"_107":-5,"_108":22,"_109":110,"_111":555,"_112":-5,"_14":556,"_114":557,"_115":161,"_116":558,"_117":559,"_16":560,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":561,"_131":564,"_134":565,"_149":22},"96102714-f528-11ef-aa68-569c3dd06744","reactHonoStarter",["D",1740674013689],"Starter template with client-side React & Hono server","c9143560-63b6-444f-8f9f-e2647fabe09f","a9b2b20a-f528-11ef-9e98-569c3dd06744",39,14,"c606f87f-4d7e-48c8-9c39-ef5ab94aec49",{"_93":562,"_129":563},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ",{"_93":562,"_133":563},{"_103":566,"_95":43,"_100":567,"_138":552,"_139":-5,"_141":-5},"961078ea-f528-11ef-aa68-569c3dd06744",72,"actionData","errors"]