From d54044d4f7168649bbd7e6e8e8a3676088e2acdb Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 7 Aug 2024 13:31:24 +0700
Subject: [PATCH] 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
---
 src/app/{ => (public)}/about/page.tsx         |   0
 .../docs/connect-turso/page.mdx               |   0
 .../docs/connect-valtown/page.mdx             |   0
 .../docs/embed-iframe-client/page.mdx         |   0
 src/app/{ => (public)}/docs/layout.tsx        |   0
 src/app/{ => (public)}/docs/page.mdx          |   0
 .../docs/temporary-session/page.mdx           |   0
 src/app/(public)/layout.tsx                   |  22 ++++
 .../learn/sqlite/indexing/page.mdx            |   0
 .../learn/sqlite/introduction/page.mdx        |   0
 .../{ => (public)}/learn/sqlite/layout.tsx    |   0
 .../login/github/callback/route.ts            |   0
 src/app/{ => (public)}/login/github/route.ts  |   0
 .../login/google/callback/route.ts            |   0
 src/app/{ => (public)}/login/google/route.ts  |   0
 src/app/{ => (public)}/login/page.tsx         |   0
 src/app/{ => (public)}/logout/route.tsx       |   0
 src/app/{ => (public)}/page.tsx               |   0
 src/app/{ => (public)}/playground/page.tsx    |   0
 src/app/{ => (public)}/privacy/page.tsx       |   0
 src/app/{ => (public)}/terms/page.tsx         |   0
 .../client/[[...driver]]/page-client.tsx      |   0
 .../client/[[...driver]]/page.tsx             |   0
 src/app/{ => (theme)}/client/layout.tsx       |   0
 .../{ => (theme)}/client/r/page-client.tsx    |   2 +-
 src/app/{ => (theme)}/client/r/page.tsx       |   2 +-
 .../client/s/[[...driver]]/page-client.tsx    |   2 +-
 .../client/s/[[...driver]]/page.tsx           |   0
 .../client/temp_sess/page-client.tsx          |   0
 .../{ => (theme)}/client/temp_sess/page.tsx   |   0
 .../{ => (theme)}/connect/connection-list.tsx |   2 +-
 .../connect/connection-string-input.tsx       |  10 ++
 .../{ => (theme)}/connect/driver-dropdown.tsx |  22 +++-
 src/app/{ => (theme)}/connect/page-client.tsx |   0
 src/app/{ => (theme)}/connect/page.tsx        |   0
 .../{ => (theme)}/connect/quick-connect.tsx   |   0
 .../connect/saved-connection-card.tsx         |   4 +-
 .../connect/saved-connection-config.tsx       |   2 +-
 .../connect/saved-connection-content.tsx      |   0
 .../connect/saved-connection-storage.ts       |  35 +++++-
 .../connect/saved-connection-type.tsx         |   2 +-
 .../connect/saved-connection.tsx              |  11 +-
 .../connect/saved-edit-connection.tsx         |   0
 .../connect/saved-remove-connection.tsx       |   0
 src/app/{ => (theme)}/embed/sqlite/page.tsx   |   0
 src/app/(theme)/layout.tsx                    |  30 +++++
 .../playground/client/page-client.tsx         |  31 ++++-
 .../{ => (theme)}/playground/client/page.tsx  |   0
 src/app/api/database/[database_id]/route.ts   |   2 +-
 src/app/api/database/route.ts                 |   2 +-
 src/app/api/databases/route.ts                |   2 +-
 src/app/api/temp_ops/[session_id]/route.ts    |   2 +-
 src/app/layout.tsx                            |  21 +---
 src/components/filehandler-picker.tsx         | 106 ++++++++++++++++++
 src/context/connection-config-provider.tsx    |   2 +-
 src/hooks/use-connect.ts                      |   2 +-
 src/indexdb.ts                                |   9 +-
 src/lib/api-response-types.ts                 |   2 +-
 src/lib/api/fetch-databases.ts                |   2 +-
 59 files changed, 281 insertions(+), 48 deletions(-)
 rename src/app/{ => (public)}/about/page.tsx (100%)
 rename src/app/{ => (public)}/docs/connect-turso/page.mdx (100%)
 rename src/app/{ => (public)}/docs/connect-valtown/page.mdx (100%)
 rename src/app/{ => (public)}/docs/embed-iframe-client/page.mdx (100%)
 rename src/app/{ => (public)}/docs/layout.tsx (100%)
 rename src/app/{ => (public)}/docs/page.mdx (100%)
 rename src/app/{ => (public)}/docs/temporary-session/page.mdx (100%)
 create mode 100644 src/app/(public)/layout.tsx
 rename src/app/{ => (public)}/learn/sqlite/indexing/page.mdx (100%)
 rename src/app/{ => (public)}/learn/sqlite/introduction/page.mdx (100%)
 rename src/app/{ => (public)}/learn/sqlite/layout.tsx (100%)
 rename src/app/{ => (public)}/login/github/callback/route.ts (100%)
 rename src/app/{ => (public)}/login/github/route.ts (100%)
 rename src/app/{ => (public)}/login/google/callback/route.ts (100%)
 rename src/app/{ => (public)}/login/google/route.ts (100%)
 rename src/app/{ => (public)}/login/page.tsx (100%)
 rename src/app/{ => (public)}/logout/route.tsx (100%)
 rename src/app/{ => (public)}/page.tsx (100%)
 rename src/app/{ => (public)}/playground/page.tsx (100%)
 rename src/app/{ => (public)}/privacy/page.tsx (100%)
 rename src/app/{ => (public)}/terms/page.tsx (100%)
 rename src/app/{ => (theme)}/client/[[...driver]]/page-client.tsx (100%)
 rename src/app/{ => (theme)}/client/[[...driver]]/page.tsx (100%)
 rename src/app/{ => (theme)}/client/layout.tsx (100%)
 rename src/app/{ => (theme)}/client/r/page-client.tsx (92%)
 rename src/app/{ => (theme)}/client/r/page.tsx (92%)
 rename src/app/{ => (theme)}/client/s/[[...driver]]/page-client.tsx (94%)
 rename src/app/{ => (theme)}/client/s/[[...driver]]/page.tsx (100%)
 rename src/app/{ => (theme)}/client/temp_sess/page-client.tsx (100%)
 rename src/app/{ => (theme)}/client/temp_sess/page.tsx (100%)
 rename src/app/{ => (theme)}/connect/connection-list.tsx (99%)
 rename src/app/{ => (theme)}/connect/connection-string-input.tsx (87%)
 rename src/app/{ => (theme)}/connect/driver-dropdown.tsx (80%)
 rename src/app/{ => (theme)}/connect/page-client.tsx (100%)
 rename src/app/{ => (theme)}/connect/page.tsx (100%)
 rename src/app/{ => (theme)}/connect/quick-connect.tsx (100%)
 rename src/app/{ => (theme)}/connect/saved-connection-card.tsx (93%)
 rename src/app/{ => (theme)}/connect/saved-connection-config.tsx (98%)
 rename src/app/{ => (theme)}/connect/saved-connection-content.tsx (100%)
 rename src/app/{ => (theme)}/connect/saved-connection-storage.ts (91%)
 rename src/app/{ => (theme)}/connect/saved-connection-type.tsx (94%)
 rename src/app/{ => (theme)}/connect/saved-connection.tsx (92%)
 rename src/app/{ => (theme)}/connect/saved-edit-connection.tsx (100%)
 rename src/app/{ => (theme)}/connect/saved-remove-connection.tsx (100%)
 rename src/app/{ => (theme)}/embed/sqlite/page.tsx (100%)
 create mode 100644 src/app/(theme)/layout.tsx
 rename src/app/{ => (theme)}/playground/client/page-client.tsx (86%)
 rename src/app/{ => (theme)}/playground/client/page.tsx (100%)
 create mode 100644 src/components/filehandler-picker.tsx

