dbdiff-app 0.1.0

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,44 @@
+interface ThemeToggleProps {
+  darkMode: boolean;
+  onToggle: () => void;
+}
+
+export function ThemeToggle({ darkMode, onToggle }: ThemeToggleProps) {
+  return (
+    <button
+      className="w-8 h-8 flex items-center justify-center rounded-md text-interactive hover:bg-stone-200/50 dark:hover:bg-white/[0.04] transition-all duration-150"
+      onClick={onToggle}
+      title={darkMode ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {darkMode ? (
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          />
+        </svg>
+      ) : (
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,17 @@
+export { TabBar } from "./TabBar";
+export { InnerTabBar } from "./InnerTabBar";
+export { Sidebar } from "./Sidebar";
+export { ConnectionPicker } from "./ConnectionPicker";
+export { ConnectedView } from "./ConnectedView";
+export { ConsoleView } from "./ConsoleView";
+export { ThemeToggle } from "./ThemeToggle";
+export { NewConnectionModal } from "./NewConnectionModal";
+export { EditConnectionModal } from "./EditConnectionModal";
+export { MembersModal } from "./MembersModal";
+export { ShortcutSettingsModal } from "./ShortcutSettingsModal";
+export { Resizer } from "./Resizer";
+export { GlobalShortcuts } from "./GlobalShortcuts";
+export { CommandPalette } from "./CommandPalette";
+export { DatabaseSwitcher } from "./DatabaseSwitcher";
+export { ScanSuccessModal } from "./ScanSuccessModal";
+export { ErrorBoundary } from "./ErrorBoundary";

package/src/constants.ts

@@ -0,0 +1,12 @@
+export const CLOUD_URL =
+  process.env.NODE_ENV === "development"
+    ? "http://localhost:3090"
+    : "https://cloud.dbdiff.app";
+
+// Set to true to show cloud linking/sync UI
+export const CLOUD_ENABLED = false;
+
+// Disable for cloud-hosted deployments where localhost isn't accessible
+export const LOCALHOST_SCANNING_ENABLED = true;
+
+export const PAGE_SIZE = 500;

package/src/electron.d.ts

@@ -0,0 +1,12 @@
+interface ElectronAPI {
+  onMenuAction: (callback: (action: string) => void) => () => void;
+  setDatabaseMenuEnabled: (enabled: boolean) => void;
+  onCloudAuthCallback: (
+    callback: (data: { key: string; state: string }) => void,
+  ) => () => void;
+  platform: string;
+}
+
+interface Window {
+  electronAPI?: ElectronAPI;
+}

package/src/index.css

@@ -0,0 +1,44 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+html, body {
+  margin: 0;
+  min-height: 100vh;
+  overscroll-behavior-x: none;
+  overscroll-behavior-y: none;
+}
+
+
+/* Text color system */
+.text-primary {
+  @apply text-stone-900 dark:text-white;
+}
+
+.text-secondary {
+  @apply text-stone-500 dark:text-white/80;
+}
+
+.text-tertiary {
+  @apply text-stone-400 dark:text-white/60;
+}
+
+/* Interactive text color system with hover states */
+.text-interactive {
+  @apply text-stone-500 dark:text-white/50;
+}
+.text-interactive:hover {
+  @apply text-stone-600 dark:text-white/70;
+}
+
+.text-interactive-subtle {
+  @apply text-stone-400 dark:text-white/40;
+}
+.text-interactive-subtle:hover {
+  @apply text-stone-500 dark:text-white/60;
+}
+
+/* Buttons should always show pointer cursor */
+button {
+  cursor: pointer;
+}

package/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { ErrorBoundary } from "./components/ErrorBoundary";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  </StrictMode>,
+);