Loki

\n \n {user && groups.length > 0 && (\n {\n const group = groups.find(g => g.id === e.target.value);\n if (group) setCurrentGroup(group);\n }}\n className=\"px-3 py-1.5 border rounded-lg text-sm\"\n >\n {groups.map(g => (\n \n ))}\n \n )}\n

\n \n

\n {user ? (\n <>\n {currentGroup && onOpenSettings && (\n \n ⚙ Settings\n \n )}\n

\n {user.avatar_url && (\n $\"\"$ \n )}\n {user.name || user.email}\n

\n \n Log out\n \n \n ) : (\n \n Sign in with Google\n \n )}\n

\n );\n}\n\nfunction ViewSwitcher({ view, setView }: { view: string; setView: (v: string) => void }) {\n const views = [\n { id: \"table\", label: \"Table\", icon: \"≡\" },\n { id: \"kanban\", label: \"Kanban\", icon: \"▤\" },\n { id: \"map\", label: \"Map\", icon: \"◎\" },\n ];\n\n return (\n

\n {views.map(v => (\n setView(v.id)}\n className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${\n view === v.id\n ? \"bg-white text-gray-900 shadow-sm\"\n : \"text-gray-600 hover:text-gray-900\"\n }`}\n >\n {v.icon}\n {v.label}\n \n ))}\n

\n );\n}\n\nfunction Filters({ filters, setFilters }: { \n filters: ListingsFilterParams; \n setFilters: (f: ListingsFilterParams) => void;\n}) {\n return (\n

\n Min Price\n setFilters({ ...filters, min_price: e.target.value ? parseInt(e.target.value) : undefined, page: 1 })}\n placeholder=\"$0\"\n className=\"px-3 py-2 border rounded-lg w-28 text-sm\"\n />\n

\n \n

\n Max Price\n setFilters({ ...filters, max_price: e.target.value ? parseInt(e.target.value) : undefined, page: 1 })}\n placeholder=\"$10000\"\n className=\"px-3 py-2 border rounded-lg w-28 text-sm\"\n />\n

\n \n

\n Beds\n setFilters({ ...filters, min_beds: e.target.value ? parseInt(e.target.value) : undefined, page: 1 })}\n className=\"px-3 py-2 border rounded-lg text-sm\"\n >\n \n \n \n \n \n \n

\n \n

\n Status\n setFilters({ ...filters, status: e.target.value as ListingStatus || undefined, page: 1 })}\n className=\"px-3 py-2 border rounded-lg text-sm\"\n >\n \n \n \n \n \n \n \n \n

\n \n

\n Sort By\n setFilters({ ...filters, sort_by: e.target.value as ListingsFilterParams[\"sort_by\"] })}\n className=\"px-3 py-2 border rounded-lg text-sm\"\n >\n \n \n \n \n \n

\n \n

\n \n setFilters({ ...filters, is_liked: e.target.checked ? true : undefined, page: 1 })}\n className=\"rounded\"\n />\n Liked only\n \n

\n );\n}\n\nfunction Pagination({ \n page, \n totalPages, \n onPageChange \n}: { \n page: number; \n totalPages: number; \n onPageChange: (page: number) => void;\n}) {\n if (totalPages <= 1) return null;\n\n return (\n

\n onPageChange(page - 1)}\n disabled={page <= 1}\n className=\"px-3 py-2 border rounded-lg text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n Previous\n \n \n \n Page {page} of {totalPages}\n \n \n onPageChange(page + 1)}\n disabled={page >= totalPages}\n className=\"px-3 py-2 border rounded-lg text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n Next\n \n

\n );\n}\n\n// Loading skeleton component\nfunction ListingCardSkeleton() {\n return (\n

\n );\n}\n\nfunction TableRowSkeleton() {\n return (\n \n

\n \n );\n}\n\nfunction ListingCard({ listing, onUpdate }: { listing: ListingWithDetails; onUpdate: () => void }) {\n const { currentGroup } = useAuth();\n const [isUpdating, setIsUpdating] = useState(false);\n const [optimisticStatus, setOptimisticStatus] = useState(null);\n const [optimisticLiked, setOptimisticLiked] = useState(null);\n\n const updateInteraction = async (updates: { status?: ListingStatus; is_liked?: boolean }) => {\n if (!currentGroup) return;\n \n // Optimistic update\n if (updates.status !== undefined) setOptimisticStatus(updates.status);\n if (updates.is_liked !== undefined) setOptimisticLiked(updates.is_liked);\n \n setIsUpdating(true);\n try {\n await fetch(`/api/listings/${listing.id}/interaction`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ group_id: currentGroup.id, ...updates }),\n });\n onUpdate();\n } catch (error) {\n console.error(\"Error updating interaction:\", error);\n // Revert optimistic update on error\n setOptimisticStatus(null);\n setOptimisticLiked(null);\n } finally {\n setIsUpdating(false);\n setOptimisticStatus(null);\n setOptimisticLiked(null);\n }\n };\n\n const status = optimisticStatus ?? listing.interaction?.status ?? \"new\";\n const isLiked = optimisticLiked ?? listing.interaction?.is_liked ?? false;\n\n return (\n

\n {listing.address_original}\n

\n {\n e.stopPropagation();\n updateInteraction({ is_liked: !isLiked });\n }}\n disabled={isUpdating}\n className={`text-xl transition-colors ${isLiked ? \"text-red-500\" : \"text-gray-300\"} hover:text-red-500`}\n >\n ♥\n \n

\n \n

\n {listing.price && (\n ${listing.price.toLocaleString()}/mo\n )}\n {listing.beds !== null && {listing.beds} bed}\n {listing.baths !== null && {listing.baths} bath}\n

\n \n {listing.rent_per_bedroom && (\n

\n ${listing.rent_per_bedroom.toLocaleString()}/bedroom\n

\n )}\n \n

\n {listing.sources.map(source => (\n e.stopPropagation()}\n className={`text-xs px-2 py-1 rounded transition-colors ${\n source.platform === \"zillow\" \n ? \"bg-blue-100 text-blue-700 hover:bg-blue-200\" \n : \"bg-purple-100 text-purple-700 hover:bg-purple-200\"\n }`}\n >\n {source.platform}\n \n ))}\n

