create embeddable map view, finish migration to route groups

src/app/(app)/layout.tsx

@@ -1,35 +1,4 @@
-import type { Metadata, Viewport } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
 import Header from "@/components/Header";
-import { ConfigProvider } from "@/components/ConfigContext";
-import { QueryProvider } from "@/components/QueryProvider";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "MeshExplorer",
-  description: "A real-time map, chat client, and packet analysis tool for mesh networks using MeshCore and Meshtastic.",
-  icons: {
-    icon: { url: "/favicon.svg", type: "image/svg+xml" },
-    apple: { url: "/favicon.svg", type: "image/svg+xml" }
-  },
-};
-
-export const viewport: Viewport = {
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "oklch(92.2% 0 0)" }, // neutral-200
-    { media: "(prefers-color-scheme: dark)", color: "oklch(26.9% 0 0)" }, //neutral-800
-  ],
-};
 
 export default function RootLayout({
   children,
@@ -37,20 +6,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-        style={{ '--header-height': '64px' } as React.CSSProperties}
-      >
-        <div className="flex flex-col min-h-screen w-full">
-          <QueryProvider>
-            <ConfigProvider>
-              <Header />
-              <main className="flex-1 flex flex-col w-full bg-neutral-200 dark:bg-neutral-800">{children}</main>
-            </ConfigProvider>
-          </QueryProvider>
-        </div>
-      </body>
-    </html>
+    <>
+      <Header />
+      <main className="flex-1 flex flex-col w-full bg-neutral-200 dark:bg-neutral-800">
+        {children}
+      </main>
+    </>
   );
 }

src/app/(embed)/embed/map/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+import dynamic from "next/dynamic";
+import { ExternalLink } from "lucide-react";
+
+const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
+
+export default function EmbedMapPage() {
+  return (
+    <div className="relative w-full h-screen">
+      <MapView />
+      <div className="absolute bottom-4 left-4 z-[1000]">
+        <a
+          href="/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="bg-white/90 dark:bg-gray-800/90 hover:bg-white dark:hover:bg-gray-800 px-3 py-2 rounded-md shadow-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white transition-colors duration-200 flex items-center gap-2"
+        >
+          MeshExplorer
+          <ExternalLink className="w-4 h-4" />
+        </a>
+      </div>
+    </div>
+  );
+}

src/app/(embed)/layout.tsx

@@ -0,0 +1,11 @@
+export default function EmbedLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="w-full h-screen">
+      {children}
+    </div>
+  );
+}

src/app/layout.tsx

@@ -0,0 +1,54 @@
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ConfigProvider } from "@/components/ConfigContext";
+import { QueryProvider } from "@/components/QueryProvider";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "MeshExplorer",
+  description: "A real-time map, chat client, and packet analysis tool for mesh networks using MeshCore and Meshtastic.",
+  icons: {
+    icon: { url: "/favicon.svg", type: "image/svg+xml" },
+    apple: { url: "/favicon.svg", type: "image/svg+xml" }
+  },
+};
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "oklch(92.2% 0 0)" }, // neutral-200
+    { media: "(prefers-color-scheme: dark)", color: "oklch(26.9% 0 0)" }, //neutral-800
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        style={{ '--header-height': '64px' } as React.CSSProperties}
+      >
+        <div className="flex flex-col min-h-screen w-full">
+          <QueryProvider>
+            <ConfigProvider>
+              {children}
+            </ConfigProvider>
+          </QueryProvider>
+        </div>
+      </body>
+    </html>
+  );
+}