dbdiff-app 0.1.0

package/src/components/NewConnectionModal.tsx

@@ -0,0 +1,274 @@
+import { useState } from "react";
+import type { DatabaseConfig } from "../types";
+import { useHotkey } from "../stores/hooks";
+
+const COLORS = [
+  "#ef4444", // red
+  "#f59e0b", // amber
+  "#22c55e", // green
+  "#3b82f6", // blue
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+  "#14b8a6", // teal
+  "#f97316", // orange
+];
+
+interface NewConnectionModalProps {
+  onClose: () => void;
+  onSave: (config: DatabaseConfig) => void;
+}
+
+export function NewConnectionModal({
+  onClose,
+  onSave,
+}: NewConnectionModalProps) {
+  const [connectionString, setConnectionString] = useState("");
+  const [name, setName] = useState("");
+  const [color, setColor] = useState(COLORS[0]);
+  const [host, setHost] = useState("localhost");
+  const [port, setPort] = useState("5432");
+  const [database, setDatabase] = useState("");
+  const [username, setUsername] = useState("postgres");
+  const [password, setPassword] = useState("");
+  const [extraParams, setExtraParams] = useState<Record<string, string>>({});
+  const [paramsString, setParamsString] = useState("");
+
+  useHotkey("closeModal", onClose);
+
+  function parseParamsString(value: string) {
+    const params: Record<string, string> = {};
+    if (value.trim()) {
+      for (const pair of value.split("&")) {
+        const [k, ...rest] = pair.split("=");
+        if (k?.trim()) params[k.trim()] = rest.join("=") || "";
+      }
+    }
+    setExtraParams(params);
+  }
+
+  function parseConnectionString(connStr: string) {
+    // Parse: postgresql://username:password@host:port/database
+    // or: postgres://username:password@host:port/database
+    try {
+      const url = new URL(connStr);
+      if (url.protocol === "postgresql:" || url.protocol === "postgres:") {
+        if (url.hostname) setHost(url.hostname);
+        if (url.port) setPort(url.port);
+        if (url.username) setUsername(decodeURIComponent(url.username));
+        if (url.password) setPassword(decodeURIComponent(url.password));
+        if (url.pathname && url.pathname.length > 1) {
+          setDatabase(url.pathname.slice(1)); // remove leading /
+        }
+        const params: Record<string, string> = {};
+        url.searchParams.forEach((value, key) => {
+          params[key] = value;
+        });
+        setExtraParams(params);
+        setParamsString(url.search ? url.searchParams.toString() : "");
+      }
+    } catch {
+      // Not a valid URL, ignore
+    }
+  }
+
+  function handleConnectionStringChange(value: string) {
+    setConnectionString(value);
+    parseConnectionString(value);
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const config: DatabaseConfig = {
+      id: Date.now().toString(),
+      display: { name: name || "Untitled Connection", color },
+      connection: {
+        type: "postgres",
+        host,
+        port: parseInt(port, 10) || 5432,
+        database,
+        username,
+        password,
+        ...(Object.keys(extraParams).length > 0 && { params: extraParams }),
+      },
+      cache: {},
+      source: "local",
+    };
+    onSave(config);
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      <div className="flex min-h-full items-center justify-center p-4">
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+          onClick={onClose}
+        />
+        <div className="relative bg-white dark:bg-[#1a1a1a] rounded-xl shadow-2xl w-full max-w-md border border-stone-200 dark:border-white/10">
+          <div className="p-6">
+            <h2 className="text-[18px] font-semibold text-primary mb-6">
+              New Connection
+            </h2>
+
+            <form
+              onSubmit={handleSubmit}
+              className="space-y-4"
+              autoComplete="off"
+            >
+              <div>
+                <label className="block text-[12px] font-medium text-secondary mb-1.5">
+                  Connection String
+                </label>
+                <input
+                  type="text"
+                  value={connectionString}
+                  onChange={(e) => handleConnectionStringChange(e.target.value)}
+                  placeholder="postgresql://user:pass@host:5432/dbname"
+                  className="w-full px-3 py-2 text-[14px] bg-stone-50 dark:bg-white/5 border border-stone-200 dark:border-white/10 rounded-lg text-primary placeholder:text-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 font-mono"
+                  autoFocus
+                />
+                <p className="text-[11px] text-tertiary mt-1">
+                  Paste a connection string to auto-fill the fields below
+                </p>
+              </div>
+
+              <div className="border-t border-stone-200 dark:border-white/10 pt-4">
+                <label className="block text-[12px] font-medium text-secondary mb-1.5">
+                  Connection Name
+                </label>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="My Database"
+                  className="w-full px-3 py-2 text-[14px] bg-stone-50 dark:bg-white/5 border border-stone-200 dark:border-white/10 rounded-lg text-primary placeholder:text-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-[12px] font-medium text-secondary mb-1.5">
+                  Color
+                </label>
+                <div className="flex gap-2">
+                  {COLORS.map((c) => (
+                    <button
+                      key={c}
+                      type="button"
+                      onClick={() => setColor(c)}
+                      className={`w-7 h-7 rounded-full transition-transform ${
+                        color === c
+                          ? "ring-2 ring-offset-2 ring-offset-white dark:ring-offset-[#1a1a1a] ring-blue-500 scale-110"
+                          : "hover:scale-110"
+                      }`}
+                      style={{ backgroundColor: c }}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-3 gap-3">
+                <div className="col-span-2">
+                  <label className="block text-[12px] font-medium text-secondary mb-1.5">
+                    Host
+                  </label>
+                  <input
+                    type="text"
+                    value={host}
+                    onChange={(e) => setHost(e.target.value)}
+                    placeholder="localhost"
+                    className="w-full px-3 py-2 text-[14px] bg-stone-50 dark:bg-white/5 border border-stone-200 dark:border-white/10 rounded-lg text-primary placeholder:text-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 font-mono"
+                  />
+                </div>
+                <div>
+                  <label className="block text-[12px] font-medium text-secondary mb-1.5">
+                    Port
+                  </label>
+                  <input
+                    type="text"
+                    value={port}
+                    onChange={(e) => setPort(e.target.value)}
+                    placeholder="5432"
+                    className="w-full px-3 py-2 text-[14px] bg-stone-50 dark:bg-white/5 border border-stone-200 dark:border-white/10 rounded-lg text-primary placeholder:text-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 font-mono"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-[12px] font-medium text-secondary mb-1.5">
+                  Database
+                </label>
+                <input
+                  type="text"
+                  value={database}
+                  onChange={(e) => setDatabase(e.target.value)}
+                  placeholder="postgres"
+                  className="w-full px-3 py-2 text-[14px] bg-stone-50 dark:bg-white/5 border border-stone-200 dark:border-white/10 rounded-lg text-primary placeholder:text-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 font-mono"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-[12px] font-medium text-secondary mb-1.5">
+                    Username
+                  </label>
+                  <input
+                    type="text"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    placeholder="postgres"
+                    autoComplete="off"
+                    className="w-full px-3 py-2 text-[14px] bg-stone-50 dark:bg-white/5 border border-stone-200 dark:border-white/10 rounded-lg text-primary placeholder:text-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 font-mono"
+                  />
+                </div>
+                <div>
+                  <label className="block text-[12px] font-medium text-secondary mb-1.5">
+                    Password
+                  </label>
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="••••••••"
+                    autoComplete="new-password"
+                    className="w-full px-3 py-2 text-[14px] bg-stone-50 dark:bg-white/5 border border-stone-200 dark:border-white/10 rounded-lg text-primary placeholder:text-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 font-mono"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-[12px] font-medium text-secondary mb-1.5">
+                  Parameters
+                </label>
+                <input
+                  type="text"
+                  value={paramsString}
+                  onChange={(e) => {
+                    setParamsString(e.target.value);
+                    parseParamsString(e.target.value);
+                  }}
+                  placeholder="sslmode=require"
+                  className="w-full px-3 py-2 text-[14px] bg-stone-50 dark:bg-white/5 border border-stone-200 dark:border-white/10 rounded-lg text-primary placeholder:text-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 font-mono"
+                />
+              </div>
+
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="flex-1 px-4 py-2.5 text-[14px] font-medium text-secondary bg-stone-100 dark:bg-white/5 hover:bg-stone-200 dark:hover:bg-white/10 rounded-lg transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2.5 text-[14px] font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+                >
+                  Save Connection
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/Resizer.tsx

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useState } from "react";
+
+interface ResizerProps {
+  direction: "horizontal" | "vertical";
+  onResize: (delta: number) => void;
+}
+
+export function Resizer({ direction, onResize }: ResizerProps) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    let lastPos = direction === "horizontal" ? 0 : 0;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const currentPos = direction === "horizontal" ? e.clientX : e.clientY;
+      if (lastPos !== 0) {
+        const delta = currentPos - lastPos;
+        onResize(delta);
+      }
+      lastPos = currentPos;
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, direction, onResize]);
+
+  const isHorizontal = direction === "horizontal";
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      className={`
+        ${isHorizontal ? "w-1 cursor-col-resize" : "h-1 cursor-row-resize"}
+        flex-shrink-0 bg-transparent hover:bg-blue-500/50 active:bg-blue-500/50 transition-colors
+        ${isDragging ? "bg-blue-500/50" : ""}
+      `}
+      style={{
+        // Expand hit area
+        ...(isHorizontal
+          ? { marginLeft: -4, marginRight: -4, paddingLeft: 4, paddingRight: 4 }
+          : {
+              marginTop: -4,
+              marginBottom: -4,
+              paddingTop: 4,
+              paddingBottom: 4,
+            }),
+      }}
+    />
+  );
+}

