-
-
- );
- }
-
- return (
-
-
-
- {loadingProgress > 0 && (
-
- {loadingProgress}%
-
- )}
-
-
- {availableDatabases && availableTables.length > 0 ? (
-
- ) : (
-
- );
-}
\ No newline at end of file
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
deleted file mode 100644
index b1e928f..0000000
--- a/src/components/Sidebar.jsx
+++ /dev/null
@@ -1,303 +0,0 @@
-import React from "react";
-import { useClickHouseState } from "@/providers/ClickHouseContext";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import {
- SquareTerminal,
- Github,
- Loader2,
- CircleCheckIcon,
- AlertCircleIcon,
- Sun,
- Moon,
- LifeBuoy,
- CornerDownLeft,
- ServerCogIcon,
- Settings2,
- Search,
-} from "lucide-react";
-import {
- Sheet,
- SheetContent,
- SheetDescription,
- SheetHeader,
- SheetTitle,
- SheetTrigger,
-} from "@/components/ui/sheet";
-
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from "@/components/ui/popover";
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from "@/components/ui/table";
-import { useTheme } from "@/providers/theme";
-import { Button } from "@/components/ui/button";
-
-import {
- Command,
- CommandDialog,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandItem,
- CommandList,
- CommandShortcut,
-} from "@/components/ui/command"
-
-import {
- Tooltip,
- TooltipContent,
- TooltipProvider,
- TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-const commandsSheet = [
- {
- action: "Save Query",
- command: ["S/Ctrl+S"],
- context: "Query Editor",
- },
- {
- action: "Run Query",
- command: [
- "⌘",
- "+",
- - No tables found in the selected database -
- )} -
+
+
+
+
+
+
+ No results found.
+
+ {navItems.map((item) => (
+ {
+ if (item.isNewWindow) {
+ window.open(item.to, "_blank");
+ setOpen(false);
+ return;
+ }
+ navigate(item.to);
+ setOpen(false);
+ }}
+ >
+
+ ))}
+
+
+ {externalNavItems.map((item) => (
+ {
+ if (item.isNewWindow) {
+ window.open(item.to, "_blank");
+ setOpen(false);
+ return;
+ }
+ navigate(item.to);
+ setOpen(false);
+ }}
+ >
+
+ ))}
+
+
+ {
+ toast.success("Theme changed!");
+ toggleTheme();
+ setOpen(false);
+ }}
+ >
+ Toggle Theme
+
+ {
+ clearCredentials();
+ toast.success("Credentials cleared!");
+ setOpen(false);
+ }}
+ >
+ Reset Credentials
+
+
+
+
+
+ );
+};
+
+export default Sidebar;
diff --git a/src/components/Tabs.jsx b/src/components/Tabs.jsx
deleted file mode 100644
index 4c2c602..0000000
--- a/src/components/Tabs.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import {
- TerminalSquareIcon,
- FilePlus2,
- HomeIcon,
- Loader2,
- SquareX,
- Table,
- X,
-} from "lucide-react";
-import { Skeleton } from "./ui/skeleton";
-import { useTabState } from "@/providers/TabsStateContext";
-import HomeTabContent from "@/TabContents/HomeTabContent";
-import TableTabContent from "@/TabContents/TableTabContent";
-import QueryTabContent from "@/TabContents/QueryTabContent";
-
-export default function TabsManager() {
- const {
- tabs,
- activeTab,
- setActiveTab,
- isLoading,
- addQueryTab,
- deleteTab,
- closeAllTabs
- } = useTabState();
-
- if (isLoading) {
- return (
-
+
+ 
+ {isExpanded && (
+ CH-UI
+ )}
+
+ {isExpanded && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!isExpanded && (
+
+ )}
+
+
+
+
+
+
+
+
+ Search (Cmd/Ctrl + K)
+
+
+
+
+
+
+
+
+
+
+
+
+ Command Cheat Sheet
+
+ Useful commands to enhance your experience.
+
+
+
+
+
+
+
+
+
+
+ Server Status
++ {isLoadingCredentials + ? "Connecting..." + : isServerAvailable + ? "Connected" + : "Disconnected"} +
+Version: {version}
+
-
- );
- }
-
- return (
-
- {
- setActiveTab(e);
- }}
- >
-
-
- {tab.tab_type === "home" ? (
-
-
- {tab.tab_title}
-
- ) : (
-
- {tab.tab_title}
-
- )}
- {tab.tab_type !== "home" && (
-
- )}
-
- ))}
-
- {tabs.map((tab) => (
-
- {tab.tab_type === "query" &&
- ))}
-
-
- );
-}
\ No newline at end of file
diff --git a/src/components/explorer/CreateDatabase.tsx b/src/components/explorer/CreateDatabase.tsx
new file mode 100644
index 0000000..ecc71d6
--- /dev/null
+++ b/src/components/explorer/CreateDatabase.tsx
@@ -0,0 +1,447 @@
+import { useState, useEffect, useRef } from "react";
+import { z } from "zod";
+import { CopyIcon, CopyCheck } from "lucide-react";
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogFooter,
+} from "@/components/ui/dialog";
+import { toast } from "sonner";
+import useAppstore from "@/store/appStore";
+
+const ENGINE_OPTIONS = [
+ "Atomic",
+ "Lazy",
+ "MySQL",
+ "PostgreSQL",
+ "MaterializedMySQL",
+ "MaterializedPostgreSQL",
+ "Replicated",
+ "SQLite",
+];
+
+const CreateDatabase = () => {
+ const {
+ isCreateDatabaseModalOpen,
+ closeCreateDatabaseModal,
+ fetchDatabaseInfo,
+ dataBaseExplorer,
+ runQuery,
+ addTab,
+ } = useAppstore();
+
+ // State variables for database creation
+ const [databaseName, setDatabaseName] = useState("");
+ const [ifNotExists, setIfNotExists] = useState(false);
+ const [onCluster, setOnCluster] = useState(false);
+ const [clusterName, setClusterName] = useState("");
+ const [engine, setEngine] = useState("Atomic");
+ const [comment, setComment] = useState("");
+ const [sql, setSql] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [errors, setErrors] = useState
-
- {tabs.length > 2 && (
-
-
- )}
-
- {tabs.map((tab) => (
-
+ {/* Database Name */}
+
+
+ {
+ setDatabaseName(e.target.value);
+ setErrors((prev) => {
+ const newErrors = { ...prev };
+ delete newErrors.databaseName;
+ return newErrors;
+ });
+ }}
+ placeholder="Enter database name"
+ className={errors.databaseName ? "border-red-500" : ""}
+ />
+ {errors.databaseName && (
+
+
+ {/* IF NOT EXISTS Checkbox */}
+ {errors.databaseName}
+ )} +
+
+ setIfNotExists(checked as boolean)
+ }
+ />
+
+
+
+ {/* ON CLUSTER Checkbox */}
+
+ setOnCluster(checked as boolean)}
+ />
+
+
+
+ {/* Cluster Name Input */}
+ {onCluster && (
+
+
+ {
+ setClusterName(e.target.value);
+ setErrors((prev) => ({ ...prev, clusterName: "" }));
+ }}
+ placeholder="Enter cluster name"
+ className={errors.clusterName ? "border-red-500" : ""}
+ />
+ {errors.clusterName && (
+
+ )}
+
+ {/* ENGINE Selector */}
+ {errors.clusterName}
+ )} +
+
+
+
+
+ {/* COMMENT Textarea */}
+
+
+