diff --git a/src/app/about/page.tsx b/src/app/(public)/about/page.tsx
similarity index 100%
rename from src/app/about/page.tsx
rename to src/app/(public)/about/page.tsx
diff --git a/src/app/docs/connect-turso/page.mdx b/src/app/(public)/docs/connect-turso/page.mdx
similarity index 100%
rename from src/app/docs/connect-turso/page.mdx
rename to src/app/(public)/docs/connect-turso/page.mdx
diff --git a/src/app/docs/connect-valtown/page.mdx b/src/app/(public)/docs/connect-valtown/page.mdx
similarity index 100%
rename from src/app/docs/connect-valtown/page.mdx
rename to src/app/(public)/docs/connect-valtown/page.mdx
diff --git a/src/app/docs/embed-iframe-client/page.mdx b/src/app/(public)/docs/embed-iframe-client/page.mdx
similarity index 100%
rename from src/app/docs/embed-iframe-client/page.mdx
rename to src/app/(public)/docs/embed-iframe-client/page.mdx
diff --git a/src/app/docs/layout.tsx b/src/app/(public)/docs/layout.tsx
similarity index 100%
rename from src/app/docs/layout.tsx
rename to src/app/(public)/docs/layout.tsx
diff --git a/src/app/docs/page.mdx b/src/app/(public)/docs/page.mdx
similarity index 100%
rename from src/app/docs/page.mdx
rename to src/app/(public)/docs/page.mdx
diff --git a/src/app/docs/temporary-session/page.mdx b/src/app/(public)/docs/temporary-session/page.mdx
similarity index 100%
rename from src/app/docs/temporary-session/page.mdx
rename to src/app/(public)/docs/temporary-session/page.mdx
diff --git a/src/app/(public)/layout.tsx b/src/app/(public)/layout.tsx
new file mode 100644
index 00000000..9f702ae7
--- /dev/null
+++ 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 b/src/app/(public)/learn/sqlite/indexing/page.mdx
similarity index 100%
rename from src/app/learn/sqlite/indexing/page.mdx
rename to src/app/(public)/learn/sqlite/indexing/page.mdx
diff --git a/src/app/learn/sqlite/introduction/page.mdx b/src/app/(public)/learn/sqlite/introduction/page.mdx
similarity index 100%
rename from src/app/learn/sqlite/introduction/page.mdx
rename to src/app/(public)/learn/sqlite/introduction/page.mdx
diff --git a/src/app/learn/sqlite/layout.tsx b/src/app/(public)/learn/sqlite/layout.tsx
similarity index 100%
rename from src/app/learn/sqlite/layout.tsx
rename to src/app/(public)/learn/sqlite/layout.tsx
diff --git a/src/app/login/github/callback/route.ts b/src/app/(public)/login/github/callback/route.ts
similarity index 100%
rename from src/app/login/github/callback/route.ts
rename to src/app/(public)/login/github/callback/route.ts
diff --git a/src/app/login/github/route.ts b/src/app/(public)/login/github/route.ts
similarity index 100%
rename from src/app/login/github/route.ts
rename to src/app/(public)/login/github/route.ts
diff --git a/src/app/login/google/callback/route.ts b/src/app/(public)/login/google/callback/route.ts
similarity index 100%
rename from src/app/login/google/callback/route.ts
rename to src/app/(public)/login/google/callback/route.ts
diff --git a/src/app/login/google/route.ts b/src/app/(public)/login/google/route.ts
similarity index 100%
rename from src/app/login/google/route.ts
rename to src/app/(public)/login/google/route.ts
diff --git a/src/app/login/page.tsx b/src/app/(public)/login/page.tsx
similarity index 100%
rename from src/app/login/page.tsx
rename to src/app/(public)/login/page.tsx
diff --git a/src/app/logout/route.tsx b/src/app/(public)/logout/route.tsx
similarity index 100%
rename from src/app/logout/route.tsx
rename to src/app/(public)/logout/route.tsx
diff --git a/src/app/page.tsx b/src/app/(public)/page.tsx
similarity index 100%
rename from src/app/page.tsx
rename to src/app/(public)/page.tsx
diff --git a/src/app/playground/page.tsx b/src/app/(public)/playground/page.tsx
similarity index 100%
rename from src/app/playground/page.tsx
rename to src/app/(public)/playground/page.tsx
diff --git a/src/app/privacy/page.tsx b/src/app/(public)/privacy/page.tsx
similarity index 100%
rename from src/app/privacy/page.tsx
rename to src/app/(public)/privacy/page.tsx
diff --git a/src/app/terms/page.tsx b/src/app/(public)/terms/page.tsx
similarity index 100%
rename from src/app/terms/page.tsx
rename to src/app/(public)/terms/page.tsx
diff --git a/src/app/client/[[...driver]]/page-client.tsx b/src/app/(theme)/client/[[...driver]]/page-client.tsx
similarity index 100%
rename from src/app/client/[[...driver]]/page-client.tsx
rename to src/app/(theme)/client/[[...driver]]/page-client.tsx
diff --git a/src/app/client/[[...driver]]/page.tsx b/src/app/(theme)/client/[[...driver]]/page.tsx
similarity index 100%
rename from src/app/client/[[...driver]]/page.tsx
rename to src/app/(theme)/client/[[...driver]]/page.tsx
diff --git a/src/app/client/layout.tsx b/src/app/(theme)/client/layout.tsx
similarity index 100%
rename from src/app/client/layout.tsx
rename to src/app/(theme)/client/layout.tsx
diff --git a/src/app/client/r/page-client.tsx b/src/app/(theme)/client/r/page-client.tsx
similarity index 92%
rename from src/app/client/r/page-client.tsx
rename to src/app/(theme)/client/r/page-client.tsx
index df3874b4..7507278a 100644
--- a/src/app/client/r/page-client.tsx
+++ b/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 b/src/app/(theme)/client/r/page.tsx
similarity index 92%
rename from src/app/client/r/page.tsx
rename to src/app/(theme)/client/r/page.tsx
index 5044625a..7db99bc8 100644
--- a/src/app/client/r/page.tsx
+++ b/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/src/app/client/s/[[...driver]]/page-client.tsx b/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
similarity index 94%
rename from src/app/client/s/[[...driver]]/page-client.tsx
rename to src/app/(theme)/client/s/[[...driver]]/page-client.tsx
index 61a9352f..a3b25389 100644
--- a/src/app/client/s/[[...driver]]/page-client.tsx
+++ b/src/app/(theme)/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 b/src/app/(theme)/client/s/[[...driver]]/page.tsx
similarity index 100%
rename from src/app/client/s/[[...driver]]/page.tsx
rename to src/app/(theme)/client/s/[[...driver]]/page.tsx
diff --git a/src/app/client/temp_sess/page-client.tsx b/src/app/(theme)/client/temp_sess/page-client.tsx
similarity index 100%
rename from src/app/client/temp_sess/page-client.tsx
rename to src/app/(theme)/client/temp_sess/page-client.tsx
diff --git a/src/app/client/temp_sess/page.tsx b/src/app/(theme)/client/temp_sess/page.tsx
similarity index 100%
rename from src/app/client/temp_sess/page.tsx
rename to src/app/(theme)/client/temp_sess/page.tsx
diff --git a/src/app/connect/connection-list.tsx b/src/app/(theme)/connect/connection-list.tsx
similarity index 99%
rename from src/app/connect/connection-list.tsx
rename to src/app/(theme)/connect/connection-list.tsx
index f46458f3..a0ab7959 100644
--- a/src/app/connect/connection-list.tsx
+++ b/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 b/src/app/(theme)/connect/connection-string-input.tsx
similarity index 87%
rename from src/app/connect/connection-string-input.tsx
rename to src/app/(theme)/connect/connection-string-input.tsx
index 41319a62..787e83d6 100644
--- a/src/app/connect/connection-string-input.tsx
+++ b/src/app/(theme)/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 b/src/app/(theme)/connect/driver-dropdown.tsx
similarity index 80%
rename from src/app/connect/driver-dropdown.tsx
rename to src/app/(theme)/connect/driver-dropdown.tsx
index 64783bd1..88b3fc4c 100644
--- a/src/app/connect/driver-dropdown.tsx
+++ b/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 b/src/app/(theme)/connect/page-client.tsx
similarity index 100%
rename from src/app/connect/page-client.tsx
rename to src/app/(theme)/connect/page-client.tsx
diff --git a/src/app/connect/page.tsx b/src/app/(theme)/connect/page.tsx
similarity index 100%
rename from src/app/connect/page.tsx
rename to src/app/(theme)/connect/page.tsx
diff --git a/src/app/connect/quick-connect.tsx b/src/app/(theme)/connect/quick-connect.tsx
similarity index 100%
rename from src/app/connect/quick-connect.tsx
rename to src/app/(theme)/connect/quick-connect.tsx
diff --git a/src/app/connect/saved-connection-card.tsx b/src/app/(theme)/connect/saved-connection-card.tsx
similarity index 93%
rename from src/app/connect/saved-connection-card.tsx
rename to src/app/(theme)/connect/saved-connection-card.tsx
index 4b4bf30e..311b8b72 100644
--- a/src/app/connect/saved-connection-card.tsx
+++ b/src/app/(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 b/src/app/(theme)/connect/saved-connection-config.tsx
similarity index 98%
rename from src/app/connect/saved-connection-config.tsx
rename to src/app/(theme)/connect/saved-connection-config.tsx
index 71cb28a0..a244a8dc 100644
--- a/src/app/connect/saved-connection-config.tsx
+++ b/src/app/(theme)/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 b/src/app/(theme)/connect/saved-connection-content.tsx
similarity index 100%
rename from src/app/connect/saved-connection-content.tsx
rename to src/app/(theme)/connect/saved-connection-content.tsx
diff --git a/src/app/connect/saved-connection-storage.ts b/src/app/(theme)/connect/saved-connection-storage.ts
similarity index 91%
rename from src/app/connect/saved-connection-storage.ts
rename to src/app/(theme)/connect/saved-connection-storage.ts
index 44c0d766..59702360 100644
--- a/src/app/connect/saved-connection-storage.ts
+++ b/src/app/(theme)/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 b/src/app/(theme)/connect/saved-connection-type.tsx
similarity index 94%
rename from src/app/connect/saved-connection-type.tsx
rename to src/app/(theme)/connect/saved-connection-type.tsx
index e9cd431d..db12d6aa 100644
--- a/src/app/connect/saved-connection-type.tsx
+++ b/src/app/(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 b/src/app/(theme)/connect/saved-connection.tsx
similarity index 92%
rename from src/app/connect/saved-connection.tsx
rename to src/app/(theme)/connect/saved-connection.tsx
index 19c460ce..be9520d0 100644
--- a/src/app/connect/saved-connection.tsx
+++ b/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 b/src/app/(theme)/connect/saved-edit-connection.tsx
similarity index 100%
rename from src/app/connect/saved-edit-connection.tsx
rename to src/app/(theme)/connect/saved-edit-connection.tsx
diff --git a/src/app/connect/saved-remove-connection.tsx b/src/app/(theme)/connect/saved-remove-connection.tsx
similarity index 100%
rename from src/app/connect/saved-remove-connection.tsx
rename to src/app/(theme)/connect/saved-remove-connection.tsx
diff --git a/src/app/embed/sqlite/page.tsx b/src/app/(theme)/embed/sqlite/page.tsx
similarity index 100%
rename from src/app/embed/sqlite/page.tsx
rename to src/app/(theme)/embed/sqlite/page.tsx
diff --git a/src/app/(theme)/layout.tsx b/src/app/(theme)/layout.tsx
new file mode 100644
index 00000000..33a13bb1
--- /dev/null
+++ 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 b/src/app/(theme)/playground/client/page-client.tsx
similarity index 86%
rename from src/app/playground/client/page-client.tsx
rename to src/app/(theme)/playground/client/page-client.tsx
index d98ff72a..6b4dcfbe 100644
--- a/src/app/playground/client/page-client.tsx
+++ b/src/app/(theme)/playground/client/page-client.tsx
@@ -15,6 +15,9 @@ 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,
@@ -22,6 +25,7 @@ export default function PlaygroundEditorBody({
   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 b/src/app/(theme)/playground/client/page.tsx
similarity index 100%
rename from src/app/playground/client/page.tsx
rename to 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
index 2aac0701..36ef0488 100644
--- 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
index 18436e40..a09848f2 100644
--- 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
index 7141ad08..c7a4de0c 100644
--- 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
index d91ea89c..52b47bac 100644
--- 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";
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index eb3997e4..35afb88c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,17 +1,8 @@
-import { Analytics } from "@vercel/analytics/react";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 
 import "./globals.css";
 import "./codemirror-override.css";
-
-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";
-
-const inter = Inter({ subsets: ["latin"] });
 
 const siteDescription =
   "LibSQL Studio is a fully-featured, lightweight GUI client for managing SQLite-based databases like Turso, LibSQL, and rqlite. It runs entirely in your browser, so there's no need to download anything";
@@ -41,19 +32,9 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const cookieStore = cookies();
-  const theme = cookieStore.get("theme")?.value === "dark" ? "dark" : "light";
-
   return (
     <html lang="en">
-      <body className={inter.className} suppressHydrationWarning>
-        <ThemeProvider defaultTheme={theme}>
-          <Fragment>{children}</Fragment>
-          <Toaster />
-        </ThemeProvider>
-        <Analytics />
-        <Script async defer src="https://buttons.github.io/buttons.js" />
-      </body>
+      <Fragment>{children}</Fragment>
     </html>
   );
 }
diff --git a/src/components/filehandler-picker.tsx b/src/components/filehandler-picker.tsx
new file mode 100644
index 00000000..3152b801
--- /dev/null
+++ b/src/components/filehandler-picker.tsx
@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useState } from "react";
+import { Button, buttonVariants } from "./ui/button";
+import { localDb } from "@/indexdb";
+import { LucideFile, LucideFolderClosed } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
+
+/**
+ * Cleanup file handler from indexdb database when
+ * it is no longer needed.
+ */
+async function cleanupFileHandler() {
+  const connectionList = SavedConnectionLocalStorage.getDetailList();
+  const validHandlerIds = new Set(
+    connectionList.map((c) => c.config?.filehandler).filter(Boolean) as string[]
+  );
+
+  const fileHandlerList = (await localDb.file_handler.toArray()).map(
+    (r) => r.id
+  );
+
+  for (const id of fileHandlerList) {
+    if (!validHandlerIds.has(id)) {
+      await localDb.file_handler.delete(id);
+    }
+  }
+}
+
+async function openFileHandler() {
+  const [newFileHandler] = await window.showOpenFilePicker({
+    types: [
+      {
+        description: "SQLite Files",
+        accept: {
+          "application/x-sqlite3": [
+            ".db",
+            ".sdb",
+            ".sqlite",
+            ".db3",
+            ".s3db",
+            ".sqlite3",
+            ".sl3",
+            ".db2",
+            ".s2db",
+            ".sqlite2",
+            ".sl2",
+          ],
+        },
+      },
+    ],
+  });
+
+  const id = crypto.randomUUID();
+  localDb.file_handler.add({ id, handler: newFileHandler }).then();
+
+  return id;
+}
+
+export default function FileHandlerPicker({
+  value,
+  onChange,
+}: {
+  value?: string;
+  onChange: (file: string) => void;
+}) {
+  const [handler, setHandler] = useState<FileSystemHandle>();
+
+  useEffect(() => {
+    if (value) {
+      localDb.file_handler.get(value).then((data) => {
+        if (data?.handler) {
+          setHandler(data.handler);
+        }
+      });
+    }
+  }, [value]);
+
+  const onChangeFile = useCallback(() => {
+    cleanupFileHandler()
+      .then(openFileHandler)
+      .then(onChange)
+      .catch(console.error);
+  }, [onChange]);
+
+  if (handler) {
+    return (
+      <div
+        onClick={onChangeFile}
+        className={cn(
+          buttonVariants({ variant: "outline" }),
+          "w-full justify-start cursor-pointer"
+        )}
+      >
+        <LucideFile className="w-4 h-4 mr-2" />
+        {handler.name}
+      </div>
+    );
+  }
+
+  return (
+    <Button onClick={onChangeFile} variant={"outline"}>
+      <LucideFolderClosed className="w-4 h-4 mr-2" />
+      Open File
+    </Button>
+  );
+}
diff --git a/src/context/connection-config-provider.tsx b/src/context/connection-config-provider.tsx
index ceb5e03b..008e1d24 100644
--- a/src/context/connection-config-provider.tsx
+++ b/src/context/connection-config-provider.tsx
@@ -1,4 +1,4 @@
-import { SavedConnectionItem } from "@/app/connect/saved-connection-storage";
+import { SavedConnectionItem } from "@/app/(theme)/connect/saved-connection-storage";
 import { createContext, PropsWithChildren, useContext, useMemo } from "react";
 
 const ConnectionConfigContext = createContext<{
diff --git a/src/hooks/use-connect.ts b/src/hooks/use-connect.ts
index c9b085aa..6fa8f18d 100644
--- a/src/hooks/use-connect.ts
+++ b/src/hooks/use-connect.ts
@@ -2,7 +2,7 @@
 import {
   SavedConnectionItemConfigConfig,
   SupportedDriver,
-} from "@/app/connect/saved-connection-storage";
+} from "@/app/(theme)/connect/saved-connection-storage";
 import { useRouter } from "next/navigation";
 import { useCallback } from "react";
 
diff --git a/src/indexdb.ts b/src/indexdb.ts
index 6fced921..b86dc493 100644
--- a/src/indexdb.ts
+++ b/src/indexdb.ts
@@ -19,14 +19,21 @@ interface IndexDbDoc {
   updated_at: number;
 }
 
+interface IndexDbFileHandler {
+  id: string;
+  handler: FileSystemFileHandle;
+}
+
 const localDb = new Dexie("libstudio") as Dexie & {
   namespace: EntityTable<IndexDbNamespace, "id">;
   saved_doc: EntityTable<IndexDbDoc, "id">;
+  file_handler: EntityTable<IndexDbFileHandler, "id">;
 };
 
-localDb.version(1).stores({
+localDb.version(2).stores({
   namespace: "++id, database_id",
   saved_doc: "++id, database_id, namespace_id",
+  file_handler: "++id, handler",
 });
 
 export { localDb };
diff --git a/src/lib/api-response-types.ts b/src/lib/api-response-types.ts
index 8dbbab2b..26083628 100644
--- a/src/lib/api-response-types.ts
+++ b/src/lib/api-response-types.ts
@@ -1,4 +1,4 @@
-import { SavedConnectionItem } from "@/app/connect/saved-connection-storage";
+import { SavedConnectionItem } from "@/app/(theme)/connect/saved-connection-storage";
 import {
   DatabaseResultSet,
   DatabaseSchemaItem,
diff --git a/src/lib/api/fetch-databases.ts b/src/lib/api/fetch-databases.ts
index 1177b1aa..0adb292d 100644
--- a/src/lib/api/fetch-databases.ts
+++ b/src/lib/api/fetch-databases.ts
@@ -2,7 +2,7 @@ import {
   SavedConnectionItem,
   SavedConnectionItemConfig,
   SupportedDriver,
-} from "@/app/connect/saved-connection-storage";
+} from "@/app/(theme)/connect/saved-connection-storage";
 import { ApiDatabasesResponse } from "../api-response-types";
 
 export async function getDatabases(): Promise<ApiDatabasesResponse> {