package/src/components/ScanSuccessModal.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import { useHotkey } from "../stores/hooks";
+
+interface ScanSuccessModalProps {
+  count: number;
+  onClose: () => void;
+}
+
+const CONFETTI_COLORS = [
+  "#ef4444",
+  "#f59e0b",
+  "#22c55e",
+  "#3b82f6",
+  "#8b5cf6",
+  "#ec4899",
+  "#14b8a6",
+  "#f97316",
+];
+
+function ConfettiPiece({ index }: { index: number }) {
+  const [style] = useState(() => {
+    const color =
+      CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)];
+    const left = Math.random() * 100;
+    const delay = Math.random() * 0.5;
+    const duration = 1.5 + Math.random() * 1.5;
+    const size = 6 + Math.random() * 6;
+    const rotation = Math.random() * 360;
+    const isCircle = index % 3 === 0;
+
+    return {
+      left: `${left}%`,
+      width: `${size}px`,
+      height: `${size}px`,
+      backgroundColor: color,
+      borderRadius: isCircle ? "50%" : "2px",
+      animationDelay: `${delay}s`,
+      animationDuration: `${duration}s`,
+      transform: `rotate(${rotation}deg)`,
+    } as React.CSSProperties;
+  });
+
+  return <div className="confetti-piece" style={style} />;
+}
+
+export function ScanSuccessModal({ count, onClose }: ScanSuccessModalProps) {
+  useHotkey("closeModal", onClose);
+
+  useEffect(() => {
+    const timer = setTimeout(onClose, 4000);
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div className="confetti-container">
+        {Array.from({ length: 40 }, (_, i) => (
+          <ConfettiPiece key={i} index={i} />
+        ))}
+      </div>
+      <div className="relative z-[2] bg-white dark:bg-[#1a1a1a] rounded-xl shadow-2xl w-full max-w-sm mx-4 border border-stone-200 dark:border-white/10">
+        <div className="p-8 text-center">
+          <div className="text-5xl mb-4">🎉</div>
+          <h2 className="text-[20px] font-semibold text-primary mb-2">
+            Congrats!
+          </h2>
+          <p className="text-[14px] text-secondary mb-6">
+            {count} new database{count !== 1 ? "s" : ""} found on localhost
+          </p>
+          <button
+            onClick={onClose}
+            className="px-6 py-2.5 text-[14px] font-medium text-secondary bg-stone-100 dark:bg-white/5 hover:bg-stone-200 dark:hover:bg-white/10 rounded-lg transition-colors"
+          >
+            Okay
+          </button>
+        </div>
+      </div>
+
+      <style>{`
+        .confetti-container {
+          position: fixed;
+          inset: 0;
+          pointer-events: none;
+          overflow: hidden;
+          z-index: 1;
+        }
+        .confetti-piece {
+          position: absolute;
+          top: -10px;
+          opacity: 0;
+          animation: confetti-fall linear forwards;
+        }
+        @keyframes confetti-fall {
+          0% {
+            opacity: 1;
+            transform: translateY(0) rotate(0deg);
+          }
+          80% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+            transform: translateY(100vh) rotate(720deg);
+          }
+        }
+      `}</style>
+    </div>
+  );
+}