\n Loading...\n

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

\n {/* Header */}\n

setCurrentView('browse')}\n >\n 🌱 Plant Exchange\n

\n \n

\n setCurrentView('browse')}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n currentView === 'browse' \n ? 'bg-green-100 text-green-700' \n : 'text-gray-500 hover:text-gray-700'\n }`}\n >\n Browse Plants\n \n \n {user ? (\n <>\n setCurrentView('my-plants')}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n currentView === 'my-plants' \n ? 'bg-green-100 text-green-700' \n : 'text-gray-500 hover:text-gray-700'\n }`}\n >\n My Plants\n \n setCurrentView('add-plant')}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n currentView === 'add-plant' \n ? 'bg-green-100 text-green-700' \n : 'text-gray-500 hover:text-gray-700'\n }`}\n >\n Add Plant\n \n setCurrentView('messages')}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n currentView === 'messages' \n ? 'bg-green-100 text-green-700' \n : 'text-gray-500 hover:text-gray-700'\n }`}\n >\n Messages\n \n setCurrentView('profile')}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n currentView === 'profile' \n ? 'bg-green-100 text-green-700' \n : 'text-gray-500 hover:text-gray-700'\n }`}\n >\n Profile\n \n \n Logout\n \n \n ) : (\n <>\n setCurrentView('login')}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n currentView === 'login' \n ? 'bg-green-100 text-green-700' \n : 'text-gray-500 hover:text-gray-700'\n }`}\n >\n Login\n \n setCurrentView('register')}\n className={`px-4 py-2 rounded-md text-sm font-medium bg-green-600 text-white hover:bg-green-700 ${\n currentView === 'register' ? 'bg-green-700' : ''\n }`}\n >\n Sign Up\n \n \n )}\n

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

\n {error && (\n

\n {error}\n

\n )}\n\n {/* Login Form */}\n {currentView === 'login' && (\n

Login

\n )}\n\n {/* Register Form */}\n {currentView === 'register' && (\n

Create Account

{\n e.preventDefault();\n const formData = new FormData(e.target as HTMLFormElement);\n handleRegister({\n username: formData.get('username'),\n email: formData.get('email'),\n full_name: formData.get('full_name'),\n location: formData.get('location'),\n bio: formData.get('bio')\n });\n }}>\n

\n \n Username *\n \n \n

\n \n Email *\n \n \n

\n \n Full Name *\n \n \n

\n \n Location\n \n \n

\n \n Bio\n \n \n

\n \n Create Account\n \n \n

\n Already have an account?{' '}\n setCurrentView('login')}\n className=\"text-green-600 hover:text-green-700\"\n >\n Login\n \n

