feat: add mysql driver init code

src/app/(theme)/embed/mysql/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import MyStudio from "@/components/my-studio";
+import { IframeMySQLDriver } from "@/drivers/iframe-driver";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useMemo } from "react";
+
+export default function EmbedPageClient() {
+  const searchParams = useSearchParams();
+  const driver = useMemo(() => new IframeMySQLDriver(), []);
+
+  useEffect(() => {
+    return driver.listen();
+  }, [driver]);
+
+  return (
+    <MyStudio
+      driver={driver}
+      color={searchParams.get("color") || "gray"}
+      name={searchParams.get("name") || "Unnamed Connection"}
+    />
+  );
+}

src/app/(theme)/embed/sqlite/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import MyStudio from "@/components/my-studio";
-import IframeDriver from "@/drivers/iframe-driver";
+import { IframeSQLiteDriver } from "@/drivers/iframe-driver";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo } from "react";
 
 export default function EmbedPageClient() {
   const searchParams = useSearchParams();
-  const driver = useMemo(() => new IframeDriver(), []);
+  const driver = useMemo(() => new IframeSQLiteDriver(), []);
 
   useEffect(() => {
     return driver.listen();

src/components/gui/database-gui.tsx

@@ -122,7 +122,7 @@ export default function DatabaseGui() {
       {
         text: "New Table",
         onClick: () => {
-          openTab({ type: "schema" });
+          openTab({ type: "schema", schemaName: "main" });
         },
       },
     ];

src/components/gui/schema-editor/column-fk-popup.tsx

@@ -64,6 +64,7 @@ export default function ColumnForeignKeyPopup({
                     },
                   });
                 }}
+                schemaName={"main"}
                 tableName={constraint.foreignTableName}
               />
             </div>

src/components/gui/schema-editor/schema-save-dialog.tsx

