Full PWA Support Implementation

app/layout.tsx

@@ -16,6 +16,7 @@ import { CalendarToggleProvider } from '@/components/calendar-toggle-context'
 import { MapLoadingProvider } from '@/components/map-loading-context';
 import ConditionalLottie from '@/components/conditional-lottie';
 import { MapProvider as MapContextProvider } from '@/components/map/map-context'
+import { IOSInstallPrompt } from '@/components/pwa/ios-install-prompt'
 
 const fontSans = FontSans({
   subsets: ['latin'],
@@ -28,14 +29,22 @@ const fontPoppins = Poppins({
   weight: ['400', '500', '600', '700']
 })
 
-const title = ''
+const title = 'QCX - AI-powered Search'
 const description =
-  'language to Maps'
+  'A minimalistic AI-powered search tool that uses advanced models for deep analysis and geospatial data.'
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://www.qcx.world'),
   title,
   description,
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: 'default',
+    title: 'QCX',
+  },
+  formatDetection: {
+    telephone: false,
+  },
   openGraph: {
     title,
     description
@@ -52,7 +61,8 @@ export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
   minimumScale: 1,
-  maximumScale: 1
+  maximumScale: 1,
+  themeColor: '#171717'
 }
 
 export default function RootLayout({
@@ -84,6 +94,7 @@ export default function RootLayout({
                   <Header />
                   <ConditionalLottie />
                   {children}
+                  <IOSInstallPrompt />
                   <Sidebar />
                   <Footer />
                   <Toaster />

app/manifest.ts

@@ -0,0 +1,42 @@
+import { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'QCX - AI-powered Search & Analysis',
+    short_name: 'QCX',
+    description: 'A minimalistic AI-powered search tool that uses advanced models for deep analysis and geospatial data.',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#171717',
+    theme_color: '#171717',
+    icons: [
+      {
+        src: '/icon-192.png',
+        sizes: '192x192',
+        type: 'image/png',
+        purpose: 'any',
+      },
+      {
+        src: '/icon-512.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'any',
+      },
+      {
+        src: '/icon-1024-maskable.png',
+        sizes: '1024x1024',
+        type: 'image/png',
+        purpose: 'maskable',
+      },
+    ],
+    screenshots: [
+      {
+        src: '/images/opengraph-image.png',
+        sizes: '1200x630',
+        type: 'image/png',
+        label: 'QCX Home Screen',
+      },
+    ],
+    categories: ['search', 'ai', 'productivity'],
+  }
+}

components/pwa/ios-install-prompt.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { X, Share } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export function IOSInstallPrompt() {
+  const [showPrompt, setShowPrompt] = useState(false)
+
+  useEffect(() => {
+    // Check if it's iOS
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
+
+    // Check if it's already in standalone mode (installed)
+    const isStandalone = window.matchMedia('(display-mode: standalone)').matches ||
+                         (window.navigator as any).standalone
+
+    // Check if the prompt was already dismissed this session
+    const isDismissed = sessionStorage.getItem('ios-pwa-prompt-dismissed')
+
+    if (isIOS && !isStandalone && !isDismissed) {
+      setShowPrompt(true)
+    }
+  }, [])
+
+  const handleDismiss = () => {
+    setShowPrompt(false)
+    sessionStorage.setItem('ios-pwa-prompt-dismissed', 'true')
+  }
+
+  if (!showPrompt) return null
+
+  return (
+    <div className="fixed bottom-4 left-4 right-4 z-[100] md:max-w-sm md:left-auto">
+      <div className="bg-background border rounded-lg shadow-lg p-4 relative animate-in fade-in slide-in-from-bottom-4 duration-300">
+        <button
+          onClick={handleDismiss}
+          className="absolute top-2 right-2 text-muted-foreground hover:text-foreground"
+        >
+          <X className="h-4 w-4" />
+        </button>
+        <div className="flex items-center gap-3">
+          <div className="bg-primary/10 p-2 rounded-md">
+            <Share className="h-6 w-6 text-primary" />
+          </div>
+          <div>
+            <h3 className="font-semibold text-sm">Install QCX</h3>
+            <p className="text-xs text-muted-foreground mt-1">
+              Tap <span className="inline-block bg-muted px-1 rounded mx-1">Share</span> then <span className="font-semibold">Add to Home Screen</span> to install as an app.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}