feat: add download and open sql file support

package.json

@@ -80,6 +80,7 @@
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.30.1",
     "eslint-plugin-jest": "^27.6.3",
+    "file-saver": "^2.0.5",
     "libsql-stateless-easy": "^1.6.11",
     "lucia": "^3.1.1",
     "lucide-react": "^0.309.0",
@@ -99,6 +100,7 @@
     "@testing-library/jest-dom": "^6.2.1",
     "@testing-library/react": "^14.1.2",
     "@types/deep-equal": "^1.0.4",
+    "@types/file-saver": "^2.0.7",
     "@types/jest": "^29.5.11",
     "@types/node": "^20",
     "@types/react": "^18",

src/app/client/temp_sess/page-client.tsx

@@ -8,6 +8,8 @@ import MyStudio from "@/components/my-studio";
 import RqliteDriver from "@/drivers/rqlite-driver";
 import TursoDriver from "@/drivers/turso-driver";
 import ValtownDriver from "@/drivers/valtown-driver";
+import TemporarySession from "@/components/sidebar/temp-session-countdown";
+import FeatureRequestSidebar from "@/components/sidebar/feature-request.tsx";
 
 export default function ClientPageBody({
   config,
@@ -29,12 +31,22 @@ export default function ClientPageBody({
     return new TursoDriver(config.url, config.token as string, true);
   }, [config]);
 
+  const sidebar = useMemo(() => {
+    return (
+      <>
+        <TemporarySession expiredAt={expired} />
+        <FeatureRequestSidebar />
+      </>
+    );
+  }, [expired]);
+
   return (
     <MyStudio
       driver={driver}
       name={name ?? "Temporary Session"}
       color="gray"
       expiredAt={expired}
+      sideBarFooterComponent={sidebar}
     />
   );
 }

src/app/playground/client/page-client.tsx

@@ -1,36 +1,99 @@
 "use client";
+import { saveAs } from "file-saver";
 import MyStudio from "@/components/my-studio";
+import { Button } from "@/components/ui/button";
 import SqljsDriver from "@/drivers/sqljs-driver";
 import { LucideLoader } from "lucide-react";
 import Script from "next/script";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Database, SqlJsStatic } from "sql.js";
 
 export default function PlaygroundEditorBody({
   preloadDatabase,
 }: {
   preloadDatabase?: string | null;
 }) {
+  const fileInput = useRef<HTMLInputElement>(null);
+  const [sqlInit, setSqlInit] = useState<SqlJsStatic>();
   const [databaseLoading, setDatabaseLoading] = useState(!!preloadDatabase);
+  const [rawDb, setRawDb] = useState<Database>();
   const [db, setDb] = useState<SqljsDriver>();
 
   const onReady = useCallback(() => {
     window
       .initSqlJs({
         locateFile: (file) => `/sqljs/${file}`,
       })
-      .then((SQL) => {
-        if (preloadDatabase) {
-          fetch(preloadDatabase)
-            .then((r) => r.arrayBuffer())
-            .then((r) =>
-              setDb(new SqljsDriver(new SQL.Database(new Uint8Array(r))))
-            )
-            .finally(() => setDatabaseLoading(false));
-        } else {
-          setDb(new SqljsDriver(new SQL.Database()));
+      .then(setSqlInit);
+  }, []);
+
+  useEffect(() => {
+    if (sqlInit) {
+      if (preloadDatabase) {
+        fetch(preloadDatabase)
+          .then((r) => r.arrayBuffer())
+          .then((r) => {
+            const sqljsDatabase = new sqlInit.Database(new Uint8Array(r));
+            setRawDb(sqljsDatabase);
+            setDb(new SqljsDriver(sqljsDatabase));
+          })
+          .finally(() => setDatabaseLoading(false));
+      } else {
+        const sqljsDatabase = new sqlInit.Database();
+        setRawDb(sqljsDatabase);
+        setDb(new SqljsDriver(sqljsDatabase));
+      }
+    }
+  }, [sqlInit, preloadDatabase]);
+
+  const onFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.currentTarget.files && sqlInit) {
+        const file = e.currentTarget.files[0];
+        if (file) {
+          file.arrayBuffer().then((buffer) => {
+            const sqljsDatabase = new sqlInit.Database(new Uint8Array(buffer));
+            setRawDb(sqljsDatabase);
+            setDb(new SqljsDriver(sqljsDatabase));
+          });
         }
-      });
-  }, [preloadDatabase]);
+      }
+    },
+    [sqlInit]
+  );
+
+  const sidebarMenu = useMemo(() => {
+    return (
+      <div className="flex flex-col gap-2">
+        <Button
+          size="sm"
+          onClick={() => {
+            if (rawDb) {
+              console.log("hello world");
+              saveAs(
+                new Blob([rawDb.export()], {
+                  type: "application/x-sqlite3",
+                }),
+                "sqlite-dump.db"
+              );
+            }
+          }}
+        >
+          Download as .db file
+        </Button>
+        <Button
+          size="sm"
+          onClick={() => {
+            if (fileInput.current) {
+              fileInput.current.click();
+            }
+          }}
+        >
+          Open SQLite File
+        </Button>
+      </div>
+    );
+  }, [rawDb, fileInput]);
 
   const dom = useMemo(() => {
     if (databaseLoading) {
@@ -48,15 +111,29 @@ export default function PlaygroundEditorBody({
     }
 
     if (db) {
-      return <MyStudio color="gray" name="Playground" driver={db} />;
+      return (
+        <MyStudio
+          color="gray"
+          name="Playground"
+          driver={db}
+          sideBarFooterComponent={sidebarMenu}
+        />
+      );
     }
 
     return <div></div>;
-  }, [databaseLoading, preloadDatabase, db]);
+  }, [databaseLoading, preloadDatabase, db, sidebarMenu]);
 
   return (
     <>
       <Script src="/sqljs/sql-wasm.js" onReady={onReady} />
+      <input
+        type="file"
+        ref={fileInput}
+        className="hidden"
+        onChange={onFileChange}
+        multiple={false}
+      />
       {dom}
     </>
   );

src/components/gui/schema-sidebar.tsx

@@ -49,17 +49,6 @@ export default function SchemaView() {
 
         <Separator />
         {sideBarFooterComponent}
-        <div className="p-2 px-3 text-xs">
-          Powered by{" "}
-          <a
-            href="https://libsqlstudio.com"
-            target="_blank"
-            rel="noreferrer"
-            className="text-blue-700 underline"
-          >
-            LibSQL Studio
-          </a>
-        </div>
       </div>
     </div>
   );