\n )}\n\n {/* Browse Plants */}\n {currentView === 'browse' && (\n

Available Plants

\n \n {/* Category Filter */}\n

\n handleCategoryFilter(\"\")}\n className={`px-4 py-2 rounded-full text-sm font-medium ${\n selectedCategory === \"\" \n ? 'bg-green-600 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n All Plants\n \n {['cutting', 'potted', 'tree'].map(category => (\n handleCategoryFilter(category)}\n className={`px-4 py-2 rounded-full text-sm font-medium category-badge ${\n selectedCategory === category \n ? 'bg-green-600 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n {getCategoryIcon(category)} {category.charAt(0).toUpperCase() + category.slice(1)}\n \n ))}\n

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

🌱

No plants available

Be the first to share a plant with the community!

\n {user && (\n setCurrentView('add-plant')}\n className=\"mt-4 bg-green-600 text-white px-6 py-2 rounded-md hover:bg-green-700\"\n >\n Add Your First Plant\n \n )}\n

\n ) : (\n

\n {plants.map(plant => (\n {\n if (user) {\n setCurrentView('messages');\n // TODO: Open conversation with plant owner\n } else {\n setCurrentView('login');\n }\n }}\n />\n ))}\n

\n )}\n

\n )}\n\n {/* My Plants */}\n {currentView === 'my-plants' && user && (\n

My Plants

\n setCurrentView('add-plant')}\n className=\"bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700\"\n >\n Add New Plant\n \n

\n \n

\n )}\n\n {/* Add Plant */}\n {currentView === 'add-plant' && user && (\n

Add New Plant

\n {\n setCurrentView('my-plants');\n loadPlants(); // Refresh the plants list\n }}\n onCancel={() => setCurrentView('my-plants')}\n />\n

\n )}\n\n {/* Profile */}\n {currentView === 'profile' && user && (\n

Profile

\n \n

\n )}\n\n {/* Messages */}\n {currentView === 'messages' && user && (\n

Messages

\n \n

\n )}\n

\n );\n}\n\n// Component for displaying user's plants\nfunction MyPlantsView({ userId }: { userId: number }) {\n const [plants, setPlants] = useState([]);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n loadUserPlants();\n }, [userId]);\n\n const loadUserPlants = async () => {\n try {\n const response = await fetch(`/api/plants/user/${userId}`);\n const result: ApiResponse = await response.json();\n \n if (result.success) {\n setPlants(result.data.plants || []);\n }\n } catch (error) {\n console.error(\"Failed to load user plants:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n if (loading) {\n return (\n

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

🪴

No plants yet

Start sharing your plants with the community!

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

\n {plants.map(plant => (\n \n ))}\n

\n );\n}",[],[255,262,269],{"_105":276,"_96":277,"_157":278,"_159":263,"_160":142,"_161":279,"_163":119,"_107":280,"_101":32,"_165":183,"_167":281,"_168":22,"_169":-5,"_170":282,"_99":283},"64f25058-3fa6-11f0-9b94-76b3cceeab13","Messages.tsx","64f2510c-3fa6-11f0-9b94-76b3cceeab13",16,["D",1748864433914],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { User, Message, Conversation, ApiResponse } from \"../../shared/types.ts\";\n\ninterface MessagesProps {\n currentUser: User;\n}\n\nexport default function Messages({ currentUser }: MessagesProps) {\n const [conversations, setConversations] = useState([]);\n const [selectedConversation, setSelectedConversation] = useState(null);\n const [messages, setMessages] = useState([]);\n const [newMessage, setNewMessage] = useState('');\n const [loading, setLoading] = useState(true);\n const [sending, setSending] = useState(false);\n const messagesEndRef = useRef(null);\n\n useEffect(() => {\n loadConversations();\n }, []);\n\n useEffect(() => {\n if (selectedConversation) {\n loadMessages(selectedConversation.other_user.id);\n }\n }, [selectedConversation]);\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n const loadConversations = async () => {\n try {\n const response = await fetch('/api/messages/conversations');\n const result: ApiResponse = await response.json();\n \n if (result.success) {\n setConversations(result.data.conversations || []);\n }\n } catch (error) {\n console.error('Failed to load conversations:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const loadMessages = async (otherUserId: number) => {\n try {\n const response = await fetch(`/api/messages/with/${otherUserId}`);\n const result: ApiResponse = await response.json();\n \n if (result.success) {\n setMessages(result.data.messages || []);\n // Mark messages as read\n await fetch(`/api/messages/mark-read/${otherUserId}`, { method: 'POST' });\n // Refresh conversations to update unread counts\n loadConversations();\n }\n } catch (error) {\n console.error('Failed to load messages:', error);\n }\n };\n\n const sendMessage = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!newMessage.trim() || !selectedConversation || sending) {\n return;\n }\n \n setSending(true);\n \n try {\n const response = await fetch('/api/messages', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n recipient_id: selectedConversation.other_user.id,\n content: newMessage.trim()\n })\n });\n \n const result: ApiResponse = await response.json();\n \n if (result.success) {\n setNewMessage('');\n // Reload messages to show the new one\n loadMessages(selectedConversation.other_user.id);\n // Refresh conversations\n loadConversations();\n }\n } catch (error) {\n console.error('Failed to send message:', error);\n } finally {\n setSending(false);\n }\n };\n\n const formatMessageTime = (dateString: string) => {\n const date = new Date(dateString);\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 < 24 * 7) {\n return date.toLocaleDateString([], { weekday: 'short', hour: '2-digit', minute: '2-digit' });\n } else {\n return date.toLocaleDateString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });\n }\n };\n\n if (loading) {\n return (\n

\n Loading conversations...\n

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

\n {/* Conversations List */}\n

Conversations

\n \n

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

💬

No conversations yet

Start by contacting plant owners!

\n ) : (\n

\n {conversations.map((conversation) => (\n setSelectedConversation(conversation)}\n className={`w-full p-4 text-left hover:bg-gray-50 transition-colors ${\n selectedConversation?.other_user.id === conversation.other_user.id \n ? 'bg-green-50 border-r-2 border-green-500' \n : ''\n }`}\n >\n

\n {conversation.other_user.full_name}\n

\n {conversation.unread_count > 0 && (\n \n {conversation.unread_count}\n \n )}\n

\n @{conversation.other_user.username}\n

\n {conversation.other_user.location && (\n

\n 📍 {conversation.other_user.location}\n

\n )}\n

\n \n {conversation.last_message && (\n

\n {conversation.last_message.content}\n

\n {formatMessageTime(conversation.last_message.created_at)}\n

\n )}\n \n ))}\n

