feat: save local sqlite session (#133)

* feat: local sqlite session * ask for permission if there is no permission before * restructure and optimize page that does not require theme
outerbase · Aug 7, 2024 · d54044d · d54044d
1 parent 4a490d3
commit d54044d
Show file tree

Hide file tree

Showing 59 changed files with 281 additions and 48 deletions.
diff --git a/src/app/about/page.tsx → src/app/(public)/about/page.tsx b/src/app/about/page.tsx → src/app/(public)/about/page.tsx
diff --git a/src/app/docs/connect-turso/page.mdx → src/app/(public)/docs/connect-turso/page.mdx b/src/app/docs/connect-turso/page.mdx → src/app/(public)/docs/connect-turso/page.mdx
diff --git a/src/app/docs/connect-valtown/page.mdx → ...pp/(public)/docs/connect-valtown/page.mdx b/src/app/docs/connect-valtown/page.mdx → ...pp/(public)/docs/connect-valtown/page.mdx
diff --git a/src/app/docs/embed-iframe-client/page.mdx → ...public)/docs/embed-iframe-client/page.mdx b/src/app/docs/embed-iframe-client/page.mdx → ...public)/docs/embed-iframe-client/page.mdx
diff --git a/src/app/docs/layout.tsx → src/app/(public)/docs/layout.tsx b/src/app/docs/layout.tsx → src/app/(public)/docs/layout.tsx
diff --git a/src/app/docs/page.mdx → src/app/(public)/docs/page.mdx b/src/app/docs/page.mdx → src/app/(public)/docs/page.mdx
diff --git a/src/app/docs/temporary-session/page.mdx → .../(public)/docs/temporary-session/page.mdx b/src/app/docs/temporary-session/page.mdx → .../(public)/docs/temporary-session/page.mdx
diff --git a/src/app/(public)/layout.tsx b/src/app/(public)/layout.tsx
@@ -0,0 +1,22 @@
+import { Analytics } from "@vercel/analytics/react";
+import { Inter } from "next/font/google";
+import { Toaster } from "@/components/ui/sonner";
+import { Fragment } from "react";
+import Script from "next/script";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <body className={inter.className} suppressHydrationWarning>
+      <Fragment>{children}</Fragment>
+      <Toaster />
+      <Analytics />
+      <Script async defer src="https://buttons.github.io/buttons.js" />
+    </body>
+  );
+}
diff --git a/src/app/learn/sqlite/indexing/page.mdx → ...p/(public)/learn/sqlite/indexing/page.mdx b/src/app/learn/sqlite/indexing/page.mdx → ...p/(public)/learn/sqlite/indexing/page.mdx
diff --git a/src/app/learn/sqlite/introduction/page.mdx → ...ublic)/learn/sqlite/introduction/page.mdx b/src/app/learn/sqlite/introduction/page.mdx → ...ublic)/learn/sqlite/introduction/page.mdx
diff --git a/src/app/learn/sqlite/layout.tsx → src/app/(public)/learn/sqlite/layout.tsx b/src/app/learn/sqlite/layout.tsx → src/app/(public)/learn/sqlite/layout.tsx
diff --git a/src/app/login/github/callback/route.ts → ...p/(public)/login/github/callback/route.ts b/src/app/login/github/callback/route.ts → ...p/(public)/login/github/callback/route.ts
diff --git a/src/app/login/github/route.ts → src/app/(public)/login/github/route.ts b/src/app/login/github/route.ts → src/app/(public)/login/github/route.ts
diff --git a/src/app/login/google/callback/route.ts → ...p/(public)/login/google/callback/route.ts b/src/app/login/google/callback/route.ts → ...p/(public)/login/google/callback/route.ts
diff --git a/src/app/login/google/route.ts → src/app/(public)/login/google/route.ts b/src/app/login/google/route.ts → src/app/(public)/login/google/route.ts
diff --git a/src/app/login/page.tsx → src/app/(public)/login/page.tsx b/src/app/login/page.tsx → src/app/(public)/login/page.tsx
diff --git a/src/app/logout/route.tsx → src/app/(public)/logout/route.tsx b/src/app/logout/route.tsx → src/app/(public)/logout/route.tsx
diff --git a/src/app/page.tsx → src/app/(public)/page.tsx b/src/app/page.tsx → src/app/(public)/page.tsx
diff --git a/src/app/playground/page.tsx → src/app/(public)/playground/page.tsx b/src/app/playground/page.tsx → src/app/(public)/playground/page.tsx
diff --git a/src/app/privacy/page.tsx → src/app/(public)/privacy/page.tsx b/src/app/privacy/page.tsx → src/app/(public)/privacy/page.tsx
diff --git a/src/app/terms/page.tsx → src/app/(public)/terms/page.tsx b/src/app/terms/page.tsx → src/app/(public)/terms/page.tsx
diff --git a/src/app/client/[[...driver]]/page-client.tsx → ...eme)/client/[[...driver]]/page-client.tsx b/src/app/client/[[...driver]]/page-client.tsx → ...eme)/client/[[...driver]]/page-client.tsx
diff --git a/src/app/client/[[...driver]]/page.tsx → ...app/(theme)/client/[[...driver]]/page.tsx b/src/app/client/[[...driver]]/page.tsx → ...app/(theme)/client/[[...driver]]/page.tsx
diff --git a/src/app/client/layout.tsx → src/app/(theme)/client/layout.tsx b/src/app/client/layout.tsx → src/app/(theme)/client/layout.tsx
diff --git a/src/app/client/r/page-client.tsx → src/app/(theme)/client/r/page-client.tsx b/src/app/client/r/page-client.tsx → src/app/(theme)/client/r/page-client.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { SavedConnectionItem } from "@/app/connect/saved-connection-storage";
+import { SavedConnectionItem } from "@/app/(theme)/connect/saved-connection-storage";
 import CollaborationDriver from "@/drivers/collaboration-driver";
 import RemoteDriver from "@/drivers/remote-driver";
 import { useSearchParams } from "next/navigation";

