build: e33c3ecd-6e30-4f54-947f-6e498f5888d3

.env

@@ -0,0 +1 @@
+VITE_GOOGLE_MAPS_KEY=AIzaSyA42Ue9SEQwTaQo5DjbhxPZcpqVT36M4_U

android/app/build.gradle

@@ -4,7 +4,7 @@ android {
     namespace = "io.ionic.starter"
     compileSdk = rootProject.ext.compileSdkVersion
     defaultConfig {
-        applicationId "io.demoapp.app"
+        applicationId "com.habitmode.llemba.com"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1

android/app/src/main/AndroidManifest.xml

@@ -25,7 +25,7 @@
                 <action android:name="android.intent.action.VIEW" />
                 <category android:name="android.intent.category.DEFAULT" />
                 <category android:name="android.intent.category.BROWSABLE" />
-                <data android:scheme="io.demoapp.app" />
+                <data android:scheme="io.flavorstudio.app" />
             </intent-filter>
 
         </activity>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="ic_launcher_background">#FFFFFF</color>
-</resources>
+</resources>

android/app/src/main/res/values/splash_background.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <color name="splashBackground">#FFFFFF</color>
-</resources>

android/app/src/main/res/values/strings.xml

@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='utf-8'?>
 <resources>
-    <string name="app_name">DemoApp</string>
+    <string name="app_name">FlavorStudio</string>
-    <string name="title_activity_main">DemoApp</string>
+    <string name="title_activity_main">FlavorStudio</string>
     <string name="package_name">io.ionic.starter</string>
     <string name="custom_url_scheme">io.ionic.starter</string>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -16,9 +16,7 @@
     </style>
 
 
-        <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
+    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
-        <item name="windowSplashScreenBackground">@color/splashBackground</item>
+        <item name="android:background">@drawable/splash</item>
-        <item name="windowSplashScreenAnimatedIcon">@drawable/splash_logo</item>
-        <item name="postSplashScreenTheme">@style/AppTheme.NoActionBar</item>
     </style>
 </resources>

android/variables.gradle

@@ -15,4 +15,5 @@ ext {
     cordovaAndroidVersion = '14.0.1'
     rgcfaIncludeGoogle = true
     androidxCredentialsVersion = '1.3.0'
+    javaVersion = JavaVersion.VERSION_17
 }

capacitor.config.ts

@@ -1,8 +1,8 @@
 import type { CapacitorConfig } from '@capacitor/cli';
 
 const config: CapacitorConfig = {
-  appId: 'io.demoapp.app',
+  appId: 'com.habitmode.llemba.com',
-  appName: 'DemoApp',
+  appName: 'FlavorStudio',
   webDir: 'dist',
   plugins: {
     FirebaseAuthentication: {

codemagic.yaml

@@ -55,6 +55,13 @@ workflows:
           if [ -n "$CM_DEBUG_KEYSTORE" ]; then
             echo "$CM_DEBUG_KEYSTORE" | base64 --decode > /tmp/debug-keystore.p12
           fi
+      - name: Check native credentials
+        script: |
+          if [ -n "$VITE_GOOGLE_MAPS_KEY" ]; then
+            echo "VITE_GOOGLE_MAPS_KEY: set (length=${#VITE_GOOGLE_MAPS_KEY}, ends …${VITE_GOOGLE_MAPS_KEY: -4})"
+          else
+            echo "WARNING: VITE_GOOGLE_MAPS_KEY not set — Google Maps will not render"
+          fi
       - name: Build debug APK
         script: |
           cd android
@@ -68,6 +75,21 @@ workflows:
           else
             ./gradlew assembleDebug --no-daemon
           fi
+      - name: Verify manifest substitution
+        script: |
+          MANIFEST="android/app/build/intermediates/merged_manifests/debug/AndroidManifest.xml"
+          if [ -f "$MANIFEST" ]; then
+            VAL=$(grep -A1 'geo.API_KEY' "$MANIFEST" | grep -o 'android:value="[^"]*"' | cut -d'"' -f2)
+            if [ -z "$VAL" ]; then
+              echo "WARNING: geo.API_KEY meta-data not found in merged manifest"
+            elif [ "$VAL" = '${googleMapsApiKey}' ]; then
+              echo "WARNING: geo.API_KEY placeholder was not substituted — key missing from build env"
+            else
+              echo "geo.API_KEY substituted OK (ends …${VAL: -4})"
+            fi
+          else
+            echo "Merged manifest not found at $MANIFEST"
+          fi
     artifacts:
       - android/app/build/outputs/apk/debug/app-debug.apk
 

ios/App/App.xcodeproj/project.pbxproj

@@ -26,7 +26,6 @@
 		504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
-		1A4EB3C21FED79650016851F /* App.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = App.entitlements; sourceTree = "<group>"; };
 		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
 		958DCC722DB07C7200EA8C5F /* debug.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = debug.xcconfig; path = ../debug.xcconfig; sourceTree = SOURCE_ROOT; };
 /* End PBXFileReference section */
@@ -69,7 +68,6 @@
 				504EC30E1FED79650016851F /* Assets.xcassets */,
 				504EC3101FED79650016851F /* LaunchScreen.storyboard */,
 				504EC3131FED79650016851F /* Info.plist */,
-				1A4EB3C21FED79650016851F /* App.entitlements */,
 				2FAD9762203C412B000D30F8 /* config.xml */,
 				50B271D01FEDC1A000F3C39B /* public */,
 			);
@@ -297,7 +295,6 @@
 			baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
 				INFOPLIST_FILE = App/Info.plist;
@@ -308,7 +305,7 @@
 				);
 				MARKETING_VERSION = 1.0;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
-				PRODUCT_BUNDLE_IDENTIFIER = io.demoapp.app;
+				PRODUCT_BUNDLE_IDENTIFIER = io.flavorstudio.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
 				SWIFT_VERSION = 5.0;
@@ -320,7 +317,6 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
 				INFOPLIST_FILE = App/Info.plist;
@@ -330,7 +326,7 @@
 					"@executable_path/Frameworks",
 				);
 				MARKETING_VERSION = 1.0;
-				PRODUCT_BUNDLE_IDENTIFIER = io.demoapp.app;
+				PRODUCT_BUNDLE_IDENTIFIER = io.flavorstudio.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
 				SWIFT_VERSION = 5.0;

ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,122 +1,14 @@
 {
-  "images": [
+  "images" : [
     {
-      "idiom": "iphone",
+      "filename" : "AppIcon-512@2x.png",
-      "scale": "1x",
+      "idiom" : "universal",
-      "size": "20x20",
+      "platform" : "ios",
-      "filename": "icon-20.png"
+      "size" : "1024x1024"
-    },
-    {
-      "idiom": "ipad",
-      "scale": "1x",
-      "size": "20x20",
-      "filename": "icon-20.png"
-    },
-    {
-      "idiom": "iphone",
-      "scale": "1x",
-      "size": "29x29",
-      "filename": "icon-29.png"
-    },
-    {
-      "idiom": "ipad",
-      "scale": "1x",
-      "size": "29x29",
-      "filename": "icon-29.png"
-    },
-    {
-      "idiom": "ipad",
-      "scale": "1x",
-      "size": "40x40",
-      "filename": "icon-40.png"
-    },
-    {
-      "idiom": "iphone",
-      "scale": "2x",
-      "size": "20x20",
-      "filename": "icon-40.png"
-    },
-    {
-      "idiom": "iphone",
-      "scale": "2x",
-      "size": "29x29",
-      "filename": "icon-58.png"
-    },
-    {
-      "idiom": "ipad",
-      "scale": "2x",
-      "size": "29x29",
-      "filename": "icon-58.png"
-    },
-    {
-      "idiom": "iphone",
-      "scale": "3x",
-      "size": "20x20",
-      "filename": "icon-60.png"
-    },
-    {
-      "idiom": "ipad",
-      "scale": "1x",
-      "size": "76x76",
-      "filename": "icon-76.png"
-    },
-    {
-      "idiom": "iphone",
-      "scale": "2x",
-      "size": "40x40",
-      "filename": "icon-80.png"
-    },
-    {
-      "idiom": "ipad",
-      "scale": "2x",
-      "size": "40x40",
-      "filename": "icon-80.png"
-    },
-    {
-      "idiom": "iphone",
-      "scale": "3x",
-      "size": "29x29",
-      "filename": "icon-87.png"
-    },
-    {
-      "idiom": "iphone",
-      "scale": "2x",
-      "size": "60x60",
-      "filename": "icon-120.png"
-    },
-    {
-      "idiom": "iphone",
-      "scale": "3x",
-      "size": "40x40",
-      "filename": "icon-120.png"
-    },
-    {
-      "idiom": "ipad",
-      "scale": "2x",
-      "size": "76x76",
-      "filename": "icon-152.png"
-    },
-    {
-      "idiom": "ipad",
-      "scale": "2x",
-      "size": "83.5x83.5",
-      "filename": "icon-167.png"
-    },
-    {
-      "idiom": "iphone",
-      "scale": "3x",
-      "size": "60x60",
-      "filename": "icon-180.png"
-    },
-    {
-      "idiom": "ios-marketing",
-      "scale": "1x",
-      "size": "1024x1024",
-      "filename": "icon-1024.png"
     }
   ],
-  "info": {
+  "info" : {
-    "author": "appsuite",
+    "author" : "xcode",
-    "version": 1
+    "version" : 1
   }
-}
+}

ios/App/App/Assets.xcassets/Splash.imageset/Contents.json

@@ -1,13 +1,23 @@
 {
-  "images": [
+  "images" : [
     {
-      "idiom": "universal",
+      "idiom" : "universal",
-      "filename": "splash.png",
+      "filename" : "splash-2732x2732-2.png",
-      "scale": "1x"
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732-1.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732.png",
+      "scale" : "3x"
     }
   ],
-  "info": {
+  "info" : {
-    "author": "appsuite",
+    "version" : 1,
-    "version": 1
+    "author" : "xcode"
   }
 }

ios/App/App/Info.plist

@@ -7,7 +7,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-        <string>DemoApp</string>
+        <string>FlavorStudio</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
@@ -51,10 +51,10 @@
 	<array>
 		<dict>
 			<key>CFBundleURLName</key>
-			<string>io.demoapp.app</string>
+			<string>io.flavorstudio.app</string>
 			<key>CFBundleURLSchemes</key>
 			<array>
-				<string>io.demoapp.app</string>
+				<string>io.flavorstudio.app</string>
 			</array>
 		</dict>
 	</array>

src/App.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import { setStatusBarStyle, Style } from './utils/statusBar';
 
 import '@ionic/react/css/core.css';
 import '@ionic/react/css/normalize.css';
@@ -18,22 +17,18 @@ import '@ionic/react/css/display.css';
 import './theme/variables.css';
 
 import Home from './pages/Home';
+import HelloWorld from './pages/HelloWorld';
 
-const App: React.FC = () => {
+const App: React.FC = () => (
-  useEffect(() => {
+  <IonApp>
-    setStatusBarStyle(Style.Light);
+    <IonReactRouter>
-  }, []);
+      <IonRouterOutlet animated={true}>
-
+        <Route path="/home" component={Home} exact />
-  return (
+        <Route path="/hello-world" component={HelloWorld} exact />
-    <IonApp>
+        <Route exact path="/" render={() => <Redirect to="/home" />} />
-      <IonReactRouter>
+      </IonRouterOutlet>
-        <IonRouterOutlet>
+    </IonReactRouter>
-          <Route path="/home" component={Home} exact />
+  </IonApp>
-          <Route exact path="/" render={() => <Redirect to="/home" />} />
+);
-        </IonRouterOutlet>
-      </IonReactRouter>
-    </IonApp>
-  );
-};
 
 export default App;

src/pages/HelloWorld.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { chevronBackOutline, globeOutline } from 'ionicons/icons';
+import { useHistory } from 'react-router-dom';
+
+const HelloWorld: React.FC = () => {
+  const history = useHistory();
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton aria-label="Back" onClick={() => history.goBack()}>
+              <IonIcon icon={chevronBackOutline} slot="icon-only" />
+            </IonButton>
+          </IonButtons>
+          <IonTitle>Hello World</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent
+        className="ion-padding"
+        style={
+          { '--background': 'var(--ion-color-light)' } as React.CSSProperties
+        }
+      >
+        <div
+          style={{
+            minHeight: '70vh',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            gap: 16,
+          }}
+        >
+          <div
+            style={{
+              width: 72,
+              height: 72,
+              borderRadius: 24,
+              background: 'rgba(var(--ion-color-primary-rgb), 0.12)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <IonIcon
+              icon={globeOutline}
+              style={{ fontSize: 36, color: 'var(--ion-color-primary)' }}
+            />
+          </div>
+          <div>
+            <h1
+              style={{
+                margin: '0 0 8px',
+                fontSize: 28,
+                fontWeight: 700,
+                color: 'var(--ion-color-dark)',
+              }}
+            >
+              Hello, world!
+            </h1>
+            <p
+              style={{
+                margin: 0,
+                color: 'var(--ion-color-medium)',
+                lineHeight: 1.5,
+              }}
+            >
+              You made it to the new page.
+            </p>
+          </div>
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default HelloWorld;

src/pages/Home.tsx

@@ -1,30 +1,682 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
+  IonButton,
   IonContent,
-  IonHeader,
+  IonIcon,
   IonPage,
-  IonTitle,
+  IonSpinner,
-  IonToolbar,
+  useIonViewDidEnter,
+  useIonViewWillLeave,
 } from '@ionic/react';
+import { GoogleMap } from '@capacitor/google-maps';
+import type {
+  GoogleMap as GoogleMapInstance,
+  Marker,
+} from '@capacitor/google-maps';
+import {
+  closeOutline,
+  locateOutline,
+  mapOutline,
+  searchOutline,
+} from 'ionicons/icons';
+import { supabase } from '../supabase';
 
-const Home: React.FC = () => (
+const DEFAULT_CENTER = { lat: 37.7749, lng: -122.4194 };
-  <IonPage>
+const HOME_MARKER: Marker = {
-    <IonHeader translucent className="home-header">
+  coordinate: DEFAULT_CENTER,
-      <IonToolbar className="home-toolbar">
+  title: 'San Francisco',
-        <IonTitle>Home</IonTitle>
+  snippet: 'Start searching for nearby places',
-      </IonToolbar>
+};
-    </IonHeader>
+
-    <IonContent fullscreen className="home-content">
+type PlaceSuggestion = {
-      <div className="home-shell minimal-home-shell">
+  placeId: string;
-        <section className="minimal-welcome-card subtle-welcome-card">
+  text: string;
-          <h1>Welcome to your new app</h1>
+  mainText: string;
-          <p className="minimal-subtitle">
+  secondaryText: string;
-            Chat with the assistant to start adding features and pages
+};
-          </p>
+
-        </section>
+type Coordinate = {
-      </div>
+  lat: number;
-    </IonContent>
+  lng: number;
-  </IonPage>
+};
-);
+
+type SelectedPlace = {
+  placeId: string;
+  name: string;
+  address: string;
+  coordinate: Coordinate;
+  photoUrl?: string | null;
+};
+
+const getErrorDetails = (error: unknown) => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  if (typeof error === 'string') {
+    return error;
+  }
+
+  try {
+    return JSON.stringify(error);
+  } catch {
+    return 'Unknown error';
+  }
+};
+
+const waitForFrame = () =>
+  new Promise<void>((resolve) => {
+    requestAnimationFrame(() => resolve());
+  });
+
+const wait = (ms: number) =>
+  new Promise<void>((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+
+const createSessionToken = () => {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return crypto.randomUUID();
+  }
+
+  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+};
+
+const Home: React.FC = () => {
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<GoogleMapInstance | null>(null);
+  const mapIdRef = useRef(`home-map-${createSessionToken()}`);
+  const markerIdsRef = useRef<string[]>([]);
+  const isActiveRef = useRef(false);
+  const searchRequestRef = useRef(0);
+  const sessionTokenRef = useRef(createSessionToken());
+  const selectedPlaceRef = useRef<SelectedPlace | null>(null);
+  const suppressNextSearchRef = useRef(false);
+
+  const [mapError, setMapError] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
+  const [suggestions, setSuggestions] = useState<PlaceSuggestion[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [detailsLoading, setDetailsLoading] = useState(false);
+  const [selectedPlace, setSelectedPlace] = useState<SelectedPlace | null>(
+    null
+  );
+
+  const clearMarkers = async (map: GoogleMapInstance) => {
+    const markerIds = markerIdsRef.current;
+    if (markerIds.length === 0) return;
+
+    markerIdsRef.current = [];
+
+    try {
+      await map.removeMarkers(markerIds);
+    } catch (error) {
+      console.warn('Failed to remove Google Map markers', error);
+    }
+  };
+
+  const addMarkerSafely = async (map: GoogleMapInstance, marker: Marker) => {
+    await waitForFrame();
+    await wait(250);
+
+    if (!isActiveRef.current || mapRef.current !== map) return;
+
+    try {
+      await clearMarkers(map);
+      const markerId = await map.addMarker(marker);
+      markerIdsRef.current = [markerId];
+      setMapError(null);
+    } catch (firstError) {
+      const firstDetails = getErrorDetails(firstError);
+      console.warn('First Google Map marker attempt failed', firstError);
+
+      await wait(500);
+
+      if (!isActiveRef.current || mapRef.current !== map) return;
+
+      try {
+        await clearMarkers(map);
+        const markerId = await map.addMarker(marker);
+        markerIdsRef.current = [markerId];
+        setMapError(null);
+      } catch (retryError) {
+        const retryDetails = getErrorDetails(retryError);
+        console.error('Failed to add Google Map marker', retryError);
+        setMapError(
+          `Place selected, but the marker could not be added. First attempt: ${firstDetails}. Retry: ${retryDetails}`
+        );
+      }
+    }
+  };
+
+  useIonViewDidEnter(() => {
+    isActiveRef.current = true;
+    if (!mapContainerRef.current || mapRef.current) return;
+
+    const createMap = async () => {
+      const apiKey = import.meta.env.VITE_GOOGLE_MAPS_KEY as string;
+      if (!apiKey) {
+        setMapError(
+          'Google Maps API key is missing. Add VITE_GOOGLE_MAPS_KEY in Config to view the map.'
+        );
+        return;
+      }
+
+      try {
+        const map = await GoogleMap.create({
+          id: mapIdRef.current,
+          element: mapContainerRef.current!,
+          apiKey,
+          config: {
+            center: DEFAULT_CENTER,
+            zoom: 12,
+            disableDefaultUI: true,
+            mapTypeControl: false,
+            streetViewControl: false,
+            fullscreenControl: false,
+          } as unknown as {
+            center: typeof DEFAULT_CENTER;
+            zoom: number;
+          },
+        });
+
+        if (!isActiveRef.current) {
+          await map.destroy().catch((error) => {
+            console.warn('Failed to destroy inactive Google Map', error);
+          });
+          return;
+        }
+
+        mapRef.current = map;
+        setMapError(null);
+        await addMarkerSafely(map, HOME_MARKER);
+      } catch (error) {
+        const details = getErrorDetails(error);
+        console.error('Failed to load Google Map', error);
+        setMapError(`Unable to load the map: ${details}`);
+      }
+    };
+
+    createMap();
+  });
+
+  useIonViewWillLeave(() => {
+    isActiveRef.current = false;
+    searchRequestRef.current += 1;
+
+    const map = mapRef.current;
+    mapRef.current = null;
+    markerIdsRef.current = [];
+
+    if (!map) return;
+
+    map.destroy().catch((error) => {
+      console.warn('Failed to destroy Google Map', error);
+    });
+  });
+
+  useEffect(() => {
+    const trimmedQuery = query.trim();
+
+    if (suppressNextSearchRef.current) {
+      suppressNextSearchRef.current = false;
+      searchRequestRef.current += 1;
+      setSearchLoading(false);
+      return;
+    }
+
+    searchRequestRef.current += 1;
+    const requestId = searchRequestRef.current;
+
+    if (trimmedQuery.length < 2) {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      setSearchLoading(false);
+      return;
+    }
+
+    setShowSuggestions(true);
+    setSearchLoading(true);
+
+    const timeout = window.setTimeout(async () => {
+      try {
+        const { data, error } = await supabase.functions.invoke<{
+          suggestions: PlaceSuggestion[];
+          error?: string;
+        }>('places-autocomplete', {
+          body: {
+            input: trimmedQuery,
+            sessionToken: sessionTokenRef.current,
+            latitude:
+              selectedPlaceRef.current?.coordinate.lat ?? DEFAULT_CENTER.lat,
+            longitude:
+              selectedPlaceRef.current?.coordinate.lng ?? DEFAULT_CENTER.lng,
+          },
+        });
+
+        if (requestId !== searchRequestRef.current) return;
+
+        if (error) {
+          throw error;
+        }
+
+        if (data?.error) {
+          throw new Error(data.error);
+        }
+
+        setSuggestions(data?.suggestions ?? []);
+        setShowSuggestions(true);
+        setMapError(null);
+      } catch (error) {
+        if (requestId !== searchRequestRef.current) return;
+        const details = getErrorDetails(error);
+        console.error('Places autocomplete failed', error);
+        setSuggestions([]);
+        setShowSuggestions(true);
+        setMapError(`Place search failed: ${details}`);
+      } finally {
+        if (requestId === searchRequestRef.current) {
+          setSearchLoading(false);
+        }
+      }
+    }, 350);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [query]);
+
+  const recenterMap = async () => {
+    const map = mapRef.current;
+    if (!map) return;
+
+    const coordinate = selectedPlace?.coordinate ?? DEFAULT_CENTER;
+
+    try {
+      await map.setCamera({
+        coordinate,
+        zoom: selectedPlace ? 15 : 12,
+        animate: true,
+      });
+      setMapError(null);
+    } catch (error) {
+      const details = getErrorDetails(error);
+      console.error('Failed to recenter Google Map', error);
+      setMapError(`Map loaded, but recentering failed: ${details}`);
+    }
+  };
+
+  const selectSuggestion = async (suggestion: PlaceSuggestion) => {
+    const map = mapRef.current;
+    if (!map) return;
+
+    setDetailsLoading(true);
+    suppressNextSearchRef.current = true;
+    searchRequestRef.current += 1;
+    setQuery(suggestion.mainText || suggestion.text);
+    setSuggestions([]);
+    setShowSuggestions(false);
+    setSearchLoading(false);
+
+    try {
+      const { data, error } = await supabase.functions.invoke<{
+        place?: SelectedPlace;
+        error?: string;
+      }>('place-details', {
+        body: {
+          placeId: suggestion.placeId,
+          sessionToken: sessionTokenRef.current,
+        },
+      });
+
+      if (error) {
+        throw error;
+      }
+
+      if (data?.error) {
+        throw new Error(data.error);
+      }
+
+      if (!data?.place?.coordinate) {
+        throw new Error('Selected place does not include a map location.');
+      }
+
+      const place = data.place;
+      selectedPlaceRef.current = place;
+      setSelectedPlace(place);
+      sessionTokenRef.current = createSessionToken();
+
+      await map.setCamera({
+        coordinate: place.coordinate,
+        zoom: 15,
+        animate: true,
+      });
+
+      await addMarkerSafely(map, {
+        coordinate: place.coordinate,
+        title: place.name,
+        snippet: place.address,
+      });
+    } catch (error) {
+      const details = getErrorDetails(error);
+      console.error('Place selection failed', error);
+      setMapError(`Could not open that place: ${details}`);
+    } finally {
+      setDetailsLoading(false);
+    }
+  };
+
+  const clearSearch = () => {
+    searchRequestRef.current += 1;
+    suppressNextSearchRef.current = false;
+    setQuery('');
+    setSuggestions([]);
+    setShowSuggestions(false);
+    setSearchLoading(false);
+  };
+
+  return (
+    <IonPage style={{ background: 'transparent' }}>
+      <IonContent
+        fullscreen
+        style={{ '--background': 'transparent' } as React.CSSProperties}
+      >
+        <div
+          ref={mapContainerRef}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+          }}
+        />
+
+        <div
+          slot="fixed"
+          style={{
+            left: 16,
+            right: 16,
+            top: 'calc(14px + var(--ion-safe-area-top))',
+            position: 'absolute',
+            zIndex: 10,
+          }}
+        >
+          <div
+            style={{
+              background: '#ffffff',
+              borderRadius: 22,
+              padding: '10px 12px',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 10,
+              boxShadow: '0 10px 34px rgba(15, 23, 42, 0.18)',
+            }}
+          >
+            <IonIcon
+              icon={searchOutline}
+              style={{
+                fontSize: 22,
+                color: 'var(--ion-color-medium)',
+                flexShrink: 0,
+              }}
+            />
+            <input
+              value={query}
+              onChange={(event) => {
+                suppressNextSearchRef.current = false;
+                setShowSuggestions(true);
+                setQuery(event.target.value);
+              }}
+              onFocus={() => {
+                if (suggestions.length > 0 || query.trim().length >= 2) {
+                  setShowSuggestions(true);
+                }
+              }}
+              placeholder="Search places"
+              aria-label="Search places"
+              style={{
+                border: 0,
+                outline: 'none',
+                flex: 1,
+                minWidth: 0,
+                fontSize: 16,
+                color: 'var(--ion-color-dark)',
+                background: 'transparent',
+              }}
+            />
+            {(searchLoading || detailsLoading) && (
+              <IonSpinner
+                name="crescent"
+                style={{ width: 20, height: 20, flexShrink: 0 }}
+              />
+            )}
+            {query && !detailsLoading && (
+              <IonButton
+                fill="clear"
+                onClick={clearSearch}
+                aria-label="Clear search"
+                style={
+                  {
+                    '--border-radius': '999px',
+                    '--padding-start': '6px',
+                    '--padding-end': '6px',
+                    width: 34,
+                    height: 34,
+                    flexShrink: 0,
+                  } as React.CSSProperties
+                }
+              >
+                <IonIcon icon={closeOutline} slot="icon-only" />
+              </IonButton>
+            )}
+          </div>
+
+          {showSuggestions &&
+            query.trim().length >= 2 &&
+            !searchLoading &&
+            suggestions.length === 0 &&
+            !detailsLoading && (
+              <div
+                style={{
+                  marginTop: 10,
+                  background: '#ffffff',
+                  borderRadius: 18,
+                  padding: '14px 16px',
+                  color: 'var(--ion-color-medium)',
+                  fontSize: 14,
+                  boxShadow: '0 10px 28px rgba(15, 23, 42, 0.14)',
+                }}
+              >
+                No places found.
+              </div>
+            )}
+
+          {showSuggestions && suggestions.length > 0 && (
+            <div
+              style={{
+                marginTop: 10,
+                background: '#ffffff',
+                borderRadius: 20,
+                overflow: 'hidden',
+                boxShadow: '0 10px 28px rgba(15, 23, 42, 0.14)',
+              }}
+            >
+              {suggestions.map((suggestion) => (
+                <button
+                  key={suggestion.placeId}
+                  type="button"
+                  onClick={() => selectSuggestion(suggestion)}
+                  style={{
+                    width: '100%',
+                    border: 0,
+                    background: '#ffffff',
+                    padding: '14px 16px',
+                    display: 'flex',
+                    gap: 12,
+                    textAlign: 'left',
+                    borderBottom: '1px solid rgba(15, 23, 42, 0.08)',
+                  }}
+                >
+                  <IonIcon
+                    icon={mapOutline}
+                    style={{
+                      color: 'var(--ion-color-primary)',
+                      fontSize: 20,
+                      marginTop: 1,
+                      flexShrink: 0,
+                    }}
+                  />
+                  <span style={{ minWidth: 0 }}>
+                    <strong
+                      style={{
+                        display: 'block',
+                        color: 'var(--ion-color-dark)',
+                        fontSize: 14,
+                        fontWeight: 700,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {suggestion.mainText || suggestion.text}
+                    </strong>
+                    {suggestion.secondaryText && (
+                      <span
+                        style={{
+                          display: 'block',
+                          marginTop: 3,
+                          color: 'var(--ion-color-medium)',
+                          fontSize: 12,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {suggestion.secondaryText}
+                      </span>
+                    )}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div
+          slot="fixed"
+          style={{
+            left: 16,
+            right: 16,
+            bottom: 'calc(16px + var(--ion-safe-area-bottom))',
+            position: 'absolute',
+            zIndex: 9,
+          }}
+        >
+          <div
+            style={{
+              background: '#ffffff',
+              borderRadius: 24,
+              padding: 20,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 16,
+              boxShadow: '0 -8px 32px rgba(15, 23, 42, 0.14)',
+            }}
+          >
+            <div
+              style={{
+                width: selectedPlace?.photoUrl ? 72 : 44,
+                height: selectedPlace?.photoUrl ? 72 : 44,
+                borderRadius: selectedPlace?.photoUrl ? 18 : 14,
+                background: 'rgba(var(--ion-color-primary-rgb), 0.12)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+                overflow: 'hidden',
+              }}
+            >
+              {selectedPlace?.photoUrl ? (
+                <img
+                  src={selectedPlace.photoUrl}
+                  alt={selectedPlace.name}
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    display: 'block',
+                  }}
+                />
+              ) : (
+                <IonIcon
+                  icon={mapOutline}
+                  style={{ fontSize: 22, color: 'var(--ion-color-primary)' }}
+                />
+              )}
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <h1
+                style={{
+                  margin: '0 0 4px',
+                  fontSize: 18,
+                  fontWeight: 700,
+                  color: 'var(--ion-color-dark)',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {selectedPlace?.name ?? 'Explore the map'}
+              </h1>
+              <p
+                style={{
+                  margin: 0,
+                  color: 'var(--ion-color-medium)',
+                  fontSize: 13,
+                  lineHeight: 1.4,
+                }}
+              >
+                {selectedPlace?.address ??
+                  'Search for a place to drop a marker.'}
+              </p>
+            </div>
+            <IonButton
+              fill="clear"
+              onClick={recenterMap}
+              aria-label="Recenter map"
+              style={
+                {
+                  '--border-radius': '999px',
+                  '--padding-start': '10px',
+                  '--padding-end': '10px',
+                  flexShrink: 0,
+                } as React.CSSProperties
+              }
+            >
+              <IonIcon icon={locateOutline} slot="icon-only" />
+            </IonButton>
+          </div>
+
+          {mapError && (
+            <div
+              style={{
+                marginTop: 12,
+                background: '#ffffff',
+                borderRadius: 16,
+                padding: '12px 16px',
+                color: 'var(--ion-color-danger)',
+                fontSize: 13,
+                lineHeight: 1.4,
+              }}
+            >
+              {mapError}
+            </div>
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
 
 export default Home;

src/supabase.ts

@@ -0,0 +1,7 @@
+import { createClient } from '@supabase/supabase-js';
+import type { Database } from './database.types';
+
+export const supabase = createClient<Database>(
+  'https://twfddmesszhmlsvdgrcv.supabase.co',
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR3ZmRkbWVzc3pobWxzdmRncmN2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzk1Njg0NDQsImV4cCI6MjA5NTE0NDQ0NH0.52RDOTgew7wQLK4dILj_Trxox7VLr7pv6dYX--UO10M',
+);

src/theme/variables.css

@@ -1,152 +1,65 @@
 /* Ionic CSS Variables — customise to match your app's brand */
 :root {
-  --ion-color-primary: #5e6ad2;
+  --ion-color-primary: #3880ff;
-  --ion-color-primary-rgb: 94, 106, 210;
+  --ion-color-primary-rgb: 56, 128, 255;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #535db9;
+  --ion-color-primary-shade: #3171e0;
-  --ion-color-primary-tint: #6e79d7;
+  --ion-color-primary-tint: #4c8dff;
 
-  --ion-color-secondary: #7a89f4;
+  --ion-color-secondary: #3dc2ff;
-  --ion-color-secondary-rgb: 122, 137, 244;
+  --ion-color-secondary-rgb: 61, 194, 255;
   --ion-color-secondary-contrast: #ffffff;
   --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #6b79d7;
+  --ion-color-secondary-shade: #36abe0;
-  --ion-color-secondary-tint: #8895f5;
+  --ion-color-secondary-tint: #50c8ff;
 
-  --ion-color-tertiary: #8f78d8;
+  --ion-color-tertiary: #5260ff;
-  --ion-color-tertiary-rgb: 143, 120, 216;
+  --ion-color-tertiary-rgb: 82, 96, 255;
   --ion-color-tertiary-contrast: #ffffff;
   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #7e6ac0;
+  --ion-color-tertiary-shade: #4854e0;
-  --ion-color-tertiary-tint: #9a86dc;
+  --ion-color-tertiary-tint: #6370ff;
 
-  --ion-color-success: #3aa67a;
+  --ion-color-success: #2dd36f;
-  --ion-color-success-rgb: 58, 166, 122;
+  --ion-color-success-rgb: 45, 211, 111;
   --ion-color-success-contrast: #ffffff;
   --ion-color-success-contrast-rgb: 255, 255, 255;
-  --ion-color-success-shade: #33926b;
+  --ion-color-success-shade: #28ba62;
-  --ion-color-success-tint: #4eb088;
+  --ion-color-success-tint: #42d77d;
 
-  --ion-color-warning: #dfb25a;
+  --ion-color-warning: #ffc409;
-  --ion-color-warning-rgb: 223, 178, 90;
+  --ion-color-warning-rgb: 255, 196, 9;
-  --ion-color-warning-contrast: #2d2520;
+  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 45, 37, 32;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #c49d4f;
+  --ion-color-warning-shade: #e0ac08;
-  --ion-color-warning-tint: #e2bb6b;
+  --ion-color-warning-tint: #ffca22;
 
-  --ion-color-danger: #cf6679;
+  --ion-color-danger: #eb445a;
-  --ion-color-danger-rgb: 207, 102, 121;
+  --ion-color-danger-rgb: 235, 68, 90;
   --ion-color-danger-contrast: #ffffff;
   --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #b65a6a;
+  --ion-color-danger-shade: #cf3c4f;
-  --ion-color-danger-tint: #d57587;
+  --ion-color-danger-tint: #ed576b;
 
-  --ion-color-dark: #1f2430;
+  --ion-color-dark: #222428;
-  --ion-color-dark-rgb: 31, 36, 48;
+  --ion-color-dark-rgb: 34, 36, 40;
   --ion-color-dark-contrast: #ffffff;
   --ion-color-dark-contrast-rgb: 255, 255, 255;
-  --ion-color-dark-shade: #1b202a;
+  --ion-color-dark-shade: #1e2023;
-  --ion-color-dark-tint: #353946;
+  --ion-color-dark-tint: #383a3e;
 
-  --ion-color-medium: #7f8697;
+  --ion-color-medium: #92949c;
-  --ion-color-medium-rgb: 127, 134, 151;
+  --ion-color-medium-rgb: 146, 148, 156;
   --ion-color-medium-contrast: #ffffff;
   --ion-color-medium-contrast-rgb: 255, 255, 255;
-  --ion-color-medium-shade: #707686;
+  --ion-color-medium-shade: #808289;
-  --ion-color-medium-tint: #8c93a2;
+  --ion-color-medium-tint: #9d9fa6;
 
-  --ion-color-light: #f3f5fb;
+  --ion-color-light: #f4f5f8;
-  --ion-color-light-rgb: 243, 245, 251;
+  --ion-color-light-rgb: 244, 245, 248;
-  --ion-color-light-contrast: #1f2430;
+  --ion-color-light-contrast: #000000;
-  --ion-color-light-contrast-rgb: 31, 36, 48;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
-  --ion-color-light-shade: #d6d8dd;
+  --ion-color-light-shade: #d7d8da;
-  --ion-color-light-tint: #f4f6fb;
+  --ion-color-light-tint: #f5f6f9;
-
-  --app-background: #ffffff;
-  --app-surface: #ffffff;
-  --app-surface-secondary: #f6f7fb;
-  --app-text-primary: #202532;
-  --app-text-secondary: rgba(32, 37, 50, 0.68);
-  --app-text-tertiary: rgba(32, 37, 50, 0.46);
-  --app-accent-soft: rgba(94, 106, 210, 0.12);
-  --app-accent-softer: rgba(94, 106, 210, 0.08);
-  --app-success-soft: rgba(58, 166, 122, 0.12);
-  --app-shadow: 0 18px 48px rgba(82, 95, 140, 0.08);
-}
-
-body {
-  background: var(--app-background);
-  color: var(--app-text-primary);
-}
-
-ion-content.home-content {
-  --background: var(--app-background);
-}
-
-.home-toolbar {
-  --background: rgba(255, 255, 255, 0.92);
-  --border-width: 0;
-  --border-color: transparent;
-  --color: var(--app-text-primary);
-  box-shadow: none;
-  backdrop-filter: blur(18px);
-}
-
-ion-header.home-header::after {
-  display: none;
-}
-
-.home-shell {
-  padding: calc(88px + var(--ion-safe-area-top)) 24px
-    calc(32px + var(--ion-safe-area-bottom));
-  display: flex;
-  flex-direction: column;
-}
-
-.minimal-home-shell {
-  min-height: 100%;
-  justify-content: flex-start;
-}
-
-.minimal-welcome-card {
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.subtle-welcome-card {
-  max-width: 420px;
-  margin: 0;
-  padding: 28px 24px;
-  background: var(--app-surface-secondary);
-  border-radius: 28px;
-}
-
-.minimal-welcome-card h1 {
-  margin: 0;
-  color: var(--app-text-primary);
-  font-size: 32px;
-  line-height: 1.12;
-  letter-spacing: -0.03em;
-  font-weight: 700;
-}
-
-.minimal-subtitle {
-  margin: 0;
-  color: var(--app-text-secondary);
-  font-size: 15px;
-  line-height: 1.55;
-}
-
-@media (min-width: 680px) {
-  .home-shell {
-    max-width: 720px;
-    margin: 0 auto;
-  }
-
-  .minimal-welcome-card h1 {
-    font-size: 40px;
-  }
 }

vite.config.ts

@@ -1,6 +1,3 @@
-// NOTE: @ionic/react and @ionic/react-router are pinned to 8.8.7 in package.json.
-// 8.8.8 introduced a regression that breaks IonRouterOutlet page transition animations.
-// Do not upgrade until the upstream fix is confirmed.
 import { defineConfig, type Plugin } from 'vite';
 import react from '@vitejs/plugin-react';
 
@@ -24,7 +21,9 @@ export default defineConfig({
     port: 8100,
     allowedHosts: true,
     hmr: {
-      clientPort: process.env.HMR_CLIENT_PORT ? parseInt(process.env.HMR_CLIENT_PORT) : undefined,
+      clientPort: process.env.HMR_CLIENT_PORT
+        ? parseInt(process.env.HMR_CLIENT_PORT)
+        : undefined,
     },
   },
   css: { devSourcemap: false },

yarn.lock

@@ -1864,9 +1864,9 @@ __metadata:
   linkType: hard
 
 "@types/google.maps@npm:^3.53.1, @types/google.maps@npm:^3.58.1":
-  version: 3.65.0
+  version: 3.64.1
-  resolution: "@types/google.maps@npm:3.65.0"
+  resolution: "@types/google.maps@npm:3.64.1"
-  checksum: 10c0/d41bc1ed2c63f297a8956b097953515e87aa21d25ef918102067efa97113ea558bb42be521337af93698b36d4c6283439b3e087b4b57c7033f59128cdc7159cb
+  checksum: 10c0/4ade621941045c7e1b1ead30e0b4025b7fccf2b4cfb7c9b5f48c31cceb964c74d17c28b6105be15b99df85c23e19b25415e9fd7bdd7b1d40b7000d22dbbb4e7e
   languageName: node
   linkType: hard
 
@@ -2969,8 +2969,8 @@ __metadata:
   linkType: hard
 
 "protobufjs@npm:^7.2.5":
-  version: 7.6.2
+  version: 7.6.1
-  resolution: "protobufjs@npm:7.6.2"
+  resolution: "protobufjs@npm:7.6.1"
   dependencies:
     "@protobufjs/aspromise": "npm:^1.1.2"
     "@protobufjs/base64": "npm:^1.1.2"
@@ -2984,7 +2984,7 @@ __metadata:
     "@protobufjs/utf8": "npm:^1.1.1"
     "@types/node": "npm:>=13.7.0"
     long: "npm:^5.3.2"
-  checksum: 10c0/3c552dfe3cbcfad2d6c312a76cd189cf5be9fb36b203f6292f79c6020d675f7f33d5531ce312441c42ae75deb24ced32760e64fe4aa3d5b3c2295fd67cea270c
+  checksum: 10c0/364c6914facac19ace915e353f71c5d5996bfa8177a3a68c09bd2513a3ecf780538aca06cb3439237f50489db2fae321c4a4db60fd7f9ec65315b7ad66bea029
   languageName: node
   linkType: hard