\n )}\n

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

\n {selectedConversation ? (\n <>\n {/* Chat Header */}\n

\n {selectedConversation.other_user.full_name}\n

\n @{selectedConversation.other_user.username}\n {selectedConversation.other_user.location && (\n 📍 {selectedConversation.other_user.location}\n )}\n

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

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

👋

Start the conversation!

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

{message.content}

\n {formatMessageTime(message.created_at)}\n

\n ))\n )}\n

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

\n \n ) : (\n

💬

Select a conversation

Choose a conversation from the left to start messaging

\n )}\n

\n \n );\n}",[],[255,262,277],{"_105":285,"_96":286,"_157":287,"_159":263,"_160":142,"_161":288,"_163":119,"_107":289,"_101":32,"_165":183,"_167":290,"_168":22,"_169":-5,"_170":291,"_99":292},"1f9adee4-3fa6-11f0-913f-76b3cceeab13","PlantCard.tsx","1f9adfa2-3fa6-11f0-913f-76b3cceeab13",13,["D",1748864317578],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Plant, User, ApiResponse } from \"../../shared/types.ts\";\n\ninterface PlantCardProps {\n plant: Plant;\n currentUser: User | null;\n showOwnerActions?: boolean;\n onContactOwner?: (plant: Plant) => void;\n onUpdate?: () => void;\n}\n\nexport default function PlantCard({ \n plant, \n currentUser, \n showOwnerActions = false, \n onContactOwner,\n onUpdate \n}: PlantCardProps) {\n const [showDetails, setShowDetails] = useState(false);\n const [updating, setUpdating] = useState(false);\n\n const getCategoryIcon = (category: string) => {\n switch (category) {\n case 'cutting': return '🌱';\n case 'potted': return '🪴';\n case 'tree': return '🌳';\n default: return '🌿';\n }\n };\n\n const getAvailabilityColor = (availability: string) => {\n switch (availability) {\n case 'available': return 'bg-green-100 text-green-800';\n case 'pending': return 'bg-yellow-100 text-yellow-800';\n case 'exchanged': return 'bg-gray-100 text-gray-800';\n default: return 'bg-gray-100 text-gray-800';\n }\n };\n\n const handleStatusUpdate = async (newStatus: string) => {\n if (!currentUser || !showOwnerActions) return;\n \n setUpdating(true);\n try {\n const response = await fetch(`/api/plants/${plant.id}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ availability: newStatus })\n });\n \n const result: ApiResponse = await response.json();\n \n if (result.success && onUpdate) {\n onUpdate();\n }\n } catch (error) {\n console.error('Failed to update plant status:', error);\n } finally {\n setUpdating(false);\n }\n };\n\n const handleDelete = async () => {\n if (!currentUser || !showOwnerActions) return;\n \n if (!confirm('Are you sure you want to delete this plant listing?')) {\n return;\n }\n \n setUpdating(true);\n try {\n const response = await fetch(`/api/plants/${plant.id}`, {\n method: 'DELETE'\n });\n \n const result: ApiResponse = await response.json();\n \n if (result.success && onUpdate) {\n onUpdate();\n }\n } catch (error) {\n console.error('Failed to delete plant:', error);\n } finally {\n setUpdating(false);\n }\n };\n\n return (\n

\n {/* Plant Image */}\n

\n {plant.image_url ? (\n \n ) : (\n

{getCategoryIcon(plant.category)}

\n )}\n \n {/* Category Badge */}\n

\n \n {getCategoryIcon(plant.category)} {plant.category}\n \n

\n \n {/* Availability Badge */}\n

\n \n {plant.availability}\n \n

\n\n {/* Plant Info */}\n

{plant.title}

\n \n

\n {plant.description}\n

