refactor embed page to single page (#268)

* refactor embed page to single page

* starbase does not support pragma list

src/app/(theme)/embed/[driver]/page-client.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { Studio } from "@/components/gui/studio";
+import { StudioExtensionManager } from "@/core/extension-manager";
+import {
+  createMySQLExtensions,
+  createPostgreSQLExtensions,
+  createSQLiteExtensions,
+} from "@/core/standard-extension";
+import {
+  IframeMySQLDriver,
+  IframePostgresDriver,
+  IframeSQLiteDriver,
+} from "@/drivers/iframe-driver";
+import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
+import DoltExtension from "@/extensions/dolt";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useMemo } from "react";
+
+export default function EmbedPageClient({
+  driverName,
+}: {
+  driverName: string;
+}) {
+  const searchParams = useSearchParams();
+
+  const driver = useMemo(() => {
+    return createDatabaseDriver(driverName);
+  }, [driverName]);
+
+  const savedDocDriver = useMemo(() => {
+    if (window.outerbaseIpc?.docs) {
+      return new ElectronSavedDocs();
+    }
+  }, []);
+
+  const extensions = useMemo(() => {
+    return new StudioExtensionManager(createEmbedExtensions(driverName));
+  }, [driverName]);
+
+  useEffect(() => {
+    return driver.listen();
+  }, [driver]);
+
+  return (
+    <Studio
+      driver={driver}
+      extensions={extensions}
+      docDriver={savedDocDriver}
+      name={searchParams.get("name") || "Unnamed Connection"}
+      color={searchParams.get("color") || "gray"}
+    />
+  );
+}
+
+function createDatabaseDriver(driverName: string) {
+  if (driverName === "turso") {
+    return new IframeSQLiteDriver({
+      supportPragmaList: false,
+      supportBigInt: true,
+    });
+  } else if (driverName === "sqlite") {
+    return new IframeSQLiteDriver();
+  } else if (driverName === "starbase") {
+    return new IframeSQLiteDriver({
+      supportPragmaList: false,
+    });
+  } else if (driverName === "mysql" || driverName === "dolt") {
+    return new IframeMySQLDriver();
+  } else if (driverName === "postgres") {
+    return new IframePostgresDriver();
+  }
+
+  return new IframeSQLiteDriver();
+}
+
+function createEmbedExtensions(driverName: string) {
+  if (driverName === "turso") {
+    return createSQLiteExtensions();
+  } else if (driverName === "sqlite" || driverName === "starbase") {
+    return createSQLiteExtensions();
+  } else if (driverName === "mysql") {
+    return createMySQLExtensions();
+  } else if (driverName === "dolt") {
+    return [...createMySQLExtensions(), new DoltExtension()];
+  } else if (driverName === "postgres") {
+    return createPostgreSQLExtensions();
+  }
+
+  return createSQLiteExtensions();
+}

src/app/(theme)/embed/[driver]/page.tsx

@@ -0,0 +1,48 @@
+import ClientOnly from "@/components/client-only";
+import ThemeLayout from "../../theme_layout";
+import EmbedPageClient from "./page-client";
+
+export interface EmbedPageProps {
+  searchParams: Promise<{
+    theme?: string;
+    disableThemeToggle?: string;
+    [key: string]: any;
+  }>;
+  params: Promise<{
+    driver: string;
+  }>;
+}
+
+export default async function EmbedPage(props: EmbedPageProps) {
+  const searchParams = await props.searchParams;
+  const driver = (await props.params).driver;
+
+  let overrideTheme: "dark" | "light" | undefined = undefined;
+  const disableToggle = searchParams.disableThemeToggle === "1";
+
+  if (searchParams.theme) {
+    overrideTheme = searchParams.theme === "dark" ? "dark" : "light";
+  }
+
+  const overrideThemeVariables: Record<string, string> = {};
+
+  for (const key in searchParams) {
+    if (!key.startsWith("themeVariables[")) {
+      continue;
+    }
+
+    overrideThemeVariables[key.slice(15, -1)] = searchParams[key];
+  }
+
+  return (
+    <ThemeLayout
+      overrideTheme={overrideTheme}
+      disableToggle={disableToggle}
+      overrideThemeVariables={overrideThemeVariables}
+    >
+      <ClientOnly>
+        <EmbedPageClient driverName={driver} />
+      </ClientOnly>
+    </ThemeLayout>
+  );
+}