fix: splash screen + ErrorBoundary dark bg for Capacitor APK white screen

- Add SplashScreen.hide() call in main.tsx so splash dismisses when JS loads
- Set launchShowDuration: 0 + launchAutoHide: true in capacitor.config.ts
- Fix ErrorBoundary to use bg-black text-white instead of bg-background
  (bg-background = white before dark class is applied = white screen on error)
- These three combined should eliminate the white screen in the APK

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>

capacitor.config.ts

@@ -19,7 +19,8 @@ const config: CapacitorConfig = {
   },
   plugins: {
     SplashScreen: {
-      launchShowDuration: 1500,
+      launchShowDuration: 0,
+      launchAutoHide: true,
       backgroundColor: '#000000',
       androidSplashResourceName: 'splash',
       androidScaleType: 'CENTER_CROP',

index.html

@@ -39,9 +39,8 @@
     <meta name="twitter:description" content="Discover skate spots, find coaches, join events on Nostr.">
     <meta name="twitter:image" content="https://skate-spots.org/images/icon-1024.png">
 
-    <!-- Leaflet CSS (loaded via CDN to avoid build issues) -->
+    <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
-    <!-- Leaflet MarkerCluster CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" crossorigin="">
     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" crossorigin="">
   </head>

src/components/ErrorBoundary.tsx

@@ -54,7 +54,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
       }
 
       return (
-        <div className="min-h-screen bg-background flex items-center justify-center p-4">
+        <div className="min-h-screen bg-black text-white flex items-center justify-center p-4">
           <div className="max-w-md w-full space-y-4">
             <div className="text-center">
               <h2 className="text-2xl font-bold text-foreground mb-2">

src/main.tsx

@@ -7,6 +7,14 @@ import { ErrorBoundary } from '@/components/ErrorBoundary';
 import App from './App.tsx';
 import './index.css';
 
+// Hide Capacitor splash screen once JS is ready
+// Must be called manually when autoHide: false (or as a safety net)
+if (typeof window !== 'undefined') {
+  import('@capacitor/splash-screen').then(({ SplashScreen }) => {
+    SplashScreen.hide().catch(() => {/* not in Capacitor context */});
+  }).catch(() => {/* web build - no Capacitor */});
+}
+
 // Outfit font for body text
 import '@fontsource-variable/outfit';
 // Bebas Neue — bold condensed display font for headlines
@@ -16,7 +24,7 @@ import '@fontsource/barlow-condensed/400.css';
 import '@fontsource/barlow-condensed/600.css';
 import '@fontsource/barlow-condensed/700.css';
 
-// Leaflet CSS is loaded via CDN in index.html to avoid build issues
+// Leaflet CSS is loaded via CDN in index.html
 
 /**
  * AMBER CALLBACK PRE-CHECK