\n \n {/* Owner Info */}\n {plant.user && (\n

\n 👤\n {plant.user.full_name}\n {plant.user.location && (\n <>\n •\n 📍\n {plant.user.location}\n \n )}\n

\n )}\n \n {plant.location && (\n

\n 📍\n {plant.location}\n

\n )}\n\n {/* Action Buttons */}\n

\n {showOwnerActions ? (\n <>\n {/* Owner Actions */}\n

\n handleStatusUpdate(e.target.value)}\n disabled={updating}\n className=\"w-full px-3 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-green-500\"\n >\n \n \n \n \n

\n setShowDetails(!showDetails)}\n className=\"px-3 py-1 text-sm text-gray-600 border border-gray-300 rounded hover:bg-gray-50\"\n >\n {showDetails ? 'Less' : 'More'}\n \n \n {updating ? '...' : 'Delete'}\n \n \n ) : (\n <>\n {/* Visitor Actions */}\n setShowDetails(!showDetails)}\n className=\"flex-1 px-3 py-2 text-sm text-gray-600 border border-gray-300 rounded hover:bg-gray-50\"\n >\n {showDetails ? 'Less Info' : 'More Info'}\n \n {currentUser && plant.availability === 'available' && onContactOwner && (\n onContactOwner(plant)}\n className=\"flex-1 px-3 py-2 text-sm bg-green-600 text-white rounded hover:bg-green-700\"\n >\n Contact Owner\n \n )}\n \n )}\n

\n\n {/* Expanded Details */}\n {showDetails && (\n

\n Full Description:\n

{plant.description}

\n \n

\n Category: {plant.category}\n

\n \n

\n Status: {plant.availability}\n

\n \n {plant.location && (\n

\n Plant Location: {plant.location}\n

\n )}\n \n

\n Listed: {new Date(plant.created_at).toLocaleDateString()}\n

\n \n {plant.updated_at !== plant.created_at && (\n

\n Updated: {new Date(plant.updated_at).toLocaleDateString()}\n

\n )}\n

\n );\n}",[],[255,262,286],{"_105":294,"_96":295,"_157":296,"_159":263,"_160":142,"_161":297,"_163":119,"_107":298,"_101":32,"_165":183,"_167":299,"_168":22,"_169":-5,"_170":300,"_99":301},"369aeeb8-3fa6-11f0-a780-76b3cceeab13","PlantForm.tsx","369aef8a-3fa6-11f0-a780-76b3cceeab13",14,["D",1748864356166],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ApiResponse } from \"../../shared/types.ts\";\n\ninterface PlantFormProps {\n onSuccess: () => void;\n onCancel: () => void;\n}\n\nexport default function PlantForm({ onSuccess, onCancel }: PlantFormProps) {\n const [formData, setFormData] = useState({\n title: '',\n description: '',\n category: 'cutting' as 'cutting' | 'potted' | 'tree',\n location: ''\n });\n const [imageFile, setImageFile] = useState(null);\n const [imagePreview, setImagePreview] = useState('');\n const [submitting, setSubmitting] = useState(false);\n const [error, setError] = useState('');\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({ ...prev, [name]: value }));\n };\n\n const handleImageChange = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) {\n // Check file size (limit to 5MB)\n if (file.size > 5 * 1024 * 1024) {\n setError('Image file must be smaller than 5MB');\n return;\n }\n \n // Check file type\n if (!file.type.startsWith('image/')) {\n setError('Please select an image file');\n return;\n }\n \n setImageFile(file);\n setError('');\n \n // Create preview\n const reader = new FileReader();\n reader.onload = (e) => {\n setImagePreview(e.target?.result as string);\n };\n reader.readAsDataURL(file);\n }\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!formData.title.trim() || !formData.description.trim()) {\n setError('Please fill in all required fields');\n return;\n }\n \n setSubmitting(true);\n setError('');\n \n try {\n const submitData = new FormData();\n submitData.append('title', formData.title.trim());\n submitData.append('description', formData.description.trim());\n submitData.append('category', formData.category);\n if (formData.location.trim()) {\n submitData.append('location', formData.location.trim());\n }\n if (imageFile) {\n submitData.append('image', imageFile);\n }\n \n const response = await fetch('/api/plants', {\n method: 'POST',\n body: submitData\n });\n \n const result: ApiResponse = await response.json();\n \n if (result.success) {\n onSuccess();\n } else {\n setError(result.error || 'Failed to create plant listing');\n }\n } catch (error) {\n console.error('Submit error:', error);\n setError('Failed to create plant listing');\n } finally {\n setSubmitting(false);\n }\n };\n\n const getCategoryIcon = (category: string) => {\n switch (category) {\n case 'cutting': return '🌱';\n case 'potted': return '🪴';\n case 'tree': return '🌳';\n default: return '🌿';\n }\n };\n\n return (\n