@@ -20,11 +20,13 @@ import { useCallback, useState } from "react";
 import SchemaEditorTab from "../tabs/schema-editor-tab";
 
 export default function SchemaSaveDialog({
+  schemaName,
   schema,
   previewScript,
   onClose,
   fetchTable,
 }: {
+  schemaName: string;
   schema: DatabaseTableSchemaChange;
   previewScript: string[];
   onClose: () => void;
@@ -44,7 +46,12 @@ export default function SchemaSaveDialog({
         if (schema.name.new !== schema.name.old) {
           refreshSchema();
           replaceCurrentTab({
-            component: <SchemaEditorTab tableName={schema.name.new} />,
+            component: (
+              <SchemaEditorTab
+                tableName={schema.name.new}
+                schemaName={schemaName}
+              />
+            ),
             key: "_schema_" + schema.name.new,
             identifier: "_schema_" + schema.name.new,
             title: "Edit " + schema.name.new,
@@ -60,6 +67,7 @@ export default function SchemaSaveDialog({
       });
   }, [
     onClose,
+    schemaName,
     databaseDriver,
     schema,
     fetchTable,

src/components/gui/schema-sidebar-list.tsx

@@ -1,4 +1,4 @@
-import { LucideCog, LucideView, Table2 } from "lucide-react";
+import { LucideCog, LucideDatabase, LucideView, Table2 } from "lucide-react";
 import { OpenContextMenuList } from "@/messages/open-context-menu";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { openTab } from "@/messages/open-tab";
@@ -29,7 +29,7 @@ function prepareListViewItem(
       data: s,
       icon: icon,
       iconColor: iconClassName,
-      key: s.name,
+      key: s.schemaName + "." + s.name,
       name: s.name,
     };
   });
@@ -90,7 +90,7 @@ function groupByFtsTable(items: ListViewItem<DatabaseSchemaItem>[]) {
 export default function SchemaList({ search }: Readonly<SchemaListProps>) {
   const [selected, setSelected] = useState("");
   const [collapsed, setCollapsed] = useState(new Set<string>());
-  const { refresh, currentSchema } = useSchema();
+  const { refresh, schema } = useSchema();
 
   useEffect(() => {
     setSelected("");
@@ -115,6 +115,7 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
           onClick: () => {
             openTab({
               type: "schema",
+              schemaName: item?.schemaName ?? "",
             });
           },
         },
@@ -125,6 +126,7 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
                 openTab({
                   tableName: item?.name,
                   type: "schema",
+                  schemaName: item?.schemaName ?? "",
                 });
               },
             }
@@ -137,10 +139,18 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
   );
 
   const filteredSchema = useMemo(() => {
-    return groupByFtsTable(
-      groupTriggerByTable(prepareListViewItem(currentSchema))
-    );
-  }, [currentSchema]);
+    return Object.entries(schema).map(([s, tables]) => {
+      return {
+        data: {},
+        icon: LucideDatabase,
+        name: s,
+        key: s.toString(),
+        children: groupByFtsTable(
+          groupTriggerByTable(prepareListViewItem(tables))
+        ),
+      } as ListViewItem<DatabaseSchemaItem>;
+    });
+  }, [schema]);
 
   const filterCallback = useCallback(
     (item: ListViewItem<DatabaseSchemaItem>) => {
@@ -165,6 +175,7 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
         if (item.data.type === "table" || item.data.type === "view") {
           openTab({
             type: "table",
+            schemaName: item.data.schemaName ?? "",
             tableName: item.data.name,
           });
         } else if (item.data.type === "trigger") {

src/components/gui/schema-sidebar.tsx

@@ -10,6 +10,7 @@ export default function SchemaView() {
   const onNewTable = useCallback(() => {
     openTab({
       type: "schema",
+      schemaName: "main",
     });
   }, []);
 

src/components/gui/table-cell/generic-cell.tsx

@@ -12,16 +12,10 @@ import {
 import {
   DatabaseResultSet,
   DatabaseValue,
-  describeTableColumnType,
   TableColumnDataType,
 } from "@/drivers/base-driver";
 import { useDatabaseDriver } from "@/context/driver-provider";
 import { convertDatabaseValueToString } from "@/drivers/sqlite/sql-helper";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 
 interface TableCellProps<T = unknown> {
   align?: "left" | "right";
@@ -35,21 +29,27 @@ interface TableCellProps<T = unknown> {
 }
 
 interface SneakpeakProps {
+  fkSchemaName: string;
   fkTableName: string;
   fkColumnName: string;
   value: DatabaseValue;
 }
 
-function SnippetRow({ fkTableName, fkColumnName, value }: SneakpeakProps) {
+function SnippetRow({
+  fkSchemaName,
+  fkTableName,
+  fkColumnName,
+  value,
+}: SneakpeakProps) {
   const { databaseDriver } = useDatabaseDriver();
   const [data, setData] = useState<DatabaseResultSet>();
 
   useEffect(() => {
     databaseDriver
-      .findFirst(fkTableName, { [fkColumnName]: value })
+      .findFirst(fkSchemaName, fkTableName, { [fkColumnName]: value })
       .then(setData)
       .catch(console.error);
-  }, [databaseDriver, fkTableName, fkColumnName, value]);
+  }, [databaseDriver, fkSchemaName, fkTableName, fkColumnName, value]);
 
   if (!data) {
     return (
@@ -177,7 +177,6 @@ function BlobCellValue({
 
 export default function GenericCell({
   value,
-  valueType,
   onFocus,
   isChanged,
   focus,
@@ -206,6 +205,7 @@ export default function GenericCell({
       return (
         <div className="flex items-center shrink-0 cursor-pointer ml-2">
           <ForeignKeyColumnSnippet
+            fkSchemaName={"main"}
             fkColumnName={header.foreignKey.foreignColumns[0] as string}
             fkTableName={header.foreignKey.foreignTableName}
             value={value}

src/components/gui/table-combobox/TableColumnCombobox.tsx

@@ -17,9 +17,11 @@ import { useDatabaseDriver } from "@/context/driver-provider";
 export default function TableColumnCombobox({
   value,
   tableName,
+  schemaName,
   onChange,
   disabled,
 }: Readonly<{
+  schemaName: string;
   tableName: string;
   value?: string;
   onChange: (value: string) => void;
@@ -32,19 +34,20 @@ export default function TableColumnCombobox({
   useEffect(() => {
     if (tableName) {
       databaseDriver
-        .tableSchema(tableName)
+        .tableSchema(schemaName, tableName)
         .then(setSchema)
         .catch(() => {
           setSchema({
             tableName,
+            schemaName: "main",
             columns: [],
             pk: [],
             autoIncrement: false,
             constraints: [],
           });
         });
     }
-  }, [tableName, databaseDriver]);
+  }, [schemaName, tableName, databaseDriver]);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>

src/components/gui/tabs/schema-editor-tab.tsx

@@ -9,6 +9,7 @@ import SchemaSaveDialog from "../schema-editor/schema-save-dialog";
 
 interface SchemaEditorTabProps {
   tableName?: string;
+  schemaName: string;
 }
 
 const EMPTY_SCHEMA: DatabaseTableSchemaChange = {
@@ -22,6 +23,7 @@ const EMPTY_SCHEMA: DatabaseTableSchemaChange = {
 };
 
 export default function SchemaEditorTab({
+  schemaName,
   tableName,
 }: Readonly<SchemaEditorTabProps>) {
   const { databaseDriver } = useDatabaseDriver();
@@ -32,7 +34,7 @@ export default function SchemaEditorTab({
   const fetchTable = useCallback(
     async (name: string) => {
       databaseDriver
-        .tableSchema(name)
+        .tableSchema(schemaName, name)
         .then((schema) => {
           setSchema({
             name: {
@@ -54,7 +56,7 @@ export default function SchemaEditorTab({
         .catch(console.error)
         .finally(() => setLoading(false));
     },
-    [databaseDriver, setSchema]
+    [schemaName, databaseDriver, setSchema]
   );
 
   useEffect(() => {
@@ -102,6 +104,7 @@ export default function SchemaEditorTab({
     <>
       {isSaving && (
         <SchemaSaveDialog
+          schemaName={schemaName}
           fetchTable={fetchTable}
           onClose={onSaveToggle}
           schema={schema}

src/components/gui/tabs/table-data-tab.tsx

@@ -40,9 +40,13 @@ import useTableResultColumnFilter from "../table-result/filter-column";
 
 interface TableDataContentProps {
   tableName: string;
+  schemaName: string;
 }
 
-export default function TableDataWindow({ tableName }: TableDataContentProps) {
+export default function TableDataWindow({
+  schemaName,
+  tableName,
+}: TableDataContentProps) {
   const { updateTableSchema } = useAutoComplete();
   const { databaseDriver } = useDatabaseDriver();
   const [error, setError] = useState<string>();
@@ -74,7 +78,7 @@ export default function TableDataWindow({ tableName }: TableDataContentProps) {
 
       try {
         const { data: dataResult, schema: schemaResult } =
-          await databaseDriver.selectTable(tableName, {
+          await databaseDriver.selectTable(schemaName, tableName, {
             whereRaw: where,
             limit: finalLimit,
             offset: finalOffset,
@@ -99,6 +103,7 @@ export default function TableDataWindow({ tableName }: TableDataContentProps) {
   }, [
     databaseDriver,
     tableName,
+    schemaName,
     sortColumns,
     updateTableSchema,
     setStat,

src/components/lib/sql-execute-helper.ts

@@ -86,6 +86,7 @@ export async function commitChange({
 
   try {
     const result = await driver.updateTableData(
+      tableSchema.schemaName ?? "main",
       tableName,
       plans.map((p) => p.plan),
       tableSchema