diff --git a/src/app/client/r/page.tsx → src/app/(theme)/client/r/page.tsx b/src/app/client/r/page.tsx → src/app/(theme)/client/r/page.tsx
@@ -1,4 +1,4 @@
-import type { SavedConnectionLabel } from "@/app/connect/saved-connection-storage";
+import type { SavedConnectionLabel } from "@/app/(theme)/connect/saved-connection-storage";
 import { get_database } from "@/db";
 import { database } from "@/db/schema";
 import { getSessionFromCookie } from "@/lib/auth";

diff --git a/...pp/client/s/[[...driver]]/page-client.tsx → ...e)/client/s/[[...driver]]/page-client.tsx b/...pp/client/s/[[...driver]]/page-client.tsx → ...e)/client/s/[[...driver]]/page-client.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { SavedConnectionLocalStorage } from "@/app/connect/saved-connection-storage";
+import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
 import RqliteDriver from "@/drivers/rqlite-driver";
 import TursoDriver from "@/drivers/turso-driver";
 import ValtownDriver from "@/drivers/valtown-driver";

diff --git a/src/app/client/s/[[...driver]]/page.tsx → ...p/(theme)/client/s/[[...driver]]/page.tsx b/src/app/client/s/[[...driver]]/page.tsx → ...p/(theme)/client/s/[[...driver]]/page.tsx
diff --git a/src/app/client/temp_sess/page-client.tsx → .../(theme)/client/temp_sess/page-client.tsx b/src/app/client/temp_sess/page-client.tsx → .../(theme)/client/temp_sess/page-client.tsx
diff --git a/src/app/client/temp_sess/page.tsx → src/app/(theme)/client/temp_sess/page.tsx b/src/app/client/temp_sess/page.tsx → src/app/(theme)/client/temp_sess/page.tsx
diff --git a/src/app/connect/connection-list.tsx → src/app/(theme)/connect/connection-list.tsx b/src/app/connect/connection-list.tsx → src/app/(theme)/connect/connection-list.tsx
@@ -13,7 +13,7 @@ import {
   SavedConnectionItem,
   SavedConnectionLocalStorage,
   SupportedDriver,
-} from "@/app/connect/saved-connection-storage";
+} from "@/app/(theme)/connect/saved-connection-storage";
 import EditSavedConnection from "./saved-edit-connection";
 import RemoveSavedConnection from "./saved-remove-connection";
 import ConnectionItemCard from "./saved-connection-card";