\n {error && (\n

\n {error}\n

\n )}\n\n {/* Title */}\n

\n \n Plant Title *\n \n \n

\n\n {/* Category */}\n

\n \n Category *\n \n \n \n \n \n \n

\n Choose the type of plant you're offering\n

\n\n {/* Description */}\n

\n \n Description *\n \n \n

\n\n {/* Location */}\n

\n \n Plant Location\n \n \n

\n Where is the plant currently located? (optional)\n

\n\n {/* Image Upload */}\n

\n \n Plant Photo\n \n

\n {imagePreview ? (\n

\n \n {\n setImageFile(null);\n setImagePreview('');\n }}\n className=\"mt-2 text-sm text-red-600 hover:text-red-700\"\n >\n Remove image\n \n

\n ) : (\n

📷

\n )}\n \n

\n \n {imagePreview ? 'Change photo' : 'Upload a photo'}\n \n \n {!imagePreview &&

or drag and drop

}\n

\n {!imagePreview && (\n

PNG, JPG, GIF up to 5MB

\n )}\n

\n\n {/* Action Buttons */}\n

\n \n Cancel\n \n \n {submitting ? (\n \n

\n Creating...\n \n ) : (\n 'Create Plant Listing'\n )}\n \n

\n );\n}",[],[255,262,295],{"_105":303,"_96":304,"_157":305,"_159":263,"_160":142,"_161":306,"_163":119,"_107":307,"_101":32,"_165":183,"_167":308,"_168":22,"_169":-5,"_170":309,"_99":310},"4c2df18a-3fa6-11f0-8959-76b3cceeab13","Profile.tsx","4c2df266-3fa6-11f0-8959-76b3cceeab13",15,["D",1748864392362],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { User, ApiResponse } from \"../../shared/types.ts\";\n\ninterface ProfileProps {\n user: User;\n onUpdate: (user: User) => void;\n}\n\nexport default function Profile({ user, onUpdate }: ProfileProps) {\n const [editing, setEditing] = useState(false);\n const [formData, setFormData] = useState({\n full_name: user.full_name,\n email: user.email,\n location: user.location || '',\n bio: user.bio || ''\n });\n const [saving, setSaving] = useState(false);\n const [error, setError] = useState('');\n const [success, setSuccess] = useState('');\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({ ...prev, [name]: value }));\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!formData.full_name.trim() || !formData.email.trim()) {\n setError('Name and email are required');\n return;\n }\n \n setSaving(true);\n setError('');\n setSuccess('');\n \n try {\n const response = await fetch(`/api/auth/profile`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n full_name: formData.full_name.trim(),\n email: formData.email.trim(),\n location: formData.location.trim() || null,\n bio: formData.bio.trim() || null\n })\n });\n \n const result: ApiResponse = await response.json();\n \n if (result.success && result.data?.user) {\n onUpdate(result.data.user);\n setEditing(false);\n setSuccess('Profile updated successfully!');\n setTimeout(() => setSuccess(''), 3000);\n } else {\n setError(result.error || 'Failed to update profile');\n }\n } catch (error) {\n console.error('Profile update error:', error);\n setError('Failed to update profile');\n } finally {\n setSaving(false);\n }\n };\n\n const handleCancel = () => {\n setFormData({\n full_name: user.full_name,\n email: user.email,\n location: user.location || '',\n bio: user.bio || ''\n });\n setEditing(false);\n setError('');\n };\n\n return (\n

