feat: 2-step post creation flow + auth fix

- Step 1: Show crosshair to pick location with confirm/cancel buttons
- Step 2: Open PostCreateModal with selected coords
- Fix createPost to use authHeaders() automatically
- Add location picker UI with hints and styled buttons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sociowire-frontend",
   "private": true,
-  "version": "0.0.51",
+  "version": "0.0.52",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",

src/api/client.js

@@ -274,9 +274,10 @@ export async function fetchIpLocation() {
 export async function createPost(payload, token) {
   const headers = {
     "Content-Type": "application/json",
+    ...authHeaders(), // Always include auth headers from stored token
   };
   if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
+    headers["Authorization"] = `Bearer ${token}`; // Override with explicit token if provided
   }
 
   const res = await fetch(`${apiBase()}/post`, {

src/components/Map/MapView.jsx

@@ -557,7 +557,8 @@ export default function MapView({
       weatherEnabled: weatherViewEnabled,
     });
 
-  const [isCreating, setIsCreating] = useState(false);
+  const [isPickingLocation, setIsPickingLocation] = useState(false); // Step 1: pick location
+  const [isCreating, setIsCreating] = useState(false); // Step 2: show modal
   const [draftTitle, setDraftTitle] = useState("");
   const [draftBody, setDraftBody] = useState("");
   const [draftUrl, setDraftUrl] = useState("");
@@ -1486,8 +1487,10 @@ export default function MapView({
 
   const closeCreateModal = () => {
     setIsCreating(false);
+    setIsPickingLocation(false);
     setModeSelectorVisible(false);
     setModeChosen(false);
+    setDraftCoords(null);
   };
 
   const handleModeSelect = (modeId) => {
@@ -1531,17 +1534,41 @@ export default function MapView({
       return;
     }
 
-    // Get current map center as default coords
-    const map = mapRef.current;
-    if (map) {
-      const c = map.getCenter();
-      setDraftCoords([c.lng, c.lat]);
-    }
+    // Step 1: Show crosshair to pick location
     setSaveError("");
     setIsSaving(false);
+    setDraftCoords(null);
+    setIsPickingLocation(true);
+  };
+
+  // Confirm location and open modal
+  const handleConfirmLocation = () => {
+    const map = mapRef.current;
+    if (map) {
+      const stage = stageRef.current;
+      const crosshairEl = stage?.querySelector(".crosshair-aim");
+      const containerEl = map.getContainer();
+      let coords;
+      if (crosshairEl && containerEl) {
+        const cr = crosshairEl.getBoundingClientRect();
+        const co = containerEl.getBoundingClientRect();
+        const ll = map.unproject([cr.left + cr.width/2 - co.left, cr.top + cr.height/2 - co.top]);
+        coords = [ll.lng, ll.lat];
+      } else {
+        const c = map.getCenter();
+        coords = [c.lng, c.lat];
+      }
+      setDraftCoords(coords);
+    }
+    setIsPickingLocation(false);
     setIsCreating(true);
   };
 
+  const handleCancelLocation = () => {
+    setIsPickingLocation(false);
+    setDraftCoords(null);
+  };
+
   // Update ref for long-press callback
   useEffect(() => {
     longPressCallbackRef.current = handleOpenCreate;
@@ -2133,7 +2160,30 @@ export default function MapView({
           weatherEnabled={weatherViewEnabled}
         />
 
-        {/* New Post Creation Modal */}
+        {/* Step 1: Location Picker with Crosshair */}
+        {isPickingLocation && (
+          <>
+            <div className="map-overlay map-crosshair">
+              <div className="crosshair-aim" />
+            </div>
+            <div className="location-picker-ui">
+              <div className="location-picker-hint">
+                <i className="fa-solid fa-crosshairs" />
+                <span>Move the map to position your post</span>
+              </div>
+              <div className="location-picker-actions">
+                <button className="location-picker-cancel" onClick={handleCancelLocation}>
+                  <i className="fa-solid fa-times" /> Cancel
+                </button>
+                <button className="location-picker-confirm" onClick={handleConfirmLocation}>
+                  <i className="fa-solid fa-check" /> Confirm Location
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Step 2: Post Creation Modal */}
         <PostCreateModal
           isOpen={isCreating}
           onClose={closeCreateModal}

src/styles/map.css

@@ -1909,3 +1909,82 @@ body[data-theme="blue"] .mode-selector-v2{
     font-size:0.85rem;
   }
 }
+
+/* Location Picker UI */
+.location-picker-ui {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.location-picker-hint {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 20px;
+  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
+  border: 1px solid rgba(96, 165, 250, 0.4);
+  border-radius: 16px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.location-picker-hint i {
+  font-size: 18px;
+  color: #60a5fa;
+}
+
+.location-picker-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.location-picker-cancel,
+.location-picker-confirm {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.location-picker-cancel {
+  background: rgba(30, 41, 59, 0.9);
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  color: #94a3b8;
+}
+
+.location-picker-cancel:hover {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: rgba(239, 68, 68, 0.4);
+  color: #f87171;
+}
+
+.location-picker-confirm {
+  background: linear-gradient(135deg, #3b82f6, #06b6d4);
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
+}
+
+.location-picker-confirm:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5);
+}
+
+.location-picker-confirm:active {
+  transform: translateY(0);
+}