\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}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/Remna/R/code/frontend/components/ChatRoom.tsx","extension","actionData","errors"]