Merge branch 'refs/heads/maybe-rollback-to-remove-primeng'

# Conflicts:
#	frontend/bun.lockb

TODO.md

@@ -0,0 +1,13 @@
+# TODO
+
+## Databases
+
+- [ ] Fully support PostgreSQL and MySQL
+- [ ] Add support for SQLite
+- [ ] Add support for MSSQL
+- [ ] Add support for MongoDB
+- [ ] Add support for Redis
+
+## Nice to have
+
+- [ ] Seed database with fake data (something like mockaroo, but taking advantage of db introspection)

api/src/drivers/driver.interface.ts

@@ -24,7 +24,11 @@ export interface Driver {
   ): Promise<any[]>;
   getTableData(
     credentials: Credentials,
-    args: WithSortPagination<{ tableName: string; dbName: string }>,
+    args: WithSortPagination<{
+      tableName: string;
+      dbName: string;
+      whereQuery?: string;
+    }>,
   ): Promise<{
     count: number;
     data: Record<string, any>[];

api/src/drivers/postgres.ts

@@ -159,22 +159,31 @@ export class PostgresDriver implements Driver {
       page,
       sortDesc,
       sortField,
-    }: WithSortPagination<{ tableName: string; dbName: string }>,
+      whereQuery,
+    }: WithSortPagination<{
+      tableName: string;
+      dbName: string;
+      whereQuery?: string;
+    }>,
   ) {
     const sql = await this.queryRunner(credentials);
 
     const offset = (perPage * page).toString();
-    const rows = sql`
-    SELECT COUNT(*)
-    FROM ${sql(dbName)}.${sql(tableName)}`;
 
-    const tables = sql`
+    const rowsQuery = `
+    SELECT COUNT(*)
+    FROM "${dbName}"."${tableName}"
+    ${whereQuery ? `WHERE ${whereQuery}` : ""}`;
+
+    const tablesQuery = `
     SELECT *
-    FROM ${sql(dbName)}.${sql(tableName)}
-    ${sortField ? sql`ORDER BY ${sql(sortField)} ${sortDesc ? sql`DESC` : sql`ASC`}` : sql``}
+    FROM "${dbName}"."${tableName}"
+    ${whereQuery ? `WHERE ${whereQuery}` : ""}
+    ${sortField ? `ORDER BY "${sortField}" ${sortDesc ? "DESC" : "ASC"}` : ""}
     LIMIT ${perPage} OFFSET ${offset}
     `;
-
+    const rows = sql.unsafe(rowsQuery);
+    const tables = sql.unsafe(tablesQuery);
     const [[count], data] = await Promise.all([rows, tables]);
 
     void sql.end();

api/src/index.ts

@@ -95,7 +95,13 @@ const app = new Elysia({ prefix: "/api" })
     "/databases/:dbName/tables/:tableName/data",
     async ({ query, params, jwt, set, cookie: { auth } }) => {
       const { tableName, dbName } = params;
-      const { perPage = "50", page = "0", sortField, sortDesc } = query;
+      const {
+        perPage = "50",
+        page = "0",
+        sortField,
+        sortDesc,
+        whereQuery,
+      } = query;
       const credentials = await jwt.verify(auth.value);
 
       if (!credentials) {
@@ -111,6 +117,7 @@ const app = new Elysia({ prefix: "/api" })
         page: Number.parseInt(page, 10),
         sortField,
         sortDesc: sortDesc === "true",
+        whereQuery,
       });
     },
   )

frontend/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@fontsource/inter": "^5.0.19",
+    "@hookform/resolvers": "^3.9.0",
     "@it-incubator/prettier-config": "^0.1.2",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-dialog": "^1.1.1",
@@ -34,6 +35,7 @@
     "primereact": "^10.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.1",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",

frontend/src/components/db-table-view/data-table.tsx

@@ -5,13 +5,14 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-  ScrollArea,
+  FormInput,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
+  Tooltip,
 } from "@/components/ui";
 import { cn, isImageUrl, isUrl } from "@/lib/utils";
 import { useTableColumnsQuery, useTableDataQuery } from "@/services/db";
@@ -26,8 +27,9 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { ArrowUp, Rows3 } from "lucide-react";
+import { ArrowUp, Info, Rows3, Search } from "lucide-react";
 import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
 
 export const DataTable = ({
   tableName,
@@ -44,14 +46,16 @@ export const DataTable = ({
   onPageIndexChange: (pageIndex: number) => void;
   onPageSizeChange: (pageSize: number) => void;
 }) => {
+  const whereQueryForm = useForm<{ whereQuery: string }>();
   const formatDates = useSettingsStore.use.formatDates();
   const showImagesPreview = useSettingsStore.use.showImagesPreview();
-
+  const [whereQuery, setWhereQuery] = useState("");
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
 
   const { data: details } = useTableColumnsQuery({ dbName, tableName });
-  const { data } = useTableDataQuery({
+  const { data, refetch } = useTableDataQuery({
+    whereQuery,
     tableName,
     dbName,
     perPage: pageSize,
@@ -59,7 +63,6 @@ export const DataTable = ({
     sortDesc: sorting[0]?.desc,
     sortField: sorting[0]?.id,
   });
-
   const paginationUpdater: OnChangeFn<PaginationState> = (args) => {
     if (typeof args === "function") {
       const newArgs = args({
@@ -88,7 +91,7 @@ export const DataTable = ({
         return (
           <div
             className={cn(
-              "whitespace-nowrap",
+              "whitespace-nowrap ",
               data_type === "integer" && "text-right",
             )}
           >
@@ -167,10 +170,41 @@ export const DataTable = ({
   });
 
   return (
-    <div className={"flex flex-col gap-4 flex-1 max-h-full h-full pb-3"}>
+    <div className={"flex flex-col gap-4 flex-1 max-h-full pb-3"}>
       <div className={"flex gap-4 items-center justify-between"}>
         <h1 className="text-2xl font-bold flex items-center gap-2">
           <Rows3 /> {tableName}
+          <form
+            className={"flex gap-2"}
+            onSubmit={whereQueryForm.handleSubmit((data) => {
+              if (data.whereQuery === whereQuery) {
+                void refetch();
+                return;
+              }
+              setWhereQuery(data.whereQuery);
+            })}
+          >
+            <FormInput
+              name={"whereQuery"}
+              control={whereQueryForm.control}
+              placeholder="WHERE clause"
+            />
+            <Button variant={"outline"} size={"icon"} type={"submit"}>
+              <Search className={"size-[1.2rem] shrink-0"} />
+            </Button>
+            <Tooltip
+              content={
+                <div>
+                  Your input will be prefixed with WHERE and appended to the raw
+                  SQL query.
+                  <div>You can use AND, OR, NOT, BETWEEN, LIKE, =, etc.</div>
+                  <div>To remove the WHERE clause, submit an empty input.</div>
+                </div>
+              }
+            >
+              <Info className={"size-4 shrink-0 cursor-help"} />
+            </Tooltip>
+          </form>
         </h1>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -201,103 +235,106 @@ export const DataTable = ({
         </p>
       </div>
 
-      <ScrollArea className="rounded-md border min-h-0 h-full w-full min-w-0">
-        <Table
-          className={"table-fixed min-w-full"}
-          {...{
-            style: {
-              width: table.getCenterTotalSize(),
-            },
-          }}
-        >
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  const sorted = header.column.getIsSorted();
+      <div className="rounded-md border min-h-0 h-full w-full min-w-0 flex flex-col">
+        <div className={"flex flex-col flex-1 overflow-auto relative"}>
+          <Table
+            className={"table-fixed min-w-full"}
+            {...{
+              style: {
+                width: table.getCenterTotalSize(),
+              },
+            }}
+          >
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id} className={"sticky top-0"}>
+                  {headerGroup.headers.map((header) => {
+                    const sorted = header.column.getIsSorted();
 
-                  return (
-                    <TableHead
-                      className={"p-0 relative"}
-                      key={header.id}
-                      style={{
-                        width: header.getSize(),
-                      }}
-                    >
-                      <Button
-                        variant="ghost"
-                        onClick={header.column.getToggleSortingHandler()}
-                        title={
-                          header.column.getNextSortingOrder() === "asc"
-                            ? "Sort ascending"
-                            : header.column.getNextSortingOrder() === "desc"
-                              ? "Sort descending"
-                              : "Clear sort"
-                        }
-                      >
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                        <ArrowUp
-                          className={cn(
-                            "ml-2 size-4 opacity-0 transition-transform",
-                            sorted && "opacity-100",
-                            (sorted as string) === "desc" && "rotate-180",
-                          )}
-                        />
-                      </Button>
-                      <div
-                        {...{
-                          onDoubleClick: () => header.column.resetSize(),
-                          onMouseDown: header.getResizeHandler(),
-                          onTouchStart: header.getResizeHandler(),
-                          className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+                    return (
+                      <TableHead
+                        className={"p-0 relative"}
+                        key={header.id}
+                        style={{
+                          width: header.getSize(),
                         }}
-                      />
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && "selected"}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell
-                      key={cell.id}
-                      style={{
-                        width: cell.column.getSize(),
-                      }}
-                    >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </TableCell>
-                  ))}
+                      >
+                        <Button
+                          variant="ghost"
+                          onClick={header.column.getToggleSortingHandler()}
+                          className={"select-text"}
+                          title={
+                            header.column.getNextSortingOrder() === "asc"
+                              ? "Sort ascending"
+                              : header.column.getNextSortingOrder() === "desc"
+                                ? "Sort descending"
+                                : "Clear sort"
+                          }
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                          <ArrowUp
+                            className={cn(
+                              "ml-2 size-4 opacity-0 transition-transform",
+                              sorted && "opacity-100",
+                              (sorted as string) === "desc" && "rotate-180",
+                            )}
+                          />
+                        </Button>
+                        <div
+                          {...{
+                            onDoubleClick: () => header.column.resetSize(),
+                            onMouseDown: header.getResizeHandler(),
+                            onTouchStart: header.getResizeHandler(),
+                            className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+                          }}
+                        />
+                      </TableHead>
+                    );
+                  })}
                 </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </ScrollArea>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        style={{
+                          width: cell.column.getSize(),
+                        }}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
       <DataTablePagination table={table} />
     </div>
   );

frontend/src/components/sidebar/session-selector.tsx

@@ -49,8 +49,10 @@ function RawSessionSelector() {
       value={currentSessionId ? currentSessionId.toString() : ""}
       onValueChange={handleSessionSelected}
     >
-      <SelectTrigger className="max-w-full">
-        <SelectValue placeholder="Select a Database" />
+      <SelectTrigger className="w-full">
+        <span className={"truncate max-w-[calc(100%-1.5rem)]"}>
+          <SelectValue placeholder="Select a Database" />
+        </span>
       </SelectTrigger>
       <SelectContent>{mappedSessions}</SelectContent>
     </Select>

frontend/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,119 @@
+import { SessionSelector } from "@/components/sidebar/session-selector";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  buttonVariants,
+} from "@/components/ui";
+import { cn } from "@/lib/utils";
+import { Route } from "@/routes/__root";
+import { useDatabasesListQuery, useTablesListQuery } from "@/services/db";
+import { useUiStore } from "@/state";
+import { Link, useNavigate, useParams } from "@tanstack/react-router";
+import { Database, Rows3 } from "lucide-react";
+import type { PropsWithChildren } from "react";
+
+function SidebarContent() {
+  const { data } = useDatabasesListQuery();
+
+  const showSidebar = useUiStore.use.showSidebar();
+  const params = useParams({ strict: false });
+  const dbName = params.dbName ?? "";
+  const { data: tables } = useTablesListQuery({ dbName });
+  const navigate = useNavigate({ from: Route.fullPath });
+
+  const handleSelectedDb = (dbName: string) => {
+    void navigate({ to: "/db/$dbName/tables", params: { dbName } });
+  };
+  if (!showSidebar) return null;
+
+  return (
+    <>
+      <SessionSelector />
+      <Select value={dbName} onValueChange={handleSelectedDb}>
+        <SelectTrigger className="w-full mt-4">
+          <SelectValue placeholder="Select a Database" />
+        </SelectTrigger>
+        <SelectContent>
+          {data?.map((db) => {
+            return (
+              <SelectItem value={db} key={db}>
+                {db}
+              </SelectItem>
+            );
+          })}
+        </SelectContent>
+      </Select>
+      <nav className="flex flex-col gap-1 mt-4">
+        {dbName && (
+          <Link
+            to={"/db/$dbName/tables"}
+            params={{ dbName }}
+            activeOptions={{ exact: true }}
+            title={dbName}
+            className={cn(
+              "flex items-center gap-2 rounded py-1.5 pl-1.5",
+              "hover:bg-muted",
+              "[&.active]:bg-muted [&.active]:font-semibold",
+            )}
+          >
+            <Database className={"size-4"} />
+            <span className={"max-w-full inline-block truncate"}>{dbName}</span>
+          </Link>
+        )}
+        {tables?.map((table) => {
+          return (
+            <div
+              key={table.table_name}
+              className={cn(
+                "flex items-center gap-2 px-2.5 rounded py-1.5 justify-between w-full",
+              )}
+            >
+              <Link
+                className={cn(
+                  "max-w-full inline-block truncate",
+                  "hover:underline",
+                  "[&.active]:font-medium",
+                )}
+                title={table.table_name}
+                to={"/db/$dbName/tables/$tableName"}
+                params={{ tableName: table.table_name, dbName: dbName }}
+              >
+                {table.table_name}
+              </Link>
+              <Link
+                className={cn(
+                  "shrink-0",
+                  "hover:underline",
+                  buttonVariants({ variant: "ghost", size: "iconSm" }),
+                  "[&.active]:bg-muted",
+                )}
+                title={"Explore Data"}
+                aria-label={"Explore Data"}
+                to={"/db/$dbName/tables/$tableName/data"}
+                params={{ tableName: table.table_name, dbName: dbName }}
+                search={{ pageIndex: 0, pageSize: 10 }}
+              >
+                <Rows3 className={"size-4 shrink-0"} />
+              </Link>
+            </div>
+          );
+        })}
+      </nav>
+    </>
+  );
+}
+
+function SidebarContainer({ children }: PropsWithChildren) {
+  return <aside className={"p-3"}>{children}</aside>;
+}
+
+export function Sidebar() {
+  return (
+    <SidebarContainer>
+      <SidebarContent />
+    </SidebarContainer>
+  );
+}

frontend/src/components/ui/form/form-input.tsx

@@ -0,0 +1,32 @@
+import { Input, type InputProps } from "@/components/ui";
+import {
+  type Control,
+  type FieldValues,
+  type UseControllerProps,
+  useController,
+} from "react-hook-form";
+
+type Props<T extends FieldValues> = Omit<
+  UseControllerProps<T>,
+  "control" | "defaultValue" | "rules"
+> &
+  Omit<InputProps, "value" | "onChange"> & { control: Control<T> };
+
+export const FormInput = <T extends FieldValues>({
+  control,
+  name,
+  disabled,
+  shouldUnregister,
+  ...rest
+}: Props<T>) => {
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    control,
+    name,
+    disabled,
+    shouldUnregister,
+  });
+  return <Input errorMessage={error?.message} {...field} {...rest} />;
+};

frontend/src/components/ui/form/form-select.tsx

@@ -0,0 +1,34 @@
+import { Select } from "@/components/ui";
+import type { ComponentPropsWithoutRef } from "react";
+import {
+  type Control,
+  type FieldValues,
+  type UseControllerProps,
+  useController,
+} from "react-hook-form";
+
+type Props<T extends FieldValues> = Omit<
+  UseControllerProps<T>,
+  "control" | "defaultValue" | "rules"
+> &
+  Omit<ComponentPropsWithoutRef<typeof Select>, "value" | "onValueChange"> & {
+    control: Control<T>;
+  };
+
+export const FormSelect = <T extends FieldValues>({
+  control,
+  name,
+  disabled,
+  shouldUnregister,
+  ...rest
+}: Props<T>) => {
+  const {
+    field: { onChange, ...field },
+  } = useController({
+    control,
+    name,
+    disabled,
+    shouldUnregister,
+  });
+  return <Select {...field} {...rest} onValueChange={onChange} />;
+};

frontend/src/components/ui/form/index.ts

@@ -0,0 +1,2 @@
+export * from "./form-select";
+export * from "./form-input";

frontend/src/components/ui/index.ts

@@ -4,6 +4,7 @@ export * from "./data-table-pagination";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./input";
+export * from "./form";
 export * from "./label";
 export * from "./mode-toggle";
 export * from "./select";
@@ -14,5 +15,6 @@ export * from "./sql-data-table-cell";
 export * from "./switch";
 export * from "./table";
 export * from "./tabs";
+export * from "./tooltip";
 export * from "./toggle";
 export * from "./toggle-group";

frontend/src/components/ui/input.tsx

@@ -1,24 +1,57 @@
-import * as React from "react";
-
+import { Label } from "@/components/ui/label";
+import { useAutoId } from "@/hooks";
 import { cn } from "@/lib/utils";
+import {
+  type ChangeEvent,
+  type InputHTMLAttributes,
+  forwardRef,
+  memo,
+  useCallback,
+} from "react";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  errorMessage?: string;
+  onValueChange?: (value: string) => void;
+}
+
+const RawInput = forwardRef<HTMLInputElement, InputProps>(
+  (
+    { className, label, id, onValueChange, onChange, errorMessage, ...props },
+    ref,
+  ) => {
+    const finalId = useAutoId(id);
+    const handleChange = useCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e);
+        onValueChange?.(e.target.value);
+      },
+      [onValueChange, onChange],
+    );
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => {
     return (
-      <input
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
+      <div className={"grid gap-1.5"}>
+        {!!label && <Label htmlFor={finalId}>{label}</Label>}
+        <input
+          onChange={handleChange}
+          id={finalId}
+          className={cn(
+            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+        {!!errorMessage && (
+          <p className="text-red-500 text-xs">{errorMessage}</p>
         )}
-        ref={ref}
-        {...props}
-      />
+      </div>
     );
   },
 );
-Input.displayName = "Input";
+RawInput.displayName = "Input";
+
+const Input = memo(RawInput);
+Input.displayName = "MemoizedInput";
 
 export { Input };

frontend/src/components/ui/select.tsx

@@ -21,7 +21,7 @@ const SelectTrigger = forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}

frontend/src/components/ui/table.tsx

@@ -8,7 +8,7 @@ import {
 
 const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
+    <div className="relative w-full overflow-auto rounded-md">
       <table
         ref={ref}
         className={cn("w-full caption-bottom text-sm", className)}
@@ -23,7 +23,11 @@ const TableHeader = forwardRef<
   HTMLTableSectionElement,
   HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn("[&_tr]:border-b [&_tr]:bg-background", className)}
+    {...props}
+  />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -61,7 +65,7 @@ const TableRow = forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors data-[state=selected]:bg-muted",
       className,
     )}
     {...props}

frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,58 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+const Tooltip = ({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration = 100,
+  disableHoverableContent,
+  ...props
+}: Omit<
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
+  "content"
+> & {
+  content: React.ReactNode;
+}) => {
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        delayDuration={delayDuration}
+        disableHoverableContent={disableHoverableContent}
+      >
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipContent {...props}>{content}</TooltipContent>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+};
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

frontend/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-auto-id";

frontend/src/hooks/use-auto-id.ts

@@ -0,0 +1,6 @@
+import { useId } from 'react'
+
+export const useAutoId = (id?: string) => {
+  const generatedId = useId()
+  return id ?? generatedId
+}

frontend/src/index.css

@@ -75,11 +75,11 @@
     text-underline-position: under;
     --sidebar-width: 264px;
   }
-  
+
   .sidebar-closed {
     --sidebar-width: 0;
   }
-  
+
   .grid-rows-layout {
     grid-template-rows: 60px 1fr;
   }

frontend/src/routes/__root.tsx

@@ -1,27 +1,11 @@
-import { SessionSelector } from "@/components/session-selector";
 import { SettingsDialog } from "@/components/settings-dialog";
-import {
-  Button,
-  ModeToggle,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  buttonVariants,
-} from "@/components/ui";
+import { Sidebar } from "@/components/sidebar/sidebar";
+import { Button, ModeToggle } from "@/components/ui";
 import { cn } from "@/lib/utils";
-import { useDatabasesListQuery, useTablesListQuery } from "@/services/db";
 import { useUiStore } from "@/state";
-import {
-  Link,
-  Outlet,
-  createRootRoute,
-  useNavigate,
-  useParams,
-} from "@tanstack/react-router";
+import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
-import { Database, PanelLeft, PanelLeftClose, Rows3 } from "lucide-react";
+import { PanelLeft, PanelLeftClose } from "lucide-react";
 
 export const Route = createRootRoute({
   component: Root,
@@ -31,16 +15,6 @@ function Root() {
   const showSidebar = useUiStore.use.showSidebar();
   const toggleSidebar = useUiStore.use.toggleSidebar();
 
-  const { data } = useDatabasesListQuery();
-  const params = useParams({ strict: false });
-  const dbName = params.dbName ?? "";
-  const navigate = useNavigate({ from: Route.fullPath });
-
-  const handleSelectedDb = (dbName: string) => {
-    void navigate({ to: "/db/$dbName/tables", params: { dbName } });
-  };
-
-  const { data: tables } = useTablesListQuery({ dbName });
   return (
     <>
       <div
@@ -70,86 +44,7 @@ function Root() {
             <SettingsDialog />
           </div>
         </header>
-
-        <aside className={"p-3"}>
-          {showSidebar && (
-            <>
-              <SessionSelector />
-              <Select value={dbName} onValueChange={handleSelectedDb}>
-                <SelectTrigger className="w-full mt-4">
-                  <SelectValue placeholder="Select a Database" />
-                </SelectTrigger>
-                <SelectContent>
-                  {data?.map((db) => {
-                    return (
-                      <SelectItem value={db} key={db}>
-                        {db}
-                      </SelectItem>
-                    );
-                  })}
-                </SelectContent>
-              </Select>
-              <nav className="flex flex-col gap-1 mt-4">
-                {dbName && (
-                  <Link
-                    to={"/db/$dbName/tables"}
-                    params={{ dbName }}
-                    activeOptions={{ exact: true }}
-                    title={dbName}
-                    className={cn(
-                      "flex items-center gap-2 rounded py-1.5 pl-1.5",
-                      "hover:bg-muted",
-                      "[&.active]:bg-muted [&.active]:font-semibold",
-                    )}
-                  >
-                    <Database className={"size-4"} />
-                    <span className={"max-w-full inline-block truncate"}>
-                      {dbName}
-                    </span>
-                  </Link>
-                )}
-                {tables?.map((table) => {
-                  return (
-                    <div
-                      key={table.table_name}
-                      className={cn(
-                        "flex items-center gap-2 px-2.5 rounded py-1.5 justify-between w-full",
-                      )}
-                    >
-                      <Link
-                        className={cn(
-                          "max-w-full inline-block truncate",
-                          "hover:underline",
-                          "[&.active]:font-medium",
-                        )}
-                        title={table.table_name}
-                        to={"/db/$dbName/tables/$tableName"}
-                        params={{ tableName: table.table_name, dbName: dbName }}
-                      >
-                        {table.table_name}
-                      </Link>
-                      <Link
-                        className={cn(
-                          "shrink-0",
-                          "hover:underline",
-                          buttonVariants({ variant: "ghost", size: "iconSm" }),
-                          "[&.active]:bg-muted",
-                        )}
-                        title={"Explore Data"}
-                        aria-label={"Explore Data"}
-                        to={"/db/$dbName/tables/$tableName/data"}
-                        params={{ tableName: table.table_name, dbName: dbName }}
-                        search={{ pageIndex: 0, pageSize: 10 }}
-                      >
-                        <Rows3 className={"size-4 shrink-0"} />
-                      </Link>
-                    </div>
-                  );
-                })}
-              </nav>
-            </>
-          )}
-        </aside>
+        <Sidebar />
         <Outlet />
       </div>
       <TanStackRouterDevtools />

frontend/src/routes/auth/login.tsx

@@ -6,9 +6,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  Input,
+  FormInput,
+  FormSelect,
   Label,
-  Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
@@ -16,30 +16,122 @@ import {
   ToggleGroup,
   ToggleGroupItem,
 } from "@/components/ui";
-import { useLoginMutation } from "@/services/db";
+import { type LoginArgs, useLoginMutation } from "@/services/db";
 import { useSessionStore } from "@/state/db-session-store";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { createFileRoute } from "@tanstack/react-router";
-import { type FormEventHandler, useState } from "react";
-import { toast } from "sonner";
+import { useState } from "react";
+import { type Control, useForm } from "react-hook-form";
+import { z } from "zod";
 
 export const Route = createFileRoute("/auth/login")({
   component: LoginForm,
 });
 
-function DatabaseTypeSelector() {
+const loginWithConnectionStringSchema = z.object({
+  type: z.enum(["mysql", "postgres"]),
+  connectionString: z.string().trim().min(1, "Connection string is required"),
+});
+
+type LoginWithConnectionStringFields = z.infer<
+  typeof loginWithConnectionStringSchema
+>;
+
+function ConnectionStringForm({
+  onSubmit,
+}: {
+  onSubmit: (values: LoginWithConnectionStringFields) => void;
+}) {
+  const { control, handleSubmit } = useForm<LoginWithConnectionStringFields>({
+    resolver: zodResolver(loginWithConnectionStringSchema),
+    defaultValues: {
+      type: "postgres",
+      connectionString: "",
+    },
+  });
+
   return (
-    <div className="grid gap-2">
-      <Label htmlFor="dbType">Database type</Label>
-      <Select defaultValue={"postgres"} name={"type"}>
-        <SelectTrigger className="w-full" id={"dbType"}>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="postgres">Postgres</SelectItem>
-          <SelectItem value="mysql">MySQL</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
+    <form
+      className="grid gap-2"
+      onSubmit={handleSubmit(onSubmit)}
+      id={"login-form"}
+    >
+      <DatabaseTypeSelector control={control} />
+      <FormInput
+        label={"Connection string"}
+        name={"connectionString"}
+        control={control}
+        placeholder={"postgres://postgres:postgres@localhost:5432/postgres"}
+      />
+    </form>
+  );
+}
+
+const loginWithConnectionFieldsSchema = z.object({
+  type: z.enum(["mysql", "postgres"]),
+  username: z.string().min(1, "Username is required"),
+  password: z.string().min(1, "Password is required"),
+  host: z.string().min(1, "Host is required"),
+  port: z.string().min(1, "Port is required"),
+  database: z.string().min(1, "Database is required"),
+  ssl: z.enum(["false", "true", "require", "allow", "prefer", "verify-full"]),
+});
+type LoginWithConnectionFields = z.infer<
+  typeof loginWithConnectionFieldsSchema
+>;
+
+function ConnectionFieldsForm({
+  onSubmit,
+}: {
+  onSubmit: (values: LoginWithConnectionFields) => void;
+}) {
+  const { control, handleSubmit } = useForm<LoginWithConnectionFields>({
+    resolver: zodResolver(loginWithConnectionFieldsSchema),
+    defaultValues: {
+      type: "postgres",
+      host: "",
+      port: "",
+      username: "",
+      password: "",
+      ssl: "prefer",
+      database: "",
+    },
+  });
+
+  return (
+    <form
+      className="grid gap-3"
+      onSubmit={handleSubmit(onSubmit)}
+      id={"login-form"}
+    >
+      <DatabaseTypeSelector control={control} />
+      <FormInput
+        name={"host"}
+        control={control}
+        label={"Host"}
+        placeholder={"127.0.0.1"}
+      />
+      <FormInput name={"port"} control={control} label={"Port"} />
+      <FormInput name={"username"} control={control} label={"User"} />
+      <FormInput name={"password"} control={control} label={"Password"} />
+      <FormInput name={"database"} control={control} label={"Database"} />
+      <div className="grid gap-2">
+        <Label htmlFor="ssl">SSL mode</Label>
+        <FormSelect control={control} name={"ssl"}>
+          <SelectTrigger className="w-full" id={"ssl"}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="false">false</SelectItem>
+            <SelectItem value="true">true</SelectItem>
+            <SelectItem value="require">require</SelectItem>
+            <SelectItem value="allow">allow</SelectItem>
+            <SelectItem value="prefer">prefer</SelectItem>
+            <SelectItem value="verify-full">verify-full</SelectItem>
+          </SelectContent>
+        </FormSelect>
+      </div>
+    </form>
   );
 }
 
@@ -49,78 +141,9 @@ function LoginForm() {
   const { mutateAsync } = useLoginMutation();
   const addSession = useSessionStore.use.addSession();
 
-  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    const connectionString = formData.get("connectionString");
-    const type = formData.get("type");
-    if (connectionMethod === "connectionString") {
-      if (
-        connectionString != null &&
-        typeof connectionString === "string" &&
-        type != null &&
-        typeof type === "string"
-      ) {
-        try {
-          await mutateAsync({ connectionString, type });
-          addSession({ connectionString, type });
-        } catch (error) {
-          console.log(error);
-          toast.error("Invalid connection string");
-          return;
-        }
-      } else {
-        toast.error("Please fill all fields");
-      }
-      return;
-    }
-
-    const username = formData.get("username");
-    const password = formData.get("password");
-    const host = formData.get("host");
-    const port = formData.get("port");
-    const database = formData.get("database");
-    const ssl = formData.get("ssl");
-
-    if (
-      database == null ||
-      host == null ||
-      password == null ||
-      port == null ||
-      ssl == null ||
-      type == null ||
-      username == null
-    ) {
-      toast.error("Please fill all fields");
-      return;
-    }
-    if (
-      typeof database !== "string" ||
-      typeof host !== "string" ||
-      typeof password !== "string" ||
-      typeof port !== "string" ||
-      typeof ssl !== "string" ||
-      typeof type !== "string" ||
-      typeof username !== "string"
-    ) {
-      return;
-    }
-    try {
-      await mutateAsync({
-        username,
-        password,
-        host,
-        type,
-        port,
-        database,
-        ssl,
-      });
-      addSession({ username, password, host, type, port, database, ssl });
-    } catch (error) {
-      console.log(error);
-      toast.error("Invalid connection string");
-      return;
-    }
+  const onSubmit = async (args: LoginArgs) => {
+    await mutateAsync(args);
+    addSession(args);
   };
 
   return (
@@ -133,11 +156,7 @@ function LoginForm() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <form
-            className="grid gap-4"
-            id={"login-form"}
-            onSubmit={handleSubmit}
-          >
+          <div className="grid gap-4">
             <ToggleGroup
               type="single"
               className="w-full border gap-0.5 rounded-md"
@@ -158,85 +177,11 @@ function LoginForm() {
               </ToggleGroupItem>
             </ToggleGroup>
             {connectionMethod === "fields" ? (
-              <>
-                <DatabaseTypeSelector />
-                <div className="grid gap-2">
-                  <Label htmlFor="host">Host</Label>
-                  <Input
-                    id="host"
-                    name="host"
-                    type="text"
-                    required
-                    placeholder={"127.0.0.1"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="port">Port</Label>
-                  <Input
-                    id="port"
-                    name="port"
-                    type="text"
-                    required
-                    defaultValue={"5432"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="username">User</Label>
-                  <Input id="username" name="username" type="text" required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="password">Password</Label>
-                  <Input
-                    name="password"
-                    id="password"
-                    type="password"
-                    required
-                    placeholder={"********"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="database">Database</Label>
-                  <Input
-                    name="database"
-                    id="database"
-                    type="text"
-                    defaultValue={"postgres"}
-                    placeholder={"postgres"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="ssl">SSL mode</Label>
-                  <Select defaultValue={"false"} name={"ssl"}>
-                    <SelectTrigger className="w-full" id={"ssl"}>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="false">false</SelectItem>
-                      <SelectItem value="true">true</SelectItem>
-                      <SelectItem value="require">require</SelectItem>
-                      <SelectItem value="allow">allow</SelectItem>
-                      <SelectItem value="prefer">prefer</SelectItem>
-                      <SelectItem value="verify-full">verify-full</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </>
+              <ConnectionFieldsForm onSubmit={onSubmit} />
             ) : (
-              <div className="grid gap-2">
-                <DatabaseTypeSelector />
-                <Label htmlFor="connectionString">Connection string</Label>
-                <Input
-                  name="connectionString"
-                  id="connectionString"
-                  type="text"
-                  required
-                  placeholder={
-                    "postgres://postgres:postgres@localhost:5432/postgres"
-                  }
-                />
-              </div>
+              <ConnectionStringForm onSubmit={onSubmit} />
             )}
-          </form>
+          </div>
         </CardContent>
         <CardFooter>
           <Button className="w-full" form={"login-form"}>
@@ -247,3 +192,24 @@ function LoginForm() {
     </div>
   );
 }
+
+function DatabaseTypeSelector({
+  control,
+}: {
+  control: Control<any>;
+}) {
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="dbType">Database type</Label>
+      <FormSelect control={control} name={"type"}>
+        <SelectTrigger className="w-full" id={"dbType"}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="postgres">Postgres</SelectItem>
+          <SelectItem value="mysql">MySQL</SelectItem>
+        </SelectContent>
+      </FormSelect>
+    </div>
+  );
+}

frontend/src/services/db/db.service.ts

@@ -17,6 +17,8 @@ import type {
   TableForeignKeys,
   TableIndexes,
 } from "@/services/db/db.types";
+import { HTTPError } from "ky";
+import { toast } from "sonner";
 
 class DbService {
   login(data: LoginArgs) {
@@ -44,12 +46,29 @@ class DbService {
     perPage,
     sortField,
     sortDesc,
+    whereQuery,
   }: GetTableDataArgs) {
     return dbInstance
       .get(`api/databases/${dbName}/tables/${tableName}/data`, {
-        searchParams: getValuable({ perPage, page, sortField, sortDesc }),
+        searchParams: getValuable({
+          perPage,
+          page,
+          sortField,
+          sortDesc,
+          whereQuery,
+        }),
       })
-      .json<GetTableDataResponse>();
+      .json<GetTableDataResponse>()
+      .catch(async (error) => {
+        if (error instanceof HTTPError) {
+          const errorJson = await error.response.json();
+          console.log(errorJson);
+          toast.error(errorJson.message);
+        } else {
+          toast.error(error.message);
+        }
+        return { count: 0, data: [] };
+      });
   }
 
   getTableColumns({ dbName, tableName }: GetTableColumnsArgs) {

frontend/src/services/db/db.types.ts

@@ -47,6 +47,7 @@ export type GetTableDataArgs = {
   page?: number;
   sortField?: string;
   sortDesc?: boolean;
+  whereQuery?: string;
 };
 
 export type GetTableDataResponse = {