\n {success && (\n

\n {success}\n

\n )}\n\n {error && (\n

\n {error}\n

\n )}\n\n {editing ? (\n

Edit Profile

\n\n {/* Username (read-only) */}\n

\n \n Username\n \n \n

Username cannot be changed

\n\n {/* Full Name */}\n

\n \n Full Name *\n \n \n

\n\n {/* Email */}\n

\n \n Email *\n \n \n

\n\n {/* Location */}\n

\n \n Location\n \n \n

\n\n {/* Bio */}\n

\n \n Bio\n \n \n

\n\n {/* Action Buttons */}\n

\n \n Cancel\n \n \n {saving ? (\n \n

\n Saving...\n \n ) : (\n 'Save Changes'\n )}\n \n

\n ) : (\n

Profile Information

\n setEditing(true)}\n className=\"px-4 py-2 text-sm font-medium text-green-600 border border-green-600 rounded-md hover:bg-green-50\"\n >\n Edit Profile\n \n

\n\n

\n {/* Profile Header */}\n

\n 👤\n

{user.full_name}

@{user.username}

\n {user.location && (\n

\n 📍\n {user.location}\n

\n )}\n

\n\n {/* Contact Information */}\n

Contact Information

\n Email:\n {user.email}\n

\n Location:\n {user.location || 'Not specified'}\n

\n\n {/* Bio */}\n

About

\n {user.bio || (\n \n No bio provided. Click \"Edit Profile\" to add information about your gardening interests.\n \n )}\n

\n\n {/* Account Details */}\n

Account Details

\n Joined:\n \n {new Date(user.created_at).toLocaleDateString()}\n \n

\n Username:\n @{user.username}\n

\n )}\n

\n );\n}",[],[255,262,304],[255,262],{"_105":313,"_96":314,"_157":315,"_159":256,"_160":142,"_161":257,"_163":119,"_107":316,"_101":32,"_165":317,"_167":318,"_168":22,"_169":-5,"_170":319,"_99":320},"def86cf8-3fa5-11f0-a15f-76b3cceeab13","index.html","def86da2-3fa5-11f0-a15f-76b3cceeab13",["D",1748864209138],"file","\n\n\n \n \n Plant Exchange - Share, Donate & Exchange Plants\n \n \n \n\n\n

