feat: add PWA manifest and Apple icon, and enhance map with fly-to selected shop functionality.

src/app/apple-icon.tsx

@@ -0,0 +1,34 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const size = {
+    width: 32,
+    height: 32,
+};
+export const contentType = 'image/png';
+
+export default function Icon() {
+    return new ImageResponse(
+        (
+            <div
+                style={{
+                    fontSize: 24,
+                    background: '#8B4513',
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: 'white',
+                    borderRadius: '20%',
+                }}
+            >
+                ☕
+            </div>
+        ),
+        {
+            ...size,
+        }
+    );
+}

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import "~/styles/globals.css";
 
-import { type Metadata } from "next";
+import { type Metadata, type Viewport } from "next";
 import { PT_Serif } from "next/font/google";
 
 import { ThemeProvider } from "~/components/ThemeProvider";
@@ -11,6 +11,14 @@ export const metadata: Metadata = {
   icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 
+export const viewport: Viewport = {
+  themeColor: "#8B4513",
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
 const ptSerif = PT_Serif({
   subsets: ["latin"],
   weight: ["400", "700"],

src/app/manifest.ts

@@ -0,0 +1,25 @@
+import { type MetadataRoute } from 'next';
+
+export default function manifest(): MetadataRoute.Manifest {
+    return {
+        name: 'Lewisburg Coffee Map',
+        short_name: 'Coffee Map',
+        description: 'Find the best coffee in Lewisburg, PA',
+        start_url: '/',
+        display: 'standalone',
+        background_color: '#ffffff',
+        theme_color: '#8B4513',
+        icons: [
+            {
+                src: '/favicon.ico',
+                sizes: 'any',
+                type: 'image/x-icon',
+            },
+            {
+                src: '/icon.svg',
+                sizes: 'any',
+                type: 'image/svg+xml',
+            }
+        ],
+    };
+}

src/app/page.tsx

@@ -17,6 +17,7 @@ export default function HomePage() {
         <MapLoader
           shops={COFFEE_SHOPS}
           onShopSelect={(shop: typeof COFFEE_SHOPS[0]) => setSelectedShop(shop)}
+          selectedShop={selectedShop}
         />
       </div>