\n {/* Map at top */}\n {coordinates && (\n \n )}\n\n {/* Location details below map */}\n

\n {address?.name && (\n

{address.name}

\n )}\n {addressParts.length > 0 && (\n

\n {addressParts.join(\", \")}\n

\n )}\n {coordinates && (\n

\n {coordinates.latitude.toFixed(6)},{\" \"}\n {coordinates.longitude.toFixed(6)}\n

\n )}\n

\n )}\n\n

\n e.target.select()}\n />\n

\n {\n try {\n await navigator.clipboard.writeText(shareUrl);\n alert(\"Link copied!\");\n } catch (err) {\n console.error(\"Failed to copy:\", err);\n }\n }}\n className={copyButtonStyle}\n >\n \n \n \n \n Copy\n \n {typeof navigator !== \"undefined\" && navigator.share && (\n {\n try {\n const shareText = `Dropped anchor at ${\n address?.name || \"a location\"\n } ${shareUrl}`;\n await navigator.share({ text: shareText });\n } catch (err) {\n console.log(\"Share cancelled:\", err);\n }\n }}\n className={shareButtonStyle}\n >\n \n \n \n \n \n \n \n Share\n \n )}\n

\n\n {canDelete && (\n \n \n \n \n \n \n {isDeleting ? \"Deleting...\" : \"Delete\"}\n \n )}\n

\n \n );\n\n // Type cast needed due to esm.sh JSX pragma type resolution mismatch\n return createPortal(content, portalTarget) as unknown as React.ReactNode;\n}\n\n// ============ SIDEBAR MAP WIDGET ============\n\nfunction SidebarMapWidget({ latitude, longitude, venueName }: MapWidgetProps) {\n const mapRef = useRef(null);\n const mapInstanceRef = useRef(null);\n\n useEffect(() => {\n const loadLeaflet = async () => {\n if (mapInstanceRef.current || !mapRef.current) return;\n\n try {\n const link = document.createElement(\"link\");\n link.rel = \"stylesheet\";\n link.href = \"https://unpkg.com/leaflet@1.9.4/dist/leaflet.css\";\n document.head.appendChild(link);\n\n const L = await import(\"https://esm.sh/leaflet@1.9.4\");\n\n const map = L.default.map(mapRef.current).setView(\n [latitude, longitude],\n 16,\n );\n\n L.default.tileLayer(\n \"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png\",\n {\n attribution:\n '© OSM © CARTO',\n maxZoom: 20,\n subdomains: \"abcd\",\n },\n ).addTo(map);\n\n const marker = L.default.marker([latitude, longitude]).addTo(map);\n\n if (venueName) {\n marker.bindPopup(venueName).openPopup();\n }\n\n mapInstanceRef.current = map;\n\n return () => {\n if (mapInstanceRef.current) {\n mapInstanceRef.current.remove();\n mapInstanceRef.current = null;\n }\n };\n } catch (error) {\n console.error(\"Failed to load map:\", error);\n }\n };\n\n loadLeaflet();\n }, [latitude, longitude, venueName]);\n\n return

;\n}\n\n// ============ MAP WIDGET ============\n\nfunction MapWidget({ latitude, longitude, venueName }: MapWidgetProps) {\n const mapRef = useRef(null);\n const mapInstanceRef = useRef(null);\n\n useEffect(() => {\n const loadLeaflet = async () => {\n if (mapInstanceRef.current || !mapRef.current) return;\n\n try {\n const link = document.createElement(\"link\");\n link.rel = \"stylesheet\";\n link.href = \"https://unpkg.com/leaflet@1.9.4/dist/leaflet.css\";\n document.head.appendChild(link);\n\n const L = await import(\"https://esm.sh/leaflet@1.9.4\");\n\n const map = L.default.map(mapRef.current).setView(\n [latitude, longitude],\n 16,\n );\n\n L.default.tileLayer(\n \"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png\",\n {\n attribution:\n '© OpenStreetMap contributors © CARTO',\n maxZoom: 20,\n subdomains: \"abcd\",\n },\n ).addTo(map);\n\n const marker = L.default.marker([latitude, longitude]).addTo(map);\n\n if (venueName) {\n marker.bindPopup(venueName).openPopup();\n }\n\n mapInstanceRef.current = map;\n\n return () => {\n if (mapInstanceRef.current) {\n mapInstanceRef.current.remove();\n mapInstanceRef.current = null;\n }\n };\n } catch (error) {\n console.error(\"Failed to load map:\", error);\n }\n };\n\n loadLeaflet();\n }, [latitude, longitude, venueName]);\n\n return

;\n}\n\n// ============ MAIN COMPONENT ============\n\nexport function CheckinDetail({ checkinId, auth }: CheckinDetailProps) {\n const [checkin, setCheckin] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [lightboxOpen, setLightboxOpen] = useState(false);\n\n // Likes state\n const [likesCount, setLikesCount] = useState(0);\n const [isLiked, setIsLiked] = useState(false);\n const [likesLoading, setLikesLoading] = useState(false);\n const [likesError, setLikesError] = useState(null);\n\n // Delete state\n const [isDeleting, setIsDeleting] = useState(false);\n\n // Portal target for sidebar actions\n const [sidebarPortal, setSidebarPortal] = useState(null);\n\n // Local authentication state (fallback if not provided via props)\n const [localAuth, setLocalAuth] = useState({\n isAuthenticated: false,\n });\n\n // Inject global styles on mount\n useEffect(() => {\n injectGlobalStyles();\n }, []);\n\n // Find sidebar portal target after mount\n useEffect(() => {\n const portal = document.getElementById(SIDEBAR_PORTAL_ID);\n setSidebarPortal(portal);\n }, []);\n\n useEffect(() => {\n async function fetchCheckin() {\n try {\n setLoading(true);\n setError(null);\n\n let apiUrl = \"\";\n if (checkinId.includes(\"/\")) {\n apiUrl = `/api/checkins/${checkinId}`;\n } else {\n apiUrl = `/api/checkin/${checkinId}`;\n }\n\n const response = await apiFetch(apiUrl);\n\n if (!response.ok) {\n if (response.status === 404) {\n setError(\"Checkin not found\");\n } else {\n setError(\"Failed to load checkin\");\n }\n return;\n }\n\n const data = await response.json();\n setCheckin(data.checkin);\n } catch (err) {\n setError(\"Failed to load checkin\");\n console.error(\"Failed to fetch checkin:\", err);\n } finally {\n setLoading(false);\n }\n }\n\n fetchCheckin();\n }, [checkinId]);\n\n // Check authentication status\n useEffect(() => {\n const checkAuth = async () => {\n try {\n const response = await fetch(\"/api/auth/session\");\n const data = await response.json();\n\n if (data.valid) {\n setLocalAuth({\n isAuthenticated: true,\n userHandle: data.handle,\n userDid: data.did,\n userDisplayName: data.displayName,\n userAvatar: data.avatar,\n });\n }\n } catch (error) {\n console.error(\"Auth check failed:\", error);\n }\n };\n\n if (!auth) {\n checkAuth();\n }\n }, [auth]);\n\n const currentAuth = auth || localAuth;\n\n // Fetch likes data\n const fetchLikesData = async () => {\n if (!checkin || !checkinId.includes(\"/\")) return;\n\n try {\n setLikesLoading(true);\n setLikesError(null);\n\n const [checkinDid, checkinRkey] = checkinId.split(\"/\");\n\n const response = await apiFetch(\n `/api/checkins/${checkinDid}/${checkinRkey}/likes`,\n );\n\n if (!response.ok) {\n throw new Error(`Failed to fetch likes: ${response.status}`);\n }\n\n const data = await response.json();\n\n setLikesCount(data.count || 0);\n\n if (currentAuth.isAuthenticated && currentAuth.userDid) {\n const userLiked = data.likes?.some((like: any) =>\n like.author.did === currentAuth.userDid\n );\n setIsLiked(userLiked || false);\n }\n } catch (error) {\n console.error(\"Failed to fetch likes:\", error);\n setLikesError(\"Failed to load likes\");\n } finally {\n setLikesLoading(false);\n }\n };\n\n useEffect(() => {\n if (checkin && checkinId.includes(\"/\")) {\n fetchLikesData();\n }\n }, [checkin, checkinId, currentAuth.userDid]);\n\n // Handle like/unlike\n const handleLike = async () => {\n if (!currentAuth.isAuthenticated || !currentAuth.userDid) return;\n if (!checkin || !checkinId.includes(\"/\")) return;\n\n try {\n setLikesLoading(true);\n setLikesError(null);\n\n const [checkinDid, checkinRkey] = checkinId.split(\"/\");\n\n if (isLiked) {\n const response = await apiDelete(\n `/api/checkins/${checkinDid}/${checkinRkey}/likes`,\n );\n\n if (!response.ok) {\n throw new Error(`Failed to unlike: ${response.status}`);\n }\n\n const newCount = Math.max(0, likesCount - 1);\n setIsLiked(false);\n setLikesCount(newCount);\n\n // Update cache with new like count\n if (checkin.uri) {\n await checkinCache.updateCheckinLikes(\n currentAuth.userDid,\n checkin.uri,\n newCount,\n );\n }\n } else {\n const response = await apiFetch(\n `/api/checkins/${checkinDid}/${checkinRkey}/likes`,\n {\n method: \"POST\",\n credentials: \"include\",\n },\n );\n\n if (!response.ok) {\n throw new Error(`Failed to like: ${response.status}`);\n }\n\n const newCount = likesCount + 1;\n setIsLiked(true);\n setLikesCount(newCount);\n\n // Update cache with new like count\n if (checkin.uri) {\n await checkinCache.updateCheckinLikes(\n currentAuth.userDid,\n checkin.uri,\n newCount,\n );\n }\n }\n } catch (error) {\n console.error(\"Failed to toggle like:\", error);\n setLikesError(\"Failed to update like\");\n } finally {\n setLikesLoading(false);\n }\n };\n\n // Handle delete\n const handleDelete = async () => {\n if (!confirm(\"Are you sure you want to delete this check-in?\")) {\n return;\n }\n\n setIsDeleting(true);\n try {\n const response = await apiDelete(\n `/api/checkins/${checkin?.author.did}/${checkin?.id}`,\n );\n\n if (response.ok) {\n // Invalidate cache\n if (currentAuth.userDid) {\n await checkinCache.invalidateFeed(currentAuth.userDid);\n }\n // Redirect to feed\n globalThis.location.href = \"/\";\n } else {\n const errorData = await response.json();\n alert(\n `Failed to delete check-in: ${errorData.error || \"Unknown error\"}`,\n );\n }\n } catch (err) {\n console.error(\"Delete error:\", err);\n alert(\"Failed to delete check-in. Please try again.\");\n } finally {\n setIsDeleting(false);\n }\n };\n\n const canDelete = currentAuth.isAuthenticated &&\n currentAuth.userDid === checkin?.author.did;\n\n if (loading) {\n return

Loading checkin...

;\n }\n\n if (error || !checkin) {\n return

{error || \"Checkin not found\"}

;\n }\n\n const shareUrl =\n `${globalThis.location.origin}/checkins/${checkin.author.did}/${checkin.id}`;\n\n return (\n

\n {/* Main checkin card */}\n

\n {/* Author header */}\n

\n {checkin.author.avatar\n ? (\n \n )\n : (\n

\n {(checkin.author.displayName || checkin.author.handle)?.[0]\n ?.toUpperCase() || \"?\"}\n

\n )}\n\n

\n {checkin.author.displayName || checkin.author.handle}\n {checkin.source === \"beaconbits\" && (\n \n \n \n \n \n \n )}\n

@{checkin.author.handle}

\n\n \n {new Date(checkin.createdAt).toLocaleDateString(undefined, {\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n })}\n
\n {new Date(checkin.createdAt).toLocaleTimeString(undefined, {\n hour: \"numeric\",\n minute: \"2-digit\",\n })}\n \n

\n\n {/* Checkin message */}\n {checkin.text &&

{checkin.text}

}\n\n {/* Image */}\n {checkin.image && (\n setLightboxOpen(true)}\n role=\"button\"\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n setLightboxOpen(true);\n }\n }}\n >\n \n

\n )}\n\n {/* Location info - only shown on mobile, desktop shows in sidebar */}\n {(checkin.address || checkin.coordinates) && (\n

\n 📍\n Location\n

\n\n {checkin.address && (\n

\n {checkin.address.name && (\n

{checkin.address.name}

\n )}\n

\n {[\n checkin.address.street,\n checkin.address.locality,\n checkin.address.region,\n checkin.address.country,\n ].filter(Boolean).join(\", \")}\n

\n )}\n\n {checkin.coordinates && (\n <>\n

\n {checkin.coordinates.latitude.toFixed(6)},{\" \"}\n {checkin.coordinates.longitude.toFixed(6)}\n

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

\n )}\n\n {/* Likes section */}\n

\n \n \n \n \n \n {likesCount}\n \n \n\n {likesError && {likesError}\n }\n

\n\n {!currentAuth.isAuthenticated && (\n

\n Sign in to like this checkin\n

\n )}\n

\n\n {/* Desktop sidebar actions via portal */}\n \n\n {/* Inline mobile actions - only visible on mobile */}\n

\n {\n try {\n await navigator.clipboard.writeText(shareUrl);\n alert(\"Link copied!\");\n } catch (err) {\n console.error(\"Failed to copy to clipboard:\", err);\n alert(\"Failed to copy link.\");\n }\n }}\n className={inlineActionButtonStyle}\n >\n \n \n \n \n Copy Link\n \n\n {typeof navigator !== \"undefined\" && navigator.share && (\n {\n try {\n const shareText = `Dropped anchor at ${\n checkin.address?.name || \"a location\"\n } ${shareUrl}`;\n await navigator.share({\n text: shareText,\n });\n } catch (err) {\n console.log(\"Share cancelled or failed:\", err);\n }\n }}\n className={inlineShareButtonStyle}\n >\n \n \n \n \n \n \n \n Share\n \n )}\n

\n\n {canDelete && (\n \n \n \n \n \n \n {isDeleting ? \"Deleting...\" : \"Delete\"}\n \n )}\n

\n\n {/* Image Lightbox */}\n {checkin.image && (\n setLightboxOpen(false)}\n />\n )}\n

\n );\n}\n","deleted","label",[174,175,156],"frontend","components","permalink","https://www.val.town/x/tijs/anchor-appview/code/frontend/components/CheckinDetail.tsx","extension","actionData","errors"]