\n \n {\n e.stopPropagation();\n updateInteraction({ status: e.target.value as ListingStatus });\n }}\n onClick={(e) => e.stopPropagation()}\n disabled={isUpdating}\n className=\"w-full px-3 py-2 border rounded text-sm focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n \n \n

\n );\n}\n\n// Placeholder views - will be expanded in Phase 4.2-4.3\nfunction TableView({ listings, onUpdate }: { listings: ListingWithDetails[]; onUpdate: () => void }) {\n const { currentGroup } = useAuth();\n const [selectedListing, setSelectedListing] = useState(null);\n\n const updateInteraction = async (listingId: string, updates: { status?: ListingStatus; is_liked?: boolean }) => {\n if (!currentGroup) return;\n \n try {\n await fetch(`/api/listings/${listingId}/interaction`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ group_id: currentGroup.id, ...updates }),\n });\n onUpdate();\n } catch (error) {\n console.error(\"Error updating interaction:\", error);\n }\n };\n\n return (\n <>\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {listings.map(listing => {\n const status = listing.interaction?.status || \"new\";\n const isLiked = listing.interaction?.is_liked || false;\n \n return (\n setSelectedListing(listing)}\n >\n \n \n \n \n \n \n \n \n \n );\n })}\n \n

Like	Address	Price	Beds	Baths	$/Bed	Status	Sources
e.stopPropagation()}>\n updateInteraction(listing.id, { is_liked: !isLiked })}\n className={`text-xl ${isLiked ? \"text-red-500\" : \"text-gray-300\"} hover:text-red-500`}\n >\n ♥\n \n	{listing.address_original}	\n {listing.price ? `$${listing.price.toLocaleString()}` : \"-\"}\n	{listing.beds ?? \"-\"}	{listing.baths ?? \"-\"}	\n {listing.rent_per_bedroom ? `$${listing.rent_per_bedroom.toLocaleString()}` : \"-\"}\n	e.stopPropagation()}>\n updateInteraction(listing.id, { status: e.target.value as ListingStatus })}\n className=\"px-2 py-1 border rounded text-sm\"\n >\n \n \n \n \n \n \n \n	e.stopPropagation()}>\n \n {listing.sources.map(source => (\n \n {source.platform}\n \n ))}\n \n

\n \n {listings.length === 0 && (\n

\n No listings found matching your filters.\n

\n )}\n

\n {columns.map(({ status, listings: columnListings }) => (\n

\n {status.charAt(0).toUpperCase() + status.slice(1)} ({columnListings.length})\n

\n {columnListings.map(listing => (\n

setSelectedListing(listing)} className=\"cursor-pointer\">\n \n

\n ))}\n

\n\n {selectedListing && currentGroup && (\n setSelectedListing(null)}\n onUpdate={() => {\n onUpdate();\n setSelectedListing(null);\n }}\n />\n )}\n \n );\n}\n\nfunction MapView({ listings, onUpdate }: { listings: ListingWithDetails[]; onUpdate: () => void }) {\n const { currentGroup } = useAuth();\n const mapRef = React.useRef(null);\n const mapInstance = React.useRef(null);\n const markersRef = React.useRef>(new Map());\n const [selectedListing, setSelectedListing] = useState(null);\n\n useEffect(() => {\n if (!mapRef.current || mapInstance.current) return;\n\n // Initialize map centered on San Francisco\n const L = (window as any).L;\n const map = L.map(mapRef.current).setView([37.7749, -122.4194], 12);\n\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: '© OpenStreetMap contributors',\n }).addTo(map);\n\n mapInstance.current = map;\n\n return () => {\n map.remove();\n mapInstance.current = null;\n };\n }, []);\n\n useEffect(() => {\n if (!mapInstance.current) return;\n\n const L = (window as any).L;\n const map = mapInstance.current;\n\n // Clear existing markers\n markersRef.current.forEach(marker => map.removeLayer(marker));\n markersRef.current.clear();\n\n // Status color mapping\n const statusColors: Record = {\n new: \"#9ca3af\",\n interested: \"#3b82f6\",\n contacted: \"#f59e0b\",\n toured: \"#10b981\",\n applied: \"#8b5cf6\",\n rejected: \"#ef4444\",\n };\n\n // Add markers for listings with coordinates\n listings.forEach(listing => {\n if (listing.lat && listing.lng) {\n const status = listing.interaction?.status || \"new\";\n const isLiked = listing.interaction?.is_liked || false;\n const color = statusColors[status] || statusColors.new;\n \n // Create custom icon\n const icon = L.divIcon({\n className: \"custom-marker\",\n html: `

${isLiked ? \"♥\" : \"\"}

`,\n iconSize: [24, 24],\n iconAnchor: [12, 12],\n });\n \n const marker = L.marker([listing.lat, listing.lng], { icon }).addTo(map);\n markersRef.current.set(listing.id, marker);\n \n // Click to open detail panel\n marker.on(\"click\", () => {\n setSelectedListing(listing);\n });\n \n marker.bindPopup(`\n

${listing.address_original}

\n ${listing.price ? `$${listing.price.toLocaleString()}/mo` : \"\"} \n ${listing.beds ? `• ${listing.beds} bed` : \"\"} \n ${listing.baths ? `• ${listing.baths} bath` : \"\"}\n

\n ${status}\n

Click marker for full details

\n `);\n }\n });\n\n // Fit bounds if there are listings with coordinates\n const validListings = listings.filter(l => l.lat && l.lng);\n if (validListings.length > 0) {\n const bounds = L.latLngBounds(validListings.map(l => [l.lat, l.lng]));\n map.fitBounds(bounds, { padding: [50, 50] });\n }\n }, [listings]);\n\n return (\n <>\n

\n \n {selectedListing && currentGroup && (\n setSelectedListing(null)}\n onUpdate={() => {\n onUpdate();\n setSelectedListing(null);\n }}\n />\n )}\n \n );\n}\n\nfunction CreateGroupModal({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {\n const [name, setName] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!name.trim()) return;\n\n setIsLoading(true);\n setError(\"\");\n\n try {\n const response = await fetch(\"/api/groups\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: name.trim() }),\n });\n\n if (!response.ok) {\n const data = await response.json();\n throw new Error(data.message || \"Failed to create group\");\n }\n\n onCreated();\n onClose();\n } catch (err) {\n setError(String(err));\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Create New Group

\n \n

\n );\n}\n\nfunction JoinGroupModal({ onClose, onJoined }: { onClose: () => void; onJoined: () => void }) {\n const [code, setCode] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!code.trim()) return;\n\n setIsLoading(true);\n setError(\"\");\n\n try {\n const response = await fetch(`/api/groups/join/${code.trim().toUpperCase()}`, {\n method: \"POST\",\n });\n\n if (!response.ok) {\n const data = await response.json();\n throw new Error(data.message || \"Failed to join group\");\n }\n\n onJoined();\n onClose();\n } catch (err) {\n setError(String(err));\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Join Group

\n \n

\n );\n}\n\nfunction NoGroupView() {\n const { refreshUser } = useAuth();\n const [showCreateModal, setShowCreateModal] = useState(false);\n const [showJoinModal, setShowJoinModal] = useState(false);\n\n return (\n

Welcome to Loki

\n Create a new group to start tracking rental listings, or join an existing group with an invite code.\n

\n \n

\n setShowCreateModal(true)}\n className=\"w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700\"\n >\n Create New Group\n \n \n setShowJoinModal(true)}\n className=\"w-full px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50\"\n >\n Join with Invite Code\n \n

\n \n {showCreateModal && (\n setShowCreateModal(false)} onCreated={refreshUser} />\n )}\n \n {showJoinModal && (\n setShowJoinModal(false)} onJoined={refreshUser} />\n )}\n

\n );\n}\n\nfunction LoginView() {\n const { login } = useAuth();\n\n return (\n

Loki

Rental Search Made Easy

\n Track listings from Zillow and Craigslist, coordinate with roommates, and find your perfect home.\n

\n \n \n \n Sign in with Google\n \n

\n );\n}\n\nfunction MainContent({ onOpenSettings }: { onOpenSettings: () => void }) {\n const { user, currentGroup, isLoading: authLoading } = useAuth();\n const [view, setView] = useState(\"table\");\n const [filters, setFilters] = useState({ page: 1, limit: 50 });\n \n const { listings, allListings, total, totalPages, isLoading, error, refresh } = useListings(currentGroup?.id, filters);\n\n if (authLoading) {\n return (\n

\n );\n }\n\n if (!user) {\n return ;\n }\n\n if (!currentGroup) {\n return ;\n }\n\n return (\n

{currentGroup.name}

\n {total} listing{total !== 1 ? \"s\" : \"\"} found\n {view === \"table\" && totalPages > 1 && ` (showing ${listings.length} on page ${filters.page || 1} of ${totalPages})`}\n

\n \n

\n \n {isLoading ? (\n

\n ) : error ? (\n

\n Error loading listings: {error}\n

\n ) : (\n <>\n {view === \"table\" && }\n {view === \"kanban\" && }\n {view === \"map\" && }\n \n {view === \"table\" && (\n setFilters({ ...filters, page })}\n />\n )}\n \n )}\n

\n );\n}\n\nfunction AppContent() {\n const { currentGroup } = useAuth();\n const [showSettings, setShowSettings] = useState(false);\n\n return (\n

setShowSettings(true)} />\n setShowSettings(true)} />\n \n {showSettings && currentGroup && (\n setShowSettings(false)}\n />\n )}\n

\n );\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n\n// Mount the app\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n\nexport default App;\n","deleted","label",[176,158],"frontend","permalink","https://www.val.town/x/shapedlines/loki/code/frontend/App.tsx","extension","actionData","errors"]