\n \n\n",[],[255,314],{"_105":322,"_96":323,"_157":324,"_159":256,"_160":142,"_161":325,"_163":119,"_107":326,"_101":32,"_165":183,"_167":327,"_168":22,"_169":-5,"_170":328,"_99":329},"e2b77c94-3fa5-11f0-a1f7-76b3cceeab13","index.tsx","e2b77d70-3fa5-11f0-a1f7-76b3cceeab13",11,["D",1748864215425],"/** @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();",[],[255,323],[255],{"_105":332,"_96":333,"_157":334,"_159":-5,"_160":142,"_161":210,"_163":119,"_107":335,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":336,"_99":345},"85be8096-3fa5-11f0-82f4-76b3cceeab13","shared","815437b6-14ff-40a6-b433-ce5e94630a0c",["D",1748864059429],[337],{"_105":338,"_96":339,"_157":340,"_159":334,"_160":142,"_161":210,"_163":119,"_107":341,"_101":32,"_165":183,"_167":342,"_168":22,"_169":-5,"_170":343,"_99":344},"85be79e8-3fa5-11f0-82f4-76b3cceeab13","types.ts","85be7a92-3fa5-11f0-82f4-76b3cceeab13",["D",1748864059429],"// Shared types for the Plant Exchange App\n\nexport interface User {\n id: number;\n username: string;\n email: string;\n full_name: string;\n location?: string;\n bio?: string;\n created_at: string;\n}\n\nexport interface Plant {\n id: number;\n user_id: number;\n title: string;\n description: string;\n category: 'cutting' | 'potted' | 'tree';\n availability: 'available' | 'pending' | 'exchanged';\n image_url?: string;\n location?: string;\n created_at: string;\n updated_at: string;\n // Joined data\n user?: User;\n}\n\nexport interface Message {\n id: number;\n sender_id: number;\n recipient_id: number;\n plant_id?: number;\n content: string;\n created_at: string;\n read: boolean;\n // Joined data\n sender?: User;\n recipient?: User;\n plant?: Plant;\n}\n\nexport interface Conversation {\n other_user: User;\n last_message: Message;\n unread_count: number;\n}\n\nexport interface CreateUserRequest {\n username: string;\n email: string;\n full_name: string;\n location?: string;\n bio?: string;\n}\n\nexport interface CreatePlantRequest {\n title: string;\n description: string;\n category: 'cutting' | 'potted' | 'tree';\n location?: string;\n image?: File;\n}\n\nexport interface CreateMessageRequest {\n recipient_id: number;\n plant_id?: number;\n content: string;\n}\n\nexport interface LoginRequest {\n username: string;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}",[],[333,339],[333],{"_105":347,"_96":348,"_157":349,"_159":-5,"_160":142,"_161":247,"_163":119,"_107":350,"_101":32,"_165":317,"_167":351,"_168":22,"_169":-5,"_170":352,"_99":353},"8056dafe-3fa5-11f0-af4a-76b3cceeab13","README.md","8056db9e-3fa5-11f0-af4a-76b3cceeab13",["D",1748864050374],"# Plant Exchange App\n\nA community platform for sharing, donating, and exchanging plant cuttings, potted plants, and trees.\n\n## Features\n\n- **User Profiles**: Create and manage personal profiles with contact information\n- **Plant Listings**: Upload photos and details of plants available for donation/exchange\n- **Messaging System**: Direct communication between users for coordinating exchanges\n- **Plant Categories**: Support for cuttings, potted plants, and trees\n- **Search & Browse**: Find plants by type, location, or availability\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ ├── auth.ts # User authentication\n│ │ ├── plants.ts # Plant CRUD operations\n│ │ ├── messages.ts # Messaging system\n│ │ └── static.ts # Static file serving\n│ └── index.ts # Main Hono app entry point\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── Profile.tsx # User profile management\n│ │ ├── PlantCard.tsx # Plant listing display\n│ │ ├── PlantForm.tsx # Add/edit plant form\n│ │ └── Messages.tsx # Messaging interface\n│ ├── index.html # Main HTML template\n│ └── index.tsx # Frontend entry point\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Tech Stack\n\n- **Backend**: Hono (TypeScript API framework)\n- **Database**: SQLite with Val Town's sqlite service\n- **Frontend**: React with TypeScript\n- **Styling**: TailwindCSS\n- **Storage**: Val Town blob storage for images\n- **Authentication**: Simple session-based auth\n\n## Getting Started\n\nThe app is automatically deployed on Val Town. Visit the HTTP endpoint to start using the application.",[],[348],{"_105":355,"_96":100,"_157":356,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":357,"_101":210,"_165":248,"_167":358,"_168":22,"_169":-5,"_170":359,"_99":360},"fd00a538-3fa7-11f0-9653-76b3cceeab13","cbc5439e-3fa6-11f0-9153-76b3cceeab13",["D",1748865118514],"monstera",[],[100],"files",[154,172,178,187,197,204,214,223,232,242,253,260,267,275,284,293,302,312,321,331,337,346,354],"counts",{"_365":32,"_366":247,"_367":32,"_368":369,"_372":373},"pulls","branches","forks","envVars",{"_370":32,"_371":32},"count","emptyCount","connections",{"_370":32,"_374":32},"unfilledCount","contents",[],{"_105":355,"_160":142,"_157":356,"_96":100,"_167":358,"_165":248,"_101":210,"_159":-5,"_107":378,"_161":102,"_169":-5,"_99":379},["D",1748865118514],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":388,"_152":393,"_361":463,"_317":464,"_375":467,"_468":-5,"_469":-5,"_470":-5,"_471":-5,"_472":473,"_368":-5},{"_105":106,"_96":97,"_107":389,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":390,"_136":391,"_139":392,"_151":22},["D",1748863791639],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},[394,424,451,457,460],{"_105":155,"_96":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":119,"_107":164,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":395,"_99":423},[396,405,420],{"_105":173,"_96":174,"_157":175,"_159":158,"_160":142,"_161":162,"_163":119,"_107":176,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":397,"_99":404},[398,401],{"_105":179,"_96":180,"_157":181,"_159":175,"_160":142,"_161":162,"_163":119,"_107":182,"_101":32,"_165":183,"_167":184,"_168":22,"_169":-5,"_170":399,"_99":400},[],[156,174,180],{"_105":188,"_96":189,"_157":190,"_159":175,"_160":142,"_161":191,"_163":119,"_107":192,"_101":32,"_165":183,"_167":193,"_168":22,"_169":-5,"_170":402,"_99":403},[],[156,174,189],[156,174],{"_105":198,"_96":199,"_157":200,"_159":158,"_160":142,"_161":201,"_163":119,"_107":202,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":406,"_99":419},[407,410,413,416],{"_105":205,"_96":206,"_157":207,"_159":200,"_160":142,"_161":208,"_163":119,"_107":209,"_101":210,"_165":183,"_167":211,"_168":22,"_169":-5,"_170":408,"_99":409},[],[156,199,206],{"_105":215,"_96":216,"_157":217,"_159":200,"_160":142,"_161":218,"_163":119,"_107":219,"_101":32,"_165":183,"_167":220,"_168":22,"_169":-5,"_170":411,"_99":412},[],[156,199,216],{"_105":224,"_96":225,"_157":226,"_159":200,"_160":142,"_161":227,"_163":119,"_107":228,"_101":32,"_165":183,"_167":229,"_168":22,"_169":-5,"_170":414,"_99":415},[],[156,199,225],{"_105":233,"_96":234,"_157":235,"_159":200,"_160":142,"_161":236,"_163":119,"_107":237,"_101":32,"_165":183,"_167":238,"_168":22,"_169":-5,"_170":417,"_99":418},[],[156,199,234],[156,199],{"_105":243,"_96":244,"_157":117,"_159":158,"_160":142,"_161":245,"_163":119,"_107":246,"_101":247,"_165":248,"_167":249,"_168":22,"_169":-5,"_170":421,"_99":422},[],[156,244],[156],{"_105":254,"_96":255,"_157":256,"_159":-5,"_160":142,"_161":257,"_163":119,"_107":258,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":425,"_99":450},[426,444,447],{"_105":261,"_96":262,"_157":263,"_159":256,"_160":142,"_161":264,"_163":119,"_107":265,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":427,"_99":443},[428,431,434,437,440],{"_105":268,"_96":269,"_157":270,"_159":263,"_160":142,"_161":264,"_163":119,"_107":271,"_101":32,"_165":183,"_167":272,"_168":22,"_169":-5,"_170":429,"_99":430},[],[255,262,269],{"_105":276,"_96":277,"_157":278,"_159":263,"_160":142,"_161":279,"_163":119,"_107":280,"_101":32,"_165":183,"_167":281,"_168":22,"_169":-5,"_170":432,"_99":433},[],[255,262,277],{"_105":285,"_96":286,"_157":287,"_159":263,"_160":142,"_161":288,"_163":119,"_107":289,"_101":32,"_165":183,"_167":290,"_168":22,"_169":-5,"_170":435,"_99":436},[],[255,262,286],{"_105":294,"_96":295,"_157":296,"_159":263,"_160":142,"_161":297,"_163":119,"_107":298,"_101":32,"_165":183,"_167":299,"_168":22,"_169":-5,"_170":438,"_99":439},[],[255,262,295],{"_105":303,"_96":304,"_157":305,"_159":263,"_160":142,"_161":306,"_163":119,"_107":307,"_101":32,"_165":183,"_167":308,"_168":22,"_169":-5,"_170":441,"_99":442},[],[255,262,304],[255,262],{"_105":313,"_96":314,"_157":315,"_159":256,"_160":142,"_161":257,"_163":119,"_107":316,"_101":32,"_165":317,"_167":318,"_168":22,"_169":-5,"_170":445,"_99":446},[],[255,314],{"_105":322,"_96":323,"_157":324,"_159":256,"_160":142,"_161":325,"_163":119,"_107":326,"_101":32,"_165":183,"_167":327,"_168":22,"_169":-5,"_170":448,"_99":449},[],[255,323],[255],{"_105":332,"_96":333,"_157":334,"_159":-5,"_160":142,"_161":210,"_163":119,"_107":335,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":452,"_99":456},[453],{"_105":338,"_96":339,"_157":340,"_159":334,"_160":142,"_161":210,"_163":119,"_107":341,"_101":32,"_165":183,"_167":342,"_168":22,"_169":-5,"_170":454,"_99":455},[],[333,339],[333],{"_105":347,"_96":348,"_157":349,"_159":-5,"_160":142,"_161":247,"_163":119,"_107":350,"_101":32,"_165":317,"_167":351,"_168":22,"_169":-5,"_170":458,"_99":459},[],[348],{"_105":355,"_96":100,"_157":356,"_159":-5,"_160":142,"_161":102,"_163":22,"_107":357,"_101":210,"_165":248,"_167":358,"_168":22,"_169":-5,"_170":461,"_99":462},[],[100],[394,396,398,401,405,407,410,413,416,420,424,426,428,431,434,437,440,444,447,451,453,457,460],{"_105":355,"_160":142,"_157":356,"_96":100,"_167":358,"_165":248,"_101":210,"_159":-5,"_107":465,"_161":102,"_169":-5,"_99":466},["D",1748865118514],[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

catalina906

Plantswap