diff --git a/src/app/connect/connection-string-input.tsx → ...heme)/connect/connection-string-input.tsx b/src/app/connect/connection-string-input.tsx → ...heme)/connect/connection-string-input.tsx
@@ -5,6 +5,7 @@ import {
   SupportedDriver,
 } from "./saved-connection-storage";
 import { Input } from "@/components/ui/input";
+import FileHandlerPicker from "@/components/filehandler-picker";
 
 export default function ConnectionStringInput({
   value,
@@ -65,6 +66,15 @@ export default function ConnectionStringInput({
               }}
             />
           );
+        } else if (field.type === "filehandler") {
+          inputDom = (
+            <FileHandlerPicker
+              value={value[field.name]}
+              onChange={(fileId) => {
+                onChange({ ...value, [field.name]: fileId });
+              }}
+            />
+          );
         }
 
         return (

diff --git a/src/app/connect/driver-dropdown.tsx → src/app/(theme)/connect/driver-dropdown.tsx b/src/app/connect/driver-dropdown.tsx → src/app/(theme)/connect/driver-dropdown.tsx
@@ -80,18 +80,32 @@ export default function DriverDropdown({
           </div>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={() => {
+            onSelect("sqlite-filehandler");
+          }}
+        >
+          <div className="flex gap-4 px-2 items-center h-16">
+            <img src="/sqlite-icon.svg" alt="sqlite" className="w-9 h-9" />
+            <div>
+              <div className="font-bold">Open SQLite File</div>
+              <div className="text-xs opacity-50">
+                Open SQLite file database directly in your browser.
+              </div>
+            </div>
+          </div>
+        </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => {
             router.push("/playground/client");
           }}
         >
           <div className="flex gap-4 px-2 items-center h-16">
-            <img src="/sqlite-icon.svg" alt="rqlite" className="w-9 h-9" />
+            <img src="/sqlite-icon.svg" alt="sqlite" className="w-9 h-9" />
             <div>
-              <div className="font-bold">SQLite</div>
+              <div className="font-bold">Blank SQLite</div>
               <div className="text-xs opacity-50">
-                Open an SQLite file or start a new SQLite database directly in
-                your browser.
+                Start a new SQLite database directly in your browser.
               </div>
             </div>
           </div>

diff --git a/src/app/connect/page-client.tsx → src/app/(theme)/connect/page-client.tsx b/src/app/connect/page-client.tsx → src/app/(theme)/connect/page-client.tsx
diff --git a/src/app/connect/page.tsx → src/app/(theme)/connect/page.tsx b/src/app/connect/page.tsx → src/app/(theme)/connect/page.tsx
diff --git a/src/app/connect/quick-connect.tsx → src/app/(theme)/connect/quick-connect.tsx b/src/app/connect/quick-connect.tsx → src/app/(theme)/connect/quick-connect.tsx
diff --git a/src/app/connect/saved-connection-card.tsx → ...(theme)/connect/saved-connection-card.tsx b/src/app/connect/saved-connection-card.tsx → ...(theme)/connect/saved-connection-card.tsx
@@ -43,7 +43,9 @@ export default function ConnectionItemCard({
           )}
           href={
             conn.storage === "local"
-              ? `/client/s/${conn.driver ?? "turso"}?p=${conn.id}`
+              ? conn.driver === "sqlite-filehandler"
+                ? `/playground/client?s=${conn.id}`
+                : `/client/s/${conn.driver ?? "turso"}?p=${conn.id}`
               : `/client/r?p=${conn.id}`
           }
         >

diff --git a/src/app/connect/saved-connection-config.tsx → ...heme)/connect/saved-connection-config.tsx b/src/app/connect/saved-connection-config.tsx → ...heme)/connect/saved-connection-config.tsx
@@ -11,7 +11,7 @@ import {
   SupportedDriver,
   prefillConnectionString,
   validateConnectionString,
-} from "@/app/connect/saved-connection-storage";
+} from "@/app/(theme)/connect/saved-connection-storage";
 import { cn } from "@/lib/utils";
 import { useMemo, useState } from "react";
 import { LucideLoader } from "lucide-react";

