Claude/fix waze api integration wf1 x8

app/layout.tsx

@@ -1,15 +1,9 @@
 import type { Metadata, Viewport } from "next";
-import { Geist } from "next/font/google";
 import Script from "next/script";
 import { PROJECT_SHUTDOWN_ENABLED } from "@/lib/shutdown";
 import { Providers } from "./providers";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
 const siteUrl = "https://teslanav.com";
 const siteName = "TeslaNav";
 const siteDescription = "Get Waze-style alerts on your Tesla! TeslaNav brings real-time police alerts, speed camera warnings, accident reports, and road hazard notifications to your Tesla's browser. The best Waze alternative for Tesla owners.";
@@ -240,8 +234,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   const bodyClassName = PROJECT_SHUTDOWN_ENABLED
-    ? `${geistSans.variable} antialiased bg-neutral-950 text-white`
-    : `${geistSans.variable} antialiased overflow-hidden`;
+    ? `antialiased bg-neutral-950 text-white`
+    : `antialiased overflow-hidden`;
 
   const bodyStyle = PROJECT_SHUTDOWN_ENABLED
     ? {

app/page.tsx

@@ -162,7 +162,7 @@ function LiveHome() {
   const simulationIndexRef = useRef(0);
   const simulationIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
-  const { latitude: realLatitude, longitude: realLongitude, heading, effectiveHeading: realEffectiveHeading, speed: realSpeed, loading: geoLoading, error: geoError } = useGeolocation();
+  const { latitude: realLatitude, longitude: realLongitude, heading, effectiveHeading: realEffectiveHeading, speed: realSpeed, loading: geoLoading, error: geoError, requestPermission } = useGeolocation();
 
   // Use simulated position if simulating, otherwise use real position
   const latitude = isSimulating && simulatedPosition ? simulatedPosition.lat : realLatitude;
@@ -921,6 +921,14 @@ function LiveHome() {
             <span className="text-gray-400 text-sm font-medium">
               {geoError ? geoError : "Finding your location..."}
             </span>
+            {geoError && (
+              <button
+                onClick={requestPermission}
+                className="mt-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm font-medium transition-colors"
+              >
+                Try Again
+              </button>
+            )}
           </div>
         </div>
       </main>

app/record/page.tsx

@@ -11,13 +11,15 @@ import Link from "next/link";
 export default function RecordPage() {
   const mapRef = useRef<MapRef>(null);
 
-  const { 
-    latitude, 
-    longitude, 
-    effectiveHeading, 
+  const {
+    latitude,
+    longitude,
+    effectiveHeading,
     speed,
     accuracy,
-    error: geoError 
+    error: geoError,
+    permissionDenied,
+    requestPermission,
   } = useGeolocation();
 
   const {
@@ -72,15 +74,58 @@ export default function RecordPage() {
   if (!latitude || !longitude) {
     return (
       <main className="relative w-full h-full bg-white flex items-center justify-center">
-        <div className="flex flex-col items-center gap-6">
-          <div className="flex flex-col items-center gap-3">
-            <div className="relative">
-              <div className="w-12 h-12 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin" />
-            </div>
-            <span className="text-gray-600 text-sm font-medium">
-              {geoError ? geoError : "Finding your location..."}
-            </span>
+        <div className="flex flex-col items-center gap-6 px-6 max-w-md">
+          <div className="flex flex-col items-center gap-4">
+            {geoError ? (
+              <>
+                <div className="text-4xl">📍</div>
+                <div className="text-center">
+                  <h2 className="text-lg font-semibold text-gray-900 mb-2">Location Error</h2>
+                  <p className="text-gray-600 text-sm mb-4">{geoError}</p>
+                  {permissionDenied && (
+                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-4">
+                      <p className="text-sm text-amber-900 mb-3">
+                        Location access was denied. You can request permission again:
+                      </p>
+                      <button
+                        onClick={requestPermission}
+                        className="w-full px-4 py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors"
+                      >
+                        Request Permission
+                      </button>
+                      <p className="text-xs text-amber-800 mt-3">
+                        If prompted, please select "Allow" to grant location access.
+                      </p>
+                    </div>
+                  )}
+                  {!permissionDenied && (
+                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-left text-sm text-blue-900">
+                      <p className="font-semibold mb-2">How to fix:</p>
+                      <ul className="list-disc list-inside space-y-1">
+                        <li>Ensure you're using HTTPS</li>
+                        <li>Check browser location permissions</li>
+                        <li>Allow location access when prompted</li>
+                        <li>Restart your browser and try again</li>
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="relative">
+                  <div className="w-12 h-12 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin" />
+                </div>
+                <span className="text-gray-600 text-sm font-medium">Finding your location...</span>
+              </>
+            )}
           </div>
+          <Link
+            href="/"
+            className="mt-4 px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg transition-colors"
+          >
+            ← Back to Home
+          </Link>
         </div>
       </main>
     );

hooks/useGeolocation.ts

@@ -14,6 +14,7 @@ interface GeolocationState {
   // Calculated/interpolated values for smooth animation
   calculatedHeading: number | null;
   timestamp: number | null;
+  permissionDenied: boolean;
 }
 
 // Calculate bearing between two points in degrees (0-360, where 0 is north)
@@ -85,6 +86,7 @@ export function useGeolocation(enableHighAccuracy = true) {
     loading: true,
     calculatedHeading: null,
     timestamp: null,
+    permissionDenied: false,
   });
 
   const [watchId, setWatchId] = useState<number | null>(null);
@@ -155,14 +157,28 @@ export function useGeolocation(enableHighAccuracy = true) {
       loading: false,
       calculatedHeading,
       timestamp,
+      permissionDenied: false,
     });
   }, []);
 
   const handleError = useCallback((error: GeolocationPositionError) => {
+    let errorMsg = error.message;
+    const isPermissionDenied = error.code === 1;
+
+    // Provide more helpful error messages
+    if (error.code === 1) {
+      errorMsg = "Location access denied. Tap 'Request Permission' to try again.";
+    } else if (error.code === 2) {
+      errorMsg = "Location unavailable. Please ensure geolocation is enabled.";
+    } else if (error.code === 3) {
+      errorMsg = "Location request timed out. Please try again.";
+    }
+
     setState((prev) => ({
       ...prev,
-      error: error.message,
+      error: errorMsg,
       loading: false,
+      permissionDenied: isPermissionDenied,
     }));
 
     // Track geolocation error
@@ -178,6 +194,20 @@ export function useGeolocation(enableHighAccuracy = true) {
         ...prev,
         error: "Geolocation is not supported",
         loading: false,
+        permissionDenied: false,
+      }));
+      return;
+    }
+
+    // Check if page is HTTPS or localhost (geolocation requires secure context)
+    const isSecureContext = window.location.protocol === 'https:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+
+    if (!isSecureContext) {
+      setState((prev) => ({
+        ...prev,
+        error: "Geolocation requires HTTPS. Please access this site over HTTPS.",
+        loading: false,
+        permissionDenied: false,
       }));
       return;
     }
@@ -209,14 +239,57 @@ export function useGeolocation(enableHighAccuracy = true) {
     }
   }, [watchId]);
 
+  // Request permission manually (for when user taps "Request Permission")
+  const requestPermission = useCallback(() => {
+    if (!navigator.geolocation) {
+      setState((prev) => ({
+        ...prev,
+        error: "Geolocation is not supported",
+        loading: false,
+        permissionDenied: false,
+      }));
+      return;
+    }
+
+    // Check if page is HTTPS or localhost (geolocation requires secure context)
+    const isSecureContext = window.location.protocol === 'https:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+
+    if (!isSecureContext) {
+      setState((prev) => ({
+        ...prev,
+        error: "Geolocation requires HTTPS. Please access this site over HTTPS.",
+        loading: false,
+        permissionDenied: false,
+      }));
+      return;
+    }
+
+    setState((prev) => ({
+      ...prev,
+      loading: true,
+      error: null,
+      permissionDenied: false,
+    }));
+
+    const options: PositionOptions = {
+      enableHighAccuracy,
+      timeout: 10000,
+      maximumAge: 0,
+    };
+
+    // Request position - this triggers the permission prompt
+    navigator.geolocation.getCurrentPosition(updatePosition, handleError, options);
+  }, [enableHighAccuracy, updatePosition, handleError]);
+
   // Return the best available heading (GPS heading if moving fast enough, otherwise calculated)
   const bestHeading = state.heading !== null && state.speed !== null && state.speed > MIN_SPEED_FOR_HEADING
     ? state.heading
     : state.calculatedHeading;
 
-  return { 
-    ...state, 
+  return {
+    ...state,
     stopWatching,
+    requestPermission,
     // Provide the best heading source
     effectiveHeading: bestHeading,
   };