From fe77c6d459c52a8bc00334a646c08309beffe495 Mon Sep 17 00:00:00 2001
From: Matt <matt@echo6.co>
Date: Mon, 27 Apr 2026 03:51:34 +0000
Subject: [PATCH] fix: route polyline visibility + login URL

B1: Add ResizeObserver to MapView.jsx to handle layout settling.
The map canvas had 0 height at init because layout hadnt settled
when the useEffect fired. ResizeObserver calls map.resize() on
any container size change.

B11: Use native outpost start URL for login initiation:
/outpost.goauthentik.io/start?rd=%2F
This properly triggers auth flow and redirects to / after login.
Removed the Caddy /login handler that wasnt redirecting correctly.
---
 src/components/ContactList.jsx | 2 +-
 src/components/MapView.jsx     | 7 +++++++
 src/components/Panel.jsx       | 2 +-
 src/components/PlaceCard.jsx   | 2 +-
 src/components/PlaceDetail.jsx | 2 +-
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/ContactList.jsx b/src/components/ContactList.jsx
index 53e934c..432b33b 100644
--- a/src/components/ContactList.jsx
+++ b/src/components/ContactList.jsx
@@ -36,7 +36,7 @@ export default function ContactList() {
           Sign in to save and sync your contacts
         </p>
         <button
-          onClick={() => { window.location.href = '/login' }}
+          onClick={() => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }}
           className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium"
           style={{ background: 'var(--accent)', color: 'var(--text-inverse)' }}
         >
diff --git a/src/components/MapView.jsx b/src/components/MapView.jsx
index 2dee026..d4e11f8 100644
--- a/src/components/MapView.jsx
+++ b/src/components/MapView.jsx
@@ -1046,7 +1046,14 @@ const MapView = forwardRef(function MapView(_, ref) {
 
     mapInstance.current = map
 
+    // ResizeObserver to handle layout settling, panel changes, window resize
+    const ro = new ResizeObserver(() => {
+      map.resize()
+    })
+    ro.observe(mapRef.current)
+
     return () => {
+      ro.disconnect()
       if (watchIdRef.current != null) navigator.geolocation.clearWatch(watchIdRef.current)
       if (gpsMarkerRef.current) gpsMarkerRef.current.remove()
       maplibregl.removeProtocol('pmtiles')
diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 63598b7..b12059c 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -61,7 +61,7 @@ export default function Panel({ onManeuverClick }) {
   }
 
   // Auth handlers
-  const handleLogin = () => { window.location.href = '/login' }
+  const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
   const handleLogout = () => { window.location.href = '/outpost.goauthentik.io/sign_out' }
 
   // Optimize stops
diff --git a/src/components/PlaceCard.jsx b/src/components/PlaceCard.jsx
index 0b09bbc..41114c0 100644
--- a/src/components/PlaceCard.jsx
+++ b/src/components/PlaceCard.jsx
@@ -432,7 +432,7 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
         {auth.authenticated ? (
           <button onClick={handleSave} className="p-2 rounded-lg" style={{ background: savedContact ? "var(--accent-muted)" : "var(--tan-muted)", color: savedContact ? "var(--accent)" : "var(--tan)", border: "1px solid var(--border)" }} aria-label={savedContact ? "Edit saved contact" : "Save place"}><Bookmark size={14} fill={savedContact ? "currentColor" : "none"} /></button>
         ) : (
-          <button onClick={() => { window.location.href = "/login" }} className="flex items-center gap-1 px-2 py-1.5 rounded-lg text-xs" style={{ background: "var(--accent-muted)", color: "var(--accent)", border: "1px solid var(--border)" }} title="Log in to save places"><LogIn size={12} /><span>Save</span></button>
+          <button onClick={() => { window.location.href = "/outpost.goauthentik.io/start?rd=%2F" }} className="flex items-center gap-1 px-2 py-1.5 rounded-lg text-xs" style={{ background: "var(--accent-muted)", color: "var(--accent)", border: "1px solid var(--border)" }} title="Log in to save places"><LogIn size={12} /><span>Save</span></button>
         )}
         <div className="relative">
           <button onClick={() => setCopyOpen((v) => !v)} className="p-2 rounded-lg flex items-center gap-0.5" style={{ background: "var(--tan-muted)", color: "var(--tan)", border: "1px solid var(--border)" }} aria-label="Copy"><Copy size={14} /><ChevronDown size={10} /></button>
diff --git a/src/components/PlaceDetail.jsx b/src/components/PlaceDetail.jsx
index 77f2cff..32afd34 100644
--- a/src/components/PlaceDetail.jsx
+++ b/src/components/PlaceDetail.jsx
@@ -758,7 +758,7 @@ export default function PlaceDetail() {
           </button>
         ) : (
           <button
-            onClick={() => { window.location.href = '/login' }}
+            onClick={() => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }}
             className="flex items-center gap-1 px-2 py-1.5 rounded-lg text-xs"
             style={{ background: 'var(--accent-muted)', color: 'var(--accent)', border: '1px solid var(--border)' }}
             title="Log in to save places"