diff --git a/src/app/connect/saved-connection-content.tsx → ...eme)/connect/saved-connection-content.tsx b/src/app/connect/saved-connection-content.tsx → ...eme)/connect/saved-connection-content.tsx
diff --git a/src/app/connect/saved-connection-storage.ts → ...heme)/connect/saved-connection-storage.ts b/src/app/connect/saved-connection-storage.ts → ...heme)/connect/saved-connection-storage.ts
@@ -3,7 +3,7 @@ import parseSafeJson from "@/lib/json-safe";
 
 export interface DriverDetailField {
   name: keyof SavedConnectionItemConfigConfig;
-  type: "text" | "textarea" | "password";
+  type: "text" | "textarea" | "password" | "filehandler";
   secret?: boolean;
   required?: boolean;
   title?: string;
@@ -16,11 +16,26 @@ export interface DriverDetailField {
 export interface DriverDetail {
   name: string;
   icon: string;
+  disableRemote?: boolean;
   fields: DriverDetailField[];
 }
 
 export const DRIVER_DETAIL: Record<SupportedDriver, DriverDetail> =
   Object.freeze({
+    "sqlite-filehandler": {
+      name: "sqlite-filehandler",
+      icon: "/sqlite-icon.svg",
+      disableRemote: true,
+      fields: [
+        {
+          name: "filehandler",
+          required: true,
+          type: "filehandler",
+          title: "File",
+          description: "",
+        },
+      ],
+    },
     turso: {
       name: "turso",
       icon: "/turso.jpeg",
@@ -178,7 +193,12 @@ export function prefillConnectionString(
   };
 }
 
-export type SupportedDriver = "turso" | "rqlite" | "valtown" | "cloudflare-d1";
+export type SupportedDriver =
+  | "turso"
+  | "rqlite"
+  | "valtown"
+  | "cloudflare-d1"
+  | "sqlite-filehandler";
 export type SavedConnectionStorage = "remote" | "local";
 export type SavedConnectionLabel = "gray" | "red" | "yellow" | "green" | "blue";
 
@@ -208,6 +228,7 @@ export interface SavedConnectionItemConfigConfig {
   username?: string;
   password?: string;
   database?: string;
+  filehandler?: string;
 }
 
 export interface SavedConnectionItemConfig {
@@ -236,6 +257,7 @@ interface SavedConnectionRawLocalStorage {
   database: string;
   driver?: SupportedDriver;
   label?: SavedConnectionLabel;
+  file_handler?: string;
   description?: string;
   last_used: number;
 }
@@ -250,6 +272,7 @@ function configToRaw(
     driver: data.driver ?? "turso",
     url: data.config?.url ?? "",
     token: data.config?.token ?? "",
+    file_handler: data.config?.filehandler,
     username: data.config?.username ?? "",
     password: data.config?.password ?? "",
     database: data.config?.database ?? "",
@@ -286,6 +309,7 @@ function mapDetailRaw(
       password: data.password,
       username: data.username,
       database: data.database,
+      filehandler: data.file_handler,
     },
   };
 }
@@ -305,6 +329,13 @@ export class SavedConnectionLocalStorage {
     ).map(mapRaw);
   }
 
+  static getDetailList(): SavedConnectionItemDetail[] {
+    return parseSafeJson<SavedConnectionRawLocalStorage[]>(
+      localStorage.getItem("connections"),
+      []
+    ).map(mapDetailRaw);
+  }
+
   static remove(id: string) {
     const tmp = getAllConnections().filter((conn) => conn.id !== id);
     localStorage.setItem("connections", JSON.stringify(tmp));

diff --git a/src/app/connect/saved-connection-type.tsx → ...(theme)/connect/saved-connection-type.tsx b/src/app/connect/saved-connection-type.tsx → ...(theme)/connect/saved-connection-type.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { SavedConnectionStorage } from "@/app/connect/saved-connection-storage";
+import { SavedConnectionStorage } from "@/app/(theme)/connect/saved-connection-storage";
 import { cn } from "@/lib/utils";
 import { useState } from "react";
 

diff --git a/src/app/connect/saved-connection.tsx → src/app/(theme)/connect/saved-connection.tsx b/src/app/connect/saved-connection.tsx → src/app/(theme)/connect/saved-connection.tsx
@@ -2,13 +2,14 @@ import { useCallback, useState } from "react";
 import ConnectionDialogContent from "./saved-connection-content";
 import SaveConnectionType from "./saved-connection-type";
 import {
+  DRIVER_DETAIL,
   SavedConnectionItem,
   SavedConnectionItemConfig,
   SavedConnectionItemWithoutId,
   SavedConnectionLocalStorage,
   SavedConnectionStorage,
   SupportedDriver,
-} from "@/app/connect/saved-connection-storage";
+} from "@/app/(theme)/connect/saved-connection-storage";
 import SavedConnectionConfig from "./saved-connection-config";
 import { createDatabase } from "@/lib/api/fetch-databases";
 import { User } from "lucia";
@@ -51,9 +52,11 @@ export default function SaveConnection({
   const [storage, setStorage] = useState<SavedConnectionStorage | undefined>(
     user ? undefined : "local"
   );
-  const [step, setStep] = useState<SaveConnectionStep>(
-    user ? "storage" : "config"
-  );
+  const [step, setStep] = useState<SaveConnectionStep>(() => {
+    if (!user) return "config";
+    if (DRIVER_DETAIL[driver].disableRemote) return "config";
+    return "storage";
+  });
   const [loading, setLoading] = useState(false);
 
   const onConnectionTypeSelected = useCallback(

diff --git a/src/app/connect/saved-edit-connection.tsx → ...(theme)/connect/saved-edit-connection.tsx b/src/app/connect/saved-edit-connection.tsx → ...(theme)/connect/saved-edit-connection.tsx
diff --git a/src/app/connect/saved-remove-connection.tsx → ...heme)/connect/saved-remove-connection.tsx b/src/app/connect/saved-remove-connection.tsx → ...heme)/connect/saved-remove-connection.tsx
diff --git a/src/app/embed/sqlite/page.tsx → src/app/(theme)/embed/sqlite/page.tsx b/src/app/embed/sqlite/page.tsx → src/app/(theme)/embed/sqlite/page.tsx
diff --git a/src/app/(theme)/layout.tsx b/src/app/(theme)/layout.tsx
@@ -0,0 +1,30 @@
+import { Analytics } from "@vercel/analytics/react";
+import { Inter } from "next/font/google";
+import ThemeProvider from "@/context/theme-provider";
+import { cookies } from "next/headers";
+import { Toaster } from "@/components/ui/sonner";
+import { Fragment } from "react";
+import Script from "next/script";
+import { cn } from "@/lib/utils";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const cookieStore = cookies();
+  const theme = cookieStore.get("theme")?.value === "dark" ? "dark" : "light";
+
+  return (
+    <body className={cn(inter.className, theme)} suppressHydrationWarning>
+      <ThemeProvider defaultTheme={theme}>
+        <Fragment>{children}</Fragment>
+        <Toaster />
+      </ThemeProvider>
+      <Analytics />
+      <Script async defer src="https://buttons.github.io/buttons.js" />
+    </body>
+  );
+}
diff --git a/src/app/playground/client/page-client.tsx → ...(theme)/playground/client/page-client.tsx b/src/app/playground/client/page-client.tsx → ...(theme)/playground/client/page-client.tsx
@@ -15,13 +15,17 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useSearchParams } from "next/navigation";
+import { localDb } from "@/indexdb";
+import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
 
 export default function PlaygroundEditorBody({
   preloadDatabase,
 }: {
   preloadDatabase?: string | null;
 }) {
   const [sqlInit, setSqlInit] = useState<SqlJsStatic>();
+  const searchParams = useSearchParams();
   const [databaseLoading, setDatabaseLoading] = useState(!!preloadDatabase);
   const [rawDb, setRawDb] = useState<Database>();
   const [db, setDb] = useState<SqljsDriver>();
@@ -46,13 +50,36 @@ export default function PlaygroundEditorBody({
             setDb(new SqljsDriver(sqljsDatabase));
           })
           .finally(() => setDatabaseLoading(false));
+      } else if (searchParams.get("s")) {
+        const sessionId = searchParams.get("s");
+        if (!sessionId) return;
+
+        const session = SavedConnectionLocalStorage.get(sessionId);
+        if (!session) return;
+
+        const fileHandlerId = session?.config.filehandler;
+        if (!fileHandlerId) return;
+
+        localDb.file_handler.get(fileHandlerId).then((sessionData) => {
+          if (sessionData?.handler) {
+            sessionData.handler.queryPermission().then((permission) => {
+              if (permission !== "granted") {
+                sessionData.handler.requestPermission().then(() => {
+                  setHandler(sessionData.handler);
+                });
+              } else {
+                setHandler(sessionData.handler);
+              }
+            });
+          }
+        });
       } else {
         const sqljsDatabase = new sqlInit.Database();
         setRawDb(sqljsDatabase);
         setDb(new SqljsDriver(sqljsDatabase));
       }
     }
-  }, [sqlInit, preloadDatabase]);
+  }, [sqlInit, preloadDatabase, searchParams]);
 
   useEffect(() => {
     if (handler && sqlInit) {
@@ -203,7 +230,7 @@ export default function PlaygroundEditorBody({
         </div>
       </div>
     );
-  }, [rawDb, handler, db, fileName]);
+  }, [rawDb, handler, db, fileName, onReloadDatabase]);
 
   useEffect(() => {
     if (handler && db) {

diff --git a/src/app/playground/client/page.tsx → src/app/(theme)/playground/client/page.tsx b/src/app/playground/client/page.tsx → src/app/(theme)/playground/client/page.tsx
diff --git a/src/app/api/database/[database_id]/route.ts b/src/app/api/database/[database_id]/route.ts
@@ -5,7 +5,7 @@ import { database } from "@/db/schema";
 import { eq } from "drizzle-orm";
 import { encrypt } from "@/lib/encryption-edge";
 import { env } from "@/env";
-import { SavedConnectionItemConfig } from "@/app/connect/saved-connection-storage";
+import { SavedConnectionItemConfig } from "@/app/(theme)/connect/saved-connection-storage";
 import { get_database } from "@/db";
 
 export const runtime = "edge";

diff --git a/src/app/api/database/route.ts b/src/app/api/database/route.ts
@@ -5,7 +5,7 @@ import { database, database_role, database_user_role } from "@/db/schema";
 import { NextResponse } from "next/server";
 import { env } from "@/env";
 import { encrypt } from "@/lib/encryption-edge";
-import { SavedConnectionItem } from "@/app/connect/saved-connection-storage";
+import { SavedConnectionItem } from "@/app/(theme)/connect/saved-connection-storage";
 import { get_database } from "@/db";
 
 export const runtime = "edge";

diff --git a/src/app/api/databases/route.ts b/src/app/api/databases/route.ts
@@ -1,4 +1,4 @@
-import { SavedConnectionItem } from "@/app/connect/saved-connection-storage";
+import { SavedConnectionItem } from "@/app/(theme)/connect/saved-connection-storage";
 import { get_database } from "@/db";
 import { database, database_user_role, user as userTable } from "@/db/schema";
 import withUser from "@/lib/with-user";

diff --git a/src/app/api/temp_ops/[session_id]/route.ts b/src/app/api/temp_ops/[session_id]/route.ts
@@ -7,7 +7,7 @@ import withErrorHandler from "@/lib/with-error-handler";
 import { ApiError } from "@/lib/api-error";
 import { HttpStatus } from "@/constants/http-status";
 import parseSafeJson from "@/lib/json-safe";
-import { SavedConnectionItemConfigConfig } from "@/app/connect/saved-connection-storage";
+import { SavedConnectionItemConfigConfig } from "@/app/(theme)/connect/saved-connection-storage";
 
 export const runtime = "edge";