Merge branch 'develop'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "libsql-studio",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/connect/connection-list.tsx

@@ -18,6 +18,7 @@ import RemoveSavedConnection from "./saved-remove-connection";
 import ConnectionItemCard from "./saved-connection-card";
 import { getDatabases } from "@/lib/api/fetch-databases";
 import { User } from "lucia";
+import QuickConnect from "./quick-connect";
 
 function ConnectionListSection({
   data,
@@ -69,6 +70,7 @@ function ConnectionListSection({
 export default function ConnectionList({
   user,
 }: Readonly<{ user: User | null }>) {
+  const [quickConnect, setQuickConnect] = useState(false);
   const [showAddConnection, setShowAddConnection] = useState(false);
   const [removeConnection, setRemoveConnection] =
     useState<SavedConnectionItem>();
@@ -168,6 +170,10 @@ export default function ConnectionList({
     );
   }
 
+  if (quickConnect) {
+    return <QuickConnect onClose={() => setQuickConnect(false)} />;
+  }
+
   return (
     <>
       <div className="px-8 py-2 border-b">
@@ -180,7 +186,14 @@ export default function ConnectionList({
           New Connection
         </Button>
 
-        <Button variant={"ghost"}>Quick Connect</Button>
+        <Button
+          variant={"ghost"}
+          onClick={() => {
+            setQuickConnect(true);
+          }}
+        >
+          Quick Connect
+        </Button>
       </div>
 
       {removeConnection && (

src/app/connect/quick-connect.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import ConnectionDialogContent from "./saved-connection-content";
+import { useCallback, useState } from "react";
+import useConnect from "@/hooks/use-connect";
+
+export default function QuickConnect({
+  onClose,
+}: Readonly<{ onClose: () => void }>) {
+  const [url, setURL] = useState("");
+  const [token, setToken] = useState("");
+  const connect = useConnect();
+
+  const onConnect = useCallback(() => {
+    connect(url, token);
+  }, [connect, url, token]);
+
+  return (
+    <ConnectionDialogContent title="Quick Connect" onClose={onClose}>
+      <div>
+        <div className="text-xs mb-2">URL</div>
+        <Input
+          placeholder={"URL"}
+          value={url}
+          onChange={(e) => setURL(e.currentTarget.value)}
+        />
+      </div>
+
+      <div>
+        <div className="text-xs mb-2">Token</div>
+        <Textarea
+          placeholder={"Token"}
+          value={token}
+          onChange={(e) => setToken(e.currentTarget.value)}
+        />
+      </div>
+
+      <div className="mt-12 flex gap-4">
+        <Button onClick={onConnect}>Connect</Button>
+      </div>
+    </ConnectionDialogContent>
+  );
+}

src/hooks/use-connect.ts

@@ -1,4 +1,5 @@
-import { useRouter } from "next/router";
+"use client";
+import { useRouter } from "next/navigation";
 import { useCallback } from "react";
 
 export default function useConnect() {