From 1e77033a184a6b7a47ecb04c7677a83cfe5e8bbe Mon Sep 17 00:00:00 2001
From: keppere <50957820+keppere@users.noreply.github.com>
Date: Tue, 4 Feb 2025 12:56:27 +0700
Subject: [PATCH 001/106] chart beta (#338)

* feat: chart beta

* refact: change theme provider
---
 src/app/storybook/chart-editor/page.tsx      | 104 ++++++
 src/app/storybook/chart/page.tsx             |   7 +-
 src/app/storybook/layout.tsx                 |   5 +-
 src/components/chart/chart-type-button.tsx   |  34 ++
 src/components/chart/chartTypes.ts           |  87 +++++
 src/components/chart/echartOptionsBuilder.ts | 370 +++++++++++++++++++
 src/components/chart/edit-chart-menu.tsx     | 116 ++++++
 src/components/chart/index.tsx               | 330 +++++++++--------
 8 files changed, 902 insertions(+), 151 deletions(-)
 create mode 100644 src/app/storybook/chart-editor/page.tsx
 create mode 100644 src/components/chart/chart-type-button.tsx
 create mode 100644 src/components/chart/chartTypes.ts
 create mode 100644 src/components/chart/echartOptionsBuilder.ts
 create mode 100644 src/components/chart/edit-chart-menu.tsx

diff --git a/src/app/storybook/chart-editor/page.tsx b/src/app/storybook/chart-editor/page.tsx
new file mode 100644
index 00000000..cf9d48ee
--- /dev/null
+++ b/src/app/storybook/chart-editor/page.tsx
@@ -0,0 +1,104 @@
+"use client";
+import Chart from "@/components/chart";
+import { ChartData, ChartValue } from "@/components/chart/chartTypes";
+import EditChartMenu from "@/components/chart/edit-chart-menu";
+import { useState } from "react";
+
+const data: ChartData[] = [
+  {
+    seller: 49,
+    seller2: 1049,
+    _year: 2019,
+  },
+  {
+    seller: 590,
+    seller2: 1590,
+    _year: 2020,
+  },
+  {
+    seller: 7908,
+    seller2: 8908,
+    _year: 2021,
+  },
+  {
+    seller: 4985,
+    seller2: 5985,
+    _year: 2022,
+  },
+  {
+    seller: 2638,
+    seller2: 3638,
+    _year: 2023,
+  },
+  {
+    seller: 4,
+    seller2: 1004,
+    _year: 2024,
+  },
+];
+
+const lineChartValue: ChartValue = {
+  connection_id: null,
+  created_at: "2025-01-31T08:44:04.868Z",
+  id: "94019f17-a1e0-4db2-b89e-4457cbed3ce4",
+  model: "chart",
+  name: "New Chart",
+  params: {
+    id: "94019f17-a1e0-4db2-b89e-4457cbed3ce4",
+    name: "New Chart",
+    type: "line",
+    model: "chart",
+    apiKey: "",
+    layers: [
+      {
+        sql: "select count(*) as seller,count(*) + 1000 as seller2, year(l192_new.supplier.registered_date) as _year\nFROM\n    supplier\nGROUP BY _year\nhaving _year is not null\nORDER BY _year\n",
+        type: "line",
+      },
+    ],
+    options: {
+      text: "Hello world",
+      theme: "afterburn",
+      xAxisKey: "_year",
+      yAxisKeys: ["seller", "seller2"],
+      foreground: "#ffffff",
+      xAxisLabel: "cust year",
+      yAxisLabel: "cust sellers",
+      gradientStop: "#42788F",
+      gradientStart: "#2C4F5E",
+      backgroundType: "gradient",
+      yAxisKeyColors: {
+        seller: "#E75F98",
+        seller2: "#FFA285",
+      },
+      xAxisLabelHidden: false,
+      yAxisLabelHidden: false,
+      yAxisLabelDisplay: "right",
+    },
+    source_id: "856a1855-2bee-4d87-9756-a783088c0568",
+    created_at: "2025-01-31T08:44:04.868Z",
+    updated_at: "2025-01-31T08:44:04.868Z",
+    workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
+    connection_id: null,
+  },
+  source_id: "856a1855-2bee-4d87-9756-a783088c0568",
+  type: "line",
+  updated_at: "2025-02-02T13:44:55.532Z",
+  workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
+};
+
+export default function StorybookChartEditorPage() {
+  const [chartValue, setChartValue] = useState(lineChartValue);
+  const [items, setItems] = useState(data);
+  const [modifier, setModifier] = useState({});
+  return (
+    <div className="flex h-full space-x-4">
+      <div className="w-full flex-1 border-r p-4">
+        <Chart value={chartValue} data={items} modifier={modifier} />
+      </div>
+      <div className="w-[400px] flex-shrink-0 p-4">
+        {/* render chart editor menu here */}
+        <EditChartMenu value={chartValue} setValue={setChartValue} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/storybook/chart/page.tsx b/src/app/storybook/chart/page.tsx
index 4c2e5917..03c7d192 100644
--- a/src/app/storybook/chart/page.tsx
+++ b/src/app/storybook/chart/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import Chart, { ChartData, ChartValue } from "@/components/chart";
+import Chart from "@/components/chart";
+import { ChartData, ChartValue } from "@/components/chart/chartTypes";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
 
@@ -158,7 +159,7 @@ export default function StorybookChartPage() {
   const [modifier, setModifier] = useState({});
 
   return (
-    <div>
+    <div className="flex h-full w-full flex-col">
       <div>
         <Button
           onClick={() => {
@@ -214,7 +215,7 @@ export default function StorybookChartPage() {
           Pie
         </Button>
       </div>
-      <div>
+      <div className="flex h-full w-full p-4">
         <Chart value={chartValue} data={items} modifier={modifier} />
       </div>
     </div>
diff --git a/src/app/storybook/layout.tsx b/src/app/storybook/layout.tsx
index 1cc1c998..cfaeee6f 100644
--- a/src/app/storybook/layout.tsx
+++ b/src/app/storybook/layout.tsx
@@ -59,9 +59,10 @@ export default function StorybookRootLayout({
           />
           <SidebarMenuItem
             icon={Component}
-            text="Board"
-            href="/storybook/board"
+            text="Chart Editor"
+            href="/storybook/chart-editor"
           />
+          <SidebarMenuItem text="Board" href="/storybook/board" />
         </div>
         <div className="flex-1 overflow-y-auto p-4">
           <TooltipProvider>{children}</TooltipProvider>
diff --git a/src/components/chart/chart-type-button.tsx b/src/components/chart/chart-type-button.tsx
new file mode 100644
index 00000000..3e72ad9e
--- /dev/null
+++ b/src/components/chart/chart-type-button.tsx
@@ -0,0 +1,34 @@
+interface ChartTypeButtonProps {
+  icon: React.ReactNode;
+  isActive: boolean;
+  onClick: () => void;
+  tooltipText: string;
+}
+
+export function ChartTypeButton({
+  tooltipText,
+  onClick,
+  isActive,
+  icon,
+}: ChartTypeButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      title={tooltipText}
+      style={{
+        width: "50px",
+        height: "50px",
+        borderRadius: "8px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: isActive ? "var(--accent)" : "var(--secondary)",
+        border: "none",
+        cursor: "pointer",
+        transition: "background-color 0.3s",
+      }}
+    >
+      {icon}
+    </button>
+  );
+}
diff --git a/src/components/chart/chartTypes.ts b/src/components/chart/chartTypes.ts
new file mode 100644
index 00000000..a58bd84d
--- /dev/null
+++ b/src/components/chart/chartTypes.ts
@@ -0,0 +1,87 @@
+interface ChartLayer {
+  sql: string;
+  type: string;
+}
+
+export type ChartLegend = "none" | "top" | "bottom" | "left" | "right";
+export type ChartLabelDisplayX = "auto" | "0" | "45" | "90" | "hidden";
+export type ChartLabelDisplayY = "left" | "right" | "hidden";
+export type ChartSortOrder = "default" | "asc" | "desc";
+
+interface ChartOptions {
+  foreground?: string;
+  gradientStop?: string;
+  gradientStart?: string;
+  backgroundType?: string;
+  xAxisLabelHidden?: boolean;
+  yAxisLabelHidden?: boolean;
+  legend?: ChartLegend;
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  xAxisKey: string;
+  yAxisKeys: string[];
+  yAxisKeyColors?: Record<string, string>;
+  xAxisLabelDisplay?: ChartLabelDisplayX;
+  yAxisLabelDisplay?: ChartLabelDisplayY;
+  sortOrder?: ChartSortOrder;
+  groupBy?: string;
+  percentage?: boolean;
+  text?: string;
+  format?:
+    | "percent"
+    | "number"
+    | "decimal"
+    | "date"
+    | "time"
+    | "dollar"
+    | "euro"
+    | "pound"
+    | "yen";
+  theme?: string;
+}
+
+interface ChartParams {
+  id: string;
+  name: string;
+  type: ChartType;
+  model: string;
+  apiKey: string;
+  layers: ChartLayer[];
+  options: ChartOptions;
+  source_id: string;
+  created_at: string;
+  updated_at: string;
+  workspace_id: string;
+  connection_id: string | null;
+}
+
+export interface ChartValue {
+  connection_id: string | null;
+  created_at: string;
+  id: string;
+  model: string;
+  name: string;
+  params: ChartParams;
+  source_id: string;
+  type: ChartType;
+  updated_at: string;
+  workspace_id: string;
+  description?: string;
+}
+
+export interface ChartData {
+  [key: string]: any;
+}
+
+export type ChartType =
+  | "line"
+  | "bar"
+  | "pie"
+  | "radar"
+  | "funnel"
+  | "area"
+  | "column"
+  | "scatter"
+  | "text"
+  | "table"
+  | "single_value";
diff --git a/src/components/chart/echartOptionsBuilder.ts b/src/components/chart/echartOptionsBuilder.ts
new file mode 100644
index 00000000..a35b587a
--- /dev/null
+++ b/src/components/chart/echartOptionsBuilder.ts
@@ -0,0 +1,370 @@
+import {
+  BarSeriesOption,
+  EChartsOption,
+  FunnelSeriesOption,
+  LineSeriesOption,
+  PieSeriesOption,
+  ScatterSeriesOption,
+  SeriesOption,
+} from "echarts";
+import { ChartData, ChartValue } from "./chartTypes";
+
+export default class EchartOptionsBuilder {
+  private chartValue: ChartValue;
+  private chartData: ChartData[];
+  private theme: string = "light";
+  private columns: string[] = [];
+  private chartHeight: number = 0;
+  private chartWidth: number = 0;
+
+  constructor(value: ChartValue, data: ChartData[]) {
+    this.chartValue = value;
+    this.chartData = data;
+  }
+
+  setChartSize(width: number, height: number) {
+    this.chartWidth = width;
+    this.chartHeight = height;
+  }
+
+  setTheme(theme: string) {
+    this.theme = theme;
+  }
+
+  private getColorValues(): string[] {
+    return ["#5B8FF9", "#5AD8A6", "#5D7092", "#F6BD16", "#6F5EF9"];
+  }
+
+  private getTextColor(): string {
+    return (
+      this.chartValue.params.options?.foreground ??
+      (this.theme === "dark" ? "#FFFFFF" : "#000000")
+    );
+  }
+
+  getChartOptions(): EChartsOption {
+    const colorValues = this.getColorValues();
+
+    const formattedSource = this.chartData;
+    if (this.chartValue.params.options?.xAxisKey) {
+      this.columns.push(this.chartValue.params.options.xAxisKey);
+    }
+    for (const key of this.chartValue.params.options.yAxisKeys) {
+      this.columns.push(key);
+    }
+
+    const isTall = this.chartHeight > 150;
+    const gridLineColors = this.theme === "dark" ? "#FFFFFF08" : "#00000010";
+    const axisLineColors = this.theme === "dark" ? "#FFFFFF15" : "#00000020";
+
+    // Determine if the X axis data is a date
+    const isXAxisDate = !!(
+      this.columns[0] &&
+      this.chartData.some((item) => isDate(item[this.columns[0]] as string))
+    );
+    const isYAxisDate = !!(
+      this.columns[1] &&
+      formattedSource.some((item) => isDate(item[this.columns[1]] as string))
+    );
+
+    if (this.chartValue.type === "radar") {
+      return {
+        radar: {
+          shape: "polygon",
+          indicator: this.columns.map((name) => ({ name })),
+        },
+        series: this.columns.map((col, index) => ({
+          type: "radar",
+          data: [
+            {
+              value: formattedSource.map((item) => Number(item[col])), // throws away precision of bigint?!
+              name: col,
+              itemStyle: {
+                color:
+                  this.chartValue.params.options.yAxisKeyColors?.[col] ||
+                  colorValues[index % colorValues.length],
+              },
+            },
+          ],
+        })),
+        tooltip: {
+          trigger: "item",
+          borderColor: gridLineColors, // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
+        },
+      };
+    }
+
+    const options: EChartsOption = {
+      // backgroundColor: this.getBackgroundColor(),
+      dataset: {
+        dimensions: this.columns,
+        source: formattedSource,
+      },
+      tooltip: {
+        trigger: this.chartValue.type === "scatter" ? "item" : "axis",
+        borderColor: gridLineColors, // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
+      },
+      legend: {
+        show: isTall,
+        data: this.columns.slice(1),
+        textStyle: {
+          color: this.getTextColor(),
+        },
+        top: 8,
+        orient: "horizontal",
+        type: "scroll", // Enable scrolling if too many items
+      },
+      grid: {
+        left: "0", // this.type === 'bar' ? '100' : '0',
+        right: "6",
+        bottom:
+          this.chartValue.params.options.xAxisLabel && isTall ? "23" : "0", // isTall ? '15%' : '15%',
+        top: this.chartValue.params.options.yAxisLabel && isTall ? "26" : "8",
+        containLabel: true,
+      },
+      xAxis: {
+        show: !this.chartValue.params.options.xAxisLabelHidden,
+        type:
+          this.chartValue.type === "bar"
+            ? "value"
+            : isXAxisDate
+              ? "time"
+              : "category",
+        name: isTall ? this.chartValue.params.options.xAxisLabel : "",
+        nameLocation: "middle",
+        nameGap: 30,
+        nameTextStyle: {
+          color: this.getTextColor(),
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: axisLineColors,
+          },
+        },
+        axisLabel: {
+          // @ts-ignore bug in echarts? this definitely exists
+          formatter: isXAxisDate ? undefined : this.labelFormatter,
+          color: this.getTextColor(),
+          hideOverlap: true,
+          rotate:
+            this.chartValue.params.options.xAxisLabelDisplay === "auto"
+              ? -45
+              : 0,
+          align: "center",
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: gridLineColors,
+          },
+        },
+      },
+      yAxis: {
+        type:
+          this.chartValue.type === "bar"
+            ? isXAxisDate
+              ? "time"
+              : "category"
+            : isYAxisDate
+              ? "time"
+              : "value",
+        name: isTall ? this.chartValue.params.options.yAxisLabel : "",
+        show: this.chartValue.params.options.yAxisLabelDisplay !== "hidden",
+        position:
+          (this.chartValue.params.options.yAxisLabelDisplay !== "hidden" &&
+            this.chartValue.params.options.yAxisLabelDisplay) ||
+          undefined, // exclude `hidden`, pass left/right
+        nameTextStyle: {
+          color: this.getTextColor(),
+          align: "left",
+          padding: [0, 0, 0, 0],
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: axisLineColors,
+          },
+        },
+        axisLabel: {
+          // @ts-ignore bug in echarts? this definitely exists
+          formatter: isXAxisDate ? undefined : this.labelFormatter, // `isXAxisDate` is not a typo
+          color: this.getTextColor(),
+          align: "right",
+          inside: false,
+        },
+        axisTick: {
+          inside: false,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: gridLineColors,
+          },
+        },
+      },
+    };
+
+    return this.addSeries(options); // Pass the source dataset when adding series
+  }
+
+  private addSeries(_options: EChartsOption) {
+    const options = { ..._options };
+
+    switch (this.chartValue.type) {
+      case "column":
+        options.series = this.constructSeries<BarSeriesOption>("bar", {
+          animationDelay: (idx) => idx * 0.8,
+        });
+        break;
+      case "line":
+        options.series = this.constructSeries<LineSeriesOption>("line", {
+          showSymbol: false,
+          animationDuration: 1000,
+          animationEasing: "cubicOut",
+        });
+        break;
+      case "scatter":
+        options.series = this.constructSeries<ScatterSeriesOption>("scatter", {
+          symbolSize: 8,
+          itemStyle: {
+            borderWidth: 2,
+            borderColor: this.getTextColor(),
+            color: "transparent", // Make the fill transparent
+          },
+        });
+        break;
+      case "area":
+        options.series = this.constructSeries<LineSeriesOption>("line", {
+          areaStyle: {},
+          smooth: true,
+        });
+        break;
+      case "bar":
+        options.series = this.constructSeries<BarSeriesOption>("bar", {
+          animationDelay: (idx) => idx * 0.8,
+          barWidth: "40%",
+          coordinateSystem: "cartesian2d",
+        });
+        options.xAxis = {
+          ...options.xAxis,
+
+          // Add split line style here for x-axis
+          splitLine: {
+            ...(options.xAxis as any).splitLine,
+            show: true,
+          },
+        };
+        break;
+      case "funnel":
+        options.series = this.constructSeries<FunnelSeriesOption>("funnel", {
+          left: "10%",
+          top: 26,
+          bottom: 0,
+          width: "80%",
+          minSize: "0%",
+          maxSize: "100%",
+          sort: "descending",
+          label: {
+            show: true,
+            position: "inside",
+            formatter: "{b}: {c}",
+            color: "#fff", // label color
+          },
+          gap: 2,
+          itemStyle: {
+            borderColor: "rgba(0, 0, 0, 0.2)",
+            borderWidth: 1,
+          },
+          data: this.chartData?.map((item) => ({
+            name: item[this.columns[0]] as string,
+            value: item[this.columns[1]] as number,
+          })),
+          color: this.getColorValues(),
+        });
+        break;
+      case "pie":
+        options.series = this.constructSeries<PieSeriesOption>("pie", {
+          data:
+            this.chartData?.map((item) => ({
+              name: item[this.columns[0]] as string,
+              value: item[this.columns[1]] as number,
+            })) ?? [],
+          radius: ["40%", "70%"],
+          center: ["50%", "50%"],
+          avoidLabelOverlap: true,
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: "rgba(0, 0, 0, 0.2)",
+            borderWidth: 2,
+          },
+          label: {
+            show: this.chartValue.params?.options?.xAxisLabelHidden !== true,
+            formatter: "{b}: {c} ({d}%)",
+            color: this.theme === "dark" ? "#fff" : "#000", // Set label text color to white
+            textBorderColor: "transparent", // Remove text border
+          },
+          color: this.getColorValues(),
+          tooltip: {
+            trigger: "item",
+            borderColor: this.theme === "dark" ? "#FFFFFF08" : "#00000010", // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
+          },
+        });
+
+        break;
+      default:
+        break;
+    }
+
+    return options;
+  }
+
+  private constructSeries<T extends SeriesOption>(
+    seriesType: T["type"],
+    additionalOptions: Partial<Omit<T, "type">> = {}
+  ): T[] {
+    return this.columns.slice(1).map((col) => {
+      const baseSeries = {
+        name: col,
+        type: seriesType,
+        encode:
+          this.chartValue.type === "bar"
+            ? { x: col, y: this.columns[0] } // For bar charts
+            : { x: this.columns[0], y: col }, // For other chart types
+        itemStyle: {
+          color: this.chartValue.params.options.yAxisKeyColors?.[col], // does NOT impact pie charts
+        },
+        symbol: "circle",
+        ...additionalOptions,
+      };
+
+      if (this.isValidSeriesOption<T>(baseSeries)) {
+        return baseSeries as unknown as T;
+      } else {
+        throw new Error(
+          `The series option is invalid for series type "${seriesType}".`
+        );
+      }
+    });
+  }
+  private isValidSeriesOption<T extends SeriesOption>(
+    series: any
+  ): series is T {
+    return (
+      series &&
+      typeof series === "object" &&
+      typeof series.name === "string" &&
+      typeof series.type === "string"
+    );
+  }
+}
+
+function isDate(dateString: string): boolean {
+  if (!isNaN(Number(dateString))) {
+    // this is number
+    return false;
+  } else {
+    const date = new Date(dateString);
+    return !isNaN(date.getTime());
+  }
+}
diff --git a/src/components/chart/edit-chart-menu.tsx b/src/components/chart/edit-chart-menu.tsx
new file mode 100644
index 00000000..bd02da39
--- /dev/null
+++ b/src/components/chart/edit-chart-menu.tsx
@@ -0,0 +1,116 @@
+import { ChartBar } from "@phosphor-icons/react/dist/icons/ChartBar";
+import { ChartLine } from "@phosphor-icons/react/dist/icons/ChartLine";
+import { ChartPieSlice } from "@phosphor-icons/react/dist/icons/ChartPieSlice";
+import { ChartPolar } from "@phosphor-icons/react/dist/icons/ChartPolar";
+import { ChartScatter } from "@phosphor-icons/react/dist/icons/ChartScatter";
+import { Funnel } from "@phosphor-icons/react/dist/icons/Funnel";
+import { NumberCircleOne } from "@phosphor-icons/react/dist/icons/NumberCircleOne";
+import { Table } from "@phosphor-icons/react/dist/icons/Table";
+import { TextT } from "@phosphor-icons/react/dist/icons/TextT";
+import { ChartBarHorizontal } from "@phosphor-icons/react/dist/ssr";
+import { ChartTypeButton } from "./chart-type-button";
+import { ChartValue } from "./chartTypes";
+
+interface EditChartMenuProps {
+  value: ChartValue;
+  setValue: (value: ChartValue) => void;
+}
+
+export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
+  return (
+    <div className="flex w-full flex-col gap-5 p-1 pb-4">
+      <section key={1}>
+        <p className="mb-1.5 text-sm font-bold opacity-70">Type</p>
+        <div className="grid grid-cols-6 gap-2">
+          <ChartTypeButton
+            icon={<ChartLine />}
+            isActive={value.type === "line"}
+            onClick={() => {
+              setValue({ ...value, type: "line" });
+            }}
+            tooltipText="Line"
+          />
+          <ChartTypeButton
+            icon={<ChartBar />}
+            isActive={value.type === "column"}
+            onClick={() => {
+              setValue({ ...value, type: "column" });
+            }}
+            tooltipText="Column"
+          />
+          <ChartTypeButton
+            icon={<ChartBarHorizontal />}
+            isActive={value.type === "bar"}
+            onClick={() => {
+              setValue({ ...value, type: "bar" });
+            }}
+            tooltipText="Bar"
+          />
+          <ChartTypeButton
+            icon={<ChartScatter />}
+            isActive={value.type === "scatter"}
+            onClick={() => {
+              setValue({ ...value, type: "scatter" });
+            }}
+            tooltipText="scatter"
+          />
+          <ChartTypeButton
+            icon={<TextT />}
+            isActive={value.type === "text"}
+            onClick={() => {
+              setValue({ ...value, type: "text" });
+            }}
+            tooltipText="Text"
+          />
+          <ChartTypeButton
+            icon={<NumberCircleOne weight="bold" />}
+            isActive={value.type === "single_value"}
+            onClick={() => {
+              setValue({ ...value, type: "single_value" });
+            }}
+            tooltipText="Single Value"
+          />
+          <ChartTypeButton
+            icon={<Table />}
+            isActive={value.type === "table"}
+            onClick={() => {
+              setValue({ ...value, type: "table" });
+            }}
+            tooltipText="Table"
+          />
+          <ChartTypeButton
+            icon={<ChartPieSlice weight="bold" />}
+            isActive={value.type === "pie"}
+            onClick={() => {
+              setValue({ ...value, type: "pie" });
+            }}
+            tooltipText="Pie"
+          />
+          <ChartTypeButton
+            icon={<ChartPolar />}
+            isActive={value.type === "radar"}
+            onClick={() => {
+              setValue({ ...value, type: "radar" });
+            }}
+            tooltipText="Radar"
+          />
+          <ChartTypeButton
+            icon={<Funnel />}
+            isActive={value.type === "funnel"}
+            onClick={() => {
+              setValue({ ...value, type: "funnel" });
+            }}
+            tooltipText="Funnel"
+          />
+        </div>
+      </section>
+
+      {value.type === "text" && (
+        <div>
+          <p className="mb-1.5 text-sm font-bold opacity-70">Text</p>
+          <textarea className="h-[200px] w-full rounded-md border p-2" />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
index d379da30..3fc8c5c8 100644
--- a/src/components/chart/index.tsx
+++ b/src/components/chart/index.tsx
@@ -1,171 +1,209 @@
 "use client";
 import * as echarts from "echarts";
 import { EChartsOption } from "echarts";
+import { useTheme } from "next-themes";
 import { useEffect, useRef } from "react";
+import { ChartData, ChartValue } from "./chartTypes";
+import EchartOptionsBuilder from "./echartOptionsBuilder";
 
-interface ChartLayer {
-  sql: string;
-  type: string;
+interface OuterbaseChartProps {
+  data: ChartData[];
+  value: ChartValue;
+  modifier?: EChartsOption;
+  className?: string;
 }
 
-interface ChartOptions {
-  theme?: string;
-  xAxisKey: string;
-  yAxisKeys: string[];
-  yAxisKeyColors: {
-    [key: string]: string;
-  };
-}
+const TextComponent = ({ value }: OuterbaseChartProps) => {
+  let markdown = value.params.options?.text ?? "";
 
-interface ChartParams {
-  id: string;
-  name: string;
-  type: ChartType;
-  model: string;
-  apiKey: string;
-  layers: ChartLayer[];
-  options: ChartOptions;
-  source_id: string;
-  created_at: string;
-  updated_at: string;
-  workspace_id: string;
-  connection_id: string | null;
-}
+  // Bold (**text** or __text__)
+  markdown = markdown.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
+  markdown = markdown.replace(/__(.*?)__/g, "<b>$1</b>");
 
-export interface ChartValue {
-  connection_id: string | null;
-  created_at: string;
-  id: string;
-  model: string;
-  name: string;
-  params: ChartParams;
-  source_id: string;
-  type: ChartType;
-  updated_at: string;
-  workspace_id: string;
-}
+  // Italic (*text* or _text_)
+  markdown = markdown.replace(/\*(.*?)\*/g, "<i>$1</i>");
+  markdown = markdown.replace(/_(.*?)_/g, "<i>$1</i>");
 
-export interface ChartData {
-  [key: string]: any;
-}
+  // Underline (__text__)
+  markdown = markdown.replace(/~~(.*?)~~/g, "<u>$1</u>");
+
+  // Line break (double space followed by a newline)
+  markdown = markdown.replace(/  \n/g, "<br>");
+  return (
+    <div className="h-full w-full">
+      <p
+        style={{
+          display: "-webkit-box",
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden",
+          fontFamily: "Inter, sans-serif",
+        }}
+        className="flex-1 self-start text-neutral-900 dark:text-neutral-100"
+      >
+        <span
+          dangerouslySetInnerHTML={{
+            __html: markdown,
+          }}
+        ></span>
+      </p>
+    </div>
+  );
+};
 
-export type ChartType = "line" | "bar" | "pie" | "column" | "scatter";
+const SingleValueComponent = ({ value, data }: OuterbaseChartProps) => {
+  const firstRecord = data.length > 0 ? data[0] : null;
+  let firstRecordValue = firstRecord
+    ? firstRecord[value.params.options.xAxisKey ?? ""]
+    : "";
+  const formattedValue = value.params.options?.format;
 
-interface OuterbaseChartProps {
-  data: ChartData[];
-  value: ChartValue;
-  modifier?: EChartsOption;
-  className?: string;
-}
+  if (formattedValue === "percent") {
+    const number = parseFloat(`${firstRecordValue}`);
+    firstRecordValue = `${number.toFixed(2)}%`;
+  } else if (formattedValue === "number") {
+    const number = parseFloat(`${firstRecordValue}`);
+    const rounded = Math.round(number);
+    firstRecordValue = `${rounded.toLocaleString("en-US")}`;
+  } else if (formattedValue === "decimal") {
+    const number = parseFloat(`${firstRecordValue}`);
+    firstRecordValue = `${number.toFixed(2)}`;
+  } else if (formattedValue === "date") {
+    const stringDate = `${firstRecordValue}`;
 
-export default function Chart({
-  value,
-  data,
-  modifier,
-  className,
-}: OuterbaseChartProps) {
-  const domRef = useRef<HTMLDivElement>(null);
+    // Convert to a Date object to validate the input
+    const date = new Date(stringDate);
 
-  useEffect(() => {
-    const props = transfromOutbaseChartData({
-      value,
-      data,
-      modifier,
-    });
-    if (domRef.current) {
-      let chartInstance = echarts.getInstanceByDom(domRef.current);
-      if (chartInstance) {
-        chartInstance.dispose();
-      }
-      chartInstance = echarts.init(domRef.current);
-      chartInstance.clear();
-      chartInstance.setOption(props);
+    if (!isNaN(date.getTime())) {
+      // Check if the date is valid
+      // Extract the date components
+      const year = date.getUTCFullYear();
+      const month = String(date.getUTCMonth() + 1).padStart(2, "0"); // Months are 0-based
+      const day = String(date.getUTCDate()).padStart(2, "0");
+
+      // Manually construct the formatted date string
+      const formattedDate = `${month}/${day}/${year}`;
+
+      firstRecordValue = formattedDate;
     }
-  }, [domRef, value, data, modifier]);
+  } else if (formattedValue === "time") {
+    const date = new Date(`${firstRecordValue}`);
+    firstRecordValue = date.toLocaleTimeString("en-US");
+  } else if (formattedValue === "dollar") {
+    const number = parseFloat(`${firstRecordValue}`);
+    firstRecordValue = `$${number.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  } else if (formattedValue === "euro") {
+    const number = parseFloat(`${firstRecordValue}`);
+    firstRecordValue = `€${number.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  } else if (formattedValue === "pound") {
+    const number = parseFloat(`${firstRecordValue}`);
+    firstRecordValue = `£${number.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  } else if (formattedValue === "yen") {
+    const number = parseFloat(`${firstRecordValue}`);
+    firstRecordValue = `¥${number.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
+  }
+
+  // there is something to check with the sizeX and sizeY
+  // we will figure it out later
+  const sizeX = 1;
+  const sizeY = 1;
+
+  let style: React.CSSProperties = {
+    fontSize: sizeX === 1 && sizeY === 1 ? "30px" : "60px",
+    lineHeight: sizeX === 1 && sizeY === 1 ? "36px" : "68px",
+  };
+  const fgColor = value.params.options?.foreground;
+  if (fgColor) style.color = fgColor;
 
   return (
-    <div ref={domRef} className={className ?? "h-[400px] w-[500px]"}></div>
+    <div className="h-full w-full">
+      <div style={style} className="truncate font-bold">
+        {firstRecordValue}
+      </div>
+    </div>
   );
-}
+};
 
-export function transfromOutbaseChartData({
-  value,
-  data,
-  modifier,
-}: OuterbaseChartProps) {
-  const xAxisData = data.map(
-    (item) => item[value?.params?.options?.xAxisKey] ?? ""
+const TableComponent = ({ data }: OuterbaseChartProps) => {
+  return (
+    <div className="w-full overflow-auto rounded border">
+      <table className="w-full border-separate border-spacing-0 text-sm">
+        <thead className="sticky top-0">
+          <tr className="bg-secondary h-[35px] text-xs">
+            {Object.keys(data[0]).map((key) => (
+              <th key={key} className="border-r px-2 text-left">
+                {key}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, index) => (
+            <tr key={index}>
+              {Object.keys(row).map((key) => (
+                <td className="border-t border-r px-4 py-2" key={key}>
+                  {row[key] || ""}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
-  const seriesData = value?.params?.options?.yAxisKeys.map((key) => {
-    const color = value?.params?.options?.yAxisKeyColors?.[key] ?? "";
-    const chartType = value?.type;
-    const baseSeries = {
-      name: key,
-      type: value.type,
-      data: data.map((item) => {
-        if (chartType === "pie") {
-          return {
-            value: item[key],
-            name: item[value?.params?.options?.xAxisKey] ?? "",
-          };
-        } else {
-          return item[key];
+};
+
+const ChartComponent = ({ value, data, modifier }: OuterbaseChartProps) => {
+  const domRef = useRef<HTMLDivElement>(null);
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (domRef.current) {
+      let chartInstance =
+        echarts.getInstanceByDom(domRef.current) ||
+        echarts.init(domRef.current);
+      chartInstance.clear();
+
+      const chartBuilder = new EchartOptionsBuilder(value, data);
+      chartBuilder.setTheme(theme || "dark");
+
+      const options = chartBuilder.getChartOptions();
+      chartInstance.setOption(options);
+
+      // handle resize event
+      const resizeObserver = new ResizeObserver((entries) => {
+        requestAnimationFrame(() => {
+          for (const entry of entries) {
+            if (entry.target === domRef.current) {
+              const { width, height } = entry.contentRect;
+              chartBuilder.setChartSize(width, height);
+              chartInstance.resize();
+              break;
+            }
+          }
+        });
+      });
+
+      resizeObserver.observe(domRef.current);
+
+      return () => {
+        if (domRef.current) {
+          resizeObserver.unobserve(domRef.current);
         }
-      }),
-      itemStyle: {
-        color: color,
-      },
-    };
-    if (chartType === "pie") {
-      return pieChartDecoration(baseSeries);
+      };
     }
-    return baseSeries;
-  });
-
-  if (value.type === "pie") {
-    return {
-      series: seriesData,
-      ...modifier,
-    };
-  }
+  }, [domRef, value, data]);
 
-  return {
-    xAxis: {
-      type: "category",
-      data: xAxisData,
-    },
-    yAxis: {
-      type: "value",
-    },
-    series: seriesData,
-    ...modifier,
-  };
-}
+  return <div ref={domRef} className="h-full w-full"></div>;
+};
 
-function pieChartDecoration(baseSeries: any) {
-  return {
-    ...baseSeries,
-    type: "pie",
-    radius: ["40%", "70%"],
-    avoidLabelOverlap: false,
-    itemStyle: {
-      borderRadius: 10,
-      borderColor: "#fff",
-      borderWidth: 2,
-    },
-    label: {
-      show: false,
-      position: "center",
-    },
-    emphasis: {
-      label: {
-        show: true,
-        fontSize: 40,
-        fontWeight: "bold",
-      },
-    },
-    labelLine: {
-      show: false,
-    },
-  };
+export default function Chart({ value, data, modifier }: OuterbaseChartProps) {
+  if (value.type === "text") {
+    return <TextComponent value={value} data={data} />;
+  } else if (value.type === "single_value") {
+    return <SingleValueComponent value={value} data={data} />;
+  } else if (value.type === "table") {
+    return <TableComponent value={value} data={data} />;
+  } else {
+    return <ChartComponent value={value} data={data} modifier={modifier} />;
+  }
 }

From 5cf95bc8f1d3299e5ea803e83b6ee1640570e8e9 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 5 Feb 2025 10:11:18 +0700
Subject: [PATCH 002/106] support batch for optimizing with outerbase studio

---
 src/components/gui/studio.tsx              |  4 +-
 src/context/schema-provider.tsx            |  6 +-
 src/core/query-pipeline.tsx                | 58 +++++++--------
 src/drivers/base-driver.ts                 |  6 +-
 src/drivers/common-sql-imp.ts              | 12 +++-
 src/drivers/mysql/mysql-driver.ts          | 84 ++++++++++++----------
 src/outerbase-cloud/api-type.ts            |  5 ++
 src/outerbase-cloud/api.ts                 | 12 ++++
 src/outerbase-cloud/database/mysql.ts      | 63 +++++-----------
 src/outerbase-cloud/database/postgresql.ts | 60 +++-------------
 src/outerbase-cloud/database/sqlite.ts     | 60 +++-------------
 src/outerbase-cloud/database/utils.ts      | 30 ++++++--
 12 files changed, 173 insertions(+), 227 deletions(-)

diff --git a/src/components/gui/studio.tsx b/src/components/gui/studio.tsx
index 6090d7d9..d2db2998 100644
--- a/src/components/gui/studio.tsx
+++ b/src/components/gui/studio.tsx
@@ -58,9 +58,9 @@ export function Studio({
 
             return await target.query(beforePipeline.getStatments()[0]);
           };
-        } else if (property === "transaction") {
+        } else if (property === "transaction" || property === "batch") {
           return async (statements: string[]) => {
-            const beforePipeline = new BeforeQueryPipeline("transaction", [
+            const beforePipeline = new BeforeQueryPipeline(property, [
               ...statements,
             ]);
 
diff --git a/src/context/schema-provider.tsx b/src/context/schema-provider.tsx
index d6d050c6..e45d8dbe 100644
--- a/src/context/schema-provider.tsx
+++ b/src/context/schema-provider.tsx
@@ -1,3 +1,5 @@
+import ConnectingDialog from "@/components/gui/connection-dialog";
+import { DatabaseSchemaItem, DatabaseSchemas } from "@/drivers/base-driver";
 import {
   PropsWithChildren,
   createContext,
@@ -7,10 +9,8 @@ import {
   useMemo,
   useState,
 } from "react";
-import ConnectingDialog from "@/components/gui/connection-dialog";
-import { DatabaseSchemaItem, DatabaseSchemas } from "@/drivers/base-driver";
-import { useDatabaseDriver } from "./driver-provider";
 import { useAutoComplete } from "./auto-complete-provider";
+import { useDatabaseDriver } from "./driver-provider";
 
 type AutoCompletionSchema = Record<string, Record<string, string[]> | string[]>;
 
diff --git a/src/core/query-pipeline.tsx b/src/core/query-pipeline.tsx
index b8f2c131..9f712ade 100644
--- a/src/core/query-pipeline.tsx
+++ b/src/core/query-pipeline.tsx
@@ -1,32 +1,32 @@
 export class BeforeQueryPipeline {
-    metadata: Record<string, string> = {};
-  
-    constructor(
-      protected type: "query" | "transaction",
-      protected statements: string[]
-    ) {}
-  
-    getMetadata(name: string) {
-        return this.metadata[name];
-    }
+  metadata: Record<string, string> = {};
 
-    getMetadataList() {
-      return structuredClone(this.metadata)
-    }
+  constructor(
+    protected type: "query" | "transaction" | "batch",
+    protected statements: string[]
+  ) {}
 
-    setMetadata(name: string, value: string) {
-        this.metadata[name] = value;
-    }
-  
-    getStatments() {
-      return this.statements;
-    }
-  
-    updateStatements(statements: string[]) {
-      this.statements = statements;
-    }
-  
-    getType() {
-      return this.type;
-    }
-  }
\ No newline at end of file
+  getMetadata(name: string) {
+    return this.metadata[name];
+  }
+
+  getMetadataList() {
+    return structuredClone(this.metadata);
+  }
+
+  setMetadata(name: string, value: string) {
+    this.metadata[name] = value;
+  }
+
+  getStatments() {
+    return this.statements;
+  }
+
+  updateStatements(statements: string[]) {
+    this.statements = statements;
+  }
+
+  getType() {
+    return this.type;
+  }
+}
diff --git a/src/drivers/base-driver.ts b/src/drivers/base-driver.ts
index 35e04688..41dc71bc 100644
--- a/src/drivers/base-driver.ts
+++ b/src/drivers/base-driver.ts
@@ -1,7 +1,4 @@
-import {
-  type ColumnHeader,
-  ColumnType
-} from "@outerbase/sdk-transform";
+import { type ColumnHeader, ColumnType } from "@outerbase/sdk-transform";
 
 export type InValue =
   | null
@@ -296,6 +293,7 @@ export abstract class BaseDriver {
   abstract close(): void;
 
   abstract query(stmt: string): Promise<DatabaseResultSet>;
+  abstract batch(stmts: string[]): Promise<DatabaseResultSet[]>;
   abstract transaction(stmts: string[]): Promise<DatabaseResultSet[]>;
 
   abstract schemas(): Promise<DatabaseSchemas>;
diff --git a/src/drivers/common-sql-imp.ts b/src/drivers/common-sql-imp.ts
index 4cee75ed..d84152a9 100644
--- a/src/drivers/common-sql-imp.ts
+++ b/src/drivers/common-sql-imp.ts
@@ -8,8 +8,8 @@ import {
   DatabaseValue,
   SelectFromTableOptions,
 } from "./base-driver";
-import { escapeSqlValue } from "./sqlite/sql-helper";
 import { deleteFrom, insertInto, updateTable } from "./query-builder";
+import { escapeSqlValue } from "./sqlite/sql-helper";
 
 export default abstract class CommonSQLImplement extends BaseDriver {
   protected validateUpdateOperation(
@@ -28,6 +28,16 @@ export default abstract class CommonSQLImplement extends BaseDriver {
     return null;
   }
 
+  async batch(stmts: string[]): Promise<DatabaseResultSet[]> {
+    const result: DatabaseResultSet[] = [];
+
+    for (const stmt of stmts) {
+      result.push(await this.query(stmt));
+    }
+
+    return result;
+  }
+
   getCollationList(): string[] {
     return [];
   }
diff --git a/src/drivers/mysql/mysql-driver.ts b/src/drivers/mysql/mysql-driver.ts
index f96296bc..2f133d7d 100644
--- a/src/drivers/mysql/mysql-driver.ts
+++ b/src/drivers/mysql/mysql-driver.ts
@@ -1,18 +1,19 @@
+import { ColumnType } from "@outerbase/sdk-transform";
 import { format } from "sql-formatter";
 import {
+  ColumnTypeSelector,
+  DatabaseSchemaChange,
+  DatabaseSchemaItem,
   DatabaseSchemas,
+  DatabaseTableColumn,
+  DatabaseTableColumnConstraint,
   DatabaseTableSchema,
+  DatabaseTableSchemaChange,
   DatabaseTriggerSchema,
+  DatabaseViewSchema,
   DriverFlags,
-  DatabaseSchemaItem,
-  DatabaseTableColumn,
-  DatabaseTableSchemaChange,
-  ColumnTypeSelector,
-  DatabaseTableColumnConstraint,
-  DatabaseSchemaChange,
   TriggerOperation,
   TriggerWhen,
-  DatabaseViewSchema,
 } from "../base-driver";
 import CommonSQLImplement from "../common-sql-imp";
 import { escapeSqlValue } from "../sqlite/sql-helper";
@@ -24,7 +25,6 @@ import {
   MYSQL_COLLATION_LIST,
   MYSQL_DATA_TYPE_SUGGESTION,
 } from "./mysql-data-type";
-import { ColumnType } from "@outerbase/sdk-transform";
 
 interface MySqlDatabase {
   SCHEMA_NAME: string;
@@ -169,32 +169,38 @@ export default abstract class MySQLLikeDriver extends CommonSQLImplement {
   async schemas(): Promise<DatabaseSchemas> {
     const schemaSql =
       "SELECT SCHEMA_NAME FROM information_schema.SCHEMATA WHERE SCHEMA_NAME NOT IN ('mysql', 'information_schema', 'performance_schema', 'sys')";
-    const schemaResult = (await this.query(schemaSql))
-      .rows as unknown as MySqlDatabase[];
 
     const tableSql =
       "SELECT TABLE_SCHEMA, TABLE_NAME, TABLE_TYPE, DATA_LENGTH, INDEX_LENGTH FROM information_schema.tables WHERE TABLE_SCHEMA NOT IN ('mysql', 'information_schema', 'performance_schema', 'sys')";
-    const tableResult = (await this.query(tableSql))
-      .rows as unknown as MySqlTable[];
 
     const columnSql =
       "SELECT TABLE_SCHEMA, TABLE_NAME, COLUMN_NAME, COLUMN_TYPE, DATA_TYPE, EXTRA, COLUMN_KEY, IS_NULLABLE, COLUMN_DEFAULT FROM information_schema.columns WHERE TABLE_SCHEMA NOT IN ('mysql', 'information_schema', 'performance_schema', 'sys')";
-    const columnResult = (await this.query(columnSql))
-      .rows as unknown as MySqlColumn[];
 
     const constraintSql =
       "SELECT TABLE_SCHEMA, TABLE_NAME, CONSTRAINT_NAME, CONSTRAINT_TYPE FROM information_schema.table_constraints WHERE TABLE_SCHEMA NOT IN ('mysql', 'information_schema', 'performance_schema', 'sys') AND CONSTRAINT_TYPE IN ('PRIMARY KEY', 'UNIQUE', 'FOREIGN KEY')";
-    const constraintResult = (await this.query(constraintSql))
-      .rows as unknown as MySQLConstraintResult[];
 
     const constraintColumnsSql = `SELECT CONSTRAINT_NAME, TABLE_SCHEMA, TABLE_NAME, COLUMN_NAME, REFERENCED_TABLE_SCHEMA, REFERENCED_TABLE_NAME, REFERENCED_COLUMN_NAME FROM information_schema.key_column_usage WHERE TABLE_SCHEMA NOT IN ('mysql', 'information_schema', 'performance_schema', 'sys')`;
-    const constraintColumnsResult = (await this.query(constraintColumnsSql))
-      .rows as unknown as MySQLConstraintColumnResult[];
 
     const triggerSql =
       "SELECT * from information_schema.triggers WHERE TRIGGER_SCHEMA NOT IN ('mysql', 'information_schema', 'performance_schema', 'sys')";
-    const triggerResult = (await this.query(triggerSql))
-      .rows as unknown as MySQLTriggerResult[];
+
+    const result = await this.batch([
+      schemaSql,
+      tableSql,
+      columnSql,
+      constraintSql,
+      constraintColumnsSql,
+      triggerSql,
+    ]);
+
+    const schemaResult = result[0].rows as unknown as MySqlDatabase[];
+    const tableResult = result[1].rows as unknown as MySqlTable[];
+    const columnResult = result[2].rows as unknown as MySqlColumn[];
+    const constraintResult = result[3]
+      .rows as unknown as MySQLConstraintResult[];
+    const constraintColumnsResult = result[4]
+      .rows as unknown as MySQLConstraintColumnResult[];
+    const triggerResult = result[5].rows as unknown as MySQLTriggerResult[];
 
     // Hash table of schema
     const schemaRecord: Record<string, DatabaseSchemaItem[]> = {};
@@ -353,21 +359,25 @@ export default abstract class MySQLLikeDriver extends CommonSQLImplement {
     tableName: string
   ): Promise<DatabaseTableSchema> {
     const columnSql = `SELECT TABLE_SCHEMA, TABLE_NAME, COLUMN_NAME, COLUMN_TYPE, DATA_TYPE, EXTRA, COLUMN_KEY, IS_NULLABLE, COLUMN_DEFAULT, COLLATION_NAME FROM information_schema.columns WHERE TABLE_NAME=${escapeSqlValue(tableName)} AND TABLE_SCHEMA=${escapeSqlValue(schemaName)} ORDER BY ORDINAL_POSITION`;
-    const columnResult = (await this.query(columnSql))
-      .rows as unknown as MySqlColumn[];
+    const constraintSql = `SELECT TABLE_SCHEMA, TABLE_NAME, CONSTRAINT_NAME, CONSTRAINT_TYPE FROM information_schema.table_constraints WHERE TABLE_SCHEMA = ${this.escapeValue(schemaName)} AND TABLE_NAME = ${this.escapeValue(tableName)} AND CONSTRAINT_TYPE IN ('PRIMARY KEY', 'UNIQUE', 'FOREIGN KEY')`;
+    const constraintColumnsSql = `SELECT CONSTRAINT_NAME, TABLE_SCHEMA, TABLE_NAME, COLUMN_NAME, REFERENCED_TABLE_SCHEMA, REFERENCED_TABLE_NAME, REFERENCED_COLUMN_NAME FROM information_schema.key_column_usage WHERE TABLE_SCHEMA = ${this.escapeValue(schemaName)} AND TABLE_NAME = ${this.escapeValue(tableName)}`;
 
-    const autoIncrement = columnResult.some(
-      (c) => c.EXTRA === "auto_increment"
-    );
+    const result = await this.batch([
+      columnSql,
+      constraintSql,
+      constraintColumnsSql,
+    ]);
 
-    const constraintSql = `SELECT TABLE_SCHEMA, TABLE_NAME, CONSTRAINT_NAME, CONSTRAINT_TYPE FROM information_schema.table_constraints WHERE TABLE_SCHEMA = ${this.escapeValue(schemaName)} AND TABLE_NAME = ${this.escapeValue(tableName)} AND CONSTRAINT_TYPE IN ('PRIMARY KEY', 'UNIQUE', 'FOREIGN KEY')`;
-    const constraintResult = (await this.query(constraintSql))
+    const columnResult = result[0].rows as unknown as MySqlColumn[];
+    const constraintResult = result[1]
       .rows as unknown as MySQLConstraintResult[];
-
-    const constraintColumnsSql = `SELECT CONSTRAINT_NAME, TABLE_SCHEMA, TABLE_NAME, COLUMN_NAME, REFERENCED_TABLE_SCHEMA, REFERENCED_TABLE_NAME, REFERENCED_COLUMN_NAME FROM information_schema.key_column_usage WHERE TABLE_SCHEMA = ${this.escapeValue(schemaName)} AND TABLE_NAME = ${this.escapeValue(tableName)}`;
-    const constraintColumnsResult = (await this.query(constraintColumnsSql))
+    const constraintColumnsResult = result[2]
       .rows as unknown as MySQLConstraintColumnResult[];
 
+    const autoIncrement = columnResult.some(
+      (c) => c.EXTRA === "auto_increment"
+    );
+
     const columns: DatabaseTableColumn[] = columnResult.map(mapColumn);
 
     const constraints: DatabaseTableColumnConstraint[] = constraintResult.map(
@@ -401,13 +411,13 @@ export default abstract class MySQLLikeDriver extends CommonSQLImplement {
           foreignKey:
             constraint.CONSTRAINT_TYPE === "FOREIGN KEY"
               ? {
-                columns: columnList.map((c) => c.COLUMN_NAME),
-                foreignColumns: columnList.map(
-                  (c) => c.REFERENCED_COLUMN_NAME
-                ),
-                foreignSchemaName: columnList[0].REFERENCED_TABLE_SCHEMA,
-                foreignTableName: columnList[0].REFERENCED_TABLE_NAME,
-              }
+                  columns: columnList.map((c) => c.COLUMN_NAME),
+                  foreignColumns: columnList.map(
+                    (c) => c.REFERENCED_COLUMN_NAME
+                  ),
+                  foreignSchemaName: columnList[0].REFERENCED_TABLE_SCHEMA,
+                  foreignTableName: columnList[0].REFERENCED_TABLE_NAME,
+                }
               : undefined,
         };
       }
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index e94e857f..bd04d23a 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -1,3 +1,5 @@
+import { ColumnHeader, ResultStat } from "@outerbase/sdk-transform";
+
 export interface OuterbaseDatabaseConfig {
   workspaceId: string;
   sourceId: string;
@@ -32,6 +34,9 @@ export interface OuterbaseAPIResponse<T = unknown> {
 
 export interface OuterbaseAPIQueryRaw {
   items: Record<string, unknown>[];
+  headers: ColumnHeader[];
+  stat?: ResultStat;
+  lastInsertRowid?: number;
 }
 
 export interface OuterbaseAPIAnalyticEvent {
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index 85b817a2..2e8d7324 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -78,6 +78,18 @@ export async function runOuterbaseQueryRaw(
   );
 }
 
+export async function runOuterbaseQueryBatch(
+  workspaceId: string,
+  sourceId: string,
+  queries: string[]
+) {
+  return requestOuterbase<OuterbaseAPIQueryRaw[]>(
+    `/api/v1/workspace/${workspaceId}/source/${sourceId}/query/batch`,
+    "POST",
+    { query: queries }
+  );
+}
+
 export async function getOuterbaseQueryList(
   workspaceId: string,
   baseId: string
diff --git a/src/outerbase-cloud/database/mysql.ts b/src/outerbase-cloud/database/mysql.ts
index 5e38361f..88ba21cd 100644
--- a/src/outerbase-cloud/database/mysql.ts
+++ b/src/outerbase-cloud/database/mysql.ts
@@ -1,37 +1,20 @@
-import { DatabaseHeader, DatabaseResultSet } from "@/drivers/base-driver";
+import { DatabaseResultSet, DriverFlags } from "@/drivers/base-driver";
 import MySQLLikeDriver from "@/drivers/mysql/mysql-driver";
-import { runOuterbaseQueryRaw } from "../api";
+import { runOuterbaseQueryBatch, runOuterbaseQueryRaw } from "../api";
 import { OuterbaseDatabaseConfig } from "../api-type";
-
-function transformObjectBasedResult(arr: Record<string, unknown>[]) {
-  const usedColumnName = new Set();
-  const columns: DatabaseHeader[] = [];
-
-  // Build the headers based on rows
-  arr.forEach((row) => {
-    Object.keys(row).forEach((key) => {
-      if (!usedColumnName.has(key)) {
-        usedColumnName.add(key);
-        columns.push({
-          name: key,
-          displayName: key,
-          originalType: null,
-          type: undefined,
-        });
-      }
-    });
-  });
-
-  return {
-    data: arr,
-    headers: columns,
-  };
-}
+import { transformOuterbaseResult } from "./utils";
 
 export class OuterbaseMySQLDriver extends MySQLLikeDriver {
   protected workspaceId: string;
   protected sourceId: string;
 
+  getFlags(): DriverFlags {
+    return {
+      ...super.getFlags(),
+      supportUseStatement: false,
+    };
+  }
+
   constructor({ workspaceId, sourceId }: OuterbaseDatabaseConfig) {
     super();
 
@@ -46,29 +29,17 @@ export class OuterbaseMySQLDriver extends MySQLLikeDriver {
       stmt
     );
 
-    const result = transformObjectBasedResult(jsonResponse.items);
+    return transformOuterbaseResult(jsonResponse);
+  }
 
-    return {
-      rows: result.data,
-      headers: result.headers,
-      stat: {
-        rowsAffected: 0,
-        rowsRead: null,
-        rowsWritten: null,
-        queryDurationMs: null,
-      },
-      lastInsertRowid: undefined,
-    };
+  async batch(stmts: string[]): Promise<DatabaseResultSet[]> {
+    return (
+      await runOuterbaseQueryBatch(this.workspaceId, this.sourceId, stmts)
+    ).map(transformOuterbaseResult);
   }
 
   async transaction(stmts: string[]): Promise<DatabaseResultSet[]> {
-    const result: DatabaseResultSet[] = [];
-
-    for (const stms of stmts) {
-      result.push(await this.query(stms));
-    }
-
-    return result;
+    return this.batch(stmts);
   }
 
   close() {
diff --git a/src/outerbase-cloud/database/postgresql.ts b/src/outerbase-cloud/database/postgresql.ts
index 685ae351..48b07ac3 100644
--- a/src/outerbase-cloud/database/postgresql.ts
+++ b/src/outerbase-cloud/database/postgresql.ts
@@ -1,36 +1,8 @@
-import {
-  DatabaseHeader,
-  DatabaseResultSet,
-  DriverFlags,
-} from "@/drivers/base-driver";
+import { DatabaseResultSet, DriverFlags } from "@/drivers/base-driver";
 import PostgresLikeDriver from "@/drivers/postgres/postgres-driver";
-import { runOuterbaseQueryRaw } from "../api";
+import { runOuterbaseQueryBatch, runOuterbaseQueryRaw } from "../api";
 import { OuterbaseDatabaseConfig } from "../api-type";
-
-function transformObjectBasedResult(arr: Record<string, unknown>[]) {
-  const usedColumnName = new Set();
-  const columns: DatabaseHeader[] = [];
-
-  // Build the headers based on rows
-  arr.forEach((row) => {
-    Object.keys(row).forEach((key) => {
-      if (!usedColumnName.has(key)) {
-        usedColumnName.add(key);
-        columns.push({
-          name: key,
-          displayName: key,
-          originalType: null,
-          type: undefined,
-        });
-      }
-    });
-  });
-
-  return {
-    data: arr,
-    headers: columns,
-  };
-}
+import { transformOuterbaseResult } from "./utils";
 
 export class OuterbasePostgresDriver extends PostgresLikeDriver {
   supportPragmaList = false;
@@ -59,29 +31,17 @@ export class OuterbasePostgresDriver extends PostgresLikeDriver {
       stmt
     );
 
-    const result = transformObjectBasedResult(jsonResponse.items);
+    return transformOuterbaseResult(jsonResponse);
+  }
 
-    return {
-      rows: result.data,
-      headers: result.headers,
-      stat: {
-        rowsAffected: 0,
-        rowsRead: null,
-        rowsWritten: null,
-        queryDurationMs: null,
-      },
-      lastInsertRowid: undefined,
-    };
+  async batch(stmts: string[]): Promise<DatabaseResultSet[]> {
+    return (
+      await runOuterbaseQueryBatch(this.workspaceId, this.sourceId, stmts)
+    ).map(transformOuterbaseResult);
   }
 
   async transaction(stmts: string[]): Promise<DatabaseResultSet[]> {
-    const result: DatabaseResultSet[] = [];
-
-    for (const stms of stmts) {
-      result.push(await this.query(stms));
-    }
-
-    return result;
+    return this.batch(stmts);
   }
 
   close() {
diff --git a/src/outerbase-cloud/database/sqlite.ts b/src/outerbase-cloud/database/sqlite.ts
index 343be436..167a5883 100644
--- a/src/outerbase-cloud/database/sqlite.ts
+++ b/src/outerbase-cloud/database/sqlite.ts
@@ -1,36 +1,8 @@
-import {
-  DatabaseHeader,
-  DatabaseResultSet,
-  DriverFlags,
-} from "@/drivers/base-driver";
+import { DatabaseResultSet, DriverFlags } from "@/drivers/base-driver";
 import { SqliteLikeBaseDriver } from "@/drivers/sqlite-base-driver";
-import { runOuterbaseQueryRaw } from "../api";
+import { runOuterbaseQueryBatch, runOuterbaseQueryRaw } from "../api";
 import { OuterbaseDatabaseConfig } from "../api-type";
-
-function transformObjectBasedResult(arr: Record<string, unknown>[]) {
-  const usedColumnName = new Set();
-  const columns: DatabaseHeader[] = [];
-
-  // Build the headers based on rows
-  arr.forEach((row) => {
-    Object.keys(row).forEach((key) => {
-      if (!usedColumnName.has(key)) {
-        usedColumnName.add(key);
-        columns.push({
-          name: key,
-          displayName: key,
-          originalType: null,
-          type: undefined,
-        });
-      }
-    });
-  });
-
-  return {
-    data: arr,
-    headers: columns,
-  };
-}
+import { transformOuterbaseResult } from "./utils";
 
 export class OuterbaseSqliteDriver extends SqliteLikeBaseDriver {
   supportPragmaList = false;
@@ -59,28 +31,16 @@ export class OuterbaseSqliteDriver extends SqliteLikeBaseDriver {
       stmt
     );
 
-    const result = transformObjectBasedResult(jsonResponse.items);
+    return transformOuterbaseResult(jsonResponse);
+  }
 
-    return {
-      rows: result.data,
-      headers: result.headers,
-      stat: {
-        rowsAffected: 0,
-        rowsRead: null,
-        rowsWritten: null,
-        queryDurationMs: null,
-      },
-      lastInsertRowid: undefined,
-    };
+  async batch(stmts: string[]): Promise<DatabaseResultSet[]> {
+    return (
+      await runOuterbaseQueryBatch(this.workspaceId, this.sourceId, stmts)
+    ).map(transformOuterbaseResult);
   }
 
   async transaction(stmts: string[]): Promise<DatabaseResultSet[]> {
-    const result: DatabaseResultSet[] = [];
-
-    for (const stms of stmts) {
-      result.push(await this.query(stms));
-    }
-
-    return result;
+    return this.batch(stmts);
   }
 }
diff --git a/src/outerbase-cloud/database/utils.ts b/src/outerbase-cloud/database/utils.ts
index 9a83840a..afc728b4 100644
--- a/src/outerbase-cloud/database/utils.ts
+++ b/src/outerbase-cloud/database/utils.ts
@@ -1,14 +1,34 @@
-import { OuterbaseDatabaseConfig } from "../api-type";
+import { DatabaseResultSet } from "@/drivers/base-driver";
+import { OuterbaseAPIQueryRaw, OuterbaseDatabaseConfig } from "../api-type";
 import { OuterbaseMySQLDriver } from "./mysql";
 import { OuterbasePostgresDriver } from "./postgresql";
 import { OuterbaseSqliteDriver } from "./sqlite";
 
-export function createOuterbaseDatabaseDriver(type: string, config: OuterbaseDatabaseConfig) {
+export function transformOuterbaseResult(
+  result: OuterbaseAPIQueryRaw
+): DatabaseResultSet {
+  return {
+    rows: result.items,
+    headers: result.headers,
+    stat: result.stat ?? {
+      rowsAffected: 0,
+      rowsRead: null,
+      rowsWritten: null,
+      queryDurationMs: null,
+    },
+    lastInsertRowid: result.lastInsertRowid,
+  };
+}
+
+export function createOuterbaseDatabaseDriver(
+  type: string,
+  config: OuterbaseDatabaseConfig
+) {
   if (type === "postgres") {
-    return new OuterbasePostgresDriver(config)
-  } else if (type === 'mysql') {
+    return new OuterbasePostgresDriver(config);
+  } else if (type === "mysql") {
     return new OuterbaseMySQLDriver(config);
   }
 
   return new OuterbaseSqliteDriver(config);
-}
\ No newline at end of file
+}

From 6b1d7eab6fcf5d887e82465c6f8a2c01184f0cec Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 5 Feb 2025 16:56:01 +0700
Subject: [PATCH 003/106] outerbase board integration (#333)

* try to use outerbase board data with our board

* refactor: improve board canvas item mapping and tooltip structure

* refactor: enhance toggle item styling based on edit mode

* plug chart inside

* require workspace to load

* refactor: menu layout and create refresh board

* refactor: improve chart component imports and style definitions

* add header and loading

* refactor: update BoardTool and BoardProvider components

---------

Co-authored-by: sokphaladam <sokphaladam@gmail.com>
Co-authored-by: sokphaladam <sokphaladam@sokphaladams-MacBook-Air.local>
---
 .../board/[boardId]/page-client.tsx           |  15 ---
 .../w/[workspaceId]/board/[boardId]/page.tsx  |  71 ++++++++++--
 src/app/(theme)/theme_layout.tsx              |   5 +-
 src/app/storybook/board/page.tsx              |   6 +-
 src/app/storybook/chart-editor/page.tsx       |   1 +
 src/components/board/board-canvas.tsx         | 107 +++++++++++++++---
 src/components/board/board-chart.tsx          |  72 ++++++++++++
 src/components/board/board-filter.tsx         |  83 ++++++++------
 src/components/board/board-provider.tsx       |  21 +++-
 src/components/board/board-tool.tsx           |  44 ++++---
 src/components/board/board-toolbar.tsx        |  99 ++++++++++++++++
 src/components/board/index.tsx                |  67 +++++++++--
 src/components/chart/index.tsx                |  21 +++-
 src/lib/convertNumber.ts                      |  21 ++++
 14 files changed, 523 insertions(+), 110 deletions(-)
 delete mode 100644 src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page-client.tsx
 create mode 100644 src/components/board/board-chart.tsx
 create mode 100644 src/components/board/board-toolbar.tsx

diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page-client.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page-client.tsx
deleted file mode 100644
index 78b65fde..00000000
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page-client.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-"use client";
-
-export default function BoardPageClient({
-  workspaceId,
-  boardId,
-}: {
-  workspaceId: string;
-  boardId: string;
-}) {
-  return (
-    <div>
-      {workspaceId} {boardId}
-    </div>
-  );
-}
diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index 253e83f1..1be81e69 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -1,19 +1,68 @@
+"use client";
+
+import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
+import Board from "@/components/board";
 import ClientOnly from "@/components/client-only";
-import BoardPageClient from "./page-client";
+import { getOuterbaseDashboard } from "@/outerbase-cloud/api";
+import { OuterbaseAPIDashboardDetail } from "@/outerbase-cloud/api-type";
+import OuterbaseBoardSourceDriver from "@/outerbase-cloud/database-source";
+import { useParams } from "next/navigation";
+import { useMemo, useState } from "react";
+import useSWR from "swr";
+
+function BoardPageEditor({
+  initialValue,
+}: {
+  initialValue: OuterbaseAPIDashboardDetail;
+}) {
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  const { workspaces } = useWorkspaces();
+  const [interval, setIntervals] = useState<number>(0);
+
+  const boardSources = useMemo(() => {
+    if (workspaces.length === 0) return;
+    return new OuterbaseBoardSourceDriver(
+      workspaces.find(
+        (w) => w.id === workspaceId || w.short_name === workspaceId
+      )!
+    );
+  }, [workspaceId, workspaces]);
+
+  const [value, setValue] = useState(initialValue);
 
-interface BoardPageProps {
-  params: Promise<{ workspaceId: string; boardId: string }>;
+  if (!boardSources) {
+    return <div>Loading Workspace....</div>;
+  }
+
+  return (
+    <Board
+      value={value as any}
+      onChange={setValue as any}
+      sources={boardSources}
+      interval={interval}
+      onChangeInterval={setIntervals}
+    />
+  );
 }
 
-export default async function BoardPage(props: BoardPageProps) {
-  const params = await props.params;
+export default function BoardPage() {
+  const { workspaceId, boardId } = useParams<{
+    boardId: string;
+    workspaceId: string;
+  }>();
+  const { data } = useSWR(`board-${boardId}`, () => {
+    return getOuterbaseDashboard(workspaceId, boardId);
+  });
+
+  if (!data) {
+    return <div>Loading...</div>;
+  }
 
   return (
-    <ClientOnly>
-      <BoardPageClient
-        workspaceId={params.workspaceId}
-        boardId={params.boardId}
-      />
-    </ClientOnly>
+    <div className="overflow-y-autp h-screen w-screen overflow-x-hidden">
+      <ClientOnly>
+        <BoardPageEditor initialValue={data} />
+      </ClientOnly>
+    </div>
   );
 }
diff --git a/src/app/(theme)/theme_layout.tsx b/src/app/(theme)/theme_layout.tsx
index 37c9e602..80632fe1 100644
--- a/src/app/(theme)/theme_layout.tsx
+++ b/src/app/(theme)/theme_layout.tsx
@@ -1,6 +1,7 @@
 "use client";
 import PageTracker from "@/components/page-tracker";
 import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { Analytics } from "@vercel/analytics/react";
 import { ThemeProvider } from "next-themes";
 import Script from "next/script";
@@ -29,7 +30,9 @@ export default function ThemeLayout({
         enableColorScheme
         attribute="class"
       >
-        <Fragment>{children}</Fragment>
+        <TooltipProvider>
+          <Fragment>{children}</Fragment>
+        </TooltipProvider>
         <Toaster />
       </ThemeProvider>
       <Analytics />
diff --git a/src/app/storybook/board/page.tsx b/src/app/storybook/board/page.tsx
index df14a4a0..82eb12d7 100644
--- a/src/app/storybook/board/page.tsx
+++ b/src/app/storybook/board/page.tsx
@@ -1,5 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
-import Board from "@/components/board";
 import { BoardFilterProps } from "@/components/board/board-filter-dialog";
 import { useState } from "react";
 import ReactGridLayout from "react-grid-layout";
@@ -22,11 +22,11 @@ export default function StorybookBoardPage() {
     data: { filters: [] },
   });
 
-  console.log(value);
+  // console.log(value);
 
   return (
     <div className="relative h-full w-full flex-1">
-      <Board value={value} setValue={setValue} />
+      {/* <Board value={value} setValue={setValue} /> */}
     </div>
   );
 }
diff --git a/src/app/storybook/chart-editor/page.tsx b/src/app/storybook/chart-editor/page.tsx
index cf9d48ee..3dc190e5 100644
--- a/src/app/storybook/chart-editor/page.tsx
+++ b/src/app/storybook/chart-editor/page.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
 import Chart from "@/components/chart";
 import { ChartData, ChartValue } from "@/components/chart/chartTypes";
diff --git a/src/components/board/board-canvas.tsx b/src/components/board/board-canvas.tsx
index 388a7fca..019a9c93 100644
--- a/src/components/board/board-canvas.tsx
+++ b/src/components/board/board-canvas.tsx
@@ -1,9 +1,26 @@
 "use client";
 import { cn } from "@/lib/utils";
-import { RectangleHorizontal, Square } from "lucide-react";
+import {
+  EditIcon,
+  EllipsisVertical,
+  HandHelping,
+  ImageUpscale,
+  RectangleHorizontal,
+  RefreshCcw,
+  Square,
+  Trash2,
+} from "lucide-react";
 import { useCallback } from "react";
 import RGL, { WidthProvider } from "react-grid-layout";
+import { DashboardProps } from ".";
 import { buttonVariants } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import BoardChart from "./board-chart";
 import "./board-style.css";
 
 export interface BoardChartLayout {
@@ -15,14 +32,20 @@ export interface BoardChartLayout {
 }
 
 interface BoardProps {
-  layout: ReactGridLayout.Layout[];
+  value: DashboardProps;
   onChange: (v: ReactGridLayout.Layout[]) => void;
   editMode?: "ADD_CHART" | "REARRANGING_CHART" | null;
+  setEditMode?: (mode: "ADD_CHART" | "REARRANGING_CHART" | null) => void;
 }
 
 const ReactGridLayout = WidthProvider(RGL);
 
-export function BoardCanvas(props: BoardProps) {
+export function BoardCanvas({
+  value,
+  onChange,
+  editMode,
+  setEditMode,
+}: BoardProps) {
   const sizes = [
     { w: 1, h: 1, name: "1", icon: <Square className="h-3 w-3" /> },
     {
@@ -40,24 +63,57 @@ export function BoardCanvas(props: BoardProps) {
     },
   ];
 
+  const menus = [
+    {
+      name: "Edit chart",
+      icon: <EditIcon className="h-4 w-4" />,
+      onclick: () => {},
+    },
+    {
+      name: "Refresh data",
+      icon: <RefreshCcw className="h-4 w-4" />,
+      onclick: () => {},
+    },
+    {
+      name: "Rearrange layout",
+      icon: <ImageUpscale className="h-4 w-4" />,
+      onclick: () => {
+        setEditMode && setEditMode("REARRANGING_CHART");
+      },
+    },
+    {
+      name: "Embed chart",
+      icon: <HandHelping className="h-4 w-4" />,
+      onclick: () => {},
+    },
+    {
+      name: "Delete chart",
+      icon: <Trash2 className="h-4 w-4" />,
+      onclick: () => {},
+    },
+  ];
+
   const handleClickResize = useCallback(
     (w: number, h: number, index: number) => {
-      const dummy = structuredClone(props.layout);
+      const dummy = structuredClone(value.layout);
       dummy[index].w = w;
       dummy[index].h = h;
-      props.onChange(dummy);
+      onChange(dummy);
     },
-    [props]
+    [onChange, value.layout]
   );
 
-  const mapItem: JSX.Element[] = [...Array(props.layout.length)].map((_, i) => {
+  const mapItem: JSX.Element[] = value.layout.map((_, i) => {
     return (
       <div
-        key={i}
-        className="group dark:bg-secondary relative flex items-center justify-center rounded-md bg-white shadow hover:bg-gray-50 dark:text-white"
+        key={_.i}
+        className="group dark:bg-secondary relative flex items-center justify-center overflow-hidden rounded-md bg-white shadow hover:bg-gray-50 dark:text-white"
         data-grid={_}
       >
-        {props.editMode === "REARRANGING_CHART" && (
+        <BoardChart
+          value={value.charts.find((chart) => chart.id === _.i) as any}
+        />
+        {editMode === "REARRANGING_CHART" ? (
           <div className="absolute top-4 right-4 z-40 hidden gap-2 group-hover:flex">
             {sizes.map((x, index) => {
               return (
@@ -78,8 +134,29 @@ export function BoardCanvas(props: BoardProps) {
               );
             })}
           </div>
+        ) : (
+          <div className="absolute top-4 right-4">
+            <DropdownMenu key={_.i}>
+              <DropdownMenuTrigger asChild>
+                <EllipsisVertical className="h-4 w-4" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                {menus.map((menu) => {
+                  return (
+                    <DropdownMenuItem
+                      key={menu.name}
+                      className="flex gap-2"
+                      onClick={menu.onclick}
+                    >
+                      {menu.icon}
+                      {menu.name}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         )}
-        <div>{i}</div>
       </div>
     );
   });
@@ -91,10 +168,10 @@ export function BoardCanvas(props: BoardProps) {
         rowHeight={220}
         draggableCancel=".cancelSelectorName"
         className="layout overflow-x-hidden"
-        layout={props.layout}
-        onLayoutChange={props.onChange}
-        isDraggable={props.editMode === "REARRANGING_CHART"}
-        isResizable={props.editMode === "REARRANGING_CHART"}
+        layout={value.layout}
+        onLayoutChange={onChange}
+        isDraggable={editMode === "REARRANGING_CHART"}
+        isResizable={editMode === "REARRANGING_CHART"}
         compactType={"vertical"}
       >
         {mapItem}
diff --git a/src/components/board/board-chart.tsx b/src/components/board/board-chart.tsx
new file mode 100644
index 00000000..74792681
--- /dev/null
+++ b/src/components/board/board-chart.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from "react";
+import Chart from "../chart";
+import { ChartValue } from "../chart/chartTypes";
+import { useBoardContext } from "./board-provider";
+
+export default function BoardChart({ value }: { value: ChartValue }) {
+  const [data, setData] = useState<Record<string, unknown>[] | null>(null);
+  const loaderRef = useRef<HTMLDivElement>(null);
+  const { sources, lastRunTimestamp } = useBoardContext();
+  const [loading, setLoading] = useState(false);
+
+  const sql = value.params.layers[0].sql;
+  const sourceId = value.source_id;
+
+  useEffect(() => {
+    if (!sources || !sourceId || !sql) {
+      return;
+    }
+
+    setLoading(true);
+
+    sources
+      .query(sourceId, sql)
+      .then((v) => {
+        setData(v);
+      })
+      .catch((e) => {
+        console.error(e);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [sources, sourceId, sql, lastRunTimestamp, loaderRef]);
+
+  useEffect(() => {
+    if (loaderRef.current && loading) {
+      const interval = setInterval(() => {
+        console.log(Date.now(), lastRunTimestamp);
+
+        if (loaderRef.current) {
+          const progress = Math.min(
+            ((Date.now() - lastRunTimestamp) / 3000) * 100,
+            80
+          );
+
+          loaderRef.current.style.width = `${progress}%`;
+        }
+      }, 100);
+      return () => clearInterval(interval);
+    }
+  }, [lastRunTimestamp, loading, loaderRef]);
+
+  return (
+    <>
+      {loading && (
+        <div
+          key={lastRunTimestamp}
+          className="absolute top-0 right-0 left-0 z-10 h-[3px]"
+        >
+          <div
+            ref={loaderRef}
+            key={lastRunTimestamp}
+            className="h-[3px] w-[0%] bg-blue-400 transition-all"
+          ></div>
+        </div>
+      )}
+      {data ? (
+        <Chart className="h-full w-full" value={value} data={data} />
+      ) : null}
+    </>
+  );
+}
diff --git a/src/components/board/board-filter.tsx b/src/components/board/board-filter.tsx
index 368f2f96..90246394 100644
--- a/src/components/board/board-filter.tsx
+++ b/src/components/board/board-filter.tsx
@@ -23,16 +23,22 @@ import {
   DEFAULT_DATE_FILTER,
 } from "./board-filter-dialog";
 import { BoardTool } from "./board-tool";
+import { BoardToolbar } from "./board-toolbar";
 
 interface Props {
+  name: string;
   filters: BoardFilterProps[];
   onFilters: (f: BoardFilterProps[]) => void;
   editMode: "ADD_CHART" | "REARRANGING_CHART" | null;
   setEditMode: (v: "ADD_CHART" | "REARRANGING_CHART") => void;
+  interval: number;
+  setInterval: (v: number) => void;
+  onRefresh?: () => void;
 }
 
 export function BoardFilter(props: Props) {
   const [open, setOpen] = useState(false);
+  const [show, setShow] = useState(true);
   const [selectIndex, setSelectIndex] = useState<number | undefined>(undefined);
 
   const onFilter = useCallback(() => {
@@ -205,40 +211,49 @@ export function BoardFilter(props: Props) {
   return (
     <>
       <BoardTool editMode={props.editMode} setEditMode={props.setEditMode} />
-      <div className="sticky -top-4 z-50 bg-neutral-100 px-1 pt-4 pb-2 dark:bg-neutral-950">
-        {open && selectIndex !== undefined && (
-          <BoardFilterDialog
-            onClose={() => {
-              setOpen(false);
-              if (props.filters[selectIndex].new === true) {
-                props.onFilters([
-                  ...props.filters.filter((_, i) => i !== selectIndex),
-                ]);
-                setSelectIndex(undefined);
-              }
-            }}
-            filter={props.filters[selectIndex]}
-            onFilter={(v) => {
-              const data = structuredClone(props.filters);
-              data[selectIndex] = v;
-              props.onFilters(data);
-            }}
-            onAddFilter={() => {
-              const data = structuredClone(props.filters);
-              data[selectIndex].new = false;
-              setOpen(false);
-              props.onFilters(data);
-            }}
-          />
-        )}
-        <div className="flex flex-wrap gap-3">
-          {mapFilterItem}
-          <button
-            className={buttonVariants({ size: "sm", variant: "ghost" })}
-            onClick={onFilter}
-          >
-            <ListFilter className="h-4 w-4" />
-          </button>
+      <div className="sticky top-0 z-50 bg-neutral-100 px-1 pt-0 pb-2 dark:bg-neutral-950">
+        <BoardToolbar
+          show={show}
+          onChangeShow={setShow}
+          interval={props.interval}
+          onChange={props.setInterval}
+          onRefresh={props.onRefresh}
+        />
+        <div className={show ? "px-2 pt-4" : "hidden"}>
+          {open && selectIndex !== undefined && (
+            <BoardFilterDialog
+              onClose={() => {
+                setOpen(false);
+                if (props.filters[selectIndex].new === true) {
+                  props.onFilters([
+                    ...props.filters.filter((_, i) => i !== selectIndex),
+                  ]);
+                  setSelectIndex(undefined);
+                }
+              }}
+              filter={props.filters[selectIndex]}
+              onFilter={(v) => {
+                const data = structuredClone(props.filters);
+                data[selectIndex] = v;
+                props.onFilters(data);
+              }}
+              onAddFilter={() => {
+                const data = structuredClone(props.filters);
+                data[selectIndex].new = false;
+                setOpen(false);
+                props.onFilters(data);
+              }}
+            />
+          )}
+          <div className="flex flex-wrap gap-3">
+            {mapFilterItem}
+            <button
+              className={buttonVariants({ size: "sm", variant: "ghost" })}
+              onClick={onFilter}
+            >
+              <ListFilter className="h-4 w-4" />
+            </button>
+          </div>
         </div>
       </div>
     </>
diff --git a/src/components/board/board-provider.tsx b/src/components/board/board-provider.tsx
index 4267af36..2128f309 100644
--- a/src/components/board/board-provider.tsx
+++ b/src/components/board/board-provider.tsx
@@ -1,18 +1,33 @@
 import { BoardSourceDriver } from "@/drivers/board-source/base-source";
-import { createContext, PropsWithChildren } from "react";
+import { createContext, PropsWithChildren, useContext } from "react";
+
+interface BoardContextSettingProps {
+  autoRefresh: string[];
+  name: string;
+}
 
 interface BoardContextProps {
   sources?: BoardSourceDriver;
+  setting?: BoardContextSettingProps;
+  lastRunTimestamp: number;
 }
 
-const BoardContext = createContext<BoardContextProps>({});
+const BoardContext = createContext<BoardContextProps>({
+  lastRunTimestamp: 0,
+});
+
+export function useBoardContext() {
+  return useContext(BoardContext);
+}
 
 export function BoardProvider({
   children,
   sources,
+  lastRunTimestamp,
+  setting,
 }: PropsWithChildren<BoardContextProps>) {
   return (
-    <BoardContext.Provider value={{ sources }}>
+    <BoardContext.Provider value={{ sources, setting, lastRunTimestamp }}>
       {children}
     </BoardContext.Provider>
   );
diff --git a/src/components/board/board-tool.tsx b/src/components/board/board-tool.tsx
index 8c1a4ec6..cb560e32 100644
--- a/src/components/board/board-tool.tsx
+++ b/src/components/board/board-tool.tsx
@@ -9,29 +9,43 @@ interface Props {
 
 export function BoardTool(props: Props) {
   return (
-    <div className="reveal animate-revealMenu fixed bottom-6 left-[60%] z-100 flex -translate-x-[60%] rounded-xl bg-neutral-800 p-1 text-neutral-100 shadow-lg dark:bg-white dark:text-neutral-900">
+    <div className="reveal animate-revealMenu fixed bottom-6 left-[50%] z-100 flex -translate-x-[50%] rounded-xl bg-neutral-800 p-1 text-neutral-100 shadow-lg dark:bg-white dark:text-neutral-900">
       <ToggleGroup
         type="single"
         size={"sm"}
         value={props.editMode as string}
         onValueChange={props.setEditMode}
       >
-        <ToggleGroupItem value="ADD_CHART">
-          <Tooltip>
-            <TooltipTrigger>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <ToggleGroupItem
+              value="ADD_CHART"
+              className={
+                props.editMode === "ADD_CHART"
+                  ? "bg-white/15 dark:bg-black/10"
+                  : ""
+              }
+            >
               <ChartLine className="h-4 w-4" />
-            </TooltipTrigger>
-            <TooltipContent>Add Chart</TooltipContent>
-          </Tooltip>
-        </ToggleGroupItem>
-        <ToggleGroupItem value="REARRANGING_CHART">
-          <Tooltip>
-            <TooltipTrigger>
+            </ToggleGroupItem>
+          </TooltipTrigger>
+          <TooltipContent>Add Chart</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <ToggleGroupItem
+              value="REARRANGING_CHART"
+              className={
+                props.editMode === "REARRANGING_CHART"
+                  ? "bg-white/15 dark:bg-black/10"
+                  : ""
+              }
+            >
               <ImageUpscale className="h-4 w-4" />
-            </TooltipTrigger>
-            <TooltipContent>Rearranging charts</TooltipContent>
-          </Tooltip>
-        </ToggleGroupItem>
+            </ToggleGroupItem>
+          </TooltipTrigger>
+          <TooltipContent>Rearranging charts</TooltipContent>
+        </Tooltip>
       </ToggleGroup>
     </div>
   );
diff --git a/src/components/board/board-toolbar.tsx b/src/components/board/board-toolbar.tsx
new file mode 100644
index 00000000..7b1156b7
--- /dev/null
+++ b/src/components/board/board-toolbar.tsx
@@ -0,0 +1,99 @@
+import { convertTimeToMilliseconds } from "@/lib/convertNumber";
+import { ChevronDown, RefreshCcw } from "lucide-react";
+import { useCallback } from "react";
+import { buttonVariants } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { useBoardContext } from "./board-provider";
+
+interface Props {
+  show: boolean;
+  interval: number;
+  onChange: (interval: number) => void;
+  onChangeShow: (show: boolean) => void;
+  onRefresh?: () => void;
+}
+
+export function BoardToolbar(props: Props) {
+  const { setting } = useBoardContext();
+
+  const toggleShow = useCallback(() => {
+    props.onChangeShow(!props.show);
+  }, [props]);
+
+  console.log(setting);
+
+  return (
+    <div className="flex items-center justify-between border border-x-0 px-1 py-2">
+      <div>
+        <button
+          className={buttonVariants({ size: "sm", variant: "ghost" })}
+          onClick={toggleShow}
+        >
+          {props.show ? "Hide" : "Show"} Filter
+        </button>
+      </div>
+      <div>{setting?.name}</div>
+      <div>
+        <button
+          className={buttonVariants({ size: "sm", variant: "ghost" })}
+          onClick={() => {
+            props.onRefresh && props.onRefresh();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <div>
+              <RefreshCcw className="h-4 w-4" />
+            </div>
+            <div>{props.interval === 0 ? "" : `${props.interval / 1000}s`}</div>
+          </div>
+        </button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              className={buttonVariants({ size: "sm", variant: "ghost" })}
+            >
+              <ChevronDown className="h-4 w-4" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuCheckboxItem
+              checked={props.interval === 0}
+              onClick={() => {
+                props.onChange(0);
+              }}
+            >
+              Off
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+              checked={props.interval === convertTimeToMilliseconds("5m")}
+              onClick={() => {
+                props.onChange(convertTimeToMilliseconds("5m"));
+              }}
+            >
+              Auto
+            </DropdownMenuCheckboxItem>
+            {setting?.autoRefresh.map((interval) => {
+              const ms = convertTimeToMilliseconds(interval);
+              return (
+                <DropdownMenuCheckboxItem
+                  key={interval}
+                  checked={props.interval === ms}
+                  onClick={() => {
+                    props.onChange(ms);
+                  }}
+                >
+                  {interval}
+                </DropdownMenuCheckboxItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index 654870ad..e1df617d 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -1,12 +1,15 @@
 import { BoardSourceDriver } from "@/drivers/board-source/base-source";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { ChartValue } from "../chart/chartTypes";
 import { BoardCanvas } from "./board-canvas";
 import { BoardFilter } from "./board-filter";
 import { BoardFilterProps } from "./board-filter-dialog";
 import { BoardProvider } from "./board-provider";
 
-interface DashboardProps {
+export interface DashboardProps {
+  charts: ChartValue[];
   layout: ReactGridLayout.Layout[];
+  name: string;
   data: {
     filters: BoardFilterProps[];
   };
@@ -15,21 +18,62 @@ interface DashboardProps {
 interface Props {
   value: DashboardProps;
   sources?: BoardSourceDriver;
-  setValue: (value: DashboardProps) => void;
+  interval: number;
+  onChange: (value: DashboardProps) => void;
+  onChangeInterval: (v: number) => void;
 }
 
-export default function Board({ value, setValue, sources }: Props) {
+export default function Board({
+  value,
+  sources,
+  interval,
+  onChange,
+  onChangeInterval,
+}: Props) {
   const [editMode, setEditMode] = useState<
     "ADD_CHART" | "REARRANGING_CHART" | null
   >(null);
 
+  const autoRefresh = [
+    "5s",
+    "10s",
+    "30s",
+    "1m",
+    "5m",
+    "15m",
+    "30m",
+    "1h",
+    "2h",
+    "1d",
+  ];
+
+  const [lastRunTimestamp, setLastRunTimestamp] = useState(() => {
+    return Date.now();
+  });
+
+  useEffect(() => {
+    if (!interval) return;
+
+    const intervalId = setInterval(() => {
+      setLastRunTimestamp(Date.now());
+    }, interval);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [interval]);
+
   return (
-    <BoardProvider sources={sources}>
+    <BoardProvider
+      sources={sources}
+      lastRunTimestamp={lastRunTimestamp}
+      setting={{ autoRefresh, name: value.name }}
+    >
       <div>
         <BoardFilter
           filters={value.data.filters}
           onFilters={(v) =>
-            setValue({
+            onChange({
               ...value,
               data: {
                 ...value.data,
@@ -39,16 +83,23 @@ export default function Board({ value, setValue, sources }: Props) {
           }
           editMode={editMode}
           setEditMode={setEditMode}
+          name={value.name}
+          interval={interval}
+          setInterval={onChangeInterval}
+          onRefresh={() => {
+            setLastRunTimestamp(Date.now());
+          }}
         />
         <BoardCanvas
-          layout={value.layout}
+          value={value}
           onChange={(v) => {
-            setValue({
+            onChange({
               ...value,
               layout: v,
             });
           }}
           editMode={editMode}
+          setEditMode={setEditMode}
         />
       </div>
     </BoardProvider>
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
index 3fc8c5c8..73a27efa 100644
--- a/src/components/chart/index.tsx
+++ b/src/components/chart/index.tsx
@@ -28,7 +28,7 @@ const TextComponent = ({ value }: OuterbaseChartProps) => {
   markdown = markdown.replace(/~~(.*?)~~/g, "<u>$1</u>");
 
   // Line break (double space followed by a newline)
-  markdown = markdown.replace(/  \n/g, "<br>");
+  markdown = markdown.replace(/ {2}\n/g, "<br>");
   return (
     <div className="h-full w-full">
       <p
@@ -107,7 +107,7 @@ const SingleValueComponent = ({ value, data }: OuterbaseChartProps) => {
   const sizeX = 1;
   const sizeY = 1;
 
-  let style: React.CSSProperties = {
+  const style: React.CSSProperties = {
     fontSize: sizeX === 1 && sizeY === 1 ? "30px" : "60px",
     lineHeight: sizeX === 1 && sizeY === 1 ? "36px" : "68px",
   };
@@ -152,13 +152,13 @@ const TableComponent = ({ data }: OuterbaseChartProps) => {
   );
 };
 
-const ChartComponent = ({ value, data, modifier }: OuterbaseChartProps) => {
+const ChartComponent = ({ value, data }: OuterbaseChartProps) => {
   const domRef = useRef<HTMLDivElement>(null);
   const { theme } = useTheme();
 
   useEffect(() => {
     if (domRef.current) {
-      let chartInstance =
+      const chartInstance =
         echarts.getInstanceByDom(domRef.current) ||
         echarts.init(domRef.current);
       chartInstance.clear();
@@ -196,7 +196,7 @@ const ChartComponent = ({ value, data, modifier }: OuterbaseChartProps) => {
   return <div ref={domRef} className="h-full w-full"></div>;
 };
 
-export default function Chart({ value, data, modifier }: OuterbaseChartProps) {
+function ChartBody({ value, data, modifier }: OuterbaseChartProps) {
   if (value.type === "text") {
     return <TextComponent value={value} data={data} />;
   } else if (value.type === "single_value") {
@@ -207,3 +207,14 @@ export default function Chart({ value, data, modifier }: OuterbaseChartProps) {
     return <ChartComponent value={value} data={data} modifier={modifier} />;
   }
 }
+
+export default function Chart(props: OuterbaseChartProps) {
+  return (
+    <div className="flex h-full w-full flex-col p-6">
+      <h1 className="mb-4 text-lg font-semibold">{props.value.name}</h1>
+      <div className="flex-1">
+        <ChartBody {...props} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/lib/convertNumber.ts b/src/lib/convertNumber.ts
index be58c534..c0b37319 100644
--- a/src/lib/convertNumber.ts
+++ b/src/lib/convertNumber.ts
@@ -6,3 +6,24 @@ export const formatNumber = (n: number | undefined) => {
     maximumFractionDigits: 2,
   }).format(n);
 };
+
+export function convertTimeToMilliseconds(time: string) {
+  const extension = time.charAt(time.length - 1);
+  const value = time.substring(0, time.length-1);
+  
+  if(!isNaN(Number(value))) {
+    switch(extension) {
+      case 's':
+        return Number(value) * 1000;
+      case 'm':
+        return (Number(value) * 60) * 1000;
+      case 'h':
+        return (Number(value) * 60 * 60) * 1000;
+      case 'd':
+        return ((Number(value) * 24) * 60 * 60) * 1000;
+      default:
+        return 0;
+      }
+  }
+  return 0;
+}
\ No newline at end of file

From 93c936992c68354f6dee73d0fba9c803643fe73f Mon Sep 17 00:00:00 2001
From: keppere <50957820+keppere@users.noreply.github.com>
Date: Wed, 5 Feb 2025 19:56:48 +0700
Subject: [PATCH 004/106] Improve chart and chart editor (#339)

* feat: chart beta

* refact: change theme provider

* refact: remove unused chart page and sidebar menu item

* refact: enhance chart options builder and improve theme handling

* refact: simplify chart editor state management and add simple combobox component

* refact: rename chart types and options builder files, add simple input and toggle components

* prevent flicking

---------

Co-authored-by: Visal .In <invisal@gmail.com>
---
 src/app/storybook/chart-editor/page.tsx       |  10 +-
 src/app/storybook/chart/page.tsx              | 223 ------------
 src/app/storybook/layout.tsx                  |   5 -
 src/components/board/board-chart.tsx          |   4 +-
 src/components/board/index.tsx                |   2 +-
 src/components/chart/chart-type.ts            | 176 ++++++++++
 src/components/chart/chartTypes.ts            |  87 -----
 ...nsBuilder.ts => echart-options-builder.ts} |  55 ++-
 src/components/chart/edit-chart-menu.tsx      | 324 +++++++++++++++++-
 src/components/chart/index.tsx                |  49 ++-
 src/components/chart/simple-combobox.tsx      |  94 +++++
 src/components/chart/simple-input.tsx         |  31 ++
 src/components/chart/simple-toggle.tsx        |  33 ++
 13 files changed, 730 insertions(+), 363 deletions(-)
 delete mode 100644 src/app/storybook/chart/page.tsx
 create mode 100644 src/components/chart/chart-type.ts
 delete mode 100644 src/components/chart/chartTypes.ts
 rename src/components/chart/{echartOptionsBuilder.ts => echart-options-builder.ts} (88%)
 create mode 100644 src/components/chart/simple-combobox.tsx
 create mode 100644 src/components/chart/simple-input.tsx
 create mode 100644 src/components/chart/simple-toggle.tsx

diff --git a/src/app/storybook/chart-editor/page.tsx b/src/app/storybook/chart-editor/page.tsx
index 3dc190e5..c3cc8e60 100644
--- a/src/app/storybook/chart-editor/page.tsx
+++ b/src/app/storybook/chart-editor/page.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
 import Chart from "@/components/chart";
-import { ChartData, ChartValue } from "@/components/chart/chartTypes";
+import { ChartData, ChartValue } from "@/components/chart/chart-type";
 import EditChartMenu from "@/components/chart/edit-chart-menu";
 import { useState } from "react";
 
@@ -61,7 +61,6 @@ const lineChartValue: ChartValue = {
       theme: "afterburn",
       xAxisKey: "_year",
       yAxisKeys: ["seller", "seller2"],
-      foreground: "#ffffff",
       xAxisLabel: "cust year",
       yAxisLabel: "cust sellers",
       gradientStop: "#42788F",
@@ -72,7 +71,7 @@ const lineChartValue: ChartValue = {
         seller2: "#FFA285",
       },
       xAxisLabelHidden: false,
-      yAxisLabelHidden: false,
+      yAxisLabelHidden: true,
       yAxisLabelDisplay: "right",
     },
     source_id: "856a1855-2bee-4d87-9756-a783088c0568",
@@ -89,12 +88,11 @@ const lineChartValue: ChartValue = {
 
 export default function StorybookChartEditorPage() {
   const [chartValue, setChartValue] = useState(lineChartValue);
-  const [items, setItems] = useState(data);
-  const [modifier, setModifier] = useState({});
+  const [items] = useState(data);
   return (
     <div className="flex h-full space-x-4">
       <div className="w-full flex-1 border-r p-4">
-        <Chart value={chartValue} data={items} modifier={modifier} />
+        <Chart value={chartValue} data={items} />
       </div>
       <div className="w-[400px] flex-shrink-0 p-4">
         {/* render chart editor menu here */}
diff --git a/src/app/storybook/chart/page.tsx b/src/app/storybook/chart/page.tsx
deleted file mode 100644
index 03c7d192..00000000
--- a/src/app/storybook/chart/page.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-"use client";
-
-import Chart from "@/components/chart";
-import { ChartData, ChartValue } from "@/components/chart/chartTypes";
-import { Button } from "@/components/ui/button";
-import { useState } from "react";
-
-const data: ChartData[] = [
-  {
-    package_year: 2021,
-    package_count: 33,
-  },
-  {
-    package_year: 2020,
-    package_count: 62103,
-  },
-  {
-    package_year: 2021,
-    package_count: 360881,
-  },
-  {
-    package_year: 2022,
-    package_count: 426727,
-  },
-  {
-    package_year: 2023,
-    package_count: 370008,
-  },
-  {
-    package_year: 2024,
-    package_count: 1074,
-  },
-  {
-    package_year: 2025,
-    package_count: 43,
-  },
-];
-
-const lineChartValue: ChartValue = {
-  connection_id: null,
-  created_at: "2025-01-30T02:57:34.579Z",
-  id: "2bdc1dc4-21de-4b5f-90d2-384e40288769",
-  model: "chart",
-  name: "Line Chart",
-  params: {
-    id: "2bdc1dc4-21de-4b5f-90d2-384e40288769",
-    name: "Line Chart",
-    type: "scatter",
-    model: "chart",
-    apiKey: "",
-    layers: [
-      {
-        sql: "SELECT YEAR(created_at) AS package_year, COUNT(*) AS package_count FROM package GROUP BY package_year",
-        type: "line",
-      },
-    ],
-    options: {
-      xAxisKey: "package_year",
-      yAxisKeys: ["package_count"],
-      yAxisKeyColors: {
-        "1 + 1": "#fafafa",
-        package_year: "#fafafa",
-      },
-    },
-    source_id: "856a1855-2bee-4d87-9756-a783088c0568",
-    created_at: "2025-01-30T02:57:34.579Z",
-    updated_at: "2025-01-30T02:57:34.579Z",
-    workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
-    connection_id: null,
-  },
-  source_id: "856a1855-2bee-4d87-9756-a783088c0568",
-  type: "line",
-  updated_at: "2025-01-30T09:06:35.249Z",
-  workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
-};
-
-const barChartValue: ChartValue = {
-  connection_id: null,
-  created_at: "2025-01-30T02:56:40.851Z",
-  id: "fed7cd59-6be9-4f43-af6d-b730d14be984",
-  model: "chart",
-  name: "Bar chart",
-  params: {
-    id: "fed7cd59-6be9-4f43-af6d-b730d14be984",
-    name: "Bar chart",
-    type: "column",
-    model: "chart",
-    apiKey: "",
-    layers: [
-      {
-        sql: "SELECT YEAR(created_at) AS package_year, COUNT(*) AS package_count FROM package GROUP BY package_year",
-        type: "bar",
-      },
-    ],
-    options: {
-      xAxisKey: "package_year",
-      yAxisKeys: ["package_count"],
-      yAxisKeyColors: {
-        avg_value: "#e5e5e5",
-        sum_value: "#a3a3a3",
-        ValueGroup: "#fafafa",
-        PackageCount: "#fafafa",
-        package_count: "#525252",
-      },
-    },
-    source_id: "856a1855-2bee-4d87-9756-a783088c0568",
-    created_at: "2025-01-30T02:56:40.851Z",
-    updated_at: "2025-01-30T02:56:40.851Z",
-    workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
-    connection_id: null,
-  },
-  source_id: "856a1855-2bee-4d87-9756-a783088c0568",
-  type: "bar",
-  updated_at: "2025-01-30T09:25:05.373Z",
-  workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
-};
-
-const pieChartValue: ChartValue = {
-  connection_id: null,
-  created_at: "2025-01-30T03:00:40.963Z",
-  id: "602f5960-e2db-4359-8008-c87629c1d169",
-  model: "chart",
-  name: "Pie chart teset",
-  params: {
-    id: "602f5960-e2db-4359-8008-c87629c1d169",
-    name: "Pie chart teset",
-    type: "line",
-    model: "chart",
-    apiKey: "",
-    layers: [
-      {
-        sql: "SELECT YEAR(created_at) AS package_year, COUNT(*) AS package_count FROM package GROUP BY package_year",
-        type: "pie",
-      },
-    ],
-    options: {
-      theme: "afterburn",
-      xAxisKey: "package_year",
-      yAxisKeys: ["package_count"],
-      yAxisKeyColors: {
-        package_count: "#E75F98",
-      },
-    },
-    source_id: "856a1855-2bee-4d87-9756-a783088c0568",
-    created_at: "2025-01-30T03:00:40.963Z",
-    updated_at: "2025-01-30T03:00:40.963Z",
-    workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
-    connection_id: null,
-  },
-  source_id: "856a1855-2bee-4d87-9756-a783088c0568",
-  type: "pie",
-  updated_at: "2025-01-30T07:19:15.167Z",
-  workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
-};
-
-export default function StorybookChartPage() {
-  const [chartValue, setChartValue] = useState(lineChartValue);
-  const [items, setItems] = useState(data);
-  const [modifier, setModifier] = useState({});
-
-  return (
-    <div className="flex h-full w-full flex-col">
-      <div>
-        <Button
-          onClick={() => {
-            setChartValue(lineChartValue);
-            setItems(items);
-            setModifier({
-              title: {
-                text: "Line Chart",
-                left: "center",
-              },
-              tooltip: {
-                trigger: "item",
-              },
-            });
-          }}
-        >
-          Line
-        </Button>
-        <Button
-          className="ml-2"
-          onClick={() => {
-            setChartValue(barChartValue);
-            setItems(items);
-            setModifier({
-              title: {
-                text: "Bar Chart",
-                left: "center",
-              },
-              tooltip: {
-                trigger: "item",
-              },
-            });
-          }}
-        >
-          Bar
-        </Button>
-        <Button
-          className="ml-2"
-          onClick={() => {
-            setChartValue(pieChartValue);
-            setItems(items);
-            setModifier({
-              title: {
-                text: "Pie Chart",
-                left: "center",
-              },
-              tooltip: {
-                trigger: "item",
-              },
-            });
-          }}
-        >
-          Pie
-        </Button>
-      </div>
-      <div className="flex h-full w-full p-4">
-        <Chart value={chartValue} data={items} modifier={modifier} />
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/storybook/layout.tsx b/src/app/storybook/layout.tsx
index cfaeee6f..47a07d57 100644
--- a/src/app/storybook/layout.tsx
+++ b/src/app/storybook/layout.tsx
@@ -52,11 +52,6 @@ export default function StorybookRootLayout({
             text="List View"
             href="/storybook/listview"
           />
-          <SidebarMenuItem
-            icon={Component}
-            text="Chart"
-            href="/storybook/chart"
-          />
           <SidebarMenuItem
             icon={Component}
             text="Chart Editor"
diff --git a/src/components/board/board-chart.tsx b/src/components/board/board-chart.tsx
index 74792681..ce65e38a 100644
--- a/src/components/board/board-chart.tsx
+++ b/src/components/board/board-chart.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import Chart from "../chart";
-import { ChartValue } from "../chart/chartTypes";
+import { ChartValue } from "../chart/chart-type";
 import { useBoardContext } from "./board-provider";
 
 export default function BoardChart({ value }: { value: ChartValue }) {
@@ -35,8 +35,6 @@ export default function BoardChart({ value }: { value: ChartValue }) {
   useEffect(() => {
     if (loaderRef.current && loading) {
       const interval = setInterval(() => {
-        console.log(Date.now(), lastRunTimestamp);
-
         if (loaderRef.current) {
           const progress = Math.min(
             ((Date.now() - lastRunTimestamp) / 3000) * 100,
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index e1df617d..7921d993 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -1,6 +1,6 @@
 import { BoardSourceDriver } from "@/drivers/board-source/base-source";
 import { useEffect, useState } from "react";
-import { ChartValue } from "../chart/chartTypes";
+import { ChartValue } from "../chart/chart-type";
 import { BoardCanvas } from "./board-canvas";
 import { BoardFilter } from "./board-filter";
 import { BoardFilterProps } from "./board-filter-dialog";
diff --git a/src/components/chart/chart-type.ts b/src/components/chart/chart-type.ts
new file mode 100644
index 00000000..9288a2e2
--- /dev/null
+++ b/src/components/chart/chart-type.ts
@@ -0,0 +1,176 @@
+interface ChartLayer {
+  sql: string;
+  type: string;
+}
+
+export type ChartLegend = "none" | "top" | "bottom" | "left" | "right";
+export type ChartLabelDisplayX = "auto" | "0" | "45" | "90" | "hidden";
+export type ChartLabelDisplayY = "left" | "right" | "hidden";
+export type ChartSortOrder = "default" | "asc" | "desc";
+export type SingleValueFormat =
+  | "percent"
+  | "number"
+  | "decimal"
+  | "date"
+  | "time"
+  | "dollar"
+  | "euro"
+  | "pound"
+  | "yen";
+
+interface ChartOptions {
+  foreground?: string;
+  gradientStop?: string;
+  gradientStart?: string;
+  backgroundType?: string;
+  xAxisLabelHidden?: boolean;
+  yAxisLabelHidden?: boolean;
+  legend?: ChartLegend;
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  xAxisKey: string;
+  yAxisKeys: string[];
+  yAxisKeyColors?: Record<string, string>;
+  xAxisLabelDisplay?: ChartLabelDisplayX;
+  yAxisLabelDisplay?: ChartLabelDisplayY;
+  sortOrder?: ChartSortOrder;
+  groupBy?: string;
+  percentage?: boolean;
+  text?: string;
+  format?: SingleValueFormat;
+  theme?: string;
+}
+
+interface ChartParams {
+  id: string;
+  name: string;
+  type: ChartType;
+  model: string;
+  apiKey: string;
+  layers: ChartLayer[];
+  options: ChartOptions;
+  source_id: string;
+  created_at: string;
+  updated_at: string;
+  workspace_id: string;
+  connection_id: string | null;
+}
+
+export interface ChartValue {
+  connection_id: string | null;
+  created_at: string;
+  id: string;
+  model: string;
+  name: string;
+  params: ChartParams;
+  source_id: string;
+  type: ChartType;
+  updated_at: string;
+  workspace_id: string;
+  description?: string;
+}
+
+export interface ChartData {
+  [key: string]: any;
+}
+
+export type ChartType =
+  | "line"
+  | "bar"
+  | "pie"
+  | "radar"
+  | "funnel"
+  | "area"
+  | "column"
+  | "scatter"
+  | "text"
+  | "table"
+  | "single_value";
+
+export type ThemeColors =
+  | "neonPunk"
+  | "cyberGlow"
+  | "neoTokyo"
+  | "synthwave"
+  | "vaporwave"
+  | "iridium"
+  | "celestial"
+  | "cobalt"
+  | "afterburn"
+  | "mercury";
+
+export const THEMES: Record<
+  ThemeColors,
+  { background: string; colors: { light: string[]; dark: string[] } }
+> = {
+  neonPunk: {
+    background: "linear-gradient(145deg, #1e0338 0%, #4a0d67 100%)",
+    colors: {
+      light: ["#ff2e6e", "#8c54ff"],
+      dark: ["#ff2e6e", "#8c54ff"],
+    },
+  },
+  cyberGlow: {
+    background: "linear-gradient(145deg, #16213e 0%, #1a1a2e 100%)",
+    colors: {
+      light: ["#ffa726", "#ff5722"],
+      dark: ["#ffa726", "#ff5722"],
+    },
+  },
+  neoTokyo: {
+    background: "linear-gradient(145deg, #2d0a31 0%, #440a44 100%)",
+    colors: {
+      light: ["#ff71ce", "#01cdfe"],
+      dark: ["#ff71ce", "#01cdfe"],
+    },
+  },
+  synthwave: {
+    background: "linear-gradient(145deg, #2b1055 0%, #7597de 100%)",
+    colors: {
+      light: ["#ff2a6d", "#05d9e8"],
+      dark: ["#ff2a6d", "#05d9e8"],
+    },
+  },
+  vaporwave: {
+    background: "linear-gradient(145deg, #391f5e 0%, #6b3fa0 100%)",
+    colors: {
+      light: ["#ff71ce", "#b967ff"],
+      dark: ["#ff71ce", "#b967ff"],
+    },
+  },
+  iridium: {
+    background: "linear-gradient(145deg, #0b4f3b 0%, #69b765 100%)",
+    colors: {
+      light: ["#87E9C0", "#B9D975", "#C9D69B"],
+      dark: ["#87E9C0", "#B9D975", "#C9D69B"],
+    },
+  },
+  celestial: {
+    background: "linear-gradient(145deg, #004b6b 0%, #1de2ff 100%)",
+    colors: {
+      light: ["#D1FFFF", "#93FDFF", "#1A9EF5"],
+      dark: ["#D1FFFF", "#93FDFF", "#1A9EF5"],
+    },
+  },
+  cobalt: {
+    background: "linear-gradient(145deg, #2b256e 0%, #6b82ff 100%)",
+    colors: {
+      light: ["#5956E2", "#A99AFF", "#82DBFF"],
+      dark: ["#5956E2", "#A99AFF", "#82DBFF"],
+    },
+  },
+  afterburn: {
+    background: "linear-gradient(145deg, #731d39 0%, #e47096 100%)",
+    colors: {
+      light: ["#E75F98", "#FFA285", "#CCB8F2"],
+      dark: ["#E75F98", "#FFA285", "#CCB8F2"],
+    },
+  },
+  mercury: {
+    background: "linear-gradient(145deg, #262626 0%, #a3a3a3 100%)",
+    colors: {
+      light: ["#0a0a0a", "#a3a3a3", "#525252", "#262626", "#e5e5e5"],
+      dark: ["#fafafa", "#525252", "#a3a3a3", "#e5e5e5", "#262626"],
+    },
+  },
+};
diff --git a/src/components/chart/chartTypes.ts b/src/components/chart/chartTypes.ts
deleted file mode 100644
index a58bd84d..00000000
--- a/src/components/chart/chartTypes.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-interface ChartLayer {
-  sql: string;
-  type: string;
-}
-
-export type ChartLegend = "none" | "top" | "bottom" | "left" | "right";
-export type ChartLabelDisplayX = "auto" | "0" | "45" | "90" | "hidden";
-export type ChartLabelDisplayY = "left" | "right" | "hidden";
-export type ChartSortOrder = "default" | "asc" | "desc";
-
-interface ChartOptions {
-  foreground?: string;
-  gradientStop?: string;
-  gradientStart?: string;
-  backgroundType?: string;
-  xAxisLabelHidden?: boolean;
-  yAxisLabelHidden?: boolean;
-  legend?: ChartLegend;
-  xAxisLabel?: string;
-  yAxisLabel?: string;
-  xAxisKey: string;
-  yAxisKeys: string[];
-  yAxisKeyColors?: Record<string, string>;
-  xAxisLabelDisplay?: ChartLabelDisplayX;
-  yAxisLabelDisplay?: ChartLabelDisplayY;
-  sortOrder?: ChartSortOrder;
-  groupBy?: string;
-  percentage?: boolean;
-  text?: string;
-  format?:
-    | "percent"
-    | "number"
-    | "decimal"
-    | "date"
-    | "time"
-    | "dollar"
-    | "euro"
-    | "pound"
-    | "yen";
-  theme?: string;
-}
-
-interface ChartParams {
-  id: string;
-  name: string;
-  type: ChartType;
-  model: string;
-  apiKey: string;
-  layers: ChartLayer[];
-  options: ChartOptions;
-  source_id: string;
-  created_at: string;
-  updated_at: string;
-  workspace_id: string;
-  connection_id: string | null;
-}
-
-export interface ChartValue {
-  connection_id: string | null;
-  created_at: string;
-  id: string;
-  model: string;
-  name: string;
-  params: ChartParams;
-  source_id: string;
-  type: ChartType;
-  updated_at: string;
-  workspace_id: string;
-  description?: string;
-}
-
-export interface ChartData {
-  [key: string]: any;
-}
-
-export type ChartType =
-  | "line"
-  | "bar"
-  | "pie"
-  | "radar"
-  | "funnel"
-  | "area"
-  | "column"
-  | "scatter"
-  | "text"
-  | "table"
-  | "single_value";
diff --git a/src/components/chart/echartOptionsBuilder.ts b/src/components/chart/echart-options-builder.ts
similarity index 88%
rename from src/components/chart/echartOptionsBuilder.ts
rename to src/components/chart/echart-options-builder.ts
index a35b587a..76127874 100644
--- a/src/components/chart/echartOptionsBuilder.ts
+++ b/src/components/chart/echart-options-builder.ts
@@ -7,32 +7,44 @@ import {
   ScatterSeriesOption,
   SeriesOption,
 } from "echarts";
-import { ChartData, ChartValue } from "./chartTypes";
+import { ChartData, ChartValue, ThemeColors, THEMES } from "./chart-type";
 
 export default class EchartOptionsBuilder {
   private chartValue: ChartValue;
   private chartData: ChartData[];
-  private theme: string = "light";
+  private theme: "dark" | "light" = "light";
   private columns: string[] = [];
-  private chartHeight: number = 0;
-  private chartWidth: number = 0;
+  public chartHeight: number = 0;
+  public chartWidth: number = 0;
+  public colorTheme: ThemeColors = "mercury";
 
   constructor(value: ChartValue, data: ChartData[]) {
     this.chartValue = value;
     this.chartData = data;
   }
 
-  setChartSize(width: number, height: number) {
-    this.chartWidth = width;
-    this.chartHeight = height;
+  setChartValue(value: ChartValue) {
+    this.chartValue = value;
+  }
+
+  getChartType() {
+    return this.chartValue.type;
   }
 
   setTheme(theme: string) {
-    this.theme = theme;
+    this.theme = theme as "dark" | "light";
   }
 
   private getColorValues(): string[] {
-    return ["#5B8FF9", "#5AD8A6", "#5D7092", "#F6BD16", "#6F5EF9"];
+    const DEFAULT_THEME = "mercury";
+    const colorTheme = this.colorTheme ?? DEFAULT_THEME;
+    const values = THEMES[colorTheme];
+
+    if (!values) {
+      throw new Error(`Theme "${colorTheme}" does not exist`);
+    }
+
+    return values.colors[this.theme]; // return light or dark values
   }
 
   private getTextColor(): string {
@@ -46,6 +58,7 @@ export default class EchartOptionsBuilder {
     const colorValues = this.getColorValues();
 
     const formattedSource = this.chartData;
+    this.columns = [];
     if (this.chartValue.params.options?.xAxisKey) {
       this.columns.push(this.chartValue.params.options.xAxisKey);
     }
@@ -54,6 +67,7 @@ export default class EchartOptionsBuilder {
     }
 
     const isTall = this.chartHeight > 150;
+
     const gridLineColors = this.theme === "dark" ? "#FFFFFF08" : "#00000010";
     const axisLineColors = this.theme === "dark" ? "#FFFFFF15" : "#00000020";
 
@@ -94,8 +108,20 @@ export default class EchartOptionsBuilder {
       };
     }
 
+    const xAxisLabel = !this.chartValue.params.options.xAxisLabel
+      ? this.chartValue.params.options.xAxisKey
+      : this.chartValue.params.options.xAxisLabel;
+
+    let yaxisLabel = !this.chartValue.params.options.yAxisLabel
+      ? this.chartValue.params.options.yAxisKeys[0]
+      : this.chartValue.params.options.yAxisLabel;
+
+    yaxisLabel = this.chartValue.params.options.yAxisLabelHidden
+      ? ""
+      : yaxisLabel;
+
     const options: EChartsOption = {
-      // backgroundColor: this.getBackgroundColor(),
+      //backgroundColor: this.getBackgroundColor(),
       dataset: {
         dimensions: this.columns,
         source: formattedSource,
@@ -117,9 +143,8 @@ export default class EchartOptionsBuilder {
       grid: {
         left: "0", // this.type === 'bar' ? '100' : '0',
         right: "6",
-        bottom:
-          this.chartValue.params.options.xAxisLabel && isTall ? "23" : "0", // isTall ? '15%' : '15%',
-        top: this.chartValue.params.options.yAxisLabel && isTall ? "26" : "8",
+        bottom: xAxisLabel && isTall ? "23" : "0", // isTall ? '15%' : '15%',
+        top: yaxisLabel && isTall ? "26" : "8",
         containLabel: true,
       },
       xAxis: {
@@ -130,7 +155,7 @@ export default class EchartOptionsBuilder {
             : isXAxisDate
               ? "time"
               : "category",
-        name: isTall ? this.chartValue.params.options.xAxisLabel : "",
+        name: isTall ? xAxisLabel : "",
         nameLocation: "middle",
         nameGap: 30,
         nameTextStyle: {
@@ -169,7 +194,7 @@ export default class EchartOptionsBuilder {
             : isYAxisDate
               ? "time"
               : "value",
-        name: isTall ? this.chartValue.params.options.yAxisLabel : "",
+        name: isTall ? yaxisLabel : "",
         show: this.chartValue.params.options.yAxisLabelDisplay !== "hidden",
         position:
           (this.chartValue.params.options.yAxisLabelDisplay !== "hidden" &&
diff --git a/src/components/chart/edit-chart-menu.tsx b/src/components/chart/edit-chart-menu.tsx
index bd02da39..83f0c8ae 100644
--- a/src/components/chart/edit-chart-menu.tsx
+++ b/src/components/chart/edit-chart-menu.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ChartBar } from "@phosphor-icons/react/dist/icons/ChartBar";
 import { ChartLine } from "@phosphor-icons/react/dist/icons/ChartLine";
 import { ChartPieSlice } from "@phosphor-icons/react/dist/icons/ChartPieSlice";
@@ -8,8 +9,16 @@ import { NumberCircleOne } from "@phosphor-icons/react/dist/icons/NumberCircleOn
 import { Table } from "@phosphor-icons/react/dist/icons/Table";
 import { TextT } from "@phosphor-icons/react/dist/icons/TextT";
 import { ChartBarHorizontal } from "@phosphor-icons/react/dist/ssr";
+import { useMemo } from "react";
+import {
+  ChartLabelDisplayY,
+  ChartValue,
+  SingleValueFormat,
+} from "./chart-type";
 import { ChartTypeButton } from "./chart-type-button";
-import { ChartValue } from "./chartTypes";
+import { SimpleCombobox } from "./simple-combobox";
+import SimpleInput from "./simple-input";
+import SimpleToggle from "./simple-toggle";
 
 interface EditChartMenuProps {
   value: ChartValue;
@@ -17,6 +26,307 @@ interface EditChartMenuProps {
 }
 
 export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
+  const isNotChartComponent = ["text", "single_value", "table"].includes(
+    value.type
+  );
+
+  const selectYAxisDisplay = useMemo(() => {
+    if (isNotChartComponent) return null;
+    const yAxisSideValues = [
+      {
+        value: "left",
+        label: "Left",
+      },
+      {
+        value: "right",
+        label: "Right",
+      },
+      {
+        value: "hidden",
+        label: "Hidden",
+      },
+    ];
+    return (
+      <div>
+        <SimpleCombobox
+          hideArrow={true}
+          values={yAxisSideValues}
+          selected={value.params.options?.yAxisLabelDisplay ?? "left"}
+          placeholder="Select display..."
+          onChange={function (v: string): void {
+            setValue({
+              ...value,
+              params: {
+                ...value.params,
+                options: {
+                  ...value.params.options,
+                  yAxisLabelDisplay: v as ChartLabelDisplayY,
+                },
+              },
+            });
+          }}
+        ></SimpleCombobox>
+      </div>
+    );
+  }, [isNotChartComponent, setValue, value]);
+
+  const selectAxisKey = useMemo(() => {
+    if (isNotChartComponent) return null;
+    const allKeys = [
+      value.params.options?.xAxisKey,
+      ...(value.params.options?.yAxisKeys ?? []),
+    ];
+    return (
+      <div>
+        <p className="mb-1.5 text-sm font-bold opacity-70">Select X Axis</p>
+        <SimpleCombobox
+          values={
+            allKeys.map((key) => {
+              return {
+                value: key,
+                label: key,
+              };
+            }) ?? []
+          }
+          selected={value.params.options?.xAxisKey ?? ""}
+          placeholder="Select axis key..."
+          onChange={function (v: string): void {
+            setValue({
+              ...value,
+              params: {
+                ...value.params,
+                options: {
+                  ...value.params.options,
+                  xAxisKey: v,
+                  yAxisKeys: allKeys.filter((key) => key !== v),
+                },
+              },
+            });
+          }}
+        ></SimpleCombobox>
+      </div>
+    );
+  }, [isNotChartComponent, setValue, value]);
+
+  const yAxisLabelSection = useMemo(() => {
+    if (isNotChartComponent) return null;
+    return (
+      <div>
+        <p className="mb-1.5 text-sm font-bold opacity-70">Y Axis Label</p>
+        <div className="flex items-center justify-between gap-2">
+          <SimpleInput
+            value={value.params.options?.yAxisLabel}
+            placeholder={value.params.options?.yAxisKeys[0] ?? "Y Axis Label"}
+            onSumit={(v) => {
+              setValue({
+                ...value,
+                params: {
+                  ...value.params,
+                  options: {
+                    ...value.params.options,
+                    yAxisLabel: v,
+                  },
+                },
+              });
+            }}
+          />
+
+          <SimpleToggle
+            values={["Show", "Hide"]}
+            onChange={(v) => {
+              setValue({
+                ...value,
+                params: {
+                  ...value.params,
+                  options: {
+                    ...value.params.options,
+                    yAxisLabelHidden: v === "Hide",
+                  },
+                },
+              });
+            }}
+            selectedValue={
+              value.params.options?.yAxisLabelHidden ? "Hide" : "Show"
+            }
+          />
+          {selectYAxisDisplay}
+        </div>
+      </div>
+    );
+  }, [isNotChartComponent, selectYAxisDisplay, setValue, value]);
+
+  const xAxisLabelSection = useMemo(() => {
+    if (isNotChartComponent) return null;
+    return (
+      <div>
+        <p className="mb-1.5 text-sm font-bold opacity-70">X Axis Label</p>
+        <div className="flex items-center justify-between gap-2">
+          <SimpleInput
+            value={value.params.options?.xAxisLabel}
+            placeholder={value.params.options?.xAxisKey ?? "X Axis Label"}
+            onSumit={(v) => {
+              setValue({
+                ...value,
+                params: {
+                  ...value.params,
+                  options: {
+                    ...value.params.options,
+                    xAxisLabel: v,
+                  },
+                },
+              });
+            }}
+          />
+
+          <SimpleToggle
+            values={["Show", "Hide"]}
+            onChange={(v) => {
+              setValue({
+                ...value,
+                params: {
+                  ...value.params,
+                  options: {
+                    ...value.params.options,
+                    xAxisLabelHidden: v === "Hide",
+                  },
+                },
+              });
+            }}
+            selectedValue={
+              value.params.options?.xAxisLabelHidden ? "Hide" : "Show"
+            }
+          />
+        </div>
+      </div>
+    );
+  }, [isNotChartComponent, setValue, value]);
+
+  const dataFormatSection = useMemo(() => {
+    if (value.type !== "single_value") return null;
+    const dataFormatValues = [
+      {
+        value: "none",
+        label: "None",
+      },
+      {
+        value: "percent",
+        label: "Percent",
+      },
+      {
+        value: "number",
+        label: "Number",
+      },
+      {
+        value: "decimal",
+        label: "Decimal",
+      },
+      {
+        value: "date",
+        label: "Date",
+      },
+      {
+        value: "time",
+        label: "Time",
+      },
+      {
+        value: "dollar",
+        label: "Dollar",
+      },
+      {
+        value: "euro",
+        label: "Euro",
+      },
+      {
+        value: "pound",
+        label: "Pound",
+      },
+      {
+        value: "yen",
+        label: "Yen",
+      },
+    ];
+    return (
+      <div>
+        <p className="mb-1.5 text-sm font-bold opacity-70">Data Format</p>
+        <SimpleCombobox
+          values={dataFormatValues}
+          selected={value.params.options?.format ?? "none"}
+          placeholder="Select format..."
+          onChange={function (v: string): void {
+            setValue({
+              ...value,
+              params: {
+                ...value.params,
+                options: {
+                  ...value.params.options,
+                  format: v === "none" ? undefined : (v as SingleValueFormat),
+                },
+              },
+            });
+          }}
+        ></SimpleCombobox>
+      </div>
+    );
+  }, [setValue, value]);
+
+  const textSection = useMemo(() => {
+    if (value.type !== "text") return null;
+    return (
+      <div>
+        <p className="mb-1.5 text-sm font-bold opacity-70">Text</p>
+        <textarea
+          className="h-[200px] w-full rounded-md border p-2"
+          onChange={(v) =>
+            setValue({
+              ...value,
+              params: {
+                ...value.params,
+                options: { ...value.params.options, text: v.target.value },
+              },
+            })
+          }
+        />
+      </div>
+    );
+  }, [setValue, value]);
+
+  const textColorSection = useMemo(() => {
+    if (value.type !== "text") return null;
+    const textColorValues = [
+      {
+        value: "Automatic",
+        label: "Automatic",
+      },
+      {
+        value: "White",
+        label: "White",
+      },
+      {
+        value: "Black",
+        label: "Black",
+      },
+    ];
+    return (
+      <div>
+        <p className="mb-1.5 pt-2 text-sm font-bold opacity-70">Text Color</p>
+        <SimpleCombobox
+          values={textColorValues}
+          selected={value.params.options?.foreground ?? "Automatic"}
+          placeholder="Select color..."
+          onChange={function (v: string): void {
+            setValue({
+              ...value,
+              params: {
+                ...value.params,
+                options: { ...value.params.options, foreground: v },
+              },
+            });
+          }}
+        ></SimpleCombobox>
+      </div>
+    );
+  }, [setValue, value]);
+
   return (
     <div className="flex w-full flex-col gap-5 p-1 pb-4">
       <section key={1}>
@@ -105,12 +415,12 @@ export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
         </div>
       </section>
 
-      {value.type === "text" && (
-        <div>
-          <p className="mb-1.5 text-sm font-bold opacity-70">Text</p>
-          <textarea className="h-[200px] w-full rounded-md border p-2" />
-        </div>
-      )}
+      {textSection}
+      {textColorSection}
+      {dataFormatSection}
+      {xAxisLabelSection}
+      {selectAxisKey}
+      {yAxisLabelSection}
     </div>
   );
 }
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
index 73a27efa..ad5739be 100644
--- a/src/components/chart/index.tsx
+++ b/src/components/chart/index.tsx
@@ -3,8 +3,8 @@ import * as echarts from "echarts";
 import { EChartsOption } from "echarts";
 import { useTheme } from "next-themes";
 import { useEffect, useRef } from "react";
-import { ChartData, ChartValue } from "./chartTypes";
-import EchartOptionsBuilder from "./echartOptionsBuilder";
+import { ChartData, ChartValue } from "./chart-type";
+import EchartOptionsBuilder from "./echart-options-builder";
 
 interface OuterbaseChartProps {
   data: ChartData[];
@@ -154,44 +154,61 @@ const TableComponent = ({ data }: OuterbaseChartProps) => {
 
 const ChartComponent = ({ value, data }: OuterbaseChartProps) => {
   const domRef = useRef<HTMLDivElement>(null);
-  const { theme } = useTheme();
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const chartBuilderRef = useRef<EchartOptionsBuilder | null>(null);
+  const { resolvedTheme, forcedTheme } = useTheme();
 
   useEffect(() => {
+    if (
+      !chartBuilderRef.current ||
+      chartBuilderRef.current.getChartType() !== value.type
+    ) {
+      chartBuilderRef.current = new EchartOptionsBuilder(value, data);
+    } else {
+      chartBuilderRef.current.setChartValue(value);
+    }
+
     if (domRef.current) {
+      const currentDomRef = domRef.current;
       const chartInstance =
-        echarts.getInstanceByDom(domRef.current) ||
-        echarts.init(domRef.current);
+        echarts.getInstanceByDom(currentDomRef) || echarts.init(currentDomRef);
       chartInstance.clear();
 
-      const chartBuilder = new EchartOptionsBuilder(value, data);
-      chartBuilder.setTheme(theme || "dark");
-
-      const options = chartBuilder.getChartOptions();
-      chartInstance.setOption(options);
+      const chartBuilder = chartBuilderRef.current;
+      chartBuilder.setTheme((forcedTheme ?? resolvedTheme) as "light" | "dark");
 
       // handle resize event
       const resizeObserver = new ResizeObserver((entries) => {
         requestAnimationFrame(() => {
           for (const entry of entries) {
-            if (entry.target === domRef.current) {
+            if (entry.target === currentDomRef) {
               const { width, height } = entry.contentRect;
-              chartBuilder.setChartSize(width, height);
+              chartBuilder.chartHeight = height;
+              chartBuilder.chartWidth = width;
               chartInstance.resize();
+              if (timerRef.current) {
+                clearTimeout(timerRef.current);
+              }
+
+              timerRef.current = setTimeout(() => {
+                chartInstance.setOption(chartBuilder.getChartOptions());
+              }, 200);
+
               break;
             }
           }
         });
       });
 
-      resizeObserver.observe(domRef.current);
+      resizeObserver.observe(currentDomRef);
 
       return () => {
-        if (domRef.current) {
-          resizeObserver.unobserve(domRef.current);
+        if (currentDomRef) {
+          resizeObserver.unobserve(currentDomRef);
         }
       };
     }
-  }, [domRef, value, data]);
+  }, [domRef, value, data, forcedTheme, resolvedTheme]);
 
   return <div ref={domRef} className="h-full w-full"></div>;
 };
diff --git a/src/components/chart/simple-combobox.tsx b/src/components/chart/simple-combobox.tsx
new file mode 100644
index 00000000..f3bbf859
--- /dev/null
+++ b/src/components/chart/simple-combobox.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface SimpleComboValue {
+  value: string;
+  label: string;
+}
+interface SimpleComboboxProps {
+  values: SimpleComboValue[];
+  onChange: (v: string) => void;
+  placeholder?: string;
+  selected?: string;
+  hideArrow?: boolean;
+}
+
+export function SimpleCombobox({
+  values,
+  onChange,
+  placeholder,
+  selected,
+  hideArrow,
+}: SimpleComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [selectedValue, setSelectedValue] = React.useState<string | null>(
+    selected || null
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+        >
+          {values
+            ? values.find((value) => value.value === selectedValue)?.label
+            : placeholder || ""}
+          {!hideArrow && <ChevronsUpDown className="opacity-50" />}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0">
+        <Command>
+          <CommandInput placeholder={placeholder} />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {values.map((value, idx) => (
+                <CommandItem
+                  key={idx}
+                  value={value.value}
+                  onSelect={(currentValue) => {
+                    setSelectedValue(currentValue);
+                    onChange(currentValue);
+                    setOpen(false);
+                  }}
+                >
+                  {value.label}
+                  <Check
+                    className={cn(
+                      "ml-auto",
+                      selectedValue === value.value
+                        ? "opacity-100"
+                        : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/chart/simple-input.tsx b/src/components/chart/simple-input.tsx
new file mode 100644
index 00000000..bd920ff6
--- /dev/null
+++ b/src/components/chart/simple-input.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+interface SimpleInputProps {
+  value?: string;
+  placeholder?: string;
+  onSumit: (v: string) => void;
+}
+
+export default function SimpleInput({
+  value,
+  placeholder,
+  onSumit,
+}: SimpleInputProps) {
+  const [text, setText] = React.useState(value || "");
+
+  return (
+    <input
+      className="w-full rounded-md border p-2"
+      placeholder={placeholder ?? ""}
+      value={text ?? ""}
+      onChange={(v) => {
+        setText(v.target.value);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          onSumit(text);
+        }
+      }}
+    />
+  );
+}
diff --git a/src/components/chart/simple-toggle.tsx b/src/components/chart/simple-toggle.tsx
new file mode 100644
index 00000000..c7fe619a
--- /dev/null
+++ b/src/components/chart/simple-toggle.tsx
@@ -0,0 +1,33 @@
+"use client";
+import React from "react";
+import { ButtonGroup, ButtonGroupItem } from "../button-group";
+
+interface SimpleToggleProps {
+  values: string[];
+  onChange: (v: string) => void;
+  selectedValue: string;
+}
+
+export default function SimpleToggle({
+  values,
+  onChange,
+  selectedValue,
+}: SimpleToggleProps) {
+  const [selected, setSelected] = React.useState(selectedValue || values[0]);
+  return (
+    <ButtonGroup>
+      {values.map((value) => (
+        <ButtonGroupItem
+          key={value}
+          onClick={() => {
+            setSelected(value);
+            onChange(value);
+          }}
+          selected={value === selected}
+        >
+          {value}
+        </ButtonGroupItem>
+      ))}
+    </ButtonGroup>
+  );
+}

From c346d54af1464e20c9d647b206581e6232cd50d1 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Thu, 6 Feb 2025 08:48:04 +0700
Subject: [PATCH 005/106] combine board and base together

---
 .../w/[workspaceId]/page-client.tsx           | 79 +++++++++++--------
 src/app/(outerbase)/workspace-provider.tsx    | 23 +++++-
 src/components/chart/index.tsx                |  2 +-
 src/components/resource-card/index.tsx        |  4 +-
 src/components/resource-card/utils.tsx        | 13 ++-
 src/lib/utils-datetime.ts                     | 40 ++++++++++
 src/outerbase-cloud/api-type.ts               |  3 +-
 7 files changed, 120 insertions(+), 44 deletions(-)
 create mode 100644 src/lib/utils-datetime.ts

diff --git a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx b/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
index 2d822a2d..8df54fc9 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
@@ -8,22 +8,30 @@ import {
   getDatabaseIcon,
   getDatabaseVisual,
 } from "@/components/resource-card/utils";
-import { BoardVisual } from "@/components/resource-card/visual";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { timeSince } from "@/lib/utils-datetime";
 import { getOuterbaseDashboardList } from "@/outerbase-cloud/api";
 import {
   CalendarDots,
-  ChartBar,
   SortAscending,
   SortDescending,
 } from "@phosphor-icons/react";
 import { useParams } from "next/navigation";
+import { useMemo } from "react";
 import useSWR from "swr";
 import { NavigationBar } from "../../navigation";
 import { useWorkspaces } from "../../workspace-provider";
 
+interface ResourceItem {
+  id: string;
+  type: string;
+  name: string;
+  href: string;
+  status?: string;
+}
+
 export default function WorkspaceListPageClient() {
-  const { workspaces } = useWorkspaces();
+  const { currentWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
 
   const { data: boards } = useSWR(
@@ -38,11 +46,31 @@ export default function WorkspaceListPageClient() {
     }
   );
 
-  const bases =
-    workspaces.find(
-      (workspace) =>
-        workspace.short_name === workspaceId || workspace.id === workspaceId
-    )?.bases ?? [];
+  const resources: ResourceItem[] = useMemo(() => {
+    const baseResources = (currentWorkspace?.bases ?? []).map((base) => ({
+      id: base.id,
+      type: base.sources[0]?.type ?? "database",
+      name: base.name,
+      href: `/w/${currentWorkspace?.short_name}/${base.short_name}`,
+      status: base.last_analytics_event?.created_at
+        ? `Last viewed ${timeSince(new Date(base.last_analytics_event?.created_at))} ago`
+        : undefined,
+    }));
+
+    const boardResources = (boards?.items ?? [])
+      .filter((board) => board.base_id === null)
+      .map((board) => ({
+        id: board.id,
+        type: "board",
+        name: board.name,
+        href: `/w/${currentWorkspace?.short_name}/board/${board.id}`,
+        status: `Last updated ${timeSince(new Date(board?.updated_at ?? ""))} ago`,
+      }));
+
+    const allResources = [...baseResources, ...boardResources];
+
+    return allResources.sort((a, b) => a.name.localeCompare(b.name));
+  }, [currentWorkspace, boards]);
 
   return (
     <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
@@ -76,37 +104,18 @@ export default function WorkspaceListPageClient() {
           </Toolbar>
         </div>
 
-        <h1 className="my-4">Board</h1>
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
-          {(boards?.items ?? [])
-            .filter((board) => board.base_id === null)
-            .map((board) => (
-              <ResourceCard
-                key={board.id}
-                className="w-full"
-                color="default"
-                icon={ChartBar}
-                title={board.name}
-                subtitle={"Board"}
-                visual={BoardVisual}
-                href={`/w/${workspaceId}/board/${board.id}`}
-              />
-            ))}
-        </div>
-
-        <h1 className="my-4">Base</h1>
-
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
-          {bases.map((base) => (
+          {resources.map((resource) => (
             <ResourceCard
               className="w-full"
-              key={base.id}
+              key={resource.id}
               color="default"
-              icon={getDatabaseIcon(base.sources[0]?.type)}
-              href={`/w/${workspaceId}/${base.short_name}`}
-              title={base.name}
-              subtitle={getDatabaseFriendlyName(base.sources[0]?.type)}
-              visual={getDatabaseVisual(base.sources[0]?.type)}
+              icon={getDatabaseIcon(resource.type)}
+              href={resource.href}
+              title={resource.name}
+              subtitle={getDatabaseFriendlyName(resource.type)}
+              visual={getDatabaseVisual(resource.type)}
+              status={resource.status}
             >
               <DropdownMenuItem>Remove</DropdownMenuItem>
             </ResourceCard>
diff --git a/src/app/(outerbase)/workspace-provider.tsx b/src/app/(outerbase)/workspace-provider.tsx
index 35608622..fc4dda5b 100644
--- a/src/app/(outerbase)/workspace-provider.tsx
+++ b/src/app/(outerbase)/workspace-provider.tsx
@@ -1,8 +1,14 @@
 "use client";
 import { getOuterbaseWorkspace } from "@/outerbase-cloud/api";
 import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
-import { useParams } from "next/navigation";
-import { createContext, PropsWithChildren, useContext, useMemo } from "react";
+import { useParams, useRouter } from "next/navigation";
+import {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
 import useSWR from "swr";
 
 const WorkspaceContext = createContext<{
@@ -16,6 +22,8 @@ export function useWorkspaces() {
 }
 
 export function WorkspaceProvider({ children }: PropsWithChildren) {
+  const router = useRouter();
+
   const { data, isLoading } = useSWR(
     "workspaces",
     () => {
@@ -40,7 +48,16 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
     );
   }, [workspaceId, data]);
 
-  console.log(data, workspaceId, currentWorkspace);
+  useEffect(() => {
+    // If the current workspace is not found, redirect to the first workspace
+    if (isLoading) return;
+
+    if (!currentWorkspace) {
+      if (data?.items.length) {
+        router.replace(`/w/${data.items[0].short_name}`);
+      }
+    }
+  }, [isLoading, data, currentWorkspace, workspaceId, router]);
 
   return (
     <WorkspaceContext.Provider
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
index ad5739be..051ecf00 100644
--- a/src/components/chart/index.tsx
+++ b/src/components/chart/index.tsx
@@ -172,7 +172,7 @@ const ChartComponent = ({ value, data }: OuterbaseChartProps) => {
       const currentDomRef = domRef.current;
       const chartInstance =
         echarts.getInstanceByDom(currentDomRef) || echarts.init(currentDomRef);
-      chartInstance.clear();
+      // chartInstance.clear();
 
       const chartBuilder = chartBuilderRef.current;
       chartBuilder.setTheme((forcedTheme ?? resolvedTheme) as "light" | "dark");
diff --git a/src/components/resource-card/index.tsx b/src/components/resource-card/index.tsx
index 427c783b..52fdb324 100644
--- a/src/components/resource-card/index.tsx
+++ b/src/components/resource-card/index.tsx
@@ -14,7 +14,7 @@ import {
 } from "../ui/dropdown-menu";
 import { BoardVisual } from "./visual";
 
-interface DatabaseCardProps {
+export interface ResourceCardProps {
   className?: string;
   href: string;
   status?: string;
@@ -36,7 +36,7 @@ export default function ResourceCard({
   icon: IconComponent = Database,
   visual: VisualComponent = BoardVisual,
   children,
-}: PropsWithChildren<DatabaseCardProps>) {
+}: PropsWithChildren<ResourceCardProps>) {
   const [open, setOpen] = useState(false);
 
   return (
diff --git a/src/components/resource-card/utils.tsx b/src/components/resource-card/utils.tsx
index 8bf06634..e79db461 100644
--- a/src/components/resource-card/utils.tsx
+++ b/src/components/resource-card/utils.tsx
@@ -1,4 +1,4 @@
-import { Database } from "@phosphor-icons/react";
+import { ChartBar, Database } from "@phosphor-icons/react";
 import {
   MySQLIcon,
   PostgreIcon,
@@ -6,7 +6,12 @@ import {
   SQLiteIcon,
 } from "../icons/outerbase-icon";
 import { CloudflareIcon, StarbaseIcon, ValTownIcon } from "./icon";
-import { GeneralVisual, MySQLVisual, SQLiteVisual } from "./visual";
+import {
+  BoardVisual,
+  GeneralVisual,
+  MySQLVisual,
+  SQLiteVisual,
+} from "./visual";
 
 export function getDatabaseFriendlyName(type: string) {
   if (type === "sqlite") return "SQLite";
@@ -23,6 +28,8 @@ export function getDatabaseFriendlyName(type: string) {
   if (type === "starbasedb") return "StarbaseDB";
   if (type === "starbase") return "StarbaseDB";
   if (type === "bigquery") return "BigQuery";
+  if (type === "valtown") return "ValTown";
+  if (type === "board") return "Board";
 
   return type;
 }
@@ -35,6 +42,7 @@ export function getDatabaseIcon(type: string) {
   if (type === "starbasedb" || type === "starbase") return StarbaseIcon;
   if (type === "libsql" || type === "turso") return SQLiteIcon;
   if (type === "rqlite") return RqliteIcon;
+  if (type === "board") return ChartBar;
 
   return Database;
 }
@@ -43,6 +51,7 @@ export function getDatabaseVisual(type: string) {
   if (type === "mysql") return MySQLVisual;
   if (type === "sqlite") return SQLiteVisual;
   if (type === "postgres") return GeneralVisual;
+  if (type === "board") return BoardVisual;
 
   return GeneralVisual;
 }
diff --git a/src/lib/utils-datetime.ts b/src/lib/utils-datetime.ts
new file mode 100644
index 00000000..eb940510
--- /dev/null
+++ b/src/lib/utils-datetime.ts
@@ -0,0 +1,40 @@
+// https://stackoverflow.com/a/3177838
+export function timeSince(date: Date) {
+  const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+
+  let interval = seconds / 31536000;
+
+  if (interval > 1) {
+    return Math.floor(interval) + " years";
+  }
+
+  interval = seconds / 2592000;
+  if (interval >= 1 && interval < 2) {
+    return Math.floor(interval) + " month";
+  } else if (interval >= 2) {
+    return Math.floor(interval) + " months";
+  }
+
+  interval = seconds / 86400;
+  if (interval >= 1 && interval < 2) {
+    return Math.floor(interval) + " day";
+  } else if (interval >= 2) {
+    return Math.floor(interval) + " days";
+  }
+
+  interval = seconds / 3600;
+  if (interval >= 1 && interval < 2) {
+    return Math.floor(interval) + " hour";
+  } else if (interval >= 2) {
+    return Math.floor(interval) + " hours";
+  }
+
+  interval = seconds / 60;
+  if (interval >= 1 && interval < 2) {
+    return Math.floor(interval) + " minute";
+  } else if (interval >= 2) {
+    return Math.floor(interval) + " minutes";
+  }
+
+  return Math.floor(seconds) + " seconds";
+}
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index bd04d23a..73982092 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -54,7 +54,7 @@ export interface OuterbaseAPIBase {
   name: string;
   id: string;
   sources: OuterbaseAPISource[];
-  last_analytic_event: OuterbaseAPIAnalyticEvent;
+  last_analytics_event: OuterbaseAPIAnalyticEvent;
 }
 
 export interface OuterbaseAPIWorkspace {
@@ -69,6 +69,7 @@ export interface OuterbaseAPIDashboard {
   base_id: string | null;
   chart_ids: string[];
   created_at: string;
+  updated_at: string;
   id: string;
   model: "dashboard";
   type: "dashboard";

From 7e6cbc3eab7257e6f1a978d200f0fb1d2bf08ece Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Thu, 6 Feb 2025 08:50:40 +0700
Subject: [PATCH 006/106] [Data catalog] Virtual Join (#340)

* moved table colum modal outside model tab

* moved table colum outside model tab

* clean up

* remove yarn lock
---
 package-lock.json                             | 2528 +++++++++++++++++
 package.json                                  |    1 +
 src/components/ui/collapsible.tsx             |   11 +
 src/core/standard-extension.tsx               |    5 +
 .../data-catalog-table-accordion.tsx          |  227 ++
 .../data-catalog-table-column-modal.tsx       |  141 +
 .../data-catalog-table-column.tsx             |  157 +
 .../data-catalog/data-model-tab.tsx           |  317 +--
 .../data-catalog/driver-inmemory.ts           |    8 +-
 src/extensions/data-catalog/driver.tsx        |   21 +-
 .../data-catalog/virtual-column.tsx           |   84 +
 .../data-catalog/virtual-join-modal.tsx       |  146 +
 12 files changed, 3325 insertions(+), 321 deletions(-)
 create mode 100644 src/components/ui/collapsible.tsx
 create mode 100644 src/extensions/data-catalog/data-catalog-table-accordion.tsx
 create mode 100644 src/extensions/data-catalog/data-catalog-table-column-modal.tsx
 create mode 100644 src/extensions/data-catalog/data-catalog-table-column.tsx
 create mode 100644 src/extensions/data-catalog/virtual-column.tsx
 create mode 100644 src/extensions/data-catalog/virtual-join-modal.tsx

diff --git a/package-lock.json b/package-lock.json
index 83989cf0..dad7e23e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-collapsible": "^1.1.2",
         "@radix-ui/react-context-menu": "^2.1.5",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -75,6 +76,7 @@
         "lucide-react": "^0.474.0",
         "next": "15.1.4",
         "next-themes": "^0.4.4",
+        "npm": "^11.1.0",
         "oslo": "^1.1.3",
         "react": "19.0.0",
         "react-dom": "19.0.0",
@@ -4635,6 +4637,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.2.tgz",
+      "integrity": "sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.1.tgz",
@@ -14966,6 +14998,162 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/npm": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/npm/-/npm-11.1.0.tgz",
+      "integrity": "sha512-rPMBrZud26lI/LcjQeLw/K5Hf1apXMKgkpNNEzp0YQYmM877+T1ZNKPcB2hnTi7e6fBNz8xLtMMn/w46fVUqGw==",
+      "bundleDependencies": [
+        "@isaacs/string-locale-compare",
+        "@npmcli/arborist",
+        "@npmcli/config",
+        "@npmcli/fs",
+        "@npmcli/map-workspaces",
+        "@npmcli/package-json",
+        "@npmcli/promise-spawn",
+        "@npmcli/redact",
+        "@npmcli/run-script",
+        "@sigstore/tuf",
+        "abbrev",
+        "archy",
+        "cacache",
+        "chalk",
+        "ci-info",
+        "cli-columns",
+        "fastest-levenshtein",
+        "fs-minipass",
+        "glob",
+        "graceful-fs",
+        "hosted-git-info",
+        "ini",
+        "init-package-json",
+        "is-cidr",
+        "json-parse-even-better-errors",
+        "libnpmaccess",
+        "libnpmdiff",
+        "libnpmexec",
+        "libnpmfund",
+        "libnpmorg",
+        "libnpmpack",
+        "libnpmpublish",
+        "libnpmsearch",
+        "libnpmteam",
+        "libnpmversion",
+        "make-fetch-happen",
+        "minimatch",
+        "minipass",
+        "minipass-pipeline",
+        "ms",
+        "node-gyp",
+        "nopt",
+        "normalize-package-data",
+        "npm-audit-report",
+        "npm-install-checks",
+        "npm-package-arg",
+        "npm-pick-manifest",
+        "npm-profile",
+        "npm-registry-fetch",
+        "npm-user-validate",
+        "p-map",
+        "pacote",
+        "parse-conflict-json",
+        "proc-log",
+        "qrcode-terminal",
+        "read",
+        "semver",
+        "spdx-expression-parse",
+        "ssri",
+        "supports-color",
+        "tar",
+        "text-table",
+        "tiny-relative-date",
+        "treeverse",
+        "validate-npm-package-name",
+        "which"
+      ],
+      "license": "Artistic-2.0",
+      "workspaces": [
+        "docs",
+        "smoke-tests",
+        "mock-globals",
+        "mock-registry",
+        "workspaces/*"
+      ],
+      "dependencies": {
+        "@isaacs/string-locale-compare": "^1.1.0",
+        "@npmcli/arborist": "^9.0.0",
+        "@npmcli/config": "^10.0.1",
+        "@npmcli/fs": "^4.0.0",
+        "@npmcli/map-workspaces": "^4.0.2",
+        "@npmcli/package-json": "^6.1.1",
+        "@npmcli/promise-spawn": "^8.0.2",
+        "@npmcli/redact": "^3.0.0",
+        "@npmcli/run-script": "^9.0.1",
+        "@sigstore/tuf": "^3.0.0",
+        "abbrev": "^3.0.0",
+        "archy": "~1.0.0",
+        "cacache": "^19.0.1",
+        "chalk": "^5.4.1",
+        "ci-info": "^4.1.0",
+        "cli-columns": "^4.0.0",
+        "fastest-levenshtein": "^1.0.16",
+        "fs-minipass": "^3.0.3",
+        "glob": "^10.4.5",
+        "graceful-fs": "^4.2.11",
+        "hosted-git-info": "^8.0.2",
+        "ini": "^5.0.0",
+        "init-package-json": "^8.0.0",
+        "is-cidr": "^5.1.0",
+        "json-parse-even-better-errors": "^4.0.0",
+        "libnpmaccess": "^10.0.0",
+        "libnpmdiff": "^8.0.0",
+        "libnpmexec": "^10.0.0",
+        "libnpmfund": "^7.0.0",
+        "libnpmorg": "^8.0.0",
+        "libnpmpack": "^9.0.0",
+        "libnpmpublish": "^11.0.0",
+        "libnpmsearch": "^9.0.0",
+        "libnpmteam": "^8.0.0",
+        "libnpmversion": "^8.0.0",
+        "make-fetch-happen": "^14.0.3",
+        "minimatch": "^9.0.5",
+        "minipass": "^7.1.1",
+        "minipass-pipeline": "^1.2.4",
+        "ms": "^2.1.2",
+        "node-gyp": "^11.0.0",
+        "nopt": "^8.0.0",
+        "normalize-package-data": "^7.0.0",
+        "npm-audit-report": "^6.0.0",
+        "npm-install-checks": "^7.1.1",
+        "npm-package-arg": "^12.0.1",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-profile": "^11.0.1",
+        "npm-registry-fetch": "^18.0.2",
+        "npm-user-validate": "^3.0.0",
+        "p-map": "^7.0.3",
+        "pacote": "^21.0.0",
+        "parse-conflict-json": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "qrcode-terminal": "^0.12.0",
+        "read": "^4.0.0",
+        "semver": "^7.6.3",
+        "spdx-expression-parse": "^4.0.0",
+        "ssri": "^12.0.0",
+        "supports-color": "^9.4.0",
+        "tar": "^6.2.1",
+        "text-table": "~0.2.0",
+        "tiny-relative-date": "^1.3.0",
+        "treeverse": "^3.0.0",
+        "validate-npm-package-name": "^6.0.0",
+        "which": "^5.0.0"
+      },
+      "bin": {
+        "npm": "bin/npm-cli.js",
+        "npx": "bin/npx-cli.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -14979,6 +15167,2346 @@
         "node": ">=8"
       }
     },
+    "node_modules/npm/node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/@isaacs/string-locale-compare": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/@npmcli/agent": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.1",
+        "lru-cache": "^10.0.1",
+        "socks-proxy-agent": "^8.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/arborist": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/string-locale-compare": "^1.1.0",
+        "@npmcli/fs": "^4.0.0",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "@npmcli/map-workspaces": "^4.0.1",
+        "@npmcli/metavuln-calculator": "^9.0.0",
+        "@npmcli/name-from-folder": "^3.0.0",
+        "@npmcli/node-gyp": "^4.0.0",
+        "@npmcli/package-json": "^6.0.1",
+        "@npmcli/query": "^4.0.0",
+        "@npmcli/redact": "^3.0.0",
+        "@npmcli/run-script": "^9.0.1",
+        "bin-links": "^5.0.0",
+        "cacache": "^19.0.1",
+        "common-ancestor-path": "^1.0.1",
+        "hosted-git-info": "^8.0.0",
+        "json-stringify-nice": "^1.1.4",
+        "lru-cache": "^10.2.2",
+        "minimatch": "^9.0.4",
+        "nopt": "^8.0.0",
+        "npm-install-checks": "^7.1.0",
+        "npm-package-arg": "^12.0.0",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-registry-fetch": "^18.0.1",
+        "pacote": "^21.0.0",
+        "parse-conflict-json": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "proggy": "^3.0.0",
+        "promise-all-reject-late": "^1.0.0",
+        "promise-call-limit": "^3.0.1",
+        "read-package-json-fast": "^4.0.0",
+        "semver": "^7.3.7",
+        "ssri": "^12.0.0",
+        "treeverse": "^3.0.0",
+        "walk-up-path": "^4.0.0"
+      },
+      "bin": {
+        "arborist": "bin/index.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/config": {
+      "version": "10.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/map-workspaces": "^4.0.1",
+        "@npmcli/package-json": "^6.0.1",
+        "ci-info": "^4.0.0",
+        "ini": "^5.0.0",
+        "nopt": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "walk-up-path": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/fs": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/git": {
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/promise-spawn": "^8.0.0",
+        "ini": "^5.0.0",
+        "lru-cache": "^10.0.1",
+        "npm-pick-manifest": "^10.0.0",
+        "proc-log": "^5.0.0",
+        "promise-inflight": "^1.0.1",
+        "promise-retry": "^2.0.1",
+        "semver": "^7.3.5",
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/installed-package-contents": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-bundled": "^4.0.0",
+        "npm-normalize-package-bin": "^4.0.0"
+      },
+      "bin": {
+        "installed-package-contents": "bin/index.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/map-workspaces": {
+      "version": "4.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/name-from-folder": "^3.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "glob": "^10.2.2",
+        "minimatch": "^9.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/metavuln-calculator": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "cacache": "^19.0.0",
+        "json-parse-even-better-errors": "^4.0.0",
+        "pacote": "^21.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/name-from-folder": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/node-gyp": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/package-json": {
+      "version": "6.1.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.0",
+        "glob": "^10.2.2",
+        "hosted-git-info": "^8.0.0",
+        "json-parse-even-better-errors": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.5.3",
+        "validate-npm-package-license": "^3.0.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/promise-spawn": {
+      "version": "8.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/query": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/redact": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/run-script": {
+      "version": "9.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/node-gyp": "^4.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "@npmcli/promise-spawn": "^8.0.0",
+        "node-gyp": "^11.0.0",
+        "proc-log": "^5.0.0",
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/bundle": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/protobuf-specs": "^0.3.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/core": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/protobuf-specs": {
+      "version": "0.3.3",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/sign": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^3.0.0",
+        "@sigstore/core": "^2.0.0",
+        "@sigstore/protobuf-specs": "^0.3.2",
+        "make-fetch-happen": "^14.0.1",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/tuf": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/protobuf-specs": "^0.3.2",
+        "tuf-js": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/verify": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^3.0.0",
+        "@sigstore/core": "^2.0.0",
+        "@sigstore/protobuf-specs": "^0.3.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/@tufjs/canonical-json": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/@tufjs/models": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tufjs/canonical-json": "2.0.0",
+        "minimatch": "^9.0.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/abbrev": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/agent-base": {
+      "version": "7.1.3",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/aproba": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/archy": {
+      "version": "1.0.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/bin-links": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "cmd-shim": "^7.0.0",
+        "npm-normalize-package-bin": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "read-cmd-shim": "^5.0.0",
+        "write-file-atomic": "^6.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/binary-extensions": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/cacache": {
+      "version": "19.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/fs": "^4.0.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^10.2.2",
+        "lru-cache": "^10.0.1",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^2.0.1",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^7.0.2",
+        "ssri": "^12.0.0",
+        "tar": "^7.4.3",
+        "unique-filename": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/chownr": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/minizlib": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/tar": {
+      "version": "7.4.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/cacache/node_modules/yallist": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/chalk": {
+      "version": "5.4.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/chownr": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/ci-info": {
+      "version": "4.1.0",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/cidr-regex": {
+      "version": "4.1.1",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "ip-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/npm/node_modules/cli-columns": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/npm/node_modules/cmd-shim": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/common-ancestor-path": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
+      "version": "2.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/cssesc": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm/node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/npm/node_modules/diff": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/npm/node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/encoding": {
+      "version": "0.1.13",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/npm/node_modules/env-paths": {
+      "version": "2.2.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/npm/node_modules/err-code": {
+      "version": "2.0.3",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/exponential-backoff": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/npm/node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
+    "node_modules/npm/node_modules/foreground-child": {
+      "version": "3.3.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/fs-minipass": {
+      "version": "3.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/glob": {
+      "version": "10.4.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/hosted-git-info": {
+      "version": "8.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^10.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/http-cache-semantics": {
+      "version": "4.1.1",
+      "inBundle": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/npm/node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm/node_modules/ignore-walk": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minimatch": "^9.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/npm/node_modules/ini": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/init-package-json": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/package-json": "^6.1.0",
+        "npm-package-arg": "^12.0.0",
+        "promzard": "^2.0.0",
+        "read": "^4.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4",
+        "validate-npm-package-name": "^6.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/ip-address": {
+      "version": "9.0.5",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "jsbn": "1.1.0",
+        "sprintf-js": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/npm/node_modules/ip-regex": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/is-cidr": {
+      "version": "5.1.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "cidr-regex": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/npm/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/jackspeak": {
+      "version": "3.4.3",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/npm/node_modules/jsbn": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/json-parse-even-better-errors": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/json-stringify-nice": {
+      "version": "1.1.4",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/jsonparse": {
+      "version": "1.3.1",
+      "engines": [
+        "node >= 0.2.0"
+      ],
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/just-diff": {
+      "version": "6.0.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/just-diff-apply": {
+      "version": "5.5.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/libnpmaccess": {
+      "version": "10.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-package-arg": "^12.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmdiff": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^9.0.0",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "binary-extensions": "^3.0.0",
+        "diff": "^7.0.0",
+        "minimatch": "^9.0.4",
+        "npm-package-arg": "^12.0.0",
+        "pacote": "^21.0.0",
+        "tar": "^6.2.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmexec": {
+      "version": "10.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^9.0.0",
+        "@npmcli/run-script": "^9.0.1",
+        "ci-info": "^4.0.0",
+        "npm-package-arg": "^12.0.0",
+        "pacote": "^21.0.0",
+        "proc-log": "^5.0.0",
+        "read": "^4.0.0",
+        "read-package-json-fast": "^4.0.0",
+        "semver": "^7.3.7",
+        "walk-up-path": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmfund": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^9.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmorg": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmpack": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^9.0.0",
+        "@npmcli/run-script": "^9.0.1",
+        "npm-package-arg": "^12.0.0",
+        "pacote": "^21.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmpublish": {
+      "version": "11.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "ci-info": "^4.0.0",
+        "normalize-package-data": "^7.0.0",
+        "npm-package-arg": "^12.0.0",
+        "npm-registry-fetch": "^18.0.1",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.7",
+        "sigstore": "^3.0.0",
+        "ssri": "^12.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmsearch": {
+      "version": "9.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmteam": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^18.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/libnpmversion": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.1",
+        "@npmcli/run-script": "^9.0.1",
+        "json-parse-even-better-errors": "^4.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.7"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/make-fetch-happen": {
+      "version": "14.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/agent": "^3.0.0",
+        "cacache": "^19.0.1",
+        "http-cache-semantics": "^4.1.1",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^4.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^1.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "ssri": "^12.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/make-fetch-happen/node_modules/negotiator": {
+      "version": "1.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/npm/node_modules/minimatch": {
+      "version": "9.0.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/minipass": {
+      "version": "7.1.2",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-collect": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-fetch": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      },
+      "optionalDependencies": {
+        "encoding": "^0.1.13"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-fetch/node_modules/minizlib": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-flush": {
+      "version": "1.0.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-sized": {
+      "version": "1.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/minizlib": {
+      "version": "2.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/mute-stream": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp": {
+      "version": "11.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "glob": "^10.3.10",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^14.0.3",
+        "nopt": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "tar": "^7.4.3",
+        "which": "^5.0.0"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/chownr": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/minizlib": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/tar": {
+      "version": "7.4.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/node-gyp/node_modules/yallist": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm/node_modules/nopt": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/nopt/node_modules/abbrev": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/normalize-package-data": {
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "hosted-git-info": "^8.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-audit-report": {
+      "version": "6.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-bundled": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-normalize-package-bin": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-install-checks": {
+      "version": "7.1.1",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "semver": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-normalize-package-bin": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-package-arg": {
+      "version": "12.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "hosted-git-info": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-name": "^6.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-packlist": {
+      "version": "10.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "ignore-walk": "^7.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-pick-manifest": {
+      "version": "10.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-install-checks": "^7.1.0",
+        "npm-normalize-package-bin": "^4.0.0",
+        "npm-package-arg": "^12.0.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-profile": {
+      "version": "11.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-registry-fetch": "^18.0.0",
+        "proc-log": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-registry-fetch": {
+      "version": "18.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/redact": "^3.0.0",
+        "jsonparse": "^1.3.1",
+        "make-fetch-happen": "^14.0.0",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^4.0.0",
+        "minizlib": "^3.0.1",
+        "npm-package-arg": "^12.0.0",
+        "proc-log": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/npm-registry-fetch/node_modules/minizlib": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.4",
+        "rimraf": "^5.0.5"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/npm/node_modules/npm-user-validate": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/p-map": {
+      "version": "7.0.3",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/npm/node_modules/pacote": {
+      "version": "21.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^6.0.0",
+        "@npmcli/installed-package-contents": "^3.0.0",
+        "@npmcli/package-json": "^6.0.0",
+        "@npmcli/promise-spawn": "^8.0.0",
+        "@npmcli/run-script": "^9.0.0",
+        "cacache": "^19.0.0",
+        "fs-minipass": "^3.0.0",
+        "minipass": "^7.0.2",
+        "npm-package-arg": "^12.0.0",
+        "npm-packlist": "^10.0.0",
+        "npm-pick-manifest": "^10.0.0",
+        "npm-registry-fetch": "^18.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "sigstore": "^3.0.0",
+        "ssri": "^12.0.0",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "pacote": "bin/index.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm/node_modules/parse-conflict-json": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "json-parse-even-better-errors": "^4.0.0",
+        "just-diff": "^6.0.0",
+        "just-diff-apply": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm/node_modules/proc-log": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/proggy": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/promise-all-reject-late": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/promise-call-limit": {
+      "version": "3.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/promise-inflight": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/promise-retry": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/promzard": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "read": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/qrcode-terminal": {
+      "version": "0.12.0",
+      "inBundle": true,
+      "bin": {
+        "qrcode-terminal": "bin/qrcode-terminal.js"
+      }
+    },
+    "node_modules/npm/node_modules/read": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "mute-stream": "^2.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/read-cmd-shim": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/read-package-json-fast": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "json-parse-even-better-errors": "^4.0.0",
+        "npm-normalize-package-bin": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/retry": {
+      "version": "0.12.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/npm/node_modules/rimraf": {
+      "version": "5.0.10",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^10.3.7"
+      },
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/npm/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "inBundle": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/sigstore": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^3.0.0",
+        "@sigstore/core": "^2.0.0",
+        "@sigstore/protobuf-specs": "^0.3.2",
+        "@sigstore/sign": "^3.0.0",
+        "@sigstore/tuf": "^3.0.0",
+        "@sigstore/verify": "^2.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/socks": {
+      "version": "2.8.3",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^9.0.5",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-correct/node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "inBundle": true,
+      "license": "CC-BY-3.0"
+    },
+    "node_modules/npm/node_modules/spdx-expression-parse": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/spdx-license-ids": {
+      "version": "3.0.21",
+      "inBundle": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/npm/node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "inBundle": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/npm/node_modules/ssri": {
+      "version": "12.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/supports-color": {
+      "version": "9.4.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/tar": {
+      "version": "6.2.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/tar/node_modules/minipass": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm/node_modules/text-table": {
+      "version": "0.2.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/tiny-relative-date": {
+      "version": "1.3.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/treeverse": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/tuf-js": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tufjs/models": "3.0.1",
+        "debug": "^4.3.6",
+        "make-fetch-happen": "^14.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/unique-filename": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "unique-slug": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/unique-slug": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/validate-npm-package-license/node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/validate-npm-package-name": {
+      "version": "6.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/walk-up-path": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/npm/node_modules/which": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/which/node_modules/isexe": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "5.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/npm/node_modules/write-file-atomic": {
+      "version": "6.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/npm/node_modules/yallist": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
     "node_modules/nwsapi": {
       "version": "2.2.16",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.16.tgz",
diff --git a/package.json b/package.json
index 3fb9fa50..30af237a 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
new file mode 100644
index 00000000..1fe76f5d
--- /dev/null
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };
diff --git a/src/core/standard-extension.tsx b/src/core/standard-extension.tsx
index 3923b6f2..e96f186b 100644
--- a/src/core/standard-extension.tsx
+++ b/src/core/standard-extension.tsx
@@ -3,6 +3,8 @@
  */
 
 import ColumnDescriptorExtension from "@/extensions/column-descriptor";
+import DataCatalogExtension from "@/extensions/data-catalog";
+import DataCatalogInmemoryDriver from "@/extensions/data-catalog/driver-inmemory";
 import QueryHistoryConsoleLogExtension from "@/extensions/query-console-log";
 import TriggerEditorExtension from "@/extensions/trigger-editor";
 import ViewEditorExtension from "@/extensions/view-editor";
@@ -12,6 +14,9 @@ export function createStandardExtensions() {
     new QueryHistoryConsoleLogExtension(),
     new ViewEditorExtension(),
     new ColumnDescriptorExtension(),
+    new DataCatalogExtension(
+      new DataCatalogInmemoryDriver({}, [], { delay: 1000 })
+    ),
   ];
 }
 
diff --git a/src/extensions/data-catalog/data-catalog-table-accordion.tsx b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
new file mode 100644
index 00000000..6995c573
--- /dev/null
+++ b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
@@ -0,0 +1,227 @@
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { DatabaseTableSchema } from "@/drivers/base-driver";
+import { cn } from "@/lib/utils";
+import { ChevronDown, Edit3, EyeOff, LucideMoreHorizontal } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import DataCatalogTableColumn from "./data-catalog-table-column";
+import DataCatalogDriver, { VirtualJoinColumn } from "./driver";
+import VirtaulJoinColumn from "./virtual-column";
+import VirtualJoinModal from "./virtual-join-modal";
+
+interface DataCatalogTableAccordionProps {
+  table: DatabaseTableSchema;
+  driver: DataCatalogDriver;
+  search?: string;
+  columnName?: string;
+  hasDefinitionOnly?: boolean;
+}
+
+export default function DataCatalogTableAccordion({
+  table,
+  driver,
+  search,
+  hasDefinitionOnly,
+}: DataCatalogTableAccordionProps) {
+  const modelTable = driver.getTable(table.schemaName, table.tableName!);
+  const [open, setOpen] = useState(true);
+  const [virtaulJoinColumn, setVirtualColumn] = useState<VirtualJoinColumn>();
+  const [openVirtualModal, setOpenVirtaulModal] = useState(false);
+
+  const [definition, setDefinition] = useState(modelTable?.definition || "");
+
+  const onUpdateTable = useCallback(() => {
+    if (
+      definition &&
+      definition.trim() &&
+      definition !== modelTable?.definition
+    ) {
+      driver.updateTable(table?.schemaName, table.tableName!, {
+        ...modelTable,
+        definition,
+      });
+    }
+  }, [driver, table, definition, modelTable]);
+
+  const onDeletRelationship = useCallback(
+    (id: string) => {
+      const newVirtualJoinColumn = modelTable?.virtualJoin?.filter(
+        (col) => col.id !== id
+      );
+      driver
+        .updateTable(table?.schemaName, table.tableName!, {
+          ...modelTable,
+          virtualJoin: newVirtualJoinColumn,
+        })
+        .then(() => {
+          console.log("deleted sucessful");
+        });
+    },
+    [driver, modelTable, table]
+  );
+
+  // Check if any of the column match?
+  const matchColumns = useMemo(() => {
+    if (!search || search.toLowerCase() === table.tableName!.toLowerCase()) {
+      return table.columns;
+    }
+    return table.columns.filter((column) =>
+      column.name.toLowerCase().includes(search.toLowerCase())
+    );
+  }, [search, table]);
+
+  const matchedTableName = useMemo(() => {
+    if (search) {
+      return table.tableName!.toLowerCase().includes(search?.toLowerCase());
+    }
+    return true;
+  }, [search, table]);
+
+  // this will work only toggle check box
+  if (hasDefinitionOnly) {
+    const columnsDefinition = table.columns
+      .map((col) => {
+        const modelColumn = driver.getColumn(
+          table.schemaName,
+          table.tableName!,
+          col.name
+        );
+        return !!modelColumn?.definition;
+      })
+      .filter(Boolean);
+
+    if (columnsDefinition.length === 0) {
+      return null;
+    }
+  }
+
+  if (!matchedTableName && matchColumns.length === 0 && search) {
+    return null;
+  }
+
+  return (
+    <>
+      <Dialog open={openVirtualModal} onOpenChange={setOpenVirtaulModal}>
+        <DialogContent>
+          <VirtualJoinModal
+            driver={driver}
+            column={virtaulJoinColumn}
+            tableName={table.tableName!}
+            schemaName={table.schemaName}
+            onClose={() => {
+              setOpenVirtaulModal(false);
+              setVirtualColumn(undefined);
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <div className="rounded-xl border border-neutral-200 bg-white/50 p-3 hover:border-neutral-300 hover:bg-white dark:border-neutral-800/50 dark:bg-neutral-900 dark:text-white dark:hover:border-neutral-800 dark:hover:bg-neutral-800">
+          <div className="flex p-2">
+            <div>
+              <div className="font-bold">{table.tableName}</div>
+              <input
+                value={definition}
+                placeholder="No description"
+                onBlur={onUpdateTable}
+                onChange={(e) => {
+                  e.preventDefault();
+                  setDefinition(e.currentTarget.value);
+                }}
+                className="h-[30px] w-[150px] p-0 text-[13px] focus-visible:outline-none"
+              />
+            </div>
+            <CollapsibleTrigger className="flex-1" />
+            <div className="flex items-center gap-2">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button size="icon" variant="ghost">
+                    <LucideMoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="p-2">
+                  <DropdownMenuItem
+                    className="gap-5"
+                    onClick={() => {
+                      setOpen(true);
+                    }}
+                  >
+                    Edit Metadata
+                    <div className="flex-1" />
+                    <Edit3 className="h-4 w-4" />
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={() => setOpenVirtaulModal(true)}
+                    className="gap-5"
+                  >
+                    Add Virtaul Join
+                    <div className="flex-1" />
+                    <EyeOff className="h-4 w-4" />
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <CollapsibleTrigger>
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 transform transition-transform duration-200",
+                    open ? "rotate-180" : "rotate-0"
+                  )}
+                />
+              </CollapsibleTrigger>
+            </div>
+          </div>
+          <CollapsibleContent>
+            {matchColumns.map((column) => {
+              return (
+                <DataCatalogTableColumn
+                  key={column.name}
+                  table={table}
+                  column={column}
+                  driver={driver}
+                  search={search}
+                  hasDefinitionOnly={hasDefinitionOnly}
+                />
+              );
+            })}
+            {modelTable?.virtualJoin && modelTable.virtualJoin.length > 0 && (
+              <div className="rounded-xl border border-neutral-200 p-3 hover:bg-white dark:border-neutral-800/50 dark:bg-neutral-950 dark:text-white">
+                <div className="p-3 font-bold">Relationship</div>
+                <div className="">
+                  {modelTable.virtualJoin?.map((column) => {
+                    return (
+                      <VirtaulJoinColumn
+                        key={column.id}
+                        {...column}
+                        onEditRelationship={() => {
+                          setOpenVirtaulModal(true);
+                          setVirtualColumn(column);
+                        }}
+                        onDeletRelatinship={() => {
+                          onDeletRelationship(column.id);
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </CollapsibleContent>
+        </div>
+      </Collapsible>
+    </>
+  );
+}
diff --git a/src/extensions/data-catalog/data-catalog-table-column-modal.tsx b/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
new file mode 100644
index 00000000..a563843e
--- /dev/null
+++ b/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
@@ -0,0 +1,141 @@
+import { Button } from "@/components/ui/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useDatabaseDriver } from "@/context/driver-provider";
+import { MagicWand } from "@phosphor-icons/react";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+import DataCatalogDriver from "./driver";
+
+interface DataCatalogTableColumnModalProps {
+  driver: DataCatalogDriver;
+  schemaName: string;
+  tableName: string;
+  columnName: string;
+  onClose: () => void;
+}
+
+export default function DataCatalogTableColumnModal({
+  driver,
+  schemaName,
+  tableName,
+  columnName,
+  onClose,
+}: DataCatalogTableColumnModalProps) {
+  const modelColumn = driver.getColumn(schemaName, tableName, columnName);
+  const { databaseDriver } = useDatabaseDriver();
+
+  const [definition, setDefinition] = useState(modelColumn?.definition ?? "");
+  const [samples, setSamples] = useState(
+    (modelColumn?.samples ?? []).join(",")
+  );
+
+  const [loading, setLoading] = useState(false);
+  const [sampleLoading, setSampleLoading] = useState(false);
+
+  const onAutomaticSampleData = useCallback(() => {
+    setSampleLoading(true);
+    databaseDriver
+      .query(
+        `SELECT DISTINCT ${databaseDriver.escapeId(columnName)} FROM ${databaseDriver.escapeId(schemaName)}.${databaseDriver.escapeId(tableName)} LIMIT 10`
+      )
+      .then((r) => {
+        setSamples(r.rows.map((row) => row[columnName]).join(", "));
+      })
+      .finally(() => setSampleLoading(false));
+  }, [databaseDriver, columnName, schemaName, tableName]);
+
+  const onSaveUpdateColumn = useCallback(() => {
+    setLoading(true);
+
+    driver
+      .updateColumn(schemaName, tableName, columnName, {
+        definition,
+        samples:
+          samples && samples.trim()
+            ? samples.split(",").map((s) => s.trim())
+            : [],
+        hideFromEzql: modelColumn?.hideFromEzql ?? false,
+      })
+      .then((r) => {
+        console.log(r);
+      })
+      .finally(() => {
+        setLoading(false);
+        onClose();
+      });
+  }, [
+    driver,
+    modelColumn,
+    samples,
+    columnName,
+    onClose,
+    schemaName,
+    tableName,
+    definition,
+  ]);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Column Metadata</DialogTitle>
+        <DialogDescription>
+          Add metadata to this column to help your team and AI understand its
+          purpose. Include detailed descriptions and examples of sample data to
+          make the data more clear and easier to use.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="mt-2 flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <Label>Column Description</Label>
+          <Textarea
+            rows={4}
+            value={definition}
+            onChange={(e) => setDefinition(e.currentTarget.value)}
+            placeholder="Please provide the definition of a column. This is intended to enhance AI functionality."
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between gap-2">
+            <Label>Sample Data</Label>
+            <div>
+              <Button
+                size="sm"
+                variant={"outline"}
+                onClick={onAutomaticSampleData}
+              >
+                {sampleLoading ? (
+                  <LucideLoader className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <MagicWand className="mr-2 h-4 w-4" />
+                )}
+                Automatically Generate Sample Data
+              </Button>
+            </div>
+          </div>
+          <Textarea
+            rows={4}
+            value={samples}
+            onChange={(e) => setSamples(e.currentTarget.value)}
+            placeholder="Please provide the definition of a column. This is intended to enhance AI functionality."
+          />
+        </div>
+      </div>
+
+      <DialogFooter>
+        <Button disabled={loading} onClick={onSaveUpdateColumn}>
+          {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
+          Save
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
diff --git a/src/extensions/data-catalog/data-catalog-table-column.tsx b/src/extensions/data-catalog/data-catalog-table-column.tsx
new file mode 100644
index 00000000..e8b5994e
--- /dev/null
+++ b/src/extensions/data-catalog/data-catalog-table-column.tsx
@@ -0,0 +1,157 @@
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import HighlightText from "@/components/ui/highlight-text";
+import {
+  DatabaseTableColumn,
+  DatabaseTableSchema,
+} from "@/drivers/base-driver";
+import { cn } from "@/lib/utils";
+import {
+  Edit3,
+  EyeOff,
+  LucideMoreHorizontal,
+  ToggleLeftIcon,
+  ToggleRightIcon,
+} from "lucide-react";
+import { useCallback, useState } from "react";
+import DataCatalogTableColumnModal from "./data-catalog-table-column-modal";
+import DataCatalogDriver from "./driver";
+
+interface DataCatalogTableColumnProps {
+  table: DatabaseTableSchema;
+  column: DatabaseTableColumn;
+  driver: DataCatalogDriver;
+  search?: string;
+  hasDefinitionOnly?: boolean;
+}
+
+export default function DataCatalogTableColumn({
+  column,
+  table,
+  driver,
+  search,
+  hasDefinitionOnly,
+}: DataCatalogTableColumnProps) {
+  const modelColumn = driver.getColumn(
+    table.schemaName,
+    table.tableName!,
+    column.name
+  );
+
+  const definition = modelColumn?.definition;
+  const sampleData = modelColumn?.samples ?? [];
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [hideFromEzql, setHideFromEzql] = useState<boolean>(() => {
+    return modelColumn?.hideFromEzql || true;
+  });
+
+  const onToggleHideFromEzql = useCallback(() => {
+    setHideFromEzql(!hideFromEzql);
+    setLoading(true);
+    driver
+      .updateColumn(table.schemaName, table.tableName!, column.name, {
+        ...modelColumn!,
+        hideFromEzql: !hideFromEzql,
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [driver, table, hideFromEzql, modelColumn, column]);
+
+  if (hasDefinitionOnly && !definition) {
+    return null;
+  }
+
+  return (
+    <div
+      key={column.name}
+      className={cn(
+        "border-accent flex border-t pt-2 pb-2 text-sm",
+        hideFromEzql ? "opacity-100" : "opacity-50"
+      )}
+    >
+      <Button
+        disabled={loading}
+        onClick={onToggleHideFromEzql}
+        size={"icon"}
+        variant="ghost"
+      >
+        {hideFromEzql ? (
+          <ToggleRightIcon className="text-black dark:text-green-500" />
+        ) : (
+          <ToggleLeftIcon className="text-gray-400" />
+        )}
+      </Button>
+
+      <div className="flex w-[150px] items-center p-2">
+        <HighlightText text={column.name} highlight={search} />
+      </div>
+      <div className="text-muted-foreground flex-1 p-2">
+        {definition || "No description"}
+      </div>
+      <div className="w-[150px] p-2">
+        {sampleData.length > 0 && (
+          <span className="bg-secondary rounded p-1 px-2 text-xs">
+            {sampleData.length} sample data
+          </span>
+        )}
+      </div>
+      {
+        //=================
+        // Dropdown menu
+        //=================
+      }
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild disabled={!hideFromEzql}>
+          <Button size="icon" variant="ghost">
+            <LucideMoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="p-2">
+          <DropdownMenuItem
+            className="gap-5"
+            onClick={() => {
+              setOpen(true);
+            }}
+          >
+            Edit Column
+            <div className="flex-1" />
+            <Edit3 className="h-4 w-4" />
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="gap-5" onClick={onToggleHideFromEzql}>
+            Hide from EZQL
+            <div className="flex-1" />
+            <EyeOff className="h-4 w-4" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {
+        //=================
+        // Column metadata modal
+        //=================
+      }
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          {open && (
+            <DataCatalogTableColumnModal
+              driver={driver}
+              schemaName={table.schemaName}
+              tableName={table.tableName!}
+              columnName={column.name}
+              onClose={() => setOpen(false)}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/src/extensions/data-catalog/data-model-tab.tsx b/src/extensions/data-catalog/data-model-tab.tsx
index 3e1d85eb..1d2fb756 100644
--- a/src/extensions/data-catalog/data-model-tab.tsx
+++ b/src/extensions/data-catalog/data-model-tab.tsx
@@ -1,324 +1,13 @@
 import SchemaNameSelect from "@/components/gui/schema-editor/schema-name-select";
 import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
-import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import HighlightText from "@/components/ui/highlight-text";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
 import { useConfig } from "@/context/config-provider";
-import { useDatabaseDriver } from "@/context/driver-provider";
 import { useSchema } from "@/context/schema-provider";
-import {
-  DatabaseTableColumn,
-  DatabaseTableSchema,
-} from "@/drivers/base-driver";
-import { MagicWand } from "@phosphor-icons/react";
-import { LucideLoader, LucideMoreHorizontal } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
+import { DatabaseTableSchema } from "@/drivers/base-driver";
+import { useMemo, useState } from "react";
 import DataCatalogExtension from ".";
-import DataCatalogDriver from "./driver";
-
-interface DataCatalogTableColumnModalProps {
-  driver: DataCatalogDriver;
-  schemaName: string;
-  tableName: string;
-  columnName: string;
-  onClose: () => void;
-}
-
-function DataCatalogTableColumnModal({
-  driver,
-  schemaName,
-  tableName,
-  columnName,
-  onClose,
-}: DataCatalogTableColumnModalProps) {
-  const modelColumn = driver.getColumn(schemaName, tableName, columnName);
-  const { databaseDriver } = useDatabaseDriver();
-
-  const [definition, setDefinition] = useState(modelColumn?.definition ?? "");
-  const [samples, setSamples] = useState(
-    (modelColumn?.samples ?? []).join(",")
-  );
-
-  const [loading, setLoading] = useState(false);
-  const [sampleLoading, setSampleLoading] = useState(false);
-
-  const onAutomaticSampleData = useCallback(() => {
-    setSampleLoading(true);
-    databaseDriver
-      .query(
-        `SELECT DISTINCT ${databaseDriver.escapeId(columnName)} FROM ${databaseDriver.escapeId(schemaName)}.${databaseDriver.escapeId(tableName)} LIMIT 10`
-      )
-      .then((r) => {
-        setSamples(r.rows.map((row) => row[columnName]).join(", "));
-      })
-      .finally(() => setSampleLoading(false));
-  }, [databaseDriver, columnName, schemaName, tableName]);
-
-  const onSaveUpdateColumn = useCallback(() => {
-    setLoading(true);
-
-    driver
-      .updateColumn(schemaName, tableName, columnName, {
-        definition,
-        samples:
-          samples && samples.trim()
-            ? samples.split(",").map((s) => s.trim())
-            : [],
-        hideFromEzql: modelColumn?.hideFromEzql ?? false,
-      })
-      .then()
-      .finally(() => {
-        setLoading(false);
-        onClose();
-      });
-  }, [
-    driver,
-    modelColumn,
-    samples,
-    columnName,
-    onClose,
-    schemaName,
-    tableName,
-    definition,
-  ]);
-
-  return (
-    <>
-      <DialogHeader>
-        <DialogTitle>Column Metadata</DialogTitle>
-        <DialogDescription>
-          Add metadata to this column to help your team and AI understand its
-          purpose. Include detailed descriptions and examples of sample data to
-          make the data more clear and easier to use.
-        </DialogDescription>
-      </DialogHeader>
-
-      <div className="mt-2 flex flex-col gap-4">
-        <div className="flex flex-col gap-2">
-          <Label>Column Description</Label>
-          <Textarea
-            rows={4}
-            value={definition}
-            onChange={(e) => setDefinition(e.currentTarget.value)}
-            placeholder="Please provide the definition of a column. This is intended to enhance AI functionality."
-          />
-        </div>
-
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center justify-between gap-2">
-            <Label>Sample Data</Label>
-            <div>
-              <Button
-                size="sm"
-                variant={"outline"}
-                onClick={onAutomaticSampleData}
-              >
-                {sampleLoading ? (
-                  <LucideLoader className="mr-2 h-4 w-4 animate-spin" />
-                ) : (
-                  <MagicWand className="mr-2 h-4 w-4" />
-                )}
-                Automatically Generate Sample Data
-              </Button>
-            </div>
-          </div>
-          <Textarea
-            rows={4}
-            value={samples}
-            onChange={(e) => setSamples(e.currentTarget.value)}
-            placeholder="Please provide the definition of a column. This is intended to enhance AI functionality."
-          />
-        </div>
-      </div>
-
-      <DialogFooter>
-        <Button disabled={loading} onClick={onSaveUpdateColumn}>
-          {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
-          Save
-        </Button>
-      </DialogFooter>
-    </>
-  );
-}
-
-interface DataCatalogTableColumnProps {
-  table: DatabaseTableSchema;
-  column: DatabaseTableColumn;
-  driver: DataCatalogDriver;
-  search?: string;
-  hasDefinitionOnly?: boolean;
-}
-
-function DataCatalogTableColumn({
-  column,
-  table,
-  driver,
-  search,
-  hasDefinitionOnly,
-}: DataCatalogTableColumnProps) {
-  const modelColumn = driver.getColumn(
-    table.schemaName,
-    table.tableName!,
-    column.name
-  );
-
-  const definition = modelColumn?.definition;
-  const sampleData = modelColumn?.samples ?? [];
-
-  const [open, setOpen] = useState(false);
-
-  if (hasDefinitionOnly && !definition) {
-    return null;
-  }
-
-  return (
-    <div key={column.name} className="flex border-t">
-      <div className="flex w-[150px] items-center p-2">
-        <HighlightText text={column.name} highlight={search} />
-      </div>
-      <div className="text-muted-foreground flex-1 p-2">
-        {definition || "No description"}
-      </div>
-      <div className="w-[150px] p-2">
-        {sampleData.length > 0 && (
-          <span className="bg-secondary rounded p-1 px-2 text-xs">
-            {sampleData.length} sample data
-          </span>
-        )}
-      </div>
-      <div className="flex w-[50px] items-center justify-center p-2">
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogTrigger>
-            <LucideMoreHorizontal className="h-4 w-4" />
-          </DialogTrigger>
-          <DialogContent>
-            {open && (
-              <DataCatalogTableColumnModal
-                driver={driver}
-                schemaName={table.schemaName}
-                tableName={table.tableName!}
-                columnName={column.name}
-                onClose={() => setOpen(false)}
-              />
-            )}
-          </DialogContent>
-        </Dialog>
-      </div>
-    </div>
-  );
-}
-
-interface DataCatalogTableAccordionProps {
-  table: DatabaseTableSchema;
-  driver: DataCatalogDriver;
-  search?: string;
-  columnName?: string;
-  hasDefinitionOnly?: boolean;
-}
-
-function DataCatalogTableAccordion({
-  table,
-  driver,
-  search,
-  hasDefinitionOnly,
-}: DataCatalogTableAccordionProps) {
-  const modelTable = driver.getTable(table.schemaName, table.tableName!);
-
-  const [definition, setDefinition] = useState(modelTable?.definition || "");
-
-  const onUpdateTable = useCallback(() => {
-    if (
-      definition &&
-      definition.trim() &&
-      definition !== modelTable?.definition
-    ) {
-      driver.updateTable(table?.schemaName, table.tableName!, {
-        definition,
-      });
-    }
-  }, [driver, table, definition, modelTable]);
-
-  // Check if any of the column match?
-  const matchColumns = useMemo(() => {
-    if (!search || search.toLowerCase() === table.tableName!.toLowerCase()) {
-      return table.columns;
-    }
-    return table.columns.filter((column) =>
-      column.name.toLowerCase().includes(search.toLowerCase())
-    );
-  }, [search, table]);
-
-  const matchedTableName = useMemo(() => {
-    if (search) {
-      return table.tableName!.toLowerCase().includes(search?.toLowerCase());
-    }
-    return true;
-  }, [search, table]);
-
-  // this will work only toggle check box
-  if (hasDefinitionOnly) {
-    const columnsDefinition = table.columns
-      .map((col) => {
-        const modelColumn = driver.getColumn(
-          table.schemaName,
-          table.tableName!,
-          col.name
-        );
-        return !!modelColumn?.definition;
-      })
-      .filter(Boolean);
-
-    if (columnsDefinition.length === 0) {
-      return null;
-    }
-  }
-
-  if (!matchedTableName && matchColumns.length === 0 && search) {
-    return null;
-  }
-
-  return (
-    <div className="rounded-lg border text-sm">
-      <div className="p-2">
-        <div className="font-bold">{table.tableName}</div>
-        <input
-          value={definition}
-          placeholder="No description"
-          onBlur={onUpdateTable}
-          onChange={(e) => {
-            e.preventDefault();
-            setDefinition(e.currentTarget.value);
-          }}
-          className="h-[30px] w-[150px] p-0 text-[13px] focus-visible:outline-none"
-        />
-      </div>
-      {matchColumns.map((column) => {
-        return (
-          <DataCatalogTableColumn
-            key={column.name}
-            table={table}
-            column={column}
-            driver={driver}
-            search={search}
-            hasDefinitionOnly={hasDefinitionOnly}
-          />
-        );
-      })}
-    </div>
-  );
-}
+import DataCatalogTableAccordion from "./data-catalog-table-accordion";
 
 export default function DataCatalogModelTab() {
   const { currentSchemaName, schema } = useSchema();
diff --git a/src/extensions/data-catalog/driver-inmemory.ts b/src/extensions/data-catalog/driver-inmemory.ts
index 137b8e3e..102db4e2 100644
--- a/src/extensions/data-catalog/driver-inmemory.ts
+++ b/src/extensions/data-catalog/driver-inmemory.ts
@@ -108,11 +108,15 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
         tableName: normalizedTableName,
         columns: {},
         definition: "",
+        virtualJoin: [],
       };
     }
-
     const table = schemas[normalizedTableName];
-    schemas[normalizedTableName] = { ...table, ...data };
+    schemas[normalizedTableName] = {
+      ...table,
+      ...data,
+      
+    };
 
     return schemas[normalizedTableName];
   }
diff --git a/src/extensions/data-catalog/driver.tsx b/src/extensions/data-catalog/driver.tsx
index eb171c3f..ea6acb37 100644
--- a/src/extensions/data-catalog/driver.tsx
+++ b/src/extensions/data-catalog/driver.tsx
@@ -1,11 +1,20 @@
+export interface VirtualJoinColumn {
+  id: string;
+  schema: string;
+  tableName: string;
+  columnName: string;
+  virtualKeyColumn: string;
+  virtualKeySchema: string;
+  virtualKeyTable: string;
+  flags?: {
+    isActive: boolean;
+    isVirtual: boolean;
+  };
+}
 export interface DataCatalogModelColumnInput {
   hideFromEzql: boolean;
   definition: string;
   samples: string[];
-  virtualJoin?: {
-    tableName: string;
-    columnName: string;
-  };
 }
 
 export interface DataCatalogModelColumn extends DataCatalogModelColumnInput {
@@ -13,7 +22,8 @@ export interface DataCatalogModelColumn extends DataCatalogModelColumnInput {
 }
 
 export interface DataCatalogModelTableInput {
-  definition: string;
+  definition?: string;
+  virtualJoin?: VirtualJoinColumn[];
 }
 export interface DataCatalogTermDefinition extends DataCatalogModelTableInput {
   id: string;
@@ -24,6 +34,7 @@ export interface DataCatalogModelTable extends DataCatalogModelTableInput {
   schemaName: string;
   tableName: string;
   columns: Record<string, DataCatalogModelColumn>;
+  virtualJoin?: VirtualJoinColumn[];
 }
 
 export type DataCatalogSchemas = Record<
diff --git a/src/extensions/data-catalog/virtual-column.tsx b/src/extensions/data-catalog/virtual-column.tsx
new file mode 100644
index 00000000..77295e59
--- /dev/null
+++ b/src/extensions/data-catalog/virtual-column.tsx
@@ -0,0 +1,84 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import {
+  Edit3,
+  LucideMoreHorizontal,
+  ToggleLeftIcon,
+  ToggleRightIcon,
+  Trash,
+} from "lucide-react";
+import { useState } from "react";
+import { VirtualJoinColumn } from "./driver";
+
+interface Props extends VirtualJoinColumn {
+  onDeletRelatinship: () => void;
+  onEditRelationship: () => void;
+}
+
+export default function VirtaulJoinColumn({
+  virtualKeyColumn,
+  virtualKeySchema,
+  virtualKeyTable,
+  flags,
+  onEditRelationship,
+  onDeletRelatinship,
+}: Props) {
+  const [isActive, setIsActive] = useState<boolean>(flags?.isActive || true);
+  return (
+    <div
+      className={cn(
+        "border-accent flex border-t pt-2 pb-2 text-sm",
+        isActive ? "opacity-100" : "opacity-50"
+      )}
+    >
+      <Button
+        onClick={() => setIsActive(!isActive)}
+        size={"icon"}
+        variant="ghost"
+      >
+        {isActive ? (
+          <ToggleRightIcon className="text-black dark:text-green-500" />
+        ) : (
+          <ToggleLeftIcon className="text-gray-400" />
+        )}
+      </Button>
+
+      <div className="flex w-[150px] items-center p-2">{virtualKeyColumn}</div>
+      <div className="flex w-[150px] items-center p-2">{virtualKeySchema}</div>
+      <div className="flex w-[150px] items-center p-2">{virtualKeyTable}</div>
+      <div className="flex-1" />
+      {
+        //=================
+        // Dropdown menu
+        //=================
+      }
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button size="icon" variant="ghost">
+            <LucideMoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="p-2">
+          <DropdownMenuItem className="gap-5" onClick={onEditRelationship}>
+            Edit Relationship
+            <div className="flex-1" />
+            <Edit3 className="h-4 w-4" />
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="gap-5" onClick={onDeletRelatinship}>
+            Delete Virtual FK
+            <div className="flex-1" />
+            <Trash className="h-4 w-4" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/src/extensions/data-catalog/virtual-join-modal.tsx b/src/extensions/data-catalog/virtual-join-modal.tsx
new file mode 100644
index 00000000..c210694b
--- /dev/null
+++ b/src/extensions/data-catalog/virtual-join-modal.tsx
@@ -0,0 +1,146 @@
+import TableColumnCombobox from "@/components/gui/table-combobox/TableColumnCombobox";
+import TableCombobox from "@/components/gui/table-combobox/TableCombobox";
+import { Button } from "@/components/ui/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { LucideLoader } from "lucide-react";
+import { useState } from "react";
+import DataCatalogDriver, {
+  DataCatalogModelTableInput,
+  VirtualJoinColumn,
+} from "./driver";
+
+interface Props {
+  driver: DataCatalogDriver;
+  schemaName: string;
+  tableName: string;
+  column?: VirtualJoinColumn;
+  onClose: () => void;
+}
+export default function VirtualJoinModal({
+  tableName,
+  schemaName,
+  driver,
+  column,
+  onClose,
+}: Props) {
+  const [loading, setLoading] = useState(false);
+  const [virtualKeySchema, setVirtualKeySchema] = useState<string | undefined>(
+    column?.virtualKeySchema
+  );
+
+  const [virtualKeyTable, setVirtualKeyTable] = useState<string | undefined>(
+    column?.virtualKeyTable
+  );
+  const [virtualKeyColumn, setVirtualKeyColumn] = useState<string | undefined>(
+    column?.virtualKeyColumn
+  );
+
+  const createVirtualJoin = () => {
+    setLoading(true);
+
+    const modelTable = driver.getTable(schemaName, tableName);
+    const virtualJoin = [...(modelTable?.virtualJoin || [])];
+
+    const newVirtualJoin = {
+      id: column?.id || new Date().toISOString(),
+      schema: schemaName,
+      tableName: tableName,
+      columnName: virtualKeyColumn || "",
+      virtualKeyColumn: virtualKeyColumn || "",
+      virtualKeySchema: virtualKeySchema || "",
+      virtualKeyTable: virtualKeyTable || "",
+    };
+
+    if (column?.id) {
+      const index = virtualJoin.findIndex((col) => col.id === column.id);
+      if (index > -1) {
+        virtualJoin[index] = newVirtualJoin;
+      }
+    } else {
+      virtualJoin.push(newVirtualJoin);
+    }
+
+    const updatedData: DataCatalogModelTableInput = {
+      ...modelTable,
+      virtualJoin,
+    };
+
+    driver
+      ?.updateTable(schemaName, tableName, updatedData)
+      .then((r) => console.log("Updated successfully:", r))
+      .catch((error) => {
+        console.error("Error updating virtual join:", error);
+      })
+      .finally(() => {
+        setLoading(false);
+        onClose();
+      });
+  };
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Add Relationship to {tableName}</DialogTitle>
+        <DialogDescription>
+          Use virtual relationships to connect fields that don&apos;t have a
+          direct foreign key link. For example, if two tables should be related
+          by email or title but don&apos;t have a formal foreign key, use these
+          virtual relationships to link them.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="mt-2 flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <Label>Column</Label>
+        </div>
+        <TableColumnCombobox
+          value={virtualKeySchema}
+          schemaName={schemaName}
+          tableName={tableName}
+          onChange={setVirtualKeySchema}
+        />
+
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between gap-2">
+            <Label>Relationship Table</Label>
+          </div>
+          <TableCombobox
+            value={virtualKeyTable}
+            schemaName={schemaName}
+            onChange={setVirtualKeyTable}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between gap-2">
+            <Label>Relationship Column</Label>
+          </div>
+          <TableColumnCombobox
+            value={virtualKeyColumn}
+            schemaName={schemaName}
+            tableName={tableName}
+            onChange={setVirtualKeyColumn}
+          />
+        </div>
+      </div>
+
+      <DialogFooter>
+        <Button
+          variant="ghost"
+          disabled={!virtualKeyColumn || !virtualKeySchema || !virtualKeyTable}
+          onClick={createVirtualJoin}
+        >
+          {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
+          {column ? "Edit Relationship" : "Create Virtual Join"}
+        </Button>
+        <div className="flex-1" />
+      </DialogFooter>
+    </>
+  );
+}

From 53e991a6df4eaad8b6ad42d37ac02d7fbd4cf318 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Thu, 6 Feb 2025 14:32:35 +0700
Subject: [PATCH 007/106] create board

---
 .../w/[workspaceId]/create-board-dialog.tsx   | 67 ++++++++++++++
 .../w/[workspaceId]/page-client.tsx           | 44 ++++++++-
 src/app/layout.tsx                            |  6 +-
 src/app/storybook/create-dialog/page.tsx      | 31 +++++++
 src/components/create-dialog.tsx              | 92 +++++++++++++++++++
 src/outerbase-cloud/api.ts                    | 24 +++++
 src/window.d.ts                               |  8 +-
 7 files changed, 265 insertions(+), 7 deletions(-)
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/create-board-dialog.tsx
 create mode 100644 src/app/storybook/create-dialog/page.tsx
 create mode 100644 src/components/create-dialog.tsx

diff --git a/src/app/(outerbase)/w/[workspaceId]/create-board-dialog.tsx b/src/app/(outerbase)/w/[workspaceId]/create-board-dialog.tsx
new file mode 100644
index 00000000..6e47dd8b
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/create-board-dialog.tsx
@@ -0,0 +1,67 @@
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/ui/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { createOuterbaseDashboard } from "@/outerbase-cloud/api";
+import { OuterbaseAPIDashboardDetail } from "@/outerbase-cloud/api-type";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+
+export const createBoardDialog = createDialog<
+  { workspaceId: string },
+  OuterbaseAPIDashboardDetail | undefined
+>(({ close, workspaceId }) => {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState("");
+
+  const createBoardClicked = useCallback(() => {
+    if (name.length === 0) return;
+
+    setLoading(true);
+
+    createOuterbaseDashboard(workspaceId, undefined, name)
+      .then((createdBoard) => {
+        close(createdBoard);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [close, name, workspaceId]);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>New Board</DialogTitle>
+        <DialogDescription></DialogDescription>
+      </DialogHeader>
+
+      <div>
+        <LabelInput
+          label="Board name"
+          placeholder="Untitled Board"
+          value={name}
+          required
+          onChange={(e) => setName(e.currentTarget.value)}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button
+          disabled={loading || name.length === 0}
+          onClick={createBoardClicked}
+        >
+          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}
+          Create Board
+        </Button>
+        <Button variant={"secondary"} onClick={() => close(undefined)}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </>
+  );
+});
diff --git a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx b/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
index 8df54fc9..33017e49 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
@@ -1,14 +1,20 @@
 "use client";
 
 import { ButtonGroup, ButtonGroupItem } from "@/components/button-group";
-import { Toolbar } from "@/components/gui/toolbar";
+import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
 import ResourceCard from "@/components/resource-card";
 import {
   getDatabaseFriendlyName,
   getDatabaseIcon,
   getDatabaseVisual,
 } from "@/components/resource-card/utils";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { timeSince } from "@/lib/utils-datetime";
 import { getOuterbaseDashboardList } from "@/outerbase-cloud/api";
 import {
@@ -16,11 +22,12 @@ import {
   SortAscending,
   SortDescending,
 } from "@phosphor-icons/react";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useMemo } from "react";
 import useSWR from "swr";
 import { NavigationBar } from "../../navigation";
 import { useWorkspaces } from "../../workspace-provider";
+import { createBoardDialog } from "./create-board-dialog";
 
 interface ResourceItem {
   id: string;
@@ -31,10 +38,11 @@ interface ResourceItem {
 }
 
 export default function WorkspaceListPageClient() {
+  const router = useRouter();
   const { currentWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
 
-  const { data: boards } = useSWR(
+  const { data: boards, mutate } = useSWR(
     `/workspace/${workspaceId}/boards`,
     () => {
       return getOuterbaseDashboardList(workspaceId);
@@ -69,7 +77,9 @@ export default function WorkspaceListPageClient() {
 
     const allResources = [...baseResources, ...boardResources];
 
-    return allResources.sort((a, b) => a.name.localeCompare(b.name));
+    return allResources.sort((a, b) =>
+      (a.name ?? "").localeCompare(b.name ?? "")
+    );
   }, [currentWorkspace, boards]);
 
   return (
@@ -101,6 +111,30 @@ export default function WorkspaceListPageClient() {
                 <CalendarDots size={16} />
               </ButtonGroupItem>
             </ButtonGroup>
+
+            <ToolbarFiller />
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <Button>New Resource</Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem>New Base</DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={async () => {
+                    const createdBoard = await createBoardDialog.show({
+                      workspaceId,
+                    });
+
+                    if (createdBoard) {
+                      mutate();
+                      router.push(`/w/${workspaceId}/board/${createdBoard.id}`);
+                    }
+                  }}
+                >
+                  New Board
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </Toolbar>
         </div>
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 10297a0e..cf027b8c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import "./globals.css";
 
 const siteDescription = `${WEBSITE_NAME} is a fully-featured, lightweight GUI client for managing SQLite-based databases like Turso, LibSQL, and rqlite. It runs entirely in your browser, so there's no need to download anything`;
 
+import { DialogProvider } from "@/components/create-dialog";
 import { Inter } from "next/font/google";
 const inter = Inter({ subsets: ["latin"] });
 
@@ -36,7 +37,10 @@ export default async function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {children}
+        <DialogProvider />
+      </body>
     </html>
   );
 }
diff --git a/src/app/storybook/create-dialog/page.tsx b/src/app/storybook/create-dialog/page.tsx
new file mode 100644
index 00000000..69370f37
--- /dev/null
+++ b/src/app/storybook/create-dialog/page.tsx
@@ -0,0 +1,31 @@
+"use client";
+import { createDialog } from "@/components/create-dialog";
+import { Button } from "@/components/ui/button";
+import { DialogDescription, DialogHeader } from "@/components/ui/dialog";
+import { DialogTitle } from "@radix-ui/react-dialog";
+
+const testingDialog = createDialog<unknown, string>(() => {
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Hello World</DialogTitle>
+        <DialogDescription>This is a test dialog</DialogDescription>
+      </DialogHeader>
+    </>
+  );
+}, "close");
+
+export default function StorybookCreateDialogPage() {
+  return (
+    <div>
+      <h1>StorybookCreateDialogPage</h1>
+      <Button
+        onClick={() => {
+          testingDialog.show({}).then(console.log);
+        }}
+      >
+        Show Dialog
+      </Button>
+    </div>
+  );
+}
diff --git a/src/components/create-dialog.tsx b/src/components/create-dialog.tsx
new file mode 100644
index 00000000..75fe4a17
--- /dev/null
+++ b/src/components/create-dialog.tsx
@@ -0,0 +1,92 @@
+"use client";
+import { FunctionComponent, useCallback, useEffect, useState } from "react";
+import { Dialog, DialogContent } from "./ui/dialog";
+
+export function DialogProvider() {
+  const [open, setOpen] = useState(false);
+  const [component, setComponent] = useState<FunctionComponent>();
+  const [options, setOptions] = useState<unknown>();
+  const [resolve, setResolve] = useState<(props: unknown) => void>();
+  const [defaultCloseValue, setDefaultCloseValue] = useState<unknown>();
+
+  const DialogComponent = component;
+
+  const showToggle = useCallback(
+    ({
+      component,
+      options,
+      resolve,
+      defaultCloseValue,
+    }: {
+      component: FunctionComponent;
+      options: unknown;
+      resolve: (props: unknown) => void;
+      defaultCloseValue: unknown;
+    }) => {
+      setComponent(() => component);
+      setOptions(options);
+      setResolve(() => resolve);
+      setDefaultCloseValue(defaultCloseValue);
+      setOpen(true);
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.showOuterbaseDialog = showToggle;
+  }, [showToggle]);
+
+  return (
+    <>
+      {open && DialogComponent && (
+        <Dialog
+          open={open}
+          onOpenChange={(state) => {
+            if (!state) {
+              if (resolve) resolve(defaultCloseValue);
+              setOpen(false);
+            }
+          }}
+        >
+          <DialogContent>
+            <DialogComponent
+              {...(options as any)}
+              close={(value: unknown) => {
+                if (resolve) resolve(value);
+                setOpen(false);
+              }}
+            />
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+}
+
+type DialogComponentProps<
+  ParamType = unknown,
+  ReturnType = undefined,
+> = ParamType & {
+  close: (value: ReturnType) => void;
+};
+
+export function createDialog<ParamType = unknown, ReturnType = undefined>(
+  component: FunctionComponent<DialogComponentProps<ParamType, ReturnType>>,
+  defaultCloseValue?: ReturnType
+) {
+  return {
+    show: (props: ParamType) => {
+      return new Promise<ReturnType>((resolve) => {
+        window.showOuterbaseDialog({
+          component,
+          options: props,
+          resolve: resolve as unknown as (props: unknown) => void,
+          defaultCloseValue,
+        });
+      });
+    },
+  } as Readonly<{
+    show: (props: ParamType) => Promise<ReturnType>;
+  }>;
+}
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index 2e8d7324..fecdb07a 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -66,6 +66,30 @@ export async function getOuterbaseDashboard(
   );
 }
 
+export async function createOuterbaseDashboard(
+  workspaceId: string,
+  baseId: string | undefined,
+  name: string
+) {
+  return requestOuterbase<OuterbaseAPIDashboardDetail>(
+    `/api/v1/workspace/${workspaceId}/dashboard` +
+      (baseId ? `?baseId=${baseId}` : ""),
+    "POST",
+    {
+      name,
+      base_id: baseId ?? "",
+      chart_ids: [],
+      data: {
+        version: 3,
+        filters: [],
+        isWorkspaceScoped: !baseId,
+      },
+      layout: [],
+      type: "dashboard",
+    }
+  );
+}
+
 export async function runOuterbaseQueryRaw(
   workspaceId: string,
   sourceId: string,
diff --git a/src/window.d.ts b/src/window.d.ts
index 6627a231..3265531a 100644
--- a/src/window.d.ts
+++ b/src/window.d.ts
@@ -1,5 +1,5 @@
-import { SavedDocNamespace } from "./drivers/saved-doc/saved-doc-driver";
 import { DatabaseResultSet } from "./drivers/base-driver";
+import { SavedDocNamespace } from "./drivers/saved-doc/saved-doc-driver";
 
 export {};
 
@@ -23,5 +23,11 @@ interface OuterbaseIPC {
 declare global {
   interface Window {
     outerbaseIpc?: OuterbaseIPC;
+    showOuterbaseDialog: (props: {
+      component: FunctionComponent;
+      options: unknown;
+      resolve: (props: unknown) => void;
+      defaultCloseValue: unknown;
+    }) => void;
   }
 }

From d075aaeb2981a55c9672a4c56d0132d14acaf465 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Thu, 6 Feb 2025 17:01:15 +0700
Subject: [PATCH 008/106] delete board

---
 ...ard-dialog.tsx => dialog-board-create.tsx} |  0
 .../w/[workspaceId]/dialog-board-delete.tsx   | 76 +++++++++++++++++++
 .../w/[workspaceId]/page-client.tsx           | 22 +++++-
 src/components/copyable-text.tsx              | 16 ++++
 src/outerbase-cloud/api.ts                    | 18 ++++-
 5 files changed, 126 insertions(+), 6 deletions(-)
 rename src/app/(outerbase)/w/[workspaceId]/{create-board-dialog.tsx => dialog-board-create.tsx} (100%)
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx
 create mode 100644 src/components/copyable-text.tsx

diff --git a/src/app/(outerbase)/w/[workspaceId]/create-board-dialog.tsx b/src/app/(outerbase)/w/[workspaceId]/dialog-board-create.tsx
similarity index 100%
rename from src/app/(outerbase)/w/[workspaceId]/create-board-dialog.tsx
rename to src/app/(outerbase)/w/[workspaceId]/dialog-board-create.tsx
diff --git a/src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx b/src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx
new file mode 100644
index 00000000..d6fc5be3
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx
@@ -0,0 +1,76 @@
+import CopyableText from "@/components/copyable-text";
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/ui/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { deleteOuterbaseDashboard } from "@/outerbase-cloud/api";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+
+export const deleteBoardDialog = createDialog<{
+  workspaceId: string;
+  boardId: string;
+  boardName: string;
+}>(({ close, boardName, workspaceId, boardId }) => {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState("");
+
+  const deleteClicked = useCallback(() => {
+    if (name !== boardName) return;
+
+    setLoading(true);
+
+    deleteOuterbaseDashboard(workspaceId, boardId)
+      .then(() => {
+        close(undefined);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [name, workspaceId, boardId, close, boardName]);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Confirm deletion of board {boardName}</DialogTitle>
+        <DialogDescription>
+          All saved charts and any other contributions made to your Dashboard
+          will be deleted. This action is permanent and <strong>cannot</strong>{" "}
+          be undone.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-4">
+        <div>
+          <CopyableText text={boardName} />
+        </div>
+
+        <LabelInput
+          label="Enter the name of this Base to confirm:"
+          placeholder="Board name"
+          value={name}
+          required
+          onChange={(e) => setName(e.currentTarget.value)}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button
+          disabled={loading || boardName !== name}
+          onClick={deleteClicked}
+        >
+          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}
+          Delete
+        </Button>
+        <Button variant={"secondary"} onClick={() => close(undefined)}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </>
+  );
+});
diff --git a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx b/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
index 33017e49..fa621f79 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
@@ -27,7 +27,8 @@ import { useMemo } from "react";
 import useSWR from "swr";
 import { NavigationBar } from "../../navigation";
 import { useWorkspaces } from "../../workspace-provider";
-import { createBoardDialog } from "./create-board-dialog";
+import { createBoardDialog } from "./dialog-board-create";
+import { deleteBoardDialog } from "./dialog-board-delete";
 
 interface ResourceItem {
   id: string;
@@ -151,7 +152,24 @@ export default function WorkspaceListPageClient() {
               visual={getDatabaseVisual(resource.type)}
               status={resource.status}
             >
-              <DropdownMenuItem>Remove</DropdownMenuItem>
+              {resource.type === "board" && (
+                <DropdownMenuItem
+                  onClick={() => {
+                    deleteBoardDialog
+                      .show({
+                        workspaceId,
+                        boardId: resource.id,
+                        boardName: resource.name,
+                      })
+                      .then(() => mutate());
+                  }}
+                >
+                  Remove board
+                </DropdownMenuItem>
+              )}
+              {resource.type !== "board" && (
+                <DropdownMenuItem>Remove</DropdownMenuItem>
+              )}
             </ResourceCard>
           ))}
         </div>
diff --git a/src/components/copyable-text.tsx b/src/components/copyable-text.tsx
new file mode 100644
index 00000000..79f06401
--- /dev/null
+++ b/src/components/copyable-text.tsx
@@ -0,0 +1,16 @@
+import { Copy } from "@phosphor-icons/react";
+
+interface CopyableTextProps {
+  text: string;
+}
+
+export default function CopyableText({ text }: CopyableTextProps) {
+  return (
+    <span
+      className="bg-secondary inline-flex cursor-pointer items-center p-1 px-2 font-mono"
+      onClick={() => navigator.clipboard.writeText(text)}
+    >
+      {text} <Copy className="ml-2 h-4 w-4" />
+    </span>
+  );
+}
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index fecdb07a..02f57f7e 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -43,9 +43,9 @@ export function getOuterbaseWorkspace() {
 export async function getOuterbaseBase(workspaceId: string, baseId: string) {
   const baseList = await requestOuterbase<OuterbaseAPIBaseResponse>(
     "/api/v1/workspace/" +
-      workspaceId +
-      "/connection?" +
-      new URLSearchParams({ baseId })
+    workspaceId +
+    "/connection?" +
+    new URLSearchParams({ baseId })
   );
 
   return baseList.items[0];
@@ -73,7 +73,7 @@ export async function createOuterbaseDashboard(
 ) {
   return requestOuterbase<OuterbaseAPIDashboardDetail>(
     `/api/v1/workspace/${workspaceId}/dashboard` +
-      (baseId ? `?baseId=${baseId}` : ""),
+    (baseId ? `?baseId=${baseId}` : ""),
     "POST",
     {
       name,
@@ -90,6 +90,16 @@ export async function createOuterbaseDashboard(
   );
 }
 
+export async function deleteOuterbaseDashboard(
+  workspaceId: string,
+  dashboardId: string
+) {
+  return requestOuterbase(
+    `/api/v1/workspace/${workspaceId}/dashboard/${dashboardId}`,
+    "DELETE"
+  );
+}
+
 export async function runOuterbaseQueryRaw(
   workspaceId: string,
   sourceId: string,

From 963193def73ad9363a6b798a943198841d8ccf79 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Thu, 6 Feb 2025 19:47:17 +0700
Subject: [PATCH 009/106] add remove board

---
 .../w/[workspaceId]/dialog-base-delete.tsx    | 78 +++++++++++++++++++
 .../w/[workspaceId]/dialog-board-delete.tsx   |  5 +-
 .../w/[workspaceId]/page-client.tsx           | 17 +++-
 src/app/(outerbase)/workspace-provider.tsx    |  7 +-
 src/outerbase-cloud/api.ts                    | 15 +++-
 5 files changed, 112 insertions(+), 10 deletions(-)
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/dialog-base-delete.tsx

diff --git a/src/app/(outerbase)/w/[workspaceId]/dialog-base-delete.tsx b/src/app/(outerbase)/w/[workspaceId]/dialog-base-delete.tsx
new file mode 100644
index 00000000..86a30c61
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/dialog-base-delete.tsx
@@ -0,0 +1,78 @@
+import CopyableText from "@/components/copyable-text";
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/ui/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { deleteOuterbaseBase } from "@/outerbase-cloud/api";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+
+export const deleteBaseDialog = createDialog<{
+  workspaceId: string;
+  baseId: string;
+  baseName: string;
+}>(({ close, baseName, workspaceId, baseId }) => {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState("");
+
+  const deleteClicked = useCallback(() => {
+    if (name !== baseName) return;
+
+    setLoading(true);
+
+    deleteOuterbaseBase(workspaceId, baseId)
+      .then(() => {
+        close(undefined);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [name, workspaceId, baseId, close, baseName]);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Confirm deletion of {baseName}</DialogTitle>
+        <DialogDescription>
+          All saved queries, dashboards, definitions and any other contributions
+          made to your Base will be deleted. This action is permanent and{" "}
+          <strong>cannot</strong>
+          be undone.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-4">
+        <div>
+          <CopyableText text={baseName} />
+        </div>
+
+        <LabelInput
+          label="Enter the name of this Base to confirm:"
+          placeholder="Board name"
+          value={name}
+          required
+          onChange={(e) => setName(e.currentTarget.value)}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button
+          disabled={loading || baseName !== name}
+          onClick={deleteClicked}
+          variant={"destructive"}
+        >
+          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}I
+          understand, delete this base
+        </Button>
+        <Button variant={"secondary"} onClick={() => close(undefined)}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </>
+  );
+});
diff --git a/src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx b/src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx
index d6fc5be3..8caea7e8 100644
--- a/src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx
@@ -61,11 +61,12 @@ export const deleteBoardDialog = createDialog<{
 
       <DialogFooter>
         <Button
+          variant={"destructive"}
           disabled={loading || boardName !== name}
           onClick={deleteClicked}
         >
-          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}
-          Delete
+          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}I
+          understand, delete this board
         </Button>
         <Button variant={"secondary"} onClick={() => close(undefined)}>
           Cancel
diff --git a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx b/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
index fa621f79..c72eb0dc 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
@@ -27,6 +27,7 @@ import { useMemo } from "react";
 import useSWR from "swr";
 import { NavigationBar } from "../../navigation";
 import { useWorkspaces } from "../../workspace-provider";
+import { deleteBaseDialog } from "./dialog-base-delete";
 import { createBoardDialog } from "./dialog-board-create";
 import { deleteBoardDialog } from "./dialog-board-delete";
 
@@ -40,7 +41,7 @@ interface ResourceItem {
 
 export default function WorkspaceListPageClient() {
   const router = useRouter();
-  const { currentWorkspace } = useWorkspaces();
+  const { currentWorkspace, refreshWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
 
   const { data: boards, mutate } = useSWR(
@@ -168,7 +169,19 @@ export default function WorkspaceListPageClient() {
                 </DropdownMenuItem>
               )}
               {resource.type !== "board" && (
-                <DropdownMenuItem>Remove</DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => {
+                    deleteBaseDialog
+                      .show({
+                        workspaceId,
+                        baseId: resource.id,
+                        baseName: resource.name,
+                      })
+                      .then(() => refreshWorkspace());
+                  }}
+                >
+                  Remove
+                </DropdownMenuItem>
               )}
             </ResourceCard>
           ))}
diff --git a/src/app/(outerbase)/workspace-provider.tsx b/src/app/(outerbase)/workspace-provider.tsx
index fc4dda5b..cb288d33 100644
--- a/src/app/(outerbase)/workspace-provider.tsx
+++ b/src/app/(outerbase)/workspace-provider.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { getOuterbaseWorkspace } from "@/outerbase-cloud/api";
 import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
+import { noop } from "lodash";
 import { useParams, useRouter } from "next/navigation";
 import {
   createContext,
@@ -14,8 +15,9 @@ import useSWR from "swr";
 const WorkspaceContext = createContext<{
   workspaces: OuterbaseAPIWorkspace[];
   currentWorkspace?: OuterbaseAPIWorkspace;
+  refreshWorkspace: () => void;
   loading: boolean;
-}>({ workspaces: [], loading: true });
+}>({ workspaces: [], loading: true, refreshWorkspace: noop });
 
 export function useWorkspaces() {
   return useContext(WorkspaceContext);
@@ -24,7 +26,7 @@ export function useWorkspaces() {
 export function WorkspaceProvider({ children }: PropsWithChildren) {
   const router = useRouter();
 
-  const { data, isLoading } = useSWR(
+  const { data, isLoading, mutate } = useSWR(
     "workspaces",
     () => {
       return getOuterbaseWorkspace();
@@ -65,6 +67,7 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
         workspaces: data?.items || [],
         loading: isLoading,
         currentWorkspace,
+        refreshWorkspace: mutate,
       }}
     >
       {children}
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index 02f57f7e..2dc0b6c2 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -43,14 +43,21 @@ export function getOuterbaseWorkspace() {
 export async function getOuterbaseBase(workspaceId: string, baseId: string) {
   const baseList = await requestOuterbase<OuterbaseAPIBaseResponse>(
     "/api/v1/workspace/" +
-    workspaceId +
-    "/connection?" +
-    new URLSearchParams({ baseId })
+      workspaceId +
+      "/connection?" +
+      new URLSearchParams({ baseId })
   );
 
   return baseList.items[0];
 }
 
+export async function deleteOuterbaseBase(workspaceId: string, baseId: string) {
+  return requestOuterbase(
+    `/api/v1/workspace/${workspaceId}/base/${baseId}`,
+    "DELETE"
+  );
+}
+
 export async function getOuterbaseDashboardList(workspaceId: string) {
   return requestOuterbase<OuterbaseAPIDashboardListResponse>(
     `/api/v1/workspace/${workspaceId}/dashboard`
@@ -73,7 +80,7 @@ export async function createOuterbaseDashboard(
 ) {
   return requestOuterbase<OuterbaseAPIDashboardDetail>(
     `/api/v1/workspace/${workspaceId}/dashboard` +
-    (baseId ? `?baseId=${baseId}` : ""),
+      (baseId ? `?baseId=${baseId}` : ""),
     "POST",
     {
       name,

From 9e7a9201c4f0cb9e5e1b6823b4997e5674e2a6f8 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Thu, 6 Feb 2025 20:56:35 +0700
Subject: [PATCH 010/106] add document on how to use create dialog

---
 src/app/storybook/create-dialog/example.tsx |  63 ++++++++++++
 src/app/storybook/create-dialog/page.mdx    | 104 ++++++++++++++++++++
 src/app/storybook/create-dialog/page.tsx    |  31 ------
 src/app/storybook/layout.tsx                |   5 +
 4 files changed, 172 insertions(+), 31 deletions(-)
 create mode 100644 src/app/storybook/create-dialog/example.tsx
 create mode 100644 src/app/storybook/create-dialog/page.mdx
 delete mode 100644 src/app/storybook/create-dialog/page.tsx

diff --git a/src/app/storybook/create-dialog/example.tsx b/src/app/storybook/create-dialog/example.tsx
new file mode 100644
index 00000000..8adb85c1
--- /dev/null
+++ b/src/app/storybook/create-dialog/example.tsx
@@ -0,0 +1,63 @@
+"use client";
+import { createDialog } from "@/components/create-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { DialogTitle } from "@radix-ui/react-dialog";
+import { useState } from "react";
+
+const testingDialog = createDialog<{ color: string }, string>(
+  ({ close, color }) => {
+    const [name, setName] = useState("");
+
+    return (
+      <>
+        <DialogHeader>
+          <DialogTitle className={color}>Hello World</DialogTitle>
+          <DialogDescription>Please enter your name</DialogDescription>
+        </DialogHeader>
+
+        <div>
+          <Input
+            value={name}
+            onChange={(e) => setName(e.currentTarget.value)}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              close(name);
+            }}
+          >
+            Done
+          </Button>
+        </DialogFooter>
+      </>
+    );
+  },
+  "close"
+);
+
+export function StorybookCreateDialogExample() {
+  const [name, setName] = useState("");
+
+  return (
+    <div className="bg-secondary border p-4">
+      <Button
+        onClick={async () => {
+          const result = await testingDialog.show({ color: "text-red-500" });
+          setName(result);
+        }}
+      >
+        Show Dialog
+      </Button>
+
+      <div className="mt-1">{name && <strong>Name: {name}</strong>}</div>
+    </div>
+  );
+}
diff --git a/src/app/storybook/create-dialog/page.mdx b/src/app/storybook/create-dialog/page.mdx
new file mode 100644
index 00000000..ead27a87
--- /dev/null
+++ b/src/app/storybook/create-dialog/page.mdx
@@ -0,0 +1,104 @@
+import { StorybookCreateDialogExample } from "@/app/storybook/create-dialog/example";
+import { DocContent } from "@/components/mdx/docs";
+
+export const metadata = {
+  title: "Create Dialog",
+};
+
+<DocContent title="Create Dialog" group="Standard Components"></DocContent>
+
+<StorybookCreateDialogExample />
+
+<DocContent>
+
+```tsx
+<Button
+  onClick={async () => {
+    // Flexible dialog that can be reused. It can accept custom parameters
+    // and return a result asynchronously.
+    const result = await testingDialog.show({ color: "text-red-500" });
+
+    // ...
+  }}
+>
+  Show Dialog
+</Button>
+```
+
+`createDialog` offers a utility to create reusable dialogs and retrieve results asynchronously.
+This simplifies state management.
+
+```tsx
+const testingDialog = createDialog<{ color: string }, string>(
+  ({ close, color }) => {
+    const [name, setName] = useState("");
+
+    return (
+      <>
+        <DialogHeader>
+          <DialogTitle className={color}>Hello World</DialogTitle>
+          <DialogDescription>Please enter your name</DialogDescription>
+        </DialogHeader>
+
+        <div>
+          <Input
+            value={name}
+            onChange={(e) => setName(e.currentTarget.value)}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              close(name); // <=== Passing the value back
+            }}
+          >
+            Done
+          </Button>
+        </DialogFooter>
+      </>
+    );
+  }
+);
+```
+
+## What do we solve here?
+
+This is a typical pattern when we work with dialog. There are several shortcoming with this approach:
+
+- ⛔ The dialog is not easily reusable because we need to manage several extra states
+- ⛔ If the children needs to access the dialog, we need to pass the state deep down the tree
+- ⛔ The code flow is jumping all over the place
+
+```tsx
+function SomePage() {
+  const [open, setOpen] = useState(false);
+  const [color, setColor] = useState();
+
+  return (
+    <div>
+      <TestingDialog
+        color={color}
+        open={open}
+        onClose={() => setOpen(false)}
+        onComplete={(result) => {
+          // do something here
+        }}
+      />
+
+      {/* imagine hunderd of lines of code here */}
+
+      <Button
+        onClick={() => {
+          setOpen(true);
+          setColor("text-red-500");
+        }}
+      >
+        Show Dialog
+      </Button>
+    </div>
+  );
+}
+```
+
+</DocContent>
diff --git a/src/app/storybook/create-dialog/page.tsx b/src/app/storybook/create-dialog/page.tsx
deleted file mode 100644
index 69370f37..00000000
--- a/src/app/storybook/create-dialog/page.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-import { createDialog } from "@/components/create-dialog";
-import { Button } from "@/components/ui/button";
-import { DialogDescription, DialogHeader } from "@/components/ui/dialog";
-import { DialogTitle } from "@radix-ui/react-dialog";
-
-const testingDialog = createDialog<unknown, string>(() => {
-  return (
-    <>
-      <DialogHeader>
-        <DialogTitle>Hello World</DialogTitle>
-        <DialogDescription>This is a test dialog</DialogDescription>
-      </DialogHeader>
-    </>
-  );
-}, "close");
-
-export default function StorybookCreateDialogPage() {
-  return (
-    <div>
-      <h1>StorybookCreateDialogPage</h1>
-      <Button
-        onClick={() => {
-          testingDialog.show({}).then(console.log);
-        }}
-      >
-        Show Dialog
-      </Button>
-    </div>
-  );
-}
diff --git a/src/app/storybook/layout.tsx b/src/app/storybook/layout.tsx
index 47a07d57..46a051fd 100644
--- a/src/app/storybook/layout.tsx
+++ b/src/app/storybook/layout.tsx
@@ -30,6 +30,11 @@ export default function StorybookRootLayout({
             text="Dialog"
             href="https://ui.shadcn.com/docs/components/dialog"
           />
+          <SidebarMenuItem
+            icon={Layers2}
+            text="Create Dialog"
+            href="/storybook/create-dialog"
+          />
           <SidebarMenuItem
             icon={Layers2}
             text="Dropdown Menu"

From 381edfb53c645db6d0bd9f228e518f1c8acaa881 Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Fri, 7 Feb 2025 09:28:39 +0700
Subject: [PATCH 011/106] [Data Catalog] Improvement (#342)

* improve table accordion

* fix error table column combobox nested button

* removed child button

* minor improvement

* styling improvement
---
 .../table-combobox/TableColumnCombobox.tsx    | 36 ++++++++----
 .../data-catalog/data-catalog-entry-modal.tsx | 10 ++--
 .../data-catalog-table-accordion.tsx          | 53 +++++++++--------
 .../data-catalog-table-column-modal.tsx       | 11 ++--
 .../data-catalog/empty-definition.tsx         |  4 +-
 .../data-catalog/virtual-column.tsx           |  8 +--
 .../data-catalog/virtual-join-modal.tsx       | 57 ++++++++++++-------
 7 files changed, 106 insertions(+), 73 deletions(-)

diff --git a/src/components/gui/table-combobox/TableColumnCombobox.tsx b/src/components/gui/table-combobox/TableColumnCombobox.tsx
index 4ad7320b..553a8106 100644
--- a/src/components/gui/table-combobox/TableColumnCombobox.tsx
+++ b/src/components/gui/table-combobox/TableColumnCombobox.tsx
@@ -1,8 +1,10 @@
+import { useDatabaseDriver } from "@/context/driver-provider";
+import type { DatabaseTableSchema } from "@/drivers/base-driver";
+import { cn } from "@/lib/utils";
 import { Popover, PopoverTrigger } from "@radix-ui/react-popover";
-import { useEffect, useState } from "react";
-import { Button } from "../../ui/button";
 import { Check, ChevronsUpDown } from "lucide-react";
-import { PopoverContent } from "../../ui/popover";
+import { useEffect, useState } from "react";
+import { buttonVariants } from "../../ui/button";
 import {
   Command,
   CommandEmpty,
@@ -10,9 +12,7 @@ import {
   CommandInput,
   CommandItem,
 } from "../../ui/command";
-import type { DatabaseTableSchema } from "@/drivers/base-driver";
-import { useDatabaseDriver } from "@/context/driver-provider";
-import { cn } from "@/lib/utils";
+import { PopoverContent } from "../../ui/popover";
 
 export default function TableColumnCombobox({
   value,
@@ -20,12 +20,14 @@ export default function TableColumnCombobox({
   schemaName,
   onChange,
   disabled,
+  borderless,
 }: Readonly<{
   schemaName: string;
   tableName: string;
   value?: string;
   onChange: (value: string) => void;
   disabled?: boolean;
+  borderless?: boolean;
 }>) {
   const { databaseDriver } = useDatabaseDriver();
   const [open, setOpen] = useState(false);
@@ -51,11 +53,23 @@ export default function TableColumnCombobox({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger disabled={disabled}>
-        <Button variant="outline" className="justify-between w-full">
-          {value ?? "No column selected"}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
+      <PopoverTrigger asChild disabled={disabled}>
+        {borderless ? (
+          <div className="flex w-full items-center justify-between px-2">
+            {value ?? "No table selected"}
+            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+          </div>
+        ) : (
+          <div
+            className={cn(
+              buttonVariants({ variant: "outline" }),
+              "flex w-full justify-between"
+            )}
+          >
+            {value ?? "No table selected"}
+            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+          </div>
+        )}
       </PopoverTrigger>
       <PopoverContent className="w-[250px] p-0">
         <Command>
diff --git a/src/extensions/data-catalog/data-catalog-entry-modal.tsx b/src/extensions/data-catalog/data-catalog-entry-modal.tsx
index 7e63027b..a8b4a2fa 100644
--- a/src/extensions/data-catalog/data-catalog-entry-modal.tsx
+++ b/src/extensions/data-catalog/data-catalog-entry-modal.tsx
@@ -99,12 +99,12 @@ export function DataCatalogEntryModal({
           <DialogTitle>
             {selectedTermDefinition ? "Edit Term" : "Add Term"}
           </DialogTitle>
-          <DialogDescription>
-            {selectedTermDefinition
-              ? "Modify the existing term definition."
-              : "Add terms to your Data Dictionary to help your team and AI understand important business terminology."}
-          </DialogDescription>
         </DialogHeader>
+        <DialogDescription>
+          {selectedTermDefinition
+            ? "Modify the existing term definition."
+            : "Add terms to your Data Dictionary to help your team and AI understand important business terminology."}
+        </DialogDescription>
         <div className="grid gap-4 py-4">
           <div className="items-center gap-4">
             <Label className="text-right text-xs">
diff --git a/src/extensions/data-catalog/data-catalog-table-accordion.tsx b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
index 6995c573..9747c17b 100644
--- a/src/extensions/data-catalog/data-catalog-table-accordion.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
@@ -4,7 +4,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog } from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,11 +14,13 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { DatabaseTableSchema } from "@/drivers/base-driver";
 import { cn } from "@/lib/utils";
-import { ChevronDown, Edit3, EyeOff, LucideMoreHorizontal } from "lucide-react";
+import { Blend, ChevronDown, Edit3, LucideMoreHorizontal } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import DataCatalogTableColumn from "./data-catalog-table-column";
-import DataCatalogDriver, { VirtualJoinColumn } from "./driver";
-import VirtaulJoinColumn from "./virtual-column";
+import DataCatalogDriver, {
+  VirtualJoinColumn as IVirtualJoinColumn,
+} from "./driver";
+import VirtualJoinColumn from "./virtual-column";
 import VirtualJoinModal from "./virtual-join-modal";
 
 interface DataCatalogTableAccordionProps {
@@ -37,7 +39,7 @@ export default function DataCatalogTableAccordion({
 }: DataCatalogTableAccordionProps) {
   const modelTable = driver.getTable(table.schemaName, table.tableName!);
   const [open, setOpen] = useState(true);
-  const [virtaulJoinColumn, setVirtualColumn] = useState<VirtualJoinColumn>();
+  const [virtualJoinColumn, setVirtualColumn] = useState<IVirtualJoinColumn>();
   const [openVirtualModal, setOpenVirtaulModal] = useState(false);
 
   const [definition, setDefinition] = useState(modelTable?.definition || "");
@@ -60,6 +62,7 @@ export default function DataCatalogTableAccordion({
       const newVirtualJoinColumn = modelTable?.virtualJoin?.filter(
         (col) => col.id !== id
       );
+      console.log("new coolumn update: ", newVirtualJoinColumn);
       driver
         .updateTable(table?.schemaName, table.tableName!, {
           ...modelTable,
@@ -114,20 +117,17 @@ export default function DataCatalogTableAccordion({
   return (
     <>
       <Dialog open={openVirtualModal} onOpenChange={setOpenVirtaulModal}>
-        <DialogContent>
-          <VirtualJoinModal
-            driver={driver}
-            column={virtaulJoinColumn}
-            tableName={table.tableName!}
-            schemaName={table.schemaName}
-            onClose={() => {
-              setOpenVirtaulModal(false);
-              setVirtualColumn(undefined);
-            }}
-          />
-        </DialogContent>
+        <VirtualJoinModal
+          driver={driver}
+          column={virtualJoinColumn}
+          tableName={table.tableName!}
+          schemaName={table.schemaName}
+          onClose={() => {
+            setOpenVirtaulModal(false);
+            setVirtualColumn(undefined);
+          }}
+        />
       </Dialog>
-
       <Collapsible open={open} onOpenChange={setOpen}>
         <div className="rounded-xl border border-neutral-200 bg-white/50 p-3 hover:border-neutral-300 hover:bg-white dark:border-neutral-800/50 dark:bg-neutral-900 dark:text-white dark:hover:border-neutral-800 dark:hover:bg-neutral-800">
           <div className="flex p-2">
@@ -154,7 +154,7 @@ export default function DataCatalogTableAccordion({
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="p-2">
                   <DropdownMenuItem
-                    className="gap-5"
+                    className="gap-1"
                     onClick={() => {
                       setOpen(true);
                     }}
@@ -165,12 +165,15 @@ export default function DataCatalogTableAccordion({
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem
-                    onClick={() => setOpenVirtaulModal(true)}
-                    className="gap-5"
+                    onClick={() => {
+                      setOpenVirtaulModal(true);
+                      setVirtualColumn(undefined);
+                    }}
+                    className="gap-1"
                   >
                     Add Virtaul Join
                     <div className="flex-1" />
-                    <EyeOff className="h-4 w-4" />
+                    <Blend className="h-4 w-4" />
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -199,13 +202,13 @@ export default function DataCatalogTableAccordion({
             })}
             {modelTable?.virtualJoin && modelTable.virtualJoin.length > 0 && (
               <div className="rounded-xl border border-neutral-200 p-3 hover:bg-white dark:border-neutral-800/50 dark:bg-neutral-950 dark:text-white">
-                <div className="p-3 font-bold">Relationship</div>
+                <div className="p-3 font-bold">Relationships</div>
                 <div className="">
                   {modelTable.virtualJoin?.map((column) => {
                     return (
-                      <VirtaulJoinColumn
-                        key={column.id}
+                      <VirtualJoinColumn
                         {...column}
+                        key={column.id}
                         onEditRelationship={() => {
                           setOpenVirtaulModal(true);
                           setVirtualColumn(column);
diff --git a/src/extensions/data-catalog/data-catalog-table-column-modal.tsx b/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
index a563843e..14c9dc0d 100644
--- a/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
@@ -85,13 +85,12 @@ export default function DataCatalogTableColumnModal({
     <>
       <DialogHeader>
         <DialogTitle>Column Metadata</DialogTitle>
-        <DialogDescription>
-          Add metadata to this column to help your team and AI understand its
-          purpose. Include detailed descriptions and examples of sample data to
-          make the data more clear and easier to use.
-        </DialogDescription>
       </DialogHeader>
-
+      <DialogDescription>
+        Add metadata to this column to help your team and AI understand its
+        purpose. Include detailed descriptions and examples of sample data to
+        make the data more clear and easier to use.
+      </DialogDescription>
       <div className="mt-2 flex flex-col gap-4">
         <div className="flex flex-col gap-2">
           <Label>Column Description</Label>
diff --git a/src/extensions/data-catalog/empty-definition.tsx b/src/extensions/data-catalog/empty-definition.tsx
index 8f168c44..9412e32a 100644
--- a/src/extensions/data-catalog/empty-definition.tsx
+++ b/src/extensions/data-catalog/empty-definition.tsx
@@ -32,13 +32,13 @@ export default function EmptyTermDefinition() {
       {EmptyTerm.map((item, index) => {
         return (
           <div key={index}>
-            <div className="dark:bg-primary-foreground bg-accent relative mt-10 mb-10 h-[280px] flex-1 items-center justify-center rounded-md border p-[10px] pb-0">
+            <div className="bg-accent relative mt-10 mb-10 h-[280px] flex-1 items-center justify-center rounded-md border pb-0 dark:bg-neutral-900">
               <div className="relative h-full w-full overflow-hidden rounded-md">
                 <Image
                   src={item.src}
                   alt={item.title}
                   layout="fill"
-                  objectFit="cover"
+                  objectFit="contain"
                 />
               </div>
             </div>
diff --git a/src/extensions/data-catalog/virtual-column.tsx b/src/extensions/data-catalog/virtual-column.tsx
index 77295e59..0d931b70 100644
--- a/src/extensions/data-catalog/virtual-column.tsx
+++ b/src/extensions/data-catalog/virtual-column.tsx
@@ -15,18 +15,18 @@ import {
   Trash,
 } from "lucide-react";
 import { useState } from "react";
-import { VirtualJoinColumn } from "./driver";
+import { VirtualJoinColumn as IVirtualJoinColumn } from "./driver";
 
-interface Props extends VirtualJoinColumn {
+interface Props extends IVirtualJoinColumn {
   onDeletRelatinship: () => void;
   onEditRelationship: () => void;
 }
 
-export default function VirtaulJoinColumn({
+export default function VirtualJoinColumn({
+  flags,
   virtualKeyColumn,
   virtualKeySchema,
   virtualKeyTable,
-  flags,
   onEditRelationship,
   onDeletRelatinship,
 }: Props) {
diff --git a/src/extensions/data-catalog/virtual-join-modal.tsx b/src/extensions/data-catalog/virtual-join-modal.tsx
index c210694b..fba9ee0a 100644
--- a/src/extensions/data-catalog/virtual-join-modal.tsx
+++ b/src/extensions/data-catalog/virtual-join-modal.tsx
@@ -2,6 +2,7 @@ import TableColumnCombobox from "@/components/gui/table-combobox/TableColumnComb
 import TableCombobox from "@/components/gui/table-combobox/TableCombobox";
 import { Button } from "@/components/ui/button";
 import {
+  DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
@@ -9,7 +10,7 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { LucideLoader } from "lucide-react";
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import DataCatalogDriver, {
   DataCatalogModelTableInput,
   VirtualJoinColumn,
@@ -30,16 +31,30 @@ export default function VirtualJoinModal({
   onClose,
 }: Props) {
   const [loading, setLoading] = useState(false);
-  const [virtualKeySchema, setVirtualKeySchema] = useState<string | undefined>(
-    column?.virtualKeySchema
-  );
+  const [virtualKeySchema, setVirtualKeySchema] = useState<
+    string | undefined
+  >();
 
-  const [virtualKeyTable, setVirtualKeyTable] = useState<string | undefined>(
-    column?.virtualKeyTable
-  );
-  const [virtualKeyColumn, setVirtualKeyColumn] = useState<string | undefined>(
-    column?.virtualKeyColumn
-  );
+  const [virtualKeyTable, setVirtualKeyTable] = useState<string | undefined>();
+  const [virtualKeyColumn, setVirtualKeyColumn] = useState<
+    string | undefined
+  >();
+
+  const clear = useCallback(() => {
+    setVirtualKeyColumn(undefined);
+    setVirtualKeySchema(undefined);
+    setVirtualKeyTable(undefined);
+  }, []);
+
+  useEffect(() => {
+    if (column) {
+      setVirtualKeyColumn(column.virtualKeyColumn);
+      setVirtualKeySchema(column.virtualKeySchema);
+      setVirtualKeyTable(column.virtualKeyTable);
+    } else {
+      clear();
+    }
+  }, [column, clear]);
 
   const createVirtualJoin = () => {
     setLoading(true);
@@ -80,21 +95,23 @@ export default function VirtualJoinModal({
       .finally(() => {
         setLoading(false);
         onClose();
+        clear();
       });
   };
 
   return (
-    <>
+    <DialogContent>
       <DialogHeader>
-        <DialogTitle>Add Relationship to {tableName}</DialogTitle>
-        <DialogDescription>
-          Use virtual relationships to connect fields that don&apos;t have a
-          direct foreign key link. For example, if two tables should be related
-          by email or title but don&apos;t have a formal foreign key, use these
-          virtual relationships to link them.
-        </DialogDescription>
+        <DialogTitle>
+          {column ? "Edit" : "Add Relationship"} to {tableName}
+        </DialogTitle>
       </DialogHeader>
-
+      <DialogDescription>
+        Use virtual relationships to connect fields that don&apos;t have a
+        direct foreign key link. For example, if two tables should be related by
+        email or title but don&apos;t have a formal foreign key, use these
+        virtual relationships to link them.
+      </DialogDescription>
       <div className="mt-2 flex flex-col gap-4">
         <div className="flex flex-col gap-2">
           <Label>Column</Label>
@@ -141,6 +158,6 @@ export default function VirtualJoinModal({
         </Button>
         <div className="flex-1" />
       </DialogFooter>
-    </>
+    </DialogContent>
   );
 }

From 02fbfd8900354926571e7f88826d51b7a87ec3df Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Fri, 7 Feb 2025 12:34:00 +0700
Subject: [PATCH 012/106] refactor the session provider

---
 package-lock.json                             | 2497 -----------------
 src/app/(outerbase)/auth-provider.tsx         |   24 +
 src/app/(outerbase)/layout.tsx                |   20 +
 src/app/(outerbase)/navigation.tsx            |    6 +-
 src/app/(outerbase)/session-provider.tsx      |   35 +-
 .../(outerbase)/w/[workspaceId]/layout.tsx    |   17 +-
 .../w/[workspaceId]/page-client.tsx           |  192 --
 src/app/(outerbase)/w/[workspaceId]/page.tsx  |  193 +-
 src/app/(outerbase)/w/page.tsx                |    4 +
 9 files changed, 249 insertions(+), 2739 deletions(-)
 create mode 100644 src/app/(outerbase)/auth-provider.tsx
 create mode 100644 src/app/(outerbase)/layout.tsx
 delete mode 100644 src/app/(outerbase)/w/[workspaceId]/page-client.tsx
 create mode 100644 src/app/(outerbase)/w/page.tsx

diff --git a/package-lock.json b/package-lock.json
index dad7e23e..8c2f3a9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,7 +76,6 @@
         "lucide-react": "^0.474.0",
         "next": "15.1.4",
         "next-themes": "^0.4.4",
-        "npm": "^11.1.0",
         "oslo": "^1.1.3",
         "react": "19.0.0",
         "react-dom": "19.0.0",
@@ -14998,162 +14997,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/npm": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/npm/-/npm-11.1.0.tgz",
-      "integrity": "sha512-rPMBrZud26lI/LcjQeLw/K5Hf1apXMKgkpNNEzp0YQYmM877+T1ZNKPcB2hnTi7e6fBNz8xLtMMn/w46fVUqGw==",
-      "bundleDependencies": [
-        "@isaacs/string-locale-compare",
-        "@npmcli/arborist",
-        "@npmcli/config",
-        "@npmcli/fs",
-        "@npmcli/map-workspaces",
-        "@npmcli/package-json",
-        "@npmcli/promise-spawn",
-        "@npmcli/redact",
-        "@npmcli/run-script",
-        "@sigstore/tuf",
-        "abbrev",
-        "archy",
-        "cacache",
-        "chalk",
-        "ci-info",
-        "cli-columns",
-        "fastest-levenshtein",
-        "fs-minipass",
-        "glob",
-        "graceful-fs",
-        "hosted-git-info",
-        "ini",
-        "init-package-json",
-        "is-cidr",
-        "json-parse-even-better-errors",
-        "libnpmaccess",
-        "libnpmdiff",
-        "libnpmexec",
-        "libnpmfund",
-        "libnpmorg",
-        "libnpmpack",
-        "libnpmpublish",
-        "libnpmsearch",
-        "libnpmteam",
-        "libnpmversion",
-        "make-fetch-happen",
-        "minimatch",
-        "minipass",
-        "minipass-pipeline",
-        "ms",
-        "node-gyp",
-        "nopt",
-        "normalize-package-data",
-        "npm-audit-report",
-        "npm-install-checks",
-        "npm-package-arg",
-        "npm-pick-manifest",
-        "npm-profile",
-        "npm-registry-fetch",
-        "npm-user-validate",
-        "p-map",
-        "pacote",
-        "parse-conflict-json",
-        "proc-log",
-        "qrcode-terminal",
-        "read",
-        "semver",
-        "spdx-expression-parse",
-        "ssri",
-        "supports-color",
-        "tar",
-        "text-table",
-        "tiny-relative-date",
-        "treeverse",
-        "validate-npm-package-name",
-        "which"
-      ],
-      "license": "Artistic-2.0",
-      "workspaces": [
-        "docs",
-        "smoke-tests",
-        "mock-globals",
-        "mock-registry",
-        "workspaces/*"
-      ],
-      "dependencies": {
-        "@isaacs/string-locale-compare": "^1.1.0",
-        "@npmcli/arborist": "^9.0.0",
-        "@npmcli/config": "^10.0.1",
-        "@npmcli/fs": "^4.0.0",
-        "@npmcli/map-workspaces": "^4.0.2",
-        "@npmcli/package-json": "^6.1.1",
-        "@npmcli/promise-spawn": "^8.0.2",
-        "@npmcli/redact": "^3.0.0",
-        "@npmcli/run-script": "^9.0.1",
-        "@sigstore/tuf": "^3.0.0",
-        "abbrev": "^3.0.0",
-        "archy": "~1.0.0",
-        "cacache": "^19.0.1",
-        "chalk": "^5.4.1",
-        "ci-info": "^4.1.0",
-        "cli-columns": "^4.0.0",
-        "fastest-levenshtein": "^1.0.16",
-        "fs-minipass": "^3.0.3",
-        "glob": "^10.4.5",
-        "graceful-fs": "^4.2.11",
-        "hosted-git-info": "^8.0.2",
-        "ini": "^5.0.0",
-        "init-package-json": "^8.0.0",
-        "is-cidr": "^5.1.0",
-        "json-parse-even-better-errors": "^4.0.0",
-        "libnpmaccess": "^10.0.0",
-        "libnpmdiff": "^8.0.0",
-        "libnpmexec": "^10.0.0",
-        "libnpmfund": "^7.0.0",
-        "libnpmorg": "^8.0.0",
-        "libnpmpack": "^9.0.0",
-        "libnpmpublish": "^11.0.0",
-        "libnpmsearch": "^9.0.0",
-        "libnpmteam": "^8.0.0",
-        "libnpmversion": "^8.0.0",
-        "make-fetch-happen": "^14.0.3",
-        "minimatch": "^9.0.5",
-        "minipass": "^7.1.1",
-        "minipass-pipeline": "^1.2.4",
-        "ms": "^2.1.2",
-        "node-gyp": "^11.0.0",
-        "nopt": "^8.0.0",
-        "normalize-package-data": "^7.0.0",
-        "npm-audit-report": "^6.0.0",
-        "npm-install-checks": "^7.1.1",
-        "npm-package-arg": "^12.0.1",
-        "npm-pick-manifest": "^10.0.0",
-        "npm-profile": "^11.0.1",
-        "npm-registry-fetch": "^18.0.2",
-        "npm-user-validate": "^3.0.0",
-        "p-map": "^7.0.3",
-        "pacote": "^21.0.0",
-        "parse-conflict-json": "^4.0.0",
-        "proc-log": "^5.0.0",
-        "qrcode-terminal": "^0.12.0",
-        "read": "^4.0.0",
-        "semver": "^7.6.3",
-        "spdx-expression-parse": "^4.0.0",
-        "ssri": "^12.0.0",
-        "supports-color": "^9.4.0",
-        "tar": "^6.2.1",
-        "text-table": "~0.2.0",
-        "tiny-relative-date": "^1.3.0",
-        "treeverse": "^3.0.0",
-        "validate-npm-package-name": "^6.0.0",
-        "which": "^5.0.0"
-      },
-      "bin": {
-        "npm": "bin/npm-cli.js",
-        "npx": "bin/npx-cli.js"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -15167,2346 +15010,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/npm/node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": {
-      "version": "5.1.2",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/npm/node_modules/@isaacs/fs-minipass": {
-      "version": "4.0.1",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.4"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/@isaacs/string-locale-compare": {
-      "version": "1.1.0",
-      "inBundle": true,
-      "license": "ISC"
-    },
-    "node_modules/npm/node_modules/@npmcli/agent": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "agent-base": "^7.1.0",
-        "http-proxy-agent": "^7.0.0",
-        "https-proxy-agent": "^7.0.1",
-        "lru-cache": "^10.0.1",
-        "socks-proxy-agent": "^8.0.3"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/arborist": {
-      "version": "9.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@isaacs/string-locale-compare": "^1.1.0",
-        "@npmcli/fs": "^4.0.0",
-        "@npmcli/installed-package-contents": "^3.0.0",
-        "@npmcli/map-workspaces": "^4.0.1",
-        "@npmcli/metavuln-calculator": "^9.0.0",
-        "@npmcli/name-from-folder": "^3.0.0",
-        "@npmcli/node-gyp": "^4.0.0",
-        "@npmcli/package-json": "^6.0.1",
-        "@npmcli/query": "^4.0.0",
-        "@npmcli/redact": "^3.0.0",
-        "@npmcli/run-script": "^9.0.1",
-        "bin-links": "^5.0.0",
-        "cacache": "^19.0.1",
-        "common-ancestor-path": "^1.0.1",
-        "hosted-git-info": "^8.0.0",
-        "json-stringify-nice": "^1.1.4",
-        "lru-cache": "^10.2.2",
-        "minimatch": "^9.0.4",
-        "nopt": "^8.0.0",
-        "npm-install-checks": "^7.1.0",
-        "npm-package-arg": "^12.0.0",
-        "npm-pick-manifest": "^10.0.0",
-        "npm-registry-fetch": "^18.0.1",
-        "pacote": "^21.0.0",
-        "parse-conflict-json": "^4.0.0",
-        "proc-log": "^5.0.0",
-        "proggy": "^3.0.0",
-        "promise-all-reject-late": "^1.0.0",
-        "promise-call-limit": "^3.0.1",
-        "read-package-json-fast": "^4.0.0",
-        "semver": "^7.3.7",
-        "ssri": "^12.0.0",
-        "treeverse": "^3.0.0",
-        "walk-up-path": "^4.0.0"
-      },
-      "bin": {
-        "arborist": "bin/index.js"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/config": {
-      "version": "10.0.1",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/map-workspaces": "^4.0.1",
-        "@npmcli/package-json": "^6.0.1",
-        "ci-info": "^4.0.0",
-        "ini": "^5.0.0",
-        "nopt": "^8.0.0",
-        "proc-log": "^5.0.0",
-        "semver": "^7.3.5",
-        "walk-up-path": "^4.0.0"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/fs": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "semver": "^7.3.5"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/git": {
-      "version": "6.0.1",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/promise-spawn": "^8.0.0",
-        "ini": "^5.0.0",
-        "lru-cache": "^10.0.1",
-        "npm-pick-manifest": "^10.0.0",
-        "proc-log": "^5.0.0",
-        "promise-inflight": "^1.0.1",
-        "promise-retry": "^2.0.1",
-        "semver": "^7.3.5",
-        "which": "^5.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/installed-package-contents": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "npm-bundled": "^4.0.0",
-        "npm-normalize-package-bin": "^4.0.0"
-      },
-      "bin": {
-        "installed-package-contents": "bin/index.js"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/map-workspaces": {
-      "version": "4.0.2",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/name-from-folder": "^3.0.0",
-        "@npmcli/package-json": "^6.0.0",
-        "glob": "^10.2.2",
-        "minimatch": "^9.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/metavuln-calculator": {
-      "version": "9.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "cacache": "^19.0.0",
-        "json-parse-even-better-errors": "^4.0.0",
-        "pacote": "^21.0.0",
-        "proc-log": "^5.0.0",
-        "semver": "^7.3.5"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/name-from-folder": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/node-gyp": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/package-json": {
-      "version": "6.1.1",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/git": "^6.0.0",
-        "glob": "^10.2.2",
-        "hosted-git-info": "^8.0.0",
-        "json-parse-even-better-errors": "^4.0.0",
-        "proc-log": "^5.0.0",
-        "semver": "^7.5.3",
-        "validate-npm-package-license": "^3.0.4"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/promise-spawn": {
-      "version": "8.0.2",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "which": "^5.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/query": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.2"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/redact": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@npmcli/run-script": {
-      "version": "9.0.2",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/node-gyp": "^4.0.0",
-        "@npmcli/package-json": "^6.0.0",
-        "@npmcli/promise-spawn": "^8.0.0",
-        "node-gyp": "^11.0.0",
-        "proc-log": "^5.0.0",
-        "which": "^5.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "inBundle": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/npm/node_modules/@sigstore/bundle": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@sigstore/protobuf-specs": "^0.3.2"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@sigstore/core": {
-      "version": "2.0.0",
-      "inBundle": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@sigstore/protobuf-specs": {
-      "version": "0.3.3",
-      "inBundle": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@sigstore/sign": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@sigstore/bundle": "^3.0.0",
-        "@sigstore/core": "^2.0.0",
-        "@sigstore/protobuf-specs": "^0.3.2",
-        "make-fetch-happen": "^14.0.1",
-        "proc-log": "^5.0.0",
-        "promise-retry": "^2.0.1"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@sigstore/tuf": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@sigstore/protobuf-specs": "^0.3.2",
-        "tuf-js": "^3.0.1"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@sigstore/verify": {
-      "version": "2.0.0",
-      "inBundle": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@sigstore/bundle": "^3.0.0",
-        "@sigstore/core": "^2.0.0",
-        "@sigstore/protobuf-specs": "^0.3.2"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/@tufjs/canonical-json": {
-      "version": "2.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^16.14.0 || >=18.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/@tufjs/models": {
-      "version": "3.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "@tufjs/canonical-json": "2.0.0",
-        "minimatch": "^9.0.5"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/abbrev": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/agent-base": {
-      "version": "7.1.3",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/npm/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/npm/node_modules/aproba": {
-      "version": "2.0.0",
-      "inBundle": true,
-      "license": "ISC"
-    },
-    "node_modules/npm/node_modules/archy": {
-      "version": "1.0.0",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/bin-links": {
-      "version": "5.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "cmd-shim": "^7.0.0",
-        "npm-normalize-package-bin": "^4.0.0",
-        "proc-log": "^5.0.0",
-        "read-cmd-shim": "^5.0.0",
-        "write-file-atomic": "^6.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/binary-extensions": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/npm/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/cacache": {
-      "version": "19.0.1",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/fs": "^4.0.0",
-        "fs-minipass": "^3.0.0",
-        "glob": "^10.2.2",
-        "lru-cache": "^10.0.1",
-        "minipass": "^7.0.3",
-        "minipass-collect": "^2.0.1",
-        "minipass-flush": "^1.0.5",
-        "minipass-pipeline": "^1.2.4",
-        "p-map": "^7.0.2",
-        "ssri": "^12.0.0",
-        "tar": "^7.4.3",
-        "unique-filename": "^4.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/cacache/node_modules/chownr": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/npm/node_modules/cacache/node_modules/minizlib": {
-      "version": "3.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.0.4",
-        "rimraf": "^5.0.5"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/npm/node_modules/cacache/node_modules/mkdirp": {
-      "version": "3.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/cacache/node_modules/tar": {
-      "version": "7.4.3",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
-        "yallist": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/npm/node_modules/cacache/node_modules/yallist": {
-      "version": "5.0.0",
-      "inBundle": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/npm/node_modules/chalk": {
-      "version": "5.4.1",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/npm/node_modules/chownr": {
-      "version": "2.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/npm/node_modules/ci-info": {
-      "version": "4.1.0",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/sibiraj-s"
-        }
-      ],
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/cidr-regex": {
-      "version": "4.1.1",
-      "inBundle": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "ip-regex": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/npm/node_modules/cli-columns": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "string-width": "^4.2.3",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/npm/node_modules/cmd-shim": {
-      "version": "7.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/common-ancestor-path": {
-      "version": "1.0.1",
-      "inBundle": true,
-      "license": "ISC"
-    },
-    "node_modules/npm/node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
-      "version": "2.0.2",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/npm/node_modules/cssesc": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/npm/node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/npm/node_modules/diff": {
-      "version": "7.0.0",
-      "inBundle": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.3.1"
-      }
-    },
-    "node_modules/npm/node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/encoding": {
-      "version": "0.1.13",
-      "inBundle": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "iconv-lite": "^0.6.2"
-      }
-    },
-    "node_modules/npm/node_modules/env-paths": {
-      "version": "2.2.1",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/npm/node_modules/err-code": {
-      "version": "2.0.3",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/exponential-backoff": {
-      "version": "3.1.1",
-      "inBundle": true,
-      "license": "Apache-2.0"
-    },
-    "node_modules/npm/node_modules/fastest-levenshtein": {
-      "version": "1.0.16",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.9.1"
-      }
-    },
-    "node_modules/npm/node_modules/foreground-child": {
-      "version": "3.3.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/fs-minipass": {
-      "version": "3.0.3",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.3"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/glob": {
-      "version": "10.4.5",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "inBundle": true,
-      "license": "ISC"
-    },
-    "node_modules/npm/node_modules/hosted-git-info": {
-      "version": "8.0.2",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "lru-cache": "^10.0.1"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/http-cache-semantics": {
-      "version": "4.1.1",
-      "inBundle": true,
-      "license": "BSD-2-Clause"
-    },
-    "node_modules/npm/node_modules/http-proxy-agent": {
-      "version": "7.0.2",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "agent-base": "^7.1.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/npm/node_modules/https-proxy-agent": {
-      "version": "7.0.6",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "agent-base": "^7.1.2",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/npm/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "inBundle": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/npm/node_modules/ignore-walk": {
-      "version": "7.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "minimatch": "^9.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.19"
-      }
-    },
-    "node_modules/npm/node_modules/ini": {
-      "version": "5.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/init-package-json": {
-      "version": "8.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/package-json": "^6.1.0",
-        "npm-package-arg": "^12.0.0",
-        "promzard": "^2.0.0",
-        "read": "^4.0.0",
-        "semver": "^7.3.5",
-        "validate-npm-package-license": "^3.0.4",
-        "validate-npm-package-name": "^6.0.0"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/ip-address": {
-      "version": "9.0.5",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "jsbn": "1.1.0",
-        "sprintf-js": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/npm/node_modules/ip-regex": {
-      "version": "5.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/npm/node_modules/is-cidr": {
-      "version": "5.1.0",
-      "inBundle": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "cidr-regex": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/npm/node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "inBundle": true,
-      "license": "ISC"
-    },
-    "node_modules/npm/node_modules/jackspeak": {
-      "version": "3.4.3",
-      "inBundle": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/npm/node_modules/jsbn": {
-      "version": "1.1.0",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/json-parse-even-better-errors": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/json-stringify-nice": {
-      "version": "1.1.4",
-      "inBundle": true,
-      "license": "ISC",
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/jsonparse": {
-      "version": "1.3.1",
-      "engines": [
-        "node >= 0.2.0"
-      ],
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/just-diff": {
-      "version": "6.0.2",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/just-diff-apply": {
-      "version": "5.5.0",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/libnpmaccess": {
-      "version": "10.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "npm-package-arg": "^12.0.0",
-        "npm-registry-fetch": "^18.0.1"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/libnpmdiff": {
-      "version": "8.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/arborist": "^9.0.0",
-        "@npmcli/installed-package-contents": "^3.0.0",
-        "binary-extensions": "^3.0.0",
-        "diff": "^7.0.0",
-        "minimatch": "^9.0.4",
-        "npm-package-arg": "^12.0.0",
-        "pacote": "^21.0.0",
-        "tar": "^6.2.1"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/libnpmexec": {
-      "version": "10.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/arborist": "^9.0.0",
-        "@npmcli/run-script": "^9.0.1",
-        "ci-info": "^4.0.0",
-        "npm-package-arg": "^12.0.0",
-        "pacote": "^21.0.0",
-        "proc-log": "^5.0.0",
-        "read": "^4.0.0",
-        "read-package-json-fast": "^4.0.0",
-        "semver": "^7.3.7",
-        "walk-up-path": "^4.0.0"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/libnpmfund": {
-      "version": "7.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/arborist": "^9.0.0"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/libnpmorg": {
-      "version": "8.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "aproba": "^2.0.0",
-        "npm-registry-fetch": "^18.0.1"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/libnpmpack": {
-      "version": "9.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/arborist": "^9.0.0",
-        "@npmcli/run-script": "^9.0.1",
-        "npm-package-arg": "^12.0.0",
-        "pacote": "^21.0.0"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/libnpmpublish": {
-      "version": "11.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "ci-info": "^4.0.0",
-        "normalize-package-data": "^7.0.0",
-        "npm-package-arg": "^12.0.0",
-        "npm-registry-fetch": "^18.0.1",
-        "proc-log": "^5.0.0",
-        "semver": "^7.3.7",
-        "sigstore": "^3.0.0",
-        "ssri": "^12.0.0"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/libnpmsearch": {
-      "version": "9.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "npm-registry-fetch": "^18.0.1"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/libnpmteam": {
-      "version": "8.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "aproba": "^2.0.0",
-        "npm-registry-fetch": "^18.0.1"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/libnpmversion": {
-      "version": "8.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/git": "^6.0.1",
-        "@npmcli/run-script": "^9.0.1",
-        "json-parse-even-better-errors": "^4.0.0",
-        "proc-log": "^5.0.0",
-        "semver": "^7.3.7"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "inBundle": true,
-      "license": "ISC"
-    },
-    "node_modules/npm/node_modules/make-fetch-happen": {
-      "version": "14.0.3",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/agent": "^3.0.0",
-        "cacache": "^19.0.1",
-        "http-cache-semantics": "^4.1.1",
-        "minipass": "^7.0.2",
-        "minipass-fetch": "^4.0.0",
-        "minipass-flush": "^1.0.5",
-        "minipass-pipeline": "^1.2.4",
-        "negotiator": "^1.0.0",
-        "proc-log": "^5.0.0",
-        "promise-retry": "^2.0.1",
-        "ssri": "^12.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/make-fetch-happen/node_modules/negotiator": {
-      "version": "1.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/npm/node_modules/minimatch": {
-      "version": "9.0.5",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/minipass": {
-      "version": "7.1.2",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/npm/node_modules/minipass-collect": {
-      "version": "2.0.1",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.3"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/npm/node_modules/minipass-fetch": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.0.3",
-        "minipass-sized": "^1.0.3",
-        "minizlib": "^3.0.1"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      },
-      "optionalDependencies": {
-        "encoding": "^0.1.13"
-      }
-    },
-    "node_modules/npm/node_modules/minipass-fetch/node_modules/minizlib": {
-      "version": "3.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.0.4",
-        "rimraf": "^5.0.5"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/npm/node_modules/minipass-flush": {
-      "version": "1.0.5",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
-      "version": "3.3.6",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/minipass-pipeline": {
-      "version": "1.2.4",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
-      "version": "3.3.6",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/minipass-sized": {
-      "version": "1.0.3",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
-      "version": "3.3.6",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/minizlib": {
-      "version": "2.1.2",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/npm/node_modules/minizlib/node_modules/minipass": {
-      "version": "3.3.6",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/mkdirp": {
-      "version": "1.0.4",
-      "inBundle": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/npm/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/mute-stream": {
-      "version": "2.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/node-gyp": {
-      "version": "11.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "env-paths": "^2.2.0",
-        "exponential-backoff": "^3.1.1",
-        "glob": "^10.3.10",
-        "graceful-fs": "^4.2.6",
-        "make-fetch-happen": "^14.0.3",
-        "nopt": "^8.0.0",
-        "proc-log": "^5.0.0",
-        "semver": "^7.3.5",
-        "tar": "^7.4.3",
-        "which": "^5.0.0"
-      },
-      "bin": {
-        "node-gyp": "bin/node-gyp.js"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/node-gyp/node_modules/chownr": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/npm/node_modules/node-gyp/node_modules/minizlib": {
-      "version": "3.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.0.4",
-        "rimraf": "^5.0.5"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/npm/node_modules/node-gyp/node_modules/mkdirp": {
-      "version": "3.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/node-gyp/node_modules/tar": {
-      "version": "7.4.3",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
-        "yallist": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/npm/node_modules/node-gyp/node_modules/yallist": {
-      "version": "5.0.0",
-      "inBundle": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/npm/node_modules/nopt": {
-      "version": "8.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "abbrev": "^2.0.0"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/nopt/node_modules/abbrev": {
-      "version": "2.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/normalize-package-data": {
-      "version": "7.0.0",
-      "inBundle": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "hosted-git-info": "^8.0.0",
-        "semver": "^7.3.5",
-        "validate-npm-package-license": "^3.0.4"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/npm-audit-report": {
-      "version": "6.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/npm-bundled": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "npm-normalize-package-bin": "^4.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/npm-install-checks": {
-      "version": "7.1.1",
-      "inBundle": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "semver": "^7.1.1"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/npm-normalize-package-bin": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/npm-package-arg": {
-      "version": "12.0.1",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "hosted-git-info": "^8.0.0",
-        "proc-log": "^5.0.0",
-        "semver": "^7.3.5",
-        "validate-npm-package-name": "^6.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/npm-packlist": {
-      "version": "10.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "ignore-walk": "^7.0.0"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/npm-pick-manifest": {
-      "version": "10.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "npm-install-checks": "^7.1.0",
-        "npm-normalize-package-bin": "^4.0.0",
-        "npm-package-arg": "^12.0.0",
-        "semver": "^7.3.5"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/npm-profile": {
-      "version": "11.0.1",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "npm-registry-fetch": "^18.0.0",
-        "proc-log": "^5.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/npm-registry-fetch": {
-      "version": "18.0.2",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/redact": "^3.0.0",
-        "jsonparse": "^1.3.1",
-        "make-fetch-happen": "^14.0.0",
-        "minipass": "^7.0.2",
-        "minipass-fetch": "^4.0.0",
-        "minizlib": "^3.0.1",
-        "npm-package-arg": "^12.0.0",
-        "proc-log": "^5.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/npm-registry-fetch/node_modules/minizlib": {
-      "version": "3.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.0.4",
-        "rimraf": "^5.0.5"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/npm/node_modules/npm-user-validate": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/p-map": {
-      "version": "7.0.3",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/npm/node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "inBundle": true,
-      "license": "BlueOak-1.0.0"
-    },
-    "node_modules/npm/node_modules/pacote": {
-      "version": "21.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "@npmcli/git": "^6.0.0",
-        "@npmcli/installed-package-contents": "^3.0.0",
-        "@npmcli/package-json": "^6.0.0",
-        "@npmcli/promise-spawn": "^8.0.0",
-        "@npmcli/run-script": "^9.0.0",
-        "cacache": "^19.0.0",
-        "fs-minipass": "^3.0.0",
-        "minipass": "^7.0.2",
-        "npm-package-arg": "^12.0.0",
-        "npm-packlist": "^10.0.0",
-        "npm-pick-manifest": "^10.0.0",
-        "npm-registry-fetch": "^18.0.0",
-        "proc-log": "^5.0.0",
-        "promise-retry": "^2.0.1",
-        "sigstore": "^3.0.0",
-        "ssri": "^12.0.0",
-        "tar": "^6.1.11"
-      },
-      "bin": {
-        "pacote": "bin/index.js"
-      },
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
-    "node_modules/npm/node_modules/parse-conflict-json": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "json-parse-even-better-errors": "^4.0.0",
-        "just-diff": "^6.0.0",
-        "just-diff-apply": "^5.2.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/path-scurry": {
-      "version": "1.11.1",
-      "inBundle": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/npm/node_modules/proc-log": {
-      "version": "5.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/proggy": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/promise-all-reject-late": {
-      "version": "1.0.1",
-      "inBundle": true,
-      "license": "ISC",
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/promise-call-limit": {
-      "version": "3.0.2",
-      "inBundle": true,
-      "license": "ISC",
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/promise-inflight": {
-      "version": "1.0.1",
-      "inBundle": true,
-      "license": "ISC"
-    },
-    "node_modules/npm/node_modules/promise-retry": {
-      "version": "2.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "err-code": "^2.0.2",
-        "retry": "^0.12.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/npm/node_modules/promzard": {
-      "version": "2.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "read": "^4.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/qrcode-terminal": {
-      "version": "0.12.0",
-      "inBundle": true,
-      "bin": {
-        "qrcode-terminal": "bin/qrcode-terminal.js"
-      }
-    },
-    "node_modules/npm/node_modules/read": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "mute-stream": "^2.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/read-cmd-shim": {
-      "version": "5.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/read-package-json-fast": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "json-parse-even-better-errors": "^4.0.0",
-        "npm-normalize-package-bin": "^4.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/retry": {
-      "version": "0.12.0",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/npm/node_modules/rimraf": {
-      "version": "5.0.10",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "glob": "^10.3.7"
-      },
-      "bin": {
-        "rimraf": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "inBundle": true,
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/npm/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "inBundle": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/npm/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/signal-exit": {
-      "version": "4.1.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/npm/node_modules/sigstore": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@sigstore/bundle": "^3.0.0",
-        "@sigstore/core": "^2.0.0",
-        "@sigstore/protobuf-specs": "^0.3.2",
-        "@sigstore/sign": "^3.0.0",
-        "@sigstore/tuf": "^3.0.0",
-        "@sigstore/verify": "^2.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/smart-buffer": {
-      "version": "4.2.0",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/socks": {
-      "version": "2.8.3",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "ip-address": "^9.0.5",
-        "smart-buffer": "^4.2.0"
-      },
-      "engines": {
-        "node": ">= 10.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/socks-proxy-agent": {
-      "version": "8.0.5",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "agent-base": "^7.1.2",
-        "debug": "^4.3.4",
-        "socks": "^2.8.3"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/npm/node_modules/spdx-correct": {
-      "version": "3.2.0",
-      "inBundle": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/spdx-correct/node_modules/spdx-expression-parse": {
-      "version": "3.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/spdx-exceptions": {
-      "version": "2.5.0",
-      "inBundle": true,
-      "license": "CC-BY-3.0"
-    },
-    "node_modules/npm/node_modules/spdx-expression-parse": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/spdx-license-ids": {
-      "version": "3.0.21",
-      "inBundle": true,
-      "license": "CC0-1.0"
-    },
-    "node_modules/npm/node_modules/sprintf-js": {
-      "version": "1.1.3",
-      "inBundle": true,
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/npm/node_modules/ssri": {
-      "version": "12.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.3"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/supports-color": {
-      "version": "9.4.0",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
-    "node_modules/npm/node_modules/tar": {
-      "version": "6.2.1",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^5.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/npm/node_modules/tar/node_modules/fs-minipass": {
-      "version": "2.1.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
-      "version": "3.3.6",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/tar/node_modules/minipass": {
-      "version": "5.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/npm/node_modules/text-table": {
-      "version": "0.2.0",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/tiny-relative-date": {
-      "version": "1.3.0",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/treeverse": {
-      "version": "3.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/tuf-js": {
-      "version": "3.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "@tufjs/models": "3.0.1",
-        "debug": "^4.3.6",
-        "make-fetch-happen": "^14.0.1"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/unique-filename": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "unique-slug": "^5.0.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/unique-slug": {
-      "version": "5.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "imurmurhash": "^0.1.4"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/validate-npm-package-license": {
-      "version": "3.0.4",
-      "inBundle": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/validate-npm-package-license/node_modules/spdx-expression-parse": {
-      "version": "3.0.1",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "node_modules/npm/node_modules/validate-npm-package-name": {
-      "version": "6.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/walk-up-path": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": "20 || >=22"
-      }
-    },
-    "node_modules/npm/node_modules/which": {
-      "version": "5.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^3.1.1"
-      },
-      "bin": {
-        "node-which": "bin/which.js"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/which/node_modules/isexe": {
-      "version": "3.1.1",
-      "inBundle": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/npm/node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/npm/node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/npm/node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/npm/node_modules/wrap-ansi/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "inBundle": true,
-      "license": "MIT"
-    },
-    "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": {
-      "version": "5.1.2",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/npm/node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "inBundle": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/npm/node_modules/write-file-atomic": {
-      "version": "6.0.0",
-      "inBundle": true,
-      "license": "ISC",
-      "dependencies": {
-        "imurmurhash": "^0.1.4",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": "^18.17.0 || >=20.5.0"
-      }
-    },
-    "node_modules/npm/node_modules/yallist": {
-      "version": "4.0.0",
-      "inBundle": true,
-      "license": "ISC"
-    },
     "node_modules/nwsapi": {
       "version": "2.2.16",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.16.tgz",
diff --git a/src/app/(outerbase)/auth-provider.tsx b/src/app/(outerbase)/auth-provider.tsx
new file mode 100644
index 00000000..0dcf5036
--- /dev/null
+++ b/src/app/(outerbase)/auth-provider.tsx
@@ -0,0 +1,24 @@
+"use client";
+import { usePathname, useRouter } from "next/navigation";
+import { PropsWithChildren, useEffect } from "react";
+import { useSession } from "./session-provider";
+
+export default function AuthProvider({ children }: PropsWithChildren) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { isLoading, session } = useSession();
+
+  useEffect(() => {
+    if (isLoading) return;
+    if (!session?.session || !session?.user) {
+      localStorage.setItem("continue-redirect", pathname);
+      router.push("/signin");
+    }
+  }, [isLoading, session, pathname, router]);
+
+  if (isLoading || !session) {
+    return <div>Session Loading...</div>;
+  }
+
+  return <>{children}</>;
+}
diff --git a/src/app/(outerbase)/layout.tsx b/src/app/(outerbase)/layout.tsx
new file mode 100644
index 00000000..853ce284
--- /dev/null
+++ b/src/app/(outerbase)/layout.tsx
@@ -0,0 +1,20 @@
+import { OuterbaseSessionProvider } from "@/app/(outerbase)/session-provider";
+import ClientOnly from "@/components/client-only";
+import ThemeLayout from "../(theme)/theme_layout";
+import { WorkspaceProvider } from "./workspace-provider";
+
+export default function OuterbaseLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ThemeLayout>
+      <ClientOnly>
+        <OuterbaseSessionProvider>
+          <WorkspaceProvider>{children}</WorkspaceProvider>
+        </OuterbaseSessionProvider>
+      </ClientOnly>
+    </ThemeLayout>
+  );
+}
diff --git a/src/app/(outerbase)/navigation.tsx b/src/app/(outerbase)/navigation.tsx
index bc69f167..a89172f3 100644
--- a/src/app/(outerbase)/navigation.tsx
+++ b/src/app/(outerbase)/navigation.tsx
@@ -86,12 +86,8 @@ function WorkspaceSelector() {
 export function NavigationBar() {
   const { currentWorkspace } = useWorkspaces();
 
-  if (!currentWorkspace) {
-    return null;
-  }
-
   return (
-    <div className="flex h-14 items-center gap-2 px-2">
+    <div className="bg-background sticky top-0 z-10 flex h-14 items-center gap-2 px-2">
       <OuterbaseIcon className="h-8 w-8" />
       <Popover>
         <PopoverTrigger asChild>
diff --git a/src/app/(outerbase)/session-provider.tsx b/src/app/(outerbase)/session-provider.tsx
index 4e4309c4..9600d9f3 100644
--- a/src/app/(outerbase)/session-provider.tsx
+++ b/src/app/(outerbase)/session-provider.tsx
@@ -1,6 +1,5 @@
 "use client";
-import { usePathname, useRouter } from "next/navigation";
-import { createContext, PropsWithChildren, useContext, useEffect } from "react";
+import { createContext, PropsWithChildren, useContext } from "react";
 import useSWR from "swr";
 import { getOuterbaseSession } from "../../outerbase-cloud/api";
 import {
@@ -9,22 +8,22 @@ import {
 } from "../../outerbase-cloud/api-type";
 
 interface OuterebaseSessionContextProps {
-  session: OuterbaseAPISession;
-  user: OuterbaseAPIUser;
+  isLoading: boolean;
+  session?: {
+    session: OuterbaseAPISession;
+    user: OuterbaseAPIUser;
+  };
 }
 
-const OuterbaseSessionContext = createContext<{
-  session: OuterbaseAPISession;
-  user: OuterbaseAPIUser;
-}>({} as OuterebaseSessionContextProps);
+const OuterbaseSessionContext = createContext<OuterebaseSessionContextProps>({
+  isLoading: true,
+});
 
 export function useSession() {
   return useContext(OuterbaseSessionContext);
 }
 
 export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
-  const router = useRouter();
-  const pathname = usePathname();
   const token =
     typeof window !== "undefined" ? localStorage.getItem("ob-token") : "";
 
@@ -40,22 +39,8 @@ export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
     }
   );
 
-  useEffect(() => {
-    if (isLoading) return;
-    if (!data?.session || !data?.user) {
-      localStorage.setItem("continue-redirect", pathname);
-      router.push("/signin");
-    }
-  }, [isLoading, data, pathname, router]);
-
-  if (isLoading || !data) {
-    return <div>Session Loading...</div>;
-  }
-
   return (
-    <OuterbaseSessionContext.Provider
-      value={{ session: data?.session, user: data?.user }}
-    >
+    <OuterbaseSessionContext.Provider value={{ session: data, isLoading }}>
       {children}
     </OuterbaseSessionContext.Provider>
   );
diff --git a/src/app/(outerbase)/w/[workspaceId]/layout.tsx b/src/app/(outerbase)/w/[workspaceId]/layout.tsx
index 02b2a905..3034200b 100644
--- a/src/app/(outerbase)/w/[workspaceId]/layout.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/layout.tsx
@@ -1,20 +1,9 @@
-import { OuterbaseSessionProvider } from "@/app/(outerbase)/session-provider";
-import ClientOnly from "@/components/client-only";
-import ThemeLayout from "../../../(theme)/theme_layout";
-import { WorkspaceProvider } from "../../workspace-provider";
+import AuthProvider from "../../auth-provider";
 
-export default function RootLayout({
+export default function OuterbaseLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <ThemeLayout>
-      <ClientOnly>
-        <OuterbaseSessionProvider>
-          <WorkspaceProvider>{children}</WorkspaceProvider>
-        </OuterbaseSessionProvider>
-      </ClientOnly>
-    </ThemeLayout>
-  );
+  return <AuthProvider>{children}</AuthProvider>;
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx b/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
deleted file mode 100644
index c72eb0dc..00000000
--- a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-"use client";
-
-import { ButtonGroup, ButtonGroupItem } from "@/components/button-group";
-import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
-import ResourceCard from "@/components/resource-card";
-import {
-  getDatabaseFriendlyName,
-  getDatabaseIcon,
-  getDatabaseVisual,
-} from "@/components/resource-card/utils";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { timeSince } from "@/lib/utils-datetime";
-import { getOuterbaseDashboardList } from "@/outerbase-cloud/api";
-import {
-  CalendarDots,
-  SortAscending,
-  SortDescending,
-} from "@phosphor-icons/react";
-import { useParams, useRouter } from "next/navigation";
-import { useMemo } from "react";
-import useSWR from "swr";
-import { NavigationBar } from "../../navigation";
-import { useWorkspaces } from "../../workspace-provider";
-import { deleteBaseDialog } from "./dialog-base-delete";
-import { createBoardDialog } from "./dialog-board-create";
-import { deleteBoardDialog } from "./dialog-board-delete";
-
-interface ResourceItem {
-  id: string;
-  type: string;
-  name: string;
-  href: string;
-  status?: string;
-}
-
-export default function WorkspaceListPageClient() {
-  const router = useRouter();
-  const { currentWorkspace, refreshWorkspace } = useWorkspaces();
-  const { workspaceId } = useParams<{ workspaceId: string }>();
-
-  const { data: boards, mutate } = useSWR(
-    `/workspace/${workspaceId}/boards`,
-    () => {
-      return getOuterbaseDashboardList(workspaceId);
-    },
-    {
-      revalidateIfStale: false,
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-    }
-  );
-
-  const resources: ResourceItem[] = useMemo(() => {
-    const baseResources = (currentWorkspace?.bases ?? []).map((base) => ({
-      id: base.id,
-      type: base.sources[0]?.type ?? "database",
-      name: base.name,
-      href: `/w/${currentWorkspace?.short_name}/${base.short_name}`,
-      status: base.last_analytics_event?.created_at
-        ? `Last viewed ${timeSince(new Date(base.last_analytics_event?.created_at))} ago`
-        : undefined,
-    }));
-
-    const boardResources = (boards?.items ?? [])
-      .filter((board) => board.base_id === null)
-      .map((board) => ({
-        id: board.id,
-        type: "board",
-        name: board.name,
-        href: `/w/${currentWorkspace?.short_name}/board/${board.id}`,
-        status: `Last updated ${timeSince(new Date(board?.updated_at ?? ""))} ago`,
-      }));
-
-    const allResources = [...baseResources, ...boardResources];
-
-    return allResources.sort((a, b) =>
-      (a.name ?? "").localeCompare(b.name ?? "")
-    );
-  }, [currentWorkspace, boards]);
-
-  return (
-    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
-      <NavigationBar />
-
-      <div className="container mx-auto p-4">
-        <div className="mb-8">
-          <Toolbar>
-            <ButtonGroup>
-              <ButtonGroupItem>All</ButtonGroupItem>
-              <ButtonGroupItem>Bases</ButtonGroupItem>
-              <ButtonGroupItem>Boards</ButtonGroupItem>
-            </ButtonGroup>
-            <ButtonGroup>
-              <ButtonGroupItem>
-                <SortAscending size={16} />
-              </ButtonGroupItem>
-              <ButtonGroupItem>
-                <SortDescending size={16} />
-              </ButtonGroupItem>
-              <ButtonGroupItem>
-                <CalendarDots size={16} />
-              </ButtonGroupItem>
-              <ButtonGroupItem>
-                <CalendarDots size={16} />
-              </ButtonGroupItem>
-              <ButtonGroupItem>
-                <CalendarDots size={16} />
-              </ButtonGroupItem>
-            </ButtonGroup>
-
-            <ToolbarFiller />
-            <DropdownMenu>
-              <DropdownMenuTrigger>
-                <Button>New Resource</Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem>New Base</DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={async () => {
-                    const createdBoard = await createBoardDialog.show({
-                      workspaceId,
-                    });
-
-                    if (createdBoard) {
-                      mutate();
-                      router.push(`/w/${workspaceId}/board/${createdBoard.id}`);
-                    }
-                  }}
-                >
-                  New Board
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </Toolbar>
-        </div>
-
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
-          {resources.map((resource) => (
-            <ResourceCard
-              className="w-full"
-              key={resource.id}
-              color="default"
-              icon={getDatabaseIcon(resource.type)}
-              href={resource.href}
-              title={resource.name}
-              subtitle={getDatabaseFriendlyName(resource.type)}
-              visual={getDatabaseVisual(resource.type)}
-              status={resource.status}
-            >
-              {resource.type === "board" && (
-                <DropdownMenuItem
-                  onClick={() => {
-                    deleteBoardDialog
-                      .show({
-                        workspaceId,
-                        boardId: resource.id,
-                        boardName: resource.name,
-                      })
-                      .then(() => mutate());
-                  }}
-                >
-                  Remove board
-                </DropdownMenuItem>
-              )}
-              {resource.type !== "board" && (
-                <DropdownMenuItem
-                  onClick={() => {
-                    deleteBaseDialog
-                      .show({
-                        workspaceId,
-                        baseId: resource.id,
-                        baseName: resource.name,
-                      })
-                      .then(() => refreshWorkspace());
-                  }}
-                >
-                  Remove
-                </DropdownMenuItem>
-              )}
-            </ResourceCard>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 006063e3..85277615 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -1,11 +1,192 @@
 "use client";
-import ClientOnly from "@/components/client-only";
-import WorkspaceListPageClient from "./page-client";
 
-export default function WorkspaceListPage() {
+import { ButtonGroup, ButtonGroupItem } from "@/components/button-group";
+import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
+import ResourceCard from "@/components/resource-card";
+import {
+  getDatabaseFriendlyName,
+  getDatabaseIcon,
+  getDatabaseVisual,
+} from "@/components/resource-card/utils";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { timeSince } from "@/lib/utils-datetime";
+import { getOuterbaseDashboardList } from "@/outerbase-cloud/api";
+import {
+  CalendarDots,
+  SortAscending,
+  SortDescending,
+} from "@phosphor-icons/react";
+import { useParams, useRouter } from "next/navigation";
+import { useMemo } from "react";
+import useSWR from "swr";
+import { NavigationBar } from "../../navigation";
+import { useWorkspaces } from "../../workspace-provider";
+import { deleteBaseDialog } from "./dialog-base-delete";
+import { createBoardDialog } from "./dialog-board-create";
+import { deleteBoardDialog } from "./dialog-board-delete";
+
+interface ResourceItem {
+  id: string;
+  type: string;
+  name: string;
+  href: string;
+  status?: string;
+}
+
+export default function WorkspaceListPageClient() {
+  const router = useRouter();
+  const { currentWorkspace, refreshWorkspace } = useWorkspaces();
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+
+  const { data: boards, mutate } = useSWR(
+    `/workspace/${workspaceId}/boards`,
+    () => {
+      return getOuterbaseDashboardList(workspaceId);
+    },
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  const resources: ResourceItem[] = useMemo(() => {
+    const baseResources = (currentWorkspace?.bases ?? []).map((base) => ({
+      id: base.id,
+      type: base.sources[0]?.type ?? "database",
+      name: base.name,
+      href: `/w/${currentWorkspace?.short_name}/${base.short_name}`,
+      status: base.last_analytics_event?.created_at
+        ? `Last viewed ${timeSince(new Date(base.last_analytics_event?.created_at))} ago`
+        : undefined,
+    }));
+
+    const boardResources = (boards?.items ?? [])
+      .filter((board) => board.base_id === null)
+      .map((board) => ({
+        id: board.id,
+        type: "board",
+        name: board.name,
+        href: `/w/${currentWorkspace?.short_name}/board/${board.id}`,
+        status: `Last updated ${timeSince(new Date(board?.updated_at ?? ""))} ago`,
+      }));
+
+    const allResources = [...baseResources, ...boardResources];
+
+    return allResources.sort((a, b) =>
+      (a.name ?? "").localeCompare(b.name ?? "")
+    );
+  }, [currentWorkspace, boards]);
+
   return (
-    <ClientOnly>
-      <WorkspaceListPageClient />
-    </ClientOnly>
+    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+      <NavigationBar />
+
+      <div className="container mx-auto p-4">
+        <div className="mb-8">
+          <Toolbar>
+            <ButtonGroup>
+              <ButtonGroupItem>All</ButtonGroupItem>
+              <ButtonGroupItem>Bases</ButtonGroupItem>
+              <ButtonGroupItem>Boards</ButtonGroupItem>
+            </ButtonGroup>
+            <ButtonGroup>
+              <ButtonGroupItem>
+                <SortAscending size={16} />
+              </ButtonGroupItem>
+              <ButtonGroupItem>
+                <SortDescending size={16} />
+              </ButtonGroupItem>
+              <ButtonGroupItem>
+                <CalendarDots size={16} />
+              </ButtonGroupItem>
+              <ButtonGroupItem>
+                <CalendarDots size={16} />
+              </ButtonGroupItem>
+              <ButtonGroupItem>
+                <CalendarDots size={16} />
+              </ButtonGroupItem>
+            </ButtonGroup>
+
+            <ToolbarFiller />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button>New Resource</Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem>New Base</DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={async () => {
+                    const createdBoard = await createBoardDialog.show({
+                      workspaceId,
+                    });
+
+                    if (createdBoard) {
+                      mutate();
+                      router.push(`/w/${workspaceId}/board/${createdBoard.id}`);
+                    }
+                  }}
+                >
+                  New Board
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </Toolbar>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {resources.map((resource) => (
+            <ResourceCard
+              className="w-full"
+              key={resource.id}
+              color="default"
+              icon={getDatabaseIcon(resource.type)}
+              href={resource.href}
+              title={resource.name}
+              subtitle={getDatabaseFriendlyName(resource.type)}
+              visual={getDatabaseVisual(resource.type)}
+              status={resource.status}
+            >
+              {resource.type === "board" && (
+                <DropdownMenuItem
+                  onClick={() => {
+                    deleteBoardDialog
+                      .show({
+                        workspaceId,
+                        boardId: resource.id,
+                        boardName: resource.name,
+                      })
+                      .then(() => mutate());
+                  }}
+                >
+                  Remove board
+                </DropdownMenuItem>
+              )}
+              {resource.type !== "board" && (
+                <DropdownMenuItem
+                  onClick={() => {
+                    deleteBaseDialog
+                      .show({
+                        workspaceId,
+                        baseId: resource.id,
+                        baseName: resource.name,
+                      })
+                      .then(() => refreshWorkspace());
+                  }}
+                >
+                  Remove
+                </DropdownMenuItem>
+              )}
+            </ResourceCard>
+          ))}
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/src/app/(outerbase)/w/page.tsx b/src/app/(outerbase)/w/page.tsx
new file mode 100644
index 00000000..f3feb8f9
--- /dev/null
+++ b/src/app/(outerbase)/w/page.tsx
@@ -0,0 +1,4 @@
+"use client";
+export default function OuterbaseMainPage() {
+  return <div>Something here</div>;
+}

From cdbd72dcf2d23f9ceba4c9ddb5072ea803d96682 Mon Sep 17 00:00:00 2001
From: keppere <50957820+keppere@users.noreply.github.com>
Date: Fri, 7 Feb 2025 13:50:26 +0700
Subject: [PATCH 013/106] Chart editor (#343)

* feat: chart beta

* refact: change theme provider

* refact: remove unused chart page and sidebar menu item

* refact: enhance chart options builder and improve theme handling

* refact: simplify chart editor state management and add simple combobox component

* refact: rename chart types and options builder files, add simple input and toggle components

* prevent flicking

* feat: handle chart series
* Add more series
* Change series
* Remove

* feat: update chart editor options and improve text color handling

* feat: add color picker to chart series combobox and update color handling

* feat: enhance chart button styles with new color variables

* feat: add background selection component with gradient options to chart

---------

Co-authored-by: Visal .In <invisal@gmail.com>
---
 package-lock.json                             |  71 ++++++++
 package.json                                  |   2 +
 src/app/globals.css                           |  98 ++++++----
 src/app/storybook/chart-editor/page.tsx       |  13 +-
 .../chart/chart-background-selection.tsx      | 157 ++++++++++++++++
 .../chart/chart-series-combobox.tsx           | 170 ++++++++++++++++++
 src/components/chart/chart-type-button.tsx    |   7 +-
 src/components/chart/chart-type.ts            |   1 +
 .../chart/echart-options-builder.ts           |   8 +-
 src/components/chart/edit-chart-menu.tsx      | 164 ++++++++++++++---
 src/components/chart/index.tsx                |  14 +-
 src/components/chart/simple-color-picker.tsx  |  78 ++++++++
 src/components/chart/simple-input.tsx         |   8 +-
 13 files changed, 727 insertions(+), 64 deletions(-)
 create mode 100644 src/components/chart/chart-background-selection.tsx
 create mode 100644 src/components/chart/chart-series-combobox.tsx
 create mode 100644 src/components/chart/simple-color-picker.tsx

diff --git a/package-lock.json b/package-lock.json
index 8c2f3a9d..bc2cb3c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -78,6 +78,7 @@
         "next-themes": "^0.4.4",
         "oslo": "^1.1.3",
         "react": "19.0.0",
+        "react-color": "^2.19.3",
         "react-dom": "19.0.0",
         "react-grid-layout": "^1.5.0",
         "react-resizable-panels": "^2.1.7",
@@ -100,6 +101,7 @@
         "@types/lodash": "^4.17.9",
         "@types/node": "^20",
         "@types/react": "^18",
+        "@types/react-color": "^3.0.13",
         "@types/react-dom": "^18",
         "@types/showdown": "^2.0.6",
         "@types/sql.js": "^1.4.9",
@@ -2265,6 +2267,14 @@
       "deprecated": "Use @eslint/object-schema instead",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@@ -6726,6 +6736,18 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-color": {
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.13.tgz",
+      "integrity": "sha512-2c/9FZ4ixC5T3JzN0LP5Cke2Mf0MKOP2Eh0NPDPWmuVH3NjPyhEjqNMQpN1Phr5m74egAy+p2lYNAFrX1z9Yrg==",
+      "dev": true,
+      "dependencies": {
+        "@types/reactcss": "*"
+      },
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.3.5",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
@@ -6744,6 +6766,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/reactcss": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.13.tgz",
+      "integrity": "sha512-gi3S+aUi6kpkF5vdhUsnkwbiSEIU/BEJyD7kBy2SudWBUuKmJk8AQKE0OVcQQeEy40Azh0lV6uynxlikYIJuwg==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/semver": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
@@ -13702,6 +13733,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -13850,6 +13886,11 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
+    "node_modules/material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -16020,6 +16061,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-color": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
+      "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
+      "dependencies": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
@@ -16169,6 +16227,14 @@
         }
       }
     },
+    "node_modules/reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "dependencies": {
+        "lodash": "^4.0.1"
+      }
+    },
     "node_modules/recma-build-jsx": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/recma-build-jsx/-/recma-build-jsx-1.0.0.tgz",
@@ -17520,6 +17586,11 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
+    },
     "node_modules/tippy.js": {
       "version": "6.3.7",
       "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
diff --git a/package.json b/package.json
index 30af237a..3d36303b 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
     "next-themes": "^0.4.4",
     "oslo": "^1.1.3",
     "react": "19.0.0",
+    "react-color": "^2.19.3",
     "react-dom": "19.0.0",
     "react-grid-layout": "^1.5.0",
     "react-resizable-panels": "^2.1.7",
@@ -120,6 +121,7 @@
     "@types/lodash": "^4.17.9",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-color": "^3.0.13",
     "@types/react-dom": "^18",
     "@types/showdown": "^2.0.6",
     "@types/sql.js": "^1.4.9",
diff --git a/src/app/globals.css b/src/app/globals.css
index 1e1981d1..f99f5678 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -38,6 +38,9 @@
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
 
+  --color-chart-button-bg: var(--chart-button-bg);
+  --color-chart-button-selected: var(--chart-button-selected);
+
   --color-selected: var(--selected);
 
   --radius-lg: var(--radius);
@@ -69,7 +72,6 @@
   }
 
   @keyframes shake {
-
     10%,
     90% {
       transform: translate3d(-1px, 0, 0);
@@ -115,7 +117,6 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-
   *,
   ::after,
   ::before,
@@ -126,7 +127,6 @@
 }
 
 @layer utilities {
-
   html,
   body {
     overscroll-behavior-x: none;
@@ -187,6 +187,9 @@
 
     --selected: #e2e8f0;
     --scroll-bar: #e2e8f0;
+
+    --chart-button-bg: #f5f5f5;
+    --chart-button-selected: #171717;
   }
 
   .dark {
@@ -223,6 +226,9 @@
 
     --selected: #222;
     --scroll-bar: #353535;
+
+    --chart-button-bg: #404040;
+    --chart-button-selected: #ffffff;
   }
 }
 
@@ -366,7 +372,8 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
@@ -377,7 +384,8 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
@@ -387,7 +395,8 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+1F00-1FFF;
 }
 
@@ -397,7 +406,8 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0370-03FF;
 }
 
@@ -407,7 +417,8 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
     U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
     U+0329, U+1EA0-1EF9, U+20AB;
@@ -419,7 +430,8 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
     U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
@@ -430,7 +442,8 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2")
+    format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
@@ -442,7 +455,8 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
@@ -453,7 +467,8 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
@@ -463,7 +478,8 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+1F00-1FFF;
 }
 
@@ -473,7 +489,8 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0370-03FF;
 }
 
@@ -483,7 +500,8 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
     U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
     U+0329, U+1EA0-1EF9, U+20AB;
@@ -495,7 +513,8 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
     U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
@@ -506,7 +525,8 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2")
+    format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
@@ -518,7 +538,8 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
@@ -529,7 +550,8 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
@@ -539,7 +561,8 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+1F00-1FFF;
 }
 
@@ -549,7 +572,8 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0370-03FF;
 }
 
@@ -559,7 +583,8 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
     U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
     U+0329, U+1EA0-1EF9, U+20AB;
@@ -571,7 +596,8 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
     U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
@@ -582,7 +608,8 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2")
+    format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
@@ -594,7 +621,8 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
 }
@@ -605,7 +633,8 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
@@ -615,7 +644,8 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+1F00-1FFF;
 }
 
@@ -625,7 +655,8 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0370-03FF;
 }
 
@@ -635,7 +666,8 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
     U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
     U+0329, U+1EA0-1EF9, U+20AB;
@@ -647,7 +679,8 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2")
+    format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
     U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
@@ -658,7 +691,8 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2") format("woff2");
+  src: url("./fonts/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2")
+    format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
@@ -686,4 +720,4 @@
 .window-tab-scrollbar:hover::-webkit-scrollbar-thumb:hover {
   background-color: #888;
   /* Color of the scrollbar thumb on hover */
-}
\ No newline at end of file
+}
diff --git a/src/app/storybook/chart-editor/page.tsx b/src/app/storybook/chart-editor/page.tsx
index c3cc8e60..52ef07ba 100644
--- a/src/app/storybook/chart-editor/page.tsx
+++ b/src/app/storybook/chart-editor/page.tsx
@@ -57,10 +57,10 @@ const lineChartValue: ChartValue = {
       },
     ],
     options: {
-      text: "Hello world",
       theme: "afterburn",
       xAxisKey: "_year",
       yAxisKeys: ["seller", "seller2"],
+      foreground: "#ffffff",
       xAxisLabel: "cust year",
       yAxisLabel: "cust sellers",
       gradientStop: "#42788F",
@@ -82,21 +82,24 @@ const lineChartValue: ChartValue = {
   },
   source_id: "856a1855-2bee-4d87-9756-a783088c0568",
   type: "line",
-  updated_at: "2025-02-02T13:44:55.532Z",
+  updated_at: "2025-02-05T09:18:03.224Z",
   workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
 };
 
 export default function StorybookChartEditorPage() {
   const [chartValue, setChartValue] = useState(lineChartValue);
-  const [items] = useState(data);
   return (
     <div className="flex h-full space-x-4">
       <div className="w-full flex-1 border-r p-4">
-        <Chart value={chartValue} data={items} />
+        <Chart value={chartValue} data={data} />
       </div>
       <div className="w-[400px] flex-shrink-0 p-4">
         {/* render chart editor menu here */}
-        <EditChartMenu value={chartValue} setValue={setChartValue} />
+        <EditChartMenu
+          value={chartValue}
+          setValue={setChartValue}
+          data={data}
+        />
       </div>
     </div>
   );
diff --git a/src/components/chart/chart-background-selection.tsx b/src/components/chart/chart-background-selection.tsx
new file mode 100644
index 00000000..806460dd
--- /dev/null
+++ b/src/components/chart/chart-background-selection.tsx
@@ -0,0 +1,157 @@
+import { Dispatch, SetStateAction, useMemo } from "react";
+import { ChartValue } from "./chart-type";
+import SimpleInput from "./simple-input";
+import SimpleToggle from "./simple-toggle";
+
+const PRESET_GRADIENTS = [
+  { start: "#0A0A0A", stop: "#171717" },
+  { start: "#121212", stop: "#262626" },
+  { start: "#404040", stop: "#525252" },
+  { start: "#737373", stop: "#A3A3A3" },
+  { start: "#D4D4D4", stop: "#E5E5E5" },
+  { start: "#FAFAFA", stop: "#FFFFFF" },
+  { start: "#655B94", stop: "#8E85B5" },
+  { start: "#2C4F5E", stop: "#42788F" },
+  { start: "#33A698", stop: "#54CDBD" },
+  { start: "#178DE0", stop: "#3ADAFA" },
+  { start: "#C05455", stop: "#D58A8B" },
+  { start: "#EA8066", stop: "#F1AB9B" },
+  { start: "#E7CFC1", stop: "#F1EFE9" },
+  { start: "#F5A96D", stop: "#F9D384" },
+  { start: "#FFCDE0", stop: "#FEF7FA" },
+  { start: "#C5E4FE", stop: "#F5FAFF" },
+  { start: "#ADD7FF", stop: "#F4F9FF" },
+  { start: "#FFBBDF", stop: "#FFF4F8" },
+];
+
+interface ChartBackgroundSelectionProps {
+  value: ChartValue;
+  setValue: Dispatch<SetStateAction<ChartValue>>;
+}
+
+export default function ChartBackgroundSelection({
+  value,
+  setValue,
+}: ChartBackgroundSelectionProps) {
+  const gradientSection = useMemo(() => {
+    return (
+      <div>
+        <div className="flex gap-4 space-y-2 pt-4">
+          <div>
+            <p className="mb-1.5 text-xs font-bold opacity-70">Start Color</p>
+            <SimpleInput
+              value={value.params.options.gradientStart || ""}
+              onSumit={function (v: string): void {
+                setValue((prev) => {
+                  return {
+                    ...prev,
+                    params: {
+                      ...prev.params,
+                      options: {
+                        ...prev.params.options,
+                        gradientStart: v,
+                      },
+                    },
+                  };
+                });
+              }}
+            ></SimpleInput>
+          </div>
+          <div>
+            <p className="mb-1.5 text-xs font-bold opacity-70">Stop Color</p>
+            <SimpleInput
+              value={value.params.options.gradientStop || ""}
+              onSumit={function (v: string): void {
+                setValue((prev) => {
+                  return {
+                    ...prev,
+                    params: {
+                      ...prev.params,
+                      options: {
+                        ...prev.params.options,
+                        gradientStop: v,
+                      },
+                    },
+                  };
+                });
+              }}
+            ></SimpleInput>
+          </div>
+        </div>
+        <div className="grid grid-cols-6 gap-2 pt-2">
+          {PRESET_GRADIENTS.map(({ start, stop }, index) => (
+            <div
+              key={index}
+              className="aspect-square cursor-pointer rounded-lg"
+              style={{
+                background: `linear-gradient(45deg, ${start}, ${stop})`,
+              }}
+              onClick={() => {
+                setValue((prev) => {
+                  return {
+                    ...prev,
+                    params: {
+                      ...prev.params,
+                      options: {
+                        ...prev.params.options,
+                        gradientStart: start,
+                        gradientStop: stop,
+                        backgroundImage: undefined,
+                      },
+                    },
+                  };
+                });
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }, [setValue, value]);
+
+  const handleBackgroundTypeChange = (v: string): void => {
+    setValue((prev) => {
+      return {
+        ...prev,
+        params: {
+          ...prev.params,
+          options: {
+            ...prev.params.options,
+            backgroundType: v,
+            backgroundImage: undefined,
+            gradientStart: undefined,
+            gradientStop: undefined,
+          },
+        },
+      };
+    });
+    console.log(value.params.options.gradientStart);
+  };
+
+  return (
+    <div>
+      <p className="mb-1.5 text-sm font-bold opacity-70">Background</p>
+      <div className="flex items-center justify-center pt-2">
+        <div className="w-[200px]">
+          <SimpleToggle
+            values={["None", "Gradient", "Image"]}
+            onChange={function (v: string): void {
+              handleBackgroundTypeChange(v.toLowerCase());
+            }}
+            selectedValue={capitalizeFirstChar(
+              value.params.options.backgroundType || "none"
+            )}
+          ></SimpleToggle>
+        </div>
+      </div>
+      <div>
+        {value.params.options.backgroundType === "gradient" && gradientSection}
+      </div>
+    </div>
+  );
+}
+
+function capitalizeFirstChar(word: string): string {
+  if (!word) return word;
+  return word.charAt(0).toUpperCase() + word.slice(1);
+}
diff --git a/src/components/chart/chart-series-combobox.tsx b/src/components/chart/chart-series-combobox.tsx
new file mode 100644
index 00000000..f4b02c28
--- /dev/null
+++ b/src/components/chart/chart-series-combobox.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { Check, MoreVertical } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import SimpleColorPicker from "./simple-color-picker";
+interface SimpleComboValue {
+  value: string;
+  label: string;
+}
+interface ChartSeriesComboboxProps {
+  values: SimpleComboValue[];
+  onChange: (v: string) => void;
+  placeholder?: string;
+  selected?: string;
+  onRemove: (v: string | null) => void;
+  color?: string;
+  onChangeColor: (color: string) => void;
+}
+
+export function ChartSeriesCombobox({
+  values,
+  onChange,
+  placeholder,
+  selected,
+  onRemove,
+  color,
+  onChangeColor,
+}: ChartSeriesComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [openMore, setOpenMore] = React.useState(false);
+  const [openColorPicker, setOpenColorPicker] = React.useState(false);
+  const [selectedValue, setSelectedValue] = React.useState<string | null>(
+    selected || null
+  );
+
+  React.useEffect(() => {
+    setSelectedValue(selected || null);
+  }, [selected]);
+
+  return (
+    <div>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            className="w-full justify-between"
+          >
+            <div className="flex items-center">
+              <Popover open={openColorPicker} onOpenChange={setOpenColorPicker}>
+                <PopoverTrigger asChild>
+                  <div
+                    className="mr-2 h-[16px] w-[16px] cursor-pointer rounded-full"
+                    style={{ backgroundColor: color || "gray" }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setOpenColorPicker(true);
+                    }}
+                  />
+                </PopoverTrigger>
+                <PopoverContent
+                  className="w-full p-0"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <SimpleColorPicker
+                    onChange={function (color: string): void {
+                      onChangeColor(color);
+                      setOpenColorPicker(false);
+                    }}
+                  ></SimpleColorPicker>
+                </PopoverContent>
+              </Popover>
+
+              {values
+                ? values.find((value) => value.value === selectedValue)?.label
+                : placeholder || ""}
+            </div>
+
+            <Popover open={openMore} onOpenChange={setOpenMore}>
+              <PopoverTrigger asChild>
+                <MoreVertical
+                  className="w-4 cursor-pointer opacity-30"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                />
+              </PopoverTrigger>
+              <PopoverContent
+                className="w-full p-0"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Command>
+                  <CommandList>
+                    <CommandGroup>
+                      <CommandItem
+                        value="remove"
+                        onSelect={() => {
+                          onRemove(selectedValue || null);
+                          setOpenMore(false);
+                        }}
+                      >
+                        Remove
+                      </CommandItem>
+                      <CommandItem
+                        value="remove_all"
+                        onSelect={() => {
+                          onRemove(null);
+                          setOpenMore(false);
+                        }}
+                      >
+                        Remove all
+                      </CommandItem>
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-full p-0">
+          <Command>
+            <CommandInput placeholder={placeholder} />
+            <CommandList>
+              <CommandEmpty>No framework found.</CommandEmpty>
+              <CommandGroup>
+                {values.map((value, idx) => (
+                  <CommandItem
+                    key={idx}
+                    value={value.value}
+                    onSelect={(currentValue) => {
+                      setSelectedValue(currentValue);
+                      onChange(currentValue);
+                      setOpen(false);
+                    }}
+                  >
+                    {value.label}
+                    <Check
+                      className={cn(
+                        "ml-auto",
+                        selectedValue === value.value
+                          ? "opacity-100"
+                          : "opacity-0"
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/src/components/chart/chart-type-button.tsx b/src/components/chart/chart-type-button.tsx
index 3e72ad9e..4a5bf315 100644
--- a/src/components/chart/chart-type-button.tsx
+++ b/src/components/chart/chart-type-button.tsx
@@ -22,7 +22,12 @@ export function ChartTypeButton({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        backgroundColor: isActive ? "var(--accent)" : "var(--secondary)",
+        backgroundColor: isActive
+          ? "var(--chart-button-selected)"
+          : "var(--chart-button-bg)",
+        color: isActive
+          ? "var(--chart-button-bg)"
+          : "var(--chart-button-selected)",
         border: "none",
         cursor: "pointer",
         transition: "background-color 0.3s",
diff --git a/src/components/chart/chart-type.ts b/src/components/chart/chart-type.ts
index 9288a2e2..0deffec0 100644
--- a/src/components/chart/chart-type.ts
+++ b/src/components/chart/chart-type.ts
@@ -19,6 +19,7 @@ export type SingleValueFormat =
   | "yen";
 
 interface ChartOptions {
+  backgroundImage?: string;
   foreground?: string;
   gradientStop?: string;
   gradientStart?: string;
diff --git a/src/components/chart/echart-options-builder.ts b/src/components/chart/echart-options-builder.ts
index 76127874..a8123a6c 100644
--- a/src/components/chart/echart-options-builder.ts
+++ b/src/components/chart/echart-options-builder.ts
@@ -108,10 +108,14 @@ export default class EchartOptionsBuilder {
       };
     }
 
-    const xAxisLabel = !this.chartValue.params.options.xAxisLabel
+    let xAxisLabel = !this.chartValue.params.options.xAxisLabel
       ? this.chartValue.params.options.xAxisKey
       : this.chartValue.params.options.xAxisLabel;
 
+    xAxisLabel = this.chartValue.params.options.xAxisLabelHidden
+      ? ""
+      : xAxisLabel;
+
     let yaxisLabel = !this.chartValue.params.options.yAxisLabel
       ? this.chartValue.params.options.yAxisKeys[0]
       : this.chartValue.params.options.yAxisLabel;
@@ -148,7 +152,7 @@ export default class EchartOptionsBuilder {
         containLabel: true,
       },
       xAxis: {
-        show: !this.chartValue.params.options.xAxisLabelHidden,
+        show: true,
         type:
           this.chartValue.type === "bar"
             ? "value"
diff --git a/src/components/chart/edit-chart-menu.tsx b/src/components/chart/edit-chart-menu.tsx
index 83f0c8ae..80816f21 100644
--- a/src/components/chart/edit-chart-menu.tsx
+++ b/src/components/chart/edit-chart-menu.tsx
@@ -9,8 +9,12 @@ import { NumberCircleOne } from "@phosphor-icons/react/dist/icons/NumberCircleOn
 import { Table } from "@phosphor-icons/react/dist/icons/Table";
 import { TextT } from "@phosphor-icons/react/dist/icons/TextT";
 import { ChartBarHorizontal } from "@phosphor-icons/react/dist/ssr";
-import { useMemo } from "react";
+import { Dispatch, SetStateAction, useMemo } from "react";
+import { ButtonGroupItem } from "../button-group";
+import ChartBackgroundSelection from "./chart-background-selection";
+import { ChartSeriesCombobox } from "./chart-series-combobox";
 import {
+  ChartData,
   ChartLabelDisplayY,
   ChartValue,
   SingleValueFormat,
@@ -22,14 +26,133 @@ import SimpleToggle from "./simple-toggle";
 
 interface EditChartMenuProps {
   value: ChartValue;
-  setValue: (value: ChartValue) => void;
+  data: ChartData[];
+  setValue: Dispatch<SetStateAction<ChartValue>>;
 }
 
-export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
+export default function EditChartMenu({
+  value,
+  setValue,
+  data,
+}: EditChartMenuProps) {
   const isNotChartComponent = ["text", "single_value", "table"].includes(
     value.type
   );
 
+  const allAxisKeys = Object.keys(data[0] ?? {});
+
+  const seriesList = useMemo(() => {
+    if (isNotChartComponent) return null;
+
+    return (
+      <div className="pt-4">
+        <div className="flex items-center justify-between pb-2">
+          <p className="mb-1.5 text-sm font-bold opacity-70">Series</p>
+          <ButtonGroupItem
+            onClick={() => {
+              if (value.params.options?.yAxisKeys.length === allAxisKeys.length)
+                return;
+
+              setValue((prev) => {
+                return {
+                  ...prev,
+                  params: {
+                    ...prev.params,
+                    options: {
+                      ...prev.params.options,
+                      yAxisKeys: [
+                        ...(prev.params.options?.yAxisKeys ?? []),
+                        allAxisKeys.filter(
+                          (key) =>
+                            !prev.params.options?.yAxisKeys?.includes(key)
+                        )[0],
+                      ],
+                    },
+                  },
+                };
+              });
+            }}
+          >
+            <p className="text-xs">Add Series</p>
+          </ButtonGroupItem>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          {value.params.options?.yAxisKeys?.map((key, index) => {
+            const color = value.params.options?.yAxisKeyColors
+              ? value.params.options?.yAxisKeyColors[key]
+              : undefined;
+            return (
+              <ChartSeriesCombobox
+                color={color}
+                key={index}
+                values={
+                  allAxisKeys.map((s) => {
+                    return {
+                      value: s,
+                      label: s,
+                    };
+                  }) ?? []
+                }
+                selected={key ?? ""}
+                placeholder="Select axis key..."
+                onChange={function (v: string): void {
+                  setValue({
+                    ...value,
+                    params: {
+                      ...value.params,
+                      options: {
+                        ...value.params.options,
+                        yAxisKeys: (() => {
+                          const yAxisKeys =
+                            value.params.options?.yAxisKeys ?? [];
+                          yAxisKeys[index] = v;
+                          return yAxisKeys;
+                        })(),
+                      },
+                    },
+                  });
+                }}
+                onRemove={(series) => {
+                  setValue({
+                    ...value,
+                    params: {
+                      ...value.params,
+                      options: {
+                        ...value.params.options,
+                        yAxisKeys: (() => {
+                          if (series === null) return [];
+                          return (value.params.options?.yAxisKeys ?? []).filter(
+                            (k) => k !== series
+                          );
+                        })(),
+                      },
+                    },
+                  });
+                }}
+                onChangeColor={function (color: string): void {
+                  setValue({
+                    ...value,
+                    params: {
+                      ...value.params,
+                      options: {
+                        ...value.params.options,
+                        yAxisKeyColors: {
+                          ...value.params.options?.yAxisKeyColors,
+                          [key]: color,
+                        },
+                      },
+                    },
+                  });
+                }}
+              ></ChartSeriesCombobox>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }, [allAxisKeys, isNotChartComponent, setValue, value]);
+
   const selectYAxisDisplay = useMemo(() => {
     if (isNotChartComponent) return null;
     const yAxisSideValues = [
@@ -72,16 +195,13 @@ export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
 
   const selectAxisKey = useMemo(() => {
     if (isNotChartComponent) return null;
-    const allKeys = [
-      value.params.options?.xAxisKey,
-      ...(value.params.options?.yAxisKeys ?? []),
-    ];
+
     return (
       <div>
-        <p className="mb-1.5 text-sm font-bold opacity-70">Select X Axis</p>
+        <p className="mb-1.5 text-sm font-bold opacity-70">X Axis Value</p>
         <SimpleCombobox
           values={
-            allKeys.map((key) => {
+            allAxisKeys.map((key) => {
               return {
                 value: key,
                 label: key,
@@ -98,7 +218,6 @@ export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
                 options: {
                   ...value.params.options,
                   xAxisKey: v,
-                  yAxisKeys: allKeys.filter((key) => key !== v),
                 },
               },
             });
@@ -106,13 +225,13 @@ export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
         ></SimpleCombobox>
       </div>
     );
-  }, [isNotChartComponent, setValue, value]);
+  }, [allAxisKeys, isNotChartComponent, setValue, value]);
 
   const yAxisLabelSection = useMemo(() => {
     if (isNotChartComponent) return null;
     return (
       <div>
-        <p className="mb-1.5 text-sm font-bold opacity-70">Y Axis Label</p>
+        <p className="mb-1.5 text-sm font-bold opacity-70">Y Axis</p>
         <div className="flex items-center justify-between gap-2">
           <SimpleInput
             value={value.params.options?.yAxisLabel}
@@ -130,6 +249,7 @@ export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
               });
             }}
           />
+          {selectYAxisDisplay}
 
           <SimpleToggle
             values={["Show", "Hide"]}
@@ -149,11 +269,11 @@ export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
               value.params.options?.yAxisLabelHidden ? "Hide" : "Show"
             }
           />
-          {selectYAxisDisplay}
         </div>
+        {seriesList}
       </div>
     );
-  }, [isNotChartComponent, selectYAxisDisplay, setValue, value]);
+  }, [isNotChartComponent, selectYAxisDisplay, seriesList, setValue, value]);
 
   const xAxisLabelSection = useMemo(() => {
     if (isNotChartComponent) return null;
@@ -291,21 +411,21 @@ export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
   }, [setValue, value]);
 
   const textColorSection = useMemo(() => {
-    if (value.type !== "text") return null;
     const textColorValues = [
       {
         value: "Automatic",
         label: "Automatic",
       },
       {
-        value: "White",
+        value: "#ffffff",
         label: "White",
       },
       {
-        value: "Black",
+        value: "#000000",
         label: "Black",
       },
     ];
+
     return (
       <div>
         <p className="mb-1.5 pt-2 text-sm font-bold opacity-70">Text Color</p>
@@ -318,7 +438,10 @@ export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
               ...value,
               params: {
                 ...value.params,
-                options: { ...value.params.options, foreground: v },
+                options: {
+                  ...value.params.options,
+                  foreground: v === "Automatic" ? undefined : v,
+                },
               },
             });
           }}
@@ -330,7 +453,7 @@ export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
   return (
     <div className="flex w-full flex-col gap-5 p-1 pb-4">
       <section key={1}>
-        <p className="mb-1.5 text-sm font-bold opacity-70">Type</p>
+        <p className="mb-1.5 text-sm font-bold opacity-70">Chart Type</p>
         <div className="grid grid-cols-6 gap-2">
           <ChartTypeButton
             icon={<ChartLine />}
@@ -416,11 +539,12 @@ export default function EditChartMenu({ value, setValue }: EditChartMenuProps) {
       </section>
 
       {textSection}
-      {textColorSection}
       {dataFormatSection}
       {xAxisLabelSection}
       {selectAxisKey}
       {yAxisLabelSection}
+      {textColorSection}
+      <ChartBackgroundSelection value={value} setValue={setValue} />
     </div>
   );
 }
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
index 051ecf00..595905e4 100644
--- a/src/components/chart/index.tsx
+++ b/src/components/chart/index.tsx
@@ -191,7 +191,7 @@ const ChartComponent = ({ value, data }: OuterbaseChartProps) => {
               }
 
               timerRef.current = setTimeout(() => {
-                chartInstance.setOption(chartBuilder.getChartOptions());
+                chartInstance.setOption(chartBuilder.getChartOptions(), true);
               }, 200);
 
               break;
@@ -226,8 +226,18 @@ function ChartBody({ value, data, modifier }: OuterbaseChartProps) {
 }
 
 export default function Chart(props: OuterbaseChartProps) {
+  let backGroundStyle = {};
+
+  if (props.value.params.options?.backgroundType === "gradient") {
+    const startColor = props.value.params.options?.gradientStart;
+    const stopColor = props.value.params.options?.gradientStop;
+    backGroundStyle = {
+      background: `linear-gradient(45deg, ${startColor}, ${stopColor})`,
+    };
+  }
+
   return (
-    <div className="flex h-full w-full flex-col p-6">
+    <div className="flex h-full w-full flex-col p-6" style={backGroundStyle}>
       <h1 className="mb-4 text-lg font-semibold">{props.value.name}</h1>
       <div className="flex-1">
         <ChartBody {...props} />
diff --git a/src/components/chart/simple-color-picker.tsx b/src/components/chart/simple-color-picker.tsx
new file mode 100644
index 00000000..2f59eaa3
--- /dev/null
+++ b/src/components/chart/simple-color-picker.tsx
@@ -0,0 +1,78 @@
+"use client";
+import { useState } from "react";
+import { SketchPicker } from "react-color";
+import { Button } from "../ui/button";
+
+const presetColors = [
+  "#FF0000", // Red
+  "#FF7F00", // Orange
+  "#FFFF00", // Yellow
+  "#7FFF00", // Chartreuse Green
+  "#00FF00", // Green
+  "#00FF7F", // Spring Green
+  "#00FFFF", // Cyan
+  "#007FFF", // Azure
+  "#0000FF", // Blue
+  "#7F00FF", // Violet
+  "#FF00FF", // Magenta
+  "#FF007F", // Rose
+  "#800000", // Maroon
+  "#FF4500", // Orange Red
+  "#FFD700", // Gold
+  "#808000", // Olive
+  "#008000", // Dark Green
+  "#008080", // Teal
+  "#000080", // Navy
+  "#800080", // Purple
+  "#8B0000", // Dark Red
+  "#FF6347", // Tomato
+  "#FFA500", // Orange
+  "#FFFFE0", // Light Yellow
+  "#ADFF2F", // Green Yellow
+  "#32CD32", // Lime Green
+  "#40E0D0", // Turquoise
+  "#4682B4", // Steel Blue
+  "#6A5ACD", // Slate Blue
+  "#EE82EE", // Violet
+  "#D2691E", // Chocolate
+  "#A52A2A", // Brown
+];
+
+interface SimpleColorPickerProps {
+  selected?: string;
+  onChange: (color: string) => void;
+}
+
+export default function SimpleColorPicker({
+  selected,
+  onChange,
+}: SimpleColorPickerProps) {
+  const [selectedColor, setSelectedColor] = useState<string>(selected || "");
+  return (
+    <div>
+      <div className="mt-2 shadow-lg">
+        <SketchPicker
+          disableAlpha
+          presetColors={presetColors}
+          color={selectedColor}
+          onChangeComplete={(color) => {
+            setSelectedColor(color.hex);
+          }}
+        />
+      </div>
+      <div className="m-2 flex items-center justify-between">
+        <p className="text-sm">
+          <span className="pr-2.5 font-bold">{selectedColor}</span>
+        </p>
+        <Button
+          onClick={() => {
+            onChange(selectedColor);
+          }}
+          variant="ghost"
+        >
+          <span className="text-sm">Ok</span>
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/chart/simple-input.tsx b/src/components/chart/simple-input.tsx
index bd920ff6..41169c92 100644
--- a/src/components/chart/simple-input.tsx
+++ b/src/components/chart/simple-input.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 interface SimpleInputProps {
   value?: string;
@@ -13,9 +13,13 @@ export default function SimpleInput({
 }: SimpleInputProps) {
   const [text, setText] = React.useState(value || "");
 
+  useEffect(() => {
+    setText(value || "");
+  }, [value]);
+
   return (
     <input
-      className="w-full rounded-md border p-2"
+      className="h-[36px] w-full rounded-md border p-2"
       placeholder={placeholder ?? ""}
       value={text ?? ""}
       onChange={(v) => {

From e17f8b01418d74641ab5690817026965ab917f44 Mon Sep 17 00:00:00 2001
From: Sokphal Adam <31284849+sokphaladam@users.noreply.github.com>
Date: Fri, 7 Feb 2025 13:50:39 +0700
Subject: [PATCH 014/106] Remove chart board (#341)

* try to use outerbase board data with our board

* refactor: improve board canvas item mapping and tooltip structure

* refactor: enhance toggle item styling based on edit mode

* plug chart inside

* require workspace to load

* refactor: menu layout and create refresh board

* refactor: improve chart component imports and style definitions

* add header and loading

* refactor: update BoardTool and BoardProvider components

---------

Co-authored-by: Visal .In <invisal@gmail.com>
Co-authored-by: sokphaladam <sokphaladam@sokphaladams-MacBook-Air.local>
---
 src/components/board/board-canvas.tsx        | 88 +++++++++++++------
 src/components/board/board-delete-dialog.tsx | 92 ++++++++++++++++++++
 2 files changed, 155 insertions(+), 25 deletions(-)
 create mode 100644 src/components/board/board-delete-dialog.tsx

diff --git a/src/components/board/board-canvas.tsx b/src/components/board/board-canvas.tsx
index 019a9c93..2ca78e12 100644
--- a/src/components/board/board-canvas.tsx
+++ b/src/components/board/board-canvas.tsx
@@ -10,7 +10,7 @@ import {
   Square,
   Trash2,
 } from "lucide-react";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import RGL, { WidthProvider } from "react-grid-layout";
 import { DashboardProps } from ".";
 import { buttonVariants } from "../ui/button";
@@ -21,6 +21,7 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import BoardChart from "./board-chart";
+import { BoardDeleteDialog } from "./board-delete-dialog";
 import "./board-style.css";
 
 export interface BoardChartLayout {
@@ -46,6 +47,7 @@ export function BoardCanvas({
   editMode,
   setEditMode,
 }: BoardProps) {
+  const [selectedKey, setSelectedKey] = useState<string>("");
   const sizes = [
     { w: 1, h: 1, name: "1", icon: <Square className="h-3 w-3" /> },
     {
@@ -89,7 +91,9 @@ export function BoardCanvas({
     {
       name: "Delete chart",
       icon: <Trash2 className="h-4 w-4" />,
-      onclick: () => {},
+      onclick: (key?: string) => {
+        setSelectedKey(key ?? "");
+      },
     },
   ];
 
@@ -103,42 +107,64 @@ export function BoardCanvas({
     [onChange, value.layout]
   );
 
+  const handleDeleteChart = useCallback(() => {
+    onChange(value.layout.filter((f) => f.i !== selectedKey));
+    setSelectedKey("");
+  }, [onChange, selectedKey, value.layout]);
+
   const mapItem: JSX.Element[] = value.layout.map((_, i) => {
     return (
       <div
         key={_.i}
-        className="group dark:bg-secondary relative flex items-center justify-center overflow-hidden rounded-md bg-white shadow hover:bg-gray-50 dark:text-white"
+        className="group dark:bg-secondary relative flex items-center justify-center rounded-md bg-white shadow hover:bg-gray-50 dark:text-white"
         data-grid={_}
       >
         <BoardChart
           value={value.charts.find((chart) => chart.id === _.i) as any}
         />
         {editMode === "REARRANGING_CHART" ? (
-          <div className="absolute top-4 right-4 z-40 hidden gap-2 group-hover:flex">
-            {sizes.map((x, index) => {
-              return (
-                <button
-                  className={cn(
-                    buttonVariants({ variant: "secondary", size: "icon" }),
-                    "cancelSelectorName h-6 w-6 p-0"
-                  )}
-                  onClick={() =>
-                    handleClickResize(x.w as number, x.h as number, i)
-                  }
-                  onMouseDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
-                  key={index}
-                >
-                  {x.icon}
-                </button>
-              );
-            })}
-          </div>
+          <>
+            <div className="absolute top-4 right-4 z-40 hidden gap-2 group-hover:flex">
+              {sizes.map((x, index) => {
+                return (
+                  <button
+                    className={cn(
+                      buttonVariants({ variant: "secondary", size: "icon" }),
+                      "cancelSelectorName h-6 w-6 p-0"
+                    )}
+                    onClick={() =>
+                      handleClickResize(x.w as number, x.h as number, i)
+                    }
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onTouchStart={(e) => e.stopPropagation()}
+                    key={index}
+                  >
+                    {x.icon}
+                  </button>
+                );
+              })}
+            </div>
+            <div className="absolute -top-2 -left-2 z-40 hidden group-hover:block">
+              <button
+                className={cn(
+                  buttonVariants({ variant: "default", size: "icon" }),
+                  "cancelSelectorName h-6 w-6 cursor-pointer rounded-full"
+                )}
+                onClick={() => setSelectedKey(_.i)}
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          </>
         ) : (
           <div className="absolute top-4 right-4">
             <DropdownMenu key={_.i}>
               <DropdownMenuTrigger asChild>
-                <EllipsisVertical className="h-4 w-4" />
+                <button
+                  className={buttonVariants({ size: "icon", variant: "ghost" })}
+                >
+                  <EllipsisVertical className="h-4 w-4" />
+                </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 {menus.map((menu) => {
@@ -146,7 +172,7 @@ export function BoardCanvas({
                     <DropdownMenuItem
                       key={menu.name}
                       className="flex gap-2"
-                      onClick={menu.onclick}
+                      onClick={() => menu.onclick(_.i)}
                     >
                       {menu.icon}
                       {menu.name}
@@ -163,6 +189,18 @@ export function BoardCanvas({
 
   return (
     <div>
+      {selectedKey &&
+        value.charts.find((chart) => chart.id === selectedKey) && (
+          <BoardDeleteDialog
+            onClose={() => setSelectedKey("")}
+            value={
+              value.charts.find(
+                (chart) => chart.id === selectedKey
+              ) as unknown as DashboardProps
+            }
+            onDelete={handleDeleteChart}
+          />
+        )}
       <ReactGridLayout
         cols={4}
         rowHeight={220}
diff --git a/src/components/board/board-delete-dialog.tsx b/src/components/board/board-delete-dialog.tsx
new file mode 100644
index 00000000..9b9be000
--- /dev/null
+++ b/src/components/board/board-delete-dialog.tsx
@@ -0,0 +1,92 @@
+import { Check, Copy } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { DashboardProps } from ".";
+import { Button, buttonVariants } from "../ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+
+interface Props {
+  onClose?: () => void;
+  onDelete: () => void;
+  value: DashboardProps;
+}
+
+export function BoardDeleteDialog(props: Props) {
+  const [nameInput, setNameInput] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (copied) setCopied(false);
+    }, 1000);
+
+    return () => clearTimeout(timeout);
+  }, [copied]);
+
+  const onClickCopy = useCallback(() => {
+    setCopied(true);
+    navigator.clipboard.writeText(props.value.name);
+  }, [props.value.name]);
+
+  return (
+    <Dialog open onOpenChange={props.onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Confirm deletion of {props.value.name}</DialogTitle>
+          <DialogDescription className="py-4">
+            Deleting this chart will remove it from your dashboard. All members
+            will lose access. This action is permanent and cannot be undone.
+          </DialogDescription>
+          <div>
+            <button
+              className={buttonVariants({ size: "sm", variant: "secondary" })}
+              onClick={onClickCopy}
+            >
+              <div className="flex flex-row items-center gap-2">
+                <div>{props.value.name}</div>
+                <div className="relative h-4 w-4">
+                  <Copy
+                    className={`${copied ? "hidden" : ""} absolute h-4 w-4`}
+                  />
+                  <Check
+                    className={`${!copied ? "hidden" : ""} absolute h-4 w-4`}
+                  />
+                </div>
+              </div>
+            </button>
+            <div className="pt-4 pb-2 text-xs">
+              Enter the name of this Chart to confirm:
+            </div>
+            <Input
+              value={nameInput}
+              onChange={(v) => setNameInput(v.target.value)}
+            />
+          </div>
+        </DialogHeader>
+        <DialogFooter className="sm:justify-start">
+          <Button
+            type="button"
+            variant={"destructive"}
+            disabled={nameInput !== props.value.name}
+            onClick={props.onDelete}
+          >
+            I understand, delete my chart
+          </Button>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Cancel
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

From 877c362a2b1d1fc887b8ca697572c2673ed8bd41 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Fri, 7 Feb 2025 20:37:09 +0700
Subject: [PATCH 015/106] update navigation header

---
 src/app/(outerbase)/auth-provider.tsx         |  3 +-
 src/app/(outerbase)/navigation.tsx            | 59 +++++++++---
 src/app/(outerbase)/session-provider.tsx      |  7 +-
 .../w/[workspaceId]/[baseId]/page-client.tsx  | 85 -----------------
 .../w/[workspaceId]/[baseId]/page.tsx         | 92 +++++++++++++++----
 .../w/[workspaceId]/billing/page.tsx          |  3 +
 .../w/[workspaceId]/settings/page.tsx         |  3 +
 .../(outerbase)/w/local-workspace/page.tsx    |  3 +
 src/app/(outerbase)/w/page.tsx                | 31 ++++++-
 src/app/(outerbase)/workspace-provider.tsx    |  7 +-
 src/components/page-loading.tsx               | 11 +++
 11 files changed, 185 insertions(+), 119 deletions(-)
 delete mode 100644 src/app/(outerbase)/w/[workspaceId]/[baseId]/page-client.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
 create mode 100644 src/app/(outerbase)/w/local-workspace/page.tsx
 create mode 100644 src/components/page-loading.tsx

diff --git a/src/app/(outerbase)/auth-provider.tsx b/src/app/(outerbase)/auth-provider.tsx
index 0dcf5036..d0d6baf6 100644
--- a/src/app/(outerbase)/auth-provider.tsx
+++ b/src/app/(outerbase)/auth-provider.tsx
@@ -1,4 +1,5 @@
 "use client";
+import PageLoading from "@/components/page-loading";
 import { usePathname, useRouter } from "next/navigation";
 import { PropsWithChildren, useEffect } from "react";
 import { useSession } from "./session-provider";
@@ -17,7 +18,7 @@ export default function AuthProvider({ children }: PropsWithChildren) {
   }, [isLoading, session, pathname, router]);
 
   if (isLoading || !session) {
-    return <div>Session Loading...</div>;
+    return <PageLoading>Session Loading...</PageLoading>;
   }
 
   return <>{children}</>;
diff --git a/src/app/(outerbase)/navigation.tsx b/src/app/(outerbase)/navigation.tsx
index a89172f3..43148e85 100644
--- a/src/app/(outerbase)/navigation.tsx
+++ b/src/app/(outerbase)/navigation.tsx
@@ -7,7 +7,8 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
-import { CaretUpDown } from "@phosphor-icons/react";
+import { CaretUpDown, Gear, GlobeHemisphereEast } from "@phosphor-icons/react";
+import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { useWorkspaces } from "./workspace-provider";
@@ -85,20 +86,52 @@ function WorkspaceSelector() {
 
 export function NavigationBar() {
   const { currentWorkspace } = useWorkspaces();
+  const { workspaceId } = useParams<{ workspaceId: string }>();
 
   return (
-    <div className="bg-background sticky top-0 z-10 flex h-14 items-center gap-2 px-2">
-      <OuterbaseIcon className="h-8 w-8" />
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant={"ghost"}>
-            {currentWorkspace?.name} <CaretUpDown className="ml-2" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="h-[400px] w-[500px] p-0" align="start">
-          <WorkspaceSelector />
-        </PopoverContent>
-      </Popover>
+    <div className="bg-netural-100 dark:bg-background relative sticky top-0 z-10 flex h-14 items-center justify-center gap-2 px-2">
+      <div className="absolute left-0 flex h-14 items-center pl-2">
+        <OuterbaseIcon className="h-8 w-8" />
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant={"ghost"}>
+              {currentWorkspace?.name} <CaretUpDown className="ml-2" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="h-[400px] w-[500px] p-0" align="start">
+            <WorkspaceSelector />
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      <div className="flex gap-4 text-sm">
+        <Link
+          href={`/w/${workspaceId}`}
+          className="flex cursor-pointer items-center gap-1"
+        >
+          <GlobeHemisphereEast weight="fill" className="size-5" /> Home
+        </Link>
+        <Link
+          href={`/w/${workspaceId}/settings`}
+          className="flex cursor-pointer items-center gap-1"
+        >
+          <Gear className="size-5" />
+          Settings
+        </Link>
+        <Link
+          href={`/w/${workspaceId}/billing`}
+          className="flex cursor-pointer items-center gap-1"
+        >
+          <Gear className="size-5" />
+          Billing
+        </Link>
+      </div>
+
+      <div className="absolute right-0 pr-2">
+        <div className="bg-primary text-primary-foreground flex size-10 items-center justify-center rounded-lg font-bold">
+          GI
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/app/(outerbase)/session-provider.tsx b/src/app/(outerbase)/session-provider.tsx
index 9600d9f3..a56cc280 100644
--- a/src/app/(outerbase)/session-provider.tsx
+++ b/src/app/(outerbase)/session-provider.tsx
@@ -9,6 +9,7 @@ import {
 
 interface OuterebaseSessionContextProps {
   isLoading: boolean;
+  token?: string;
   session?: {
     session: OuterbaseAPISession;
     user: OuterbaseAPIUser;
@@ -25,7 +26,7 @@ export function useSession() {
 
 export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
   const token =
-    typeof window !== "undefined" ? localStorage.getItem("ob-token") : "";
+    typeof window !== "undefined" ? localStorage.getItem("ob-token") || "" : "";
 
   const { data, isLoading } = useSWR(
     token ? "session-" + token : undefined,
@@ -40,7 +41,9 @@ export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
   );
 
   return (
-    <OuterbaseSessionContext.Provider value={{ session: data, isLoading }}>
+    <OuterbaseSessionContext.Provider
+      value={{ session: data, isLoading, token }}
+    >
       {children}
     </OuterbaseSessionContext.Provider>
   );
diff --git a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page-client.tsx b/src/app/(outerbase)/w/[workspaceId]/[baseId]/page-client.tsx
deleted file mode 100644
index f1d4d8b8..00000000
--- a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page-client.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-"use client";
-
-import OpacityLoading from "@/components/gui/loading-opacity";
-import { Studio } from "@/components/gui/studio";
-import { StudioExtensionManager } from "@/core/extension-manager";
-import {
-  createMySQLExtensions,
-  createPostgreSQLExtensions,
-  createSQLiteExtensions,
-} from "@/core/standard-extension";
-import { getOuterbaseBase } from "@/outerbase-cloud/api";
-import { OuterbaseAPISource } from "@/outerbase-cloud/api-type";
-import { OuterbaseMySQLDriver } from "@/outerbase-cloud/database/mysql";
-import { OuterbasePostgresDriver } from "@/outerbase-cloud/database/postgresql";
-import { OuterbaseSqliteDriver } from "@/outerbase-cloud/database/sqlite";
-import OuterbaseQueryDriver from "@/outerbase-cloud/query-driver";
-import { useEffect, useMemo, useState } from "react";
-
-export default function OuterbaseSourcePageClient({
-  workspaceId,
-  baseId,
-}: {
-  workspaceId: string;
-  baseId: string;
-}) {
-  const [source, setSource] = useState<OuterbaseAPISource>();
-
-  useEffect(() => {
-    if (!workspaceId) return;
-    if (!baseId) return;
-
-    getOuterbaseBase(workspaceId, baseId).then((base) => {
-      if (!base) return;
-      setSource(base.sources[0]);
-    });
-  }, [workspaceId, baseId]);
-
-  const savedDocDriver = useMemo(() => {
-    if (!workspaceId || !source?.id || !baseId) return null;
-    return new OuterbaseQueryDriver(workspaceId, baseId, source.id);
-  }, [workspaceId, baseId, source?.id]);
-
-  const [outerbaseDriver, extensions] = useMemo(() => {
-    if (!workspaceId || !source) return [null, null];
-
-    const dialect = source.type;
-    const outerbaseConfig = {
-      workspaceId,
-      sourceId: source.id,
-      baseId: "",
-      token: localStorage.getItem("ob-token") ?? "",
-    };
-
-    if (dialect === "postgres") {
-      return [
-        new OuterbasePostgresDriver(outerbaseConfig),
-        new StudioExtensionManager(createPostgreSQLExtensions()),
-      ];
-    } else if (dialect === "mysql") {
-      return [
-        new OuterbaseMySQLDriver(outerbaseConfig),
-        new StudioExtensionManager(createMySQLExtensions()),
-      ];
-    }
-
-    return [
-      new OuterbaseSqliteDriver(outerbaseConfig),
-      new StudioExtensionManager(createSQLiteExtensions()),
-    ];
-  }, [workspaceId, source]);
-
-  if (!outerbaseDriver || !savedDocDriver) {
-    return <OpacityLoading />;
-  }
-
-  return (
-    <Studio
-      color="gray"
-      driver={outerbaseDriver}
-      docDriver={savedDocDriver}
-      extensions={extensions}
-      name="Storybook Testing"
-    />
-  );
-}
diff --git a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
index b2908d20..2138973f 100644
--- a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
@@ -1,24 +1,84 @@
-import ClientOnly from "@/components/client-only";
-import OuterbaseSourcePageClient from "./page-client";
+"use client";
 
-interface OuterbaseSourcePageProps {
-  params: Promise<{
+import { Studio } from "@/components/gui/studio";
+import PageLoading from "@/components/page-loading";
+import { StudioExtensionManager } from "@/core/extension-manager";
+import {
+  createMySQLExtensions,
+  createPostgreSQLExtensions,
+  createSQLiteExtensions,
+} from "@/core/standard-extension";
+import { getOuterbaseBase } from "@/outerbase-cloud/api";
+import { OuterbaseAPISource } from "@/outerbase-cloud/api-type";
+import { OuterbaseMySQLDriver } from "@/outerbase-cloud/database/mysql";
+import { OuterbasePostgresDriver } from "@/outerbase-cloud/database/postgresql";
+import { OuterbaseSqliteDriver } from "@/outerbase-cloud/database/sqlite";
+import OuterbaseQueryDriver from "@/outerbase-cloud/query-driver";
+import { useParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+
+export default function OuterbaseSourcePage() {
+  const { workspaceId, baseId } = useParams<{
     workspaceId: string;
     baseId: string;
-  }>;
-}
+  }>();
+  const [source, setSource] = useState<OuterbaseAPISource>();
+
+  useEffect(() => {
+    if (!workspaceId) return;
+    if (!baseId) return;
+
+    getOuterbaseBase(workspaceId, baseId).then((base) => {
+      if (!base) return;
+      setSource(base.sources[0]);
+    });
+  }, [workspaceId, baseId]);
+
+  const savedDocDriver = useMemo(() => {
+    if (!workspaceId || !source?.id || !baseId) return null;
+    return new OuterbaseQueryDriver(workspaceId, baseId, source.id);
+  }, [workspaceId, baseId, source?.id]);
+
+  const [outerbaseDriver, extensions] = useMemo(() => {
+    if (!workspaceId || !source) return [null, null];
+
+    const dialect = source.type;
+    const outerbaseConfig = {
+      workspaceId,
+      sourceId: source.id,
+      baseId: "",
+      token: localStorage.getItem("ob-token") ?? "",
+    };
+
+    if (dialect === "postgres") {
+      return [
+        new OuterbasePostgresDriver(outerbaseConfig),
+        new StudioExtensionManager(createPostgreSQLExtensions()),
+      ];
+    } else if (dialect === "mysql") {
+      return [
+        new OuterbaseMySQLDriver(outerbaseConfig),
+        new StudioExtensionManager(createMySQLExtensions()),
+      ];
+    }
+
+    return [
+      new OuterbaseSqliteDriver(outerbaseConfig),
+      new StudioExtensionManager(createSQLiteExtensions()),
+    ];
+  }, [workspaceId, source]);
 
-export default async function OuterbaseSourcePage(
-  props: OuterbaseSourcePageProps
-) {
-  const params = await props.params;
+  if (!outerbaseDriver || !savedDocDriver) {
+    return <PageLoading>Loading Base ...</PageLoading>;
+  }
 
   return (
-    <ClientOnly>
-      <OuterbaseSourcePageClient
-        baseId={params.baseId}
-        workspaceId={params.workspaceId}
-      />
-    </ClientOnly>
+    <Studio
+      color="gray"
+      driver={outerbaseDriver}
+      docDriver={savedDocDriver}
+      extensions={extensions}
+      name="Storybook Testing"
+    />
   );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx b/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
new file mode 100644
index 00000000..c1a0d7fd
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
@@ -0,0 +1,3 @@
+export default function WorkspaceBillingPage() {
+  return <div>Billing</div>;
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
new file mode 100644
index 00000000..99634b73
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
@@ -0,0 +1,3 @@
+export default function WorkspaceSettingPage() {
+  return <div>Setting</div>;
+}
diff --git a/src/app/(outerbase)/w/local-workspace/page.tsx b/src/app/(outerbase)/w/local-workspace/page.tsx
new file mode 100644
index 00000000..e788f34c
--- /dev/null
+++ b/src/app/(outerbase)/w/local-workspace/page.tsx
@@ -0,0 +1,3 @@
+export default function LocalWorkspacePage() {
+  return <div>This is local workspace</div>;
+}
diff --git a/src/app/(outerbase)/w/page.tsx b/src/app/(outerbase)/w/page.tsx
index f3feb8f9..dd7ee61a 100644
--- a/src/app/(outerbase)/w/page.tsx
+++ b/src/app/(outerbase)/w/page.tsx
@@ -1,4 +1,33 @@
 "use client";
+
+import PageLoading from "@/components/page-loading";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useSession } from "../session-provider";
+import { useWorkspaces } from "../workspace-provider";
+
 export default function OuterbaseMainPage() {
-  return <div>Something here</div>;
+  const { token, isLoading, session } = useSession();
+  const { workspaces } = useWorkspaces();
+  const router = useRouter();
+
+  useEffect(() => {
+    // If there is no token, it means user has not logged in before.
+    // We will forward them to local workspace.
+    if (!token) {
+      router.push("/w/local-workspace");
+      return;
+    } else if (!isLoading && session && workspaces) {
+      // Valid session, we will forward to the first workspace
+      if (workspaces.length) {
+        router.push(`/w/${workspaces[0].short_name}`);
+      }
+    } else if (!isLoading && !session) {
+      // Invalid session, it might be expired session. We will
+      // ask them for login again
+      router.push("/sigin");
+    }
+  }, [token, session, isLoading, workspaces, router]);
+
+  return <PageLoading>Loading Session</PageLoading>;
 }
diff --git a/src/app/(outerbase)/workspace-provider.tsx b/src/app/(outerbase)/workspace-provider.tsx
index cb288d33..38e58565 100644
--- a/src/app/(outerbase)/workspace-provider.tsx
+++ b/src/app/(outerbase)/workspace-provider.tsx
@@ -11,6 +11,7 @@ import {
   useMemo,
 } from "react";
 import useSWR from "swr";
+import { useSession } from "./session-provider";
 
 const WorkspaceContext = createContext<{
   workspaces: OuterbaseAPIWorkspace[];
@@ -25,9 +26,10 @@ export function useWorkspaces() {
 
 export function WorkspaceProvider({ children }: PropsWithChildren) {
   const router = useRouter();
+  const { token } = useSession();
 
   const { data, isLoading, mutate } = useSWR(
-    "workspaces",
+    token ? "workspaces" : undefined,
     () => {
       return getOuterbaseWorkspace();
     },
@@ -53,6 +55,9 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
   useEffect(() => {
     // If the current workspace is not found, redirect to the first workspace
     if (isLoading) return;
+    if (!workspaceId) return;
+    if (workspaceId === "local-workspace") return;
+    if (typeof window === "undefined") return;
 
     if (!currentWorkspace) {
       if (data?.items.length) {
diff --git a/src/components/page-loading.tsx b/src/components/page-loading.tsx
new file mode 100644
index 00000000..65058afb
--- /dev/null
+++ b/src/components/page-loading.tsx
@@ -0,0 +1,11 @@
+import { PropsWithChildren } from "react";
+import ServerLoadingAnimation from "./icons/server-loading";
+
+export default function PageLoading({ children }: PropsWithChildren) {
+  return (
+    <div className="flex h-screen w-screen flex-col items-center justify-center gap-4">
+      <ServerLoadingAnimation />
+      {children}
+    </div>
+  );
+}

From c16b1fd620d266dbc01949d466564ef2277774c2 Mon Sep 17 00:00:00 2001
From: Sokphal Adam <31284849+sokphaladam@users.noreply.github.com>
Date: Fri, 7 Feb 2025 20:37:31 +0700
Subject: [PATCH 016/106] Chart board edit (#344)

* try to use outerbase board data with our board

* refactor: improve board canvas item mapping and tooltip structure

* refactor: enhance toggle item styling based on edit mode

* plug chart inside

* require workspace to load

* refactor: menu layout and create refresh board

* refactor: improve chart component imports and style definitions

* add header and loading

* refactor: update BoardTool and BoardProvider components

* refactor: improve board canvas item mapping and save edit layout

* refactor: remove console.log statement

* refactor: improve board page editor and board component

---------

Co-authored-by: Visal .In <invisal@gmail.com>
Co-authored-by: sokphaladam <sokphaladam@sokphaladams-MacBook-Air.local>
---
 .../w/[workspaceId]/board/[boardId]/page.tsx  | 38 +++++--
 src/components/board/board-filter.tsx         | 21 ++--
 .../board/board-tool/board-button-menu.tsx    | 93 +++++++++++++++++
 .../board/{ => board-tool}/board-tool.tsx     |  4 +-
 .../board/board-tool/board-toolbar.tsx        | 45 +++++++++
 src/components/board/board-toolbar.tsx        | 99 -------------------
 src/components/board/index.tsx                | 18 +++-
 src/outerbase-cloud/api.ts                    | 14 ++-
 8 files changed, 214 insertions(+), 118 deletions(-)
 create mode 100644 src/components/board/board-tool/board-button-menu.tsx
 rename src/components/board/{ => board-tool}/board-tool.tsx (91%)
 create mode 100644 src/components/board/board-tool/board-toolbar.tsx
 delete mode 100644 src/components/board/board-toolbar.tsx

diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index 1be81e69..145de15c 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -3,19 +3,27 @@
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import Board from "@/components/board";
 import ClientOnly from "@/components/client-only";
-import { getOuterbaseDashboard } from "@/outerbase-cloud/api";
+import {
+  getOuterbaseDashboard,
+  updateOuterbaseDashboard,
+} from "@/outerbase-cloud/api";
 import { OuterbaseAPIDashboardDetail } from "@/outerbase-cloud/api-type";
 import OuterbaseBoardSourceDriver from "@/outerbase-cloud/database-source";
 import { useParams } from "next/navigation";
-import { useMemo, useState } from "react";
-import useSWR from "swr";
+import { useCallback, useMemo, useState } from "react";
+import useSWR, { KeyedMutator } from "swr";
 
 function BoardPageEditor({
   initialValue,
+  mutate,
 }: {
   initialValue: OuterbaseAPIDashboardDetail;
+  mutate: KeyedMutator<OuterbaseAPIDashboardDetail>;
 }) {
-  const { workspaceId } = useParams<{ workspaceId: string }>();
+  const { workspaceId, boardId } = useParams<{
+    workspaceId: string;
+    boardId: string;
+  }>();
   const { workspaces } = useWorkspaces();
   const [interval, setIntervals] = useState<number>(0);
 
@@ -30,6 +38,21 @@ function BoardPageEditor({
 
   const [value, setValue] = useState(initialValue);
 
+  const onSave = useCallback(() => {
+    const input = {
+      base_id: null,
+      chart_ids: value.chart_ids,
+      data: (value as any).data,
+      layout: value.layout.map(({ w, h, i, x, y }) => ({ w, h, x, y, i })),
+      directory_index: (value as any).directory_index,
+      name: value.name,
+      type: value.type,
+    };
+    updateOuterbaseDashboard(workspaceId, boardId, input)
+      .then()
+      .finally(mutate);
+  }, [boardId, value, workspaceId, mutate]);
+
   if (!boardSources) {
     return <div>Loading Workspace....</div>;
   }
@@ -41,6 +64,9 @@ function BoardPageEditor({
       sources={boardSources}
       interval={interval}
       onChangeInterval={setIntervals}
+      onLayoutCancel={() => setValue(initialValue)}
+      onLayoutSave={onSave}
+      onRemove={() => {}}
     />
   );
 }
@@ -50,7 +76,7 @@ export default function BoardPage() {
     boardId: string;
     workspaceId: string;
   }>();
-  const { data } = useSWR(`board-${boardId}`, () => {
+  const { data, mutate } = useSWR(`board-${boardId}`, () => {
     return getOuterbaseDashboard(workspaceId, boardId);
   });
 
@@ -61,7 +87,7 @@ export default function BoardPage() {
   return (
     <div className="overflow-y-autp h-screen w-screen overflow-x-hidden">
       <ClientOnly>
-        <BoardPageEditor initialValue={data} />
+        <BoardPageEditor initialValue={data} mutate={mutate} />
       </ClientOnly>
     </div>
   );
diff --git a/src/components/board/board-filter.tsx b/src/components/board/board-filter.tsx
index 90246394..31004fef 100644
--- a/src/components/board/board-filter.tsx
+++ b/src/components/board/board-filter.tsx
@@ -22,18 +22,19 @@ import {
   BoardFilterProps,
   DEFAULT_DATE_FILTER,
 } from "./board-filter-dialog";
-import { BoardTool } from "./board-tool";
-import { BoardToolbar } from "./board-toolbar";
+import { BoardTool } from "./board-tool/board-tool";
+import { BoardToolbar } from "./board-tool/board-toolbar";
 
 interface Props {
-  name: string;
   filters: BoardFilterProps[];
   onFilters: (f: BoardFilterProps[]) => void;
   editMode: "ADD_CHART" | "REARRANGING_CHART" | null;
-  setEditMode: (v: "ADD_CHART" | "REARRANGING_CHART") => void;
+  onChangeEditMode: (v: "ADD_CHART" | "REARRANGING_CHART" | null) => void;
   interval: number;
-  setInterval: (v: number) => void;
+  onChangeInterval: (v: number) => void;
   onRefresh?: () => void;
+  onSave: () => void;
+  onCancel: () => void;
 }
 
 export function BoardFilter(props: Props) {
@@ -210,14 +211,20 @@ export function BoardFilter(props: Props) {
 
   return (
     <>
-      <BoardTool editMode={props.editMode} setEditMode={props.setEditMode} />
+      <BoardTool
+        editMode={props.editMode}
+        setEditMode={props.onChangeEditMode}
+      />
       <div className="sticky top-0 z-50 bg-neutral-100 px-1 pt-0 pb-2 dark:bg-neutral-950">
         <BoardToolbar
           show={show}
           onChangeShow={setShow}
           interval={props.interval}
-          onChange={props.setInterval}
+          onChange={props.onChangeInterval}
           onRefresh={props.onRefresh}
+          mode={props.editMode}
+          onSave={props.onSave}
+          onCancel={props.onCancel}
         />
         <div className={show ? "px-2 pt-4" : "hidden"}>
           {open && selectIndex !== undefined && (
diff --git a/src/components/board/board-tool/board-button-menu.tsx b/src/components/board/board-tool/board-button-menu.tsx
new file mode 100644
index 00000000..873d51c7
--- /dev/null
+++ b/src/components/board/board-tool/board-button-menu.tsx
@@ -0,0 +1,93 @@
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { convertTimeToMilliseconds } from "@/lib/convertNumber";
+import { ChevronDown, RefreshCcw } from "lucide-react";
+import { useBoardContext } from "../board-provider";
+
+interface Props {
+  mode?: "ADD_CHART" | "REARRANGING_CHART" | null;
+  interval: number;
+  onChangeInterval: (interval: number) => void;
+  onRefresh?: () => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export function BoardButtonMenu(props: Props) {
+  const { setting } = useBoardContext();
+
+  if (props.mode === "REARRANGING_CHART") {
+    return (
+      <div className="flex items-center gap-2">
+        <Button variant={"secondary"} size={"sm"} onClick={props.onCancel}>
+          Cancel
+        </Button>
+        <Button variant={"default"} size={"sm"} onClick={props.onSave}>
+          Save
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <button
+        className={buttonVariants({ size: "sm", variant: "ghost" })}
+        onClick={() => {
+          props.onRefresh && props.onRefresh();
+        }}
+      >
+        <div className="flex items-center gap-2">
+          <div>
+            <RefreshCcw className="h-4 w-4" />
+          </div>
+          <div>{props.interval === 0 ? "" : `${props.interval / 1000}s`}</div>
+        </div>
+      </button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className={buttonVariants({ size: "sm", variant: "ghost" })}>
+            <ChevronDown className="h-4 w-4" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuCheckboxItem
+            checked={props.interval === 0}
+            onClick={() => {
+              props.onChangeInterval(0);
+            }}
+          >
+            Off
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={props.interval === convertTimeToMilliseconds("5m")}
+            onClick={() => {
+              props.onChangeInterval(convertTimeToMilliseconds("5m"));
+            }}
+          >
+            Auto
+          </DropdownMenuCheckboxItem>
+          {setting?.autoRefresh.map((interval) => {
+            const ms = convertTimeToMilliseconds(interval);
+            return (
+              <DropdownMenuCheckboxItem
+                key={interval}
+                checked={props.interval === ms}
+                onClick={() => {
+                  props.onChangeInterval(ms);
+                }}
+              >
+                {interval}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/src/components/board/board-tool.tsx b/src/components/board/board-tool/board-tool.tsx
similarity index 91%
rename from src/components/board/board-tool.tsx
rename to src/components/board/board-tool/board-tool.tsx
index cb560e32..86d871b1 100644
--- a/src/components/board/board-tool.tsx
+++ b/src/components/board/board-tool/board-tool.tsx
@@ -1,6 +1,6 @@
 import { ChartLine, ImageUpscale } from "lucide-react";
-import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { ToggleGroup, ToggleGroupItem } from "../../ui/toggle-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
 
 interface Props {
   editMode: "ADD_CHART" | "REARRANGING_CHART" | null;
diff --git a/src/components/board/board-tool/board-toolbar.tsx b/src/components/board/board-tool/board-toolbar.tsx
new file mode 100644
index 00000000..e7c3baf1
--- /dev/null
+++ b/src/components/board/board-tool/board-toolbar.tsx
@@ -0,0 +1,45 @@
+import { useCallback } from "react";
+import { buttonVariants } from "../../ui/button";
+import { useBoardContext } from "../board-provider";
+import { BoardButtonMenu } from "./board-button-menu";
+
+interface Props {
+  show: boolean;
+  interval: number;
+  onChange: (interval: number) => void;
+  onChangeShow: (show: boolean) => void;
+  onRefresh?: () => void;
+  mode?: "ADD_CHART" | "REARRANGING_CHART" | null;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export function BoardToolbar(props: Props) {
+  const { setting } = useBoardContext();
+
+  const toggleShow = useCallback(() => {
+    props.onChangeShow(!props.show);
+  }, [props]);
+
+  return (
+    <div className="flex items-center justify-between border border-x-0 px-1 py-2">
+      <div>
+        <button
+          className={buttonVariants({ size: "sm", variant: "ghost" })}
+          onClick={toggleShow}
+        >
+          {props.show ? "Hide" : "Show"} Filter
+        </button>
+      </div>
+      <div>{setting?.name}</div>
+      <BoardButtonMenu
+        interval={props.interval}
+        mode={props.mode}
+        onChangeInterval={props.onChange}
+        onRefresh={props.onRefresh}
+        onCancel={props.onCancel}
+        onSave={props.onSave}
+      />
+    </div>
+  );
+}
diff --git a/src/components/board/board-toolbar.tsx b/src/components/board/board-toolbar.tsx
deleted file mode 100644
index 7b1156b7..00000000
--- a/src/components/board/board-toolbar.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { convertTimeToMilliseconds } from "@/lib/convertNumber";
-import { ChevronDown, RefreshCcw } from "lucide-react";
-import { useCallback } from "react";
-import { buttonVariants } from "../ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-import { useBoardContext } from "./board-provider";
-
-interface Props {
-  show: boolean;
-  interval: number;
-  onChange: (interval: number) => void;
-  onChangeShow: (show: boolean) => void;
-  onRefresh?: () => void;
-}
-
-export function BoardToolbar(props: Props) {
-  const { setting } = useBoardContext();
-
-  const toggleShow = useCallback(() => {
-    props.onChangeShow(!props.show);
-  }, [props]);
-
-  console.log(setting);
-
-  return (
-    <div className="flex items-center justify-between border border-x-0 px-1 py-2">
-      <div>
-        <button
-          className={buttonVariants({ size: "sm", variant: "ghost" })}
-          onClick={toggleShow}
-        >
-          {props.show ? "Hide" : "Show"} Filter
-        </button>
-      </div>
-      <div>{setting?.name}</div>
-      <div>
-        <button
-          className={buttonVariants({ size: "sm", variant: "ghost" })}
-          onClick={() => {
-            props.onRefresh && props.onRefresh();
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <div>
-              <RefreshCcw className="h-4 w-4" />
-            </div>
-            <div>{props.interval === 0 ? "" : `${props.interval / 1000}s`}</div>
-          </div>
-        </button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              className={buttonVariants({ size: "sm", variant: "ghost" })}
-            >
-              <ChevronDown className="h-4 w-4" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuCheckboxItem
-              checked={props.interval === 0}
-              onClick={() => {
-                props.onChange(0);
-              }}
-            >
-              Off
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem
-              checked={props.interval === convertTimeToMilliseconds("5m")}
-              onClick={() => {
-                props.onChange(convertTimeToMilliseconds("5m"));
-              }}
-            >
-              Auto
-            </DropdownMenuCheckboxItem>
-            {setting?.autoRefresh.map((interval) => {
-              const ms = convertTimeToMilliseconds(interval);
-              return (
-                <DropdownMenuCheckboxItem
-                  key={interval}
-                  checked={props.interval === ms}
-                  onClick={() => {
-                    props.onChange(ms);
-                  }}
-                >
-                  {interval}
-                </DropdownMenuCheckboxItem>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index 7921d993..e1f81ed2 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -21,6 +21,9 @@ interface Props {
   interval: number;
   onChange: (value: DashboardProps) => void;
   onChangeInterval: (v: number) => void;
+  onLayoutSave: () => void;
+  onLayoutCancel: () => void;
+  onRemove: () => void;
 }
 
 export default function Board({
@@ -29,6 +32,8 @@ export default function Board({
   interval,
   onChange,
   onChangeInterval,
+  onLayoutCancel,
+  onLayoutSave,
 }: Props) {
   const [editMode, setEditMode] = useState<
     "ADD_CHART" | "REARRANGING_CHART" | null
@@ -82,13 +87,20 @@ export default function Board({
             })
           }
           editMode={editMode}
-          setEditMode={setEditMode}
-          name={value.name}
+          onChangeEditMode={setEditMode}
           interval={interval}
-          setInterval={onChangeInterval}
+          onChangeInterval={onChangeInterval}
           onRefresh={() => {
             setLastRunTimestamp(Date.now());
           }}
+          onCancel={() => {
+            setEditMode(null);
+            onLayoutCancel();
+          }}
+          onSave={() => {
+            setEditMode(null);
+            onLayoutSave();
+          }}
         />
         <BoardCanvas
           value={value}
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index 2dc0b6c2..6df160c2 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -103,10 +103,22 @@ export async function deleteOuterbaseDashboard(
 ) {
   return requestOuterbase(
     `/api/v1/workspace/${workspaceId}/dashboard/${dashboardId}`,
-    "DELETE"
+    "DELETE",
   );
 }
 
+export async function updateOuterbaseDashboard(
+  workspaceName: string,
+  dashboardId: string,
+  data: any
+) {
+    return requestOuterbase(
+      `/api/v1/workspace/${workspaceName}/dashboard/${dashboardId}`,
+      "PUT",
+      data
+    );
+}
+
 export async function runOuterbaseQueryRaw(
   workspaceId: string,
   sourceId: string,

From f3d7c5b00ac0f31c3d485083e8b9f8bc484a9937 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sat, 8 Feb 2025 00:27:27 +0700
Subject: [PATCH 017/106] refactor code

---
 src/app/(outerbase)/nav-profile.tsx           |  42 ++++++
 .../(outerbase)/{navigation.tsx => nav.tsx}   | 125 ++++++++++--------
 .../w/[workspaceId]/billing/page.tsx          |   8 +-
 .../w/[workspaceId]/board/[boardId]/page.tsx  |   9 +-
 src/app/(outerbase)/w/[workspaceId]/page.tsx  |   5 +-
 .../[workspaceId]/redirect-valid-workspace.ts |  24 ++++
 .../w/[workspaceId]/settings/page.tsx         |  10 +-
 .../(outerbase)/w/local-workspace/page.tsx    |  53 +++++++-
 src/app/(outerbase)/workspace-provider.tsx    |  25 +---
 9 files changed, 217 insertions(+), 84 deletions(-)
 create mode 100644 src/app/(outerbase)/nav-profile.tsx
 rename src/app/(outerbase)/{navigation.tsx => nav.tsx} (82%)
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/redirect-valid-workspace.ts

diff --git a/src/app/(outerbase)/nav-profile.tsx b/src/app/(outerbase)/nav-profile.tsx
new file mode 100644
index 00000000..9ed3dfe5
--- /dev/null
+++ b/src/app/(outerbase)/nav-profile.tsx
@@ -0,0 +1,42 @@
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useSession } from "./session-provider";
+
+export default function NavigationProfile() {
+  const { session } = useSession();
+
+  if (!session?.user) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <div className="bg-secondary text-secondary-foreground flex size-9 items-center justify-center rounded-lg border text-sm font-semibold">
+          {session.user.initials}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[200px]">
+        <div className="flex gap-2 p-2">
+          <Avatar>
+            <AvatarFallback>{session.user.initials}</AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col justify-center">
+            <div className="text-xs font-semibold">
+              {session.user.first_name + " " + session.user.last_name}
+            </div>
+            <div className="text-xs">{session.user.email}</div>
+          </div>
+        </div>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Account Setting</DropdownMenuItem>
+        <DropdownMenuItem>Theme</DropdownMenuItem>
+        <DropdownMenuItem>Log out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/app/(outerbase)/navigation.tsx b/src/app/(outerbase)/nav.tsx
similarity index 82%
rename from src/app/(outerbase)/navigation.tsx
rename to src/app/(outerbase)/nav.tsx
index 43148e85..489e8465 100644
--- a/src/app/(outerbase)/navigation.tsx
+++ b/src/app/(outerbase)/nav.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { OuterbaseIcon } from "@/components/icons/outerbase";
 import { getDatabaseIcon } from "@/components/resource-card/utils";
 import { Button, buttonVariants } from "@/components/ui/button";
@@ -11,8 +12,66 @@ import { CaretUpDown, Gear, GlobeHemisphereEast } from "@phosphor-icons/react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
+import NavigationProfile from "./nav-profile";
 import { useWorkspaces } from "./workspace-provider";
 
+export function NavigationBar() {
+  const { currentWorkspace } = useWorkspaces();
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+
+  return (
+    <div className="bg-netural-100 dark:bg-background relative sticky top-0 z-50 flex h-14 items-center justify-center gap-2 px-2">
+      <div className="text-primary absolute left-0 flex h-14 items-center pl-2">
+        <Link href={`/w/${workspaceId}`}>
+          <OuterbaseIcon className="h-8 w-8" />
+        </Link>
+
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant={"ghost"}>
+              {currentWorkspace?.name} <CaretUpDown className="ml-2" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="h-[400px] w-[500px] p-0" align="start">
+            <WorkspaceSelector />
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      <div className="flex gap-4 text-sm">
+        <Link
+          href={`/w/${workspaceId}`}
+          className="flex cursor-pointer items-center gap-1"
+        >
+          <GlobeHemisphereEast weight="fill" className="size-5" /> Home
+        </Link>
+        <Link
+          href={`/w/${workspaceId}/settings`}
+          className="flex cursor-pointer items-center gap-1"
+        >
+          <Gear className="size-5" />
+          Settings
+        </Link>
+        <Link
+          href={`/w/${workspaceId}/billing`}
+          className="flex cursor-pointer items-center gap-1"
+        >
+          <Gear className="size-5" />
+          Billing
+        </Link>
+      </div>
+
+      <div className="absolute right-0 flex gap-2 pr-2">
+        <div className="bg-secondary text-secondary-foreground flex h-9 items-center justify-center rounded-lg border px-4 text-sm font-semibold">
+          Feedback
+        </div>
+
+        <NavigationProfile />
+      </div>
+    </div>
+  );
+}
+
 function WorkspaceSelector() {
   const router = useRouter();
   const { workspaces, currentWorkspace } = useWorkspaces();
@@ -35,6 +94,20 @@ function WorkspaceSelector() {
         <label className="text-muted-foreground mt-1 px-3 py-1 text-xs font-bold">
           WORKSPACES
         </label>
+
+        <div
+          onClick={() => router.push(`/w/local-workspace`)}
+          className={cn(
+            buttonVariants({
+              variant: "ghost",
+              size: "sm",
+            }),
+            "cursor-pointer justify-start py-0.5"
+          )}
+        >
+          Local
+        </div>
+
         {workspaces.map((workspace) => (
           <div
             onClick={() => router.push(`/w/${workspace.short_name}`)}
@@ -83,55 +156,3 @@ function WorkspaceSelector() {
     </div>
   );
 }
-
-export function NavigationBar() {
-  const { currentWorkspace } = useWorkspaces();
-  const { workspaceId } = useParams<{ workspaceId: string }>();
-
-  return (
-    <div className="bg-netural-100 dark:bg-background relative sticky top-0 z-10 flex h-14 items-center justify-center gap-2 px-2">
-      <div className="absolute left-0 flex h-14 items-center pl-2">
-        <OuterbaseIcon className="h-8 w-8" />
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant={"ghost"}>
-              {currentWorkspace?.name} <CaretUpDown className="ml-2" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="h-[400px] w-[500px] p-0" align="start">
-            <WorkspaceSelector />
-          </PopoverContent>
-        </Popover>
-      </div>
-
-      <div className="flex gap-4 text-sm">
-        <Link
-          href={`/w/${workspaceId}`}
-          className="flex cursor-pointer items-center gap-1"
-        >
-          <GlobeHemisphereEast weight="fill" className="size-5" /> Home
-        </Link>
-        <Link
-          href={`/w/${workspaceId}/settings`}
-          className="flex cursor-pointer items-center gap-1"
-        >
-          <Gear className="size-5" />
-          Settings
-        </Link>
-        <Link
-          href={`/w/${workspaceId}/billing`}
-          className="flex cursor-pointer items-center gap-1"
-        >
-          <Gear className="size-5" />
-          Billing
-        </Link>
-      </div>
-
-      <div className="absolute right-0 pr-2">
-        <div className="bg-primary text-primary-foreground flex size-10 items-center justify-center rounded-lg font-bold">
-          GI
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx b/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
index c1a0d7fd..80469b25 100644
--- a/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
@@ -1,3 +1,9 @@
+import { NavigationBar } from "@/app/(outerbase)/nav";
+
 export default function WorkspaceBillingPage() {
-  return <div>Billing</div>;
+  return (
+    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+      <NavigationBar />
+    </div>
+  );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index 145de15c..864ea8d3 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { NavigationBar } from "@/app/(outerbase)/nav";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import Board from "@/components/board";
-import ClientOnly from "@/components/client-only";
 import {
   getOuterbaseDashboard,
   updateOuterbaseDashboard,
@@ -85,10 +85,11 @@ export default function BoardPage() {
   }
 
   return (
-    <div className="overflow-y-autp h-screen w-screen overflow-x-hidden">
-      <ClientOnly>
+    <div className="flex h-screen w-screen flex-col overflow-hidden">
+      <NavigationBar />
+      <div className="flex-1 overflow-x-hidden overflow-y-auto">
         <BoardPageEditor initialValue={data} mutate={mutate} />
-      </ClientOnly>
+      </div>
     </div>
   );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 85277615..4a3aa0ca 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -25,11 +25,12 @@ import {
 import { useParams, useRouter } from "next/navigation";
 import { useMemo } from "react";
 import useSWR from "swr";
-import { NavigationBar } from "../../navigation";
+import { NavigationBar } from "../../nav";
 import { useWorkspaces } from "../../workspace-provider";
 import { deleteBaseDialog } from "./dialog-base-delete";
 import { createBoardDialog } from "./dialog-board-create";
 import { deleteBoardDialog } from "./dialog-board-delete";
+import useRedirectValidWorkspace from "./redirect-valid-workspace";
 
 interface ResourceItem {
   id: string;
@@ -44,6 +45,8 @@ export default function WorkspaceListPageClient() {
   const { currentWorkspace, refreshWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
 
+  useRedirectValidWorkspace();
+
   const { data: boards, mutate } = useSWR(
     `/workspace/${workspaceId}/boards`,
     () => {
diff --git a/src/app/(outerbase)/w/[workspaceId]/redirect-valid-workspace.ts b/src/app/(outerbase)/w/[workspaceId]/redirect-valid-workspace.ts
new file mode 100644
index 00000000..b20afd13
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/redirect-valid-workspace.ts
@@ -0,0 +1,24 @@
+"use client";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useWorkspaces } from "../../workspace-provider";
+
+export default function useRedirectValidWorkspace() {
+  const { workspaceId } = useParams();
+  const { currentWorkspace, workspaces, loading } = useWorkspaces();
+  const router = useRouter();
+
+  useEffect(() => {
+    // If the current workspace is not found, redirect to the first workspace
+    if (loading) return;
+    if (!workspaceId) return;
+    if (workspaceId === "local-workspace") return;
+    if (typeof window === "undefined") return;
+
+    if (!currentWorkspace) {
+      if (workspaces?.length) {
+        router.replace(`/w/${workspaces[0].short_name}`);
+      }
+    }
+  }, [loading, workspaces, currentWorkspace, workspaceId, router]);
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
index 99634b73..80469b25 100644
--- a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
@@ -1,3 +1,9 @@
-export default function WorkspaceSettingPage() {
-  return <div>Setting</div>;
+import { NavigationBar } from "@/app/(outerbase)/nav";
+
+export default function WorkspaceBillingPage() {
+  return (
+    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+      <NavigationBar />
+    </div>
+  );
 }
diff --git a/src/app/(outerbase)/w/local-workspace/page.tsx b/src/app/(outerbase)/w/local-workspace/page.tsx
index e788f34c..78c24cd7 100644
--- a/src/app/(outerbase)/w/local-workspace/page.tsx
+++ b/src/app/(outerbase)/w/local-workspace/page.tsx
@@ -1,3 +1,54 @@
+"use client";
+import {
+  SavedConnectionItem,
+  SavedConnectionLocalStorage,
+} from "@/app/(theme)/connect/saved-connection-storage";
+import ResourceCard from "@/components/resource-card";
+import {
+  getDatabaseFriendlyName,
+  getDatabaseIcon,
+  getDatabaseVisual,
+} from "@/components/resource-card/utils";
+import { useEffect, useState } from "react";
+import { NavigationBar } from "../../nav";
+
 export default function LocalWorkspacePage() {
-  return <div>This is local workspace</div>;
+  const [localSavedConns, setLocalSavedConns] = useState<SavedConnectionItem[]>(
+    []
+  );
+
+  useEffect(() => {
+    setLocalSavedConns(SavedConnectionLocalStorage.getList());
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+      <NavigationBar />
+
+      <div className="container mx-auto p-4">
+        <h1 className="text-primary mb-8 text-xl font-semibold">
+          Local Connection
+        </h1>
+
+        <div className="bg-secondary mb-8 flex h-[200px] items-center justify-center rounded-lg">
+          Something about not login
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {localSavedConns.map((conn) => (
+            <ResourceCard
+              className="w-full"
+              key={conn.id}
+              color={conn.label ?? ""}
+              icon={getDatabaseIcon(conn.driver ?? "")}
+              href={`/client/s/${conn.id}`}
+              title={conn.name}
+              subtitle={getDatabaseFriendlyName(conn.driver ?? "")}
+              visual={getDatabaseVisual(conn.driver ?? "")}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/app/(outerbase)/workspace-provider.tsx b/src/app/(outerbase)/workspace-provider.tsx
index 38e58565..aba72e2f 100644
--- a/src/app/(outerbase)/workspace-provider.tsx
+++ b/src/app/(outerbase)/workspace-provider.tsx
@@ -2,14 +2,8 @@
 import { getOuterbaseWorkspace } from "@/outerbase-cloud/api";
 import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
 import { noop } from "lodash";
-import { useParams, useRouter } from "next/navigation";
-import {
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useMemo,
-} from "react";
+import { useParams } from "next/navigation";
+import { createContext, PropsWithChildren, useContext, useMemo } from "react";
 import useSWR from "swr";
 import { useSession } from "./session-provider";
 
@@ -25,7 +19,6 @@ export function useWorkspaces() {
 }
 
 export function WorkspaceProvider({ children }: PropsWithChildren) {
-  const router = useRouter();
   const { token } = useSession();
 
   const { data, isLoading, mutate } = useSWR(
@@ -52,20 +45,6 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
     );
   }, [workspaceId, data]);
 
-  useEffect(() => {
-    // If the current workspace is not found, redirect to the first workspace
-    if (isLoading) return;
-    if (!workspaceId) return;
-    if (workspaceId === "local-workspace") return;
-    if (typeof window === "undefined") return;
-
-    if (!currentWorkspace) {
-      if (data?.items.length) {
-        router.replace(`/w/${data.items[0].short_name}`);
-      }
-    }
-  }, [isLoading, data, currentWorkspace, workspaceId, router]);
-
   return (
     <WorkspaceContext.Provider
       value={{

From 32dc6eff2257306e02216018db33ad1bd7b8dbf4 Mon Sep 17 00:00:00 2001
From: Sokphal Adam <31284849+sokphaladam@users.noreply.github.com>
Date: Sat, 8 Feb 2025 00:29:00 +0700
Subject: [PATCH 018/106] Implement chart deletion functionality in board
 editor (#345)

Co-authored-by: Visal .In <invisal@gmail.com>
---
 .../w/[workspaceId]/board/[boardId]/page.tsx  |  50 +++++-
 src/components/board/board-canvas.tsx         |  27 +---
 src/components/board/board-delete-dialog.tsx  | 147 ++++++++----------
 src/components/board/index.tsx                |   4 +-
 src/outerbase-cloud/api.ts                    |  24 ++-
 5 files changed, 142 insertions(+), 110 deletions(-)

diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index 864ea8d3..e2fba0f7 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -3,12 +3,16 @@
 import { NavigationBar } from "@/app/(outerbase)/nav";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import Board from "@/components/board";
+import { deleteChartDialog } from "@/components/board/board-delete-dialog";
+import ClientOnly from "@/components/client-only";
+
 import {
   getOuterbaseDashboard,
   updateOuterbaseDashboard,
 } from "@/outerbase-cloud/api";
 import { OuterbaseAPIDashboardDetail } from "@/outerbase-cloud/api-type";
 import OuterbaseBoardSourceDriver from "@/outerbase-cloud/database-source";
+import { produce } from "immer";
 import { useParams } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
 import useSWR, { KeyedMutator } from "swr";
@@ -53,6 +57,50 @@ function BoardPageEditor({
       .finally(mutate);
   }, [boardId, value, workspaceId, mutate]);
 
+  const onRemove = useCallback(
+    async (key: string) => {
+      const chart = value.charts.find((f) => f.id === key);
+      if (chart) {
+        const deleteChartId = await deleteChartDialog.show({
+          workspaceId,
+          chartId: key,
+          chartName: chart.name,
+        });
+
+        if (deleteChartId) {
+          const input = {
+            base_id: null,
+            chart_ids: value.chart_ids.filter((f) => f !== deleteChartId),
+            data: (value as any).data,
+            layout: value.layout
+              .filter((f) => f.i !== deleteChartId)
+              .map(({ w, h, i, x, y }) => ({ w, h, x, y, i })),
+            directory_index: (value as any).directory_index,
+            name: value.name,
+            type: value.type,
+          };
+
+          updateOuterbaseDashboard(workspaceId, boardId, input)
+            .then(() => {
+              setValue((prev) => {
+                return produce(prev, (draft) => {
+                  draft.chart_ids = input.chart_ids;
+                  draft.layout = prev.layout.filter(
+                    (f) => f.i !== deleteChartId
+                  );
+                  draft.charts = prev.charts.filter(
+                    (f) => f.id !== deleteChartId
+                  );
+                });
+              });
+            })
+            .finally(mutate);
+        }
+      }
+    },
+    [value, workspaceId, boardId, mutate]
+  );
+
   if (!boardSources) {
     return <div>Loading Workspace....</div>;
   }
@@ -66,7 +114,7 @@ function BoardPageEditor({
       onChangeInterval={setIntervals}
       onLayoutCancel={() => setValue(initialValue)}
       onLayoutSave={onSave}
-      onRemove={() => {}}
+      onRemove={onRemove}
     />
   );
 }
diff --git a/src/components/board/board-canvas.tsx b/src/components/board/board-canvas.tsx
index 2ca78e12..aec7b4d0 100644
--- a/src/components/board/board-canvas.tsx
+++ b/src/components/board/board-canvas.tsx
@@ -10,7 +10,7 @@ import {
   Square,
   Trash2,
 } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import RGL, { WidthProvider } from "react-grid-layout";
 import { DashboardProps } from ".";
 import { buttonVariants } from "../ui/button";
@@ -21,7 +21,6 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import BoardChart from "./board-chart";
-import { BoardDeleteDialog } from "./board-delete-dialog";
 import "./board-style.css";
 
 export interface BoardChartLayout {
@@ -37,6 +36,7 @@ interface BoardProps {
   onChange: (v: ReactGridLayout.Layout[]) => void;
   editMode?: "ADD_CHART" | "REARRANGING_CHART" | null;
   setEditMode?: (mode: "ADD_CHART" | "REARRANGING_CHART" | null) => void;
+  onRemove: (key: string) => void;
 }
 
 const ReactGridLayout = WidthProvider(RGL);
@@ -46,8 +46,8 @@ export function BoardCanvas({
   onChange,
   editMode,
   setEditMode,
+  onRemove,
 }: BoardProps) {
-  const [selectedKey, setSelectedKey] = useState<string>("");
   const sizes = [
     { w: 1, h: 1, name: "1", icon: <Square className="h-3 w-3" /> },
     {
@@ -92,7 +92,7 @@ export function BoardCanvas({
       name: "Delete chart",
       icon: <Trash2 className="h-4 w-4" />,
       onclick: (key?: string) => {
-        setSelectedKey(key ?? "");
+        onRemove(key || "");
       },
     },
   ];
@@ -107,11 +107,6 @@ export function BoardCanvas({
     [onChange, value.layout]
   );
 
-  const handleDeleteChart = useCallback(() => {
-    onChange(value.layout.filter((f) => f.i !== selectedKey));
-    setSelectedKey("");
-  }, [onChange, selectedKey, value.layout]);
-
   const mapItem: JSX.Element[] = value.layout.map((_, i) => {
     return (
       <div
@@ -150,7 +145,7 @@ export function BoardCanvas({
                   buttonVariants({ variant: "default", size: "icon" }),
                   "cancelSelectorName h-6 w-6 cursor-pointer rounded-full"
                 )}
-                onClick={() => setSelectedKey(_.i)}
+                onClick={() => onRemove(_.i)}
               >
                 <Trash2 className="h-4 w-4" />
               </button>
@@ -189,18 +184,6 @@ export function BoardCanvas({
 
   return (
     <div>
-      {selectedKey &&
-        value.charts.find((chart) => chart.id === selectedKey) && (
-          <BoardDeleteDialog
-            onClose={() => setSelectedKey("")}
-            value={
-              value.charts.find(
-                (chart) => chart.id === selectedKey
-              ) as unknown as DashboardProps
-            }
-            onDelete={handleDeleteChart}
-          />
-        )}
       <ReactGridLayout
         cols={4}
         rowHeight={220}
diff --git a/src/components/board/board-delete-dialog.tsx b/src/components/board/board-delete-dialog.tsx
index 9b9be000..f624e12a 100644
--- a/src/components/board/board-delete-dialog.tsx
+++ b/src/components/board/board-delete-dialog.tsx
@@ -1,92 +1,81 @@
-import { Check, Copy } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import { DashboardProps } from ".";
-import { Button, buttonVariants } from "../ui/button";
+import { deleteOuterbaseDashboardChart } from "@/outerbase-cloud/api";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+import CopyableText from "../copyable-text";
+import { createDialog } from "../create-dialog";
+import LabelInput from "../label-input";
+import { Button } from "../ui/button";
 import {
-  Dialog,
-  DialogClose,
-  DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "../ui/dialog";
-import { Input } from "../ui/input";
 
-interface Props {
-  onClose?: () => void;
-  onDelete: () => void;
-  value: DashboardProps;
-}
+export const deleteChartDialog = createDialog<
+  {
+    workspaceId: string;
+    chartId: string;
+    chartName: string;
+  },
+  string | undefined
+>(({ close, chartName, workspaceId, chartId }) => {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState("");
 
-export function BoardDeleteDialog(props: Props) {
-  const [nameInput, setNameInput] = useState("");
-  const [copied, setCopied] = useState(false);
+  const deleteClicked = useCallback(() => {
+    if (name !== chartName) return;
 
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (copied) setCopied(false);
-    }, 1000);
+    setLoading(true);
 
-    return () => clearTimeout(timeout);
-  }, [copied]);
-
-  const onClickCopy = useCallback(() => {
-    setCopied(true);
-    navigator.clipboard.writeText(props.value.name);
-  }, [props.value.name]);
+    deleteOuterbaseDashboardChart(workspaceId, chartId)
+      .then(() => {
+        close(chartId);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [chartName, chartId, close, name, workspaceId]);
 
   return (
-    <Dialog open onOpenChange={props.onClose}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Confirm deletion of {props.value.name}</DialogTitle>
-          <DialogDescription className="py-4">
-            Deleting this chart will remove it from your dashboard. All members
-            will lose access. This action is permanent and cannot be undone.
-          </DialogDescription>
-          <div>
-            <button
-              className={buttonVariants({ size: "sm", variant: "secondary" })}
-              onClick={onClickCopy}
-            >
-              <div className="flex flex-row items-center gap-2">
-                <div>{props.value.name}</div>
-                <div className="relative h-4 w-4">
-                  <Copy
-                    className={`${copied ? "hidden" : ""} absolute h-4 w-4`}
-                  />
-                  <Check
-                    className={`${!copied ? "hidden" : ""} absolute h-4 w-4`}
-                  />
-                </div>
-              </div>
-            </button>
-            <div className="pt-4 pb-2 text-xs">
-              Enter the name of this Chart to confirm:
-            </div>
-            <Input
-              value={nameInput}
-              onChange={(v) => setNameInput(v.target.value)}
-            />
-          </div>
-        </DialogHeader>
-        <DialogFooter className="sm:justify-start">
-          <Button
-            type="button"
-            variant={"destructive"}
-            disabled={nameInput !== props.value.name}
-            onClick={props.onDelete}
-          >
-            I understand, delete my chart
-          </Button>
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Cancel
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <>
+      <DialogHeader>
+        <DialogTitle>Confirm deletion of {chartName}</DialogTitle>
+        <DialogDescription>
+          All saved queries, dashboards, definitions and any other contributions
+          made to your Base will be deleted. This action is permanent and{" "}
+          <strong>cannot</strong>
+          be undone.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-4">
+        <div>
+          <CopyableText text={chartName} />
+        </div>
+
+        <LabelInput
+          label="Enter the name of this Base to confirm:"
+          placeholder="Board name"
+          value={name}
+          required
+          onChange={(e) => setName(e.currentTarget.value)}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button
+          disabled={loading || chartName !== name}
+          onClick={deleteClicked}
+          variant={"destructive"}
+        >
+          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}I
+          understand, delete this base
+        </Button>
+        <Button variant={"secondary"} onClick={() => close(undefined)}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </>
   );
-}
+}, "close");
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index e1f81ed2..1c5f2689 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -23,7 +23,7 @@ interface Props {
   onChangeInterval: (v: number) => void;
   onLayoutSave: () => void;
   onLayoutCancel: () => void;
-  onRemove: () => void;
+  onRemove: (key: string) => void;
 }
 
 export default function Board({
@@ -34,6 +34,7 @@ export default function Board({
   onChangeInterval,
   onLayoutCancel,
   onLayoutSave,
+  onRemove,
 }: Props) {
   const [editMode, setEditMode] = useState<
     "ADD_CHART" | "REARRANGING_CHART" | null
@@ -112,6 +113,7 @@ export default function Board({
           }}
           editMode={editMode}
           setEditMode={setEditMode}
+          onRemove={onRemove}
         />
       </div>
     </BoardProvider>
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index 6df160c2..c0d7c034 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -103,20 +103,30 @@ export async function deleteOuterbaseDashboard(
 ) {
   return requestOuterbase(
     `/api/v1/workspace/${workspaceId}/dashboard/${dashboardId}`,
-    "DELETE",
+    "DELETE"
   );
 }
 
 export async function updateOuterbaseDashboard(
-  workspaceName: string,
+  workspaceId: string,
   dashboardId: string,
   data: any
 ) {
-    return requestOuterbase(
-      `/api/v1/workspace/${workspaceName}/dashboard/${dashboardId}`,
-      "PUT",
-      data
-    );
+  return requestOuterbase(
+    `/api/v1/workspace/${workspaceId}/dashboard/${dashboardId}`,
+    "PUT",
+    data
+  );
+}
+
+export async function deleteOuterbaseDashboardChart(
+  workspaceId: string,
+  chartId: string
+) {
+  return requestOuterbase(
+    `/api/v1/workspace/${workspaceId}/chart/${chartId}`,
+    "DELETE"
+  );
 }
 
 export async function runOuterbaseQueryRaw(

From 178de485655bb27d35e83af2c2ad02323e8a422b Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sat, 8 Feb 2025 07:57:29 +0700
Subject: [PATCH 019/106] correctly change the signin link

---
 src/app/(outerbase)/w/local-workspace/page.tsx | 2 +-
 src/app/(outerbase)/w/page.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(outerbase)/w/local-workspace/page.tsx b/src/app/(outerbase)/w/local-workspace/page.tsx
index 78c24cd7..3d55a028 100644
--- a/src/app/(outerbase)/w/local-workspace/page.tsx
+++ b/src/app/(outerbase)/w/local-workspace/page.tsx
@@ -41,7 +41,7 @@ export default function LocalWorkspacePage() {
               key={conn.id}
               color={conn.label ?? ""}
               icon={getDatabaseIcon(conn.driver ?? "")}
-              href={`/client/s/${conn.id}`}
+              href={`/client/s/${conn.driver}?p=${conn.id}`}
               title={conn.name}
               subtitle={getDatabaseFriendlyName(conn.driver ?? "")}
               visual={getDatabaseVisual(conn.driver ?? "")}
diff --git a/src/app/(outerbase)/w/page.tsx b/src/app/(outerbase)/w/page.tsx
index dd7ee61a..f379a34f 100644
--- a/src/app/(outerbase)/w/page.tsx
+++ b/src/app/(outerbase)/w/page.tsx
@@ -25,7 +25,7 @@ export default function OuterbaseMainPage() {
     } else if (!isLoading && !session) {
       // Invalid session, it might be expired session. We will
       // ask them for login again
-      router.push("/sigin");
+      router.push("/signin");
     }
   }, [token, session, isLoading, workspaces, router]);
 

From bea85310f65cabf9f054c190f0754d7d644de9f9 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sat, 8 Feb 2025 15:17:59 +0700
Subject: [PATCH 020/106] add chart dialog

---
 .../w/[workspaceId]/board/[boardId]/page.tsx  |  3 +-
 src/components/board/board-chart-editor.tsx   | 73 +++++++++++++++++++
 src/components/board/board-provider.tsx       | 20 +++--
 src/components/board/board-source-picker.tsx  | 49 +++++++++++++
 .../board/board-tool/board-button-menu.tsx    | 15 +++-
 src/components/board/index.tsx                | 42 +++++++----
 6 files changed, 175 insertions(+), 27 deletions(-)
 create mode 100644 src/components/board/board-chart-editor.tsx
 create mode 100644 src/components/board/board-source-picker.tsx

diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index e2fba0f7..3716203b 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -4,7 +4,6 @@ import { NavigationBar } from "@/app/(outerbase)/nav";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import Board from "@/components/board";
 import { deleteChartDialog } from "@/components/board/board-delete-dialog";
-import ClientOnly from "@/components/client-only";
 
 import {
   getOuterbaseDashboard,
@@ -135,7 +134,7 @@ export default function BoardPage() {
   return (
     <div className="flex h-screen w-screen flex-col overflow-hidden">
       <NavigationBar />
-      <div className="flex-1 overflow-x-hidden overflow-y-auto">
+      <div className="flex flex-1 overflow-x-hidden overflow-y-auto">
         <BoardPageEditor initialValue={data} mutate={mutate} />
       </div>
     </div>
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
new file mode 100644
index 00000000..f3dc57a4
--- /dev/null
+++ b/src/components/board/board-chart-editor.tsx
@@ -0,0 +1,73 @@
+import { produce } from "immer";
+import { useState } from "react";
+import { ChartValue } from "../chart/chart-type";
+import EditChartMenu from "../chart/edit-chart-menu";
+import SqlEditor from "../gui/sql-editor";
+import BoardSourcePicker from "./board-source-picker";
+
+export default function BoardChartEditor() {
+  const [value, setValue] = useState<ChartValue>({
+    model: "chart",
+    type: "line",
+    connection_id: "",
+    created_at: "",
+    id: "",
+    source_id: "",
+    updated_at: "",
+    workspace_id: "",
+    name: "",
+    params: {
+      type: "line",
+      id: "",
+      name: "",
+      model: "chart",
+      apiKey: "",
+      layers: [
+        {
+          type: "sql",
+          sql: "",
+        },
+      ],
+      options: {
+        yAxisKeys: [],
+        xAxisKey: "",
+      },
+      source_id: "",
+      created_at: "",
+      updated_at: "",
+      workspace_id: "",
+      connection_id: "",
+    },
+  });
+
+  return (
+    <div className="flex flex-1 border-t">
+      <div className="flex flex-1 flex-col">
+        <div className="h-1/2 border-b p-4">
+          <div className="text-lg font-semibold">Chart Editor</div>
+        </div>
+        <div className="h-1/2 overflow-x-hidden">
+          <div className="border-b px-4 py-2">
+            <BoardSourcePicker />
+          </div>
+          <div>
+            <SqlEditor
+              dialect="sqlite"
+              value={value.params.layers[0].sql}
+              onChange={(e) => {
+                setValue(
+                  produce(value, (draft) => {
+                    draft.params.layers[0].sql = e;
+                  })
+                );
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="w-[370px] overflow-x-hidden overflow-y-auto border-l p-4">
+        <EditChartMenu value={value} setValue={setValue} data={[{}]} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/board/board-provider.tsx b/src/components/board/board-provider.tsx
index 2128f309..74bebd3d 100644
--- a/src/components/board/board-provider.tsx
+++ b/src/components/board/board-provider.tsx
@@ -1,5 +1,13 @@
 import { BoardSourceDriver } from "@/drivers/board-source/base-source";
-import { createContext, PropsWithChildren, useContext } from "react";
+import { noop } from "lodash";
+import {
+  createContext,
+  Dispatch,
+  PropsWithChildren,
+  SetStateAction,
+  useContext,
+} from "react";
+import { BoardEditorMode } from ".";
 
 interface BoardContextSettingProps {
   autoRefresh: string[];
@@ -10,10 +18,12 @@ interface BoardContextProps {
   sources?: BoardSourceDriver;
   setting?: BoardContextSettingProps;
   lastRunTimestamp: number;
+  setBoardMode: Dispatch<SetStateAction<BoardEditorMode>>;
 }
 
 const BoardContext = createContext<BoardContextProps>({
   lastRunTimestamp: 0,
+  setBoardMode: noop,
 });
 
 export function useBoardContext() {
@@ -22,13 +32,9 @@ export function useBoardContext() {
 
 export function BoardProvider({
   children,
-  sources,
-  lastRunTimestamp,
-  setting,
+  ...value
 }: PropsWithChildren<BoardContextProps>) {
   return (
-    <BoardContext.Provider value={{ sources, setting, lastRunTimestamp }}>
-      {children}
-    </BoardContext.Provider>
+    <BoardContext.Provider value={value}>{children}</BoardContext.Provider>
   );
 }
diff --git a/src/components/board/board-source-picker.tsx b/src/components/board/board-source-picker.tsx
new file mode 100644
index 00000000..0413e1e2
--- /dev/null
+++ b/src/components/board/board-source-picker.tsx
@@ -0,0 +1,49 @@
+import { CaretDown } from "@phosphor-icons/react";
+import { getDatabaseIcon } from "../resource-card/utils";
+import { Button } from "../ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { useBoardContext } from "./board-provider";
+
+export default function BoardSourcePicker() {
+  const { sources: sourceDriver } = useBoardContext();
+  const sourceList = sourceDriver?.sourceList() ?? [];
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant={"outline"}>
+          Pick <CaretDown className="ml-2" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="m-0 p-0" align="start" side="top">
+        <Command>
+          <CommandInput placeholder="Search data source" />
+
+          <CommandList>
+            <CommandEmpty>No data source found</CommandEmpty>
+            <CommandGroup>
+              {sourceList.map((source) => {
+                const DatabaseIcon = getDatabaseIcon(source.type);
+
+                return (
+                  <CommandItem key={source.id} value={source.id}>
+                    <DatabaseIcon />
+                    {source.name}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/board/board-tool/board-button-menu.tsx b/src/components/board/board-tool/board-button-menu.tsx
index 873d51c7..6b451f51 100644
--- a/src/components/board/board-tool/board-button-menu.tsx
+++ b/src/components/board/board-tool/board-button-menu.tsx
@@ -19,7 +19,7 @@ interface Props {
 }
 
 export function BoardButtonMenu(props: Props) {
-  const { setting } = useBoardContext();
+  const { setting, setBoardMode } = useBoardContext();
 
   if (props.mode === "REARRANGING_CHART") {
     return (
@@ -35,7 +35,7 @@ export function BoardButtonMenu(props: Props) {
   }
 
   return (
-    <div>
+    <div className="flex gap-2">
       <button
         className={buttonVariants({ size: "sm", variant: "ghost" })}
         onClick={() => {
@@ -88,6 +88,17 @@ export function BoardButtonMenu(props: Props) {
           })}
         </DropdownMenuContent>
       </DropdownMenu>
+      <div>
+        <Button
+          variant={"default"}
+          size="sm"
+          onClick={() => {
+            setBoardMode("ADD_CHART");
+          }}
+        >
+          Add Chart
+        </Button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index 1c5f2689..fa5c9c61 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -2,6 +2,7 @@ import { BoardSourceDriver } from "@/drivers/board-source/base-source";
 import { useEffect, useState } from "react";
 import { ChartValue } from "../chart/chart-type";
 import { BoardCanvas } from "./board-canvas";
+import BoardChartEditor from "./board-chart-editor";
 import { BoardFilter } from "./board-filter";
 import { BoardFilterProps } from "./board-filter-dialog";
 import { BoardProvider } from "./board-provider";
@@ -15,6 +16,8 @@ export interface DashboardProps {
   };
 }
 
+export type BoardEditorMode = "ADD_CHART" | "REARRANGING_CHART" | null;
+
 interface Props {
   value: DashboardProps;
   sources?: BoardSourceDriver;
@@ -36,9 +39,7 @@ export default function Board({
   onLayoutSave,
   onRemove,
 }: Props) {
-  const [editMode, setEditMode] = useState<
-    "ADD_CHART" | "REARRANGING_CHART" | null
-  >(null);
+  const [editMode, setEditMode] = useState<BoardEditorMode>(null);
 
   const autoRefresh = [
     "5s",
@@ -74,8 +75,9 @@ export default function Board({
       sources={sources}
       lastRunTimestamp={lastRunTimestamp}
       setting={{ autoRefresh, name: value.name }}
+      setBoardMode={setEditMode}
     >
-      <div>
+      <div className="flex flex-1 flex-col">
         <BoardFilter
           filters={value.data.filters}
           onFilters={(v) =>
@@ -103,18 +105,26 @@ export default function Board({
             onLayoutSave();
           }}
         />
-        <BoardCanvas
-          value={value}
-          onChange={(v) => {
-            onChange({
-              ...value,
-              layout: v,
-            });
-          }}
-          editMode={editMode}
-          setEditMode={setEditMode}
-          onRemove={onRemove}
-        />
+        <div className="relative flex-1">
+          {editMode === "ADD_CHART" && (
+            <div className="bg-background absolute top-0 right-0 bottom-0 left-0 z-10 flex">
+              <BoardChartEditor />
+            </div>
+          )}
+
+          <BoardCanvas
+            value={value}
+            onChange={(v) => {
+              onChange({
+                ...value,
+                layout: v,
+              });
+            }}
+            editMode={editMode}
+            setEditMode={setEditMode}
+            onRemove={onRemove}
+          />
+        </div>
       </div>
     </BoardProvider>
   );

From 3f13562b480866514a1a27129d222f02f1952515 Mon Sep 17 00:00:00 2001
From: Logan Liffick <ltliffick@gmail.com>
Date: Sat, 8 Feb 2025 06:29:00 -0500
Subject: [PATCH 021/106] New Storybook components (#346)

* init

* move folder structure

---------

Co-authored-by: Visal .In <invisal@gmail.com>
---
 public/caret.svg                             |   3 +
 src/app/(theme)/connect/connection-list.tsx  |  40 +--
 src/app/(theme)/connect/saved-connection.tsx |  14 +-
 src/app/globals.css                          | 250 ++++++++++++++++++-
 src/app/storybook/avatar/page.tsx            |  22 ++
 src/app/storybook/button/page.tsx            |  78 ++++++
 src/app/storybook/button/refresh-button.tsx  |  16 ++
 src/app/storybook/input/page.tsx             |  60 +++++
 src/app/storybook/label/page.tsx             |  25 ++
 src/app/storybook/layout.tsx                 |  52 +++-
 src/app/storybook/loader/page.tsx            |  16 ++
 src/app/storybook/menu-bar/page.tsx          |  36 +++
 src/app/storybook/select/page.tsx            |  51 ++++
 src/app/storybook/toggle/page.tsx            |  27 ++
 src/components/orbit/avatar.tsx              |  50 ++++
 src/components/orbit/block.tsx               |  23 ++
 src/components/orbit/button.tsx              |  81 ++++++
 src/components/orbit/input.tsx               | 111 ++++++++
 src/components/orbit/inset.tsx               |  13 +
 src/components/orbit/label.tsx               |  45 ++++
 src/components/orbit/loader.tsx              |  59 +++++
 src/components/orbit/menu-bar.tsx            |  72 ++++++
 src/components/orbit/section.tsx             |   9 +
 src/components/orbit/select.tsx              |  51 ++++
 src/components/orbit/toggle.tsx              |  34 +++
 src/components/sidebar-menu.tsx              |   4 +-
 26 files changed, 1206 insertions(+), 36 deletions(-)
 create mode 100644 public/caret.svg
 create mode 100644 src/app/storybook/avatar/page.tsx
 create mode 100644 src/app/storybook/button/page.tsx
 create mode 100644 src/app/storybook/button/refresh-button.tsx
 create mode 100644 src/app/storybook/input/page.tsx
 create mode 100644 src/app/storybook/label/page.tsx
 create mode 100644 src/app/storybook/loader/page.tsx
 create mode 100644 src/app/storybook/menu-bar/page.tsx
 create mode 100644 src/app/storybook/select/page.tsx
 create mode 100644 src/app/storybook/toggle/page.tsx
 create mode 100644 src/components/orbit/avatar.tsx
 create mode 100644 src/components/orbit/block.tsx
 create mode 100644 src/components/orbit/button.tsx
 create mode 100644 src/components/orbit/input.tsx
 create mode 100644 src/components/orbit/inset.tsx
 create mode 100644 src/components/orbit/label.tsx
 create mode 100644 src/components/orbit/loader.tsx
 create mode 100644 src/components/orbit/menu-bar.tsx
 create mode 100644 src/components/orbit/section.tsx
 create mode 100644 src/components/orbit/select.tsx
 create mode 100644 src/components/orbit/toggle.tsx

diff --git a/public/caret.svg b/public/caret.svg
new file mode 100644
index 00000000..4b48370c
--- /dev/null
+++ b/public/caret.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.281 9.28104L12.781 16.781C12.7114 16.8508 12.6287 16.9061 12.5376 16.9438C12.4466 16.9816 12.349 17.001 12.2504 17.001C12.1519 17.001 12.0543 16.9816 11.9632 16.9438C11.8722 16.9061 11.7894 16.8508 11.7198 16.781L4.21979 9.28104C4.07906 9.14031 4 8.94944 4 8.75042C4 8.55139 4.07906 8.36052 4.21979 8.21979C4.36052 8.07906 4.55139 8 4.75042 8C4.94944 8 5.14031 8.07906 5.28104 8.21979L12.2504 15.1901L19.2198 8.21979C19.2895 8.15011 19.3722 8.09483 19.4632 8.05712C19.5543 8.01941 19.6519 8 19.7504 8C19.849 8 19.9465 8.01941 20.0376 8.05712C20.1286 8.09483 20.2114 8.15011 20.281 8.21979C20.3507 8.28947 20.406 8.3722 20.4437 8.46324C20.4814 8.55429 20.5008 8.65187 20.5008 8.75042C20.5008 8.84896 20.4814 8.94654 20.4437 9.03759C20.406 9.12863 20.3507 9.21136 20.281 9.28104Z" fill="#737373"/>
+</svg>
diff --git a/src/app/(theme)/connect/connection-list.tsx b/src/app/(theme)/connect/connection-list.tsx
index 1563c4ad..d89dde71 100644
--- a/src/app/(theme)/connect/connection-list.tsx
+++ b/src/app/(theme)/connect/connection-list.tsx
@@ -1,5 +1,14 @@
 "use client";
+import {
+  SavedConnectionItem,
+  SavedConnectionLocalStorage,
+  SupportedDriver,
+} from "@/app/(theme)/connect/saved-connection-storage";
 import { Button } from "@/components/ui/button";
+import { getDatabases } from "@/lib/api/fetch-databases";
+import { cn } from "@/lib/utils";
+import { User } from "lucia";
+import { LucideChevronDown, LucideSearch } from "lucide-react";
 import {
   Dispatch,
   SetStateAction,
@@ -8,21 +17,12 @@ import {
   useMemo,
   useState,
 } from "react";
+import DriverDropdown from "./driver-dropdown";
+import QuickConnect from "./quick-connect";
 import SaveConnection from "./saved-connection";
-import {
-  SavedConnectionItem,
-  SavedConnectionLocalStorage,
-  SupportedDriver,
-} from "@/app/(theme)/connect/saved-connection-storage";
+import ConnectionItemCard from "./saved-connection-card";
 import EditSavedConnection from "./saved-edit-connection";
 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";
-import { LucideChevronDown, LucideSearch } from "lucide-react";
-import DriverDropdown from "./driver-dropdown";
-import { cn } from "@/lib/utils";
 
 function ConnectionListSection({
   data,
@@ -74,7 +74,7 @@ function ConnectionListSection({
   return (
     <>
       {name && (
-        <h2 className="mt-4 font-semibold text-sm text-primary">{name}</h2>
+        <h2 className="text-primary mt-4 text-sm font-semibold">{name}</h2>
       )}
       {body}
     </>
@@ -211,22 +211,22 @@ export default function ConnectionList({
   }
 
   return (
-    <div className="flex flex-col flex-1 max-w-[1000px] mx-auto pb-12">
-      <div className="flex mt-12 gap-2">
-        <h1 className="flex-1 flex items-center font-semibold text-xl text-primary">
+    <div className="mx-auto flex max-w-[1000px] flex-1 flex-col pb-12">
+      <div className="mt-12 flex gap-2">
+        <h1 className="text-primary flex flex-1 items-center text-xl font-semibold">
           Bases
         </h1>
 
         <div>
-          <div className="border rounded overflow-hidden flex items-center grow mx-2 bg-background">
-            <div className="text-sm px-2 h-full flex items-center">
+          <div className="bg-background mx-2 flex grow items-center overflow-hidden rounded border">
+            <div className="flex h-full items-center px-2 text-sm">
               <LucideSearch className="h-4 w-4 text-black dark:text-white" />
             </div>
             <input
               value={search}
               onChange={(e) => setSearch(e.currentTarget.value)}
               type="text"
-              className="bg-inherit p-2 pl-2 pr-2 outline-hidden text-sm  h-full grow"
+              className="h-full grow bg-inherit p-2 pr-2 pl-2 text-sm outline-hidden"
               placeholder="Search base name"
             />
           </div>
@@ -235,7 +235,7 @@ export default function ConnectionList({
         <DriverDropdown onSelect={setShowAddConnection}>
           <Button variant={"default"}>
             New Connection
-            <LucideChevronDown className="ml-2 w-4 h-4" />
+            <LucideChevronDown className="ml-2 h-4 w-4" />
           </Button>
         </DriverDropdown>
 
diff --git a/src/app/(theme)/connect/saved-connection.tsx b/src/app/(theme)/connect/saved-connection.tsx
index 3c42edd3..572b457d 100644
--- a/src/app/(theme)/connect/saved-connection.tsx
+++ b/src/app/(theme)/connect/saved-connection.tsx
@@ -1,6 +1,3 @@
-import { useCallback, useState } from "react";
-import ConnectionDialogContent from "./saved-connection-content";
-import SaveConnectionType from "./saved-connection-type";
 import {
   DRIVER_DETAIL,
   SavedConnectionItem,
@@ -10,16 +7,19 @@ import {
   SavedConnectionStorage,
   SupportedDriver,
 } from "@/app/(theme)/connect/saved-connection-storage";
-import SavedConnectionConfig from "./saved-connection-config";
+import { WEBSITE_NAME } from "@/const";
 import { createDatabase } from "@/lib/api/fetch-databases";
 import { User } from "lucia";
-import { WEBSITE_NAME } from "@/const";
+import { useCallback, useState } from "react";
+import SavedConnectionConfig from "./saved-connection-config";
+import ConnectionDialogContent from "./saved-connection-content";
+import SaveConnectionType from "./saved-connection-type";
 
 type SaveConnectionStep = "storage" | "config";
 
 export function RqliteInstruction() {
   return (
-    <div className="bg-secondary p-4 mb-4 text-sm">
+    <div className="bg-secondary mb-4 p-4 text-sm">
       You should include {WEBSITE_NAME} in the list of allowed origins for CORS
       (Cross-Origin Resource Sharing)
       <pre className="mt-2">
@@ -31,7 +31,7 @@ export function RqliteInstruction() {
 
 export function CloudflareWarning() {
   return (
-    <div className="bg-secondary p-4 mb-4 text-sm">
+    <div className="bg-secondary mb-4 p-4 text-sm">
       To bypass CORS (Cross-Origin Resource Sharing) restrictions, we will route
       your request through our server. If you are fine with this, please
       proceed.
diff --git a/src/app/globals.css b/src/app/globals.css
index f99f5678..0a34e6cb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,8 +2,12 @@
 @import "./styles/markdown.css";
 
 @custom-variant dark (&:is(.dark *));
+@custom-variant interactive (&:where(.interactive, .interactive *));
+@custom-variant toggle (&:where(.toggle, .toggle *));
+@custom-variant square (&:where(.square, .square *));
+@custom-variant circular (&:where(.circular, .circular *));
 
-@theme inline {
+@theme {
   --font-*: initial;
   --font-sans: Inter, Helvetica, ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -51,6 +55,96 @@
   --animate-accordion-up: accordion-up 0.2s ease-out;
   --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 
+  /* FROM ORBIT DESIGN SYSTEM */
+
+  /* Type */
+  --text-xs: 10px;
+  --text-xs--line-height: calc(1 / 0.5);
+
+  --text-sm: 12px;
+  --text-sm--line-height: calc(1 / 0.75);
+
+  --text-base: 14px;
+  --text-base--line-height: calc(1.25 / 0.875);
+
+  /* Easings & transitions */
+  --ease-bounce: cubic-bezier(0.2, 0, 0, 1.5);
+  --default-transition-duration: 100ms /* snappier than default 150ms */;
+
+  /* Animation */
+  --animate-refresh: refresh 0.5s ease-in-out infinite;
+
+  /* Base colors */
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-neutral-50: oklch(0.985 0 0);
+  --color-neutral-100: oklch(0.97 0 0);
+  --color-neutral-150: oklch(0.96 0 0) /*new */;
+  --color-neutral-200: oklch(0.922 0 0);
+  --color-neutral-250: oklch(0.9 0 0) /* new */;
+  --color-neutral-300: oklch(0.87 0 0);
+  --color-neutral-400: oklch(0.708 0 0);
+  --color-neutral-450: oklch(0.62 0 0) /* new */;
+  --color-neutral-500: oklch(0.556 0 0);
+  --color-neutral-600: oklch(0.439 0 0);
+  --color-neutral-700: oklch(0.371 0 0);
+  --color-neutral-750: oklch(0.31 0 0) /* new */;
+  --color-neutral-800: oklch(0.269 0 0);
+  --color-neutral-850: oklch(0.23 0 0) /* new */;
+  --color-neutral-900: oklch(0.205 0 0);
+  --color-neutral-925: oklch(0.175 0 0) /* new */;
+  --color-neutral-950: oklch(0.145 0 0);
+
+  --color-red-650: oklch(0.55 0.238 27.4);
+  --color-red-750: oklch(0.46 0.195 27.2);
+
+  --color-blue-400: oklch(0.707 0.165 254.624);
+  --color-blue-800: oklch(0.424 0.199 265.638);
+
+  /* Component colors */
+
+  /* Base colors */
+  --color-ob-base-100: var(--color-white);
+  --color-ob-base-200: var(--color-neutral-50);
+  --color-ob-base-300: var(--color-neutral-100);
+  --color-ob-base-400: var(--color-neutral-200);
+  --color-ob-base-500: var(--color-neutral-300);
+  --color-ob-base-1000: var(--color-neutral-900);
+
+  --color-ob-border: var(--color-neutral-200);
+  --color-ob-border-active: var(--color-neutral-400);
+
+  /* Text colors */
+  --text-color-ob-base-100: var(--color-neutral-500);
+  --text-color-ob-base-200: var(--color-neutral-600);
+  --text-color-ob-base-300: var(--color-neutral-900);
+  --text-color-ob-destructive: var(--color-red-600);
+  --text-color-ob-inverted: var(--color-white);
+
+  /* ob-btn */
+  --color-ob-btn-primary-bg: var(--color-neutral-750);
+  --color-ob-btn-primary-bg-hover: var(--color-neutral-850);
+  --color-ob-btn-primary-border: var(--color-neutral-500);
+  --color-ob-btn-primary-border-hover: var(--color-neutral-600);
+
+  --color-ob-btn-secondary-bg: var(--color-white);
+  --color-ob-btn-secondary-bg-hover: var(--color-neutral-50);
+  --color-ob-btn-secondary-border: var(--color-neutral-200);
+  --color-ob-btn-secondary-border-hover: var(--color-neutral-300);
+
+  --color-ob-btn-ghost-bg-hover: var(--color-neutral-150);
+
+  --color-ob-btn-destructive-bg: var(--color-red-600);
+  --color-ob-btn-destructive-bg-hover: var(--color-red-650);
+  --color-ob-btn-destructive-border: var(--color-red-400);
+  --color-ob-btn-destructive-border-hover: var(--color-red-500);
+
+  /* Focus colors */
+  --color-ob-focus: var(--color-blue-400);
+
+  /* END ORBIT DESIGN SYSTEM */
+
   @keyframes accordion-down {
     from {
       height: 0;
@@ -264,6 +358,160 @@
   }
 }
 
+/* FROM ORBIT DESIGN SYSTEM */
+
+.dark {
+  /* Component colors */
+
+  /* Base colors */
+  --color-ob-base-100: var(--color-neutral-950);
+  --color-ob-base-200: var(--color-neutral-900);
+  --color-ob-base-300: var(--color-neutral-850);
+  --color-ob-base-400: var(--color-neutral-800);
+  --color-ob-base-500: var(--color-neutral-750);
+  --color-ob-base-1000: var(--color-neutral-50);
+
+  --color-ob-border: var(--color-neutral-800);
+  --color-ob-border-active: var(--color-neutral-700);
+
+  /* Text colors */
+  --text-color-ob-base-100: var(--color-neutral-500);
+  --text-color-ob-base-200: var(--color-neutral-400);
+  --text-color-ob-base-300: var(--color-neutral-50);
+  --text-color-ob-destructive: var(--color-red-400);
+  --text-color-ob-inverted: var(--color-neutral-900);
+
+  /* ob-btn */
+  --color-ob-btn-primary-bg: var(--color-neutral-300);
+  --color-ob-btn-primary-bg-hover: var(--color-neutral-250);
+  --color-ob-btn-primary-border: var(--color-neutral-100);
+  --color-ob-btn-primary-border-hover: var(--color-white);
+
+  --color-ob-btn-secondary-bg: var(--color-neutral-900);
+  --color-ob-btn-secondary-bg-hover: var(--color-neutral-850);
+  --color-ob-btn-secondary-border: var(--color-neutral-800);
+  --color-ob-btn-secondary-border-hover: var(--color-neutral-750);
+
+  --color-ob-btn-ghost-bg-hover: var(--color-neutral-850);
+
+  --color-ob-btn-destructive-bg: var(--color-red-800);
+  --color-ob-btn-destructive-bg-hover: var(--color-red-750);
+  --color-ob-btn-destructive-border: var(--color-red-700);
+  --color-ob-btn-destructive-border-hover: var(--color-red-600);
+
+  /* Focus colors */
+  --color-ob-focus: var(--color-blue-800);
+}
+
+.ob-btn {
+  &.btn-primary {
+    @apply border-ob-btn-primary-border bg-ob-btn-primary-bg text-ob-inverted shadow-xs;
+
+    @variant interactive {
+      @apply not-disabled:hover:border-ob-btn-primary-border-hover not-disabled:hover:bg-ob-btn-primary-bg-hover;
+
+      @variant toggle {
+        @apply not-disabled:border-ob-btn-primary-border-hover not-disabled:bg-ob-btn-primary-bg-hover;
+      }
+    }
+  }
+
+  &.btn-secondary {
+    @apply border-ob-btn-secondary-border bg-ob-btn-secondary-bg text-ob-base-300 shadow-xs;
+
+    @variant interactive {
+      @apply not-disabled:hover:border-ob-btn-secondary-border-hover not-disabled:hover:bg-ob-btn-secondary-bg-hover;
+
+      @variant toggle {
+        @apply not-disabled:border-ob-btn-secondary-border-hover not-disabled:bg-ob-btn-secondary-bg-hover;
+      }
+    }
+  }
+
+  &.btn-ghost {
+    @apply text-ob-base-300 border-transparent bg-transparent;
+
+    @variant interactive {
+      @apply not-disabled:hover:bg-ob-btn-ghost-bg-hover;
+
+      @variant toggle {
+        @apply not-disabled:bg-ob-btn-ghost-bg-hover;
+      }
+    }
+  }
+
+  &.btn-destructive {
+    @apply border-ob-btn-destructive-border bg-ob-btn-destructive-bg text-white;
+
+    @variant interactive {
+      @apply not-disabled:hover:bg-ob-btn-destructive-bg-hover not-disabled:hover:border-ob-btn-destructive-border-hover;
+
+      @variant toggle {
+        @apply not-disabled:bg-ob-btn-destructive-bg-hover not-disabled:border-ob-btn-destructive-border-hover;
+      }
+    }
+  }
+
+  @apply border;
+
+  @variant interactive {
+    @apply cursor-pointer transition-colors;
+  }
+}
+
+/* Use for elements that require a tab-focus state (most elements) */
+.ob-focus {
+  @apply focus-visible:ring-ob-focus outline-none focus:opacity-100 focus-visible:ring-1 *:in-focus:opacity-100;
+}
+
+/* Use for elements that require a disabled state */
+.ob-disable {
+  @apply disabled:text-ob-base-100 disabled:cursor-not-allowed;
+}
+
+/* Use size variants for elements that need to match certain heights */
+.ob-size-sm {
+  @apply h-6.5 rounded px-2 text-sm;
+
+  @variant square {
+    @apply flex size-6.5 items-center justify-center px-0;
+  }
+
+  @variant circular {
+    @apply flex size-6.5 items-center justify-center rounded-full px-0;
+  }
+}
+
+.ob-size-base {
+  @apply h-8 rounded-md px-2.5 text-base;
+
+  @variant square {
+    @apply flex size-8 items-center justify-center px-0;
+  }
+
+  @variant circular {
+    @apply flex size-8 items-center justify-center rounded-full px-0;
+  }
+}
+
+.ob-size-lg {
+  @apply h-9 rounded-md px-3 text-base;
+
+  @variant square {
+    @apply flex size-9 items-center justify-center px-0;
+  }
+
+  @variant circular {
+    @apply flex size-9 items-center justify-center rounded-full px-0;
+  }
+}
+
+@keyframes refresh {
+  to {
+    transform: rotate(360deg) scale(0.9);
+  }
+}
+
 .no-scrollbar::-webkit-scrollbar {
   width: 0;
   display: none;
diff --git a/src/app/storybook/avatar/page.tsx b/src/app/storybook/avatar/page.tsx
new file mode 100644
index 00000000..330f3e33
--- /dev/null
+++ b/src/app/storybook/avatar/page.tsx
@@ -0,0 +1,22 @@
+import { Avatar } from "@/components/orbit/avatar";
+import Block from "@/components/orbit/block";
+import Inset from "@/components/orbit/inset";
+import Section from "@/components/orbit/section";
+
+const userL = "logan";
+const userLImg = "/logo.svg";
+
+const userB = "brandon";
+
+export default function AvatarStorybook() {
+  return (
+    <Section>
+      <Inset>
+        <Block title="Avatar">
+          <Avatar username={userL} image={userLImg} size="base" />
+          <Avatar username={userB} image={undefined} />
+        </Block>
+      </Inset>
+    </Section>
+  );
+}
diff --git a/src/app/storybook/button/page.tsx b/src/app/storybook/button/page.tsx
new file mode 100644
index 00000000..d0ec51f1
--- /dev/null
+++ b/src/app/storybook/button/page.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { RefreshButton } from "@/app/storybook/button/refresh-button";
+import Block from "@/components/orbit/block";
+import { Button } from "@/components/orbit/button";
+import Inset from "@/components/orbit/inset";
+import Section from "@/components/orbit/section";
+import { Database } from "@phosphor-icons/react";
+import { useState } from "react";
+
+export default function ButtonStorybook() {
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [toggled, setToggled] = useState(false);
+
+  const handleToggle = () => {
+    setToggled(!toggled);
+  };
+
+  const handleClickLoading = () => {
+    setLoading(true);
+
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  };
+
+  const handleClickRefresh = () => {
+    setRefreshing(true);
+
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 2000);
+  };
+
+  return (
+    <Section>
+      <Inset>
+        <Block title="Button">
+          <Button title={"Primary"} size="base" variant="primary" />
+          <Button title={"Secondary"} />
+          <Button title={"With icon"} loading={loading}>
+            <Database />
+          </Button>
+          <Button
+            title={"Small button"}
+            size="sm"
+            onClick={handleClickLoading}
+            loading={loading}
+          >
+            <Database />
+          </Button>
+          <Button
+            title={"Click to load"}
+            size="lg"
+            onClick={handleClickLoading}
+            loading={loading}
+          />
+          <Button
+            title={"Click to toggle"}
+            size="base"
+            variant="ghost"
+            onClick={handleToggle}
+            toggled={toggled}
+          />
+          <Button title={"Destructive"} size="base" variant="destructive" />
+        </Block>
+        <Block title="Refresh button">
+          <RefreshButton
+            onClick={handleClickRefresh}
+            toggled={refreshing}
+            size="base"
+          />
+        </Block>
+      </Inset>
+    </Section>
+  );
+}
diff --git a/src/app/storybook/button/refresh-button.tsx b/src/app/storybook/button/refresh-button.tsx
new file mode 100644
index 00000000..21cc721a
--- /dev/null
+++ b/src/app/storybook/button/refresh-button.tsx
@@ -0,0 +1,16 @@
+import { Button, ButtonProps } from "@/components/orbit/button";
+import { cn } from "@/lib/utils";
+import { ArrowsClockwise } from "@phosphor-icons/react";
+
+export const RefreshButton = ({ ...props }: ButtonProps) => (
+  <Button shape="square" toggled={props.toggled} {...props}>
+    <ArrowsClockwise
+      className={cn({
+        "animate-refresh": props.toggled,
+        "size-4.5": props.size === "base",
+        "size-4": props.size === "sm",
+        "size-5": props.size === "lg",
+      })}
+    />
+  </Button>
+);
diff --git a/src/app/storybook/input/page.tsx b/src/app/storybook/input/page.tsx
new file mode 100644
index 00000000..9ac18eaf
--- /dev/null
+++ b/src/app/storybook/input/page.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import Block from "@/components/orbit/block";
+import { Input } from "@/components/orbit/input";
+import Inset from "@/components/orbit/inset";
+import { Label } from "@/components/orbit/label";
+import Section from "@/components/orbit/section";
+import { useState } from "react";
+
+export default function InputStorybook() {
+  const [isValid, setIsValid] = useState(true);
+
+  const checkIfValid = (value: string) => {
+    if (value === "dog" || value === "") {
+      setIsValid(true);
+    } else setIsValid(false);
+  };
+
+  return (
+    <Section>
+      <Inset>
+        <Block title="Input">
+          <Label title="Name" htmlFor="name">
+            <Input
+              onValueChange={() => {}}
+              placeholder="e.g. Joe Smith"
+              id="name"
+              size="sm"
+              disabled
+            />
+          </Label>
+          <Label
+            title="Resource name"
+            htmlFor="resourceName"
+            required
+            requiredDescription="text must be 'dog' "
+            isValid={isValid}
+          >
+            <Input
+              isValid={isValid}
+              preText="outerbase.com/"
+              onValueChange={checkIfValid}
+              placeholder="my-cool-base"
+              id="resourceName"
+              size="base"
+            />
+          </Label>
+          <Label title="Month" htmlFor="month">
+            <Input
+              onValueChange={() => {}}
+              placeholder="e.g. April"
+              id="month"
+              size="lg"
+            />
+          </Label>
+        </Block>
+      </Inset>
+    </Section>
+  );
+}
diff --git a/src/app/storybook/label/page.tsx b/src/app/storybook/label/page.tsx
new file mode 100644
index 00000000..a98580b1
--- /dev/null
+++ b/src/app/storybook/label/page.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import Block from "@/components/orbit/block";
+import { Input } from "@/components/orbit/input";
+import Inset from "@/components/orbit/inset";
+import { Label } from "@/components/orbit/label";
+import Section from "@/components/orbit/section";
+
+export default function LabelStorybook() {
+  return (
+    <Section>
+      <Inset>
+        <Block title="Label">
+          <Label title="Name" htmlFor="name" className="w-1/2">
+            <Input
+              onValueChange={() => {}}
+              placeholder="e.g. Joe Smith"
+              id="name"
+            />
+          </Label>
+        </Block>
+      </Inset>
+    </Section>
+  );
+}
diff --git a/src/app/storybook/layout.tsx b/src/app/storybook/layout.tsx
index 46a051fd..74a20e0e 100644
--- a/src/app/storybook/layout.tsx
+++ b/src/app/storybook/layout.tsx
@@ -19,12 +19,8 @@ export default function StorybookRootLayout({
           </div>
 
           <SidebarMenuItem icon={Layers2} text="Guideline" href="/storybook" />
-          <SidebarMenuHeader text="Basic UI Components" />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Input"
-            href="https://ui.shadcn.com/docs/components/input"
-          />
+          <SidebarMenuHeader text="Shadcn UI" />
+
           <SidebarMenuItem
             icon={Layers2}
             text="Dialog"
@@ -45,6 +41,50 @@ export default function StorybookRootLayout({
             text="Popover"
             href="https://ui.shadcn.com/docs/components/popover"
           />
+
+          <SidebarMenuHeader text="Orbit Design System" />
+          <SidebarMenuItem
+            icon={Layers2}
+            text="Avatar"
+            href="/storybook/avatar"
+          />
+          <SidebarMenuItem
+            icon={Layers2}
+            text="Button"
+            href="/storybook/button"
+          />
+          <SidebarMenuItem
+            icon={Layers2}
+            text="Input"
+            href="/storybook/input"
+          />
+          <SidebarMenuItem
+            icon={Layers2}
+            text="Label"
+            href="/storybook/label"
+          />
+          <SidebarMenuItem
+            icon={Layers2}
+            text="Loader"
+            href="/storybook/loader"
+          />
+          <SidebarMenuItem
+            icon={Layers2}
+            text="Menu bar"
+            href="/storybook/menu-bar"
+          />
+          <SidebarMenuItem
+            icon={Layers2}
+            text="Select"
+            href="/storybook/select"
+          />
+
+          <SidebarMenuItem
+            icon={Layers2}
+            text="Toggle"
+            href="/storybook/toggle"
+          />
+
           <Separator />
           <SidebarMenuHeader text="Advanced UI Components" />
           <SidebarMenuItem
diff --git a/src/app/storybook/loader/page.tsx b/src/app/storybook/loader/page.tsx
new file mode 100644
index 00000000..a558b6e3
--- /dev/null
+++ b/src/app/storybook/loader/page.tsx
@@ -0,0 +1,16 @@
+import Block from "@/components/orbit/block";
+import Inset from "@/components/orbit/inset";
+import { Loader } from "@/components/orbit/loader";
+import Section from "@/components/orbit/section";
+
+export default function LoaderStorybook() {
+  return (
+    <Section>
+      <Inset>
+        <Block title="Loader">
+          <Loader size={40} />
+        </Block>
+      </Inset>
+    </Section>
+  );
+}
diff --git a/src/app/storybook/menu-bar/page.tsx b/src/app/storybook/menu-bar/page.tsx
new file mode 100644
index 00000000..ad68e1af
--- /dev/null
+++ b/src/app/storybook/menu-bar/page.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import Block from "@/components/orbit/block";
+import Inset from "@/components/orbit/inset";
+import { MenuBar, MenuBarItemProps } from "@/components/orbit/menu-bar";
+import Section from "@/components/orbit/section";
+import { useState } from "react";
+
+const items: MenuBarItemProps[] = [
+  {
+    content: "All",
+    value: "all",
+  },
+  {
+    content: "Bases",
+    value: "base",
+  },
+  {
+    content: "Boards",
+    value: "board",
+  },
+];
+
+export default function MenuBarStorybook() {
+  const [active, setActive] = useState("all");
+
+  return (
+    <Section>
+      <Inset>
+        <Block title="Menu bar">
+          <MenuBar items={items} value={active} onChange={setActive} />
+        </Block>
+      </Inset>
+    </Section>
+  );
+}
diff --git a/src/app/storybook/select/page.tsx b/src/app/storybook/select/page.tsx
new file mode 100644
index 00000000..3649b912
--- /dev/null
+++ b/src/app/storybook/select/page.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import Block from "@/components/orbit/block";
+import Inset from "@/components/orbit/inset";
+import Section from "@/components/orbit/section";
+import { Select } from "@/components/orbit/select";
+import { useState } from "react";
+
+const dbs = [
+  "SQLite",
+  "MySQL",
+  "Postgres",
+  "LibSQL",
+  "MongoDB",
+  "Clickhouse",
+  "BigQuery",
+  "Snowflake",
+  "MSSql",
+  "Redshift",
+];
+
+export default function SelectStorybook() {
+  const [value, setValue] = useState(dbs[0]);
+
+  return (
+    <Section>
+      <Inset>
+        <Block title="Select">
+          <Select
+            options={dbs}
+            setValue={(value) => setValue(value)}
+            value={value}
+            size="sm"
+          />
+          <Select
+            options={dbs}
+            setValue={(value) => setValue(value)}
+            value={value}
+            size="base"
+          />
+          <Select
+            options={dbs}
+            setValue={(value) => setValue(value)}
+            value={value}
+            size="lg"
+          />
+        </Block>
+      </Inset>
+    </Section>
+  );
+}
diff --git a/src/app/storybook/toggle/page.tsx b/src/app/storybook/toggle/page.tsx
new file mode 100644
index 00000000..3952cce9
--- /dev/null
+++ b/src/app/storybook/toggle/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import Block from "@/components/orbit/block";
+import Inset from "@/components/orbit/inset";
+import Section from "@/components/orbit/section";
+import { Toggle } from "@/components/orbit/toggle";
+import { useState } from "react";
+
+export default function ToggleStorybook() {
+  const [toggle, setToggle] = useState(false);
+
+  const handleToggleClick = () => {
+    setToggle(!toggle);
+  };
+
+  return (
+    <Section>
+      <Inset>
+        <Block title="Toggle">
+          <Toggle onClick={handleToggleClick} toggled={toggle} size="sm" />
+          <Toggle onClick={handleToggleClick} toggled={toggle} size="base" />
+          <Toggle onClick={handleToggleClick} toggled={toggle} size="lg" />
+        </Block>
+      </Inset>
+    </Section>
+  );
+}
diff --git a/src/components/orbit/avatar.tsx b/src/components/orbit/avatar.tsx
new file mode 100644
index 00000000..bbae2656
--- /dev/null
+++ b/src/components/orbit/avatar.tsx
@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import Link from "next/link";
+
+type AvatarProps = {
+  as?: React.ElementType;
+  image?: string;
+  size?: "sm" | "base" | "lg";
+  toggled?: boolean;
+  username: string;
+};
+
+export const Avatar = ({
+  as = "button",
+  image,
+  size = "base",
+  toggled,
+  username,
+}: AvatarProps) => {
+  const Component = as && (as === "link" ? Link : as);
+
+  const firstInitial = username.charAt(0).toUpperCase();
+
+  return (
+    <Component
+      className={cn("ob-btn btn-secondary circular relative overflow-hidden", {
+        "ob-size-sm": size === "sm",
+        "ob-size-base": size === "base",
+        "ob-size-lg": size === "lg",
+        interactive: as === "button",
+        "after:absolute after:top-0 after:left-0 after:z-10 after:size-full after:bg-black/5 after:opacity-0 after:transition-opacity hover:after:opacity-100 dark:after:bg-white/10":
+          image,
+        "after:opacity-100": image && toggled,
+        toggle: !image && toggled,
+      })}
+    >
+      {image ? (
+        <Image
+          className="w-full"
+          height={size === "sm" ? 28 : size === "base" ? 32 : 36}
+          width={size === "sm" ? 28 : size === "base" ? 32 : 36}
+          src={image}
+          alt={username}
+        />
+      ) : (
+        <p className="text-ob-base-100 font-bold">{firstInitial}</p>
+      )}
+    </Component>
+  );
+};
diff --git a/src/components/orbit/block.tsx b/src/components/orbit/block.tsx
new file mode 100644
index 00000000..23a27bb9
--- /dev/null
+++ b/src/components/orbit/block.tsx
@@ -0,0 +1,23 @@
+type BlockProps = {
+  children: React.ReactNode
+  title?: string
+}
+
+const Block = ({ children, title }: BlockProps) => {
+  return (
+    <>
+      {title && (
+        <header>
+          <h2 className="mt-10 mb-4 text-2xl font-bold tracking-tight">
+            {title}
+          </h2>
+        </header>
+      )}
+      <div className="flex aspect-video w-full items-center justify-center gap-4 rounded-lg border border-neutral-200 bg-neutral-50 p-10 transition-colors dark:border-neutral-800 dark:bg-neutral-950">
+        {children}
+      </div>
+    </>
+  )
+}
+
+export default Block
diff --git a/src/components/orbit/button.tsx b/src/components/orbit/button.tsx
new file mode 100644
index 00000000..c77173e6
--- /dev/null
+++ b/src/components/orbit/button.tsx
@@ -0,0 +1,81 @@
+import { Loader } from "@/components/orbit/loader";
+import { cn } from "@/lib/utils";
+import Link, { LinkProps } from "next/link";
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  as?: React.ElementType;
+  children?: React.ReactNode;
+  displayContent?: "items-first" | "items-last"; // used for children of component
+  href?: LinkProps["href"];
+  loading?: boolean;
+  shape?: "base" | "square";
+  size?: "sm" | "base" | "lg";
+  title?: string | React.ReactNode;
+  toggled?: boolean;
+  variant?: "primary" | "secondary" | "ghost" | "destructive";
+};
+
+export const Button = ({
+  as,
+  children,
+  disabled,
+  displayContent = "items-last",
+  href,
+  loading,
+  shape = "base",
+  size = "base",
+  title,
+  toggled,
+  variant = "secondary",
+  ...props
+}: ButtonProps) => {
+  const Component = as ? (as === "link" ? Link : as) : "button";
+
+  return (
+    <Component
+      className={cn(
+        "ob-btn ob-focus interactive flex shrink-0 items-center font-medium select-none",
+
+        {
+          "btn-primary btn-shadow": variant === "primary",
+          "btn-secondary btn-shadow": variant === "secondary",
+          "btn-ghost": variant === "ghost",
+          "btn-destructive": variant === "destructive",
+
+          "ob-size-sm gap-1.5": size === "sm",
+          "ob-size-base gap-2": size === "base",
+          "ob-size-lg gap-2.5": size === "lg",
+
+          square: shape === "square",
+
+          "flex-row-reverse": displayContent === "items-first",
+
+          "ob-disable": disabled,
+
+          toggle: toggled,
+        }
+      )}
+      disabled={disabled || loading}
+      href={href}
+      {...props}
+    >
+      {shape !== "square" && title}
+
+      {loading ? (
+        <span
+          className={cn({
+            "w-3": size === "sm",
+            "w-3.5": size === "base",
+            "w-4": size === "lg",
+            "ease-bounce transition-[width] duration-300 starting:w-0":
+              !children,
+          })}
+        >
+          <Loader size={size === "sm" ? 12 : 16} />
+        </span>
+      ) : (
+        children
+      )}
+    </Component>
+  );
+};
diff --git a/src/components/orbit/input.tsx b/src/components/orbit/input.tsx
new file mode 100644
index 00000000..67fbc2db
--- /dev/null
+++ b/src/components/orbit/input.tsx
@@ -0,0 +1,111 @@
+import { cn } from "@/lib/utils";
+import { useMemo, useRef, useState } from "react";
+
+export const inputClasses = cn(
+  "bg-ob-btn-secondary-bg text-ob-base-300 border-ob-border focus:border-ob-border-active placeholder:text-ob-base-100 ob-disable border border-1 transition-colors focus:outline-none"
+);
+
+export type InputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> & {
+  children?: React.ReactNode;
+  className?: string;
+  displayContent?: "items-first" | "items-last"; // used for children of component
+  initialValue?: string;
+  isValid?: boolean;
+  onValueChange: ((value: string, isValid: boolean) => void) | undefined;
+  preText?: string[] | React.ReactNode[] | React.ReactNode;
+  postText?: string[] | React.ReactNode[] | React.ReactNode;
+  size?: "sm" | "base" | "lg";
+};
+
+export const Input = ({
+  className,
+  initialValue,
+  isValid = true,
+  onValueChange,
+  preText,
+  postText,
+  size = "base",
+  ...props
+}: InputProps) => {
+  const [currentValue, setCurrentValue] = useState(initialValue ?? "");
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useMemo(() => {
+    setCurrentValue(initialValue ?? "");
+  }, [initialValue]);
+
+  const updateCurrentValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    setCurrentValue(newValue);
+
+    if (onValueChange) {
+      if (!props.min) {
+        onValueChange(newValue, isValid);
+      } else if (typeof props.min === "number") {
+        onValueChange(newValue.slice(0, props.min), isValid);
+      }
+    }
+  };
+
+  const handlePreTextInputClick = () => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  return preText ? (
+    <div
+      className={cn(
+        "has-[:disabled]:ob-disable has-[:enabled]:active:border-ob-border-active has-[:focus]:border-ob-border-active flex cursor-text",
+        inputClasses,
+        {
+          "ob-size-sm": size === "sm",
+          "ob-size-base": size === "base",
+          "ob-size-lg": size === "lg",
+        },
+        className
+      )}
+      onClick={handlePreTextInputClick}
+    >
+      <span className="text-ob-base-200 pointer-events-none mr-0.5 flex items-center gap-2 transition-colors select-none">
+        {preText}
+      </span>
+
+      <input
+        className={cn(
+          "placeholder:text-ob-base-100 w-full bg-transparent focus:outline-none",
+          {
+            "text-ob-destructive": !isValid,
+          }
+        )}
+        onChange={updateCurrentValue}
+        ref={inputRef}
+        value={currentValue}
+        {...props}
+      />
+
+      <span className="text-ob-base-200 mr-0.5 flex items-center gap-2 transition-colors select-none">
+        {postText}
+      </span>
+    </div>
+  ) : (
+    <input
+      className={cn(
+        inputClasses,
+        {
+          "text-ob-destructive transition-colors": !isValid,
+          "ob-size-sm": size === "sm",
+          "ob-size-base": size === "base",
+          "ob-size-lg": size === "lg",
+        },
+        className
+      )}
+      onChange={updateCurrentValue}
+      value={currentValue}
+      {...props}
+    />
+  );
+};
diff --git a/src/components/orbit/inset.tsx b/src/components/orbit/inset.tsx
new file mode 100644
index 00000000..d6075e56
--- /dev/null
+++ b/src/components/orbit/inset.tsx
@@ -0,0 +1,13 @@
+type InsetProps = {
+  children?: React.ReactNode
+}
+
+const Inset = ({ children }: InsetProps) => {
+  return (
+    <div className="mx-auto flex w-full max-w-4xl flex-col gap-4 pt-10 pb-40">
+      {children}
+    </div>
+  )
+}
+
+export default Inset
diff --git a/src/components/orbit/label.tsx b/src/components/orbit/label.tsx
new file mode 100644
index 00000000..643db45f
--- /dev/null
+++ b/src/components/orbit/label.tsx
@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+
+export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+  children?: React.ReactNode;
+  className?: string;
+  isValid?: boolean;
+  title: string;
+  required?: boolean;
+  requiredDescription?: string;
+};
+
+export const Label = ({
+  children,
+  className,
+  isValid,
+  title,
+  required,
+  requiredDescription,
+  ...props
+}: LabelProps) => {
+  return (
+    <label
+      className={cn(
+        "text-ob-base-200 relative block w-full items-center gap-1 text-sm transition-colors *:w-full",
+        className
+      )}
+      {...props}
+    >
+      <div className="mb-1 flex w-max">
+        {title}
+        {required && (
+          <>
+            <span className="ml-0.5 inline-block">*</span>
+            {requiredDescription && !isValid && (
+              <span className="text-ob-destructive ml-1 inline-block transition-colors">
+                {requiredDescription}
+              </span>
+            )}
+          </>
+        )}
+      </div>
+      {children}
+    </label>
+  );
+};
diff --git a/src/components/orbit/loader.tsx b/src/components/orbit/loader.tsx
new file mode 100644
index 00000000..7b70eaca
--- /dev/null
+++ b/src/components/orbit/loader.tsx
@@ -0,0 +1,59 @@
+type LoaderProps = {
+  className?: string;
+  size?: number;
+};
+
+export const Loader = ({ className, size = 24 }: LoaderProps) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    className={className}
+    style={{ height: size ?? undefined, width: size ?? undefined }}
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="9.5"
+      fill="none"
+      strokeWidth="2"
+      strokeLinecap="round"
+    >
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        from="0 12 12"
+        to="360 12 12"
+        dur="2s"
+        repeatCount="indefinite"
+      />
+
+      <animate
+        attributeName="stroke-dasharray"
+        values="0 150;42 150;42 150"
+        keyTimes="0;0.5;1"
+        dur="1.5s"
+        repeatCount="indefinite"
+      />
+
+      <animate
+        attributeName="stroke-dashoffset"
+        values="0;-16;-59"
+        keyTimes="0;0.5;1"
+        dur="1.5s"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle
+      cx="12"
+      cy="12"
+      r="9.5"
+      fill="none"
+      opacity={0.1}
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </svg>
+);
diff --git a/src/components/orbit/menu-bar.tsx b/src/components/orbit/menu-bar.tsx
new file mode 100644
index 00000000..760a672b
--- /dev/null
+++ b/src/components/orbit/menu-bar.tsx
@@ -0,0 +1,72 @@
+import { cn } from "@/lib/utils";
+
+export interface MenuBarItemProps {
+  aria?: string;
+  content: string | React.ReactNode;
+  value: string;
+}
+
+const MenuItem = ({
+  value: { content, aria },
+  selected,
+  onClick,
+}: {
+  value: MenuBarItemProps;
+  selected: boolean;
+  onClick: () => void;
+}) => (
+  <button
+    aria-label={typeof content === "string" ? content : aria}
+    className={cn(
+      "text-ob-base-200 hover:text-ob-base-300 ob-focus block h-full cursor-pointer rounded-sm border border-transparent px-2 transition-colors",
+      {
+        "bg-ob-base-100 border-ob-border text-ob-base-300 dark:bg-ob-base-500 dark:border-neutral-700":
+          selected,
+      }
+    )}
+    onClick={onClick}
+  >
+    {content}
+  </button>
+);
+
+interface MenuBarProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+  items: MenuBarItemProps[];
+  size?: "sm" | "base" | "lg";
+}
+
+export function MenuBar({
+  value,
+  onChange,
+  className,
+  items,
+  size = "base",
+}: MenuBarProps) {
+  return (
+    <nav
+      className={cn(
+        "bg-ob-base-300 border-ob-border flex w-max rounded-lg border !p-0.5 transition-colors",
+        {
+          "ob-size-sm": size === "sm",
+          "ob-size-base": size === "base",
+          "ob-size-lg": size === "lg",
+        },
+        className
+      )}
+    >
+      {items.map((item) => (
+        <MenuItem
+          key={item.value}
+          value={item}
+          selected={value === item.value}
+          onClick={() => {
+            if (onChange) onChange(item.value);
+          }}
+        />
+      ))}
+    </nav>
+  );
+}
diff --git a/src/components/orbit/section.tsx b/src/components/orbit/section.tsx
new file mode 100644
index 00000000..c028d8c3
--- /dev/null
+++ b/src/components/orbit/section.tsx
@@ -0,0 +1,9 @@
+type SectionProps = {
+  children?: React.ReactNode
+}
+
+const Section = ({ children }: SectionProps) => {
+  return <section className="w-full">{children}</section>
+}
+
+export default Section
diff --git a/src/components/orbit/select.tsx b/src/components/orbit/select.tsx
new file mode 100644
index 00000000..a56f61fa
--- /dev/null
+++ b/src/components/orbit/select.tsx
@@ -0,0 +1,51 @@
+import { cn } from "@/lib/utils";
+
+export type SelectProps = {
+  className?: string;
+  options: string[];
+  placeholder?: string;
+  setValue: (value: string) => void;
+  size?: "sm" | "base" | "lg";
+  value: string;
+};
+
+export const Select = ({
+  className,
+  options,
+  placeholder,
+  setValue,
+  size = "base",
+  value,
+}: SelectProps) => {
+  return (
+    <select
+      className={cn(
+        "ob-focus ob-btn btn-secondary interactive relative appearance-none truncate bg-no-repeat",
+        {
+          "ob-size-sm !pr-6.5": size === "sm",
+          "ob-size-base !pr-8": size === "base",
+          "ob-size-lg !pr-9": size === "lg",
+        },
+        className
+      )}
+      style={{
+        backgroundImage: "url(/caret.svg)",
+        backgroundPosition: `calc(100% - ${size === "lg" ? "10px" : size === "base" ? "8px" : "6px"}) calc(100% / 2)`,
+        backgroundSize:
+          size === "lg" ? "16px" : size === "base" ? "14px" : "12px",
+      }}
+      onChange={(e) => {
+        setValue(e.target.value);
+        e.target.blur();
+      }}
+      value={value}
+    >
+      {placeholder && <option value={undefined}>{placeholder}</option>}
+      {options.map((option, index) => (
+        <option value={option} key={index}>
+          {option}
+        </option>
+      ))}
+    </select>
+  );
+};
diff --git a/src/components/orbit/toggle.tsx b/src/components/orbit/toggle.tsx
new file mode 100644
index 00000000..0879b1a5
--- /dev/null
+++ b/src/components/orbit/toggle.tsx
@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+
+type ToggleProps = {
+  onClick: () => void;
+  size?: "sm" | "base" | "lg";
+  toggled: boolean;
+};
+
+export const Toggle = ({ onClick, size = "base", toggled }: ToggleProps) => {
+  return (
+    <button
+      className={cn(
+        "ob-focus interactive dark:bg-neutral-750 bg-neutral-250 cursor-pointer rounded-full border border-transparent p-1 transition-colors hover:bg-neutral-300 dark:hover:bg-neutral-700",
+        {
+          "h-5.5 w-8.5": size === "sm",
+          "h-6.5 w-10.5": size === "base",
+          "h-7.5 w-12.5": size === "lg",
+          "dark:hover:bg-neutral-450 bg-neutral-900 hover:bg-neutral-700 dark:bg-neutral-500":
+            toggled,
+        }
+      )}
+      onClick={onClick}
+    >
+      <div
+        className={cn(
+          "aspect-square h-full rounded-full bg-white transition-all",
+          {
+            "translate-x-full": toggled,
+          }
+        )}
+      />
+    </button>
+  );
+};
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 16e202f3..c39a2fdf 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -21,7 +21,7 @@ export function SidebarMenuItem({
   selected,
 }: SidebarMenuItemProps) {
   const className =
-    "flex p-2 pl-4 text-xs hover:cursor-pointer hover:bg-secondary";
+    "flex p-2 pl-4 text-sm hover:cursor-pointer hover:bg-secondary";
 
   const body = (
     <>
@@ -61,5 +61,5 @@ export function SidebarMenuItem({
 }
 
 export function SidebarMenuHeader({ text }: SidebarMenuHeader) {
-  return <div className="mt-2 flex p-2 pl-4 text-xs font-bold">{text}</div>;
+  return <div className="mt-2 flex p-2 pl-4 text-sm font-bold">{text}</div>;
 }

From 3fbde2ffe3222b3fc7683b8dd4c057a1345fefe1 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sat, 8 Feb 2025 23:35:59 +0700
Subject: [PATCH 022/106] move some component to orbit component

---
 src/app/(outerbase)/nav-profile.tsx          |  16 +--
 src/app/(outerbase)/nav.tsx                  |  56 ++++-----
 src/app/(outerbase)/w/[workspaceId]/page.tsx | 118 ++++++++++---------
 src/components/orbit/button.tsx              |   5 +-
 src/components/ui/button.tsx                 |   5 +-
 src/components/ui/dropdown-menu.tsx          |  30 ++---
 6 files changed, 115 insertions(+), 115 deletions(-)

diff --git a/src/app/(outerbase)/nav-profile.tsx b/src/app/(outerbase)/nav-profile.tsx
index 9ed3dfe5..dee60547 100644
--- a/src/app/(outerbase)/nav-profile.tsx
+++ b/src/app/(outerbase)/nav-profile.tsx
@@ -1,4 +1,4 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Avatar } from "@/components/orbit/avatar";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,20 +16,20 @@ export default function NavigationProfile() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <div className="bg-secondary text-secondary-foreground flex size-9 items-center justify-center rounded-lg border text-sm font-semibold">
-          {session.user.initials}
-        </div>
+        <Avatar size="lg" username={session.user.initials} as="div" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[200px]">
         <div className="flex gap-2 p-2">
-          <Avatar>
+          {/* <Avatar>
             <AvatarFallback>{session.user.initials}</AvatarFallback>
-          </Avatar>
+          </Avatar> */}
+          <Avatar size="lg" username={session.user.initials} />
+
           <div className="flex flex-col justify-center">
-            <div className="text-xs font-semibold">
+            <div className="text-sm font-semibold">
               {session.user.first_name + " " + session.user.last_name}
             </div>
-            <div className="text-xs">{session.user.email}</div>
+            <div className="text-sm">{session.user.email}</div>
           </div>
         </div>
         <DropdownMenuSeparator />
diff --git a/src/app/(outerbase)/nav.tsx b/src/app/(outerbase)/nav.tsx
index 489e8465..55ee9632 100644
--- a/src/app/(outerbase)/nav.tsx
+++ b/src/app/(outerbase)/nav.tsx
@@ -1,13 +1,12 @@
 "use client";
 import { OuterbaseIcon } from "@/components/icons/outerbase";
+import { Button } from "@/components/orbit/button";
 import { getDatabaseIcon } from "@/components/resource-card/utils";
-import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
 import { CaretUpDown, Gear, GlobeHemisphereEast } from "@phosphor-icons/react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
@@ -28,7 +27,7 @@ export function NavigationBar() {
 
         <Popover>
           <PopoverTrigger asChild>
-            <Button variant={"ghost"}>
+            <Button variant="ghost">
               {currentWorkspace?.name} <CaretUpDown className="ml-2" />
             </Button>
           </PopoverTrigger>
@@ -91,65 +90,50 @@ function WorkspaceSelector() {
   return (
     <div className="flex h-[400px] w-[500px]">
       <div className="flex h-full w-1/2 flex-col gap-0.5 border-r p-1">
-        <label className="text-muted-foreground mt-1 px-3 py-1 text-xs font-bold">
+        <label className="text-muted-foreground mt-1 px-2 py-1 text-sm">
           WORKSPACES
         </label>
 
-        <div
+        <Button
+          variant="ghost"
           onClick={() => router.push(`/w/local-workspace`)}
-          className={cn(
-            buttonVariants({
-              variant: "ghost",
-              size: "sm",
-            }),
-            "cursor-pointer justify-start py-0.5"
-          )}
+          toggled={!currentWorkspace}
         >
           Local
-        </div>
+        </Button>
 
         {workspaces.map((workspace) => (
-          <div
-            onClick={() => router.push(`/w/${workspace.short_name}`)}
+          <Button
             key={workspace.id}
+            onClick={() => router.push(`/w/${workspace.short_name}`)}
             onMouseEnter={() => setSelectedWorkspaceId(workspace.short_name)}
-            className={cn(
-              buttonVariants({
-                variant:
-                  currentWorkspace?.id === workspace.id ? "secondary" : "ghost",
-                size: "sm",
-              }),
-              "cursor-pointer justify-start py-0.5"
-            )}
+            variant="ghost"
+            toggled={currentWorkspace?.id === workspace.id}
+            className="font-normal"
           >
             {workspace.name}
-          </div>
+          </Button>
         ))}
       </div>
       <div className="flex h-full w-1/2 flex-col gap-0.5 overflow-y-auto p-1 text-sm">
-        <label className="text-muted-foreground mt-1 px-3 py-1 text-xs font-bold">
+        <label className="text-muted-foreground mt-1 px-3 py-1 text-sm font-bold">
           BASES
         </label>
         {bases.map((base) => {
           const IconComponent = getDatabaseIcon(base.sources[0]?.type);
 
           return (
-            <div
+            <Button
+              key={base.id}
+              variant="ghost"
+              className="font-normal"
               onClick={() =>
                 router.push(`/w/${selectedWorkspaceId}/${base.short_name}`, {})
               }
-              key={base.id}
-              className={cn(
-                buttonVariants({
-                  variant: "ghost",
-                  size: "sm",
-                }),
-                "cursor-pointer justify-start p-2"
-              )}
             >
-              <IconComponent className="mr-2 h-4 w-4" />
+              <IconComponent className="h-4 w-4" />
               {base.name}
-            </div>
+            </Button>
           );
         })}
       </div>
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 4a3aa0ca..96eb291e 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -1,14 +1,14 @@
 "use client";
 
-import { ButtonGroup, ButtonGroupItem } from "@/components/button-group";
-import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
+import { Button } from "@/components/orbit/button";
+import { Input } from "@/components/orbit/input";
+import { MenuBar } from "@/components/orbit/menu-bar";
 import ResourceCard from "@/components/resource-card";
 import {
   getDatabaseFriendlyName,
   getDatabaseIcon,
   getDatabaseVisual,
 } from "@/components/resource-card/utils";
-import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,11 +19,15 @@ import { timeSince } from "@/lib/utils-datetime";
 import { getOuterbaseDashboardList } from "@/outerbase-cloud/api";
 import {
   CalendarDots,
+  CaretDown,
+  Eye,
+  MagnifyingGlass,
   SortAscending,
   SortDescending,
+  Users,
 } from "@phosphor-icons/react";
 import { useParams, useRouter } from "next/navigation";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import useSWR from "swr";
 import { NavigationBar } from "../../nav";
 import { useWorkspaces } from "../../workspace-provider";
@@ -44,6 +48,7 @@ export default function WorkspaceListPageClient() {
   const router = useRouter();
   const { currentWorkspace, refreshWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
+  const [typeFilter, setTypeFilter] = useState("all");
 
   useRedirectValidWorkspace();
 
@@ -92,55 +97,62 @@ export default function WorkspaceListPageClient() {
       <NavigationBar />
 
       <div className="container mx-auto p-4">
-        <div className="mb-8">
-          <Toolbar>
-            <ButtonGroup>
-              <ButtonGroupItem>All</ButtonGroupItem>
-              <ButtonGroupItem>Bases</ButtonGroupItem>
-              <ButtonGroupItem>Boards</ButtonGroupItem>
-            </ButtonGroup>
-            <ButtonGroup>
-              <ButtonGroupItem>
-                <SortAscending size={16} />
-              </ButtonGroupItem>
-              <ButtonGroupItem>
-                <SortDescending size={16} />
-              </ButtonGroupItem>
-              <ButtonGroupItem>
-                <CalendarDots size={16} />
-              </ButtonGroupItem>
-              <ButtonGroupItem>
-                <CalendarDots size={16} />
-              </ButtonGroupItem>
-              <ButtonGroupItem>
-                <CalendarDots size={16} />
-              </ButtonGroupItem>
-            </ButtonGroup>
-
-            <ToolbarFiller />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button>New Resource</Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem>New Base</DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={async () => {
-                    const createdBoard = await createBoardDialog.show({
-                      workspaceId,
-                    });
-
-                    if (createdBoard) {
-                      mutate();
-                      router.push(`/w/${workspaceId}/board/${createdBoard.id}`);
-                    }
-                  }}
-                >
-                  New Board
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </Toolbar>
+        <div className="mb-8 flex gap-4">
+          <div className="flex-1">
+            <Input
+              preText={<MagnifyingGlass size={16} className="mr-2" />}
+              size="lg"
+              placeholder="Search resources..."
+              onValueChange={() => {}}
+            />
+          </div>
+
+          <MenuBar
+            size="lg"
+            items={[
+              { value: "all", content: "All" },
+              { value: "bases", content: "Bases" },
+              { value: "boards", content: "Boards" },
+            ]}
+            onChange={setTypeFilter}
+            value={typeFilter}
+          />
+
+          <MenuBar
+            size="lg"
+            items={[
+              { value: "all", content: <SortAscending size={16} /> },
+              { value: "recent", content: <SortDescending size={16} /> },
+              { value: "updated", content: <CalendarDots size={16} /> },
+              { value: "created", content: <Eye size={16} /> },
+              { value: "name", content: <Users size={16} /> },
+            ]}
+          />
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="lg" variant="primary">
+                New Resource <CaretDown />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>New Base</DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={async () => {
+                  const createdBoard = await createBoardDialog.show({
+                    workspaceId,
+                  });
+
+                  if (createdBoard) {
+                    mutate();
+                    router.push(`/w/${workspaceId}/board/${createdBoard.id}`);
+                  }
+                }}
+              >
+                New Board
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
 
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
diff --git a/src/components/orbit/button.tsx b/src/components/orbit/button.tsx
index c77173e6..ee99e0fe 100644
--- a/src/components/orbit/button.tsx
+++ b/src/components/orbit/button.tsx
@@ -19,6 +19,7 @@ export const Button = ({
   as,
   children,
   disabled,
+  className,
   displayContent = "items-last",
   href,
   loading,
@@ -35,7 +36,6 @@ export const Button = ({
     <Component
       className={cn(
         "ob-btn ob-focus interactive flex shrink-0 items-center font-medium select-none",
-
         {
           "btn-primary btn-shadow": variant === "primary",
           "btn-secondary btn-shadow": variant === "secondary",
@@ -53,7 +53,8 @@ export const Button = ({
           "ob-disable": disabled,
 
           toggle: toggled,
-        }
+        },
+        className
       )}
       disabled={disabled || loading}
       href={href}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 12c089c4..35efc0b6 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -40,6 +40,9 @@ export interface ButtonProps
   asChild?: boolean;
 }
 
+/**
+ * @deprecated This component will be removed in the next major release. Please use the new Button component from Orbit design system.
+ */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 6f203319..e5704bcf 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
 } from "@radix-ui/react-icons";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -31,7 +31,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
+      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
       inset && "pl-8",
       className
     )}
@@ -51,7 +51,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
       className
     )}
     {...props}
@@ -69,7 +69,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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
       )}
@@ -88,7 +88,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-base outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -104,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     checked={checked}
@@ -128,7 +128,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
@@ -167,7 +167,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ));
@@ -179,7 +179,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn("ml-auto text-sm tracking-widest opacity-60", className)}
       {...props}
     />
   );
@@ -188,18 +188,18 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+  DropdownMenuTrigger,
 };

From 0effccacfbc1aeeffd316c0d2b818b35eb64598d Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 9 Feb 2025 08:04:34 +0700
Subject: [PATCH 023/106] add logout

---
 src/app/(outerbase)/nav-profile.tsx | 15 +++++---
 src/app/signin/page.tsx             | 55 ++++++++++++++++++-----------
 src/components/label-input.tsx      |  9 ++---
 src/components/orbit/input.tsx      |  2 +-
 src/components/ui/avatar.tsx        | 15 ++++++--
 src/components/ui/input.tsx         |  5 ++-
 6 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/src/app/(outerbase)/nav-profile.tsx b/src/app/(outerbase)/nav-profile.tsx
index dee60547..a224f802 100644
--- a/src/app/(outerbase)/nav-profile.tsx
+++ b/src/app/(outerbase)/nav-profile.tsx
@@ -6,10 +6,20 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useRouter } from "next/navigation";
+import { useCallback } from "react";
 import { useSession } from "./session-provider";
 
 export default function NavigationProfile() {
   const { session } = useSession();
+  const router = useRouter();
+
+  const onLogoutClicked = useCallback(() => {
+    // Remove all the session data
+    localStorage.removeItem("session");
+    localStorage.removeItem("ob-token");
+    router.push("/signin");
+  }, [router]);
 
   if (!session?.user) return null;
 
@@ -20,9 +30,6 @@ export default function NavigationProfile() {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[200px]">
         <div className="flex gap-2 p-2">
-          {/* <Avatar>
-            <AvatarFallback>{session.user.initials}</AvatarFallback>
-          </Avatar> */}
           <Avatar size="lg" username={session.user.initials} />
 
           <div className="flex flex-col justify-center">
@@ -35,7 +42,7 @@ export default function NavigationProfile() {
         <DropdownMenuSeparator />
         <DropdownMenuItem>Account Setting</DropdownMenuItem>
         <DropdownMenuItem>Theme</DropdownMenuItem>
-        <DropdownMenuItem>Log out</DropdownMenuItem>
+        <DropdownMenuItem onClick={onLogoutClicked}>Log out</DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/src/app/signin/page.tsx b/src/app/signin/page.tsx
index d64871e1..04914428 100644
--- a/src/app/signin/page.tsx
+++ b/src/app/signin/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import LabelInput from "@/components/label-input";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
 import {
   getOuterbaseWorkspace,
   loginOuterbaseByPassword,
@@ -9,7 +9,6 @@ import {
   OuterbaseAPIError,
   OuterbaseAPISession,
 } from "@/outerbase-cloud/api-type";
-import { LucideLoader } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
@@ -84,27 +83,43 @@ export default function SigninPage() {
           <p>Sign in to your existing account</p>
         </div>
 
-        <LabelInput
-          label="Work Email"
-          value={email}
-          placeholder="Enter your email address"
-          onChange={(e) => setEmail(e.currentTarget.value)}
-        />
+        <form
+          onSubmit={(e) => {
+            onLoginClicked();
+            e.preventDefault();
+          }}
+          className="flex flex-col gap-4"
+        >
+          <LabelInput
+            autoFocus
+            label="Work Email"
+            size="lg"
+            value={email}
+            placeholder="Enter your email address"
+            onChange={(e) => setEmail(e.currentTarget.value)}
+          />
 
-        <LabelInput
-          label="Password"
-          value={password}
-          type="password"
-          placeholder="Password"
-          onChange={(e) => setPassword(e.currentTarget.value)}
-        />
+          <LabelInput
+            label="Password"
+            size="lg"
+            value={password}
+            type="password"
+            placeholder="Password"
+            onChange={(e) => setPassword(e.currentTarget.value)}
+          />
 
-        {error && <div className="text-red-400">{error}</div>}
+          {error && <div className="text-red-400">{error}</div>}
 
-        <Button onClick={onLoginClicked}>
-          {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
-          Continue with email
-        </Button>
+          <Button
+            loading={loading}
+            onClick={onLoginClicked}
+            variant="primary"
+            size="lg"
+            className="justify-center"
+          >
+            Continue with email
+          </Button>
+        </form>
 
         <Link href="#" className="text-sm">
           Forget password
diff --git a/src/components/label-input.tsx b/src/components/label-input.tsx
index aa96e147..4fad2687 100644
--- a/src/components/label-input.tsx
+++ b/src/components/label-input.tsx
@@ -1,11 +1,12 @@
-import { Input, InputProps } from "./ui/input";
-import { Label } from "./ui/label";
+import { Input, InputProps } from "./orbit/input";
+import { Label } from "./orbit/label";
 
 export default function LabelInput(props: InputProps & { label: string }) {
   return (
     <div className="flex flex-col gap-2">
-      <Label>{props.label}</Label>
-      <Input {...props} />
+      <Label title={props.label}>
+        <Input {...props} />
+      </Label>
     </div>
   );
 }
diff --git a/src/components/orbit/input.tsx b/src/components/orbit/input.tsx
index 67fbc2db..d439e422 100644
--- a/src/components/orbit/input.tsx
+++ b/src/components/orbit/input.tsx
@@ -14,7 +14,7 @@ export type InputProps = Omit<
   displayContent?: "items-first" | "items-last"; // used for children of component
   initialValue?: string;
   isValid?: boolean;
-  onValueChange: ((value: string, isValid: boolean) => void) | undefined;
+  onValueChange?: ((value: string, isValid: boolean) => void) | undefined;
   preText?: string[] | React.ReactNode[] | React.ReactNode;
   postText?: string[] | React.ReactNode[] | React.ReactNode;
   size?: "sm" | "base" | "lg";
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index d260623d..979ca290 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -1,10 +1,13 @@
 "use client";
 
-import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+/**
+ * @deprecated Use `Avatar` from `@orbit/components` instead.
+ */
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
@@ -20,6 +23,9 @@ const Avatar = React.forwardRef<
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
+/**
+ * @deprecated Use `Avatar` from `@orbit/components` instead.
+ */
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
@@ -32,6 +38,9 @@ const AvatarImage = React.forwardRef<
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
+/**
+ * @deprecated Use `Avatar` from `@orbit/components` instead.
+ */
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
@@ -39,7 +48,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
       className
     )}
     {...props}
@@ -47,4 +56,4 @@ const AvatarFallback = React.forwardRef<
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarFallback, AvatarImage };
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 446eaf4f..c2f82f83 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -5,13 +5,16 @@ import { cn } from "@/lib/utils";
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
 
+/**
+ * @deprecated Use `Input` from `@orbit/components` instead.
+ */
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

From 9689981a45d0bf5ec803bee86c28e70ca99352f7 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 9 Feb 2025 08:13:38 +0700
Subject: [PATCH 024/106] add toggle menu on the nav profile

---
 src/app/(outerbase)/nav-profile.tsx | 39 ++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/app/(outerbase)/nav-profile.tsx b/src/app/(outerbase)/nav-profile.tsx
index a224f802..1759a653 100644
--- a/src/app/(outerbase)/nav-profile.tsx
+++ b/src/app/(outerbase)/nav-profile.tsx
@@ -6,14 +6,19 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Gear, SignOut, ToggleLeft, ToggleRight } from "@phosphor-icons/react";
+import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
 import { useCallback } from "react";
 import { useSession } from "./session-provider";
 
 export default function NavigationProfile() {
+  const { resolvedTheme, forcedTheme, setTheme } = useTheme();
   const { session } = useSession();
   const router = useRouter();
 
+  const theme = forcedTheme ?? resolvedTheme;
+
   const onLogoutClicked = useCallback(() => {
     // Remove all the session data
     localStorage.removeItem("session");
@@ -21,10 +26,21 @@ export default function NavigationProfile() {
     router.push("/signin");
   }, [router]);
 
+  const onThemeToggleClicked = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      setTheme(theme === "dark" ? "light" : "dark");
+
+      // We don't want the dropdown to close
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [theme, setTheme]
+  );
+
   if (!session?.user) return null;
 
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger>
         <Avatar size="lg" username={session.user.initials} as="div" />
       </DropdownMenuTrigger>
@@ -40,9 +56,24 @@ export default function NavigationProfile() {
           </div>
         </div>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>Account Setting</DropdownMenuItem>
-        <DropdownMenuItem>Theme</DropdownMenuItem>
-        <DropdownMenuItem onClick={onLogoutClicked}>Log out</DropdownMenuItem>
+        <DropdownMenuItem className="justify-between">
+          Account Setting
+          <Gear size={20} />
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="justify-between"
+          onClick={onThemeToggleClicked}
+        >
+          Theme
+          {theme === "dark" ? (
+            <ToggleRight weight="fill" size={20} />
+          ) : (
+            <ToggleLeft size={20} />
+          )}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onLogoutClicked} className="justify-between">
+          Log out <SignOut size={20} />
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

From 68d4b54222ac4076d21296aac5fa71ded5cdef1f Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 9 Feb 2025 09:30:42 +0700
Subject: [PATCH 025/106] add update workspace

---
 src/app/(outerbase)/nav.tsx                   |  3 +-
 .../w/[workspaceId]/settings/detail.tsx       | 68 +++++++++++++++++++
 .../w/[workspaceId]/settings/gateway.tsx      | 20 ++++++
 .../w/[workspaceId]/settings/members.tsx      | 17 +++++
 .../w/[workspaceId]/settings/page.tsx         | 27 ++++++++
 .../settings/workspace-delete.tsx             | 19 ++++++
 src/outerbase-cloud/api-workspace.ts          |  8 +++
 7 files changed, 161 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/settings/detail.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/settings/gateway.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/settings/members.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/settings/workspace-delete.tsx
 create mode 100644 src/outerbase-cloud/api-workspace.ts

diff --git a/src/app/(outerbase)/nav.tsx b/src/app/(outerbase)/nav.tsx
index 55ee9632..05b80f93 100644
--- a/src/app/(outerbase)/nav.tsx
+++ b/src/app/(outerbase)/nav.tsx
@@ -96,6 +96,7 @@ function WorkspaceSelector() {
 
         <Button
           variant="ghost"
+          className="font-normal"
           onClick={() => router.push(`/w/local-workspace`)}
           toggled={!currentWorkspace}
         >
@@ -116,7 +117,7 @@ function WorkspaceSelector() {
         ))}
       </div>
       <div className="flex h-full w-1/2 flex-col gap-0.5 overflow-y-auto p-1 text-sm">
-        <label className="text-muted-foreground mt-1 px-3 py-1 text-sm font-bold">
+        <label className="text-muted-foreground mt-1 px-3 py-1 text-sm">
           BASES
         </label>
         {bases.map((base) => {
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/detail.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/detail.tsx
new file mode 100644
index 00000000..b6381fcd
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/detail.tsx
@@ -0,0 +1,68 @@
+"use client";
+import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
+import { updateOuterbaseWorkspace } from "@/outerbase-cloud/api-workspace";
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+
+export default function WorkspaceDetailSection({
+  workspace,
+}: {
+  workspace: OuterbaseAPIWorkspace;
+}) {
+  const router = useRouter();
+  const { refreshWorkspace } = useWorkspaces();
+  const [loading, setLoading] = useState(false);
+  const [shortName, setShortName] = useState(workspace.short_name);
+  const [name, setName] = useState(workspace.name);
+
+  const onUpdateClicked = useCallback(() => {
+    setLoading(true);
+    updateOuterbaseWorkspace(workspace.id, { short_name: shortName, name })
+      .then(() => {
+        refreshWorkspace();
+        if (workspace.short_name !== shortName) {
+          router.push(`/w/${shortName}/settings`);
+        }
+      })
+      .catch()
+      .finally(() => setLoading(false));
+  }, [shortName, name, workspace, router, refreshWorkspace]);
+
+  return (
+    <div className="mt-12 flex flex-col gap-4">
+      <h2 className="font-bold">Details</h2>
+
+      <div className="flex gap-2">
+        <LabelInput
+          value={name}
+          onValueChange={setName}
+          label="Workspace name"
+          placeholder="Workspace name"
+          size="lg"
+        />
+        <LabelInput
+          value={shortName}
+          onValueChange={setShortName}
+          label="Workspace URL"
+          preText="studio.outerbase.com/"
+          placeholder="my-stellar-app"
+          size="lg"
+        />
+        <div className="flex items-end">
+          <Button
+            variant="primary"
+            size="lg"
+            loading={loading}
+            disabled={!name}
+            onClick={onUpdateClicked}
+          >
+            Update
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/gateway.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/gateway.tsx
new file mode 100644
index 00000000..b5b55b5f
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/gateway.tsx
@@ -0,0 +1,20 @@
+import { Button } from "@/components/orbit/button";
+
+export default function WorkspaceGatewaySection() {
+  return (
+    <div className="mt-12 flex flex-col gap-4">
+      <h2 className="font-bold">Gateway</h2>
+
+      <p className="text-base">
+        Securely access private network databases without modifying your
+        firewall or VPN
+      </p>
+
+      <div>
+        <Button size="lg" variant="secondary">
+          New Gateway
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/members.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/members.tsx
new file mode 100644
index 00000000..780c1f82
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/members.tsx
@@ -0,0 +1,17 @@
+"use client";
+import { Button } from "@/components/orbit/button";
+import { Plus } from "@phosphor-icons/react";
+
+export default function WorkspaceMemberSection() {
+  return (
+    <div className="mt-12 flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <h2 className="font-bold">Members</h2>
+        <Button size="lg">
+          <Plus size={16} />
+          New Member
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
index 80469b25..c261ac9d 100644
--- a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
@@ -1,9 +1,36 @@
+"use client";
 import { NavigationBar } from "@/app/(outerbase)/nav";
+import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
+import { Loader } from "@/components/orbit/loader";
+import WorkspaceDetailSection from "./detail";
+import WorkspaceGatewaySection from "./gateway";
+import WorkspaceMemberSection from "./members";
+import WorkspaceDeleteSection from "./workspace-delete";
 
 export default function WorkspaceBillingPage() {
+  const { currentWorkspace } = useWorkspaces();
+
   return (
     <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
       <NavigationBar />
+
+      <div className="container mt-18 flex flex-col">
+        <h1 className="text-lg font-bold">Workspace settings</h1>
+
+        {currentWorkspace ? (
+          <>
+            <WorkspaceDetailSection workspace={currentWorkspace} />
+            <WorkspaceMemberSection />
+            <WorkspaceGatewaySection />
+            <WorkspaceDeleteSection />
+          </>
+        ) : (
+          <div className="my-12 flex flex-col items-center justify-center gap-4">
+            <Loader size={50} />
+            Loading workspace...
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/workspace-delete.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/workspace-delete.tsx
new file mode 100644
index 00000000..f5265faf
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/workspace-delete.tsx
@@ -0,0 +1,19 @@
+import { Button } from "@/components/orbit/button";
+
+export default function WorkspaceDeleteSection() {
+  return (
+    <div className="mt-12 flex flex-col gap-4">
+      <h2 className="font-bold">Delete workspace</h2>
+      <p className="text-base">
+        This will delete all Bases within this workspace. All members will lose
+        access.
+      </p>
+
+      <div>
+        <Button size="lg" variant="destructive">
+          Delete Workspace
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/outerbase-cloud/api-workspace.ts b/src/outerbase-cloud/api-workspace.ts
new file mode 100644
index 00000000..f74f4492
--- /dev/null
+++ b/src/outerbase-cloud/api-workspace.ts
@@ -0,0 +1,8 @@
+import { requestOuterbase } from "./api";
+
+export function updateOuterbaseWorkspace(
+  workspaceId: string,
+  options: { short_name: string; name: string }
+) {
+  return requestOuterbase(`/api/v1/workspace/${workspaceId}`, "PUT", options);
+}

From bf4a405908ec8684a69c14eba561d034a6bcb76b Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 9 Feb 2025 13:29:57 +0700
Subject: [PATCH 026/106] add delete workspace

---
 src/app/(outerbase)/nav.tsx                   |  11 +-
 .../w/[workspaceId]/settings/delete.tsx       | 120 ++++++++++++++++++
 .../w/[workspaceId]/settings/detail.tsx       |  13 +-
 .../w/[workspaceId]/settings/page.tsx         |   4 +-
 .../settings/workspace-delete.tsx             |  19 ---
 src/app/(outerbase)/workspace-provider.tsx    |  13 +-
 src/app/storybook/create-dialog/example.tsx   |   2 +-
 src/components/board/board-delete-dialog.tsx  | 109 ++++++++--------
 src/components/create-dialog.tsx              |   6 +-
 src/outerbase-cloud/api-workspace.ts          |   4 +
 10 files changed, 210 insertions(+), 91 deletions(-)
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx
 delete mode 100644 src/app/(outerbase)/w/[workspaceId]/settings/workspace-delete.tsx

diff --git a/src/app/(outerbase)/nav.tsx b/src/app/(outerbase)/nav.tsx
index 05b80f93..d29055f3 100644
--- a/src/app/(outerbase)/nav.tsx
+++ b/src/app/(outerbase)/nav.tsx
@@ -19,7 +19,7 @@ export function NavigationBar() {
   const { workspaceId } = useParams<{ workspaceId: string }>();
 
   return (
-    <div className="bg-netural-100 dark:bg-background relative sticky top-0 z-50 flex h-14 items-center justify-center gap-2 px-2">
+    <div className="dark:bg-background relative sticky top-0 z-20 flex h-14 items-center justify-center gap-2 bg-neutral-50 px-2">
       <div className="text-primary absolute left-0 flex h-14 items-center pl-2">
         <Link href={`/w/${workspaceId}`}>
           <OuterbaseIcon className="h-8 w-8" />
@@ -96,7 +96,8 @@ function WorkspaceSelector() {
 
         <Button
           variant="ghost"
-          className="font-normal"
+          size="sm"
+          className="p-4 font-normal"
           onClick={() => router.push(`/w/local-workspace`)}
           toggled={!currentWorkspace}
         >
@@ -110,7 +111,8 @@ function WorkspaceSelector() {
             onMouseEnter={() => setSelectedWorkspaceId(workspace.short_name)}
             variant="ghost"
             toggled={currentWorkspace?.id === workspace.id}
-            className="font-normal"
+            className="p-4 font-normal"
+            size="sm"
           >
             {workspace.name}
           </Button>
@@ -127,7 +129,8 @@ function WorkspaceSelector() {
             <Button
               key={base.id}
               variant="ghost"
-              className="font-normal"
+              className="p-4 font-normal"
+              size="sm"
               onClick={() =>
                 router.push(`/w/${selectedWorkspaceId}/${base.short_name}`, {})
               }
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx
new file mode 100644
index 00000000..8bedde22
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx
@@ -0,0 +1,120 @@
+import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
+import CopyableText from "@/components/copyable-text";
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
+import { deleteOuterbaseWorkspace } from "@/outerbase-cloud/api-workspace";
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+
+function DeleteWorkspaceDialog({
+  workspace,
+  close,
+}: {
+  workspace: OuterbaseAPIWorkspace;
+  close: (value: boolean) => void;
+}) {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState("");
+
+  const onDeletedClicked = useCallback(() => {
+    setLoading(true);
+    deleteOuterbaseWorkspace(workspace.id)
+      .then(() => {
+        close(true);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [name, close]);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Confirm deletion of {workspace.name}</DialogTitle>
+      </DialogHeader>
+
+      <DialogDescription className="text-base">
+        Deleting this workspace will delete all Bases and revoke all connections
+        made to your databases. All members will lose access. This action is
+        permanent and cannot be undone.
+      </DialogDescription>
+
+      <div className="flex flex-col gap-4">
+        <div>
+          <CopyableText text={workspace.name} />
+        </div>
+
+        <LabelInput
+          label="Enter the name of this Workspace to confirm:"
+          placeholder="Enter workspace name"
+          size="lg"
+          value={name}
+          onValueChange={setName}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button
+          variant="destructive"
+          loading={loading}
+          onClick={onDeletedClicked}
+        >
+          I understand, delete my workspace
+        </Button>
+        <Button onClick={() => close(false)}>Cancel</Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+const deleteWorkspaceDialog = createDialog<
+  {
+    workspace: OuterbaseAPIWorkspace;
+  },
+  boolean
+>(
+  ({ workspace, close }) => {
+    return <DeleteWorkspaceDialog workspace={workspace} close={close} />;
+  },
+  { defaultValue: false }
+);
+
+export default function WorkspaceDeleteSection({
+  workspace,
+}: {
+  workspace: OuterbaseAPIWorkspace;
+}) {
+  const router = useRouter();
+  const { refreshWorkspace } = useWorkspaces();
+
+  const onDeleteClicked = useCallback(async () => {
+    const success = await deleteWorkspaceDialog.show({ workspace });
+    if (success) {
+      refreshWorkspace().then(() => router.push("/w"));
+    }
+  }, [workspace]);
+
+  return (
+    <div className="mt-12 flex flex-col gap-4">
+      <h2 className="font-bold">Delete workspace</h2>
+      <p className="text-base">
+        This will delete all Bases within this workspace. All members will lose
+        access.
+      </p>
+
+      <div>
+        <Button size="lg" variant="destructive" onClick={onDeleteClicked}>
+          Delete Workspace
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/detail.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/detail.tsx
index b6381fcd..5e33f9b4 100644
--- a/src/app/(outerbase)/w/[workspaceId]/settings/detail.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/detail.tsx
@@ -22,13 +22,14 @@ export default function WorkspaceDetailSection({
     setLoading(true);
     updateOuterbaseWorkspace(workspace.id, { short_name: shortName, name })
       .then(() => {
-        refreshWorkspace();
-        if (workspace.short_name !== shortName) {
-          router.push(`/w/${shortName}/settings`);
-        }
+        refreshWorkspace().then(() => {
+          if (workspace.short_name !== shortName) {
+            router.push(`/w/${shortName}/settings`);
+          }
+          setLoading(false);
+        });
       })
-      .catch()
-      .finally(() => setLoading(false));
+      .catch(() => setLoading(false));
   }, [shortName, name, workspace, router, refreshWorkspace]);
 
   return (
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
index c261ac9d..7b7a2648 100644
--- a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
@@ -2,10 +2,10 @@
 import { NavigationBar } from "@/app/(outerbase)/nav";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import { Loader } from "@/components/orbit/loader";
+import WorkspaceDeleteSection from "./delete";
 import WorkspaceDetailSection from "./detail";
 import WorkspaceGatewaySection from "./gateway";
 import WorkspaceMemberSection from "./members";
-import WorkspaceDeleteSection from "./workspace-delete";
 
 export default function WorkspaceBillingPage() {
   const { currentWorkspace } = useWorkspaces();
@@ -22,7 +22,7 @@ export default function WorkspaceBillingPage() {
             <WorkspaceDetailSection workspace={currentWorkspace} />
             <WorkspaceMemberSection />
             <WorkspaceGatewaySection />
-            <WorkspaceDeleteSection />
+            <WorkspaceDeleteSection workspace={currentWorkspace} />
           </>
         ) : (
           <div className="my-12 flex flex-col items-center justify-center gap-4">
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/workspace-delete.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/workspace-delete.tsx
deleted file mode 100644
index f5265faf..00000000
--- a/src/app/(outerbase)/w/[workspaceId]/settings/workspace-delete.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Button } from "@/components/orbit/button";
-
-export default function WorkspaceDeleteSection() {
-  return (
-    <div className="mt-12 flex flex-col gap-4">
-      <h2 className="font-bold">Delete workspace</h2>
-      <p className="text-base">
-        This will delete all Bases within this workspace. All members will lose
-        access.
-      </p>
-
-      <div>
-        <Button size="lg" variant="destructive">
-          Delete Workspace
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/(outerbase)/workspace-provider.tsx b/src/app/(outerbase)/workspace-provider.tsx
index aba72e2f..53b6eac4 100644
--- a/src/app/(outerbase)/workspace-provider.tsx
+++ b/src/app/(outerbase)/workspace-provider.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { getOuterbaseWorkspace } from "@/outerbase-cloud/api";
 import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
-import { noop } from "lodash";
 import { useParams } from "next/navigation";
 import { createContext, PropsWithChildren, useContext, useMemo } from "react";
 import useSWR from "swr";
@@ -10,9 +9,9 @@ import { useSession } from "./session-provider";
 const WorkspaceContext = createContext<{
   workspaces: OuterbaseAPIWorkspace[];
   currentWorkspace?: OuterbaseAPIWorkspace;
-  refreshWorkspace: () => void;
+  refreshWorkspace: () => Promise<void>;
   loading: boolean;
-}>({ workspaces: [], loading: true, refreshWorkspace: noop });
+}>({ workspaces: [], loading: true, refreshWorkspace: async () => {} });
 
 export function useWorkspaces() {
   return useContext(WorkspaceContext);
@@ -51,7 +50,13 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
         workspaces: data?.items || [],
         loading: isLoading,
         currentWorkspace,
-        refreshWorkspace: mutate,
+        refreshWorkspace: async () => {
+          const newWorkspceList = await getOuterbaseWorkspace();
+          mutate(newWorkspceList, {
+            revalidate: true,
+            optimisticData: newWorkspceList,
+          });
+        },
       }}
     >
       {children}
diff --git a/src/app/storybook/create-dialog/example.tsx b/src/app/storybook/create-dialog/example.tsx
index 8adb85c1..5506d6dc 100644
--- a/src/app/storybook/create-dialog/example.tsx
+++ b/src/app/storybook/create-dialog/example.tsx
@@ -40,7 +40,7 @@ const testingDialog = createDialog<{ color: string }, string>(
       </>
     );
   },
-  "close"
+  { defaultValue: "close" }
 );
 
 export function StorybookCreateDialogExample() {
diff --git a/src/components/board/board-delete-dialog.tsx b/src/components/board/board-delete-dialog.tsx
index f624e12a..42c9dcc7 100644
--- a/src/components/board/board-delete-dialog.tsx
+++ b/src/components/board/board-delete-dialog.tsx
@@ -19,63 +19,66 @@ export const deleteChartDialog = createDialog<
     chartName: string;
   },
   string | undefined
->(({ close, chartName, workspaceId, chartId }) => {
-  const [loading, setLoading] = useState(false);
-  const [name, setName] = useState("");
+>(
+  ({ close, chartName, workspaceId, chartId }) => {
+    const [loading, setLoading] = useState(false);
+    const [name, setName] = useState("");
 
-  const deleteClicked = useCallback(() => {
-    if (name !== chartName) return;
+    const deleteClicked = useCallback(() => {
+      if (name !== chartName) return;
 
-    setLoading(true);
+      setLoading(true);
 
-    deleteOuterbaseDashboardChart(workspaceId, chartId)
-      .then(() => {
-        close(chartId);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }, [chartName, chartId, close, name, workspaceId]);
+      deleteOuterbaseDashboardChart(workspaceId, chartId)
+        .then(() => {
+          close(chartId);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }, [chartName, chartId, close, name, workspaceId]);
 
-  return (
-    <>
-      <DialogHeader>
-        <DialogTitle>Confirm deletion of {chartName}</DialogTitle>
-        <DialogDescription>
-          All saved queries, dashboards, definitions and any other contributions
-          made to your Base will be deleted. This action is permanent and{" "}
-          <strong>cannot</strong>
-          be undone.
-        </DialogDescription>
-      </DialogHeader>
+    return (
+      <>
+        <DialogHeader>
+          <DialogTitle>Confirm deletion of {chartName}</DialogTitle>
+          <DialogDescription>
+            All saved queries, dashboards, definitions and any other
+            contributions made to your Base will be deleted. This action is
+            permanent and <strong>cannot</strong>
+            be undone.
+          </DialogDescription>
+        </DialogHeader>
 
-      <div className="flex flex-col gap-4">
-        <div>
-          <CopyableText text={chartName} />
-        </div>
+        <div className="flex flex-col gap-4">
+          <div>
+            <CopyableText text={chartName} />
+          </div>
 
-        <LabelInput
-          label="Enter the name of this Base to confirm:"
-          placeholder="Board name"
-          value={name}
-          required
-          onChange={(e) => setName(e.currentTarget.value)}
-        />
-      </div>
+          <LabelInput
+            label="Enter the name of this Base to confirm:"
+            placeholder="Board name"
+            value={name}
+            required
+            onChange={(e) => setName(e.currentTarget.value)}
+          />
+        </div>
 
-      <DialogFooter>
-        <Button
-          disabled={loading || chartName !== name}
-          onClick={deleteClicked}
-          variant={"destructive"}
-        >
-          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}I
-          understand, delete this base
-        </Button>
-        <Button variant={"secondary"} onClick={() => close(undefined)}>
-          Cancel
-        </Button>
-      </DialogFooter>
-    </>
-  );
-}, "close");
+        <DialogFooter>
+          <Button
+            disabled={loading || chartName !== name}
+            onClick={deleteClicked}
+            variant={"destructive"}
+          >
+            {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}I
+            understand, delete this base
+          </Button>
+          <Button variant={"secondary"} onClick={() => close(undefined)}>
+            Cancel
+          </Button>
+        </DialogFooter>
+      </>
+    );
+  },
+  { defaultValue: "close" }
+);
diff --git a/src/components/create-dialog.tsx b/src/components/create-dialog.tsx
index 75fe4a17..2415dfff 100644
--- a/src/components/create-dialog.tsx
+++ b/src/components/create-dialog.tsx
@@ -73,7 +73,9 @@ type DialogComponentProps<
 
 export function createDialog<ParamType = unknown, ReturnType = undefined>(
   component: FunctionComponent<DialogComponentProps<ParamType, ReturnType>>,
-  defaultCloseValue?: ReturnType
+  options?: {
+    defaultValue?: ReturnType;
+  }
 ) {
   return {
     show: (props: ParamType) => {
@@ -82,7 +84,7 @@ export function createDialog<ParamType = unknown, ReturnType = undefined>(
           component,
           options: props,
           resolve: resolve as unknown as (props: unknown) => void,
-          defaultCloseValue,
+          defaultCloseValue: options?.defaultValue,
         });
       });
     },
diff --git a/src/outerbase-cloud/api-workspace.ts b/src/outerbase-cloud/api-workspace.ts
index f74f4492..eb6b469e 100644
--- a/src/outerbase-cloud/api-workspace.ts
+++ b/src/outerbase-cloud/api-workspace.ts
@@ -6,3 +6,7 @@ export function updateOuterbaseWorkspace(
 ) {
   return requestOuterbase(`/api/v1/workspace/${workspaceId}`, "PUT", options);
 }
+
+export function deleteOuterbaseWorkspace(workspaceId: string) {
+  return requestOuterbase(`/api/v1/workspace/${workspaceId}`, "DELETE");
+}

From b62c4113ef35c1cc67bea02e0d13540472e6a1e2 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 9 Feb 2025 16:12:01 +0700
Subject: [PATCH 027/106] moving code around

---
 src/app/(dark-only)/layout.tsx                |  20 ++
 src/app/(dark-only)/new-workspace/page.tsx    |   5 +
 src/app/{ => (dark-only)}/signin/page.tsx     |   5 +-
 .../signin/starbase-portal.tsx                |   0
 src/app/{ => (dark-only)}/signin/styles.css   |   0
 src/app/(outerbase)/nav.tsx                   |  14 +-
 src/app/(outerbase)/{w => }/page.tsx          |   4 +-
 .../(outerbase)/w/[workspaceId]/layout.tsx    |   8 +-
 src/app/(outerbase)/w/[workspaceId]/page.tsx  |   4 +-
 .../w/[workspaceId]/settings/delete.tsx       |   9 +-
 .../w/[workspaceId]/settings/page.tsx         |   2 +-
 src/app/(public)/page.tsx                     | 332 ------------------
 src/app/layout.tsx                            |   2 +-
 src/components/create-dialog.tsx              |  39 +-
 src/components/gui/main-connection.tsx        |  12 +-
 src/window.d.ts                               |  15 +-
 16 files changed, 108 insertions(+), 363 deletions(-)
 create mode 100644 src/app/(dark-only)/layout.tsx
 create mode 100644 src/app/(dark-only)/new-workspace/page.tsx
 rename src/app/{ => (dark-only)}/signin/page.tsx (97%)
 rename src/app/{ => (dark-only)}/signin/starbase-portal.tsx (100%)
 rename src/app/{ => (dark-only)}/signin/styles.css (100%)
 rename src/app/(outerbase)/{w => }/page.tsx (90%)
 delete mode 100644 src/app/(public)/page.tsx

diff --git a/src/app/(dark-only)/layout.tsx b/src/app/(dark-only)/layout.tsx
new file mode 100644
index 00000000..601b3a57
--- /dev/null
+++ b/src/app/(dark-only)/layout.tsx
@@ -0,0 +1,20 @@
+import { OuterbaseSessionProvider } from "@/app/(outerbase)/session-provider";
+import ClientOnly from "@/components/client-only";
+import { WorkspaceProvider } from "../(outerbase)/workspace-provider";
+import ThemeLayout from "../(theme)/theme_layout";
+
+export default function OuterbaseLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ThemeLayout overrideTheme="dark">
+      <ClientOnly>
+        <OuterbaseSessionProvider>
+          <WorkspaceProvider>{children}</WorkspaceProvider>
+        </OuterbaseSessionProvider>
+      </ClientOnly>
+    </ThemeLayout>
+  );
+}
diff --git a/src/app/(dark-only)/new-workspace/page.tsx b/src/app/(dark-only)/new-workspace/page.tsx
new file mode 100644
index 00000000..72e81f1c
--- /dev/null
+++ b/src/app/(dark-only)/new-workspace/page.tsx
@@ -0,0 +1,5 @@
+export const theme = "dark";
+
+export default function NewWorkspacePage() {
+  return <div>Hello World</div>;
+}
diff --git a/src/app/signin/page.tsx b/src/app/(dark-only)/signin/page.tsx
similarity index 97%
rename from src/app/signin/page.tsx
rename to src/app/(dark-only)/signin/page.tsx
index 04914428..eeeb5e5a 100644
--- a/src/app/signin/page.tsx
+++ b/src/app/(dark-only)/signin/page.tsx
@@ -12,7 +12,6 @@ import {
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
-import ThemeLayout from "../(theme)/theme_layout";
 import { LoginBaseSpaceship } from "./starbase-portal";
 
 export default function SigninPage() {
@@ -62,7 +61,7 @@ export default function SigninPage() {
   }, [session, router]);
 
   return (
-    <ThemeLayout overrideTheme="dark">
+    <>
       <div
         className="absolute left-[10%] z-2 flex w-[400px] flex-col gap-4 rounded-lg border-neutral-800 bg-neutral-900 p-8 md:m-0"
         style={{
@@ -127,6 +126,6 @@ export default function SigninPage() {
       </div>
 
       <LoginBaseSpaceship />
-    </ThemeLayout>
+    </>
   );
 }
diff --git a/src/app/signin/starbase-portal.tsx b/src/app/(dark-only)/signin/starbase-portal.tsx
similarity index 100%
rename from src/app/signin/starbase-portal.tsx
rename to src/app/(dark-only)/signin/starbase-portal.tsx
diff --git a/src/app/signin/styles.css b/src/app/(dark-only)/signin/styles.css
similarity index 100%
rename from src/app/signin/styles.css
rename to src/app/(dark-only)/signin/styles.css
diff --git a/src/app/(outerbase)/nav.tsx b/src/app/(outerbase)/nav.tsx
index d29055f3..fef99a8d 100644
--- a/src/app/(outerbase)/nav.tsx
+++ b/src/app/(outerbase)/nav.tsx
@@ -37,7 +37,7 @@ export function NavigationBar() {
         </Popover>
       </div>
 
-      <div className="flex gap-4 text-sm">
+      <div className="flex gap-4 text-base">
         <Link
           href={`/w/${workspaceId}`}
           className="flex cursor-pointer items-center gap-1"
@@ -61,7 +61,7 @@ export function NavigationBar() {
       </div>
 
       <div className="absolute right-0 flex gap-2 pr-2">
-        <div className="bg-secondary text-secondary-foreground flex h-9 items-center justify-center rounded-lg border px-4 text-sm font-semibold">
+        <div className="bg-secondary text-secondary-foreground flex h-9 items-center justify-center rounded-lg border px-4 text-base font-semibold">
           Feedback
         </div>
 
@@ -117,6 +117,16 @@ function WorkspaceSelector() {
             {workspace.name}
           </Button>
         ))}
+
+        <Button
+          variant="ghost"
+          className="p-4 font-normal"
+          size="sm"
+          as="link"
+          href="/new-workspace"
+        >
+          New Workspace
+        </Button>
       </div>
       <div className="flex h-full w-1/2 flex-col gap-0.5 overflow-y-auto p-1 text-sm">
         <label className="text-muted-foreground mt-1 px-3 py-1 text-sm">
diff --git a/src/app/(outerbase)/w/page.tsx b/src/app/(outerbase)/page.tsx
similarity index 90%
rename from src/app/(outerbase)/w/page.tsx
rename to src/app/(outerbase)/page.tsx
index f379a34f..57e8a260 100644
--- a/src/app/(outerbase)/w/page.tsx
+++ b/src/app/(outerbase)/page.tsx
@@ -3,8 +3,8 @@
 import PageLoading from "@/components/page-loading";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
-import { useSession } from "../session-provider";
-import { useWorkspaces } from "../workspace-provider";
+import { useSession } from "./session-provider";
+import { useWorkspaces } from "./workspace-provider";
 
 export default function OuterbaseMainPage() {
   const { token, isLoading, session } = useSession();
diff --git a/src/app/(outerbase)/w/[workspaceId]/layout.tsx b/src/app/(outerbase)/w/[workspaceId]/layout.tsx
index 3034200b..0c544d48 100644
--- a/src/app/(outerbase)/w/[workspaceId]/layout.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/layout.tsx
@@ -1,3 +1,4 @@
+import { DialogProvider } from "@/components/create-dialog";
 import AuthProvider from "../../auth-provider";
 
 export default function OuterbaseLayout({
@@ -5,5 +6,10 @@ export default function OuterbaseLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <AuthProvider>{children}</AuthProvider>;
+  return (
+    <AuthProvider>
+      {children}
+      <DialogProvider slot="workspace" />
+    </AuthProvider>
+  );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 96eb291e..159f80dc 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -96,8 +96,8 @@ export default function WorkspaceListPageClient() {
     <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
       <NavigationBar />
 
-      <div className="container mx-auto p-4">
-        <div className="mb-8 flex gap-4">
+      <div className="container mx-auto mt-10 p-4">
+        <div className="mb-12 flex gap-4">
           <div className="flex-1">
             <Input
               preText={<MagnifyingGlass size={16} className="mr-2" />}
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx
index 8bedde22..b5075281 100644
--- a/src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx
@@ -33,7 +33,7 @@ function DeleteWorkspaceDialog({
       .finally(() => {
         setLoading(false);
       });
-  }, [name, close]);
+  }, [close, workspace]);
 
   return (
     <>
@@ -63,6 +63,7 @@ function DeleteWorkspaceDialog({
 
       <DialogFooter>
         <Button
+          disabled={name !== workspace.name}
           variant="destructive"
           loading={loading}
           onClick={onDeletedClicked}
@@ -84,7 +85,7 @@ const deleteWorkspaceDialog = createDialog<
   ({ workspace, close }) => {
     return <DeleteWorkspaceDialog workspace={workspace} close={close} />;
   },
-  { defaultValue: false }
+  { defaultValue: false, slot: "workspace" }
 );
 
 export default function WorkspaceDeleteSection({
@@ -98,9 +99,9 @@ export default function WorkspaceDeleteSection({
   const onDeleteClicked = useCallback(async () => {
     const success = await deleteWorkspaceDialog.show({ workspace });
     if (success) {
-      refreshWorkspace().then(() => router.push("/w"));
+      refreshWorkspace().then(() => router.push("/"));
     }
-  }, [workspace]);
+  }, [workspace, router, refreshWorkspace]);
 
   return (
     <div className="mt-12 flex flex-col gap-4">
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
index 7b7a2648..cf5940af 100644
--- a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
@@ -14,7 +14,7 @@ export default function WorkspaceBillingPage() {
     <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
       <NavigationBar />
 
-      <div className="container mt-18 flex flex-col">
+      <div className="container mt-10 flex flex-col p-4">
         <h1 className="text-lg font-bold">Workspace settings</h1>
 
         {currentWorkspace ? (
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
deleted file mode 100644
index 97e27d71..00000000
--- a/src/app/(public)/page.tsx
+++ /dev/null
@@ -1,332 +0,0 @@
-import {
-  MySQLIcon,
-  PostgreIcon,
-  SQLiteIcon,
-} from "@/components/icons/outerbase-icon";
-import { buttonVariants } from "@/components/ui/button";
-import WebsiteLayout from "@/components/website-layout";
-import { WEBSITE_GENERAL_DESCRIPTION, WEBSITE_NAME } from "@/const";
-import { cn } from "@/lib/utils";
-import type { Metadata } from "next";
-import Link from "next/link";
-import { PropsWithChildren } from "react";
-
-export const metadata: Metadata = {
-  title: WEBSITE_NAME,
-  keywords: [
-    "libsql",
-    "rqlite",
-    "sqlite",
-    "cloudflare d1",
-    "studio",
-    "browser",
-    "editor",
-    "gui",
-    "online",
-    "client",
-  ],
-  description: WEBSITE_GENERAL_DESCRIPTION,
-  openGraph: {
-    siteName: WEBSITE_NAME,
-    description: WEBSITE_GENERAL_DESCRIPTION,
-  },
-};
-
-function LinkButton({ title, url }: Readonly<{ title: string; url: string }>) {
-  return (
-    <Link
-      href={url}
-      className={cn(
-        buttonVariants({ variant: "default", size: "lg" }),
-        "font-bold text-xl p-8 px-10 shadow-[6px_6px_0px_#999] hover:shadow-[8px_-4px_0px_#aaa] transition-all duration-400"
-      )}
-    >
-      {title}
-    </Link>
-  );
-}
-
-function DatabaseBlock({
-  children,
-  center,
-  link,
-}: PropsWithChildren<{ center?: boolean; link: string }>) {
-  return (
-    <Link
-      href={link}
-      className={cn(
-        "shadow-[8px_8px_0px_#111] hover:shadow-[8px_-8px_0px_#444] transition-all duration-200 border-2 border-zinc-800 rounded-lg flex flex-col gap-2 py-6 cursor-pointer px-4 hover:text-yellow-500",
-        center ? "justify-center items-center" : ""
-      )}
-    >
-      {children}
-    </Link>
-  );
-}
-
-function HeroSection() {
-  return (
-    <div className="mt-32 relative h-[428px]">
-      <div
-        className="absolute top-0 bottom-0 left-0 right-0 transform-gpu before:absolute before:top-0 before:z-10 before:h-32 before:w-full before:bg-linear-to-b before:from-black before:to-black/0 after:absolute after:bottom-0 after:left-0 after:h-full after:w-full after:bg-linear-to-t after:from-black after:to-black/0"
-        style={{
-          background: `url(/hero-banner.jpg)`,
-          backgroundPosition: "center",
-          backgroundSize: "cover",
-        }}
-      ></div>
-
-      <div className="absolute top-0 bottom-0 left-0 right-0 -mt-16">
-        <div className="mx-auto container">
-          <h2 className="text-4xl font-bold text-white">
-            Powerful Database Client
-          </h2>
-          <p className="max-w-[700px] mt-6 text-lg">
-            {WEBSITE_NAME} is a fully-featured, lightweight GUI client for
-            managing Turso, LibSQL, Cloudflare D1, rqlite, MySQL, and
-            PostgreSQL. It runs entirely in your browser, so there&apos;s no
-            need to download anything.
-          </p>
-
-          <div className="flex gap-4 mt-8">
-            <LinkButton title={`Open ${WEBSITE_NAME}`} url="/connect" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function SupportDriver() {
-  return (
-    <div>
-      <div className="container mx-auto py-12 px-8">
-        <div className="mb-4 font-semibold text-3xl text-white">
-          Supporting Drivers
-        </div>
-
-        <p className="my-4 mb-8 max-w-[500px] text-zinc-400">
-          We support a variety of databases, with more to come in the future.
-        </p>
-
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4">
-          <DatabaseBlock center link="#">
-            <SQLiteIcon />
-            <div>SQLite</div>
-          </DatabaseBlock>
-
-          <DatabaseBlock center link="/databases/postgres">
-            <PostgreIcon />
-            <span>PostgreSQL</span>
-            <span className="text-xs -mt-2 text-blue-500">Beta</span>
-          </DatabaseBlock>
-
-          <DatabaseBlock center link="/databases/mysql">
-            <MySQLIcon />
-            <span>MySQL</span>
-            <span className="text-xs -mt-2 text-blue-500">Beta</span>
-          </DatabaseBlock>
-
-          <DatabaseBlock center link="#">
-            <SQLiteIcon />
-            <div>LibSQL</div>
-          </DatabaseBlock>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function FeatureList() {
-  return (
-    <div className="mx-auto container mt-12">
-      <div className="mb-4 font-semibold text-3xl text-white">
-        Modern Design and <br />
-        Intuitive Interface
-      </div>
-
-      <p className="my-4 max-w-[500px] text-zinc-400">
-        Sleek modern design meets a thoughtfully crafted, intuitive user
-        interface for a seamless experience.
-      </p>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
-        <div>
-          <video muted autoPlay loop className="lg:rounded-lg" playsInline>
-            <source
-              src="https://r2.invisal.com/libsqlstudio-table-editor.mp4"
-              type="video/mp4"
-            />
-          </video>
-
-          <h1 className="font-semibold text-lg mt-4 text-white">
-            Powerful Data Editor
-          </h1>
-
-          <p className="mt-2 text-zinc-400">
-            The handy data editor allows you to add, delete, and edit
-            information. Any changes you make in the data editor are saved on
-            your device and can be submitted all at once.
-          </p>
-        </div>
-
-        <div>
-          <video muted autoPlay loop className="lg:rounded-lg" playsInline>
-            <source
-              src="https://r2.invisal.com/libsqlstudio-saved-query3.mp4"
-              type="video/mp4"
-            />
-          </video>
-
-          <h1 className="text-lg font-semibold mt-4 text-white">
-            Saved Your Query
-          </h1>
-
-          <p className="mt-2 text-zinc-400">
-            {WEBSITE_NAME} allows you to save your queries and organize them
-            into folders, with the ability to sync across multiple devices.
-          </p>
-        </div>
-
-        <div>
-          <video muted autoPlay loop className="lg:rounded-lg" playsInline>
-            <source
-              src="https://r2.invisal.com/libsqlstudio-sql-query.mp4"
-              type="video/mp4"
-            />
-          </video>
-
-          <h1 className="text-lg font-semibold mt-4 text-white">
-            Writing and Running SQL
-          </h1>
-
-          <p className="mt-2 text-zinc-400">
-            {WEBSITE_NAME} features a user-friendly query editor equipped with
-            auto-completion and function hint tooltips. It allows you to execute
-            multiple queries simultaneously and view their results efficiently.
-          </p>
-        </div>
-
-        <div>
-          <video muted autoPlay loop className="lg:rounded-lg" playsInline>
-            <source
-              src="https://r2.invisal.com/libsqlstudio-schema-editor.mp4"
-              type="video/mp4"
-            />
-          </video>
-
-          <h1 className="font-semibold text-lg mt-4 text-white">
-            Create and Edit Table
-          </h1>
-
-          <p className="mt-2 text-zinc-400">
-            {WEBSITE_NAME} allows you to quickly create, modify, and remove
-            table columns with just a few clicks without writing any SQL.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function CommunitySection() {
-  return (
-    <div className="mx-auto container px-8 my-24">
-      <h1 className="mb-4 font-semibold text-3xl text-white">Community</h1>
-
-      <p className="mt-2 text-zinc-400 max-w-[500px] mb-8">
-        Join our community for the latest updates, roadmap insights, and
-        discussions on the future of {WEBSITE_NAME}.
-      </p>
-
-      <div className="grid md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4">
-        <DatabaseBlock link="https://github.com/outerbase/libsql-studio">
-          <svg
-            width="98"
-            height="96"
-            viewBox="0 0 98 96"
-            xmlns="http://www.w3.org/2000/svg"
-            className="w-8 h-8"
-          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-              fill="currentColor"
-            />
-          </svg>
-          <div className="font-bold mt-1">Github</div>
-        </DatabaseBlock>
-        <DatabaseBlock link="https://discord.gg/7zfESKF6QpG">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 127.14 96.36"
-            className="w-8 h-8"
-          >
-            <g>
-              <path
-                fill="currentColor"
-                d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
-              />
-            </g>
-          </svg>
-          <div className="font-bold mt-1">Discord</div>
-        </DatabaseBlock>
-        <DatabaseBlock link="https://x.com/outerbase">
-          <svg
-            className="w-8 h-8"
-            width="1200"
-            height="1227"
-            viewBox="0 0 1200 1227"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
-              fill="currentColor"
-            />
-          </svg>
-          <div className="font-bold mt-1">Twitter</div>
-        </DatabaseBlock>
-      </div>
-    </div>
-  );
-}
-
-export default async function MainPage() {
-  return (
-    <WebsiteLayout>
-      <HeroSection />
-      <SupportDriver />
-      <FeatureList />
-      <CommunitySection />
-      <div className="mx-auto container">
-        <div className="fade-sticky py-12 px-4">
-          <div className="text-3xl font-semibold mb-2">
-            and much much more...
-          </div>
-
-          <p className="tmb-4 max-w-[500px] text-zinc-400">
-            {WEBSITE_NAME} has many features and is regularly updated. Since it
-            is an{" "}
-            <Link
-              href="https://github.com/outerbase/libsql-studio"
-              className="border-b-4 inline-block hover:border-yellow-500"
-            >
-              open-source
-            </Link>{" "}
-            project, you can{" "}
-            <Link
-              href="https://github.com/outerbase/libsql-studio/issues"
-              className="border-b-4 inline-block hover:border-yellow-500"
-            >
-              request new features
-            </Link>{" "}
-            or even extend them yourself.
-          </p>
-        </div>
-      </div>
-      <div className="h-32"></div>
-    </WebsiteLayout>
-  );
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index cf027b8c..5ccdb95f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -39,7 +39,7 @@ export default async function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         {children}
-        <DialogProvider />
+        <DialogProvider slot="default" />
       </body>
     </html>
   );
diff --git a/src/components/create-dialog.tsx b/src/components/create-dialog.tsx
index 2415dfff..65186410 100644
--- a/src/components/create-dialog.tsx
+++ b/src/components/create-dialog.tsx
@@ -2,7 +2,13 @@
 import { FunctionComponent, useCallback, useEffect, useState } from "react";
 import { Dialog, DialogContent } from "./ui/dialog";
 
-export function DialogProvider() {
+type DialogProviderSlot = "default" | "workspace" | "base";
+
+export function DialogProvider({
+  slot = "default",
+}: {
+  slot?: DialogProviderSlot;
+}) {
   const [open, setOpen] = useState(false);
   const [component, setComponent] = useState<FunctionComponent>();
   const [options, setOptions] = useState<unknown>();
@@ -34,8 +40,15 @@ export function DialogProvider() {
 
   useEffect(() => {
     if (typeof window === "undefined") return;
-    window.showOuterbaseDialog = showToggle;
-  }, [showToggle]);
+    if (!window.showOuterbaseDialog) {
+      window.showOuterbaseDialog = {};
+    }
+
+    window.showOuterbaseDialog[slot] = showToggle;
+    return () => {
+      delete window.showOuterbaseDialog[slot];
+    };
+  }, [showToggle, slot]);
 
   return (
     <>
@@ -75,12 +88,30 @@ export function createDialog<ParamType = unknown, ReturnType = undefined>(
   component: FunctionComponent<DialogComponentProps<ParamType, ReturnType>>,
   options?: {
     defaultValue?: ReturnType;
+
+    /**
+     * Slot to render the dialog in. If not specified,
+     * it will be rendered to the deepest available slot.
+     */
+    slot?: DialogProviderSlot;
   }
 ) {
   return {
     show: (props: ParamType) => {
       return new Promise<ReturnType>((resolve) => {
-        window.showOuterbaseDialog({
+        if (!window.showOuterbaseDialog) return;
+
+        let slot = options?.slot;
+
+        if (!slot) {
+          if (window.showOuterbaseDialog["base"]) slot = "base";
+          else if (window.showOuterbaseDialog["workspace"]) slot = "workspace";
+          else slot = "default";
+        }
+
+        if (!window.showOuterbaseDialog[slot]) return;
+
+        window.showOuterbaseDialog[slot]({
           component,
           options: props,
           resolve: resolve as unknown as (props: unknown) => void,
diff --git a/src/components/gui/main-connection.tsx b/src/components/gui/main-connection.tsx
index 56dd3ff5..9477d5f7 100644
--- a/src/components/gui/main-connection.tsx
+++ b/src/components/gui/main-connection.tsx
@@ -1,13 +1,14 @@
 "use client";
-import { useEffect } from "react";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { useDatabaseDriver } from "@/context/driver-provider";
-import DatabaseGui from "./database-gui";
-import { useConfig } from "@/context/config-provider";
+import { WEBSITE_NAME } from "@/const";
 import { AutoCompleteProvider } from "@/context/auto-complete-provider";
+import { useConfig } from "@/context/config-provider";
+import { useDatabaseDriver } from "@/context/driver-provider";
 import { SchemaProvider } from "@/context/schema-provider";
-import { WEBSITE_NAME } from "@/const";
+import { useEffect } from "react";
+import { DialogProvider } from "../create-dialog";
 import ContextMenuHandler from "./context-menu-handler";
+import DatabaseGui from "./database-gui";
 
 function MainConnection() {
   const { databaseDriver: driver } = useDatabaseDriver();
@@ -21,6 +22,7 @@ function MainConnection() {
   return (
     <SchemaProvider>
       <DatabaseGui />
+      <DialogProvider slot="base" />
     </SchemaProvider>
   );
 }
diff --git a/src/window.d.ts b/src/window.d.ts
index 3265531a..37803a3a 100644
--- a/src/window.d.ts
+++ b/src/window.d.ts
@@ -23,11 +23,14 @@ interface OuterbaseIPC {
 declare global {
   interface Window {
     outerbaseIpc?: OuterbaseIPC;
-    showOuterbaseDialog: (props: {
-      component: FunctionComponent;
-      options: unknown;
-      resolve: (props: unknown) => void;
-      defaultCloseValue: unknown;
-    }) => void;
+    showOuterbaseDialog: Record<
+      string,
+      (props: {
+        component: FunctionComponent;
+        options: unknown;
+        resolve: (props: unknown) => void;
+        defaultCloseValue: unknown;
+      }) => void
+    >;
   }
 }

From 8703c512d2410531c0df6325fa60c6299322f757 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 9 Feb 2025 19:38:46 +0700
Subject: [PATCH 028/106] create workspace

---
 public/assets/onboarding_dark.svg          | 1553 ++++++++++++++++++++
 src/app/(dark-only)/new-workspace/page.tsx |  106 +-
 src/app/(outerbase)/nav.tsx                |    9 +-
 src/app/(outerbase)/workspace-provider.tsx |   67 +-
 src/components/icons/outerbase.tsx         |   52 +
 src/outerbase-cloud/api-workspace.ts       |   12 +
 src/outerbase-cloud/hook.ts                |   27 +
 7 files changed, 1814 insertions(+), 12 deletions(-)
 create mode 100644 public/assets/onboarding_dark.svg
 create mode 100644 src/outerbase-cloud/hook.ts

diff --git a/public/assets/onboarding_dark.svg b/public/assets/onboarding_dark.svg
new file mode 100644
index 00000000..dbdee756
--- /dev/null
+++ b/public/assets/onboarding_dark.svg
@@ -0,0 +1,1553 @@
+<svg width="1440" height="1024" viewBox="0 0 1440 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1440" height="1024" fill="#0A0A0A"/>
+<mask id="path-1-inside-1_234_4327" fill="white">
+<path d="M0 0H56V1024H0V0Z"/>
+</mask>
+<path d="M0 0H56V1024H0V0Z" fill="#0A0A0A"/>
+<path d="M55 0V1024H57V0H55Z" fill="#262626" mask="url(#path-1-inside-1_234_4327)"/>
+<rect x="151" y="136" width="32" height="32" rx="16" fill="#FAFAFA"/>
+<path d="M176.595 159.906L176.595 159.906L176.596 159.907C176.644 159.986 176.675 160.073 176.689 160.163C176.703 160.254 176.699 160.347 176.676 160.436C176.653 160.525 176.613 160.608 176.558 160.682C176.502 160.755 176.433 160.816 176.353 160.862C176.274 160.908 176.186 160.937 176.095 160.949C176.004 160.96 175.911 160.953 175.823 160.928C175.735 160.904 175.652 160.861 175.58 160.804C175.509 160.747 175.449 160.675 175.405 160.595L175.405 160.595L175.405 160.593C173.627 157.522 170.485 155.687 167 155.687C163.515 155.687 160.373 157.522 158.596 160.593L158.596 160.593L158.595 160.595C158.551 160.675 158.492 160.747 158.42 160.804C158.348 160.861 158.266 160.904 158.177 160.928C158.089 160.953 157.996 160.96 157.905 160.949C157.814 160.937 157.726 160.908 157.647 160.862C157.567 160.816 157.498 160.755 157.442 160.682C157.387 160.608 157.347 160.525 157.324 160.436C157.302 160.347 157.297 160.254 157.311 160.163C157.325 160.073 157.357 159.986 157.405 159.907L157.405 159.907L157.405 159.906C158.826 157.45 161.014 155.69 163.567 154.857L163.698 154.814L163.579 154.743C162.321 153.994 161.343 152.853 160.796 151.494C160.249 150.136 160.164 148.635 160.552 147.223C160.941 145.811 161.782 144.566 162.947 143.678C164.112 142.79 165.536 142.31 167 142.31C168.465 142.31 169.889 142.79 171.053 143.678C172.218 144.566 173.06 145.811 173.448 147.223C173.837 148.635 173.751 150.136 173.204 151.494C172.657 152.853 171.679 153.994 170.421 154.743L170.303 154.814L170.434 154.857C172.986 155.691 175.175 157.451 176.595 159.906ZM161.688 149L161.688 149C161.689 150.408 162.249 151.759 163.245 152.754C164.241 153.75 165.592 154.311 167 154.312H167C168.051 154.312 169.078 154.001 169.952 153.417C170.825 152.833 171.506 152.003 171.908 151.033C172.31 150.062 172.416 148.994 172.211 147.963C172.006 146.933 171.5 145.986 170.757 145.243C170.014 144.5 169.067 143.994 168.037 143.789C167.006 143.584 165.938 143.689 164.967 144.092C163.996 144.494 163.167 145.175 162.583 146.048C161.999 146.922 161.688 147.949 161.688 149Z" fill="#262626" stroke="#262626" stroke-width="0.125"/>
+<circle cx="205" cy="152" r="15.5" fill="#0A0A0A" stroke="#A3A3A3"/>
+<path d="M211 152C211 152.133 210.947 152.26 210.854 152.354C210.76 152.447 210.633 152.5 210.5 152.5H205.5V157.5C205.5 157.633 205.447 157.76 205.354 157.854C205.26 157.947 205.133 158 205 158C204.867 158 204.74 157.947 204.646 157.854C204.553 157.76 204.5 157.633 204.5 157.5V152.5H199.5C199.367 152.5 199.24 152.447 199.146 152.354C199.053 152.26 199 152.133 199 152C199 151.867 199.053 151.74 199.146 151.646C199.24 151.553 199.367 151.5 199.5 151.5H204.5V146.5C204.5 146.367 204.553 146.24 204.646 146.146C204.74 146.053 204.867 146 205 146C205.133 146 205.26 146.053 205.354 146.146C205.447 146.24 205.5 146.367 205.5 146.5V151.5H210.5C210.633 151.5 210.76 151.553 210.854 151.646C210.947 151.74 211 151.867 211 152Z" fill="#A3A3A3"/>
+<mask id="mask0_234_4327" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="151" y="204" width="1193" height="436">
+<circle cx="152.351" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="681.773" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="681.773" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="681.773" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="681.773" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="681.773" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="681.773" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="681.773" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="681.773" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="681.773" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="681.773" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="152.351" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="171.259" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="190.167" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="209.074" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="227.981" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="246.891" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="265.798" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="284.706" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="303.615" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="322.521" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="341.43" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="360.338" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="379.246" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="398.154" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="417.061" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="435.97" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="454.877" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="473.786" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="492.693" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="511.601" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="530.509" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="549.417" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="568.325" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="587.232" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="606.142" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="625.048" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="643.956" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="662.865" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="681.772" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="700.681" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="719.588" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="738.496" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="205.351" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="224.259" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="243.167" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="262.074" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="280.981" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="299.891" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="318.799" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="337.706" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="356.615" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="375.521" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="394.43" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="907.769" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="413.338" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="430.445" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="449.353" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="468.261" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="487.169" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="506.076" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="524.985" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="543.894" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="562.801" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="581.709" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="600.616" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="619.524" r="1.35057" fill="#442982"/>
+<circle cx="756.504" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="775.412" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="794.32" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="813.228" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="832.135" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="851.044" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="869.951" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="888.859" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="907.768" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="926.675" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="945.583" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="964.491" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="983.399" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1002.31" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1021.21" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1040.12" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1059.03" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1077.94" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1096.85" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1115.75" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1134.66" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1153.57" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1172.48" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1191.39" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1210.29" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1229.2" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1248.11" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1267.02" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1285.93" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1304.83" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1323.74" cy="638.433" r="1.35057" fill="#442982"/>
+<circle cx="1342.65" cy="638.433" r="1.35057" fill="#442982"/>
+</mask>
+<g mask="url(#mask0_234_4327)">
+<rect x="151" y="204" width="1193" height="436" fill="#262626"/>
+</g>
+</svg>
diff --git a/src/app/(dark-only)/new-workspace/page.tsx b/src/app/(dark-only)/new-workspace/page.tsx
index 72e81f1c..f9669606 100644
--- a/src/app/(dark-only)/new-workspace/page.tsx
+++ b/src/app/(dark-only)/new-workspace/page.tsx
@@ -1,5 +1,109 @@
+"use client";
+import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
+import OuterbaseLogo from "@/components/icons/outerbase";
+import { Button } from "@/components/orbit/button";
+import { Input } from "@/components/orbit/input";
+import { Label } from "@/components/orbit/label";
+import { createOuterbaseWorkspace } from "@/outerbase-cloud/api-workspace";
+import useOuterbaseMutation from "@/outerbase-cloud/hook";
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+
 export const theme = "dark";
 
+function strippedWorkspaceName(value: string) {
+  return value
+    .replace(
+      /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+      ""
+    )
+    .replace(/[^a-zA-Z 0-9]/g, "")
+    .replace(/[^A-Z0-9]/gi, "-")
+    ?.toLowerCase();
+}
+
+const FRIENDLY_ERROR_NAME: Record<string, string> = {
+  SHORT_NAME_TAKEN: "Workspace URL is unavailable.",
+};
+
 export default function NewWorkspacePage() {
-  return <div>Hello World</div>;
+  const {
+    loading,
+    error,
+    trigger: createWorkspace,
+  } = useOuterbaseMutation(createOuterbaseWorkspace);
+
+  const router = useRouter();
+  const { refreshPartial } = useWorkspaces();
+  const [name, setName] = useState("");
+  const [shortName, setShortName] = useState("");
+
+  const finalShortName = shortName || strippedWorkspaceName(name);
+
+  const onCreateClicked = useCallback(() => {
+    createWorkspace({
+      name,
+      short_name: finalShortName,
+    }).then((workspace) => {
+      if (workspace) {
+        refreshPartial(workspace);
+        router.push(`/w/${workspace.short_name}`);
+      }
+    });
+  }, [name, finalShortName, createWorkspace, refreshPartial, router]);
+
+  return (
+    <div className="flex h-screen w-screen overflow-hidden">
+      <div className="flex w-1/2 items-center border-r">
+        <div className="mx-auto flex w-full max-w-[400px] flex-col gap-4">
+          <div>
+            <OuterbaseLogo className="h-6" />
+          </div>
+
+          <h1 className="text-primary mb-8 text-2xl font-semibold">
+            New Workspace
+          </h1>
+
+          <Label title="Workspace Name" required>
+            <Input
+              autoFocus
+              placeholder="Enter workspace name"
+              size="lg"
+              value={name}
+              onValueChange={setName}
+            />
+          </Label>
+
+          <Label title="Workspace URL" required>
+            <Input
+              preText="studio.outerbase.com/"
+              placeholder=""
+              size="lg"
+              value={shortName || strippedWorkspaceName(name)}
+              onValueChange={setShortName}
+            />
+          </Label>
+
+          {error && (
+            <p className="text-sm text-red-500">
+              {FRIENDLY_ERROR_NAME[error.message] ?? error.message}
+            </p>
+          )}
+
+          <div className="mt-4">
+            <Button
+              loading={loading}
+              size="lg"
+              variant="primary"
+              onClick={onCreateClicked}
+              disabled={!name || !finalShortName}
+            >
+              Create Workspace
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="w-1/2"></div>
+    </div>
+  );
 }
diff --git a/src/app/(outerbase)/nav.tsx b/src/app/(outerbase)/nav.tsx
index fef99a8d..cc5915b5 100644
--- a/src/app/(outerbase)/nav.tsx
+++ b/src/app/(outerbase)/nav.tsx
@@ -7,7 +7,12 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { CaretUpDown, Gear, GlobeHemisphereEast } from "@phosphor-icons/react";
+import {
+  CaretUpDown,
+  Gear,
+  GlobeHemisphereEast,
+  SquaresFour,
+} from "@phosphor-icons/react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
@@ -125,7 +130,7 @@ function WorkspaceSelector() {
           as="link"
           href="/new-workspace"
         >
-          New Workspace
+          <SquaresFour size={16} /> New Workspace
         </Button>
       </div>
       <div className="flex h-full w-1/2 flex-col gap-0.5 overflow-y-auto p-1 text-sm">
diff --git a/src/app/(outerbase)/workspace-provider.tsx b/src/app/(outerbase)/workspace-provider.tsx
index 53b6eac4..468f6f4d 100644
--- a/src/app/(outerbase)/workspace-provider.tsx
+++ b/src/app/(outerbase)/workspace-provider.tsx
@@ -1,8 +1,16 @@
 "use client";
 import { getOuterbaseWorkspace } from "@/outerbase-cloud/api";
 import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
+import { produce } from "immer";
+import { noop } from "lodash";
 import { useParams } from "next/navigation";
-import { createContext, PropsWithChildren, useContext, useMemo } from "react";
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useMemo,
+} from "react";
 import useSWR from "swr";
 import { useSession } from "./session-provider";
 
@@ -10,8 +18,23 @@ const WorkspaceContext = createContext<{
   workspaces: OuterbaseAPIWorkspace[];
   currentWorkspace?: OuterbaseAPIWorkspace;
   refreshWorkspace: () => Promise<void>;
+
+  /**
+   * Updates the specified workspace in the cache directly,
+   * instead of refreshing all workspaces from the server.
+   * This is useful when the modify API returns the updated workspace object,
+   * allowing us to save time by updating the cache directly.
+   *
+   * @param workspace - The workspace object to update in the cache.
+   */
+  refreshPartial: (workspace: OuterbaseAPIWorkspace) => void;
   loading: boolean;
-}>({ workspaces: [], loading: true, refreshWorkspace: async () => {} });
+}>({
+  workspaces: [],
+  loading: true,
+  refreshWorkspace: async () => {},
+  refreshPartial: noop,
+});
 
 export function useWorkspaces() {
   return useContext(WorkspaceContext);
@@ -44,19 +67,45 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
     );
   }, [workspaceId, data]);
 
+  const refreshPartial = useCallback(
+    (modifiedWorkspace: OuterbaseAPIWorkspace) => {
+      if (!data) return;
+
+      const newData = produce(data, (draft) => {
+        for (let i = 0; i < draft.items.length; i++) {
+          if (draft.items[i].id === modifiedWorkspace.id) {
+            draft.items[i] = modifiedWorkspace;
+            return;
+          }
+        }
+
+        draft.items.push(modifiedWorkspace);
+      });
+
+      mutate(newData, {
+        revalidate: true,
+        optimisticData: newData,
+      });
+    },
+    [mutate]
+  );
+
+  const refreshWorkspace = useCallback(async () => {
+    const newWorkspceList = await getOuterbaseWorkspace();
+    mutate(newWorkspceList, {
+      revalidate: true,
+      optimisticData: newWorkspceList,
+    });
+  }, [mutate]);
+
   return (
     <WorkspaceContext.Provider
       value={{
         workspaces: data?.items || [],
         loading: isLoading,
         currentWorkspace,
-        refreshWorkspace: async () => {
-          const newWorkspceList = await getOuterbaseWorkspace();
-          mutate(newWorkspceList, {
-            revalidate: true,
-            optimisticData: newWorkspceList,
-          });
-        },
+        refreshWorkspace,
+        refreshPartial,
       }}
     >
       {children}
diff --git a/src/components/icons/outerbase.tsx b/src/components/icons/outerbase.tsx
index 3c693aa7..ea63f36a 100644
--- a/src/components/icons/outerbase.tsx
+++ b/src/components/icons/outerbase.tsx
@@ -1,3 +1,5 @@
+import { SVGProps } from "react";
+
 export function OuterbaseIcon(props: { className?: string }) {
   return (
     <svg
@@ -9,3 +11,53 @@ export function OuterbaseIcon(props: { className?: string }) {
     </svg>
   );
 }
+
+export function OuterbaseLogo(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 300 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18.922 0.621277C8.48701 0.621277 0 9.39259 0 20.1856C0 30.9682 8.48701 39.75 18.922 39.75C29.3571 39.75 37.8441 30.9787 37.8441 20.1856C37.8441 9.39259 29.3571 0.621277 18.922 0.621277ZM25.956 33.6533L25.8612 33.7796C24.8714 35.0327 23.6605 35.4433 22.8181 35.5592C22.597 35.5907 22.3758 35.6013 22.1442 35.6013C19.8487 35.6013 17.5321 33.9902 15.4472 30.926C13.7519 28.4305 12.2777 25.1031 11.2985 21.5545C9.56106 15.2261 9.76113 9.45577 11.8039 6.84438C12.7937 5.59133 14.0046 5.18068 14.847 5.06485C17.2373 4.7279 19.6802 6.17048 21.8915 9.22412C23.7236 11.7513 25.3031 15.2366 26.3561 19.059C28.0725 25.2926 27.904 30.9998 25.956 33.6533Z"
+        fill="white"
+      />
+      <path
+        d="M102.929 33.2742C102.245 33.4953 101.444 33.6112 100.57 33.6112C97.4114 33.6112 95.5265 31.421 95.5265 27.7566C95.5265 25.3558 95.5687 13.4571 95.5687 12.9517V12.3199C95.5687 12.3094 95.5792 12.3094 95.5792 12.3094H101.234C101.981 12.3094 102.582 11.7092 102.582 10.9616V10.1718C102.582 9.42421 101.981 8.82401 101.234 8.82401H95.5371C95.5265 8.82401 95.5265 8.81349 95.5265 8.81349V2.80097C95.5265 1.92699 94.821 1.2215 93.9471 1.2215H93.3153C92.7045 1.2215 92.1254 1.50581 91.7674 2.00071C90.5881 3.6223 87.3554 7.32878 81.7009 8.59236C81.1744 8.77136 80.8164 9.2768 80.8164 9.83488V10.8668C80.8164 11.6039 81.4166 12.2041 82.1537 12.2041H85.2494C85.26 12.2041 85.26 12.2146 85.26 12.2146V29.7152C85.26 32.0633 85.9444 39.7079 94.7894 39.7079C99.6121 39.7079 102.782 36.1489 103.929 34.622C104.129 34.3483 104.161 33.9797 103.992 33.6743C103.782 33.3163 103.34 33.1478 102.929 33.2742Z"
+        fill="white"
+      />
+      <path
+        d="M120.608 8.16058C112.227 8.16058 105.403 15.2366 105.403 23.9342C105.403 32.6319 112.227 39.7079 120.608 39.7079C127.874 39.7079 132.191 34.7168 133.328 33.2005C133.518 32.9583 133.507 32.6213 133.307 32.3791L133.297 32.3686C133.107 32.158 132.812 32.0843 132.549 32.2001C131.517 32.6634 129.569 33.2426 126.389 33.2426C121.251 33.2426 117.997 30.8944 116.428 26.0507L116.154 25.2083H133.802C134.171 25.2083 134.476 24.924 134.487 24.566C134.497 24.3554 134.497 24.1343 134.497 23.9237C134.508 14.7944 128.664 8.16058 120.608 8.16058ZM115.512 21.7861C114.659 16.0579 115.554 11.9829 117.765 11.6144C120.44 11.1721 123.304 16.3949 124.757 21.7861H115.512Z"
+        fill="white"
+      />
+      <path
+        d="M257.317 21.6177C253.874 20.2594 250.61 18.9747 250.61 16.0791C250.61 13.931 252.126 12.4884 254.39 12.4884C257.623 12.4884 258.981 15.2893 259.413 16.4897C259.497 16.7319 259.75 16.9004 260.023 16.9109C260.276 16.9109 261.813 16.9109 263.151 16.9214C264.298 16.9214 265.225 15.9843 265.215 14.8471L265.183 10.8563C265.172 9.72959 264.256 8.8135 263.13 8.8135H262.435C261.55 8.8135 260.718 9.23468 260.202 9.96124L259.381 11.109C259.381 11.109 257.128 8.1817 251.326 8.1817C244.86 8.1817 239.396 12.541 239.396 17.7112C239.396 24.7977 245.355 26.7879 250.146 28.3989C253.211 29.4203 255.843 30.3048 255.843 32.4108C255.843 33.4532 255.232 34.6957 252.326 34.6957C248.725 34.6957 245.713 31.621 244.892 30.2206C244.776 30.0205 244.555 29.8941 244.323 29.8941L241.659 29.9047C240.627 29.9047 239.796 30.7471 239.796 31.779V37.265C239.796 38.2969 240.627 39.1288 241.659 39.1393H242.418C243.134 39.1393 243.807 38.834 244.271 38.2969L245.724 36.6122C245.724 36.6122 248.641 39.7395 254.643 39.7395C261.898 39.7395 267.152 36.3384 267.152 31.6526C267.152 25.5032 261.929 23.4394 257.317 21.6177Z"
+        fill="white"
+      />
+      <path
+        d="M75.6881 8.80292H61.1254C60.3567 8.80292 59.725 9.42418 59.725 10.2034C59.725 10.6246 59.9145 11.0247 60.2409 11.288L60.8516 11.7829C62.389 13.0148 63.284 14.8892 63.284 16.8582V32.0527C63.1471 32.2633 61.515 34.6431 58.8615 34.6431C56.05 34.6431 54.2179 32.2949 54.1968 28.6621C54.1968 28.6411 54.2073 28.62 54.2073 28.599V13.0991C54.2073 10.7299 52.2804 8.80292 49.9112 8.80292H41.8243C41.0556 8.80292 40.4238 9.42418 40.4238 10.2034C40.4238 10.6246 40.6134 11.0247 40.9398 11.288L41.8559 12.025C43.1616 13.078 43.9302 14.647 43.9724 16.3212V28.4094C43.9724 35.3801 47.9948 39.7184 54.3547 39.7184C59.7144 39.7184 63.1471 35.8645 63.1471 35.8645L63.8316 35.854C64.7371 37.7493 66.6641 39.0656 68.9175 39.0656H75.6776C76.4463 39.0656 77.0781 38.4443 77.0781 37.6651C77.0781 37.2439 76.8885 36.8438 76.5621 36.5805L75.9514 36.0856C74.414 34.8431 73.519 32.9793 73.519 31.0103V16.8477C73.519 14.8786 74.414 13.0148 75.9408 11.7829L76.5621 11.2774C76.8885 11.0142 77.0781 10.6141 77.0781 10.1929C77.0886 9.42418 76.4568 8.80292 75.6881 8.80292Z"
+        fill="white"
+      />
+      <path
+        d="M159.074 8.07635C155.494 8.07635 152.893 10.5193 151.419 13.5519L150.713 13.5624L150.703 13.5519C150.271 10.8668 147.954 8.81345 145.143 8.81345H138.383C137.614 8.81345 136.982 9.43471 136.982 10.2139C136.982 10.6351 137.172 11.0352 137.498 11.2985L138.414 12.0356C139.762 13.1201 140.541 14.7523 140.541 16.4791V31.4209C140.541 33.1373 139.762 34.7694 138.425 35.854L137.498 36.6016C137.172 36.8648 136.982 37.265 136.982 37.6861C136.982 38.4548 137.604 39.0866 138.383 39.0866H152.946C153.714 39.0866 154.346 38.4654 154.346 37.6861C154.346 37.265 154.157 36.8648 153.83 36.6016L152.914 35.8645C151.566 34.7799 150.787 33.1478 150.787 31.4209V17.5216C150.787 16.6897 151.482 15.542 152.451 15.542C154.22 15.542 154.82 19.8171 159.032 19.8171C162.338 19.8171 164.802 17.2268 164.802 13.9204C164.792 9.97172 162.212 8.07635 159.074 8.07635Z"
+        fill="white"
+      />
+      <path
+        d="M187.799 8.07635C183.451 8.07635 180.892 10.1928 179.712 11.5196V4.88583C179.712 2.1902 177.522 0.0105298 174.837 0H167.193C166.498 0 165.939 0.558082 165.939 1.25305V1.46364C165.939 1.84271 166.108 2.20074 166.403 2.44292L167.371 3.22213C168.719 4.3067 169.499 5.93881 169.499 7.66569L169.488 31.4104C169.488 33.1268 168.709 34.7589 167.371 35.8434L166.15 36.8332C166.013 36.9385 165.939 37.107 165.939 37.286V38.497C165.939 38.8129 166.203 39.0761 166.519 39.0761L173.742 39.0866C175.964 39.0866 177.901 37.8757 178.933 36.0751H179.723C179.744 36.1067 181.492 39.5499 186.388 39.5499C193.991 39.5499 198.94 33.7164 198.94 22.8181C198.929 14.4153 194.138 8.07635 187.799 8.07635ZM187.399 30.2311C186.578 33.1268 185.23 34.5904 183.398 34.5904C181.65 34.5904 179.786 33.1478 179.786 30.4838L179.702 16.616C179.702 14.6996 181.481 12.7516 183.229 12.7516C186.515 12.7516 188.242 16.3212 188.242 23.0813C188.252 24.3344 188.168 27.5249 187.399 30.2311Z"
+        fill="white"
+      />
+      <path
+        d="M285.347 8.16058C276.965 8.16058 270.142 15.2366 270.142 23.9342C270.142 32.6319 276.965 39.7079 285.347 39.7079C292.612 39.7079 296.929 34.7168 298.067 33.2005C298.256 32.9583 298.246 32.6213 298.046 32.3791L298.035 32.3686C297.846 32.158 297.551 32.0843 297.287 32.2001C296.256 32.6634 294.308 33.2426 291.128 33.2426C285.989 33.2426 282.735 30.8944 281.166 26.0507L280.893 25.2083H298.54C298.909 25.2083 299.214 24.924 299.225 24.566C299.235 24.3554 299.235 24.1343 299.235 23.9237C299.246 14.7944 293.391 8.16058 285.347 8.16058ZM280.24 21.7861C279.387 16.0579 280.282 11.9829 282.493 11.6144C285.168 11.1721 288.032 16.3949 289.485 21.7861H280.24Z"
+        fill="white"
+      />
+      <path
+        d="M234.793 11.7828L235.404 11.2879C235.73 11.0247 235.92 10.6246 235.92 10.2034C235.92 9.4347 235.299 8.80291 234.519 8.80291H226.401C225.506 8.80291 224.832 9.27675 224.463 10.0349L223.337 12.3093L222.895 11.6776C222.873 11.646 220.304 8.07635 216.04 8.07635C208.205 8.07635 203.141 14.7101 203.141 24.9662C203.141 33.3795 207.921 39.7184 214.271 39.7184C219.493 39.7184 222.073 35.2117 222.105 35.1695L222.905 35.159L223.979 37.6651C224.358 38.5496 225.222 39.1182 226.18 39.1182L234.53 39.0761C235.299 39.0761 235.93 38.4548 235.93 37.6756C235.93 37.2544 235.741 36.8543 235.414 36.5911L234.488 35.8434C233.151 34.7589 232.371 33.1373 232.371 31.4104V16.8582C232.371 14.8786 233.256 13.0148 234.793 11.7828ZM218.714 33.8744C215.513 33.8744 213.818 30.4206 213.818 23.8816C213.818 22.6707 213.902 19.5854 214.65 16.974C215.45 14.1731 216.766 12.7516 218.556 12.7516C220.262 12.7516 222.073 14.1415 222.073 16.7213L222.136 27.9988V30.3469C222.021 32.1369 220.357 33.8744 218.714 33.8744Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export default OuterbaseLogo;
diff --git a/src/outerbase-cloud/api-workspace.ts b/src/outerbase-cloud/api-workspace.ts
index eb6b469e..220e10b0 100644
--- a/src/outerbase-cloud/api-workspace.ts
+++ b/src/outerbase-cloud/api-workspace.ts
@@ -1,4 +1,16 @@
 import { requestOuterbase } from "./api";
+import { OuterbaseAPIWorkspace } from "./api-type";
+
+export function createOuterbaseWorkspace(options: {
+  short_name: string;
+  name: string;
+}) {
+  return requestOuterbase<OuterbaseAPIWorkspace>(
+    "/api/v1/workspace",
+    "POST",
+    options
+  );
+}
 
 export function updateOuterbaseWorkspace(
   workspaceId: string,
diff --git a/src/outerbase-cloud/hook.ts b/src/outerbase-cloud/hook.ts
new file mode 100644
index 00000000..2397b818
--- /dev/null
+++ b/src/outerbase-cloud/hook.ts
@@ -0,0 +1,27 @@
+import { useState } from "react";
+import { OuterbaseAPIError } from "./api-type";
+
+export default function useOuterbaseMutation<
+  Arguments extends unknown[] = unknown[],
+  ReturnType = unknown,
+>(handler: (...arg: Arguments) => Promise<ReturnType>) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<OuterbaseAPIError>();
+
+  const trigger = async (...args: Arguments) => {
+    setLoading(true);
+    try {
+      return await handler(...args);
+    } catch (e) {
+      if (e instanceof OuterbaseAPIError) {
+        setError(e);
+      } else {
+        throw e;
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { loading, trigger, error };
+}

From b5afc250660467e86754febdee4d7e08da68990b Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 9 Feb 2025 21:00:44 +0700
Subject: [PATCH 029/106] enable branch deployment

---
 script.sh                                  | 14 --------------
 src/app/(dark-only)/new-workspace/page.tsx |  2 --
 src/app/(outerbase)/workspace-provider.tsx |  2 +-
 3 files changed, 1 insertion(+), 17 deletions(-)
 delete mode 100644 script.sh

diff --git a/script.sh b/script.sh
deleted file mode 100644
index 62ac7a8d..00000000
--- a/script.sh
+++ /dev/null
@@ -1,14 +0,0 @@
-#!/bin/bash
-
-echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"
-
-if [[ "$VERCEL_GIT_COMMIT_REF" == "develop" || "$VERCEL_GIT_COMMIT_REF" == "master"  ]] ; then
-  # Proceed with the build
-    echo "✅ - Build can proceed"
-  exit 1;
-
-else
-  # Don't build
-  echo "🛑 - Build cancelled"
-  exit 0;
-fi
\ No newline at end of file
diff --git a/src/app/(dark-only)/new-workspace/page.tsx b/src/app/(dark-only)/new-workspace/page.tsx
index f9669606..38b0fd68 100644
--- a/src/app/(dark-only)/new-workspace/page.tsx
+++ b/src/app/(dark-only)/new-workspace/page.tsx
@@ -9,8 +9,6 @@ import useOuterbaseMutation from "@/outerbase-cloud/hook";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 
-export const theme = "dark";
-
 function strippedWorkspaceName(value: string) {
   return value
     .replace(
diff --git a/src/app/(outerbase)/workspace-provider.tsx b/src/app/(outerbase)/workspace-provider.tsx
index 468f6f4d..2cf1f15b 100644
--- a/src/app/(outerbase)/workspace-provider.tsx
+++ b/src/app/(outerbase)/workspace-provider.tsx
@@ -87,7 +87,7 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
         optimisticData: newData,
       });
     },
-    [mutate]
+    [mutate, data]
   );
 
   const refreshWorkspace = useCallback(async () => {

From 2b48fdb814a3a4c2b9d609e10e259253c83be902 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 9 Feb 2025 21:09:32 +0700
Subject: [PATCH 030/106] fixing the font size of listview

---
 src/components/gui/sortable-tab.tsx | 18 +++++------
 src/components/gui/windows-tab.tsx  | 46 ++++++++++++++---------------
 src/components/listview/index.tsx   |  6 ++--
 src/components/ui/button.tsx        |  8 ++---
 4 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/components/gui/sortable-tab.tsx b/src/components/gui/sortable-tab.tsx
index aa4fdfaa..9814375c 100644
--- a/src/components/gui/sortable-tab.tsx
+++ b/src/components/gui/sortable-tab.tsx
@@ -1,10 +1,10 @@
-import { LucideIcon, LucideX } from "lucide-react";
-import { useSortable } from "@dnd-kit/sortable";
-import { WindowTabItemProps } from "./windows-tab";
+import { CSS } from "@/lib/dnd-kit";
 import { cn } from "@/lib/utils";
+import { useSortable } from "@dnd-kit/sortable";
+import { LucideIcon, LucideX } from "lucide-react";
 import { forwardRef } from "react";
 import { ButtonProps } from "../ui/button";
-import { CSS } from "@/lib/dnd-kit";
+import { WindowTabItemProps } from "./windows-tab";
 
 interface SortableTabProps {
   tab: WindowTabItemProps;
@@ -41,10 +41,10 @@ export const WindowTabItemButton = forwardRef<
   return (
     <button
       className={cn(
-        "bg-neutral-100 dark:bg-neutral-900 relative h-[40px] border-x text-neutral-500 flex items-center text-left text-xs px-2 min-w-[170px] max-w-[300px] dark:hover:text-white hover:text-black",
+        "relative flex h-[40px] max-w-[300px] min-w-[170px] items-center border-x bg-neutral-100 px-2 text-left text-sm text-neutral-500 hover:text-black dark:bg-neutral-900 dark:hover:text-white",
         isDragging && "z-20",
         selected
-          ? "bg-neutral-50 dark:bg-neutral-950 text-primary"
+          ? "text-primary bg-neutral-50 dark:bg-neutral-950"
           : "border-b border-x-transparent",
         index === 0 ? "border-l-0" : ""
       )}
@@ -57,19 +57,19 @@ export const WindowTabItemButton = forwardRef<
       {onClose && (
         <div
           className={cn(
-            "rounded hover:bg-neutral-800 hover:text-white w-5 h-5 ml-2 flex justify-center items-center"
+            "ml-2 flex h-5 w-5 items-center justify-center rounded hover:bg-neutral-800 hover:text-white"
           )}
           onClick={(e) => {
             e.stopPropagation();
             if (onClose) onClose();
           }}
         >
-          <LucideX className={cn("w-3 h-3 grow-0 shrink-0")} />
+          <LucideX className={cn("h-3 w-3 shrink-0 grow-0")} />
         </div>
       )}
 
       {!selected && (
-        <div className="absolute right-[-1px] top-2 w-[1px] h-6 bg-border dark:bg-neutral-800" />
+        <div className="bg-border absolute top-2 right-[-1px] h-6 w-[1px] dark:bg-neutral-800" />
       )}
     </button>
   );
diff --git a/src/components/gui/windows-tab.tsx b/src/components/gui/windows-tab.tsx
index 7d2be446..4a8cc6ab 100644
--- a/src/components/gui/windows-tab.tsx
+++ b/src/components/gui/windows-tab.tsx
@@ -1,20 +1,12 @@
-import { type LucideIcon, LucidePlus } from "lucide-react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
+import { restrictToHorizontalAxis } from "@/lib/dnd-kit";
 import {
-  DndContext,
   closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
   PointerSensor,
   useSensor,
   useSensors,
-  type DragEndEvent,
-  KeyboardSensor,
 } from "@dnd-kit/core";
 import {
   arrayMove,
@@ -22,14 +14,22 @@ import {
   SortableContext,
   sortableKeyboardCoordinates,
 } from "@dnd-kit/sortable";
-import { SortableTab } from "./sortable-tab";
+import { type LucideIcon, LucidePlus } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-import { restrictToHorizontalAxis } from "@/lib/dnd-kit";
+import { SortableTab } from "./sortable-tab";
 
 export interface WindowTabItemProps {
   component: JSX.Element;
@@ -194,10 +194,10 @@ export default function WindowTabs({
         onDragEnd={handleDragEnd}
         modifiers={[restrictToHorizontalAxis]}
       >
-        <div className="flex flex-col w-full h-full">
-          <div className="grow-0 shrink-0 bg-neutral-100 dark:bg-neutral-900 overflow-x-auto no-scrollbar">
+        <div className="flex h-full w-full flex-col">
+          <div className="no-scrollbar shrink-0 grow-0 overflow-x-auto bg-neutral-100 dark:bg-neutral-900">
             <div
-              className="flex h-[40px] window-tab-scrollbar"
+              className="window-tab-scrollbar flex h-[40px]"
               ref={tabContainerRef}
             >
               <SortableContext
@@ -239,12 +239,12 @@ export default function WindowTabs({
                 <div
                   ref={tabMenuRef}
                   style={{ zIndex: 50, position: "sticky" }}
-                  className={`flex h-[40px] items-center border-b right-0 bg-neutral-100 dark:bg-neutral-900`}
+                  className={`right-0 flex h-[40px] items-center border-b bg-neutral-100 dark:bg-neutral-900`}
                 >
                   <DropdownMenu modal={false}>
                     <DropdownMenuTrigger>
-                      <div className="ml-1.5 text-xs flex h-7 items-center justify-center gap-1 rounded-lg p-1.5 py-2 text-neutral-600 transition hover:bg-neutral-200 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white">
-                        <LucidePlus className="w-4 h-4" /> New
+                      <div className="ml-1.5 flex h-7 items-center justify-center gap-1 rounded-lg p-1.5 py-2 text-sm text-neutral-600 transition hover:bg-neutral-200 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white">
+                        <LucidePlus className="h-4 w-4" /> New
                       </div>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
@@ -263,17 +263,17 @@ export default function WindowTabs({
                 </div>
               )}
 
-              <div className="flex h-[40px] border-b flex-1"></div>
+              <div className="flex h-[40px] flex-1 border-b"></div>
             </div>
           </div>
-          <div className="grow relative">
+          <div className="relative grow">
             {tabs.map((tab, tabIndex) => (
               <CurrentWindowTab.Provider
                 key={tab.key}
                 value={{ isActiveTab: tabIndex === selected }}
               >
                 <div
-                  className="absolute left-0 right-0 top-0 bottom-0"
+                  className="absolute top-0 right-0 bottom-0 left-0"
                   style={{
                     display: tabIndex === selected ? "inherit" : "none",
                   }}
diff --git a/src/components/listview/index.tsx b/src/components/listview/index.tsx
index 3e2be101..b5c39d35 100644
--- a/src/components/listview/index.tsx
+++ b/src/components/listview/index.tsx
@@ -169,7 +169,7 @@ function renderList<T>(props: ListViewRendererProps<T>): React.ReactElement {
               >
                 <div
                   className={cn(
-                    "flex h-8 items-center gap-0.5 px-4 text-xs text-neutral-500",
+                    "flex h-8 items-center gap-0.5 px-4 text-sm text-neutral-500",
                     selectedKey === item.key
                       ? "bg-neutral-200 text-black dark:bg-neutral-800 dark:text-white"
                       : "hover:bg-neutral-100 dark:hover:bg-neutral-900",
@@ -203,12 +203,12 @@ function renderList<T>(props: ListViewRendererProps<T>): React.ReactElement {
                     </div>
                   )}
 
-                  <div className="line-clamp-1 flex-1 text-xs">
+                  <div className="line-clamp-1 flex-1 text-sm">
                     <HighlightText text={item.name} highlight={highlight} />
                     {item.badgeContent && (
                       <span
                         className={cn(
-                          "ml-1 rounded p-0.5 px-1 font-mono text-xs font-normal",
+                          "ml-1 rounded p-0.5 px-1 font-mono text-sm font-normal",
                           item.badgeClassName ?? "bg-red-500 text-white"
                         )}
                       >
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 35efc0b6..e99fa89f 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-base font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -21,9 +21,9 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
+        default: "h-9 px-4 py-2 text-base",
+        sm: "h-8 rounded-md px-3 text-sm",
+        lg: "h-10 rounded-md px-8 text-lg",
         icon: "h-9 w-9",
       },
     },

From 8a3d671ce828994c9394409ee47278b6d27417f9 Mon Sep 17 00:00:00 2001
From: keppere <50957820+keppere@users.noreply.github.com>
Date: Mon, 10 Feb 2025 07:38:09 +0700
Subject: [PATCH 031/106] Edit background image (#347)

* Refactor: chart type button styles and remove unused CSS variables

* Refactor: use immer to update chart value

* feat: restructure chart edit menu

* feat: add theme selection and update color handling in chart components

* feat: add background image selection for charts

* feat: update EditChartMenu to use column names instead of data

* refactor: remove unused Y-axis display logic from EditChartMenu

* feat: conditionally render Y-axis section in EditChartMenu

* feat: enhance chart components with optional parameters and improved rendering logic

* fix: reset theme option when custom color is selected

* refactor: remove unused props

* Merge branch 'develop' of https://github.com/outerbase/studio into edit-background-image

* refactor: update EditChartMenu at chart board
---
 src/app/globals.css                           |   9 -
 src/app/storybook/chart-editor/page.tsx       |  41 +-
 src/components/board/board-chart-editor.tsx   |   2 +-
 .../chart/chart-background-image.tsx          |  44 ++
 .../chart/chart-background-selection.tsx      |  64 +--
 .../chart/chart-series-combobox.tsx           |   6 +-
 src/components/chart/chart-series.tsx         | 133 ++++++
 src/components/chart/chart-type-button.tsx    |  25 +-
 src/components/chart/chart-type.ts            |  44 +-
 src/components/chart/chart-y-axis-section.tsx | 100 ++++
 .../chart/echart-options-builder.ts           | 114 ++++-
 src/components/chart/edit-chart-menu.tsx      | 447 +++++++-----------
 src/components/chart/index.tsx                |  24 +-
 src/components/chart/simple-color-picker.tsx  |  99 ++--
 src/components/chart/simple-combobox.tsx      |   4 +
 15 files changed, 688 insertions(+), 468 deletions(-)
 create mode 100644 src/components/chart/chart-background-image.tsx
 create mode 100644 src/components/chart/chart-series.tsx
 create mode 100644 src/components/chart/chart-y-axis-section.tsx

diff --git a/src/app/globals.css b/src/app/globals.css
index 0a34e6cb..8ff6499a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -42,9 +42,6 @@
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
 
-  --color-chart-button-bg: var(--chart-button-bg);
-  --color-chart-button-selected: var(--chart-button-selected);
-
   --color-selected: var(--selected);
 
   --radius-lg: var(--radius);
@@ -281,9 +278,6 @@
 
     --selected: #e2e8f0;
     --scroll-bar: #e2e8f0;
-
-    --chart-button-bg: #f5f5f5;
-    --chart-button-selected: #171717;
   }
 
   .dark {
@@ -320,9 +314,6 @@
 
     --selected: #222;
     --scroll-bar: #353535;
-
-    --chart-button-bg: #404040;
-    --chart-button-selected: #ffffff;
   }
 }
 
diff --git a/src/app/storybook/chart-editor/page.tsx b/src/app/storybook/chart-editor/page.tsx
index 52ef07ba..c69633f7 100644
--- a/src/app/storybook/chart-editor/page.tsx
+++ b/src/app/storybook/chart-editor/page.tsx
@@ -9,31 +9,43 @@ const data: ChartData[] = [
   {
     seller: 49,
     seller2: 1049,
+    seller3: 2049,
+    seller4: 3049,
     _year: 2019,
   },
   {
     seller: 590,
     seller2: 1590,
+    seller3: 2590,
+    seller4: 3590,
     _year: 2020,
   },
   {
     seller: 7908,
     seller2: 8908,
+    seller3: 9908,
+    seller4: 10908,
     _year: 2021,
   },
   {
     seller: 4985,
     seller2: 5985,
+    seller3: 6985,
+    seller4: 7985,
     _year: 2022,
   },
   {
     seller: 2638,
     seller2: 3638,
+    seller3: 4638,
+    seller4: 5638,
     _year: 2023,
   },
   {
     seller: 4,
     seller2: 1004,
+    seller3: 2004,
+    seller4: 3004,
     _year: 2024,
   },
 ];
@@ -52,25 +64,17 @@ const lineChartValue: ChartValue = {
     apiKey: "",
     layers: [
       {
-        sql: "select count(*) as seller,count(*) + 1000 as seller2, year(l192_new.supplier.registered_date) as _year\nFROM\n    supplier\nGROUP BY _year\nhaving _year is not null\nORDER BY _year\n",
-        type: "line",
+        sql: "select \n    count(*) as seller,\n    count(*) + 1000 as seller2, \n    count(*) + 2000 as seller3, \n    count(*) + 3000 as seller4,\n    year(l192_new.supplier.registered_date) as _year\nFROM\n    supplier\nGROUP BY _year\nhaving _year is not null\nORDER BY _year\n",
+        type: "table",
       },
     ],
     options: {
-      theme: "afterburn",
-      xAxisKey: "_year",
-      yAxisKeys: ["seller", "seller2"],
-      foreground: "#ffffff",
-      xAxisLabel: "cust year",
+      xAxisKey: undefined,
+      yAxisKeys: undefined,
+      xAxisLabel: undefined,
       yAxisLabel: "cust sellers",
-      gradientStop: "#42788F",
-      gradientStart: "#2C4F5E",
-      backgroundType: "gradient",
-      yAxisKeyColors: {
-        seller: "#E75F98",
-        seller2: "#FFA285",
-      },
-      xAxisLabelHidden: false,
+      backgroundType: "none",
+      xAxisLabelHidden: true,
       yAxisLabelHidden: true,
       yAxisLabelDisplay: "right",
     },
@@ -82,12 +86,13 @@ const lineChartValue: ChartValue = {
   },
   source_id: "856a1855-2bee-4d87-9756-a783088c0568",
   type: "line",
-  updated_at: "2025-02-05T09:18:03.224Z",
+  updated_at: "2025-02-09T07:58:17.571Z",
   workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
 };
 
 export default function StorybookChartEditorPage() {
   const [chartValue, setChartValue] = useState(lineChartValue);
+
   return (
     <div className="flex h-full space-x-4">
       <div className="w-full flex-1 border-r p-4">
@@ -97,8 +102,8 @@ export default function StorybookChartEditorPage() {
         {/* render chart editor menu here */}
         <EditChartMenu
           value={chartValue}
-          setValue={setChartValue}
-          data={data}
+          onChange={setChartValue}
+          columns={data?.length > 0 ? Object.keys(data[0]) : []}
         />
       </div>
     </div>
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index f3dc57a4..a47fd005 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -66,7 +66,7 @@ export default function BoardChartEditor() {
         </div>
       </div>
       <div className="w-[370px] overflow-x-hidden overflow-y-auto border-l p-4">
-        <EditChartMenu value={value} setValue={setValue} data={[{}]} />
+        <EditChartMenu value={value} onChange={setValue} columns={[]} />
       </div>
     </div>
   );
diff --git a/src/components/chart/chart-background-image.tsx b/src/components/chart/chart-background-image.tsx
new file mode 100644
index 00000000..eeaa25ae
--- /dev/null
+++ b/src/components/chart/chart-background-image.tsx
@@ -0,0 +1,44 @@
+import { produce } from "immer";
+import { Dispatch, SetStateAction } from "react";
+import { ChartValue, outerBaseUrl } from "./chart-type";
+
+const PRESET_IMAGES = [
+  "/assets/charts/outerbase1.png",
+  "/assets/charts/outerbase2.png",
+  "/assets/charts/outerbase3.png",
+  "/assets/charts/outerbase4.png",
+  "/assets/charts/outerbase5.png",
+  "/assets/charts/outerbase6.png",
+];
+
+interface ChartBackgroundImageProps {
+  onChange: Dispatch<SetStateAction<ChartValue>>;
+}
+
+export default function ChartBackGroundImage({
+  onChange,
+}: ChartBackgroundImageProps) {
+  return (
+    <div className="grid grid-cols-3 gap-2 pt-2">
+      {PRESET_IMAGES.map((image, index) => {
+        return (
+          <div key={index} className="relative cursor-pointer">
+            <img
+              src={outerBaseUrl + image}
+              alt=""
+              className="h-24 w-full rounded-lg object-cover"
+              onClick={() => {
+                onChange((prev) => {
+                  return produce(prev, (draft) => {
+                    draft.params.options.backgroundImage = image;
+                    draft.params.options.backgroundType = "image";
+                  });
+                });
+              }}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/chart/chart-background-selection.tsx b/src/components/chart/chart-background-selection.tsx
index 806460dd..f82c0100 100644
--- a/src/components/chart/chart-background-selection.tsx
+++ b/src/components/chart/chart-background-selection.tsx
@@ -1,4 +1,6 @@
+import { produce } from "immer";
 import { Dispatch, SetStateAction, useMemo } from "react";
+import ChartBackGroundImage from "./chart-background-image";
 import { ChartValue } from "./chart-type";
 import SimpleInput from "./simple-input";
 import SimpleToggle from "./simple-toggle";
@@ -43,16 +45,9 @@ export default function ChartBackgroundSelection({
               value={value.params.options.gradientStart || ""}
               onSumit={function (v: string): void {
                 setValue((prev) => {
-                  return {
-                    ...prev,
-                    params: {
-                      ...prev.params,
-                      options: {
-                        ...prev.params.options,
-                        gradientStart: v,
-                      },
-                    },
-                  };
+                  return produce(prev, (draft) => {
+                    draft.params.options.gradientStart = v;
+                  });
                 });
               }}
             ></SimpleInput>
@@ -63,16 +58,9 @@ export default function ChartBackgroundSelection({
               value={value.params.options.gradientStop || ""}
               onSumit={function (v: string): void {
                 setValue((prev) => {
-                  return {
-                    ...prev,
-                    params: {
-                      ...prev.params,
-                      options: {
-                        ...prev.params.options,
-                        gradientStop: v,
-                      },
-                    },
-                  };
+                  return produce(prev, (draft) => {
+                    draft.params.options.gradientStop = v;
+                  });
                 });
               }}
             ></SimpleInput>
@@ -88,18 +76,10 @@ export default function ChartBackgroundSelection({
               }}
               onClick={() => {
                 setValue((prev) => {
-                  return {
-                    ...prev,
-                    params: {
-                      ...prev.params,
-                      options: {
-                        ...prev.params.options,
-                        gradientStart: start,
-                        gradientStop: stop,
-                        backgroundImage: undefined,
-                      },
-                    },
-                  };
+                  return produce(prev, (draft) => {
+                    draft.params.options.gradientStart = start;
+                    draft.params.options.gradientStop = stop;
+                  });
                 });
               }}
             />
@@ -111,21 +91,10 @@ export default function ChartBackgroundSelection({
 
   const handleBackgroundTypeChange = (v: string): void => {
     setValue((prev) => {
-      return {
-        ...prev,
-        params: {
-          ...prev.params,
-          options: {
-            ...prev.params.options,
-            backgroundType: v,
-            backgroundImage: undefined,
-            gradientStart: undefined,
-            gradientStop: undefined,
-          },
-        },
-      };
+      return produce(prev, (draft) => {
+        draft.params.options.backgroundType = v;
+      });
     });
-    console.log(value.params.options.gradientStart);
   };
 
   return (
@@ -146,6 +115,9 @@ export default function ChartBackgroundSelection({
       </div>
       <div>
         {value.params.options.backgroundType === "gradient" && gradientSection}
+        {value.params.options.backgroundType === "image" && (
+          <ChartBackGroundImage onChange={setValue} />
+        )}
       </div>
     </div>
   );
diff --git a/src/components/chart/chart-series-combobox.tsx b/src/components/chart/chart-series-combobox.tsx
index f4b02c28..2f2866e9 100644
--- a/src/components/chart/chart-series-combobox.tsx
+++ b/src/components/chart/chart-series-combobox.tsx
@@ -18,6 +18,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import { ThemeColors } from "./chart-type";
 import SimpleColorPicker from "./simple-color-picker";
 interface SimpleComboValue {
   value: string;
@@ -31,6 +32,7 @@ interface ChartSeriesComboboxProps {
   onRemove: (v: string | null) => void;
   color?: string;
   onChangeColor: (color: string) => void;
+  onThemeChange: (theme: ThemeColors) => void;
 }
 
 export function ChartSeriesCombobox({
@@ -41,6 +43,7 @@ export function ChartSeriesCombobox({
   onRemove,
   color,
   onChangeColor,
+  onThemeChange,
 }: ChartSeriesComboboxProps) {
   const [open, setOpen] = React.useState(false);
   const [openMore, setOpenMore] = React.useState(false);
@@ -79,9 +82,10 @@ export function ChartSeriesCombobox({
                   onClick={(e) => e.stopPropagation()}
                 >
                   <SimpleColorPicker
+                    selected={color}
+                    onThemeChange={onThemeChange}
                     onChange={function (color: string): void {
                       onChangeColor(color);
-                      setOpenColorPicker(false);
                     }}
                   ></SimpleColorPicker>
                 </PopoverContent>
diff --git a/src/components/chart/chart-series.tsx b/src/components/chart/chart-series.tsx
new file mode 100644
index 00000000..673147a8
--- /dev/null
+++ b/src/components/chart/chart-series.tsx
@@ -0,0 +1,133 @@
+import { produce } from "immer";
+import { useTheme } from "next-themes";
+import { Dispatch, SetStateAction } from "react";
+import { ButtonGroupItem } from "../button-group";
+import { ChartSeriesCombobox } from "./chart-series-combobox";
+import { ChartValue, ThemeColors, THEMES } from "./chart-type";
+import { generateGradientColors } from "./echart-options-builder";
+
+interface ChartSeriesProps {
+  value: ChartValue;
+  onChange: Dispatch<SetStateAction<ChartValue>>;
+  isNotChartComponent: boolean;
+  columns: string[];
+}
+
+export default function ChartSeries({
+  value,
+  onChange,
+  isNotChartComponent,
+  columns,
+}: ChartSeriesProps) {
+  const { forcedTheme, resolvedTheme } = useTheme();
+  if (isNotChartComponent) return null;
+
+  return (
+    <div className="pt-4">
+      <div className="flex items-center justify-between pb-2">
+        <p className="mb-1.5 text-sm font-bold opacity-70">Series</p>
+        <ButtonGroupItem
+          onClick={() => {
+            if (!value.params.options?.yAxisKeys) return;
+            if (value.params.options?.yAxisKeys.length === columns.length)
+              return;
+
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                if (!draft.params.options.yAxisKeys) return;
+                draft.params.options.yAxisKeys.push(
+                  columns.filter(
+                    (key) => !draft.params.options.yAxisKeys?.includes(key)
+                  )[0]
+                );
+              });
+            });
+          }}
+        >
+          <p className="text-xs">Add Series</p>
+        </ButtonGroupItem>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {value.params.options?.yAxisKeys?.map((key, index) => {
+          const color = value.params.options?.yAxisKeyColors
+            ? value.params.options?.yAxisKeyColors[key]
+            : undefined;
+          return (
+            <ChartSeriesCombobox
+              color={color}
+              key={index}
+              values={
+                columns.map((s) => {
+                  return {
+                    value: s,
+                    label: s,
+                  };
+                }) ?? []
+              }
+              selected={key ?? ""}
+              placeholder="Select axis key..."
+              onChange={function (v: string): void {
+                onChange((prev) => {
+                  return produce(prev, (draft) => {
+                    if (!draft.params.options.yAxisKeys) return;
+                    draft.params.options.yAxisKeys[index] = v;
+                  });
+                });
+              }}
+              onRemove={(series) => {
+                onChange((prev) => {
+                  return produce(prev, (draft) => {
+                    if (!series) {
+                      draft.params.options.yAxisKeys = [];
+                    } else {
+                      draft.params.options.yAxisKeys =
+                        draft.params.options.yAxisKeys?.filter(
+                          (k) => k !== series
+                        );
+                    }
+                  });
+                });
+              }}
+              onChangeColor={function (color: string): void {
+                onChange((prev) => {
+                  return produce(prev, (draft) => {
+                    draft.params.options.yAxisKeyColors = {
+                      ...draft.params.options.yAxisKeyColors,
+                      [key]: color,
+                    };
+                    draft.params.options.theme = undefined;
+                  });
+                });
+              }}
+              onThemeChange={function (theme: ThemeColors): void {
+                onChange((prev) => {
+                  const appTheme: "light" | "dark" = (forcedTheme ||
+                    resolvedTheme) as "light" | "dark";
+                  const themeColor =
+                    THEMES[theme].colors?.[appTheme ?? "light"];
+                  const colors = generateGradientColors(
+                    themeColor[0],
+                    themeColor[1],
+                    columns.length
+                  );
+                  const newColors = prev.params.options.yAxisKeys?.reduce(
+                    (acc, col, i) => {
+                      acc[col] = colors[i];
+                      return acc;
+                    },
+                    {} as Record<string, string>
+                  );
+                  return produce(prev, (draft) => {
+                    draft.params.options.theme = theme;
+                    draft.params.options.yAxisKeyColors = newColors;
+                  });
+                });
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/chart/chart-type-button.tsx b/src/components/chart/chart-type-button.tsx
index 4a5bf315..943149a6 100644
--- a/src/components/chart/chart-type-button.tsx
+++ b/src/components/chart/chart-type-button.tsx
@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils";
+
 interface ChartTypeButtonProps {
   icon: React.ReactNode;
   isActive: boolean;
@@ -13,25 +15,14 @@ export function ChartTypeButton({
 }: ChartTypeButtonProps) {
   return (
     <button
+      className={cn(
+        "flex size-[50px] cursor-pointer items-center justify-center rounded-lg border-0 transition-colors",
+        isActive
+          ? "bg-primary text-primary-foreground"
+          : "bg-secondary text-secondary-foreground"
+      )}
       onClick={onClick}
       title={tooltipText}
-      style={{
-        width: "50px",
-        height: "50px",
-        borderRadius: "8px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: isActive
-          ? "var(--chart-button-selected)"
-          : "var(--chart-button-bg)",
-        color: isActive
-          ? "var(--chart-button-bg)"
-          : "var(--chart-button-selected)",
-        border: "none",
-        cursor: "pointer",
-        transition: "background-color 0.3s",
-      }}
     >
       {icon}
     </button>
diff --git a/src/components/chart/chart-type.ts b/src/components/chart/chart-type.ts
index 0deffec0..25e4ad34 100644
--- a/src/components/chart/chart-type.ts
+++ b/src/components/chart/chart-type.ts
@@ -29,8 +29,8 @@ interface ChartOptions {
   legend?: ChartLegend;
   xAxisLabel?: string;
   yAxisLabel?: string;
-  xAxisKey: string;
-  yAxisKeys: string[];
+  xAxisKey?: string;
+  yAxisKeys?: string[];
   yAxisKeyColors?: Record<string, string>;
   xAxisLabelDisplay?: ChartLabelDisplayX;
   yAxisLabelDisplay?: ChartLabelDisplayY;
@@ -43,31 +43,31 @@ interface ChartOptions {
 }
 
 interface ChartParams {
-  id: string;
-  name: string;
-  type: ChartType;
-  model: string;
-  apiKey: string;
+  id?: string;
+  name?: string;
+  type?: ChartType;
+  model?: string;
+  apiKey?: string;
   layers: ChartLayer[];
   options: ChartOptions;
-  source_id: string;
-  created_at: string;
-  updated_at: string;
-  workspace_id: string;
-  connection_id: string | null;
+  source_id?: string;
+  created_at?: string;
+  updated_at?: string;
+  workspace_id?: string;
+  connection_id?: string | null;
 }
 
 export interface ChartValue {
-  connection_id: string | null;
-  created_at: string;
-  id: string;
-  model: string;
-  name: string;
+  connection_id?: string | null;
+  created_at?: string;
+  id?: string;
+  model?: string;
+  name?: string;
   params: ChartParams;
-  source_id: string;
-  type: ChartType;
-  updated_at: string;
-  workspace_id: string;
+  source_id?: string;
+  type?: ChartType;
+  updated_at?: string;
+  workspace_id?: string;
   description?: string;
 }
 
@@ -175,3 +175,5 @@ export const THEMES: Record<
     },
   },
 };
+
+export const outerBaseUrl = "https://app.outerbase.com";
diff --git a/src/components/chart/chart-y-axis-section.tsx b/src/components/chart/chart-y-axis-section.tsx
new file mode 100644
index 00000000..e53aec64
--- /dev/null
+++ b/src/components/chart/chart-y-axis-section.tsx
@@ -0,0 +1,100 @@
+"use client";
+import { produce } from "immer";
+import { Dispatch, SetStateAction, useMemo } from "react";
+import ChartSeries from "./chart-series";
+import { ChartLabelDisplayY, ChartValue } from "./chart-type";
+import { SimpleCombobox } from "./simple-combobox";
+import SimpleInput from "./simple-input";
+import SimpleToggle from "./simple-toggle";
+
+interface ChartYAxisSectionProps {
+  value: ChartValue;
+  onChange: Dispatch<SetStateAction<ChartValue>>;
+  isNotChartComponent: boolean;
+  columns: string[];
+}
+
+export default function ChartYAxisSection({
+  value,
+  onChange,
+  isNotChartComponent,
+  columns,
+}: ChartYAxisSectionProps) {
+  const selectYAxisDisplay = useMemo(() => {
+    if (isNotChartComponent) return null;
+    const yAxisSideValues = [
+      {
+        value: "left",
+        label: "Left",
+      },
+      {
+        value: "right",
+        label: "Right",
+      },
+      {
+        value: "hidden",
+        label: "Hidden",
+      },
+    ];
+    return (
+      <div>
+        <SimpleCombobox
+          hideArrow={true}
+          values={yAxisSideValues}
+          selected={value.params.options?.yAxisLabelDisplay ?? "left"}
+          placeholder="Select display..."
+          onChange={function (v: string): void {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.params.options.yAxisLabelDisplay =
+                  v as ChartLabelDisplayY;
+              });
+            });
+          }}
+        ></SimpleCombobox>
+      </div>
+    );
+  }, [isNotChartComponent, onChange, value.params.options?.yAxisLabelDisplay]);
+
+  return (
+    <div>
+      <p className="mb-1.5 text-sm font-bold opacity-70">Y Axis</p>
+      <div className="flex items-center justify-between gap-2">
+        <SimpleInput
+          value={value.params.options?.yAxisLabel}
+          placeholder={"Y Axis Label"}
+          onSumit={(v) => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.params.options.yAxisLabel = v;
+              });
+            });
+          }}
+        />
+        {selectYAxisDisplay}
+
+        <SimpleToggle
+          values={["Show", "Hide"]}
+          onChange={(v) => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.params.options.yAxisLabelHidden = v === "Hide";
+              });
+            });
+          }}
+          selectedValue={
+            value.params.options?.yAxisLabelHidden ? "Hide" : "Show"
+          }
+        />
+      </div>
+      <ChartSeries
+        value={value}
+        onChange={function (value: SetStateAction<ChartValue>): void {
+          onChange(value);
+        }}
+        isNotChartComponent={isNotChartComponent}
+        columns={columns}
+      ></ChartSeries>
+    </div>
+  );
+}
diff --git a/src/components/chart/echart-options-builder.ts b/src/components/chart/echart-options-builder.ts
index a8123a6c..1d54a01b 100644
--- a/src/components/chart/echart-options-builder.ts
+++ b/src/components/chart/echart-options-builder.ts
@@ -16,7 +16,6 @@ export default class EchartOptionsBuilder {
   private columns: string[] = [];
   public chartHeight: number = 0;
   public chartWidth: number = 0;
-  public colorTheme: ThemeColors = "mercury";
 
   constructor(value: ChartValue, data: ChartData[]) {
     this.chartValue = value;
@@ -36,15 +35,50 @@ export default class EchartOptionsBuilder {
   }
 
   private getColorValues(): string[] {
-    const DEFAULT_THEME = "mercury";
-    const colorTheme = this.colorTheme ?? DEFAULT_THEME;
-    const values = THEMES[colorTheme];
+    let colors: string[] = [];
+
+    if (!this.chartValue.params.options.theme) {
+      colors = Object.keys(
+        this.chartValue.params.options?.yAxisKeyColors || {}
+      ).map(
+        (key) => this.chartValue.params.options.yAxisKeyColors?.[key] as string
+      );
+
+      // If the user has already set the colors, return them
+      if (colors.length >= this.columns.length) {
+        return colors;
+      }
+
+      // If the user has set some colors, but not enough, generate the rest
+      if (colors.length >= 2 && colors.length < this.columns.length) {
+        const startColor = colors[0];
+        const endColor = colors[1];
+        return [
+          ...colors,
+          ...generateGradientColors(
+            startColor,
+            endColor,
+            this.columns.length - colors.length
+          ),
+        ];
+      }
+    }
+
+    const colorTheme =
+      this.chartValue.params.options.theme ?? ("neonPunk" as ThemeColors);
+    const values = THEMES[colorTheme as ThemeColors];
 
     if (!values) {
       throw new Error(`Theme "${colorTheme}" does not exist`);
     }
 
-    return values.colors[this.theme]; // return light or dark values
+    const colorRange = values.colors[this.theme];
+
+    return generateGradientColors(
+      colorRange[0],
+      colorRange[1],
+      this.columns.length
+    );
   }
 
   private getTextColor(): string {
@@ -55,15 +89,18 @@ export default class EchartOptionsBuilder {
   }
 
   getChartOptions(): EChartsOption {
-    const colorValues = this.getColorValues();
-
     const formattedSource = this.chartData;
     this.columns = [];
     if (this.chartValue.params.options?.xAxisKey) {
       this.columns.push(this.chartValue.params.options.xAxisKey);
     }
-    for (const key of this.chartValue.params.options.yAxisKeys) {
-      this.columns.push(key);
+    if (
+      this.chartValue.params.options?.yAxisKeys &&
+      this.chartValue.params.options.yAxisKeys.length > 0
+    ) {
+      for (const key of this.chartValue.params.options.yAxisKeys) {
+        this.columns.push(key);
+      }
     }
 
     const isTall = this.chartHeight > 150;
@@ -94,9 +131,7 @@ export default class EchartOptionsBuilder {
               value: formattedSource.map((item) => Number(item[col])), // throws away precision of bigint?!
               name: col,
               itemStyle: {
-                color:
-                  this.chartValue.params.options.yAxisKeyColors?.[col] ||
-                  colorValues[index % colorValues.length],
+                color: this.getColorValues()[index],
               },
             },
           ],
@@ -108,17 +143,20 @@ export default class EchartOptionsBuilder {
       };
     }
 
-    let xAxisLabel = !this.chartValue.params.options.xAxisLabel
-      ? this.chartValue.params.options.xAxisKey
-      : this.chartValue.params.options.xAxisLabel;
+    let xAxisLabel =
+      this.chartValue.params.options.xAxisLabel ??
+      (this.chartValue.params.options.xAxisKey || "");
 
     xAxisLabel = this.chartValue.params.options.xAxisLabelHidden
       ? ""
       : xAxisLabel;
 
-    let yaxisLabel = !this.chartValue.params.options.yAxisLabel
-      ? this.chartValue.params.options.yAxisKeys[0]
-      : this.chartValue.params.options.yAxisLabel;
+    let yaxisLabel =
+      this.chartValue.params.options.yAxisLabel ??
+      (this.chartValue.params.options.yAxisKeys &&
+      this.chartValue.params.options.yAxisKeys?.length > 0
+        ? this.chartValue.params.options.yAxisKeys[0]
+        : "");
 
     yaxisLabel = this.chartValue.params.options.yAxisLabelHidden
       ? ""
@@ -352,7 +390,7 @@ export default class EchartOptionsBuilder {
     seriesType: T["type"],
     additionalOptions: Partial<Omit<T, "type">> = {}
   ): T[] {
-    return this.columns.slice(1).map((col) => {
+    return this.columns.slice(1).map((col, index) => {
       const baseSeries = {
         name: col,
         type: seriesType,
@@ -361,7 +399,7 @@ export default class EchartOptionsBuilder {
             ? { x: col, y: this.columns[0] } // For bar charts
             : { x: this.columns[0], y: col }, // For other chart types
         itemStyle: {
-          color: this.chartValue.params.options.yAxisKeyColors?.[col], // does NOT impact pie charts
+          color: this.getColorValues()[index], // does NOT impact pie charts
         },
         symbol: "circle",
         ...additionalOptions,
@@ -397,3 +435,39 @@ function isDate(dateString: string): boolean {
     return !isNaN(date.getTime());
   }
 }
+
+function interpolateColor(
+  color1: string,
+  color2: string,
+  factor: number
+): string {
+  const c1 = parseInt(color1.slice(1), 16);
+  const c2 = parseInt(color2.slice(1), 16);
+
+  const r1 = (c1 >> 16) & 0xff;
+  const g1 = (c1 >> 8) & 0xff;
+  const b1 = c1 & 0xff;
+
+  const r2 = (c2 >> 16) & 0xff;
+  const g2 = (c2 >> 8) & 0xff;
+  const b2 = c2 & 0xff;
+
+  const r = Math.round(r1 + factor * (r2 - r1));
+  const g = Math.round(g1 + factor * (g2 - g1));
+  const b = Math.round(b1 + factor * (b2 - b1));
+
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+}
+
+export function generateGradientColors(
+  startColor: string,
+  endColor: string,
+  numColors: number
+): string[] {
+  const colors = [];
+  for (let i = 0; i < numColors; i++) {
+    const factor = i / (numColors - 1);
+    colors.push(interpolateColor(startColor, endColor, factor));
+  }
+  return colors;
+}
diff --git a/src/components/chart/edit-chart-menu.tsx b/src/components/chart/edit-chart-menu.tsx
index 80816f21..8a7032d0 100644
--- a/src/components/chart/edit-chart-menu.tsx
+++ b/src/components/chart/edit-chart-menu.tsx
@@ -9,189 +9,92 @@ import { NumberCircleOne } from "@phosphor-icons/react/dist/icons/NumberCircleOn
 import { Table } from "@phosphor-icons/react/dist/icons/Table";
 import { TextT } from "@phosphor-icons/react/dist/icons/TextT";
 import { ChartBarHorizontal } from "@phosphor-icons/react/dist/ssr";
-import { Dispatch, SetStateAction, useMemo } from "react";
-import { ButtonGroupItem } from "../button-group";
+import { produce } from "immer";
+import { useTheme } from "next-themes";
+import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
 import ChartBackgroundSelection from "./chart-background-selection";
-import { ChartSeriesCombobox } from "./chart-series-combobox";
-import {
-  ChartData,
-  ChartLabelDisplayY,
-  ChartValue,
-  SingleValueFormat,
-} from "./chart-type";
+import { ChartValue, SingleValueFormat, THEMES } from "./chart-type";
 import { ChartTypeButton } from "./chart-type-button";
+import ChartYAxisSection from "./chart-y-axis-section";
+import { generateGradientColors } from "./echart-options-builder";
 import { SimpleCombobox } from "./simple-combobox";
 import SimpleInput from "./simple-input";
 import SimpleToggle from "./simple-toggle";
 
 interface EditChartMenuProps {
   value: ChartValue;
-  data: ChartData[];
-  setValue: Dispatch<SetStateAction<ChartValue>>;
+  columns: string[];
+  onChange: Dispatch<SetStateAction<ChartValue>>;
 }
 
 export default function EditChartMenu({
   value,
-  setValue,
-  data,
+  onChange,
+  columns,
 }: EditChartMenuProps) {
+  const { forcedTheme, resolvedTheme } = useTheme();
   const isNotChartComponent = ["text", "single_value", "table"].includes(
-    value.type
+    value.type ?? "line"
   );
 
-  const allAxisKeys = Object.keys(data[0] ?? {});
+  // Add default yAxisKeyColors
+  useEffect(() => {
+    if (!value.params.options.yAxisKeyColors && columns?.length > 0) {
+      const appTheme: "light" | "dark" = (forcedTheme || resolvedTheme) as
+        | "light"
+        | "dark";
+      const themeColor = THEMES.neonPunk.colors?.[appTheme ?? "light"];
+      const colors = generateGradientColors(
+        themeColor[0],
+        themeColor[1],
+        columns.length
+      );
 
-  const seriesList = useMemo(() => {
-    if (isNotChartComponent) return null;
+      onChange((prev) => {
+        const newColors = columns.reduce(
+          (acc, col, i) => {
+            acc[col] = colors[i];
+            return acc;
+          },
+          {} as Record<string, string>
+        );
+        return produce(prev, (draft) => {
+          draft.params.options.yAxisKeyColors = newColors;
+        });
+      });
+    }
+  }, [
+    columns,
+    forcedTheme,
+    onChange,
+    resolvedTheme,
+    value.params.options.yAxisKeyColors,
+  ]);
 
-    return (
-      <div className="pt-4">
-        <div className="flex items-center justify-between pb-2">
-          <p className="mb-1.5 text-sm font-bold opacity-70">Series</p>
-          <ButtonGroupItem
-            onClick={() => {
-              if (value.params.options?.yAxisKeys.length === allAxisKeys.length)
-                return;
+  // add default yAxisKeys and xAxisKey
+  useEffect(() => {
+    const allColumns = columns ?? [];
+    if (!value.params.options.xAxisKey && columns?.length > 0) {
+      onChange((prev) => {
+        return produce(prev, (draft) => {
+          draft.params.options.xAxisKey = allColumns.pop();
+        });
+      });
+    }
 
-              setValue((prev) => {
-                return {
-                  ...prev,
-                  params: {
-                    ...prev.params,
-                    options: {
-                      ...prev.params.options,
-                      yAxisKeys: [
-                        ...(prev.params.options?.yAxisKeys ?? []),
-                        allAxisKeys.filter(
-                          (key) =>
-                            !prev.params.options?.yAxisKeys?.includes(key)
-                        )[0],
-                      ],
-                    },
-                  },
-                };
-              });
-            }}
-          >
-            <p className="text-xs">Add Series</p>
-          </ButtonGroupItem>
-        </div>
-
-        <div className="flex flex-col gap-2">
-          {value.params.options?.yAxisKeys?.map((key, index) => {
-            const color = value.params.options?.yAxisKeyColors
-              ? value.params.options?.yAxisKeyColors[key]
-              : undefined;
-            return (
-              <ChartSeriesCombobox
-                color={color}
-                key={index}
-                values={
-                  allAxisKeys.map((s) => {
-                    return {
-                      value: s,
-                      label: s,
-                    };
-                  }) ?? []
-                }
-                selected={key ?? ""}
-                placeholder="Select axis key..."
-                onChange={function (v: string): void {
-                  setValue({
-                    ...value,
-                    params: {
-                      ...value.params,
-                      options: {
-                        ...value.params.options,
-                        yAxisKeys: (() => {
-                          const yAxisKeys =
-                            value.params.options?.yAxisKeys ?? [];
-                          yAxisKeys[index] = v;
-                          return yAxisKeys;
-                        })(),
-                      },
-                    },
-                  });
-                }}
-                onRemove={(series) => {
-                  setValue({
-                    ...value,
-                    params: {
-                      ...value.params,
-                      options: {
-                        ...value.params.options,
-                        yAxisKeys: (() => {
-                          if (series === null) return [];
-                          return (value.params.options?.yAxisKeys ?? []).filter(
-                            (k) => k !== series
-                          );
-                        })(),
-                      },
-                    },
-                  });
-                }}
-                onChangeColor={function (color: string): void {
-                  setValue({
-                    ...value,
-                    params: {
-                      ...value.params,
-                      options: {
-                        ...value.params.options,
-                        yAxisKeyColors: {
-                          ...value.params.options?.yAxisKeyColors,
-                          [key]: color,
-                        },
-                      },
-                    },
-                  });
-                }}
-              ></ChartSeriesCombobox>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }, [allAxisKeys, isNotChartComponent, setValue, value]);
-
-  const selectYAxisDisplay = useMemo(() => {
-    if (isNotChartComponent) return null;
-    const yAxisSideValues = [
-      {
-        value: "left",
-        label: "Left",
-      },
-      {
-        value: "right",
-        label: "Right",
-      },
-      {
-        value: "hidden",
-        label: "Hidden",
-      },
-    ];
-    return (
-      <div>
-        <SimpleCombobox
-          hideArrow={true}
-          values={yAxisSideValues}
-          selected={value.params.options?.yAxisLabelDisplay ?? "left"}
-          placeholder="Select display..."
-          onChange={function (v: string): void {
-            setValue({
-              ...value,
-              params: {
-                ...value.params,
-                options: {
-                  ...value.params.options,
-                  yAxisLabelDisplay: v as ChartLabelDisplayY,
-                },
-              },
-            });
-          }}
-        ></SimpleCombobox>
-      </div>
-    );
-  }, [isNotChartComponent, setValue, value]);
+    if (!value.params.options.yAxisKeys && columns?.length > 0) {
+      onChange((prev) => {
+        return produce(prev, (draft) => {
+          draft.params.options.yAxisKeys = allColumns;
+        });
+      });
+    }
+  }, [
+    columns,
+    onChange,
+    value.params.options.xAxisKey,
+    value.params.options.yAxisKeys,
+  ]);
 
   const selectAxisKey = useMemo(() => {
     if (isNotChartComponent) return null;
@@ -201,7 +104,7 @@ export default function EditChartMenu({
         <p className="mb-1.5 text-sm font-bold opacity-70">X Axis Value</p>
         <SimpleCombobox
           values={
-            allAxisKeys.map((key) => {
+            columns.map((key) => {
               return {
                 value: key,
                 label: key,
@@ -211,69 +114,16 @@ export default function EditChartMenu({
           selected={value.params.options?.xAxisKey ?? ""}
           placeholder="Select axis key..."
           onChange={function (v: string): void {
-            setValue({
-              ...value,
-              params: {
-                ...value.params,
-                options: {
-                  ...value.params.options,
-                  xAxisKey: v,
-                },
-              },
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.params.options.xAxisKey = v;
+              });
             });
           }}
         ></SimpleCombobox>
       </div>
     );
-  }, [allAxisKeys, isNotChartComponent, setValue, value]);
-
-  const yAxisLabelSection = useMemo(() => {
-    if (isNotChartComponent) return null;
-    return (
-      <div>
-        <p className="mb-1.5 text-sm font-bold opacity-70">Y Axis</p>
-        <div className="flex items-center justify-between gap-2">
-          <SimpleInput
-            value={value.params.options?.yAxisLabel}
-            placeholder={value.params.options?.yAxisKeys[0] ?? "Y Axis Label"}
-            onSumit={(v) => {
-              setValue({
-                ...value,
-                params: {
-                  ...value.params,
-                  options: {
-                    ...value.params.options,
-                    yAxisLabel: v,
-                  },
-                },
-              });
-            }}
-          />
-          {selectYAxisDisplay}
-
-          <SimpleToggle
-            values={["Show", "Hide"]}
-            onChange={(v) => {
-              setValue({
-                ...value,
-                params: {
-                  ...value.params,
-                  options: {
-                    ...value.params.options,
-                    yAxisLabelHidden: v === "Hide",
-                  },
-                },
-              });
-            }}
-            selectedValue={
-              value.params.options?.yAxisLabelHidden ? "Hide" : "Show"
-            }
-          />
-        </div>
-        {seriesList}
-      </div>
-    );
-  }, [isNotChartComponent, selectYAxisDisplay, seriesList, setValue, value]);
+  }, [columns, isNotChartComponent, onChange, value.params.options?.xAxisKey]);
 
   const xAxisLabelSection = useMemo(() => {
     if (isNotChartComponent) return null;
@@ -285,15 +135,10 @@ export default function EditChartMenu({
             value={value.params.options?.xAxisLabel}
             placeholder={value.params.options?.xAxisKey ?? "X Axis Label"}
             onSumit={(v) => {
-              setValue({
-                ...value,
-                params: {
-                  ...value.params,
-                  options: {
-                    ...value.params.options,
-                    xAxisLabel: v,
-                  },
-                },
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.params.options.xAxisLabel = v;
+                });
               });
             }}
           />
@@ -301,15 +146,10 @@ export default function EditChartMenu({
           <SimpleToggle
             values={["Show", "Hide"]}
             onChange={(v) => {
-              setValue({
-                ...value,
-                params: {
-                  ...value.params,
-                  options: {
-                    ...value.params.options,
-                    xAxisLabelHidden: v === "Hide",
-                  },
-                },
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.params.options.xAxisLabelHidden = v === "Hide";
+                });
               });
             }}
             selectedValue={
@@ -319,7 +159,13 @@ export default function EditChartMenu({
         </div>
       </div>
     );
-  }, [isNotChartComponent, setValue, value]);
+  }, [
+    isNotChartComponent,
+    onChange,
+    value.params.options?.xAxisKey,
+    value.params.options?.xAxisLabel,
+    value.params.options?.xAxisLabelHidden,
+  ]);
 
   const dataFormatSection = useMemo(() => {
     if (value.type !== "single_value") return null;
@@ -373,21 +219,16 @@ export default function EditChartMenu({
           selected={value.params.options?.format ?? "none"}
           placeholder="Select format..."
           onChange={function (v: string): void {
-            setValue({
-              ...value,
-              params: {
-                ...value.params,
-                options: {
-                  ...value.params.options,
-                  format: v === "none" ? undefined : (v as SingleValueFormat),
-                },
-              },
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.params.options.format = v as SingleValueFormat;
+              });
             });
           }}
         ></SimpleCombobox>
       </div>
     );
-  }, [setValue, value]);
+  }, [onChange, value.params.options?.format, value.type]);
 
   const textSection = useMemo(() => {
     if (value.type !== "text") return null;
@@ -397,18 +238,16 @@ export default function EditChartMenu({
         <textarea
           className="h-[200px] w-full rounded-md border p-2"
           onChange={(v) =>
-            setValue({
-              ...value,
-              params: {
-                ...value.params,
-                options: { ...value.params.options, text: v.target.value },
-              },
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.params.options.text = v.target.value;
+              });
             })
           }
         />
       </div>
     );
-  }, [setValue, value]);
+  }, [onChange, value.type]);
 
   const textColorSection = useMemo(() => {
     const textColorValues = [
@@ -434,21 +273,17 @@ export default function EditChartMenu({
           selected={value.params.options?.foreground ?? "Automatic"}
           placeholder="Select color..."
           onChange={function (v: string): void {
-            setValue({
-              ...value,
-              params: {
-                ...value.params,
-                options: {
-                  ...value.params.options,
-                  foreground: v === "Automatic" ? undefined : v,
-                },
-              },
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.params.options.foreground =
+                  v === "Automatic" ? undefined : v;
+              });
             });
           }}
         ></SimpleCombobox>
       </div>
     );
-  }, [setValue, value]);
+  }, [onChange, value.params.options?.foreground]);
 
   return (
     <div className="flex w-full flex-col gap-5 p-1 pb-4">
@@ -459,7 +294,11 @@ export default function EditChartMenu({
             icon={<ChartLine />}
             isActive={value.type === "line"}
             onClick={() => {
-              setValue({ ...value, type: "line" });
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.type = "line";
+                });
+              });
             }}
             tooltipText="Line"
           />
@@ -467,7 +306,11 @@ export default function EditChartMenu({
             icon={<ChartBar />}
             isActive={value.type === "column"}
             onClick={() => {
-              setValue({ ...value, type: "column" });
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.type = "column";
+                });
+              });
             }}
             tooltipText="Column"
           />
@@ -475,7 +318,11 @@ export default function EditChartMenu({
             icon={<ChartBarHorizontal />}
             isActive={value.type === "bar"}
             onClick={() => {
-              setValue({ ...value, type: "bar" });
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.type = "bar";
+                });
+              });
             }}
             tooltipText="Bar"
           />
@@ -483,7 +330,11 @@ export default function EditChartMenu({
             icon={<ChartScatter />}
             isActive={value.type === "scatter"}
             onClick={() => {
-              setValue({ ...value, type: "scatter" });
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.type = "scatter";
+                });
+              });
             }}
             tooltipText="scatter"
           />
@@ -491,7 +342,11 @@ export default function EditChartMenu({
             icon={<TextT />}
             isActive={value.type === "text"}
             onClick={() => {
-              setValue({ ...value, type: "text" });
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.type = "text";
+                });
+              });
             }}
             tooltipText="Text"
           />
@@ -499,7 +354,11 @@ export default function EditChartMenu({
             icon={<NumberCircleOne weight="bold" />}
             isActive={value.type === "single_value"}
             onClick={() => {
-              setValue({ ...value, type: "single_value" });
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.type = "single_value";
+                });
+              });
             }}
             tooltipText="Single Value"
           />
@@ -507,7 +366,11 @@ export default function EditChartMenu({
             icon={<Table />}
             isActive={value.type === "table"}
             onClick={() => {
-              setValue({ ...value, type: "table" });
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.type = "table";
+                });
+              });
             }}
             tooltipText="Table"
           />
@@ -515,7 +378,11 @@ export default function EditChartMenu({
             icon={<ChartPieSlice weight="bold" />}
             isActive={value.type === "pie"}
             onClick={() => {
-              setValue({ ...value, type: "pie" });
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.type = "pie";
+                });
+              });
             }}
             tooltipText="Pie"
           />
@@ -523,7 +390,11 @@ export default function EditChartMenu({
             icon={<ChartPolar />}
             isActive={value.type === "radar"}
             onClick={() => {
-              setValue({ ...value, type: "radar" });
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.type = "radar";
+                });
+              });
             }}
             tooltipText="Radar"
           />
@@ -531,7 +402,11 @@ export default function EditChartMenu({
             icon={<Funnel />}
             isActive={value.type === "funnel"}
             onClick={() => {
-              setValue({ ...value, type: "funnel" });
+              onChange((prev) => {
+                return produce(prev, (draft) => {
+                  draft.type = "funnel";
+                });
+              });
             }}
             tooltipText="Funnel"
           />
@@ -542,9 +417,19 @@ export default function EditChartMenu({
       {dataFormatSection}
       {xAxisLabelSection}
       {selectAxisKey}
-      {yAxisLabelSection}
+      {!isNotChartComponent && (
+        <ChartYAxisSection
+          value={value}
+          onChange={function (value: SetStateAction<ChartValue>): void {
+            onChange(value);
+          }}
+          isNotChartComponent={false}
+          columns={columns}
+        />
+      )}
+
       {textColorSection}
-      <ChartBackgroundSelection value={value} setValue={setValue} />
+      <ChartBackgroundSelection value={value} setValue={onChange} />
     </div>
   );
 }
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
index 595905e4..10c51c3e 100644
--- a/src/components/chart/index.tsx
+++ b/src/components/chart/index.tsx
@@ -3,7 +3,7 @@ import * as echarts from "echarts";
 import { EChartsOption } from "echarts";
 import { useTheme } from "next-themes";
 import { useEffect, useRef } from "react";
-import { ChartData, ChartValue } from "./chart-type";
+import { ChartData, ChartValue, outerBaseUrl } from "./chart-type";
 import EchartOptionsBuilder from "./echart-options-builder";
 
 interface OuterbaseChartProps {
@@ -124,6 +124,7 @@ const SingleValueComponent = ({ value, data }: OuterbaseChartProps) => {
 };
 
 const TableComponent = ({ data }: OuterbaseChartProps) => {
+  if (data?.length === 0) return;
   return (
     <div className="w-full overflow-auto rounded border">
       <table className="w-full border-separate border-spacing-0 text-sm">
@@ -234,13 +235,26 @@ export default function Chart(props: OuterbaseChartProps) {
     backGroundStyle = {
       background: `linear-gradient(45deg, ${startColor}, ${stopColor})`,
     };
+  } else if (props.value.params.options?.backgroundType === "image") {
+    backGroundStyle = {
+      backgroundImage: `url(${outerBaseUrl + props.value.params.options?.backgroundImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+    };
   }
 
   return (
-    <div className="flex h-full w-full flex-col p-6" style={backGroundStyle}>
-      <h1 className="mb-4 text-lg font-semibold">{props.value.name}</h1>
-      <div className="flex-1">
-        <ChartBody {...props} />
+    <div className="flex h-full w-full p-6" style={backGroundStyle}>
+      <div className="dark:shadow-accent flex h-full w-full flex-col rounded-lg p-2 shadow-2xl backdrop-blur-lg backdrop-brightness-100 dark:backdrop-brightness-100">
+        <h1
+          className="mb-4 text-lg font-semibold"
+          style={{ color: props.value.params.options?.foreground }}
+        >
+          {props.value.name ?? "New Chart"}
+        </h1>
+        <div className="flex-1">
+          <ChartBody {...props} />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/chart/simple-color-picker.tsx b/src/components/chart/simple-color-picker.tsx
index 2f59eaa3..ad31807d 100644
--- a/src/components/chart/simple-color-picker.tsx
+++ b/src/components/chart/simple-color-picker.tsx
@@ -1,77 +1,78 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SketchPicker } from "react-color";
-import { Button } from "../ui/button";
+import { ThemeColors, THEMES } from "./chart-type";
 
 const presetColors = [
-  "#FF0000", // Red
-  "#FF7F00", // Orange
-  "#FFFF00", // Yellow
-  "#7FFF00", // Chartreuse Green
-  "#00FF00", // Green
-  "#00FF7F", // Spring Green
-  "#00FFFF", // Cyan
-  "#007FFF", // Azure
-  "#0000FF", // Blue
-  "#7F00FF", // Violet
-  "#FF00FF", // Magenta
-  "#FF007F", // Rose
-  "#800000", // Maroon
-  "#FF4500", // Orange Red
-  "#FFD700", // Gold
-  "#808000", // Olive
-  "#008000", // Dark Green
-  "#008080", // Teal
-  "#000080", // Navy
-  "#800080", // Purple
-  "#8B0000", // Dark Red
-  "#FF6347", // Tomato
-  "#FFA500", // Orange
-  "#FFFFE0", // Light Yellow
-  "#ADFF2F", // Green Yellow
-  "#32CD32", // Lime Green
-  "#40E0D0", // Turquoise
-  "#4682B4", // Steel Blue
-  "#6A5ACD", // Slate Blue
-  "#EE82EE", // Violet
-  "#D2691E", // Chocolate
-  "#A52A2A", // Brown
+  "#D0021B",
+  "#F5A623",
+  "#F8E71C",
+  "#8B572A",
+  "#7ED321",
+  "#417505",
+  "#BD10E0",
+  "#9013FE",
+  "#4A90E2",
+  "#50E3C2",
 ];
 
 interface SimpleColorPickerProps {
   selected?: string;
   onChange: (color: string) => void;
+  onThemeChange: (theme: ThemeColors) => void;
 }
 
 export default function SimpleColorPicker({
   selected,
   onChange,
+  onThemeChange,
 }: SimpleColorPickerProps) {
-  const [selectedColor, setSelectedColor] = useState<string>(selected || "");
+  const [selectedColor, setSelectedColor] = useState<string | "">(
+    selected || ""
+  );
+  useEffect(() => {
+    if (selected) {
+      setSelectedColor(selected);
+    }
+  }, [selected]);
   return (
     <div>
-      <div className="mt-2 shadow-lg">
+      <div className="flex">
         <SketchPicker
+          width="255px"
+          className="bg-background! shadow-none!"
           disableAlpha
           presetColors={presetColors}
           color={selectedColor}
           onChangeComplete={(color) => {
             setSelectedColor(color.hex);
+            onChange(color.hex);
           }}
         />
-      </div>
-      <div className="m-2 flex items-center justify-between">
-        <p className="text-sm">
-          <span className="pr-2.5 font-bold">{selectedColor}</span>
-        </p>
-        <Button
-          onClick={() => {
-            onChange(selectedColor);
-          }}
-          variant="ghost"
-        >
-          <span className="text-sm">Ok</span>
-        </Button>
+
+        <div className="border-l-accent flex flex-col gap-1 border-l-2 p-3">
+          {Object.keys(THEMES).map((key) => {
+            return (
+              <div
+                key={key}
+                className="flex cursor-pointer items-center gap-1 text-xs"
+                onClick={() => {
+                  if (key) {
+                    onThemeChange(key as ThemeColors);
+                  }
+                }}
+              >
+                <div
+                  className="mr-2 h-[14px] w-[14px] cursor-pointer rounded-full"
+                  style={{
+                    background: THEMES[key as ThemeColors].background,
+                  }}
+                />
+                <p>{key}</p>
+              </div>
+            );
+          })}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/chart/simple-combobox.tsx b/src/components/chart/simple-combobox.tsx
index f3bbf859..a9832e8a 100644
--- a/src/components/chart/simple-combobox.tsx
+++ b/src/components/chart/simple-combobox.tsx
@@ -43,6 +43,10 @@ export function SimpleCombobox({
     selected || null
   );
 
+  React.useEffect(() => {
+    setSelectedValue(selected || null);
+  }, [selected]);
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>

From 0a5c934f0c0ab879f8ae840f210c34162fafff15 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 10 Feb 2025 08:58:11 +0700
Subject: [PATCH 032/106] add auto complete to add chart

---
 src/components/board/board-chart-editor.tsx   | 41 +++++++++-
 src/components/board/board-source-picker.tsx  | 81 +++++++++++++++++--
 src/context/schema-provider.tsx               |  2 +-
 src/drivers/board-source/base-source.ts       | 11 ++-
 src/outerbase-cloud/database-source/index.tsx | 38 +++++++--
 5 files changed, 155 insertions(+), 18 deletions(-)

diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index a47fd005..b5a7c6ad 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -1,8 +1,12 @@
+import { generateAutoComplete } from "@/context/schema-provider";
+import { DatabaseSchemas } from "@/drivers/base-driver";
+import { Play } from "@phosphor-icons/react";
 import { produce } from "immer";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { ChartValue } from "../chart/chart-type";
 import EditChartMenu from "../chart/edit-chart-menu";
 import SqlEditor from "../gui/sql-editor";
+import { Button } from "../orbit/button";
 import BoardSourcePicker from "./board-source-picker";
 
 export default function BoardChartEditor() {
@@ -40,6 +44,13 @@ export default function BoardChartEditor() {
     },
   });
 
+  const [schema, setSchema] = useState<DatabaseSchemas>({});
+  const [selectedSchema, setSelectedSchema] = useState("");
+
+  const autoCompletion = useMemo(() => {
+    return generateAutoComplete(selectedSchema, schema);
+  }, [schema, selectedSchema]);
+
   return (
     <div className="flex flex-1 border-t">
       <div className="flex flex-1 flex-col">
@@ -47,13 +58,37 @@ export default function BoardChartEditor() {
           <div className="text-lg font-semibold">Chart Editor</div>
         </div>
         <div className="h-1/2 overflow-x-hidden">
-          <div className="border-b px-4 py-2">
-            <BoardSourcePicker />
+          <div className="flex border-b px-4 py-2">
+            <BoardSourcePicker
+              value={value?.source_id}
+              onChange={(newSourceId) => {
+                setValue((prev) =>
+                  produce(prev, (draft) => {
+                    draft.source_id = newSourceId;
+                  })
+                );
+              }}
+              onSchemaLoad={(loadedSchema) => {
+                setSchema(loadedSchema.schema);
+                setSelectedSchema(loadedSchema.selectedSchema ?? "");
+                console.log(loadedSchema);
+              }}
+            />
+
+            <div className="flex-1"></div>
+
+            <div>
+              <Button size="lg">
+                <Play />
+                Run
+              </Button>
+            </div>
           </div>
           <div>
             <SqlEditor
               dialect="sqlite"
               value={value.params.layers[0].sql}
+              schema={autoCompletion}
               onChange={(e) => {
                 setValue(
                   produce(value, (draft) => {
diff --git a/src/components/board/board-source-picker.tsx b/src/components/board/board-source-picker.tsx
index 0413e1e2..3b7ec428 100644
--- a/src/components/board/board-source-picker.tsx
+++ b/src/components/board/board-source-picker.tsx
@@ -1,4 +1,8 @@
-import { CaretDown } from "@phosphor-icons/react";
+import { DatabaseSchemas } from "@/drivers/base-driver";
+import { OuterbaseAPIError } from "@/outerbase-cloud/api-type";
+import { CaretDown, WarningCircle } from "@phosphor-icons/react";
+import { useState } from "react";
+import { Loader } from "../orbit/loader";
 import { getDatabaseIcon } from "../resource-card/utils";
 import { Button } from "../ui/button";
 import {
@@ -12,20 +16,55 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { useBoardContext } from "./board-provider";
 
-export default function BoardSourcePicker() {
+interface BoardSourcePickerProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  onSchemaLoad?: (props: {
+    schema: DatabaseSchemas;
+    selectedSchema?: string;
+  }) => void;
+}
+
+export default function BoardSourcePicker({
+  value,
+  onChange,
+  onSchemaLoad,
+}: BoardSourcePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [loadingSchema, setLoadingSchema] = useState(false);
+  const [schemaError, setSchemaError] = useState<OuterbaseAPIError>();
   const { sources: sourceDriver } = useBoardContext();
   const sourceList = sourceDriver?.sourceList() ?? [];
+  const [search, setSearch] = useState("");
+
+  const selectedSource = sourceList.find((source) => source.id === value);
+  const DatabaseIcon = getDatabaseIcon(selectedSource?.type ?? "");
 
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button variant={"outline"}>
-          Pick <CaretDown className="ml-2" />
+          {schemaError && (
+            <span title={schemaError.message}>
+              <WarningCircle className="mr-2 h-4 w-4 text-red-500" />
+            </span>
+          )}
+          {loadingSchema ? (
+            <Loader size={16} className="mr-2" />
+          ) : (
+            <DatabaseIcon className="mr-2 h-4 w-4" />
+          )}
+          {selectedSource?.name ?? "Please select source"}{" "}
+          <CaretDown className="ml-2" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="m-0 p-0" align="start" side="top">
         <Command>
-          <CommandInput placeholder="Search data source" />
+          <CommandInput
+            placeholder="Search data source"
+            value={search}
+            onValueChange={setSearch}
+          />
 
           <CommandList>
             <CommandEmpty>No data source found</CommandEmpty>
@@ -34,7 +73,37 @@ export default function BoardSourcePicker() {
                 const DatabaseIcon = getDatabaseIcon(source.type);
 
                 return (
-                  <CommandItem key={source.id} value={source.id}>
+                  <CommandItem
+                    key={source.id}
+                    value={source.name}
+                    onSelect={() => {
+                      if (onChange && sourceDriver) {
+                        onChange(source.id);
+
+                        setLoadingSchema(true);
+                        setSchemaError(undefined);
+
+                        sourceDriver
+                          .schemas(source.id)
+                          .then((loadedSchema) => {
+                            if (onSchemaLoad) {
+                              onSchemaLoad(loadedSchema);
+                            }
+                          })
+                          .catch((e) => {
+                            if (e instanceof OuterbaseAPIError) {
+                              setSchemaError(e);
+                            } else {
+                              setSchemaError(new OuterbaseAPIError(e.message));
+                            }
+                          })
+                          .finally(() => {
+                            setLoadingSchema(false);
+                          });
+                      }
+                      setOpen(false);
+                    }}
+                  >
                     <DatabaseIcon />
                     {source.name}
                   </CommandItem>
diff --git a/src/context/schema-provider.tsx b/src/context/schema-provider.tsx
index e45d8dbe..4d62d66a 100644
--- a/src/context/schema-provider.tsx
+++ b/src/context/schema-provider.tsx
@@ -46,7 +46,7 @@ function generateAutoCompleteFromSchemaItems(
     );
 }
 
-function generateAutoComplete(
+export function generateAutoComplete(
   currentSchemaName: string,
   schema: DatabaseSchemas
 ) {
diff --git a/src/drivers/board-source/base-source.ts b/src/drivers/board-source/base-source.ts
index a8aaadc6..4ebd6f6d 100644
--- a/src/drivers/board-source/base-source.ts
+++ b/src/drivers/board-source/base-source.ts
@@ -1,3 +1,4 @@
+import { DatabaseSchemas } from "../base-driver";
 
 export interface BoardSource {
   id: string;
@@ -7,6 +8,12 @@ export interface BoardSource {
 
 export abstract class BoardSourceDriver {
   abstract sourceList(): BoardSource[];
-  abstract query(sourceId: string, statement: string): Promise<Record<string, unknown>[]>
+  abstract query(
+    sourceId: string,
+    statement: string
+  ): Promise<Record<string, unknown>[]>;
+  abstract schemas(
+    sourceId: string
+  ): Promise<{ schema: DatabaseSchemas; selectedSchema?: string }>;
   abstract cleanup(): void;
-}
\ No newline at end of file
+}
diff --git a/src/outerbase-cloud/database-source/index.tsx b/src/outerbase-cloud/database-source/index.tsx
index 353877c7..fb92a5e1 100644
--- a/src/outerbase-cloud/database-source/index.tsx
+++ b/src/outerbase-cloud/database-source/index.tsx
@@ -1,6 +1,6 @@
 import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
 import { createOuterbaseDatabaseDriver } from "@/outerbase-cloud/database/utils";
-import { BaseDriver } from "../../drivers/base-driver";
+import { BaseDriver, DatabaseSchemas } from "../../drivers/base-driver";
 import {
   BoardSource,
   BoardSourceDriver,
@@ -9,6 +9,13 @@ import {
 export default class OuterbaseBoardSourceDriver implements BoardSourceDriver {
   protected workspace: OuterbaseAPIWorkspace;
   protected sourceDrivers: Record<string, BaseDriver> = {};
+  protected cacheSchemas: Record<
+    string,
+    {
+      schema: DatabaseSchemas;
+      selectedSchema: string;
+    }
+  > = {};
 
   constructor(workspace: OuterbaseAPIWorkspace) {
     this.workspace = workspace;
@@ -26,10 +33,7 @@ export default class OuterbaseBoardSourceDriver implements BoardSourceDriver {
       });
   }
 
-  async query(
-    sourceId: string,
-    statement: string
-  ): Promise<Record<string, unknown>[]> {
+  getDriver(sourceId: string) {
     const source = this.workspace.bases.find((base) => {
       return (
         base.sources &&
@@ -52,7 +56,29 @@ export default class OuterbaseBoardSourceDriver implements BoardSourceDriver {
       );
     }
 
-    const driver = this.sourceDrivers[sourceId]!;
+    return this.sourceDrivers[sourceId]!;
+  }
+
+  async schemas(sourceId: string) {
+    const driver = this.getDriver(sourceId);
+
+    if (this.cacheSchemas[sourceId]) {
+      return this.cacheSchemas[sourceId];
+    }
+
+    this.cacheSchemas[sourceId] = {
+      schema: await driver.schemas(),
+      selectedSchema: driver.getFlags().defaultSchema,
+    };
+
+    return this.cacheSchemas[sourceId];
+  }
+
+  async query(
+    sourceId: string,
+    statement: string
+  ): Promise<Record<string, unknown>[]> {
+    const driver = this.getDriver(sourceId);
     const result = await driver.query(statement);
 
     return result.rows;

From 1c3d4baaab057b8d5fc70589f1e805d9028acf80 Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Mon, 10 Feb 2025 11:00:21 +0700
Subject: [PATCH 033/106] Outerbase data catalog driver (#348)

* add outerbase code skeleton

* change variable name

* change variable name

* change variable name

* show placeholder text value empty string

* integrated outerbase data catalog driver

* update column from result header

* fix typescript error

---------

Co-authored-by: Visal In <invisal@gmail.com>
---
 .../table-combobox/TableColumnCombobox.tsx    |   2 +-
 .../gui/table-combobox/TableCombobox.tsx      |   2 +-
 src/core/standard-extension.tsx               |   5 -
 src/extensions/data-catalog/constant.ts       |  14 +
 .../data-catalog/data-catalog-entry-modal.tsx |  43 ++-
 .../data-catalog/data-catalog-tab.tsx         |  37 ++-
 .../data-catalog-table-accordion.tsx          | 158 +++++----
 .../data-catalog-table-column-modal.tsx       |  89 ++++--
 .../data-catalog-table-column.tsx             |  51 ++-
 .../data-catalog/data-model-tab.tsx           |  33 +-
 .../data-catalog/driver-inmemory.ts           | 162 ++++++----
 src/extensions/data-catalog/driver.tsx        |  72 ++---
 .../data-catalog/table-metadata-modal.tsx     | 148 +++++++++
 .../data-catalog/table-result-header.tsx      |  18 +-
 .../data-catalog/term-definition-list.tsx     |  10 +-
 .../data-catalog/virtual-column.tsx           |  58 +++-
 .../data-catalog/virtual-join-modal.tsx       | 257 ++++++++-------
 src/outerbase-cloud/api-type.ts               |  93 ++++++
 src/outerbase-cloud/api.ts                    | 135 +++++++-
 src/outerbase-cloud/data-catalog-driver.ts    | 299 ++++++++++++++++++
 src/outerbase-cloud/database/sqlite.ts        |  12 +-
 src/outerbase-cloud/util.ts                   |  61 ++++
 22 files changed, 1356 insertions(+), 403 deletions(-)
 create mode 100644 src/extensions/data-catalog/constant.ts
 create mode 100644 src/extensions/data-catalog/table-metadata-modal.tsx
 create mode 100644 src/outerbase-cloud/data-catalog-driver.ts
 create mode 100644 src/outerbase-cloud/util.ts

diff --git a/src/components/gui/table-combobox/TableColumnCombobox.tsx b/src/components/gui/table-combobox/TableColumnCombobox.tsx
index 553a8106..71733e47 100644
--- a/src/components/gui/table-combobox/TableColumnCombobox.tsx
+++ b/src/components/gui/table-combobox/TableColumnCombobox.tsx
@@ -66,7 +66,7 @@ export default function TableColumnCombobox({
               "flex w-full justify-between"
             )}
           >
-            {value ?? "No table selected"}
+            {value || "No table selected"}
             <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
           </div>
         )}
diff --git a/src/components/gui/table-combobox/TableCombobox.tsx b/src/components/gui/table-combobox/TableCombobox.tsx
index 698fbb0d..f3930546 100644
--- a/src/components/gui/table-combobox/TableCombobox.tsx
+++ b/src/components/gui/table-combobox/TableCombobox.tsx
@@ -44,7 +44,7 @@ export default function TableCombobox({
               "flex w-full justify-between"
             )}
           >
-            {value ?? "No table selected"}
+            {value || "No table selected"}
             <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
           </div>
         )}
diff --git a/src/core/standard-extension.tsx b/src/core/standard-extension.tsx
index e96f186b..3923b6f2 100644
--- a/src/core/standard-extension.tsx
+++ b/src/core/standard-extension.tsx
@@ -3,8 +3,6 @@
  */
 
 import ColumnDescriptorExtension from "@/extensions/column-descriptor";
-import DataCatalogExtension from "@/extensions/data-catalog";
-import DataCatalogInmemoryDriver from "@/extensions/data-catalog/driver-inmemory";
 import QueryHistoryConsoleLogExtension from "@/extensions/query-console-log";
 import TriggerEditorExtension from "@/extensions/trigger-editor";
 import ViewEditorExtension from "@/extensions/view-editor";
@@ -14,9 +12,6 @@ export function createStandardExtensions() {
     new QueryHistoryConsoleLogExtension(),
     new ViewEditorExtension(),
     new ColumnDescriptorExtension(),
-    new DataCatalogExtension(
-      new DataCatalogInmemoryDriver({}, [], { delay: 1000 })
-    ),
   ];
 }
 
diff --git a/src/extensions/data-catalog/constant.ts b/src/extensions/data-catalog/constant.ts
new file mode 100644
index 00000000..ff1578bb
--- /dev/null
+++ b/src/extensions/data-catalog/constant.ts
@@ -0,0 +1,14 @@
+export const defaultVirtualColumn = {
+  body: "",
+  column: "",
+  flags: {
+    isActive: true,
+    isVirtualKey: true,
+  },
+  sample_data: "",
+  schema: "",
+  table: "",
+  virtual_key_column: "",
+  virtual_key_schema: "",
+  virtual_key_table: "",
+};
diff --git a/src/extensions/data-catalog/data-catalog-entry-modal.tsx b/src/extensions/data-catalog/data-catalog-entry-modal.tsx
index a8b4a2fa..92a86d5f 100644
--- a/src/extensions/data-catalog/data-catalog-entry-modal.tsx
+++ b/src/extensions/data-catalog/data-catalog-entry-modal.tsx
@@ -11,6 +11,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { OuterbaseDataCatalogDefinition } from "@/outerbase-cloud/api-type";
 import { LucideLoader } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import DataCatalogDriver, { DataCatalogTermDefinition } from "./driver";
@@ -18,24 +19,22 @@ import DataCatalogDriver, { DataCatalogTermDefinition } from "./driver";
 interface Props {
   driver?: DataCatalogDriver;
   open: boolean;
-  onSuccess: () => void;
   onClose: (open: boolean) => void;
-  selectedTermDefinition?: DataCatalogTermDefinition;
+  definition?: OuterbaseDataCatalogDefinition;
 }
 
 export function DataCatalogEntryModal({
   open,
   onClose,
   driver,
-  onSuccess,
-  selectedTermDefinition,
+  definition,
 }: Props) {
   const [deleting, setDeleting] = useState(false);
   const [loading, setLoading] = useState(false);
   const [formData, setFormData] = useState<DataCatalogTermDefinition>({
     id: "",
     name: "",
-    otherName: "",
+    otherNames: "",
     definition: "",
   });
 
@@ -46,39 +45,39 @@ export function DataCatalogEntryModal({
     setFormData({
       id: "",
       name: "",
-      otherName: "",
+      otherNames: "",
       definition: "",
     });
   }, [onClose]);
 
   useEffect(() => {
-    if (selectedTermDefinition) {
-      setFormData(selectedTermDefinition);
+    if (definition) {
+      setFormData(definition);
     } else {
       clear();
     }
-  }, [selectedTermDefinition, clear]);
+  }, [definition, clear]);
 
   const saveTermDefinition = useCallback(() => {
     setLoading(true);
     const data = {
       ...formData,
-      id: selectedTermDefinition?.id || String(Date.now() * 1000), // Use existing ID if editing
+      id: definition?.id || undefined,
     };
 
     driver
       ?.updateTermDefinition(data)
-      .then(() => onSuccess())
+      .then()
       .finally(() => clear());
-  }, [formData, driver, onSuccess, clear, selectedTermDefinition]);
+  }, [formData, driver, clear, definition]);
 
   function onDelete() {
-    if (!selectedTermDefinition) return;
+    if (!definition) return;
 
     setDeleting(true);
     driver
-      ?.deleteTermDefinition(selectedTermDefinition.id)
-      .then(() => onSuccess())
+      ?.deleteTermDefinition(definition.id)
+      .then()
       .finally(() => clear());
   }
 
@@ -96,12 +95,10 @@ export function DataCatalogEntryModal({
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
-          <DialogTitle>
-            {selectedTermDefinition ? "Edit Term" : "Add Term"}
-          </DialogTitle>
+          <DialogTitle>{definition ? "Edit Term" : "Add Term"}</DialogTitle>
         </DialogHeader>
         <DialogDescription>
-          {selectedTermDefinition
+          {definition
             ? "Modify the existing term definition."
             : "Add terms to your Data Dictionary to help your team and AI understand important business terminology."}
         </DialogDescription>
@@ -120,11 +117,11 @@ export function DataCatalogEntryModal({
           <div className="items-center gap-4">
             <Label className="text-right text-xs">Other Names</Label>
             <Input
-              value={formData.otherName}
+              value={formData.otherNames}
               className="col-span-3"
               placeholder="Add other names"
               onChange={(e) =>
-                onChangeValue(e.currentTarget.value, "otherName")
+                onChangeValue(e.currentTarget.value, "otherNames")
               }
             />
           </div>
@@ -150,9 +147,9 @@ export function DataCatalogEntryModal({
             type="submit"
           >
             {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
-            {selectedTermDefinition ? "Save Change" : "Add Entry"}
+            {definition ? "Save Change" : "Add Entry"}
           </Button>
-          {selectedTermDefinition && (
+          {definition && (
             <Button
               disabled={deleting}
               onClick={onDelete}
diff --git a/src/extensions/data-catalog/data-catalog-tab.tsx b/src/extensions/data-catalog/data-catalog-tab.tsx
index 36c2b925..3c20776e 100644
--- a/src/extensions/data-catalog/data-catalog-tab.tsx
+++ b/src/extensions/data-catalog/data-catalog-tab.tsx
@@ -1,10 +1,10 @@
 import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
 import { Button } from "@/components/ui/button";
 import { useConfig } from "@/context/config-provider";
-import { useState } from "react";
+import { OuterbaseDataCatalogDefinition } from "@/outerbase-cloud/api-type";
+import { useEffect, useState } from "react";
 import DataCatalogExtension from ".";
 import { DataCatalogEntryModal } from "./data-catalog-entry-modal";
-import { DataCatalogTermDefinition } from "./driver";
 import EmptyTermDefinition from "./empty-definition";
 import TermDefinitionList from "./term-definition-list";
 
@@ -16,22 +16,28 @@ export default function DataCatalogTab() {
 
   const [open, setOpen] = useState(false);
 
-  const [dataCatalog, setDataCatalog] = useState<DataCatalogTermDefinition[]>(
-    () => {
-      return driver?.getTermDefinitions() || [];
-    }
-  );
+  const [dataCatalog, setDataCatalog] = useState<
+    OuterbaseDataCatalogDefinition[]
+  >([]);
 
-  const [selectedTermDefinition, setSeletedTermDefinition] =
-    useState<DataCatalogTermDefinition>();
+  const [definition, setDefinition] =
+    useState<OuterbaseDataCatalogDefinition>();
 
-  function onSuccess() {
-    setDataCatalog(driver?.getTermDefinitions() || []);
-  }
+  useEffect(() => {
+    const getDataCatalog = () => {
+      setDataCatalog(driver?.getTermDefinitions() || []);
+    };
+
+    getDataCatalog();
+
+    const unsubscribe = driver?.addEventListener(getDataCatalog);
+
+    return () => unsubscribe;
+  }, []);
 
   function onOpenModal() {
     setOpen(true);
-    setSeletedTermDefinition(undefined);
+    setDefinition(undefined);
   }
 
   if (!driver) {
@@ -48,11 +54,10 @@ export default function DataCatalogTab() {
             Add Entry
           </Button>
           <DataCatalogEntryModal
-            selectedTermDefinition={selectedTermDefinition}
             open={open}
             onClose={setOpen}
             driver={driver}
-            onSuccess={onSuccess}
+            definition={definition}
           />
         </Toolbar>
       </div>
@@ -75,7 +80,7 @@ export default function DataCatalogTab() {
           <TermDefinitionList
             data={dataCatalog}
             onSelect={(item) => {
-              setSeletedTermDefinition(item);
+              setDefinition(item);
               setOpen(true);
             }}
           />
diff --git a/src/extensions/data-catalog/data-catalog-table-accordion.tsx b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
index 9747c17b..43135a70 100644
--- a/src/extensions/data-catalog/data-catalog-table-accordion.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
@@ -4,7 +4,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import { Dialog } from "@/components/ui/dialog";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,12 +14,12 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { DatabaseTableSchema } from "@/drivers/base-driver";
 import { cn } from "@/lib/utils";
+import { OuterbaseDataCatalogComment } from "@/outerbase-cloud/api-type";
 import { Blend, ChevronDown, Edit3, LucideMoreHorizontal } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import DataCatalogTableColumn from "./data-catalog-table-column";
-import DataCatalogDriver, {
-  VirtualJoinColumn as IVirtualJoinColumn,
-} from "./driver";
+import DataCatalogDriver from "./driver";
+import TableMetadataModal from "./table-metadata-modal";
 import VirtualJoinColumn from "./virtual-column";
 import VirtualJoinModal from "./virtual-join-modal";
 
@@ -38,43 +38,58 @@ export default function DataCatalogTableAccordion({
   hasDefinitionOnly,
 }: DataCatalogTableAccordionProps) {
   const modelTable = driver.getTable(table.schemaName, table.tableName!);
-  const [open, setOpen] = useState(true);
-  const [virtualJoinColumn, setVirtualColumn] = useState<IVirtualJoinColumn>();
+  const [open, setOpen] = useState(false);
+  const [seletedColumn, setSelectedColumn] = useState<
+    OuterbaseDataCatalogComment | undefined
+  >();
+  const [visible, setVisible] = useState(false);
   const [openVirtualModal, setOpenVirtaulModal] = useState(false);
 
-  const [definition, setDefinition] = useState(modelTable?.definition || "");
-
-  const onUpdateTable = useCallback(() => {
-    if (
-      definition &&
-      definition.trim() &&
-      definition !== modelTable?.definition
-    ) {
-      driver.updateTable(table?.schemaName, table.tableName!, {
-        ...modelTable,
-        definition,
-      });
-    }
-  }, [driver, table, definition, modelTable]);
-
   const onDeletRelationship = useCallback(
     (id: string) => {
-      const newVirtualJoinColumn = modelTable?.virtualJoin?.filter(
-        (col) => col.id !== id
-      );
-      console.log("new coolumn update: ", newVirtualJoinColumn);
+      driver.deleteVirtualColumn(table.schemaName, table.tableName!, id);
+    },
+    [driver, modelTable, table]
+  );
+
+  const onToggleHideFromEzql = useCallback(
+    (
+      modelColumn?: OuterbaseDataCatalogComment,
+      cb?: () => void,
+      isVirtual?: boolean
+    ) => {
+      if (!modelColumn) return;
       driver
-        .updateTable(table?.schemaName, table.tableName!, {
-          ...modelTable,
-          virtualJoin: newVirtualJoinColumn,
-        })
-        .then(() => {
-          console.log("deleted sucessful");
+        .updateColumn(
+          table.schemaName,
+          table.tableName!,
+          {
+            flags: modelColumn.flags,
+            body: modelColumn.body,
+            column: modelColumn.column,
+            sample_data: modelColumn.sample_data,
+            schema: modelColumn.schema,
+            table: modelColumn.table,
+            virtual_key_column: modelColumn.virtualKeyColumn,
+            virtual_key_schema: modelColumn.virtualKeySchema,
+            virtual_key_table: modelColumn.virtualKeyTable,
+          },
+          modelColumn.id,
+          isVirtual
+        )
+        .finally(() => {
+          cb && cb();
         });
     },
-    [driver, modelTable, table]
+    [driver, table]
   );
 
+  const tableMetadata = useMemo(() => {
+    if (modelTable && modelTable.metadata) {
+      return modelTable.metadata;
+    }
+  }, [modelTable]);
+
   // Check if any of the column match?
   const matchColumns = useMemo(() => {
     if (!search || search.toLowerCase() === table.tableName!.toLowerCase()) {
@@ -101,7 +116,7 @@ export default function DataCatalogTableAccordion({
           table.tableName!,
           col.name
         );
-        return !!modelColumn?.definition;
+        return !!modelColumn?.body;
       })
       .filter(Boolean);
 
@@ -116,33 +131,56 @@ export default function DataCatalogTableAccordion({
 
   return (
     <>
-      <Dialog open={openVirtualModal} onOpenChange={setOpenVirtaulModal}>
-        <VirtualJoinModal
-          driver={driver}
-          column={virtualJoinColumn}
-          tableName={table.tableName!}
-          schemaName={table.schemaName}
-          onClose={() => {
-            setOpenVirtaulModal(false);
-            setVirtualColumn(undefined);
-          }}
-        />
+      <Dialog open={visible} onOpenChange={setVisible}>
+        <DialogContent>
+          {visible && (
+            <TableMetadataModal
+              driver={driver}
+              schemaName={table.schemaName}
+              tableName={table.tableName!}
+              data={tableMetadata}
+              onClose={() => {
+                setVisible(false);
+              }}
+            />
+          )}
+        </DialogContent>
       </Dialog>
+      <VirtualJoinModal
+        driver={driver}
+        data={seletedColumn}
+        open={openVirtualModal}
+        tableName={table.tableName!}
+        schemaName={table.schemaName}
+        onOpenChange={setOpenVirtaulModal}
+        onClose={() => {
+          setOpenVirtaulModal(false);
+          setSelectedColumn(undefined);
+        }}
+      />
       <Collapsible open={open} onOpenChange={setOpen}>
         <div className="rounded-xl border border-neutral-200 bg-white/50 p-3 hover:border-neutral-300 hover:bg-white dark:border-neutral-800/50 dark:bg-neutral-900 dark:text-white dark:hover:border-neutral-800 dark:hover:bg-neutral-800">
           <div className="flex p-2">
             <div>
-              <div className="font-bold">{table.tableName}</div>
-              <input
-                value={definition}
-                placeholder="No description"
-                onBlur={onUpdateTable}
-                onChange={(e) => {
-                  e.preventDefault();
-                  setDefinition(e.currentTarget.value);
-                }}
-                className="h-[30px] w-[150px] p-0 text-[13px] focus-visible:outline-none"
-              />
+              <div className="font-bold">
+                {tableMetadata ? tableMetadata.alias : table.tableName}
+              </div>
+
+              {tableMetadata && (
+                <div className="mt-1 mb-2">
+                  {tableMetadata.alias !== table.tableName && (
+                    <div className="text-xs font-medium text-neutral-500">
+                      The table formerly known as{" "}
+                      <span className="text-white italic">
+                        {table.tableName}
+                      </span>
+                    </div>
+                  )}
+                  {tableMetadata?.body && (
+                    <div className="mt-1">{tableMetadata?.body}</div>
+                  )}
+                </div>
+              )}
             </div>
             <CollapsibleTrigger className="flex-1" />
             <div className="flex items-center gap-2">
@@ -156,7 +194,7 @@ export default function DataCatalogTableAccordion({
                   <DropdownMenuItem
                     className="gap-1"
                     onClick={() => {
-                      setOpen(true);
+                      setVisible(true);
                     }}
                   >
                     Edit Metadata
@@ -167,7 +205,7 @@ export default function DataCatalogTableAccordion({
                   <DropdownMenuItem
                     onClick={() => {
                       setOpenVirtaulModal(true);
-                      setVirtualColumn(undefined);
+                      setSelectedColumn(undefined);
                     }}
                     className="gap-1"
                   >
@@ -197,6 +235,7 @@ export default function DataCatalogTableAccordion({
                   driver={driver}
                   search={search}
                   hasDefinitionOnly={hasDefinitionOnly}
+                  onToggleHideFromEzql={onToggleHideFromEzql}
                 />
               );
             })}
@@ -207,12 +246,13 @@ export default function DataCatalogTableAccordion({
                   {modelTable.virtualJoin?.map((column) => {
                     return (
                       <VirtualJoinColumn
-                        {...column}
+                        data={column}
                         key={column.id}
                         onEditRelationship={() => {
                           setOpenVirtaulModal(true);
-                          setVirtualColumn(column);
+                          setSelectedColumn(column);
                         }}
+                        onToggleHideFromEzql={onToggleHideFromEzql}
                         onDeletRelatinship={() => {
                           onDeletRelationship(column.id);
                         }}
diff --git a/src/extensions/data-catalog/data-catalog-table-column-modal.tsx b/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
index 14c9dc0d..bbb2326b 100644
--- a/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
@@ -8,9 +8,12 @@ import {
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { useDatabaseDriver } from "@/context/driver-provider";
+import { OuterbaseDataCatalogVirtualColumnInput } from "@/outerbase-cloud/api-type";
 import { MagicWand } from "@phosphor-icons/react";
+import { produce } from "immer";
 import { LucideLoader } from "lucide-react";
 import { useCallback, useState } from "react";
+import { defaultVirtualColumn } from "./constant";
 import DataCatalogDriver from "./driver";
 
 interface DataCatalogTableColumnModalProps {
@@ -20,7 +23,6 @@ interface DataCatalogTableColumnModalProps {
   columnName: string;
   onClose: () => void;
 }
-
 export default function DataCatalogTableColumnModal({
   driver,
   schemaName,
@@ -30,12 +32,36 @@ export default function DataCatalogTableColumnModal({
 }: DataCatalogTableColumnModalProps) {
   const modelColumn = driver.getColumn(schemaName, tableName, columnName);
   const { databaseDriver } = useDatabaseDriver();
-
-  const [definition, setDefinition] = useState(modelColumn?.definition ?? "");
-  const [samples, setSamples] = useState(
-    (modelColumn?.samples ?? []).join(",")
+  const [column, setColumn] = useState<OuterbaseDataCatalogVirtualColumnInput>(
+    () => {
+      if (modelColumn) {
+        return {
+          body: modelColumn.body,
+          column: modelColumn.column,
+          flags: modelColumn.flags,
+          sample_data: modelColumn.sample_data,
+          schema: modelColumn.schema,
+          table: modelColumn.table,
+          virtual_key_column: modelColumn.virtualKeyColumn,
+          virtual_key_schema: modelColumn.virtualKeySchema,
+          virtual_key_table: modelColumn.virtualKeyTable,
+        };
+      } else {
+        return {
+          ...defaultVirtualColumn,
+          flags: {
+            isActive: true,
+            isVirtualKey: false,
+          },
+          schema: schemaName,
+          table: tableName,
+          column: columnName,
+          virtual_key_schema: schemaName,
+          virtual_key_table: tableName,
+        };
+      }
+    }
   );
-
   const [loading, setLoading] = useState(false);
   const [sampleLoading, setSampleLoading] = useState(false);
 
@@ -46,40 +72,25 @@ export default function DataCatalogTableColumnModal({
         `SELECT DISTINCT ${databaseDriver.escapeId(columnName)} FROM ${databaseDriver.escapeId(schemaName)}.${databaseDriver.escapeId(tableName)} LIMIT 10`
       )
       .then((r) => {
-        setSamples(r.rows.map((row) => row[columnName]).join(", "));
+        setColumn((prev) =>
+          produce(prev, (draft) => {
+            draft.sample_data = r.rows.map((row) => row[columnName]).join(", ");
+          })
+        );
       })
       .finally(() => setSampleLoading(false));
   }, [databaseDriver, columnName, schemaName, tableName]);
 
   const onSaveUpdateColumn = useCallback(() => {
     setLoading(true);
-
     driver
-      .updateColumn(schemaName, tableName, columnName, {
-        definition,
-        samples:
-          samples && samples.trim()
-            ? samples.split(",").map((s) => s.trim())
-            : [],
-        hideFromEzql: modelColumn?.hideFromEzql ?? false,
-      })
-      .then((r) => {
-        console.log(r);
-      })
+      .updateColumn(schemaName, tableName, column, modelColumn?.id)
+      .then()
       .finally(() => {
         setLoading(false);
         onClose();
       });
-  }, [
-    driver,
-    modelColumn,
-    samples,
-    columnName,
-    onClose,
-    schemaName,
-    tableName,
-    definition,
-  ]);
+  }, [driver, column, onClose, schemaName, tableName]);
 
   return (
     <>
@@ -96,8 +107,14 @@ export default function DataCatalogTableColumnModal({
           <Label>Column Description</Label>
           <Textarea
             rows={4}
-            value={definition}
-            onChange={(e) => setDefinition(e.currentTarget.value)}
+            value={column.body}
+            onChange={(e) => {
+              setColumn((prev) =>
+                produce(prev, (draft) => {
+                  draft.body = e.target.value;
+                })
+              );
+            }}
             placeholder="Please provide the definition of a column. This is intended to enhance AI functionality."
           />
         </div>
@@ -122,8 +139,14 @@ export default function DataCatalogTableColumnModal({
           </div>
           <Textarea
             rows={4}
-            value={samples}
-            onChange={(e) => setSamples(e.currentTarget.value)}
+            value={column.sample_data}
+            onChange={(e) => {
+              setColumn((prev) => {
+                return produce(prev, (draft) => {
+                  draft.sample_data = e.target.value;
+                });
+              });
+            }}
             placeholder="Please provide the definition of a column. This is intended to enhance AI functionality."
           />
         </div>
diff --git a/src/extensions/data-catalog/data-catalog-table-column.tsx b/src/extensions/data-catalog/data-catalog-table-column.tsx
index e8b5994e..e51e65e5 100644
--- a/src/extensions/data-catalog/data-catalog-table-column.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-column.tsx
@@ -13,6 +13,7 @@ import {
   DatabaseTableSchema,
 } from "@/drivers/base-driver";
 import { cn } from "@/lib/utils";
+import { OuterbaseDataCatalogComment } from "@/outerbase-cloud/api-type";
 import {
   Edit3,
   EyeOff,
@@ -20,7 +21,7 @@ import {
   ToggleLeftIcon,
   ToggleRightIcon,
 } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import DataCatalogTableColumnModal from "./data-catalog-table-column-modal";
 import DataCatalogDriver from "./driver";
 
@@ -30,6 +31,10 @@ interface DataCatalogTableColumnProps {
   driver: DataCatalogDriver;
   search?: string;
   hasDefinitionOnly?: boolean;
+  onToggleHideFromEzql: (
+    column?: OuterbaseDataCatalogComment,
+    cb?: () => void
+  ) => void;
 }
 
 export default function DataCatalogTableColumn({
@@ -38,33 +43,49 @@ export default function DataCatalogTableColumn({
   driver,
   search,
   hasDefinitionOnly,
+  onToggleHideFromEzql,
 }: DataCatalogTableColumnProps) {
   const modelColumn = driver.getColumn(
     table.schemaName,
     table.tableName!,
     column.name
   );
+  const definition = modelColumn?.body;
 
-  const definition = modelColumn?.definition;
-  const sampleData = modelColumn?.samples ?? [];
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [hideFromEzql, setHideFromEzql] = useState<boolean>(() => {
-    return modelColumn?.hideFromEzql || true;
+    if (modelColumn?.flags) {
+      return modelColumn.flags.isActive;
+    }
+    return true;
   });
 
-  const onToggleHideFromEzql = useCallback(() => {
+  const handleClickToggle = useCallback(() => {
+    if (!modelColumn) return;
     setHideFromEzql(!hideFromEzql);
     setLoading(true);
-    driver
-      .updateColumn(table.schemaName, table.tableName!, column.name, {
-        ...modelColumn!,
-        hideFromEzql: !hideFromEzql,
-      })
-      .finally(() => {
+    onToggleHideFromEzql(
+      {
+        ...modelColumn,
+        flags: {
+          ...modelColumn.flags,
+          isActive: !hideFromEzql,
+        },
+      },
+      // call me back when finish update column
+      () => {
         setLoading(false);
-      });
-  }, [driver, table, hideFromEzql, modelColumn, column]);
+      }
+    );
+  }, [modelColumn]);
+
+  const sampleData = useMemo(() => {
+    if (modelColumn?.sample_data) {
+      return modelColumn.sample_data.split(",").map((s) => s.trim());
+    }
+    return [];
+  }, [modelColumn]);
 
   if (hasDefinitionOnly && !definition) {
     return null;
@@ -80,7 +101,7 @@ export default function DataCatalogTableColumn({
     >
       <Button
         disabled={loading}
-        onClick={onToggleHideFromEzql}
+        onClick={handleClickToggle}
         size={"icon"}
         variant="ghost"
       >
@@ -127,7 +148,7 @@ export default function DataCatalogTableColumn({
             <Edit3 className="h-4 w-4" />
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuItem className="gap-5" onClick={onToggleHideFromEzql}>
+          <DropdownMenuItem className="gap-5" onClick={handleClickToggle}>
             Hide from EZQL
             <div className="flex-1" />
             <EyeOff className="h-4 w-4" />
diff --git a/src/extensions/data-catalog/data-model-tab.tsx b/src/extensions/data-catalog/data-model-tab.tsx
index 1d2fb756..79358914 100644
--- a/src/extensions/data-catalog/data-model-tab.tsx
+++ b/src/extensions/data-catalog/data-model-tab.tsx
@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
 import { useConfig } from "@/context/config-provider";
 import { useSchema } from "@/context/schema-provider";
 import { DatabaseTableSchema } from "@/drivers/base-driver";
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import DataCatalogExtension from ".";
 import DataCatalogTableAccordion from "./data-catalog-table-accordion";
 
@@ -16,13 +16,13 @@ export default function DataCatalogModelTab() {
   const [selectedSchema, setSelectedSchema] = useState(currentSchemaName);
 
   const { extensions } = useConfig();
-
+  const [schemas, setSchemas] = useState<DatabaseTableSchema[]>([]);
   const dataCatalogExtension =
     extensions.getExtension<DataCatalogExtension>("data-catalog");
 
   const driver = dataCatalogExtension?.driver;
 
-  const currentSchema = useMemo(() => {
+  const onRefresh = useCallback(() => {
     if (!selectedSchema) return [];
     const result = (schema[selectedSchema] || [])
       .filter((table) => table.type === "table")
@@ -30,9 +30,32 @@ export default function DataCatalogModelTab() {
       .filter(Boolean) as DatabaseTableSchema[];
 
     result.sort((a, b) => a.tableName!.localeCompare(b.tableName!));
-    return result;
+
+    setSchemas(result);
   }, [schema, selectedSchema]);
 
+  useEffect(() => {
+    if (!driver) return;
+
+    const onRefresh = () => {
+      if (!selectedSchema) return [];
+      const result = (schema[selectedSchema] || [])
+        .filter((table) => table.type === "table")
+        .map((table) => table.tableSchema)
+        .filter(Boolean) as DatabaseTableSchema[];
+
+      result.sort((a, b) => a.tableName!.localeCompare(b.tableName!));
+
+      setSchemas(result);
+    };
+
+    onRefresh();
+
+    const unsubscribe = driver.addEventListener(onRefresh);
+
+    return () => unsubscribe;
+  }, [onRefresh, driver, schema, selectedSchema]);
+
   if (!driver) {
     return <div>Missing driver</div>;
   }
@@ -66,7 +89,7 @@ export default function DataCatalogModelTab() {
       </div>
 
       <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
-        {currentSchema.map((table) => (
+        {schemas.map((table) => (
           <DataCatalogTableAccordion
             search={search}
             key={table.tableName}
diff --git a/src/extensions/data-catalog/driver-inmemory.ts b/src/extensions/data-catalog/driver-inmemory.ts
index 102db4e2..9d20197e 100644
--- a/src/extensions/data-catalog/driver-inmemory.ts
+++ b/src/extensions/data-catalog/driver-inmemory.ts
@@ -1,8 +1,10 @@
+import {
+  OuterbaseDataCatalogComment,
+  OuterbaseDataCatalogDefinition,
+  OuterbaseDataCatalogVirtualColumnInput,
+} from "@/outerbase-cloud/api-type";
 import DataCatalogDriver, {
-  DataCatalogModelColumn,
-  DataCatalogModelColumnInput,
   DataCatalogModelTable,
-  DataCatalogModelTableInput,
   DataCatalogSchemas,
   DataCatalogTermDefinition,
 } from "./driver";
@@ -12,18 +14,19 @@ interface DataCatalogInmemoryDriverOptions {
 }
 
 export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
-  private schemas: DataCatalogSchemas;
   protected options: DataCatalogInmemoryDriverOptions;
-  private dataCatalog: DataCatalogTermDefinition[];
+  private schemas: DataCatalogSchemas;
+  private definitions: OuterbaseDataCatalogDefinition[];
+  private subscribers: Set<() => void> = new Set();
 
   constructor(
     schemas: DataCatalogSchemas,
-    dataCatalog: DataCatalogTermDefinition[],
+    definitions: OuterbaseDataCatalogDefinition[],
     options: DataCatalogInmemoryDriverOptions
   ) {
     this.schemas = schemas;
     this.options = options;
-    this.dataCatalog = dataCatalog;
+    this.definitions = definitions;
   }
 
   private async delay() {
@@ -34,65 +37,66 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
 
   async load(): Promise<{
     schemas: DataCatalogSchemas;
-    dataCatalog: DataCatalogTermDefinition[];
+    definitions: OuterbaseDataCatalogDefinition[];
   }> {
     await this.delay();
 
     return {
       schemas: this.schemas,
-      dataCatalog: this.dataCatalog,
+      definitions: this.definitions,
     };
   }
 
   async updateColumn(
     schemaName: string,
     tableName: string,
-    columnName: string,
-    data: DataCatalogModelColumnInput
-  ): Promise<DataCatalogModelColumn> {
+    data: OuterbaseDataCatalogVirtualColumnInput,
+    commentId?: string,
+    isVirtual?: boolean
+  ): Promise<OuterbaseDataCatalogComment> {
     await this.delay();
 
     const normalizedSchemaName = schemaName.toLowerCase();
     const normalizedTableName = tableName.toLowerCase();
-    const normalizedColumnName = columnName.toLowerCase();
-
-    if (!this.schemas[normalizedSchemaName]) {
-      this.schemas[normalizedSchemaName] = {};
-    }
-
-    const schemas = this.schemas[normalizedSchemaName];
-
-    if (!schemas[normalizedTableName]) {
-      schemas[normalizedTableName] = {
-        schemaName: normalizedSchemaName,
-        tableName: normalizedTableName,
-        columns: {},
-        definition: "",
-      };
-    }
 
-    const table = schemas[normalizedTableName];
-    if (!table.columns[normalizedColumnName]) {
-      table.columns[normalizedColumnName] = {
-        name: normalizedColumnName,
-        definition: "",
-        samples: [],
-        hideFromEzql: false,
-      };
+    if (
+      this.schemas[normalizedSchemaName] &&
+      this.schemas[normalizedSchemaName][normalizedTableName]
+    ) {
+      const table = this.schemas[normalizedSchemaName][normalizedTableName];
+
+      if (isVirtual) {
+        const index = table.virtualJoin.findIndex((vc) => vc.id === commentId);
+        if (index > -1) {
+          table.virtualJoin[index] = {
+            ...table.virtualJoin[index],
+            ...data,
+          };
+        } else {
+          table.virtualJoin?.push({
+            ...(data as unknown as OuterbaseDataCatalogComment),
+          });
+        }
+      } else {
+        table.columns[data.column] = {
+          ...table.columns[data.column],
+          ...data,
+        };
+      }
+      // notify update driver
+      this.notify();
     }
 
-    const column = table.columns[normalizedColumnName];
-    table.columns[normalizedColumnName] = { ...column, ...data };
-    return table.columns[normalizedColumnName];
+    return data as unknown as OuterbaseDataCatalogComment;
   }
 
   async updateTable(
     schemaName: string,
     tableName: string,
-    data: DataCatalogModelTableInput
-  ): Promise<DataCatalogModelTable> {
+    data: OuterbaseDataCatalogVirtualColumnInput,
+    commentId: string
+  ): Promise<DataCatalogModelTable | undefined> {
     await this.delay();
-
     const normalizedSchemaName = schemaName.toLowerCase();
     const normalizedTableName = tableName.toLowerCase();
 
@@ -107,17 +111,20 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
         schemaName: normalizedSchemaName,
         tableName: normalizedTableName,
         columns: {},
-        definition: "",
         virtualJoin: [],
       };
     }
     const table = schemas[normalizedTableName];
-    schemas[normalizedTableName] = {
+
+    this.schemas[schemaName][tableName] = {
       ...table,
-      ...data,
-      
+      metadata: {
+        ...data,
+        ...(commentId ? { commentId } : {}),
+      } as unknown as OuterbaseDataCatalogComment,
     };
 
+    this.notify();
     return schemas[normalizedTableName];
   }
 
@@ -125,11 +132,30 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     schemaName: string,
     tableName: string,
     columnName: string
-  ): DataCatalogModelColumn | undefined {
+  ): OuterbaseDataCatalogComment | undefined {
     const normalizedColumnName = columnName.toLowerCase();
     const table = this.getTable(schemaName, tableName);
     return table?.columns[normalizedColumnName];
   }
+  async deleteVirtualColumn(
+    schemaName: string,
+    tableName: string,
+    id: string
+  ): Promise<boolean> {
+    const normalizedSchemaName = schemaName.toLowerCase();
+    const normalizedTableName = tableName.toLowerCase();
+
+    if (
+      this.schemas[normalizedSchemaName] &&
+      this.schemas[normalizedSchemaName][normalizedTableName]
+    ) {
+      const table = this.schemas[normalizedSchemaName][normalizedTableName];
+      table.virtualJoin = table.virtualJoin?.filter((vc) => vc.id !== id) || [];
+      // notify update driver
+      this.notify();
+    }
+    return true;
+  }
 
   getTable(
     schemaName: string,
@@ -151,11 +177,11 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     return table;
   }
 
-  getTermDefinitions(): DataCatalogTermDefinition[] {
-    if (!this.dataCatalog) {
+  getTermDefinitions(): OuterbaseDataCatalogDefinition[] {
+    if (!this.definitions) {
       return [];
     }
-    return this.dataCatalog;
+    return this.definitions;
   }
 
   async updateTermDefinition(
@@ -163,18 +189,18 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
   ): Promise<DataCatalogTermDefinition | undefined> {
     await this.delay();
 
-    if (!this.dataCatalog) {
-      this.dataCatalog = [];
+    if (!this.definitions) {
+      this.definitions = [];
     }
 
-    const dataCatalog = this.dataCatalog;
+    const definitions = this.definitions;
 
-    const existingIndex = dataCatalog.findIndex((term) => term.id === data.id);
+    const existingIndex = definitions.findIndex((term) => term.id === data.id);
 
     if (existingIndex !== -1) {
-      dataCatalog[existingIndex] = { ...dataCatalog[existingIndex], ...data };
+      definitions[existingIndex] = { ...definitions[existingIndex], ...data };
     } else {
-      dataCatalog.unshift(data);
+      definitions.unshift(data as OuterbaseDataCatalogDefinition);
     }
 
     return data;
@@ -182,13 +208,27 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
 
   async deleteTermDefinition(id: string): Promise<boolean> {
     await this.delay();
-    if (!this.dataCatalog) return false;
+    if (!this.definitions) return false;
+
+    const definitions = this.definitions;
+    const initialLength = definitions.length;
+
+    this.definitions = definitions.filter((term) => term.id !== id);
 
-    const dataCatalog = this.dataCatalog;
-    const initialLength = dataCatalog.length;
+    return definitions.length < initialLength;
+  }
+
+  addEventListener(callback: () => void) {
+    this.subscribers.add(callback);
+    return () => this.removeEventListener(callback);
+  }
 
-    this.dataCatalog = dataCatalog.filter((term) => term.id !== id);
+  removeEventListener(callback: () => void) {
+    this.subscribers.delete(callback);
+  }
 
-    return dataCatalog.length < initialLength;
+  // Notify all subscribers
+  private notify() {
+    this.subscribers.forEach((callback) => callback());
   }
 }
diff --git a/src/extensions/data-catalog/driver.tsx b/src/extensions/data-catalog/driver.tsx
index ea6acb37..fa441e53 100644
--- a/src/extensions/data-catalog/driver.tsx
+++ b/src/extensions/data-catalog/driver.tsx
@@ -1,40 +1,22 @@
-export interface VirtualJoinColumn {
-  id: string;
-  schema: string;
-  tableName: string;
-  columnName: string;
-  virtualKeyColumn: string;
-  virtualKeySchema: string;
-  virtualKeyTable: string;
-  flags?: {
-    isActive: boolean;
-    isVirtual: boolean;
-  };
-}
-export interface DataCatalogModelColumnInput {
-  hideFromEzql: boolean;
-  definition: string;
-  samples: string[];
-}
+import {
+  OuterbaseDataCatalogComment,
+  OuterbaseDataCatalogDefinition,
+  OuterbaseDataCatalogVirtualColumnInput,
+} from "@/outerbase-cloud/api-type";
 
-export interface DataCatalogModelColumn extends DataCatalogModelColumnInput {
+export interface DataCatalogTermDefinition {
+  id?: string;
   name: string;
-}
-
-export interface DataCatalogModelTableInput {
   definition?: string;
-  virtualJoin?: VirtualJoinColumn[];
-}
-export interface DataCatalogTermDefinition extends DataCatalogModelTableInput {
-  id: string;
-  name: string;
-  otherName?: string;
+  otherNames?: string;
 }
-export interface DataCatalogModelTable extends DataCatalogModelTableInput {
+export interface DataCatalogModelTable {
   schemaName: string;
   tableName: string;
-  columns: Record<string, DataCatalogModelColumn>;
-  virtualJoin?: VirtualJoinColumn[];
+
+  virtualJoin: OuterbaseDataCatalogComment[];
+  columns: Record<string, OuterbaseDataCatalogComment>;
+  metadata?: OuterbaseDataCatalogComment;
 }
 
 export type DataCatalogSchemas = Record<
@@ -45,27 +27,28 @@ export type DataCatalogSchemas = Record<
 export default abstract class DataCatalogDriver {
   abstract load(): Promise<{
     schemas: DataCatalogSchemas;
-    dataCatalog: DataCatalogTermDefinition[];
+    definitions: OuterbaseDataCatalogDefinition[];
   }>;
-
   abstract updateColumn(
     schemaName: string,
     tableName: string,
-    columnName: string,
-    data: DataCatalogModelColumnInput
-  ): Promise<DataCatalogModelColumn>;
+    data: OuterbaseDataCatalogVirtualColumnInput,
+    commentId?: string,
+    isVirtual?: boolean
+  ): Promise<OuterbaseDataCatalogComment>;
 
   abstract updateTable(
     schemaName: string,
     tableName: string,
-    data: DataCatalogModelTableInput
-  ): Promise<DataCatalogModelTable>;
+    data: OuterbaseDataCatalogVirtualColumnInput,
+    commentId?: string
+  ): Promise<DataCatalogModelTable | undefined>;
 
   abstract getColumn(
     schemaName: string,
     tableName: string,
     columnName: string
-  ): DataCatalogModelColumn | undefined;
+  ): OuterbaseDataCatalogComment | undefined;
 
   abstract getTable(
     schemaName: string,
@@ -76,7 +59,16 @@ export default abstract class DataCatalogDriver {
     data: DataCatalogTermDefinition
   ): Promise<DataCatalogTermDefinition | undefined>;
 
-  abstract getTermDefinitions(): DataCatalogTermDefinition[] | undefined;
+  abstract getTermDefinitions(): OuterbaseDataCatalogDefinition[];
 
   abstract deleteTermDefinition(id: string): Promise<boolean>;
+
+  abstract deleteVirtualColumn(
+    schemaName: string,
+    tableName: string,
+    id: string
+  ): Promise<boolean>;
+
+  abstract addEventListener(cb: () => void): void;
+  abstract removeEventListener(cb: () => void): void;
 }
diff --git a/src/extensions/data-catalog/table-metadata-modal.tsx b/src/extensions/data-catalog/table-metadata-modal.tsx
new file mode 100644
index 00000000..f58bce69
--- /dev/null
+++ b/src/extensions/data-catalog/table-metadata-modal.tsx
@@ -0,0 +1,148 @@
+import { Button } from "@/components/ui/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  OuterbaseDataCatalogComment,
+  OuterbaseDataCatalogVirtualColumnInput,
+} from "@/outerbase-cloud/api-type";
+import { produce } from "immer";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+import DataCatalogDriver from "./driver";
+
+interface DataCatalogTableColumnModalProps {
+  driver: DataCatalogDriver;
+  schemaName: string;
+  tableName: string;
+  onClose: () => void;
+  data?: OuterbaseDataCatalogComment;
+}
+
+interface TableMetadataInput {
+  alias: string;
+  body: string;
+  flags: { isActive: boolean; isVirtualKey: boolean };
+  sample_data: string;
+  schema: string;
+  table: string;
+  unit: string | null;
+  virtual_key_column: string;
+  virtual_key_schema: string;
+  virtual_key_table: string;
+}
+
+const defaultMetadata: TableMetadataInput = {
+  alias: "",
+  body: "",
+  flags: { isActive: true, isVirtualKey: false },
+  sample_data: "",
+  schema: "",
+  table: "",
+  unit: null,
+  virtual_key_column: "",
+  virtual_key_schema: "",
+  virtual_key_table: "",
+};
+export default function TableMetadataModal({
+  driver,
+  schemaName,
+  tableName,
+  onClose,
+  data,
+}: DataCatalogTableColumnModalProps) {
+  const [metadataInput, setMetadataInput] = useState<TableMetadataInput>(() => {
+    if (data) {
+      return {
+        alias: data.alias || "",
+        body: data.body,
+        flags: data.flags,
+        sample_data: data.sample_data,
+        schema: data.schema,
+        table: data.table,
+        unit: data.unit,
+        virtual_key_column: "",
+        virtual_key_schema: "",
+        virtual_key_table: "",
+      };
+    }
+    return {
+      ...defaultMetadata,
+      alias: tableName,
+    };
+  });
+
+  const [loading, setLoading] = useState(false);
+
+  const onSaveUpdateColumn = useCallback(() => {
+    setLoading(true);
+    const metaInput = {
+      ...metadataInput,
+      alias: metadataInput.alias || tableName,
+    } as unknown as OuterbaseDataCatalogVirtualColumnInput;
+
+    driver
+      .updateTable(schemaName, tableName, metaInput, data?.id)
+      .finally(() => {
+        setLoading(false);
+        onClose();
+      });
+  }, [driver, onClose, metadataInput, schemaName, tableName]);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Add Table Metadata: {tableName}</DialogTitle>
+      </DialogHeader>
+      <DialogDescription>Add metadata to your...</DialogDescription>
+      <div className="mt-2 flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <Label>Table Pseudonym</Label>
+          <Input
+            value={metadataInput.alias}
+            onChange={(e) => {
+              setMetadataInput((prev) =>
+                produce(prev, (draft) => {
+                  draft.alias = e.target.value;
+                })
+              );
+            }}
+            placeholder="Add a Pseudonym"
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Label>Table Description</Label>
+          <Textarea
+            value={metadataInput.body}
+            rows={4}
+            onChange={(e) => {
+              setMetadataInput((prev) => {
+                return produce(prev, (draft) => {
+                  draft.body = e.target.value;
+                });
+              });
+            }}
+            placeholder="Add a description"
+          />
+        </div>
+      </div>
+
+      <DialogFooter>
+        <Button disabled={loading} onClick={onSaveUpdateColumn}>
+          {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
+          Save
+        </Button>
+        <Button variant="secondary" onClick={onClose}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
diff --git a/src/extensions/data-catalog/table-result-header.tsx b/src/extensions/data-catalog/table-result-header.tsx
index 858c54ba..39155fe6 100644
--- a/src/extensions/data-catalog/table-result-header.tsx
+++ b/src/extensions/data-catalog/table-result-header.tsx
@@ -17,16 +17,24 @@ export default function DataCatalogResultHeader({
   driver,
 }: DataCatalogResultHeaderProps) {
   const column = driver.getColumn(schemaName, tableName, columnName);
-  const [definition, setDefinition] = useState(column?.definition ?? "");
+  const [definition, setDefinition] = useState(() => column?.body ?? "");
   const [loading, setLoading] = useState(false);
 
   const onSaveClicked = useCallback(() => {
+    if (!column) return;
     setLoading(true);
+
     driver
-      .updateColumn(schemaName, tableName, columnName, {
-        definition,
-        hideFromEzql: column?.hideFromEzql ?? false,
-        samples: column?.samples ?? [],
+      .updateColumn(schemaName, tableName, {
+        flags: column.flags,
+        body: definition,
+        column: column.column,
+        sample_data: column.sample_data,
+        schema: column.schema,
+        table: column.table,
+        virtual_key_column: column.virtualKeyColumn,
+        virtual_key_schema: column.virtualKeySchema,
+        virtual_key_table: column.virtualKeyTable,
       })
       .then()
       .catch()
diff --git a/src/extensions/data-catalog/term-definition-list.tsx b/src/extensions/data-catalog/term-definition-list.tsx
index 4b1bd4b9..720298bc 100644
--- a/src/extensions/data-catalog/term-definition-list.tsx
+++ b/src/extensions/data-catalog/term-definition-list.tsx
@@ -1,9 +1,9 @@
+import { OuterbaseDataCatalogDefinition } from "@/outerbase-cloud/api-type";
 import { Edit3 } from "lucide-react";
-import { DataCatalogTermDefinition } from "./driver";
 
 interface Props {
-  onSelect: (item: DataCatalogTermDefinition) => void;
-  data: DataCatalogTermDefinition[];
+  onSelect: (item: OuterbaseDataCatalogDefinition) => void;
+  data: OuterbaseDataCatalogDefinition[];
 }
 export default function TermDefinitionList({ data, onSelect }: Props) {
   return (
@@ -18,9 +18,9 @@ export default function TermDefinitionList({ data, onSelect }: Props) {
             <div className="gap-5">
               <div className="text-lg font-bold">{item.name}</div>
               <div>{item.definition}</div>
-              {item.otherName && (
+              {item.otherNames && (
                 <div className="mt-3 text-sm">
-                  Also known as: {item.otherName}
+                  Also known as: {item.otherNames}
                 </div>
               )}
             </div>
diff --git a/src/extensions/data-catalog/virtual-column.tsx b/src/extensions/data-catalog/virtual-column.tsx
index 0d931b70..35b45f55 100644
--- a/src/extensions/data-catalog/virtual-column.tsx
+++ b/src/extensions/data-catalog/virtual-column.tsx
@@ -7,6 +7,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import { OuterbaseDataCatalogComment } from "@/outerbase-cloud/api-type";
 import {
   Edit3,
   LucideMoreHorizontal,
@@ -14,23 +15,52 @@ import {
   ToggleRightIcon,
   Trash,
 } from "lucide-react";
-import { useState } from "react";
-import { VirtualJoinColumn as IVirtualJoinColumn } from "./driver";
+import { useCallback, useState } from "react";
 
-interface Props extends IVirtualJoinColumn {
+interface Props {
+  data: OuterbaseDataCatalogComment;
   onDeletRelatinship: () => void;
   onEditRelationship: () => void;
+  onToggleHideFromEzql: (
+    column?: OuterbaseDataCatalogComment,
+    cb?: () => void,
+    isVirtual?: boolean
+  ) => void;
 }
 
 export default function VirtualJoinColumn({
-  flags,
-  virtualKeyColumn,
-  virtualKeySchema,
-  virtualKeyTable,
+  data,
+  onToggleHideFromEzql,
   onEditRelationship,
   onDeletRelatinship,
 }: Props) {
-  const [isActive, setIsActive] = useState<boolean>(flags?.isActive || true);
+  const [loading, setLoading] = useState(false);
+  const [isActive, setIsActive] = useState<boolean>(() => {
+    if (data.flags) {
+      return data?.flags.isActive;
+    }
+    return true;
+  });
+
+  const handleClickToggle = useCallback(() => {
+    setIsActive(!isActive);
+    setLoading(true);
+    onToggleHideFromEzql(
+      {
+        ...data,
+        flags: {
+          ...data.flags,
+          isActive: !isActive,
+        },
+      },
+      // call me back when finish update column
+      () => {
+        setLoading(false);
+      },
+      true
+    );
+  }, [data]);
+
   return (
     <div
       className={cn(
@@ -39,7 +69,8 @@ export default function VirtualJoinColumn({
       )}
     >
       <Button
-        onClick={() => setIsActive(!isActive)}
+        disabled={loading}
+        onClick={handleClickToggle}
         size={"icon"}
         variant="ghost"
       >
@@ -50,9 +81,12 @@ export default function VirtualJoinColumn({
         )}
       </Button>
 
-      <div className="flex w-[150px] items-center p-2">{virtualKeyColumn}</div>
-      <div className="flex w-[150px] items-center p-2">{virtualKeySchema}</div>
-      <div className="flex w-[150px] items-center p-2">{virtualKeyTable}</div>
+      <div className="flex w-[150px] items-center p-2">
+        Virtual Relationship
+      </div>
+      <div className="flex w-[150px] items-center p-2">{data.column}</div>
+      <div className="flex w-[150px] items-center p-2">{data.table}</div>
+      <div className="flex w-[150px] items-center p-2">{data.body}</div>
       <div className="flex-1" />
       {
         //=================
diff --git a/src/extensions/data-catalog/virtual-join-modal.tsx b/src/extensions/data-catalog/virtual-join-modal.tsx
index fba9ee0a..2feb45aa 100644
--- a/src/extensions/data-catalog/virtual-join-modal.tsx
+++ b/src/extensions/data-catalog/virtual-join-modal.tsx
@@ -2,6 +2,7 @@ import TableColumnCombobox from "@/components/gui/table-combobox/TableColumnComb
 import TableCombobox from "@/components/gui/table-combobox/TableCombobox";
 import { Button } from "@/components/ui/button";
 import {
+  Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -9,155 +10,187 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import {
+  OuterbaseDataCatalogComment,
+  OuterbaseDataCatalogVirtualColumnInput,
+} from "@/outerbase-cloud/api-type";
+import { produce } from "immer";
 import { LucideLoader } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import DataCatalogDriver, {
-  DataCatalogModelTableInput,
-  VirtualJoinColumn,
-} from "./driver";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { defaultVirtualColumn } from "./constant";
+import DataCatalogDriver from "./driver";
 
 interface Props {
+  open: boolean;
   driver: DataCatalogDriver;
   schemaName: string;
   tableName: string;
-  column?: VirtualJoinColumn;
+  data?: OuterbaseDataCatalogComment;
   onClose: () => void;
+  onOpenChange: (open: boolean) => void;
 }
+
 export default function VirtualJoinModal({
+  open,
   tableName,
   schemaName,
   driver,
-  column,
+  data,
   onClose,
+  onOpenChange,
 }: Props) {
   const [loading, setLoading] = useState(false);
-  const [virtualKeySchema, setVirtualKeySchema] = useState<
-    string | undefined
-  >();
-
-  const [virtualKeyTable, setVirtualKeyTable] = useState<string | undefined>();
-  const [virtualKeyColumn, setVirtualKeyColumn] = useState<
-    string | undefined
-  >();
+  const [virtualColumnInput, setVirtaulColumnInput] =
+    useState<OuterbaseDataCatalogVirtualColumnInput>(() => {
+      return {
+        ...defaultVirtualColumn,
+        schema: schemaName,
+        virtual_key_schema: schemaName,
+        virtual_key_table: tableName,
+      };
+    });
 
   const clear = useCallback(() => {
-    setVirtualKeyColumn(undefined);
-    setVirtualKeySchema(undefined);
-    setVirtualKeyTable(undefined);
+    setVirtaulColumnInput(defaultVirtualColumn);
   }, []);
 
   useEffect(() => {
-    if (column) {
-      setVirtualKeyColumn(column.virtualKeyColumn);
-      setVirtualKeySchema(column.virtualKeySchema);
-      setVirtualKeyTable(column.virtualKeyTable);
-    } else {
-      clear();
+    if (data) {
+      setVirtaulColumnInput({
+        body: data.body,
+        column: data.column,
+        flags: data.flags,
+        sample_data: data.sample_data,
+        schema: data.schema,
+        table: data.table,
+        virtual_key_column: data.virtualKeyColumn,
+        virtual_key_schema: data.virtualKeySchema,
+        virtual_key_table: data.virtualKeyTable,
+      });
     }
-  }, [column, clear]);
+  }, [data]);
 
-  const createVirtualJoin = () => {
+  const createUpdateVirtualJoin = useCallback(() => {
+    if (!driver) return;
     setLoading(true);
-
-    const modelTable = driver.getTable(schemaName, tableName);
-    const virtualJoin = [...(modelTable?.virtualJoin || [])];
-
-    const newVirtualJoin = {
-      id: column?.id || new Date().toISOString(),
-      schema: schemaName,
-      tableName: tableName,
-      columnName: virtualKeyColumn || "",
-      virtualKeyColumn: virtualKeyColumn || "",
-      virtualKeySchema: virtualKeySchema || "",
-      virtualKeyTable: virtualKeyTable || "",
-    };
-
-    if (column?.id) {
-      const index = virtualJoin.findIndex((col) => col.id === column.id);
-      if (index > -1) {
-        virtualJoin[index] = newVirtualJoin;
-      }
-    } else {
-      virtualJoin.push(newVirtualJoin);
-    }
-
-    const updatedData: DataCatalogModelTableInput = {
-      ...modelTable,
-      virtualJoin,
-    };
-
     driver
-      ?.updateTable(schemaName, tableName, updatedData)
-      .then((r) => console.log("Updated successfully:", r))
-      .catch((error) => {
-        console.error("Error updating virtual join:", error);
-      })
+      .updateColumn(
+        schemaName,
+        tableName,
+        virtualColumnInput,
+        data ? data.id : undefined,
+        true // make it true for update update virtual column
+      )
+      .then()
+      .catch()
       .finally(() => {
         setLoading(false);
         onClose();
         clear();
       });
-  };
+  }, [driver, schemaName, tableName, virtualColumnInput, data, clear, onClose]);
 
+  const disabled = useMemo(
+    () =>
+      !virtualColumnInput.body ||
+      !virtualColumnInput.table ||
+      !virtualColumnInput.column,
+    [virtualColumnInput]
+  );
   return (
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>
-          {column ? "Edit" : "Add Relationship"} to {tableName}
-        </DialogTitle>
-      </DialogHeader>
-      <DialogDescription>
-        Use virtual relationships to connect fields that don&apos;t have a
-        direct foreign key link. For example, if two tables should be related by
-        email or title but don&apos;t have a formal foreign key, use these
-        virtual relationships to link them.
-      </DialogDescription>
-      <div className="mt-2 flex flex-col gap-4">
-        <div className="flex flex-col gap-2">
-          <Label>Column</Label>
-        </div>
-        <TableColumnCombobox
-          value={virtualKeySchema}
-          schemaName={schemaName}
-          tableName={tableName}
-          onChange={setVirtualKeySchema}
-        />
-
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center justify-between gap-2">
-            <Label>Relationship Table</Label>
-          </div>
-          <TableCombobox
-            value={virtualKeyTable}
-            schemaName={schemaName}
-            onChange={setVirtualKeyTable}
-          />
-        </div>
-
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center justify-between gap-2">
-            <Label>Relationship Column</Label>
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          setVirtaulColumnInput({
+            ...defaultVirtualColumn,
+            schema: schemaName,
+            virtual_key_schema: schemaName,
+            virtual_key_table: tableName,
+          });
+        }
+        onOpenChange(open);
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {data ? "Edit" : "Add Relationship"} to {tableName}
+          </DialogTitle>
+        </DialogHeader>
+        <DialogDescription>
+          Use virtual relationships to connect fields that don&apos;t have a
+          direct foreign key link. For example, if two tables should be related
+          by email or title but don&apos;t have a formal foreign key, use these
+          virtual relationships to link them.
+        </DialogDescription>
+        <div className="mt-2 flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <Label>Column</Label>
           </div>
           <TableColumnCombobox
-            value={virtualKeyColumn}
+            value={virtualColumnInput.body}
             schemaName={schemaName}
             tableName={tableName}
-            onChange={setVirtualKeyColumn}
+            onChange={(value) => {
+              setVirtaulColumnInput((prev) =>
+                produce(prev, (draft) => {
+                  draft.body = value;
+                })
+              );
+            }}
           />
+
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between gap-2">
+              <Label>Relationship Table</Label>
+            </div>
+            <TableCombobox
+              value={virtualColumnInput.table}
+              schemaName={schemaName}
+              onChange={(value) => {
+                setVirtaulColumnInput((prev) =>
+                  produce(prev, (draft) => {
+                    draft.table = value;
+                    draft.column = draft.column !== value ? "" : draft.column;
+                  })
+                );
+              }}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between gap-2">
+              <Label>Relationship Column</Label>
+            </div>
+            <TableColumnCombobox
+              value={virtualColumnInput.column}
+              schemaName={schemaName}
+              tableName={virtualColumnInput.table}
+              onChange={(value) => {
+                setVirtaulColumnInput((prev) =>
+                  produce(prev, (draft) => {
+                    draft.column = value;
+                    draft.virtual_key_column = value;
+                  })
+                );
+              }}
+            />
+          </div>
         </div>
-      </div>
 
-      <DialogFooter>
-        <Button
-          variant="ghost"
-          disabled={!virtualKeyColumn || !virtualKeySchema || !virtualKeyTable}
-          onClick={createVirtualJoin}
-        >
-          {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
-          {column ? "Edit Relationship" : "Create Virtual Join"}
-        </Button>
-        <div className="flex-1" />
-      </DialogFooter>
-    </DialogContent>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            disabled={disabled}
+            onClick={createUpdateVirtualJoin}
+          >
+            {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
+            {data ? "Edit Relationship" : "Create Virtual Join"}
+          </Button>
+          <div className="flex-1" />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index 73982092..61c9e54a 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -3,6 +3,7 @@ import { ColumnHeader, ResultStat } from "@outerbase/sdk-transform";
 export interface OuterbaseDatabaseConfig {
   workspaceId: string;
   sourceId: string;
+  baseId?: string;
 }
 
 export class OuterbaseAPIError extends Error {
@@ -165,3 +166,95 @@ export interface OuterbaseAPIDashboardListResponse {
 export interface OuterbaseAPIQueryListResponse {
   items: OuterbaseAPIQuery[];
 }
+
+export interface OuterbaseDataCatalogFlag {
+  isActive: boolean;
+  isVirtualKey: boolean;
+}
+export interface OuterbaseDataCatalogModelColumn {
+  character_maximum_length: string;
+  default: string;
+  is_nullable: boolean;
+  model: string;
+  name: string;
+  position: number;
+  type: string;
+}
+
+export interface OuterbaseDataCatalogModelConstraint {
+  column: string;
+  model: string;
+  name: string;
+  table: string;
+  type: string;
+  columns: OuterbaseDataCatalogModelColumn[];
+}
+
+export interface OuterbaseDataCatalogSchemas {
+  model: string;
+  name: string;
+  schema: string;
+  type: string;
+  columns: OuterbaseDataCatalogModelColumn[];
+  constraints: OuterbaseDataCatalogModelConstraint[];
+}
+
+export interface OuterbaseDataCatalogComment {
+  alias: string | null;
+  body: string;
+  column: string;
+  created_at: string;
+  flags: OuterbaseDataCatalogFlag;
+  id: string;
+  model: string;
+  sample_data: string;
+  schema: string;
+  source_id: string;
+  table: string;
+  unit: string | null;
+  updated_at: string;
+  virtualKeyColumn: string;
+  virtualKeySchema: string;
+  virtualKeyTable: string;
+}
+
+export interface OuterbaseDataCatalogResponse<T = unknown> {
+  items: T;
+  count: number;
+  order: { field: string; dir: string };
+  pagination: { page: number; size: number; total: number };
+}
+export interface OuterbaseDataCatalogDefinition {
+  connection_id: string | null;
+  createdAt: string;
+  created_at: string;
+  created_user_id: string;
+  definition: string;
+  id: string;
+  last_used_at: null;
+  model: string;
+  name: string;
+  otherNames: string;
+  updatedAt: string;
+  updated_at: string;
+  updated_by_user_id: string;
+  workspace_id: string;
+}
+
+export interface OuterbaseDefinitionInput {
+  name: string;
+  definition: string;
+  otherNames?: string;
+}
+
+export interface OuterbaseDataCatalogVirtualColumnInput {
+  body: string;
+  column: string;
+  flags: OuterbaseDataCatalogFlag;
+  sample_data: string;
+  schema: string;
+  table: string;
+  virtual_key_column: string;
+  virtual_key_schema: string;
+  virtual_key_table: string;
+}
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index c0d7c034..7127e104 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -11,6 +11,12 @@ import {
   OuterbaseAPISession,
   OuterbaseAPIUser,
   OuterbaseAPIWorkspaceResponse,
+  OuterbaseDataCatalogComment,
+  OuterbaseDataCatalogDefinition,
+  OuterbaseDataCatalogResponse,
+  OuterbaseDataCatalogSchemas,
+  OuterbaseDataCatalogVirtualColumnInput,
+  OuterbaseDefinitionInput,
 } from "./api-type";
 
 export async function requestOuterbase<T = unknown>(
@@ -175,22 +181,22 @@ export async function createOuterbaseQuery(
 }
 
 export async function deleteOuterbaseQuery(
-  worksaceId: string,
+  workspaceId: string,
   queryId: string
 ) {
   return requestOuterbase(
-    `/api/v1/workspace/${worksaceId}/query/${queryId}`,
+    `/api/v1/workspace/${workspaceId}/query/${queryId}`,
     "DELETE"
   );
 }
 
 export async function updateOuterbaseQuery(
-  worksaceId: string,
+  workspaceId: string,
   queryId: string,
   options: { name: string; query: string }
 ) {
   return requestOuterbase<OuterbaseAPIQuery>(
-    `/api/v1/workspace/${worksaceId}/query/${queryId}`,
+    `/api/v1/workspace/${workspaceId}/query/${queryId}`,
     "PUT",
     options
   );
@@ -230,3 +236,124 @@ export async function getOuterbaseEmbedChart(
 
   return await result.json();
 }
+
+export async function getOuterbaseSchemas(
+  workspaceId: string,
+  sourceId: string,
+  baseId?: string
+) {
+  return await requestOuterbase<Record<string, OuterbaseDataCatalogSchemas[]>>(
+    `/api/v1/workspace/${workspaceId}/source/${sourceId}/schema?baseId=${baseId}`
+  );
+}
+
+export async function getOuterbaseBaseComments(
+  workspaceId: string,
+  sourceId: string,
+  baseId: string,
+  size: number = 1000
+) {
+  return await requestOuterbase<
+    OuterbaseDataCatalogResponse<OuterbaseDataCatalogComment[]>
+  >(
+    `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment?size=${size}&baseId=${baseId}`
+  );
+}
+
+export async function getOuterbaseDefinitions(
+  workspaceId: string,
+  baseId: string
+) {
+  return await requestOuterbase<
+    OuterbaseDataCatalogResponse<OuterbaseDataCatalogDefinition[]>
+  >(`/api/v1/workspace/${workspaceId}/base/${baseId}/definition`);
+}
+
+export async function updateOuerbaseDefinition(
+  workspaceId: string,
+  baseId: string,
+  definitionId: string,
+  data: OuterbaseDefinitionInput
+) {
+  const result = await requestOuterbase<OuterbaseDataCatalogDefinition>(
+    `/api/v1/workspace/${workspaceId}/base/${baseId}/definition/${definitionId}`,
+    "PUT",
+    data
+  );
+
+  return result;
+}
+export async function createOuterbaseDefinition(
+  workspaceId: string,
+  baseId: string,
+  data: OuterbaseDefinitionInput
+) {
+  const result = await requestOuterbase<OuterbaseDataCatalogDefinition>(
+    `/api/v1/workspace/${workspaceId}/base/${baseId}/definition`,
+    "POST",
+    {
+      base_id: baseId,
+      ...data,
+    }
+  );
+
+  return result;
+}
+
+export async function deleteOuterbaseDefinition(
+  workspaceId: string,
+  baseId: string,
+  definitionId: string
+) {
+  const result = await requestOuterbase<OuterbaseAPIResponse>(
+    `/api/v1/workspace/${workspaceId}/base/${baseId}/definition/${definitionId}`,
+    "DELETE"
+  );
+
+  return result;
+}
+
+export async function updateOuterbaseDataCatalogVirtualColumn(
+  workspaceId: string,
+  sourceId: string,
+  commentId: string,
+  data: OuterbaseDataCatalogVirtualColumnInput
+) {
+  const result = await requestOuterbase<OuterbaseDataCatalogComment>(
+    `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment/${commentId}`,
+    "PUT",
+    data
+  );
+
+  return result;
+}
+
+export async function createOuterbaseDataCatalogVirtualColumn(
+  workspaceId: string,
+  sourceId: string,
+  data: OuterbaseDataCatalogVirtualColumnInput
+) {
+  const result = await requestOuterbase<OuterbaseDataCatalogComment>(
+    `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment`,
+    "POST",
+    data
+  );
+
+  return result;
+}
+
+export async function deleteOutebaseDataCatalogVirtualColumn(
+  workspaceId: string,
+  sourceId: string,
+  commentId: string
+) {
+  try {
+    await requestOuterbase<boolean>(
+      `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment/${commentId}`,
+      "DELETE"
+    );
+    return true;
+  } catch {
+    return false;
+  }
+}
diff --git a/src/outerbase-cloud/data-catalog-driver.ts b/src/outerbase-cloud/data-catalog-driver.ts
new file mode 100644
index 00000000..5f3f516d
--- /dev/null
+++ b/src/outerbase-cloud/data-catalog-driver.ts
@@ -0,0 +1,299 @@
+import DataCatalogDriver, {
+  DataCatalogModelTable,
+  DataCatalogSchemas,
+  DataCatalogTermDefinition,
+} from "@/extensions/data-catalog/driver";
+import {
+  createOuterbaseDataCatalogVirtualColumn,
+  createOuterbaseDefinition,
+  deleteOutebaseDataCatalogVirtualColumn,
+  deleteOuterbaseDefinition,
+  getOuterbaseBaseComments,
+  getOuterbaseDefinitions,
+  getOuterbaseSchemas,
+  updateOuerbaseDefinition,
+  updateOuterbaseDataCatalogVirtualColumn,
+} from "./api";
+import {
+  OuterbaseDatabaseConfig,
+  OuterbaseDataCatalogComment,
+  OuterbaseDataCatalogDefinition,
+  OuterbaseDataCatalogVirtualColumnInput,
+} from "./api-type";
+import { transformOuterbaseSchema } from "./util";
+
+export default class DataCatalogOuterbaseDriver implements DataCatalogDriver {
+  private schemas: DataCatalogSchemas = {};
+  private definitions: OuterbaseDataCatalogDefinition[] = [];
+  protected config: OuterbaseDatabaseConfig;
+  private subscribers: Set<() => void> = new Set();
+
+  constructor(config: OuterbaseDatabaseConfig) {
+    this.config = config;
+  }
+
+  async load(): Promise<{
+    schemas: DataCatalogSchemas;
+    definitions: OuterbaseDataCatalogDefinition[];
+  }> {
+    const { sourceId, workspaceId, baseId } = this.config;
+    const [schemas, comments, definition] = await Promise.all([
+      getOuterbaseSchemas(workspaceId, sourceId, baseId),
+      getOuterbaseBaseComments(workspaceId, sourceId, baseId!),
+      getOuterbaseDefinitions(workspaceId, baseId!),
+    ]);
+    const transformedSchemas = transformOuterbaseSchema(
+      schemas,
+      comments.items
+    );
+    this.schemas = transformedSchemas;
+    this.definitions = definition.items;
+    return {
+      schemas: this.schemas,
+      definitions: this.definitions,
+    };
+  }
+
+  private async createUpdateColumn(
+    data: OuterbaseDataCatalogVirtualColumnInput,
+    id?: string
+  ) {
+    if (id) {
+      return await updateOuterbaseDataCatalogVirtualColumn(
+        this.config.workspaceId,
+        this.config.sourceId,
+        id,
+        data
+      );
+    } else {
+      return await createOuterbaseDataCatalogVirtualColumn(
+        this.config.workspaceId,
+        this.config.sourceId,
+        data
+      );
+    }
+  }
+
+  async updateColumn(
+    schemaName: string,
+    tableName: string,
+    data: OuterbaseDataCatalogVirtualColumnInput,
+    commentId?: string,
+    isVirtual?: boolean
+  ): Promise<OuterbaseDataCatalogComment> {
+    const result = await this.createUpdateColumn(data, commentId);
+
+    if (result) {
+      const normalizedSchemaName = schemaName.toLowerCase();
+      const normalizedTableName = tableName.toLowerCase();
+
+      if (
+        this.schemas[normalizedSchemaName] &&
+        this.schemas[normalizedSchemaName][normalizedTableName]
+      ) {
+        const table = this.schemas[normalizedSchemaName][normalizedTableName];
+
+        if (isVirtual) {
+          const index = table.virtualJoin.findIndex(
+            (vc) => vc.id === commentId
+          );
+          if (index > -1) {
+            table.virtualJoin[index] = {
+              ...table.virtualJoin[index],
+              ...result,
+            };
+          } else {
+            table.virtualJoin?.push(result);
+          }
+        } else {
+          table.columns[data.column] = {
+            ...table.columns[data.column],
+            ...result,
+          };
+        }
+        // notify update driver
+        this.notify();
+      }
+    }
+
+    return result;
+  }
+
+  async deleteVirtualColumn(
+    schemaName: string,
+    tableName: string,
+    id: string
+  ): Promise<boolean> {
+    const success = await deleteOutebaseDataCatalogVirtualColumn(
+      this.config.workspaceId,
+      this.config.sourceId,
+      id
+    );
+    if (success) {
+      const normalizedSchemaName = schemaName.toLowerCase();
+      const normalizedTableName = tableName.toLowerCase();
+
+      if (
+        this.schemas[normalizedSchemaName] &&
+        this.schemas[normalizedSchemaName][normalizedTableName]
+      ) {
+        const table = this.schemas[normalizedSchemaName][normalizedTableName];
+        table.virtualJoin =
+          table.virtualJoin?.filter((vc) => vc.id !== id) || [];
+        // notify update driver
+        this.notify();
+      }
+    }
+
+    return success;
+  }
+
+  async updateTable(
+    schemaName: string,
+    tableName: string,
+    data: OuterbaseDataCatalogVirtualColumnInput,
+    commentId: string
+  ): Promise<DataCatalogModelTable | undefined> {
+    const result = await this.createUpdateColumn(data, commentId);
+
+    if (result) {
+      const normalizedSchemaName = schemaName.toLowerCase();
+      const normalizedTableName = tableName.toLowerCase();
+
+      if (!this.schemas[normalizedSchemaName]) {
+        this.schemas[normalizedSchemaName] = {};
+      }
+
+      const schemas = this.schemas[normalizedSchemaName];
+
+      if (!schemas[normalizedTableName]) {
+        schemas[normalizedTableName] = {
+          schemaName: normalizedSchemaName,
+          tableName: normalizedTableName,
+          columns: {},
+          virtualJoin: [],
+        };
+      }
+      const table = schemas[normalizedTableName];
+
+      this.schemas[schemaName][tableName] = {
+        ...table,
+        metadata: result,
+      };
+
+      this.notify();
+      return schemas[normalizedTableName];
+    }
+  }
+
+  async updateTermDefinition(
+    data: DataCatalogTermDefinition
+  ): Promise<OuterbaseDataCatalogDefinition | undefined> {
+    if (!data) return;
+    let result;
+    const inputData = {
+      name: data.name,
+      otherNames: data.otherNames,
+      definition: data.definition!,
+    };
+    if (data.id) {
+      result = await updateOuerbaseDefinition(
+        this.config.workspaceId,
+        this.config.baseId!,
+        data.id,
+        inputData
+      );
+    } else {
+      result = await createOuterbaseDefinition(
+        this.config.workspaceId,
+        this.config.baseId!,
+        inputData
+      );
+    }
+
+    if (result) {
+      const updatedDefinitions = this.definitions;
+      const index = updatedDefinitions.findIndex((def) => def.id === data.id);
+      if (index > -1) {
+        updatedDefinitions[index] = {
+          ...updatedDefinitions[index],
+          ...data,
+        };
+        this.definitions = updatedDefinitions;
+      } else {
+        this.definitions.unshift(result);
+      }
+      //notify update driver
+      this.notify();
+    }
+    return result;
+  }
+
+  getColumn(
+    schemaName: string,
+    tableName: string,
+    columnName: string
+  ): OuterbaseDataCatalogComment | undefined {
+    const normalizedColumnName = columnName.toLowerCase();
+    const table = this.getTable(schemaName, tableName);
+    return table?.columns[normalizedColumnName];
+  }
+
+  getTable(
+    schemaName: string,
+    tableName: string
+  ): DataCatalogModelTable | undefined {
+    const normalizedSchemaName = schemaName.toLowerCase();
+    const normalizedTableName = tableName.toLowerCase();
+
+    if (!this.schemas[normalizedSchemaName]) {
+      return;
+    }
+
+    const schemas = this.schemas[normalizedSchemaName];
+    if (!schemas[normalizedTableName]) {
+      return;
+    }
+
+    const table = schemas[normalizedTableName];
+    return table;
+  }
+
+  getTermDefinitions(): OuterbaseDataCatalogDefinition[] {
+    if (!this.definitions) {
+      return [];
+    }
+    return this.definitions;
+  }
+
+  async deleteTermDefinition(id: string): Promise<boolean> {
+    try {
+      await deleteOuterbaseDefinition(
+        this.config.workspaceId,
+        this.config.baseId!,
+        id
+      );
+      const newDefinitions = this.definitions.filter((def) => def.id !== id);
+      this.definitions = newDefinitions;
+      //notify update driver
+      this.notify();
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  addEventListener(callback: () => void) {
+    this.subscribers.add(callback);
+    return () => this.removeEventListener(callback);
+  }
+
+  removeEventListener(callback: () => void) {
+    this.subscribers.delete(callback);
+  }
+
+  // Notify all subscribers
+  private notify() {
+    this.subscribers.forEach((callback) => callback());
+  }
+}
diff --git a/src/outerbase-cloud/database/sqlite.ts b/src/outerbase-cloud/database/sqlite.ts
index 167a5883..58f14a27 100644
--- a/src/outerbase-cloud/database/sqlite.ts
+++ b/src/outerbase-cloud/database/sqlite.ts
@@ -1,6 +1,6 @@
 import { DatabaseResultSet, DriverFlags } from "@/drivers/base-driver";
 import { SqliteLikeBaseDriver } from "@/drivers/sqlite-base-driver";
-import { runOuterbaseQueryBatch, runOuterbaseQueryRaw } from "../api";
+import { runOuterbaseQueryRaw } from "../api";
 import { OuterbaseDatabaseConfig } from "../api-type";
 import { transformOuterbaseResult } from "./utils";
 
@@ -34,11 +34,11 @@ export class OuterbaseSqliteDriver extends SqliteLikeBaseDriver {
     return transformOuterbaseResult(jsonResponse);
   }
 
-  async batch(stmts: string[]): Promise<DatabaseResultSet[]> {
-    return (
-      await runOuterbaseQueryBatch(this.workspaceId, this.sourceId, stmts)
-    ).map(transformOuterbaseResult);
-  }
+  // async batch(stmts: string[]): Promise<DatabaseResultSet[]> {
+  //   return (
+  //     await runOuterbaseQueryBatch(this.workspaceId, this.sourceId, stmts)
+  //   ).map(transformOuterbaseResult);
+  // }
 
   async transaction(stmts: string[]): Promise<DatabaseResultSet[]> {
     return this.batch(stmts);
diff --git a/src/outerbase-cloud/util.ts b/src/outerbase-cloud/util.ts
new file mode 100644
index 00000000..6aa00361
--- /dev/null
+++ b/src/outerbase-cloud/util.ts
@@ -0,0 +1,61 @@
+import { DataCatalogSchemas } from "@/extensions/data-catalog/driver";
+import {
+  OuterbaseDataCatalogComment,
+  OuterbaseDataCatalogSchemas,
+} from "./api-type";
+
+export function transformOuterbaseSchema(
+  data: Record<string, OuterbaseDataCatalogSchemas[]>,
+  comments: OuterbaseDataCatalogComment[]
+): DataCatalogSchemas {
+  return Object.keys(data).reduce<DataCatalogSchemas>((acc, key) => {
+    data[key].forEach((schema) => {
+      if (!acc[schema.schema]) {
+        acc[schema.schema] = {};
+      }
+
+      const tableMetadata = comments.find(
+        (c) =>
+          c.schema === schema.schema &&
+          c.table === schema.name &&
+          !c.column &&
+          !c.flags.isVirtualKey
+      );
+
+      acc[schema.schema][schema.name] = {
+        schemaName: schema.schema,
+        tableName: schema.name,
+
+        columns: schema.columns.reduce(
+          (columnsAcc, col) => {
+            const comment = comments.find(
+              (c) =>
+                c.schema === schema.schema &&
+                c.table === schema.name &&
+                c.column === col.name &&
+                !c.flags.isVirtualKey
+            );
+
+            if (comment) {
+              columnsAcc[col.name] = comment;
+            }
+
+            return columnsAcc;
+          },
+          {} as Record<string, OuterbaseDataCatalogComment>
+        ),
+
+        virtualJoin: comments.filter(
+          (c) =>
+            c.schema === schema.schema &&
+            c.table === schema.name &&
+            c.virtualKeyColumn &&
+            c.flags.isVirtualKey
+        ),
+        metadata: tableMetadata,
+      };
+    });
+
+    return acc;
+  }, {});
+}

From d964c887712fe9ec89e84b864cfa0f762c6ab006 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 10 Feb 2025 11:00:58 +0700
Subject: [PATCH 034/106] reverse the batch code

---
 src/outerbase-cloud/database/sqlite.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/outerbase-cloud/database/sqlite.ts b/src/outerbase-cloud/database/sqlite.ts
index 58f14a27..167a5883 100644
--- a/src/outerbase-cloud/database/sqlite.ts
+++ b/src/outerbase-cloud/database/sqlite.ts
@@ -1,6 +1,6 @@
 import { DatabaseResultSet, DriverFlags } from "@/drivers/base-driver";
 import { SqliteLikeBaseDriver } from "@/drivers/sqlite-base-driver";
-import { runOuterbaseQueryRaw } from "../api";
+import { runOuterbaseQueryBatch, runOuterbaseQueryRaw } from "../api";
 import { OuterbaseDatabaseConfig } from "../api-type";
 import { transformOuterbaseResult } from "./utils";
 
@@ -34,11 +34,11 @@ export class OuterbaseSqliteDriver extends SqliteLikeBaseDriver {
     return transformOuterbaseResult(jsonResponse);
   }
 
-  // async batch(stmts: string[]): Promise<DatabaseResultSet[]> {
-  //   return (
-  //     await runOuterbaseQueryBatch(this.workspaceId, this.sourceId, stmts)
-  //   ).map(transformOuterbaseResult);
-  // }
+  async batch(stmts: string[]): Promise<DatabaseResultSet[]> {
+    return (
+      await runOuterbaseQueryBatch(this.workspaceId, this.sourceId, stmts)
+    ).map(transformOuterbaseResult);
+  }
 
   async transaction(stmts: string[]): Promise<DatabaseResultSet[]> {
     return this.batch(stmts);

From 697cb69ab4093f3b72878c5804c4b50fa5874d24 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 10 Feb 2025 11:23:46 +0700
Subject: [PATCH 035/106] add result to chart editor

---
 src/components/board/board-chart-editor.tsx   | 34 ++++++++++++++++---
 src/drivers/board-source/base-source.ts       |  5 +--
 src/outerbase-cloud/database-source/index.tsx | 15 ++++----
 3 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index b5a7c6ad..5d2a8dc1 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -2,11 +2,14 @@ import { generateAutoComplete } from "@/context/schema-provider";
 import { DatabaseSchemas } from "@/drivers/base-driver";
 import { Play } from "@phosphor-icons/react";
 import { produce } from "immer";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { ChartValue } from "../chart/chart-type";
 import EditChartMenu from "../chart/edit-chart-menu";
+import ResultTable from "../gui/query-result-table";
 import SqlEditor from "../gui/sql-editor";
+import OptimizeTableState from "../gui/table-optimized/OptimizeTableState";
 import { Button } from "../orbit/button";
+import { useBoardContext } from "./board-provider";
 import BoardSourcePicker from "./board-source-picker";
 
 export default function BoardChartEditor() {
@@ -51,11 +54,34 @@ export default function BoardChartEditor() {
     return generateAutoComplete(selectedSchema, schema);
   }, [schema, selectedSchema]);
 
+  const { sources: sourceDriver } = useBoardContext();
+  const [result, setResult] = useState<OptimizeTableState>();
+
+  const onRunClicked = useCallback(() => {
+    const sql = value?.params.layers[0].sql ?? "";
+    const sourceId = value?.source_id ?? "";
+
+    if (sourceDriver && sourceId) {
+      sourceDriver
+        .query(sourceId, sql)
+        .then((newResult) => {
+          setResult(
+            OptimizeTableState.createFromResult({
+              result: newResult,
+              driver: sourceDriver.getDriver(sourceId),
+              schemas: schema,
+            })
+          );
+        })
+        .catch();
+    }
+  }, [value, sourceDriver, schema]);
+
   return (
     <div className="flex flex-1 border-t">
       <div className="flex flex-1 flex-col">
-        <div className="h-1/2 border-b p-4">
-          <div className="text-lg font-semibold">Chart Editor</div>
+        <div className="h-1/2 border-b">
+          {result && <ResultTable data={result} />}
         </div>
         <div className="h-1/2 overflow-x-hidden">
           <div className="flex border-b px-4 py-2">
@@ -78,7 +104,7 @@ export default function BoardChartEditor() {
             <div className="flex-1"></div>
 
             <div>
-              <Button size="lg">
+              <Button size="lg" onClick={onRunClicked}>
                 <Play />
                 Run
               </Button>
diff --git a/src/drivers/board-source/base-source.ts b/src/drivers/board-source/base-source.ts
index 4ebd6f6d..65b15bef 100644
--- a/src/drivers/board-source/base-source.ts
+++ b/src/drivers/board-source/base-source.ts
@@ -1,4 +1,4 @@
-import { DatabaseSchemas } from "../base-driver";
+import { BaseDriver, DatabaseResultSet, DatabaseSchemas } from "../base-driver";
 
 export interface BoardSource {
   id: string;
@@ -8,10 +8,11 @@ export interface BoardSource {
 
 export abstract class BoardSourceDriver {
   abstract sourceList(): BoardSource[];
+  abstract getDriver(sourceId: string): BaseDriver;
   abstract query(
     sourceId: string,
     statement: string
-  ): Promise<Record<string, unknown>[]>;
+  ): Promise<DatabaseResultSet>;
   abstract schemas(
     sourceId: string
   ): Promise<{ schema: DatabaseSchemas; selectedSchema?: string }>;
diff --git a/src/outerbase-cloud/database-source/index.tsx b/src/outerbase-cloud/database-source/index.tsx
index fb92a5e1..e9b849ca 100644
--- a/src/outerbase-cloud/database-source/index.tsx
+++ b/src/outerbase-cloud/database-source/index.tsx
@@ -1,6 +1,10 @@
 import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
 import { createOuterbaseDatabaseDriver } from "@/outerbase-cloud/database/utils";
-import { BaseDriver, DatabaseSchemas } from "../../drivers/base-driver";
+import {
+  BaseDriver,
+  DatabaseResultSet,
+  DatabaseSchemas,
+} from "../../drivers/base-driver";
 import {
   BoardSource,
   BoardSourceDriver,
@@ -74,14 +78,9 @@ export default class OuterbaseBoardSourceDriver implements BoardSourceDriver {
     return this.cacheSchemas[sourceId];
   }
 
-  async query(
-    sourceId: string,
-    statement: string
-  ): Promise<Record<string, unknown>[]> {
+  async query(sourceId: string, statement: string): Promise<DatabaseResultSet> {
     const driver = this.getDriver(sourceId);
-    const result = await driver.query(statement);
-
-    return result.rows;
+    return await driver.query(statement);
   }
 
   cleanup(): void {

From 1633d08fb551321a24b770de4e8b9791984b4018 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 10 Feb 2025 11:52:52 +0700
Subject: [PATCH 036/106] fixing the type error for chart

---
 src/components/board/board-chart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/board/board-chart.tsx b/src/components/board/board-chart.tsx
index ce65e38a..0e1b0ab4 100644
--- a/src/components/board/board-chart.tsx
+++ b/src/components/board/board-chart.tsx
@@ -22,7 +22,7 @@ export default function BoardChart({ value }: { value: ChartValue }) {
     sources
       .query(sourceId, sql)
       .then((v) => {
-        setData(v);
+        setData(v.rows);
       })
       .catch((e) => {
         console.error(e);

From 6234f58a9eff851b1a821e207a1189bec9b3901c Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Mon, 10 Feb 2025 14:23:47 +0700
Subject: [PATCH 037/106] new toggle interface

---
 .../w/[workspaceId]/[baseId]/page.tsx         | 25 +++++++++++++++----
 src/components/orbit/toggle.tsx               | 10 +++++---
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
index 2138973f..f84b6d50 100644
--- a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
@@ -8,8 +8,10 @@ import {
   createPostgreSQLExtensions,
   createSQLiteExtensions,
 } from "@/core/standard-extension";
+import DataCatalogExtension from "@/extensions/data-catalog";
 import { getOuterbaseBase } from "@/outerbase-cloud/api";
 import { OuterbaseAPISource } from "@/outerbase-cloud/api-type";
+import DataCatalogOuterbaseDriver from "@/outerbase-cloud/data-catalog-driver";
 import { OuterbaseMySQLDriver } from "@/outerbase-cloud/database/mysql";
 import { OuterbasePostgresDriver } from "@/outerbase-cloud/database/postgresql";
 import { OuterbaseSqliteDriver } from "@/outerbase-cloud/database/sqlite";
@@ -46,27 +48,40 @@ export default function OuterbaseSourcePage() {
     const outerbaseConfig = {
       workspaceId,
       sourceId: source.id,
-      baseId: "",
+      baseId,
       token: localStorage.getItem("ob-token") ?? "",
     };
 
+    const outerbaseSpecifiedDrivers = [
+      new DataCatalogExtension(new DataCatalogOuterbaseDriver(outerbaseConfig)),
+    ];
+
     if (dialect === "postgres") {
       return [
         new OuterbasePostgresDriver(outerbaseConfig),
-        new StudioExtensionManager(createPostgreSQLExtensions()),
+        new StudioExtensionManager([
+          ...createPostgreSQLExtensions(),
+          ...outerbaseSpecifiedDrivers,
+        ]),
       ];
     } else if (dialect === "mysql") {
       return [
         new OuterbaseMySQLDriver(outerbaseConfig),
-        new StudioExtensionManager(createMySQLExtensions()),
+        new StudioExtensionManager([
+          ...createMySQLExtensions(),
+          ...outerbaseSpecifiedDrivers,
+        ]),
       ];
     }
 
     return [
       new OuterbaseSqliteDriver(outerbaseConfig),
-      new StudioExtensionManager(createSQLiteExtensions()),
+      new StudioExtensionManager([
+        ...createSQLiteExtensions(),
+        ...outerbaseSpecifiedDrivers,
+      ]),
     ];
-  }, [workspaceId, source]);
+  }, [workspaceId, source, baseId]);
 
   if (!outerbaseDriver || !savedDocDriver) {
     return <PageLoading>Loading Base ...</PageLoading>;
diff --git a/src/components/orbit/toggle.tsx b/src/components/orbit/toggle.tsx
index 0879b1a5..e8216d0e 100644
--- a/src/components/orbit/toggle.tsx
+++ b/src/components/orbit/toggle.tsx
@@ -1,12 +1,12 @@
 import { cn } from "@/lib/utils";
 
 type ToggleProps = {
-  onClick: () => void;
   size?: "sm" | "base" | "lg";
-  toggled: boolean;
+  toggled?: boolean;
+  onChange?: (value: boolean) => void;
 };
 
-export const Toggle = ({ onClick, size = "base", toggled }: ToggleProps) => {
+export const Toggle = ({ onChange, size = "base", toggled }: ToggleProps) => {
   return (
     <button
       className={cn(
@@ -19,7 +19,9 @@ export const Toggle = ({ onClick, size = "base", toggled }: ToggleProps) => {
             toggled,
         }
       )}
-      onClick={onClick}
+      onClick={() => {
+        if (onChange) onChange(!toggled);
+      }}
     >
       <div
         className={cn(

From d0052811e7e5cf512d7c558aa2caf0565418391c Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Mon, 10 Feb 2025 14:56:03 +0700
Subject: [PATCH 038/106] add resource search and filter by resource type

---
 src/app/(outerbase)/auth-provider.tsx        |  2 +-
 src/app/(outerbase)/nav.tsx                  | 71 +++++++++++++-------
 src/app/(outerbase)/w/[workspaceId]/page.tsx | 38 ++++++++---
 3 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/src/app/(outerbase)/auth-provider.tsx b/src/app/(outerbase)/auth-provider.tsx
index d0d6baf6..5d47e489 100644
--- a/src/app/(outerbase)/auth-provider.tsx
+++ b/src/app/(outerbase)/auth-provider.tsx
@@ -13,7 +13,7 @@ export default function AuthProvider({ children }: PropsWithChildren) {
     if (isLoading) return;
     if (!session?.session || !session?.user) {
       localStorage.setItem("continue-redirect", pathname);
-      router.push("/signin");
+      router.replace("/signin");
     }
   }, [isLoading, session, pathname, router]);
 
diff --git a/src/app/(outerbase)/nav.tsx b/src/app/(outerbase)/nav.tsx
index cc5915b5..44052708 100644
--- a/src/app/(outerbase)/nav.tsx
+++ b/src/app/(outerbase)/nav.tsx
@@ -14,26 +14,36 @@ import {
   SquaresFour,
 } from "@phosphor-icons/react";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import NavigationProfile from "./nav-profile";
+import { useSession } from "./session-provider";
 import { useWorkspaces } from "./workspace-provider";
 
 export function NavigationBar() {
   const { currentWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
+  const pathname = usePathname();
+  const { session } = useSession();
 
   return (
     <div className="dark:bg-background relative sticky top-0 z-20 flex h-14 items-center justify-center gap-2 bg-neutral-50 px-2">
       <div className="text-primary absolute left-0 flex h-14 items-center pl-2">
-        <Link href={`/w/${workspaceId}`}>
+        <Link
+          href={
+            pathname !== "/w/local-workspace"
+              ? `/w/${workspaceId}`
+              : "/w/local-workspace"
+          }
+        >
           <OuterbaseIcon className="h-8 w-8" />
         </Link>
 
         <Popover>
           <PopoverTrigger asChild>
             <Button variant="ghost">
-              {currentWorkspace?.name} <CaretUpDown className="ml-2" />
+              {currentWorkspace?.name ?? "Local"}
+              <CaretUpDown className="ml-2" />
             </Button>
           </PopoverTrigger>
           <PopoverContent className="h-[400px] w-[500px] p-0" align="start">
@@ -42,28 +52,30 @@ export function NavigationBar() {
         </Popover>
       </div>
 
-      <div className="flex gap-4 text-base">
-        <Link
-          href={`/w/${workspaceId}`}
-          className="flex cursor-pointer items-center gap-1"
-        >
-          <GlobeHemisphereEast weight="fill" className="size-5" /> Home
-        </Link>
-        <Link
-          href={`/w/${workspaceId}/settings`}
-          className="flex cursor-pointer items-center gap-1"
-        >
-          <Gear className="size-5" />
-          Settings
-        </Link>
-        <Link
-          href={`/w/${workspaceId}/billing`}
-          className="flex cursor-pointer items-center gap-1"
-        >
-          <Gear className="size-5" />
-          Billing
-        </Link>
-      </div>
+      {workspaceId && workspaceId !== "local-workspace" && (
+        <div className="flex gap-4 text-base">
+          <Link
+            href={`/w/${workspaceId}`}
+            className="flex cursor-pointer items-center gap-1"
+          >
+            <GlobeHemisphereEast weight="fill" className="size-5" /> Home
+          </Link>
+          <Link
+            href={`/w/${workspaceId}/settings`}
+            className="flex cursor-pointer items-center gap-1"
+          >
+            <Gear className="size-5" />
+            Settings
+          </Link>
+          <Link
+            href={`/w/${workspaceId}/billing`}
+            className="flex cursor-pointer items-center gap-1"
+          >
+            <Gear className="size-5" />
+            Billing
+          </Link>
+        </div>
+      )}
 
       <div className="absolute right-0 flex gap-2 pr-2">
         <div className="bg-secondary text-secondary-foreground flex h-9 items-center justify-center rounded-lg border px-4 text-base font-semibold">
@@ -71,6 +83,12 @@ export function NavigationBar() {
         </div>
 
         <NavigationProfile />
+
+        {!session && (
+          <Button href="/signin" size="lg" as="link">
+            Sign In
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -78,6 +96,7 @@ export function NavigationBar() {
 
 function WorkspaceSelector() {
   const router = useRouter();
+  const { session } = useSession();
   const { workspaces, currentWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
   const [selectedWorkspaceId, setSelectedWorkspaceId] = useState(workspaceId);
@@ -128,7 +147,7 @@ function WorkspaceSelector() {
           className="p-4 font-normal"
           size="sm"
           as="link"
-          href="/new-workspace"
+          href={session ? "/new-workspace" : "/signin"}
         >
           <SquaresFour size={16} /> New Workspace
         </Button>
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 159f80dc..d3082000 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -48,7 +48,9 @@ export default function WorkspaceListPageClient() {
   const router = useRouter();
   const { currentWorkspace, refreshWorkspace } = useWorkspaces();
   const { workspaceId } = useParams<{ workspaceId: string }>();
-  const [typeFilter, setTypeFilter] = useState("all");
+
+  const [filterType, setFilterType] = useState("all");
+  const [filterName, setFilterName] = useState("");
 
   useRedirectValidWorkspace();
 
@@ -85,25 +87,43 @@ export default function WorkspaceListPageClient() {
         status: `Last updated ${timeSince(new Date(board?.updated_at ?? ""))} ago`,
       }));
 
-    const allResources = [...baseResources, ...boardResources];
+    let allResources = [...baseResources, ...boardResources];
+
+    // Apply filters
+    if (filterName) {
+      allResources = allResources.filter((resource) =>
+        resource.name?.toLowerCase().includes(filterName.toLowerCase())
+      );
+    }
+
+    if (filterType === "base") {
+      allResources = allResources.filter(
+        (resource) => resource.type !== "board"
+      );
+    } else if (filterType === "board") {
+      allResources = allResources.filter(
+        (resource) => resource.type === "board"
+      );
+    }
 
     return allResources.sort((a, b) =>
       (a.name ?? "").localeCompare(b.name ?? "")
     );
-  }, [currentWorkspace, boards]);
+  }, [currentWorkspace, boards, filterName, filterType]);
 
   return (
     <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
       <NavigationBar />
 
       <div className="container mx-auto mt-10 p-4">
-        <div className="mb-12 flex gap-4">
+        <div className="sticky top-14 z-20 mb-12 flex gap-4 bg-neutral-50 pb-2 dark:bg-neutral-950">
           <div className="flex-1">
             <Input
               preText={<MagnifyingGlass size={16} className="mr-2" />}
               size="lg"
               placeholder="Search resources..."
-              onValueChange={() => {}}
+              onValueChange={setFilterName}
+              value={filterName}
             />
           </div>
 
@@ -111,11 +131,11 @@ export default function WorkspaceListPageClient() {
             size="lg"
             items={[
               { value: "all", content: "All" },
-              { value: "bases", content: "Bases" },
-              { value: "boards", content: "Boards" },
+              { value: "base", content: "Bases" },
+              { value: "board", content: "Boards" },
             ]}
-            onChange={setTypeFilter}
-            value={typeFilter}
+            onChange={setFilterType}
+            value={filterType}
           />
 
           <MenuBar

From 83475b8e848765098f90c7423f679a23e0eac244 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Mon, 10 Feb 2025 15:02:56 +0700
Subject: [PATCH 039/106] fixing starbase does not show column of empty table

---
 src/drivers/sqlite-base-driver.ts | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/drivers/sqlite-base-driver.ts b/src/drivers/sqlite-base-driver.ts
index a5baa537..b0cfbbb9 100644
--- a/src/drivers/sqlite-base-driver.ts
+++ b/src/drivers/sqlite-base-driver.ts
@@ -329,16 +329,31 @@ export abstract class SqliteLikeBaseDriver extends CommonSQLImplement {
     const orderPart =
       options.orderBy && options.orderBy.length > 0
         ? options.orderBy
-            .map((r) => `${this.escapeId(r.columnName)} ${r.by}`)
-            .join(", ")
+          .map((r) => `${this.escapeId(r.columnName)} ${r.by}`)
+          .join(", ")
         : "";
 
-    const sql = `SELECT ${injectRowIdColumn ? "rowid, " : ""}* FROM ${this.escapeId(schemaName)}.${this.escapeId(tableName)}${
-      whereRaw ? ` WHERE ${whereRaw} ` : ""
-    } ${orderPart ? ` ORDER BY ${orderPart}` : ""} LIMIT ${escapeSqlValue(options.limit)} OFFSET ${escapeSqlValue(options.offset)};`;
+    const sql = `SELECT ${injectRowIdColumn ? "rowid, " : ""}* FROM ${this.escapeId(schemaName)}.${this.escapeId(tableName)}${whereRaw ? ` WHERE ${whereRaw} ` : ""
+      } ${orderPart ? ` ORDER BY ${orderPart}` : ""} LIMIT ${escapeSqlValue(options.limit)} OFFSET ${escapeSqlValue(options.offset)};`;
+
+    let data = await this.query(sql);
+
+    // If data does not have any header, we will inject the header from schema
+    if (data.headers.length === 0 && data.rows.length === 0) {
+      data = {
+        ...data,
+        headers: schema.columns.map((col) => {
+          return {
+            name: col.name,
+            originalType: col.type,
+            displayName: col.name,
+          };
+        }),
+      };
+    }
 
     return {
-      data: await this.query(sql),
+      data,
       schema,
     };
   }

From d159a3287f43c01a0dbc0a34e9d2a59df9d70211 Mon Sep 17 00:00:00 2001
From: keppere <50957820+keppere@users.noreply.github.com>
Date: Mon, 10 Feb 2025 18:39:53 +0700
Subject: [PATCH 040/106] Add chart into board chart editor (#349)

* feat: add display type toggle for chart and table in board chart editor

* fix: improve table component layout and overflow handling

* refactor: change to use orbit component

* feat: add loading state to the run button in board chart editor

* fix: update Toggle component to use onChange instead of onClick
---
 src/app/storybook/toggle/page.tsx             |   6 +-
 src/components/board/board-chart-editor.tsx   |  61 +++-
 .../chart/chart-background-selection.tsx      |  32 +-
 src/components/chart/chart-type-selection.tsx | 152 +++++++++
 src/components/chart/chart-y-axis-section.tsx |  58 ++--
 src/components/chart/edit-chart-menu.tsx      | 319 +++++-------------
 src/components/chart/index.tsx                |  12 +-
 src/components/chart/simple-combobox.tsx      |  98 ------
 src/components/chart/simple-input.tsx         |   7 +-
 src/components/chart/simple-toggle.tsx        |  33 --
 10 files changed, 357 insertions(+), 421 deletions(-)
 create mode 100644 src/components/chart/chart-type-selection.tsx
 delete mode 100644 src/components/chart/simple-combobox.tsx
 delete mode 100644 src/components/chart/simple-toggle.tsx

diff --git a/src/app/storybook/toggle/page.tsx b/src/app/storybook/toggle/page.tsx
index 3952cce9..59d5ec09 100644
--- a/src/app/storybook/toggle/page.tsx
+++ b/src/app/storybook/toggle/page.tsx
@@ -17,9 +17,9 @@ export default function ToggleStorybook() {
     <Section>
       <Inset>
         <Block title="Toggle">
-          <Toggle onClick={handleToggleClick} toggled={toggle} size="sm" />
-          <Toggle onClick={handleToggleClick} toggled={toggle} size="base" />
-          <Toggle onClick={handleToggleClick} toggled={toggle} size="lg" />
+          <Toggle onChange={handleToggleClick} toggled={toggle} size="sm" />
+          <Toggle onChange={handleToggleClick} toggled={toggle} size="base" />
+          <Toggle onChange={handleToggleClick} toggled={toggle} size="lg" />
         </Block>
       </Inset>
     </Section>
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index 5d2a8dc1..3498f036 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -1,14 +1,16 @@
 import { generateAutoComplete } from "@/context/schema-provider";
 import { DatabaseSchemas } from "@/drivers/base-driver";
-import { Play } from "@phosphor-icons/react";
+import { ChartBar, Play, Table } from "@phosphor-icons/react";
 import { produce } from "immer";
 import { useCallback, useMemo, useState } from "react";
+import Chart from "../chart";
 import { ChartValue } from "../chart/chart-type";
 import EditChartMenu from "../chart/edit-chart-menu";
 import ResultTable from "../gui/query-result-table";
 import SqlEditor from "../gui/sql-editor";
 import OptimizeTableState from "../gui/table-optimized/OptimizeTableState";
 import { Button } from "../orbit/button";
+import { MenuBar } from "../orbit/menu-bar";
 import { useBoardContext } from "./board-provider";
 import BoardSourcePicker from "./board-source-picker";
 
@@ -22,7 +24,7 @@ export default function BoardChartEditor() {
     source_id: "",
     updated_at: "",
     workspace_id: "",
-    name: "",
+    name: "New Chart",
     params: {
       type: "line",
       id: "",
@@ -49,6 +51,8 @@ export default function BoardChartEditor() {
 
   const [schema, setSchema] = useState<DatabaseSchemas>({});
   const [selectedSchema, setSelectedSchema] = useState("");
+  const [displayType, setDisplayType] = useState("chart");
+  const [loading, setLoading] = useState(false);
 
   const autoCompletion = useMemo(() => {
     return generateAutoComplete(selectedSchema, schema);
@@ -62,9 +66,11 @@ export default function BoardChartEditor() {
     const sourceId = value?.source_id ?? "";
 
     if (sourceDriver && sourceId) {
+      setLoading(true);
       sourceDriver
         .query(sourceId, sql)
         .then((newResult) => {
+          setLoading(false);
           setResult(
             OptimizeTableState.createFromResult({
               result: newResult,
@@ -72,6 +78,16 @@ export default function BoardChartEditor() {
               schemas: schema,
             })
           );
+          setValue((prev) => {
+            return produce(prev, (draft) => {
+              draft.params.layers[0].sql = sql;
+              if (newResult.headers?.length > 0) {
+                const columns = newResult.headers.map((header) => header.name);
+                draft.params.options.xAxisKey = columns.pop();
+                draft.params.options.yAxisKeys = columns;
+              }
+            });
+          });
         })
         .catch();
     }
@@ -81,10 +97,13 @@ export default function BoardChartEditor() {
     <div className="flex flex-1 border-t">
       <div className="flex flex-1 flex-col">
         <div className="h-1/2 border-b">
-          {result && <ResultTable data={result} />}
+          {result && displayType === "table" && <ResultTable data={result} />}
+          {result && displayType === "chart" && (
+            <Chart data={result.getAllRows().map((r) => r.raw)} value={value} />
+          )}
         </div>
         <div className="h-1/2 overflow-x-hidden">
-          <div className="flex border-b px-4 py-2">
+          <div className="flex gap-2 border-b px-4 py-2">
             <BoardSourcePicker
               value={value?.source_id}
               onChange={(newSourceId) => {
@@ -101,10 +120,36 @@ export default function BoardChartEditor() {
               }}
             />
 
+            <div>
+              <MenuBar
+                size="lg"
+                value={displayType}
+                onChange={setDisplayType}
+                items={[
+                  {
+                    value: "chart",
+                    content: (
+                      <span>
+                        <ChartBar className="inline" /> Chart
+                      </span>
+                    ),
+                  },
+                  {
+                    value: "table",
+                    content: (
+                      <span>
+                        <Table className="inline" /> Table
+                      </span>
+                    ),
+                  },
+                ]}
+              />
+            </div>
+
             <div className="flex-1"></div>
 
             <div>
-              <Button size="lg" onClick={onRunClicked}>
+              <Button size="lg" onClick={onRunClicked} loading={loading}>
                 <Play />
                 Run
               </Button>
@@ -127,7 +172,11 @@ export default function BoardChartEditor() {
         </div>
       </div>
       <div className="w-[370px] overflow-x-hidden overflow-y-auto border-l p-4">
-        <EditChartMenu value={value} onChange={setValue} columns={[]} />
+        <EditChartMenu
+          value={value}
+          onChange={setValue}
+          columns={result?.getHeaders().map((header) => header.name) ?? []}
+        />
       </div>
     </div>
   );
diff --git a/src/components/chart/chart-background-selection.tsx b/src/components/chart/chart-background-selection.tsx
index f82c0100..64148124 100644
--- a/src/components/chart/chart-background-selection.tsx
+++ b/src/components/chart/chart-background-selection.tsx
@@ -1,9 +1,9 @@
 import { produce } from "immer";
 import { Dispatch, SetStateAction, useMemo } from "react";
+import { MenuBar } from "../orbit/menu-bar";
 import ChartBackGroundImage from "./chart-background-image";
 import { ChartValue } from "./chart-type";
 import SimpleInput from "./simple-input";
-import SimpleToggle from "./simple-toggle";
 
 const PRESET_GRADIENTS = [
   { start: "#0A0A0A", stop: "#171717" },
@@ -102,15 +102,25 @@ export default function ChartBackgroundSelection({
       <p className="mb-1.5 text-sm font-bold opacity-70">Background</p>
       <div className="flex items-center justify-center pt-2">
         <div className="w-[200px]">
-          <SimpleToggle
-            values={["None", "Gradient", "Image"]}
-            onChange={function (v: string): void {
-              handleBackgroundTypeChange(v.toLowerCase());
-            }}
-            selectedValue={capitalizeFirstChar(
-              value.params.options.backgroundType || "none"
-            )}
-          ></SimpleToggle>
+          <MenuBar
+            size="lg"
+            value={value.params.options.backgroundType}
+            onChange={handleBackgroundTypeChange}
+            items={[
+              {
+                value: "none",
+                content: "None",
+              },
+              {
+                value: "gradient",
+                content: "Gradient",
+              },
+              {
+                value: "image",
+                content: "Image",
+              },
+            ]}
+          />
         </div>
       </div>
       <div>
@@ -123,7 +133,7 @@ export default function ChartBackgroundSelection({
   );
 }
 
-function capitalizeFirstChar(word: string): string {
+export function capitalizeFirstChar(word: string): string {
   if (!word) return word;
   return word.charAt(0).toUpperCase() + word.slice(1);
 }
diff --git a/src/components/chart/chart-type-selection.tsx b/src/components/chart/chart-type-selection.tsx
new file mode 100644
index 00000000..5ca143df
--- /dev/null
+++ b/src/components/chart/chart-type-selection.tsx
@@ -0,0 +1,152 @@
+import {
+  ChartBarHorizontal,
+  ChartPieSlice,
+  NumberCircleOne,
+  TextT,
+} from "@phosphor-icons/react";
+import { ChartBar } from "@phosphor-icons/react/dist/icons/ChartBar";
+import { ChartPolar } from "@phosphor-icons/react/dist/icons/ChartPolar";
+import { Funnel } from "@phosphor-icons/react/dist/icons/Funnel";
+import { produce } from "immer";
+import { ChartLine, ChartScatter, Table } from "lucide-react";
+import { Dispatch, SetStateAction } from "react";
+import { ChartValue } from "./chart-type";
+import { ChartTypeButton } from "./chart-type-button";
+
+interface ChartTypeSelectionProps {
+  value: ChartValue;
+  onChange: Dispatch<SetStateAction<ChartValue>>;
+}
+
+export default function ChartTypeSelection({
+  value,
+  onChange,
+}: ChartTypeSelectionProps) {
+  return (
+    <section key={1}>
+      <p className="mb-1.5 text-sm font-bold opacity-70">Chart Type</p>
+      <div className="grid grid-cols-6 gap-2">
+        <ChartTypeButton
+          icon={<ChartLine />}
+          isActive={value.type === "line"}
+          onClick={() => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.type = "line";
+              });
+            });
+          }}
+          tooltipText="Line"
+        />
+        <ChartTypeButton
+          icon={<ChartBar />}
+          isActive={value.type === "column"}
+          onClick={() => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.type = "column";
+              });
+            });
+          }}
+          tooltipText="Column"
+        />
+        <ChartTypeButton
+          icon={<ChartBarHorizontal />}
+          isActive={value.type === "bar"}
+          onClick={() => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.type = "bar";
+              });
+            });
+          }}
+          tooltipText="Bar"
+        />
+        <ChartTypeButton
+          icon={<ChartScatter />}
+          isActive={value.type === "scatter"}
+          onClick={() => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.type = "scatter";
+              });
+            });
+          }}
+          tooltipText="scatter"
+        />
+        <ChartTypeButton
+          icon={<TextT />}
+          isActive={value.type === "text"}
+          onClick={() => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.type = "text";
+              });
+            });
+          }}
+          tooltipText="Text"
+        />
+        <ChartTypeButton
+          icon={<NumberCircleOne weight="bold" />}
+          isActive={value.type === "single_value"}
+          onClick={() => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.type = "single_value";
+              });
+            });
+          }}
+          tooltipText="Single Value"
+        />
+        <ChartTypeButton
+          icon={<Table />}
+          isActive={value.type === "table"}
+          onClick={() => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.type = "table";
+              });
+            });
+          }}
+          tooltipText="Table"
+        />
+        <ChartTypeButton
+          icon={<ChartPieSlice weight="bold" />}
+          isActive={value.type === "pie"}
+          onClick={() => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.type = "pie";
+              });
+            });
+          }}
+          tooltipText="Pie"
+        />
+        <ChartTypeButton
+          icon={<ChartPolar />}
+          isActive={value.type === "radar"}
+          onClick={() => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.type = "radar";
+              });
+            });
+          }}
+          tooltipText="Radar"
+        />
+        <ChartTypeButton
+          icon={<Funnel />}
+          isActive={value.type === "funnel"}
+          onClick={() => {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.type = "funnel";
+              });
+            });
+          }}
+          tooltipText="Funnel"
+        />
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/chart/chart-y-axis-section.tsx b/src/components/chart/chart-y-axis-section.tsx
index e53aec64..e9d0e3e8 100644
--- a/src/components/chart/chart-y-axis-section.tsx
+++ b/src/components/chart/chart-y-axis-section.tsx
@@ -1,11 +1,12 @@
 "use client";
 import { produce } from "immer";
 import { Dispatch, SetStateAction, useMemo } from "react";
+import { MenuBar } from "../orbit/menu-bar";
+import { Select } from "../orbit/select";
+import { capitalizeFirstChar } from "./chart-background-selection";
 import ChartSeries from "./chart-series";
 import { ChartLabelDisplayY, ChartValue } from "./chart-type";
-import { SimpleCombobox } from "./simple-combobox";
 import SimpleInput from "./simple-input";
-import SimpleToggle from "./simple-toggle";
 
 interface ChartYAxisSectionProps {
   value: ChartValue;
@@ -22,36 +23,24 @@ export default function ChartYAxisSection({
 }: ChartYAxisSectionProps) {
   const selectYAxisDisplay = useMemo(() => {
     if (isNotChartComponent) return null;
-    const yAxisSideValues = [
-      {
-        value: "left",
-        label: "Left",
-      },
-      {
-        value: "right",
-        label: "Right",
-      },
-      {
-        value: "hidden",
-        label: "Hidden",
-      },
-    ];
+
     return (
       <div>
-        <SimpleCombobox
-          hideArrow={true}
-          values={yAxisSideValues}
-          selected={value.params.options?.yAxisLabelDisplay ?? "left"}
-          placeholder="Select display..."
-          onChange={function (v: string): void {
+        <Select
+          size="lg"
+          options={["Left", "Right", "Hidden"]}
+          setValue={function (value: string): void {
             onChange((prev) => {
               return produce(prev, (draft) => {
                 draft.params.options.yAxisLabelDisplay =
-                  v as ChartLabelDisplayY;
+                  value.toLowerCase() as ChartLabelDisplayY;
               });
             });
           }}
-        ></SimpleCombobox>
+          value={capitalizeFirstChar(
+            value.params.options?.yAxisLabelDisplay ?? "left"
+          )}
+        />
       </div>
     );
   }, [isNotChartComponent, onChange, value.params.options?.yAxisLabelDisplay]);
@@ -72,19 +61,26 @@ export default function ChartYAxisSection({
           }}
         />
         {selectYAxisDisplay}
-
-        <SimpleToggle
-          values={["Show", "Hide"]}
+        <MenuBar
+          size="lg"
+          value={value.params.options?.yAxisLabelHidden ? "hide" : "show"}
           onChange={(v) => {
             onChange((prev) => {
               return produce(prev, (draft) => {
-                draft.params.options.yAxisLabelHidden = v === "Hide";
+                draft.params.options.yAxisLabelHidden = v === "hide";
               });
             });
           }}
-          selectedValue={
-            value.params.options?.yAxisLabelHidden ? "Hide" : "Show"
-          }
+          items={[
+            {
+              value: "show",
+              content: "Show",
+            },
+            {
+              value: "hide",
+              content: "Hide",
+            },
+          ]}
         />
       </div>
       <ChartSeries
diff --git a/src/components/chart/edit-chart-menu.tsx b/src/components/chart/edit-chart-menu.tsx
index 8a7032d0..31dabb3d 100644
--- a/src/components/chart/edit-chart-menu.tsx
+++ b/src/components/chart/edit-chart-menu.tsx
@@ -1,25 +1,17 @@
 "use client";
-import { ChartBar } from "@phosphor-icons/react/dist/icons/ChartBar";
-import { ChartLine } from "@phosphor-icons/react/dist/icons/ChartLine";
-import { ChartPieSlice } from "@phosphor-icons/react/dist/icons/ChartPieSlice";
-import { ChartPolar } from "@phosphor-icons/react/dist/icons/ChartPolar";
-import { ChartScatter } from "@phosphor-icons/react/dist/icons/ChartScatter";
-import { Funnel } from "@phosphor-icons/react/dist/icons/Funnel";
-import { NumberCircleOne } from "@phosphor-icons/react/dist/icons/NumberCircleOne";
-import { Table } from "@phosphor-icons/react/dist/icons/Table";
-import { TextT } from "@phosphor-icons/react/dist/icons/TextT";
-import { ChartBarHorizontal } from "@phosphor-icons/react/dist/ssr";
 import { produce } from "immer";
 import { useTheme } from "next-themes";
 import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
-import ChartBackgroundSelection from "./chart-background-selection";
+import { MenuBar } from "../orbit/menu-bar";
+import { Select } from "../orbit/select";
+import ChartBackgroundSelection, {
+  capitalizeFirstChar,
+} from "./chart-background-selection";
 import { ChartValue, SingleValueFormat, THEMES } from "./chart-type";
-import { ChartTypeButton } from "./chart-type-button";
+import ChartTypeSelection from "./chart-type-selection";
 import ChartYAxisSection from "./chart-y-axis-section";
 import { generateGradientColors } from "./echart-options-builder";
-import { SimpleCombobox } from "./simple-combobox";
 import SimpleInput from "./simple-input";
-import SimpleToggle from "./simple-toggle";
 
 interface EditChartMenuProps {
   value: ChartValue;
@@ -102,25 +94,19 @@ export default function EditChartMenu({
     return (
       <div>
         <p className="mb-1.5 text-sm font-bold opacity-70">X Axis Value</p>
-        <SimpleCombobox
-          values={
-            columns.map((key) => {
-              return {
-                value: key,
-                label: key,
-              };
-            }) ?? []
-          }
-          selected={value.params.options?.xAxisKey ?? ""}
-          placeholder="Select axis key..."
-          onChange={function (v: string): void {
+        <Select
+          size="lg"
+          className="w-full"
+          options={columns}
+          value={value.params.options?.xAxisKey ?? ""}
+          setValue={function (value: string): void {
             onChange((prev) => {
               return produce(prev, (draft) => {
-                draft.params.options.xAxisKey = v;
+                draft.params.options.xAxisKey = value;
               });
             });
           }}
-        ></SimpleCombobox>
+        />
       </div>
     );
   }, [columns, isNotChartComponent, onChange, value.params.options?.xAxisKey]);
@@ -143,18 +129,26 @@ export default function EditChartMenu({
             }}
           />
 
-          <SimpleToggle
-            values={["Show", "Hide"]}
+          <MenuBar
+            size="lg"
+            value={value.params.options?.xAxisLabelHidden ? "hide" : "show"}
             onChange={(v) => {
               onChange((prev) => {
                 return produce(prev, (draft) => {
-                  draft.params.options.xAxisLabelHidden = v === "Hide";
+                  draft.params.options.xAxisLabelHidden = v === "hide";
                 });
               });
             }}
-            selectedValue={
-              value.params.options?.xAxisLabelHidden ? "Hide" : "Show"
-            }
+            items={[
+              {
+                value: "show",
+                content: "Show",
+              },
+              {
+                value: "hide",
+                content: "Hide",
+              },
+            ]}
           />
         </div>
       </div>
@@ -169,63 +163,35 @@ export default function EditChartMenu({
 
   const dataFormatSection = useMemo(() => {
     if (value.type !== "single_value") return null;
-    const dataFormatValues = [
-      {
-        value: "none",
-        label: "None",
-      },
-      {
-        value: "percent",
-        label: "Percent",
-      },
-      {
-        value: "number",
-        label: "Number",
-      },
-      {
-        value: "decimal",
-        label: "Decimal",
-      },
-      {
-        value: "date",
-        label: "Date",
-      },
-      {
-        value: "time",
-        label: "Time",
-      },
-      {
-        value: "dollar",
-        label: "Dollar",
-      },
-      {
-        value: "euro",
-        label: "Euro",
-      },
-      {
-        value: "pound",
-        label: "Pound",
-      },
-      {
-        value: "yen",
-        label: "Yen",
-      },
-    ];
+
     return (
       <div>
         <p className="mb-1.5 text-sm font-bold opacity-70">Data Format</p>
-        <SimpleCombobox
-          values={dataFormatValues}
-          selected={value.params.options?.format ?? "none"}
-          placeholder="Select format..."
-          onChange={function (v: string): void {
+        <Select
+          className="w-full"
+          size="lg"
+          options={[
+            "None",
+            "Percent",
+            "Number",
+            "Decimal",
+            "Date",
+            "Time",
+            "Dollar",
+            "Euro",
+            "Pound",
+            "Yen",
+          ]}
+          setValue={function (value: string): void {
             onChange((prev) => {
               return produce(prev, (draft) => {
-                draft.params.options.format = v as SingleValueFormat;
+                draft.params.options.format =
+                  value.toLowerCase() as SingleValueFormat;
               });
             });
           }}
-        ></SimpleCombobox>
+          value={capitalizeFirstChar(value.params.options?.format ?? "none")}
+        />
       </div>
     );
   }, [onChange, value.params.options?.format, value.type]);
@@ -250,169 +216,58 @@ export default function EditChartMenu({
   }, [onChange, value.type]);
 
   const textColorSection = useMemo(() => {
-    const textColorValues = [
-      {
-        value: "Automatic",
-        label: "Automatic",
-      },
-      {
-        value: "#ffffff",
-        label: "White",
-      },
-      {
-        value: "#000000",
-        label: "Black",
-      },
-    ];
-
     return (
       <div>
         <p className="mb-1.5 pt-2 text-sm font-bold opacity-70">Text Color</p>
-        <SimpleCombobox
-          values={textColorValues}
-          selected={value.params.options?.foreground ?? "Automatic"}
-          placeholder="Select color..."
-          onChange={function (v: string): void {
+        <Select
+          className="w-full"
+          size="lg"
+          options={["Automatic", "White", "Black"]}
+          setValue={function (value: string): void {
             onChange((prev) => {
               return produce(prev, (draft) => {
-                draft.params.options.foreground =
-                  v === "Automatic" ? undefined : v;
+                if (value === "Automatic") {
+                  delete draft.params.options.foreground;
+                } else if (value === "White") {
+                  draft.params.options.foreground = "#ffffff";
+                } else if (value === "Black") {
+                  draft.params.options.foreground = "#000000";
+                }
               });
             });
           }}
-        ></SimpleCombobox>
+          value={
+            value.params.options?.foreground === "#000000"
+              ? "Black"
+              : value.params.options?.foreground === "#ffffff"
+                ? "White"
+                : "Automatic"
+          }
+        />
       </div>
     );
   }, [onChange, value.params.options?.foreground]);
 
   return (
-    <div className="flex w-full flex-col gap-5 p-1 pb-4">
-      <section key={1}>
-        <p className="mb-1.5 text-sm font-bold opacity-70">Chart Type</p>
-        <div className="grid grid-cols-6 gap-2">
-          <ChartTypeButton
-            icon={<ChartLine />}
-            isActive={value.type === "line"}
-            onClick={() => {
-              onChange((prev) => {
-                return produce(prev, (draft) => {
-                  draft.type = "line";
-                });
-              });
-            }}
-            tooltipText="Line"
-          />
-          <ChartTypeButton
-            icon={<ChartBar />}
-            isActive={value.type === "column"}
-            onClick={() => {
-              onChange((prev) => {
-                return produce(prev, (draft) => {
-                  draft.type = "column";
-                });
-              });
-            }}
-            tooltipText="Column"
-          />
-          <ChartTypeButton
-            icon={<ChartBarHorizontal />}
-            isActive={value.type === "bar"}
-            onClick={() => {
-              onChange((prev) => {
-                return produce(prev, (draft) => {
-                  draft.type = "bar";
-                });
-              });
-            }}
-            tooltipText="Bar"
-          />
-          <ChartTypeButton
-            icon={<ChartScatter />}
-            isActive={value.type === "scatter"}
-            onClick={() => {
-              onChange((prev) => {
-                return produce(prev, (draft) => {
-                  draft.type = "scatter";
-                });
-              });
-            }}
-            tooltipText="scatter"
-          />
-          <ChartTypeButton
-            icon={<TextT />}
-            isActive={value.type === "text"}
-            onClick={() => {
-              onChange((prev) => {
-                return produce(prev, (draft) => {
-                  draft.type = "text";
-                });
-              });
-            }}
-            tooltipText="Text"
-          />
-          <ChartTypeButton
-            icon={<NumberCircleOne weight="bold" />}
-            isActive={value.type === "single_value"}
-            onClick={() => {
-              onChange((prev) => {
-                return produce(prev, (draft) => {
-                  draft.type = "single_value";
-                });
-              });
-            }}
-            tooltipText="Single Value"
-          />
-          <ChartTypeButton
-            icon={<Table />}
-            isActive={value.type === "table"}
-            onClick={() => {
-              onChange((prev) => {
-                return produce(prev, (draft) => {
-                  draft.type = "table";
-                });
-              });
-            }}
-            tooltipText="Table"
-          />
-          <ChartTypeButton
-            icon={<ChartPieSlice weight="bold" />}
-            isActive={value.type === "pie"}
-            onClick={() => {
-              onChange((prev) => {
-                return produce(prev, (draft) => {
-                  draft.type = "pie";
-                });
-              });
-            }}
-            tooltipText="Pie"
-          />
-          <ChartTypeButton
-            icon={<ChartPolar />}
-            isActive={value.type === "radar"}
-            onClick={() => {
-              onChange((prev) => {
-                return produce(prev, (draft) => {
-                  draft.type = "radar";
-                });
-              });
-            }}
-            tooltipText="Radar"
-          />
-          <ChartTypeButton
-            icon={<Funnel />}
-            isActive={value.type === "funnel"}
-            onClick={() => {
-              onChange((prev) => {
-                return produce(prev, (draft) => {
-                  draft.type = "funnel";
-                });
-              });
-            }}
-            tooltipText="Funnel"
-          />
-        </div>
-      </section>
+    <div className="flex w-full flex-col gap-2 p-1 pb-4">
+      <p className="mb-1.5 text-sm font-bold opacity-70">Chart Title</p>
+      <SimpleInput
+        value={value.name}
+        onSumit={function (v: string): void {
+          onChange((prev) => {
+            return produce(prev, (draft) => {
+              draft.name = v;
+            });
+          });
+        }}
+      />
 
+      <ChartTypeSelection
+        value={value}
+        onChange={function (value: SetStateAction<ChartValue>): void {
+          onChange(value);
+        }}
+      />
       {textSection}
       {dataFormatSection}
       {xAxisLabelSection}
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
index 10c51c3e..a74bcd9a 100644
--- a/src/components/chart/index.tsx
+++ b/src/components/chart/index.tsx
@@ -126,10 +126,10 @@ const SingleValueComponent = ({ value, data }: OuterbaseChartProps) => {
 const TableComponent = ({ data }: OuterbaseChartProps) => {
   if (data?.length === 0) return;
   return (
-    <div className="w-full overflow-auto rounded border">
-      <table className="w-full border-separate border-spacing-0 text-sm">
-        <thead className="sticky top-0">
-          <tr className="bg-secondary h-[35px] text-xs">
+    <div className="h-full w-full overflow-hidden overflow-x-auto overflow-y-auto rounded border">
+      <table className="border-separate border-spacing-0 text-sm">
+        <thead>
+          <tr className="bg-secondary sticky top-0 h-[35px] text-xs">
             {Object.keys(data[0]).map((key) => (
               <th key={key} className="border-r px-2 text-left">
                 {key}
@@ -141,7 +141,7 @@ const TableComponent = ({ data }: OuterbaseChartProps) => {
           {data.map((row, index) => (
             <tr key={index}>
               {Object.keys(row).map((key) => (
-                <td className="border-t border-r px-4 py-2" key={key}>
+                <td className="border px-4 py-2" key={key}>
                   {row[key] || ""}
                 </td>
               ))}
@@ -252,7 +252,7 @@ export default function Chart(props: OuterbaseChartProps) {
         >
           {props.value.name ?? "New Chart"}
         </h1>
-        <div className="flex-1">
+        <div className="flex-1 overflow-hidden">
           <ChartBody {...props} />
         </div>
       </div>
diff --git a/src/components/chart/simple-combobox.tsx b/src/components/chart/simple-combobox.tsx
deleted file mode 100644
index a9832e8a..00000000
--- a/src/components/chart/simple-combobox.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-
-import { Check, ChevronsUpDown } from "lucide-react";
-import * as React from "react";
-
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
-
-interface SimpleComboValue {
-  value: string;
-  label: string;
-}
-interface SimpleComboboxProps {
-  values: SimpleComboValue[];
-  onChange: (v: string) => void;
-  placeholder?: string;
-  selected?: string;
-  hideArrow?: boolean;
-}
-
-export function SimpleCombobox({
-  values,
-  onChange,
-  placeholder,
-  selected,
-  hideArrow,
-}: SimpleComboboxProps) {
-  const [open, setOpen] = React.useState(false);
-  const [selectedValue, setSelectedValue] = React.useState<string | null>(
-    selected || null
-  );
-
-  React.useEffect(() => {
-    setSelectedValue(selected || null);
-  }, [selected]);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-full justify-between"
-        >
-          {values
-            ? values.find((value) => value.value === selectedValue)?.label
-            : placeholder || ""}
-          {!hideArrow && <ChevronsUpDown className="opacity-50" />}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-full p-0">
-        <Command>
-          <CommandInput placeholder={placeholder} />
-          <CommandList>
-            <CommandEmpty>No framework found.</CommandEmpty>
-            <CommandGroup>
-              {values.map((value, idx) => (
-                <CommandItem
-                  key={idx}
-                  value={value.value}
-                  onSelect={(currentValue) => {
-                    setSelectedValue(currentValue);
-                    onChange(currentValue);
-                    setOpen(false);
-                  }}
-                >
-                  {value.label}
-                  <Check
-                    className={cn(
-                      "ml-auto",
-                      selectedValue === value.value
-                        ? "opacity-100"
-                        : "opacity-0"
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/src/components/chart/simple-input.tsx b/src/components/chart/simple-input.tsx
index 41169c92..f46b74c3 100644
--- a/src/components/chart/simple-input.tsx
+++ b/src/components/chart/simple-input.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import { Input } from "../orbit/input";
 
 interface SimpleInputProps {
   value?: string;
@@ -18,13 +19,17 @@ export default function SimpleInput({
   }, [value]);
 
   return (
-    <input
+    <Input
       className="h-[36px] w-full rounded-md border p-2"
       placeholder={placeholder ?? ""}
       value={text ?? ""}
       onChange={(v) => {
         setText(v.target.value);
       }}
+      size="lg"
+      onBlur={() => {
+        onSumit(text);
+      }}
       onKeyDown={(e) => {
         if (e.key === "Enter") {
           onSumit(text);
diff --git a/src/components/chart/simple-toggle.tsx b/src/components/chart/simple-toggle.tsx
deleted file mode 100644
index c7fe619a..00000000
--- a/src/components/chart/simple-toggle.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-import React from "react";
-import { ButtonGroup, ButtonGroupItem } from "../button-group";
-
-interface SimpleToggleProps {
-  values: string[];
-  onChange: (v: string) => void;
-  selectedValue: string;
-}
-
-export default function SimpleToggle({
-  values,
-  onChange,
-  selectedValue,
-}: SimpleToggleProps) {
-  const [selected, setSelected] = React.useState(selectedValue || values[0]);
-  return (
-    <ButtonGroup>
-      {values.map((value) => (
-        <ButtonGroupItem
-          key={value}
-          onClick={() => {
-            setSelected(value);
-            onChange(value);
-          }}
-          selected={value === selected}
-        >
-          {value}
-        </ButtonGroupItem>
-      ))}
-    </ButtonGroup>
-  );
-}

From fe21847aaa56fa1b98e74c7fe74876e1f2aba1c7 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 10 Feb 2025 20:03:50 +0700
Subject: [PATCH 041/106] improve board chart editor

---
 src/components/board/board-chart-editor.tsx   | 34 ++++++++++++-------
 src/components/board/index.tsx                | 14 ++++----
 .../chart/chart-background-selection.tsx      |  2 +-
 src/components/chart/chart-type-button.tsx    | 15 ++++----
 src/components/chart/chart-type-selection.tsx |  2 +-
 src/components/chart/edit-chart-menu.tsx      | 24 +++++++------
 src/components/chart/index.tsx                | 15 ++++++--
 src/components/ui/command.tsx                 |  4 +--
 8 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index 3498f036..3725b4b7 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -70,7 +70,6 @@ export default function BoardChartEditor() {
       sourceDriver
         .query(sourceId, sql)
         .then((newResult) => {
-          setLoading(false);
           setResult(
             OptimizeTableState.createFromResult({
               result: newResult,
@@ -89,14 +88,19 @@ export default function BoardChartEditor() {
             });
           });
         })
-        .catch();
+        .catch(() => {
+          console.log("error");
+        })
+        .finally(() => {
+          setLoading(false);
+        });
     }
   }, [value, sourceDriver, schema]);
 
   return (
-    <div className="flex flex-1 border-t">
-      <div className="flex flex-1 flex-col">
-        <div className="h-1/2 border-b">
+    <div className="flex flex-1 overflow-hidden border-t">
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <div className="h-1/2 overflow-x-hidden border-b">
           {result && displayType === "table" && <ResultTable data={result} />}
           {result && displayType === "chart" && (
             <Chart data={result.getAllRows().map((r) => r.raw)} value={value} />
@@ -155,7 +159,7 @@ export default function BoardChartEditor() {
               </Button>
             </div>
           </div>
-          <div>
+          <div className="flex-1">
             <SqlEditor
               dialect="sqlite"
               value={value.params.layers[0].sql}
@@ -171,12 +175,18 @@ export default function BoardChartEditor() {
           </div>
         </div>
       </div>
-      <div className="w-[370px] overflow-x-hidden overflow-y-auto border-l p-4">
-        <EditChartMenu
-          value={value}
-          onChange={setValue}
-          columns={result?.getHeaders().map((header) => header.name) ?? []}
-        />
+      <div className="flex w-[370px] shrink-0 flex-col overflow-x-hidden overflow-y-auto border-l">
+        <div className="overflow-y-auto p-4">
+          <EditChartMenu
+            value={value}
+            onChange={setValue}
+            columns={result?.getHeaders().map((header) => header.name) ?? []}
+          />
+        </div>
+        <div className="flex justify-end gap-2 border-t p-4">
+          <Button variant="primary">Save Changes</Button>
+          <Button>Cancel</Button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index fa5c9c61..01f64d2d 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -77,7 +77,7 @@ export default function Board({
       setting={{ autoRefresh, name: value.name }}
       setBoardMode={setEditMode}
     >
-      <div className="flex flex-1 flex-col">
+      <div className="relative flex flex-1 flex-col">
         <BoardFilter
           filters={value.data.filters}
           onFilters={(v) =>
@@ -106,12 +106,6 @@ export default function Board({
           }}
         />
         <div className="relative flex-1">
-          {editMode === "ADD_CHART" && (
-            <div className="bg-background absolute top-0 right-0 bottom-0 left-0 z-10 flex">
-              <BoardChartEditor />
-            </div>
-          )}
-
           <BoardCanvas
             value={value}
             onChange={(v) => {
@@ -125,6 +119,12 @@ export default function Board({
             onRemove={onRemove}
           />
         </div>
+
+        {editMode === "ADD_CHART" && (
+          <div className="bg-background absolute top-0 bottom-0 left-0 z-50 flex w-screen">
+            <BoardChartEditor />
+          </div>
+        )}
       </div>
     </BoardProvider>
   );
diff --git a/src/components/chart/chart-background-selection.tsx b/src/components/chart/chart-background-selection.tsx
index 64148124..50bd6950 100644
--- a/src/components/chart/chart-background-selection.tsx
+++ b/src/components/chart/chart-background-selection.tsx
@@ -100,7 +100,7 @@ export default function ChartBackgroundSelection({
   return (
     <div>
       <p className="mb-1.5 text-sm font-bold opacity-70">Background</p>
-      <div className="flex items-center justify-center pt-2">
+      <div className="flex items-center pt-2">
         <div className="w-[200px]">
           <MenuBar
             size="lg"
diff --git a/src/components/chart/chart-type-button.tsx b/src/components/chart/chart-type-button.tsx
index 943149a6..a7cc79b8 100644
--- a/src/components/chart/chart-type-button.tsx
+++ b/src/components/chart/chart-type-button.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { Button } from "../orbit/button";
 
 interface ChartTypeButtonProps {
   icon: React.ReactNode;
@@ -14,17 +14,14 @@ export function ChartTypeButton({
   icon,
 }: ChartTypeButtonProps) {
   return (
-    <button
-      className={cn(
-        "flex size-[50px] cursor-pointer items-center justify-center rounded-lg border-0 transition-colors",
-        isActive
-          ? "bg-primary text-primary-foreground"
-          : "bg-secondary text-secondary-foreground"
-      )}
+    <Button
+      variant={isActive ? "primary" : "secondary"}
+      size="lg"
+      shape="square"
       onClick={onClick}
       title={tooltipText}
     >
       {icon}
-    </button>
+    </Button>
   );
 }
diff --git a/src/components/chart/chart-type-selection.tsx b/src/components/chart/chart-type-selection.tsx
index 5ca143df..4c4da0a4 100644
--- a/src/components/chart/chart-type-selection.tsx
+++ b/src/components/chart/chart-type-selection.tsx
@@ -25,7 +25,7 @@ export default function ChartTypeSelection({
   return (
     <section key={1}>
       <p className="mb-1.5 text-sm font-bold opacity-70">Chart Type</p>
-      <div className="grid grid-cols-6 gap-2">
+      <div className="flex flex-wrap gap-4">
         <ChartTypeButton
           icon={<ChartLine />}
           isActive={value.type === "line"}
diff --git a/src/components/chart/edit-chart-menu.tsx b/src/components/chart/edit-chart-menu.tsx
index 31dabb3d..939db826 100644
--- a/src/components/chart/edit-chart-menu.tsx
+++ b/src/components/chart/edit-chart-menu.tsx
@@ -2,6 +2,7 @@
 import { produce } from "immer";
 import { useTheme } from "next-themes";
 import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
+import { Label } from "../orbit/label";
 import { MenuBar } from "../orbit/menu-bar";
 import { Select } from "../orbit/select";
 import ChartBackgroundSelection, {
@@ -249,18 +250,19 @@ export default function EditChartMenu({
   }, [onChange, value.params.options?.foreground]);
 
   return (
-    <div className="flex w-full flex-col gap-2 p-1 pb-4">
-      <p className="mb-1.5 text-sm font-bold opacity-70">Chart Title</p>
-      <SimpleInput
-        value={value.name}
-        onSumit={function (v: string): void {
-          onChange((prev) => {
-            return produce(prev, (draft) => {
-              draft.name = v;
+    <div className="flex w-full flex-col gap-4 p-1 pb-4">
+      <Label title="Chart Title">
+        <SimpleInput
+          value={value.name}
+          onSumit={function (v: string): void {
+            onChange((prev) => {
+              return produce(prev, (draft) => {
+                draft.name = v;
+              });
             });
-          });
-        }}
-      />
+          }}
+        />
+      </Label>
 
       <ChartTypeSelection
         value={value}
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
index a74bcd9a..d46826b6 100644
--- a/src/components/chart/index.tsx
+++ b/src/components/chart/index.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { cn } from "@/lib/utils";
 import * as echarts from "echarts";
 import { EChartsOption } from "echarts";
 import { useTheme } from "next-themes";
@@ -173,11 +174,12 @@ const ChartComponent = ({ value, data }: OuterbaseChartProps) => {
       const currentDomRef = domRef.current;
       const chartInstance =
         echarts.getInstanceByDom(currentDomRef) || echarts.init(currentDomRef);
-      // chartInstance.clear();
 
       const chartBuilder = chartBuilderRef.current;
       chartBuilder.setTheme((forcedTheme ?? resolvedTheme) as "light" | "dark");
 
+      chartInstance.setOption(chartBuilder.getChartOptions(), true);
+
       // handle resize event
       const resizeObserver = new ResizeObserver((entries) => {
         requestAnimationFrame(() => {
@@ -186,7 +188,9 @@ const ChartComponent = ({ value, data }: OuterbaseChartProps) => {
               const { width, height } = entry.contentRect;
               chartBuilder.chartHeight = height;
               chartBuilder.chartWidth = width;
+
               chartInstance.resize();
+
               if (timerRef.current) {
                 clearTimeout(timerRef.current);
               }
@@ -244,8 +248,13 @@ export default function Chart(props: OuterbaseChartProps) {
   }
 
   return (
-    <div className="flex h-full w-full p-6" style={backGroundStyle}>
-      <div className="dark:shadow-accent flex h-full w-full flex-col rounded-lg p-2 shadow-2xl backdrop-blur-lg backdrop-brightness-100 dark:backdrop-brightness-100">
+    <div className="flex h-full w-full flex-1 p-6" style={backGroundStyle}>
+      <div
+        className={cn("flex h-full w-full flex-col rounded-lg p-2", {
+          "dark:shadow-accent shadow-2xl backdrop-blur-lg backdrop-brightness-100 dark:backdrop-brightness-100":
+            props.value.params.options?.backgroundType === "image",
+        })}
+      >
         <h1
           className="mb-4 text-lg font-semibold"
           style={{ color: props.value.params.options?.foreground }}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 50ee74d1..9935a54c 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -87,7 +87,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-medium",
       className
     )}
     {...props}
@@ -131,7 +131,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "text-muted-foreground ml-auto text-sm tracking-widest",
         className
       )}
       {...props}

From 9f0c226e10952352947037abe82b758cf2981822 Mon Sep 17 00:00:00 2001
From: Sokphal Adam <31284849+sokphaladam@users.noreply.github.com>
Date: Mon, 10 Feb 2025 20:04:07 +0700
Subject: [PATCH 042/106] Improve chart board (#351)

* try to use outerbase board data with our board

* refactor: improve board canvas item mapping and tooltip structure

* refactor: enhance toggle item styling based on edit mode

* plug chart inside

* require workspace to load

* refactor: menu layout and create refresh board

* refactor: improve chart component imports and style definitions

* add header and loading

* refactor: update BoardTool and BoardProvider components

* refactor: improve board canvas item mapping and save edit layout

* refactor: remove console.log statement

* refactor: improve board page editor and board component

---------

Co-authored-by: Visal .In <invisal@gmail.com>
Co-authored-by: sokphaladam <sokphaladam@sokphaladams-MacBook-Air.local>
---
 src/components/board/board-filter-dialog.tsx  |  12 +-
 src/components/board/board-filter.tsx         | 118 ++++++++++--------
 .../board/board-tool/board-button-menu.tsx    |  71 ++++++++++-
 .../board/board-tool/board-title-menu.tsx     |  27 ++++
 .../board/board-tool/board-toolbar.tsx        |  35 ++++--
 src/components/board/index.tsx                |  12 +-
 src/components/circular-progress-bar.tsx      |  55 ++++++++
 7 files changed, 248 insertions(+), 82 deletions(-)
 create mode 100644 src/components/board/board-tool/board-title-menu.tsx
 create mode 100644 src/components/circular-progress-bar.tsx

diff --git a/src/components/board/board-filter-dialog.tsx b/src/components/board/board-filter-dialog.tsx
index de3efcce..572d633a 100644
--- a/src/components/board/board-filter-dialog.tsx
+++ b/src/components/board/board-filter-dialog.tsx
@@ -19,7 +19,7 @@ import {
 export interface BoardFilterProps {
   type: string;
   name: string;
-  default_value: string;
+  defaultValue: string;
   value: string;
   new?: boolean;
 }
@@ -34,7 +34,7 @@ interface Props {
 const DEFAULT_EMPTY = {
   type: "search",
   name: "",
-  default_value: "",
+  defaultValue: "",
   value: "",
 };
 
@@ -135,20 +135,20 @@ export function BoardFilterDialog(props: Props) {
             {props.filter.type === "search" ? (
               <Input
                 placeholder="Enter default value"
-                value={props.filter.default_value}
+                value={props.filter.defaultValue}
                 onChange={(v) =>
                   props.onFilter({
                     ...props.filter,
-                    default_value: v.target.value,
+                    defaultValue: v.target.value,
                   })
                 }
               />
             ) : (
               <Select
                 disabled={default_value.length === 0}
-                value={props.filter.default_value}
+                value={props.filter.defaultValue}
                 onValueChange={(v) =>
-                  props.onFilter({ ...props.filter, default_value: v })
+                  props.onFilter({ ...props.filter, defaultValue: v })
                 }
               >
                 <SelectTrigger>
diff --git a/src/components/board/board-filter.tsx b/src/components/board/board-filter.tsx
index 31004fef..89a71e96 100644
--- a/src/components/board/board-filter.tsx
+++ b/src/components/board/board-filter.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { produce } from "immer";
 import {
   CalendarDays,
   Check,
@@ -8,6 +9,7 @@ import {
   Search,
 } from "lucide-react";
 import { useCallback, useState } from "react";
+import { DashboardProps } from ".";
 import { buttonVariants } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import {
@@ -17,17 +19,11 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import {
-  BoardFilterDialog,
-  BoardFilterProps,
-  DEFAULT_DATE_FILTER,
-} from "./board-filter-dialog";
+import { BoardFilterDialog, DEFAULT_DATE_FILTER } from "./board-filter-dialog";
 import { BoardTool } from "./board-tool/board-tool";
 import { BoardToolbar } from "./board-tool/board-toolbar";
 
 interface Props {
-  filters: BoardFilterProps[];
-  onFilters: (f: BoardFilterProps[]) => void;
   editMode: "ADD_CHART" | "REARRANGING_CHART" | null;
   onChangeEditMode: (v: "ADD_CHART" | "REARRANGING_CHART" | null) => void;
   interval: number;
@@ -35,6 +31,8 @@ interface Props {
   onRefresh?: () => void;
   onSave: () => void;
   onCancel: () => void;
+  value: DashboardProps;
+  onChange: (v: DashboardProps) => void;
 }
 
 export function BoardFilter(props: Props) {
@@ -43,22 +41,21 @@ export function BoardFilter(props: Props) {
   const [selectIndex, setSelectIndex] = useState<number | undefined>(undefined);
 
   const onFilter = useCallback(() => {
-    const data = [
-      ...props.filters,
-      {
+    const data = produce(props.value, (draft) => {
+      draft.data.filters.push({
         type: "search",
-        default_value: "",
+        defaultValue: "",
         value: "",
         name: "",
         new: true,
-      },
-    ];
-    props.onFilters(data);
-    setSelectIndex(data.length - 1);
+      });
+    });
+    props.onChange(data);
+    setSelectIndex(data.data.filters.length - 1);
     setOpen(true);
   }, [props]);
 
-  const mapFilterItem = props.filters.map((x, i) => {
+  const mapFilterItem = props.value.data.filters.map((x, i) => {
     const icon =
       x.type === "search" ? (
         <Search className="h-3 w-3" />
@@ -71,11 +68,14 @@ export function BoardFilter(props: Props) {
       x.type === "search" ? (
         <input
           placeholder={`Enter ${x.name}`}
-          value={x.default_value}
+          value={x.defaultValue}
           onChange={(v) => {
-            const data = structuredClone(props.filters);
-            data[i].default_value = v.target.value;
-            props.onFilters(data);
+            const data = structuredClone(props.value.data.filters);
+            data[i].defaultValue = v.target.value;
+            const value = produce(props.value, (draft) => {
+              draft.data.filters = data;
+            });
+            props.onChange(value);
           }}
           className="max-w-14 outline-0"
         />
@@ -85,12 +85,12 @@ export function BoardFilter(props: Props) {
             <PopoverTrigger asChild>
               <div
                 className={
-                  x.default_value
+                  x.defaultValue
                     ? "px-2 py-1"
                     : "text-muted-foreground px-2 py-1"
                 }
               >
-                <div>{x.default_value || `Select ${x.name}`}</div>
+                <div>{x.defaultValue || `Select ${x.name}`}</div>
               </div>
             </PopoverTrigger>
             <PopoverContent className="w-auto">
@@ -102,22 +102,25 @@ export function BoardFilter(props: Props) {
                   >
                     <Checkbox
                       id={v + idx}
-                      checked={x.default_value.split(",").includes(v)}
+                      checked={x.defaultValue.split(",").includes(v)}
                       onCheckedChange={(checked) => {
-                        const value = x.default_value.split(",");
-                        const data = structuredClone(props.filters);
+                        const valueString = x.defaultValue.split(",");
+                        const data = structuredClone(props.value.data.filters);
 
                         if (checked) {
-                          data[i].default_value = [...value, v]
+                          data[i].defaultValue = [...valueString, v]
                             .filter((f) => !!f)
                             .join(",");
                         } else {
-                          value.filter((f) => f !== v);
-                          data[i].default_value = value
+                          valueString.filter((f) => f !== v);
+                          data[i].defaultValue = valueString
                             .filter((f) => f !== v)
                             .join(",");
                         }
-                        props.onFilters(data);
+                        const value = produce(props.value, (draft) => {
+                          draft.data.filters = data;
+                        });
+                        props.onChange(value);
                       }}
                     />
                     <label htmlFor={v + idx}>{v}</label>
@@ -132,12 +135,10 @@ export function BoardFilter(props: Props) {
           <DropdownMenuTrigger asChild>
             <div
               className={
-                x.default_value
-                  ? "px-2 py-1"
-                  : "text-muted-foreground px-2 py-1"
+                x.defaultValue ? "px-2 py-1" : "text-muted-foreground px-2 py-1"
               }
             >
-              <div>{x.default_value || `Select ${x.name}`}</div>
+              <div>{x.defaultValue || `Select ${x.name}`}</div>
             </div>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -146,14 +147,17 @@ export function BoardFilter(props: Props) {
                 <DropdownMenuItem
                   key={date}
                   onClick={() => {
-                    const data = structuredClone(props.filters);
-                    data[i].default_value = date;
-                    props.onFilters(data);
+                    const data = structuredClone(props.value.data.filters);
+                    data[i].defaultValue = date;
+                    const value = produce(props.value, (draft) => {
+                      draft.data.filters = data;
+                    });
+                    props.onChange(value);
                   }}
                 >
                   <div className="flex items-center gap-2">
                     {date}
-                    {date === x.default_value && <Check className="h-3 w-3" />}
+                    {date === x.defaultValue && <Check className="h-3 w-3" />}
                   </div>
                 </DropdownMenuItem>
               );
@@ -172,7 +176,7 @@ export function BoardFilter(props: Props) {
         </div>
         <div
           className={
-            x.default_value ? "px-2 py-1" : "text-muted-foreground px-2 py-1"
+            x.defaultValue ? "px-2 py-1" : "text-muted-foreground px-2 py-1"
           }
         >
           {input}
@@ -196,9 +200,12 @@ export function BoardFilter(props: Props) {
             <DropdownMenuItem
               className="text-xs"
               onClick={() => {
-                props.onFilters([
-                  ...props.filters.filter((_, idx) => idx !== i),
-                ]);
+                const value = produce(props.value, (draft) => {
+                  draft.data.filters = props.value.data.filters.filter(
+                    (_, idx) => idx !== i
+                  );
+                });
+                props.onChange(value);
               }}
             >
               Remove
@@ -225,30 +232,41 @@ export function BoardFilter(props: Props) {
           mode={props.editMode}
           onSave={props.onSave}
           onCancel={props.onCancel}
+          value={props.value}
+          onChangeValue={props.onChange}
         />
         <div className={show ? "px-2 pt-4" : "hidden"}>
           {open && selectIndex !== undefined && (
             <BoardFilterDialog
               onClose={() => {
                 setOpen(false);
-                if (props.filters[selectIndex].new === true) {
-                  props.onFilters([
-                    ...props.filters.filter((_, i) => i !== selectIndex),
-                  ]);
+                if (props.value.data.filters[selectIndex].new === true) {
+                  const value = produce(props.value, (draft) => {
+                    draft.data.filters = props.value.data.filters.filter(
+                      (_, i) => i !== selectIndex
+                    );
+                  });
+                  props.onChange(value);
                   setSelectIndex(undefined);
                 }
               }}
-              filter={props.filters[selectIndex]}
+              filter={props.value.data.filters[selectIndex]}
               onFilter={(v) => {
-                const data = structuredClone(props.filters);
+                const data = structuredClone(props.value.data.filters);
                 data[selectIndex] = v;
-                props.onFilters(data);
+                const value = produce(props.value, (draft) => {
+                  draft.data.filters = data;
+                });
+                props.onChange(value);
               }}
               onAddFilter={() => {
-                const data = structuredClone(props.filters);
+                const data = structuredClone(props.value.data.filters);
                 data[selectIndex].new = false;
                 setOpen(false);
-                props.onFilters(data);
+                const value = produce(props.value, (draft) => {
+                  draft.data.filters = data;
+                });
+                props.onChange(value);
               }}
             />
           )}
diff --git a/src/components/board/board-tool/board-button-menu.tsx b/src/components/board/board-tool/board-button-menu.tsx
index 6b451f51..51da6c73 100644
--- a/src/components/board/board-tool/board-button-menu.tsx
+++ b/src/components/board/board-tool/board-button-menu.tsx
@@ -1,3 +1,4 @@
+import { CircularProgressBar } from "@/components/circular-progress-bar";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -6,7 +7,9 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { convertTimeToMilliseconds } from "@/lib/convertNumber";
+import { cn } from "@/lib/utils";
 import { ChevronDown, RefreshCcw } from "lucide-react";
+import { useEffect, useState } from "react";
 import { useBoardContext } from "../board-provider";
 
 interface Props {
@@ -18,8 +21,48 @@ interface Props {
   onCancel: () => void;
 }
 
+function useAutoRefresh(interval: number) {
+  const [isActive, setIsActive] = useState(false);
+  const [isReset, setIsReset] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(interval / 1000);
+
+  useEffect(() => {
+    setIsReset(true);
+    setTimeLeft(0);
+  }, [interval]);
+
+  useEffect(() => {
+    if (interval > 0 && isReset) {
+      setTimeLeft(interval / 1000);
+      setIsActive(true);
+      setIsReset(false);
+    }
+  }, [interval, isReset]);
+
+  useEffect(() => {
+    if (timeLeft > 0 && isActive) {
+      const run = setInterval(() => {
+        setTimeLeft((prev) => {
+          if (prev <= 1) {
+            setIsActive(false);
+            setIsReset(true);
+            clearInterval(run);
+            return 0;
+          }
+          return timeLeft - 1;
+        });
+      }, 1000);
+
+      return () => clearInterval(run);
+    }
+  }, [interval, isActive, timeLeft]);
+
+  return timeLeft;
+}
+
 export function BoardButtonMenu(props: Props) {
   const { setting, setBoardMode } = useBoardContext();
+  const timeleft = useAutoRefresh(props.interval);
 
   if (props.mode === "REARRANGING_CHART") {
     return (
@@ -34,6 +77,12 @@ export function BoardButtonMenu(props: Props) {
     );
   }
 
+  const autoIntervalSelected = setting?.autoRefresh.find(
+    (f) => convertTimeToMilliseconds(f) === props.interval
+  );
+
+  const progress = (timeleft * 100000) / props.interval;
+
   return (
     <div className="flex gap-2">
       <button
@@ -46,12 +95,27 @@ export function BoardButtonMenu(props: Props) {
           <div>
             <RefreshCcw className="h-4 w-4" />
           </div>
-          <div>{props.interval === 0 ? "" : `${props.interval / 1000}s`}</div>
         </div>
       </button>
+
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <button className={buttonVariants({ size: "sm", variant: "ghost" })}>
+          <button
+            className={cn(
+              buttonVariants({ size: "sm", variant: "ghost" }),
+              "gap-2"
+            )}
+          >
+            {props.interval > 0 && (
+              <div className="relative h-4 w-4 pt-[3%]">
+                <CircularProgressBar
+                  value={progress}
+                  size={15}
+                  strokeWidth={3}
+                />
+              </div>
+            )}
+            {props.interval > 0 && <div>{autoIntervalSelected}</div>}
             <ChevronDown className="h-4 w-4" />
           </button>
         </DropdownMenuTrigger>
@@ -67,7 +131,8 @@ export function BoardButtonMenu(props: Props) {
           <DropdownMenuCheckboxItem
             checked={props.interval === convertTimeToMilliseconds("5m")}
             onClick={() => {
-              props.onChangeInterval(convertTimeToMilliseconds("5m"));
+              const time = convertTimeToMilliseconds("5m");
+              props.onChangeInterval(time);
             }}
           >
             Auto
diff --git a/src/components/board/board-tool/board-title-menu.tsx b/src/components/board/board-tool/board-title-menu.tsx
new file mode 100644
index 00000000..d7ef72fa
--- /dev/null
+++ b/src/components/board/board-tool/board-title-menu.tsx
@@ -0,0 +1,27 @@
+import { produce } from "immer";
+import { DashboardProps } from "..";
+
+interface Props {
+  value: DashboardProps;
+  onChange: (v: DashboardProps) => void;
+  onSave: () => void;
+}
+
+export function BoardTitleMenu(props: Props) {
+  return (
+    <div className="flex items-center">
+      <input
+        value={props.value.name}
+        className="truncate bg-inherit text-center outline-0"
+        onChange={(e) =>
+          props.onChange(
+            produce(props.value, (draft) => {
+              draft.name = e.target.value;
+            })
+          )
+        }
+        onBlur={props.onSave}
+      />
+    </div>
+  );
+}
diff --git a/src/components/board/board-tool/board-toolbar.tsx b/src/components/board/board-tool/board-toolbar.tsx
index e7c3baf1..8098dd15 100644
--- a/src/components/board/board-tool/board-toolbar.tsx
+++ b/src/components/board/board-tool/board-toolbar.tsx
@@ -1,7 +1,8 @@
 import { useCallback } from "react";
+import { DashboardProps } from "..";
 import { buttonVariants } from "../../ui/button";
-import { useBoardContext } from "../board-provider";
 import { BoardButtonMenu } from "./board-button-menu";
+import { BoardTitleMenu } from "./board-title-menu";
 
 interface Props {
   show: boolean;
@@ -12,18 +13,18 @@ interface Props {
   mode?: "ADD_CHART" | "REARRANGING_CHART" | null;
   onSave: () => void;
   onCancel: () => void;
+  value: DashboardProps;
+  onChangeValue: (v: DashboardProps) => void;
 }
 
 export function BoardToolbar(props: Props) {
-  const { setting } = useBoardContext();
-
   const toggleShow = useCallback(() => {
     props.onChangeShow(!props.show);
   }, [props]);
 
   return (
     <div className="flex items-center justify-between border border-x-0 px-1 py-2">
-      <div>
+      <div className="w-1/3">
         <button
           className={buttonVariants({ size: "sm", variant: "ghost" })}
           onClick={toggleShow}
@@ -31,15 +32,23 @@ export function BoardToolbar(props: Props) {
           {props.show ? "Hide" : "Show"} Filter
         </button>
       </div>
-      <div>{setting?.name}</div>
-      <BoardButtonMenu
-        interval={props.interval}
-        mode={props.mode}
-        onChangeInterval={props.onChange}
-        onRefresh={props.onRefresh}
-        onCancel={props.onCancel}
-        onSave={props.onSave}
-      />
+      <div className="flex w-1/3 justify-center">
+        <BoardTitleMenu
+          value={props.value}
+          onChange={props.onChangeValue}
+          onSave={props.onSave}
+        />
+      </div>
+      <div className="flex w-1/3 items-end justify-end">
+        <BoardButtonMenu
+          interval={props.interval}
+          mode={props.mode}
+          onChangeInterval={props.onChange}
+          onRefresh={props.onRefresh}
+          onCancel={props.onCancel}
+          onSave={props.onSave}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index 01f64d2d..d1a2db35 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -79,16 +79,8 @@ export default function Board({
     >
       <div className="relative flex flex-1 flex-col">
         <BoardFilter
-          filters={value.data.filters}
-          onFilters={(v) =>
-            onChange({
-              ...value,
-              data: {
-                ...value.data,
-                filters: v,
-              },
-            })
-          }
+          value={value}
+          onChange={onChange}
           editMode={editMode}
           onChangeEditMode={setEditMode}
           interval={interval}
diff --git a/src/components/circular-progress-bar.tsx b/src/components/circular-progress-bar.tsx
new file mode 100644
index 00000000..78ed72e2
--- /dev/null
+++ b/src/components/circular-progress-bar.tsx
@@ -0,0 +1,55 @@
+import type React from "react";
+
+interface CircularProgressBarProps {
+  value: number;
+  max?: number;
+  size?: number;
+  strokeWidth?: number;
+  backgroundColor?: string;
+  progressColor?: string;
+}
+
+export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
+  value,
+  max = 100,
+  size = 120,
+  strokeWidth = 12,
+  backgroundColor = "var(--bg-secondary)",
+  progressColor = "#3b82f6",
+}) => {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const progress = (value / max) * 100;
+  const strokeDashoffset = circumference - (progress / 100) * circumference;
+
+  return (
+    <div className="relative inline-flex items-center justify-center">
+      <svg className="-rotate-90 transform" width={size} height={size}>
+        <circle
+          className="text-secondary"
+          strokeWidth={strokeWidth}
+          stroke={backgroundColor}
+          fill="transparent"
+          r={radius}
+          cx={size / 2}
+          cy={size / 2}
+        />
+        <circle
+          className="text-blue-600"
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+          stroke={progressColor}
+          fill="transparent"
+          r={radius}
+          cx={size / 2}
+          cy={size / 2}
+        />
+      </svg>
+      {/* <span className="absolute text-xs text-blue-700">
+        {Math.round(progress)}
+      </span> */}
+    </div>
+  );
+};

From d61266992cfcfd31b6fed7100490a522d63b742e Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Mon, 10 Feb 2025 20:04:29 +0700
Subject: [PATCH 043/106] improve data catalog (#350)

---
 .../data-catalog/data-catalog-entry-modal.tsx | 183 +++++++-----------
 .../data-catalog/data-catalog-tab.tsx         |  42 ++--
 .../data-catalog-table-accordion.tsx          |  14 +-
 .../data-catalog-table-column-modal.tsx       |  22 +--
 .../data-catalog-table-column.tsx             |  57 ++----
 .../data-catalog/data-model-tab.tsx           |  35 ++--
 .../data-catalog/empty-definition.tsx         |   2 +-
 .../data-catalog/table-metadata-modal.tsx     |  36 ++--
 .../data-catalog/table-result-header.tsx      |   2 +-
 .../data-catalog/virtual-column.tsx           |  52 ++---
 .../data-catalog/virtual-join-modal.tsx       |  13 +-
 11 files changed, 192 insertions(+), 266 deletions(-)

diff --git a/src/extensions/data-catalog/data-catalog-entry-modal.tsx b/src/extensions/data-catalog/data-catalog-entry-modal.tsx
index 92a86d5f..a8db5eaa 100644
--- a/src/extensions/data-catalog/data-catalog-entry-modal.tsx
+++ b/src/extensions/data-catalog/data-catalog-entry-modal.tsx
@@ -1,62 +1,30 @@
 import { ToolbarFiller } from "@/components/gui/toolbar";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
+import { Input } from "@/components/orbit/input";
 import {
-  Dialog,
-  DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { OuterbaseDataCatalogDefinition } from "@/outerbase-cloud/api-type";
-import { LucideLoader } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import DataCatalogDriver, { DataCatalogTermDefinition } from "./driver";
 
 interface Props {
   driver?: DataCatalogDriver;
-  open: boolean;
-  onClose: (open: boolean) => void;
+  onClose: () => void;
   definition?: OuterbaseDataCatalogDefinition;
 }
 
-export function DataCatalogEntryModal({
-  open,
-  onClose,
-  driver,
-  definition,
-}: Props) {
+export function DataCatalogEntryModal({ onClose, driver, definition }: Props) {
   const [deleting, setDeleting] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [formData, setFormData] = useState<DataCatalogTermDefinition>({
-    id: "",
-    name: "",
-    otherNames: "",
-    definition: "",
-  });
-
-  const clear = useCallback(() => {
-    setLoading(false);
-    setDeleting(false);
-    onClose(false);
-    setFormData({
-      id: "",
-      name: "",
-      otherNames: "",
-      definition: "",
-    });
-  }, [onClose]);
-
-  useEffect(() => {
-    if (definition) {
-      setFormData(definition);
-    } else {
-      clear();
-    }
-  }, [definition, clear]);
+  const [formData, setFormData] = useState<DataCatalogTermDefinition>(() => ({
+    ...definition,
+  }));
 
   const saveTermDefinition = useCallback(() => {
     setLoading(true);
@@ -68,8 +36,8 @@ export function DataCatalogEntryModal({
     driver
       ?.updateTermDefinition(data)
       .then()
-      .finally(() => clear());
-  }, [formData, driver, clear, definition]);
+      .finally(() => onClose());
+  }, [formData, driver, definition, onClose]);
 
   function onDelete() {
     if (!definition) return;
@@ -78,7 +46,7 @@ export function DataCatalogEntryModal({
     driver
       ?.deleteTermDefinition(definition.id)
       .then()
-      .finally(() => clear());
+      .finally(() => onClose());
   }
 
   const onChangeValue = useCallback(
@@ -92,78 +60,73 @@ export function DataCatalogEntryModal({
   );
 
   return (
-    <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>{definition ? "Edit Term" : "Add Term"}</DialogTitle>
-        </DialogHeader>
-        <DialogDescription>
-          {definition
-            ? "Modify the existing term definition."
-            : "Add terms to your Data Dictionary to help your team and AI understand important business terminology."}
-        </DialogDescription>
-        <div className="grid gap-4 py-4">
-          <div className="items-center gap-4">
-            <Label className="text-right text-xs">
+    <>
+      <DialogHeader>
+        <DialogTitle>{definition ? "Edit Term" : "Add Term"}</DialogTitle>
+      </DialogHeader>
+      <DialogDescription className="text-base">
+        {definition
+          ? "Modify the existing term definition."
+          : "Add terms to your Data Dictionary to help your team and AI understand important business terminology."}
+      </DialogDescription>
+      <div className="grid gap-4 py-4">
+        <div className="gap-4">
+          <div>
+            <Label className="text-right text-sm">
               Dictionary Term <span className="text-red-400">*</span>
             </Label>
-            <Input
-              value={formData.name}
-              placeholder="Add a name"
-              className="col-span-3"
-              onChange={(e) => onChangeValue(e.currentTarget.value, "name")}
-            />
-          </div>
-          <div className="items-center gap-4">
-            <Label className="text-right text-xs">Other Names</Label>
-            <Input
-              value={formData.otherNames}
-              className="col-span-3"
-              placeholder="Add other names"
-              onChange={(e) =>
-                onChangeValue(e.currentTarget.value, "otherNames")
-              }
-            />
           </div>
-          <div className="items-center gap-4">
-            <Label className="text-right text-xs">
-              Definition <span className="text-red-400">*</span>
-            </Label>
-            <Textarea
-              rows={4}
-              value={formData.definition}
-              className="col-span-3"
-              placeholder="Add a definition"
-              onChange={(e) =>
-                onChangeValue(e.currentTarget.value, "definition")
-              }
-            />
+          <Input
+            value={formData.name}
+            placeholder="Add a name"
+            className="w-full"
+            onValueChange={(value) => onChangeValue(value, "name")}
+          />
+        </div>
+        <div className="gap-4">
+          <div>
+            <Label className="text-right text-sm">Other Names</Label>
           </div>
+          <Input
+            value={formData.otherNames}
+            placeholder="Add other names"
+            className="w-full"
+            onChange={(e) => onChangeValue(e.currentTarget.value, "otherNames")}
+          />
+        </div>
+        <div className="gap-4">
+          <Label className="text-right text-sm">
+            Definition <span className="text-red-400">*</span>
+          </Label>
+          <Textarea
+            rows={4}
+            value={formData.definition}
+            className="text-base"
+            placeholder="Add a definition"
+            onChange={(e) => onChangeValue(e.currentTarget.value, "definition")}
+          />
         </div>
-        <DialogFooter>
+      </div>
+      <DialogFooter>
+        <Button
+          loading={loading}
+          disabled={loading || !formData.name || !formData.definition}
+          onClick={saveTermDefinition}
+          title={definition ? "Save Change" : "Add Entry"}
+          shape="base"
+        />
+        {definition && (
           <Button
-            disabled={loading || !formData.name || !formData.definition}
-            onClick={saveTermDefinition}
-            type="submit"
-          >
-            {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
-            {definition ? "Save Change" : "Add Entry"}
-          </Button>
-          {definition && (
-            <Button
-              disabled={deleting}
-              onClick={onDelete}
-              variant="destructive"
-            >
-              {deleting && (
-                <LucideLoader className="mr-1 h-4 w-4 animate-spin" />
-              )}
-              Delete
-            </Button>
-          )}
-          <ToolbarFiller />
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+            loading={deleting}
+            disabled={deleting}
+            onClick={onDelete}
+            variant="destructive"
+            title="Delete"
+            shape="base"
+          />
+        )}
+        <ToolbarFiller />
+      </DialogFooter>
+    </>
   );
 }
diff --git a/src/extensions/data-catalog/data-catalog-tab.tsx b/src/extensions/data-catalog/data-catalog-tab.tsx
index 3c20776e..6bd99ef6 100644
--- a/src/extensions/data-catalog/data-catalog-tab.tsx
+++ b/src/extensions/data-catalog/data-catalog-tab.tsx
@@ -1,5 +1,6 @@
 import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { useConfig } from "@/context/config-provider";
 import { OuterbaseDataCatalogDefinition } from "@/outerbase-cloud/api-type";
 import { useEffect, useState } from "react";
@@ -24,16 +25,17 @@ export default function DataCatalogTab() {
     useState<OuterbaseDataCatalogDefinition>();
 
   useEffect(() => {
+    if (!driver) return;
     const getDataCatalog = () => {
       setDataCatalog(driver?.getTermDefinitions() || []);
     };
 
     getDataCatalog();
 
-    const unsubscribe = driver?.addEventListener(getDataCatalog);
+    const unsubscribe = driver.addEventListener(getDataCatalog);
 
     return () => unsubscribe;
-  }, []);
+  }, [driver]);
 
   function onOpenModal() {
     setOpen(true);
@@ -50,15 +52,19 @@ export default function DataCatalogTab() {
         <Toolbar>
           <div>Data Catalog</div>
           <ToolbarFiller />
-          <Button size="sm" onClick={onOpenModal}>
-            Add Entry
-          </Button>
-          <DataCatalogEntryModal
-            open={open}
-            onClose={setOpen}
-            driver={driver}
-            definition={definition}
-          />
+          <Button title="Add Entry" size="sm" onClick={onOpenModal} />
+
+          <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent className="sm:max-w-[425px]">
+              {open && (
+                <DataCatalogEntryModal
+                  onClose={() => setOpen(false)}
+                  driver={driver}
+                  definition={definition}
+                />
+              )}
+            </DialogContent>
+          </Dialog>
         </Toolbar>
       </div>
       <div className="flex-1 gap-5 overflow-scroll p-10 pb-0">
@@ -68,7 +74,7 @@ export default function DataCatalogTab() {
               ? "Get started with Data Catalog"
               : "Definitions"}
           </div>
-          <div className="text-sm">
+          <div className="text-base">
             {dataCatalog?.length === 0
               ? " Provide explanations for terminology in your schema. EZQL will use this to make running queries more efficient and accurate."
               : "Defined terms to be used in your product."}
@@ -85,9 +91,13 @@ export default function DataCatalogTab() {
             }}
           />
         )}
-        <Button className="mt-10 mb-10" onClick={onOpenModal}>
-          {dataCatalog?.length === 0 ? "Create your first entry" : "Add Entry"}
-        </Button>
+        <Button
+          title={
+            dataCatalog?.length === 0 ? "Create your first entry" : "Add Entry"
+          }
+          className="mt-10 mb-10"
+          onClick={onOpenModal}
+        />
       </div>
     </div>
   );
diff --git a/src/extensions/data-catalog/data-catalog-table-accordion.tsx b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
index 43135a70..bb9096cb 100644
--- a/src/extensions/data-catalog/data-catalog-table-accordion.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
 import {
   Collapsible,
   CollapsibleContent,
@@ -49,7 +49,7 @@ export default function DataCatalogTableAccordion({
     (id: string) => {
       driver.deleteVirtualColumn(table.schemaName, table.tableName!, id);
     },
-    [driver, modelTable, table]
+    [driver, table]
   );
 
   const onToggleHideFromEzql = useCallback(
@@ -167,9 +167,9 @@ export default function DataCatalogTableAccordion({
               </div>
 
               {tableMetadata && (
-                <div className="mt-1 mb-2">
+                <div className="mt-2 mb-2">
                   {tableMetadata.alias !== table.tableName && (
-                    <div className="text-xs font-medium text-neutral-500">
+                    <div className="text-sm font-medium text-neutral-500">
                       The table formerly known as{" "}
                       <span className="text-white italic">
                         {table.tableName}
@@ -177,7 +177,9 @@ export default function DataCatalogTableAccordion({
                     </div>
                   )}
                   {tableMetadata?.body && (
-                    <div className="mt-1">{tableMetadata?.body}</div>
+                    <div className="mt-2 text-base font-semibold">
+                      {tableMetadata?.body}
+                    </div>
                   )}
                 </div>
               )}
@@ -186,7 +188,7 @@ export default function DataCatalogTableAccordion({
             <div className="flex items-center gap-2">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button size="icon" variant="ghost">
+                  <Button size="base" variant="ghost">
                     <LucideMoreHorizontal className="h-4 w-4" />
                   </Button>
                 </DropdownMenuTrigger>
diff --git a/src/extensions/data-catalog/data-catalog-table-column-modal.tsx b/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
index bbb2326b..26210ea3 100644
--- a/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
 import {
   DialogDescription,
   DialogFooter,
@@ -90,14 +90,14 @@ export default function DataCatalogTableColumnModal({
         setLoading(false);
         onClose();
       });
-  }, [driver, column, onClose, schemaName, tableName]);
+  }, [driver, column, onClose, schemaName, tableName, modelColumn]);
 
   return (
     <>
       <DialogHeader>
         <DialogTitle>Column Metadata</DialogTitle>
       </DialogHeader>
-      <DialogDescription>
+      <DialogDescription className="text-base">
         Add metadata to this column to help your team and AI understand its
         purpose. Include detailed descriptions and examples of sample data to
         make the data more clear and easier to use.
@@ -123,11 +123,7 @@ export default function DataCatalogTableColumnModal({
           <div className="flex items-center justify-between gap-2">
             <Label>Sample Data</Label>
             <div>
-              <Button
-                size="sm"
-                variant={"outline"}
-                onClick={onAutomaticSampleData}
-              >
+              <Button size="sm" onClick={onAutomaticSampleData}>
                 {sampleLoading ? (
                   <LucideLoader className="mr-2 h-4 w-4 animate-spin" />
                 ) : (
@@ -153,10 +149,12 @@ export default function DataCatalogTableColumnModal({
       </div>
 
       <DialogFooter>
-        <Button disabled={loading} onClick={onSaveUpdateColumn}>
-          {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
-          Save
-        </Button>
+        <Button
+          loading={loading}
+          title="Save"
+          disabled={loading || !column.body}
+          onClick={onSaveUpdateColumn}
+        />
       </DialogFooter>
     </>
   );
diff --git a/src/extensions/data-catalog/data-catalog-table-column.tsx b/src/extensions/data-catalog/data-catalog-table-column.tsx
index e51e65e5..537adf5e 100644
--- a/src/extensions/data-catalog/data-catalog-table-column.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-column.tsx
@@ -1,4 +1,5 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
+import { Toggle } from "@/components/orbit/toggle";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import {
   DropdownMenu,
@@ -14,13 +15,7 @@ import {
 } from "@/drivers/base-driver";
 import { cn } from "@/lib/utils";
 import { OuterbaseDataCatalogComment } from "@/outerbase-cloud/api-type";
-import {
-  Edit3,
-  EyeOff,
-  LucideMoreHorizontal,
-  ToggleLeftIcon,
-  ToggleRightIcon,
-} from "lucide-react";
+import { Edit3, EyeOff, LucideMoreHorizontal } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import DataCatalogTableColumnModal from "./data-catalog-table-column-modal";
 import DataCatalogDriver from "./driver";
@@ -52,7 +47,6 @@ export default function DataCatalogTableColumn({
   );
   const definition = modelColumn?.body;
 
-  const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [hideFromEzql, setHideFromEzql] = useState<boolean>(() => {
     if (modelColumn?.flags) {
@@ -64,21 +58,14 @@ export default function DataCatalogTableColumn({
   const handleClickToggle = useCallback(() => {
     if (!modelColumn) return;
     setHideFromEzql(!hideFromEzql);
-    setLoading(true);
-    onToggleHideFromEzql(
-      {
-        ...modelColumn,
-        flags: {
-          ...modelColumn.flags,
-          isActive: !hideFromEzql,
-        },
+    onToggleHideFromEzql({
+      ...modelColumn,
+      flags: {
+        ...modelColumn.flags,
+        isActive: !hideFromEzql,
       },
-      // call me back when finish update column
-      () => {
-        setLoading(false);
-      }
-    );
-  }, [modelColumn]);
+    });
+  }, [modelColumn, hideFromEzql, onToggleHideFromEzql]);
 
   const sampleData = useMemo(() => {
     if (modelColumn?.sample_data) {
@@ -95,32 +82,20 @@ export default function DataCatalogTableColumn({
     <div
       key={column.name}
       className={cn(
-        "border-accent flex border-t pt-2 pb-2 text-sm",
+        "border-accent flex items-center border-t pt-2 pb-2 text-sm",
         hideFromEzql ? "opacity-100" : "opacity-50"
       )}
     >
-      <Button
-        disabled={loading}
-        onClick={handleClickToggle}
-        size={"icon"}
-        variant="ghost"
-      >
-        {hideFromEzql ? (
-          <ToggleRightIcon className="text-black dark:text-green-500" />
-        ) : (
-          <ToggleLeftIcon className="text-gray-400" />
-        )}
-      </Button>
-
-      <div className="flex w-[150px] items-center p-2">
+      <Toggle size="sm" toggled={hideFromEzql} onChange={handleClickToggle} />
+      <div className="flex w-[150px] items-center p-2 text-base">
         <HighlightText text={column.name} highlight={search} />
       </div>
-      <div className="text-muted-foreground flex-1 p-2">
+      <div className="text-muted-foreground flex-1 p-2 text-base">
         {definition || "No description"}
       </div>
       <div className="w-[150px] p-2">
         {sampleData.length > 0 && (
-          <span className="bg-secondary rounded p-1 px-2 text-xs">
+          <span className="bg-secondary rounded p-1 px-2 text-sm">
             {sampleData.length} sample data
           </span>
         )}
@@ -132,7 +107,7 @@ export default function DataCatalogTableColumn({
       }
       <DropdownMenu>
         <DropdownMenuTrigger asChild disabled={!hideFromEzql}>
-          <Button size="icon" variant="ghost">
+          <Button variant="ghost">
             <LucideMoreHorizontal className="h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
diff --git a/src/extensions/data-catalog/data-model-tab.tsx b/src/extensions/data-catalog/data-model-tab.tsx
index 79358914..206814e9 100644
--- a/src/extensions/data-catalog/data-model-tab.tsx
+++ b/src/extensions/data-catalog/data-model-tab.tsx
@@ -1,11 +1,12 @@
 import SchemaNameSelect from "@/components/gui/schema-editor/schema-name-select";
 import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/orbit/input";
+import { Toggle } from "@/components/orbit/toggle";
 import { useConfig } from "@/context/config-provider";
 import { useSchema } from "@/context/schema-provider";
 import { DatabaseTableSchema } from "@/drivers/base-driver";
-import { useCallback, useEffect, useState } from "react";
+import { MagnifyingGlass } from "@phosphor-icons/react";
+import { useEffect, useState } from "react";
 import DataCatalogExtension from ".";
 import DataCatalogTableAccordion from "./data-catalog-table-accordion";
 
@@ -22,18 +23,6 @@ export default function DataCatalogModelTab() {
 
   const driver = dataCatalogExtension?.driver;
 
-  const onRefresh = useCallback(() => {
-    if (!selectedSchema) return [];
-    const result = (schema[selectedSchema] || [])
-      .filter((table) => table.type === "table")
-      .map((table) => table.tableSchema)
-      .filter(Boolean) as DatabaseTableSchema[];
-
-    result.sort((a, b) => a.tableName!.localeCompare(b.tableName!));
-
-    setSchemas(result);
-  }, [schema, selectedSchema]);
-
   useEffect(() => {
     if (!driver) return;
 
@@ -54,7 +43,7 @@ export default function DataCatalogModelTab() {
     const unsubscribe = driver.addEventListener(onRefresh);
 
     return () => unsubscribe;
-  }, [onRefresh, driver, schema, selectedSchema]);
+  }, [driver, schema, selectedSchema]);
 
   if (!driver) {
     return <div>Missing driver</div>;
@@ -69,19 +58,19 @@ export default function DataCatalogModelTab() {
             onChange={setSelectedSchema}
           />
           <div className="ml-2 flex items-center gap-2">
-            <Checkbox
-              checked={hasDefinitionOnly}
-              onCheckedChange={() => setHasDefinitionOnly(!hasDefinitionOnly)}
+            <Toggle
+              toggled={hasDefinitionOnly}
+              size="sm"
+              onChange={setHasDefinitionOnly}
             />
-            <label className="text-sm">Definition only?</label>
+            <label className="text-base">Definition only?</label>
           </div>
           <ToolbarFiller />
           <div>
             <Input
               value={search}
-              onChange={(e) => {
-                setSearch(e.currentTarget.value);
-              }}
+              onValueChange={setSearch}
+              preText={<MagnifyingGlass className="mr-2" />}
               placeholder="Search tables, columns"
             />
           </div>
diff --git a/src/extensions/data-catalog/empty-definition.tsx b/src/extensions/data-catalog/empty-definition.tsx
index 9412e32a..d54a1671 100644
--- a/src/extensions/data-catalog/empty-definition.tsx
+++ b/src/extensions/data-catalog/empty-definition.tsx
@@ -48,7 +48,7 @@ export default function EmptyTermDefinition() {
               </div>
               {item.title}
             </div>
-            <div className="mt-1 ml-10 text-sm font-normal">
+            <div className="mt-1 ml-10 text-base font-normal">
               {item.describtion}
             </div>
           </div>
diff --git a/src/extensions/data-catalog/table-metadata-modal.tsx b/src/extensions/data-catalog/table-metadata-modal.tsx
index f58bce69..0fe96328 100644
--- a/src/extensions/data-catalog/table-metadata-modal.tsx
+++ b/src/extensions/data-catalog/table-metadata-modal.tsx
@@ -1,11 +1,11 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
+import { Input } from "@/components/orbit/input";
 import {
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
@@ -13,7 +13,6 @@ import {
   OuterbaseDataCatalogVirtualColumnInput,
 } from "@/outerbase-cloud/api-type";
 import { produce } from "immer";
-import { LucideLoader } from "lucide-react";
 import { useCallback, useState } from "react";
 import DataCatalogDriver from "./driver";
 
@@ -93,23 +92,25 @@ export default function TableMetadataModal({
         setLoading(false);
         onClose();
       });
-  }, [driver, onClose, metadataInput, schemaName, tableName]);
+  }, [driver, onClose, metadataInput, schemaName, data, tableName]);
 
   return (
     <>
       <DialogHeader>
         <DialogTitle>Add Table Metadata: {tableName}</DialogTitle>
       </DialogHeader>
-      <DialogDescription>Add metadata to your...</DialogDescription>
+      <DialogDescription className="text-base">
+        Add metadata to your...
+      </DialogDescription>
       <div className="mt-2 flex flex-col gap-4">
         <div className="flex flex-col gap-2">
-          <Label>Table Pseudonym</Label>
+          <Label className="text-sm">Table Pseudonym</Label>
           <Input
             value={metadataInput.alias}
-            onChange={(e) => {
+            onValueChange={(value) => {
               setMetadataInput((prev) =>
                 produce(prev, (draft) => {
-                  draft.alias = e.target.value;
+                  draft.alias = value;
                 })
               );
             }}
@@ -118,7 +119,7 @@ export default function TableMetadataModal({
         </div>
 
         <div className="flex flex-col gap-2">
-          <Label>Table Description</Label>
+          <Label className="text-sm">Table Description</Label>
           <Textarea
             value={metadataInput.body}
             rows={4}
@@ -129,19 +130,22 @@ export default function TableMetadataModal({
                 });
               });
             }}
+            className="text-base"
             placeholder="Add a description"
           />
         </div>
       </div>
 
       <DialogFooter>
-        <Button disabled={loading} onClick={onSaveUpdateColumn}>
-          {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
-          Save
-        </Button>
-        <Button variant="secondary" onClick={onClose}>
-          Cancel
-        </Button>
+        <Button
+          loading={loading}
+          title="Save"
+          disabled={loading}
+          onClick={onSaveUpdateColumn}
+          shape="base"
+        />
+
+        <Button title="Cancel" variant="ghost" onClick={onClose} />
       </DialogFooter>
     </>
   );
diff --git a/src/extensions/data-catalog/table-result-header.tsx b/src/extensions/data-catalog/table-result-header.tsx
index 39155fe6..1865aa18 100644
--- a/src/extensions/data-catalog/table-result-header.tsx
+++ b/src/extensions/data-catalog/table-result-header.tsx
@@ -39,7 +39,7 @@ export default function DataCatalogResultHeader({
       .then()
       .catch()
       .finally(() => setLoading(false));
-  }, [driver, definition, column, schemaName, tableName, columnName]);
+  }, [driver, definition, column, schemaName, tableName]);
 
   return (
     <div className="flex flex-col gap-2 border-b p-2 text-sm">
diff --git a/src/extensions/data-catalog/virtual-column.tsx b/src/extensions/data-catalog/virtual-column.tsx
index 35b45f55..12ea1e94 100644
--- a/src/extensions/data-catalog/virtual-column.tsx
+++ b/src/extensions/data-catalog/virtual-column.tsx
@@ -1,4 +1,5 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
+import { Toggle } from "@/components/orbit/toggle";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,13 +9,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { OuterbaseDataCatalogComment } from "@/outerbase-cloud/api-type";
-import {
-  Edit3,
-  LucideMoreHorizontal,
-  ToggleLeftIcon,
-  ToggleRightIcon,
-  Trash,
-} from "lucide-react";
+import { Edit3, LucideMoreHorizontal, Trash } from "lucide-react";
 import { useCallback, useState } from "react";
 
 interface Props {
@@ -34,7 +29,6 @@ export default function VirtualJoinColumn({
   onEditRelationship,
   onDeletRelatinship,
 }: Props) {
-  const [loading, setLoading] = useState(false);
   const [isActive, setIsActive] = useState<boolean>(() => {
     if (data.flags) {
       return data?.flags.isActive;
@@ -44,7 +38,6 @@ export default function VirtualJoinColumn({
 
   const handleClickToggle = useCallback(() => {
     setIsActive(!isActive);
-    setLoading(true);
     onToggleHideFromEzql(
       {
         ...data,
@@ -53,40 +46,33 @@ export default function VirtualJoinColumn({
           isActive: !isActive,
         },
       },
-      // call me back when finish update column
-      () => {
-        setLoading(false);
-      },
+      // call me back when you're done
+      () => {},
       true
     );
-  }, [data]);
+  }, [data, isActive, onToggleHideFromEzql]);
 
   return (
     <div
       className={cn(
-        "border-accent flex border-t pt-2 pb-2 text-sm",
+        "border-accent flex items-center border-t pt-2 pb-2",
         isActive ? "opacity-100" : "opacity-50"
       )}
     >
-      <Button
-        disabled={loading}
-        onClick={handleClickToggle}
-        size={"icon"}
-        variant="ghost"
-      >
-        {isActive ? (
-          <ToggleRightIcon className="text-black dark:text-green-500" />
-        ) : (
-          <ToggleLeftIcon className="text-gray-400" />
-        )}
-      </Button>
+      <Toggle size="sm" toggled={isActive} onChange={handleClickToggle} />
 
-      <div className="flex w-[150px] items-center p-2">
+      <div className="flex w-[150px] items-center p-2 text-base">
         Virtual Relationship
       </div>
-      <div className="flex w-[150px] items-center p-2">{data.column}</div>
-      <div className="flex w-[150px] items-center p-2">{data.table}</div>
-      <div className="flex w-[150px] items-center p-2">{data.body}</div>
+      <div className="flex w-[150px] items-center p-2 text-base">
+        {data.column}
+      </div>
+      <div className="flex w-[150px] items-center p-2 text-base">
+        {data.table}
+      </div>
+      <div className="flex w-[150px] items-center p-2 text-base">
+        {data.body}
+      </div>
       <div className="flex-1" />
       {
         //=================
@@ -95,7 +81,7 @@ export default function VirtualJoinColumn({
       }
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button size="icon" variant="ghost">
+          <Button size="base" variant="ghost">
             <LucideMoreHorizontal className="h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
diff --git a/src/extensions/data-catalog/virtual-join-modal.tsx b/src/extensions/data-catalog/virtual-join-modal.tsx
index 2feb45aa..11b768fd 100644
--- a/src/extensions/data-catalog/virtual-join-modal.tsx
+++ b/src/extensions/data-catalog/virtual-join-modal.tsx
@@ -1,6 +1,6 @@
 import TableColumnCombobox from "@/components/gui/table-combobox/TableColumnCombobox";
 import TableCombobox from "@/components/gui/table-combobox/TableCombobox";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
 import {
   Dialog,
   DialogContent,
@@ -15,7 +15,6 @@ import {
   OuterbaseDataCatalogVirtualColumnInput,
 } from "@/outerbase-cloud/api-type";
 import { produce } from "immer";
-import { LucideLoader } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { defaultVirtualColumn } from "./constant";
 import DataCatalogDriver from "./driver";
@@ -118,7 +117,7 @@ export default function VirtualJoinModal({
             {data ? "Edit" : "Add Relationship"} to {tableName}
           </DialogTitle>
         </DialogHeader>
-        <DialogDescription>
+        <DialogDescription className="text-base">
           Use virtual relationships to connect fields that don&apos;t have a
           direct foreign key link. For example, if two tables should be related
           by email or title but don&apos;t have a formal foreign key, use these
@@ -181,13 +180,13 @@ export default function VirtualJoinModal({
 
         <DialogFooter>
           <Button
+            loading={loading}
             variant="ghost"
             disabled={disabled}
             onClick={createUpdateVirtualJoin}
-          >
-            {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
-            {data ? "Edit Relationship" : "Create Virtual Join"}
-          </Button>
+            title={data ? "Edit Relationship" : "Create Virtual Join"}
+          />
+
           <div className="flex-1" />
         </DialogFooter>
       </DialogContent>

From c5fa67c81eabaae7ce838d7b11747d4fd203f031 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 10 Feb 2025 22:22:09 +0700
Subject: [PATCH 044/106] improve board

---
 .../w/[workspaceId]/board/[boardId]/page.tsx  | 31 ++++++-
 src/components/board/board-canvas.tsx         |  4 +-
 src/components/board/board-chart-editor.tsx   | 64 ++++++++++++--
 src/components/board/board-provider.tsx       |  8 +-
 src/components/board/board-source-picker.tsx  | 86 +++++++++++++------
 .../board/board-tool/board-button-menu.tsx    | 10 +--
 src/components/board/index.tsx                |  8 +-
 src/components/chart/chart-type.ts            |  2 +-
 src/components/chart/edit-chart-menu.tsx      |  1 +
 src/components/circular-progress-bar.tsx      |  5 +-
 src/outerbase-cloud/api-board.ts              | 18 ++++
 src/outerbase-cloud/api.ts                    |  3 +-
 12 files changed, 190 insertions(+), 50 deletions(-)
 create mode 100644 src/outerbase-cloud/api-board.ts

diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index 3716203b..61a21912 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -4,11 +4,13 @@ import { NavigationBar } from "@/app/(outerbase)/nav";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import Board from "@/components/board";
 import { deleteChartDialog } from "@/components/board/board-delete-dialog";
+import { ChartValue } from "@/components/chart/chart-type";
 
 import {
   getOuterbaseDashboard,
   updateOuterbaseDashboard,
 } from "@/outerbase-cloud/api";
+import { createOuterbaseDashboardChart } from "@/outerbase-cloud/api-board";
 import { OuterbaseAPIDashboardDetail } from "@/outerbase-cloud/api-type";
 import OuterbaseBoardSourceDriver from "@/outerbase-cloud/database-source";
 import { produce } from "immer";
@@ -44,13 +46,14 @@ function BoardPageEditor({
   const onSave = useCallback(() => {
     const input = {
       base_id: null,
-      chart_ids: value.chart_ids,
+      chart_ids: Array.from(new Set(value.charts.map((v) => v.id))),
       data: (value as any).data,
       layout: value.layout.map(({ w, h, i, x, y }) => ({ w, h, x, y, i })),
       directory_index: (value as any).directory_index,
       name: value.name,
       type: value.type,
     };
+
     updateOuterbaseDashboard(workspaceId, boardId, input)
       .then()
       .finally(mutate);
@@ -100,6 +103,31 @@ function BoardPageEditor({
     [value, workspaceId, boardId, mutate]
   );
 
+  const onAddChart = useCallback(
+    async (chartValue: ChartValue) => {
+      if (!chartValue.source_id) return;
+      if (!chartValue.type) return;
+
+      return createOuterbaseDashboardChart(workspaceId, {
+        source_id: chartValue.source_id,
+        params: {
+          ...chartValue.params,
+          source_id: chartValue.source_id,
+          workspace_id: workspaceId,
+          layers: chartValue.params.layers.map((layer) => {
+            return {
+              ...layer,
+              type: chartValue.type!,
+            };
+          }),
+        },
+        type: chartValue.type,
+        name: chartValue.name ?? "",
+      });
+    },
+    [workspaceId]
+  );
+
   if (!boardSources) {
     return <div>Loading Workspace....</div>;
   }
@@ -114,6 +142,7 @@ function BoardPageEditor({
       onLayoutCancel={() => setValue(initialValue)}
       onLayoutSave={onSave}
       onRemove={onRemove}
+      onAddChart={onAddChart}
     />
   );
 }
diff --git a/src/components/board/board-canvas.tsx b/src/components/board/board-canvas.tsx
index aec7b4d0..c2f3b411 100644
--- a/src/components/board/board-canvas.tsx
+++ b/src/components/board/board-canvas.tsx
@@ -111,7 +111,7 @@ export function BoardCanvas({
     return (
       <div
         key={_.i}
-        className="group dark:bg-secondary relative flex items-center justify-center rounded-md bg-white shadow hover:bg-gray-50 dark:text-white"
+        className="group bg-background relative flex items-center justify-center overflow-hidden rounded-xl bg-white shadow hover:bg-gray-50 dark:bg-neutral-900 dark:text-white"
         data-grid={_}
       >
         <BoardChart
@@ -183,7 +183,7 @@ export function BoardCanvas({
   });
 
   return (
-    <div>
+    <div className="bg-neutral-100 dark:bg-neutral-950">
       <ReactGridLayout
         cols={4}
         rowHeight={220}
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index 3725b4b7..674e30a3 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -3,6 +3,7 @@ import { DatabaseSchemas } from "@/drivers/base-driver";
 import { ChartBar, Play, Table } from "@phosphor-icons/react";
 import { produce } from "immer";
 import { useCallback, useMemo, useState } from "react";
+import { DashboardProps } from ".";
 import Chart from "../chart";
 import { ChartValue } from "../chart/chart-type";
 import EditChartMenu from "../chart/edit-chart-menu";
@@ -14,7 +15,11 @@ import { MenuBar } from "../orbit/menu-bar";
 import { useBoardContext } from "./board-provider";
 import BoardSourcePicker from "./board-source-picker";
 
-export default function BoardChartEditor() {
+export default function BoardChartEditor({
+  onChange,
+}: {
+  onChange: (value: DashboardProps) => void;
+}) {
   const [value, setValue] = useState<ChartValue>({
     model: "chart",
     type: "line",
@@ -28,7 +33,7 @@ export default function BoardChartEditor() {
     params: {
       type: "line",
       id: "",
-      name: "",
+      name: "New Chart",
       model: "chart",
       apiKey: "",
       layers: [
@@ -53,12 +58,16 @@ export default function BoardChartEditor() {
   const [selectedSchema, setSelectedSchema] = useState("");
   const [displayType, setDisplayType] = useState("chart");
   const [loading, setLoading] = useState(false);
-
   const autoCompletion = useMemo(() => {
     return generateAutoComplete(selectedSchema, schema);
   }, [schema, selectedSchema]);
 
-  const { sources: sourceDriver } = useBoardContext();
+  const {
+    sources: sourceDriver,
+    setBoardMode,
+    value: chartList,
+    onAddChart,
+  } = useBoardContext();
   const [result, setResult] = useState<OptimizeTableState>();
 
   const onRunClicked = useCallback(() => {
@@ -110,6 +119,9 @@ export default function BoardChartEditor() {
           <div className="flex gap-2 border-b px-4 py-2">
             <BoardSourcePicker
               value={value?.source_id}
+              usedSourceId={(chartList?.charts ?? []).map(
+                (c) => c.source_id || ""
+              )}
               onChange={(newSourceId) => {
                 setValue((prev) =>
                   produce(prev, (draft) => {
@@ -184,8 +196,48 @@ export default function BoardChartEditor() {
           />
         </div>
         <div className="flex justify-end gap-2 border-t p-4">
-          <Button variant="primary">Save Changes</Button>
-          <Button>Cancel</Button>
+          <Button
+            variant="primary"
+            onClick={() => {
+              onAddChart(value).then((newChart) => {
+                if (!newChart) return;
+
+                console.log("onchange", onChange);
+
+                onChange(
+                  produce(chartList!, (draft) => {
+                    if (!draft?.charts) draft.charts = [];
+                    draft?.charts.push(newChart);
+
+                    if (!draft?.layout) draft.layout = [];
+
+                    let y = 0;
+                    for (const layout of draft.layout)
+                      y = Math.max(y, layout.y + layout.h);
+
+                    draft.layout.push({
+                      x: 0,
+                      y,
+                      w: 2,
+                      h: 2,
+                      i: newChart.id!,
+                    });
+                  })
+                );
+
+                setBoardMode(null);
+              });
+            }}
+          >
+            Save Changes
+          </Button>
+          <Button
+            onClick={() => {
+              setBoardMode(null);
+            }}
+          >
+            Cancel
+          </Button>
         </div>
       </div>
     </div>
diff --git a/src/components/board/board-provider.tsx b/src/components/board/board-provider.tsx
index 74bebd3d..cb79a185 100644
--- a/src/components/board/board-provider.tsx
+++ b/src/components/board/board-provider.tsx
@@ -7,7 +7,8 @@ import {
   SetStateAction,
   useContext,
 } from "react";
-import { BoardEditorMode } from ".";
+import { BoardEditorMode, DashboardProps } from ".";
+import { ChartValue } from "../chart/chart-type";
 
 interface BoardContextSettingProps {
   autoRefresh: string[];
@@ -15,7 +16,9 @@ interface BoardContextSettingProps {
 }
 
 interface BoardContextProps {
+  value?: DashboardProps;
   sources?: BoardSourceDriver;
+  onAddChart: (value: ChartValue) => Promise<ChartValue | undefined>;
   setting?: BoardContextSettingProps;
   lastRunTimestamp: number;
   setBoardMode: Dispatch<SetStateAction<BoardEditorMode>>;
@@ -24,6 +27,9 @@ interface BoardContextProps {
 const BoardContext = createContext<BoardContextProps>({
   lastRunTimestamp: 0,
   setBoardMode: noop,
+  onAddChart: async () => {
+    return undefined;
+  },
 });
 
 export function useBoardContext() {
diff --git a/src/components/board/board-source-picker.tsx b/src/components/board/board-source-picker.tsx
index 3b7ec428..7112640f 100644
--- a/src/components/board/board-source-picker.tsx
+++ b/src/components/board/board-source-picker.tsx
@@ -1,7 +1,8 @@
 import { DatabaseSchemas } from "@/drivers/base-driver";
+import { BoardSource } from "@/drivers/board-source/base-source";
 import { OuterbaseAPIError } from "@/outerbase-cloud/api-type";
 import { CaretDown, WarningCircle } from "@phosphor-icons/react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Loader } from "../orbit/loader";
 import { getDatabaseIcon } from "../resource-card/utils";
 import { Button } from "../ui/button";
@@ -18,6 +19,7 @@ import { useBoardContext } from "./board-provider";
 
 interface BoardSourcePickerProps {
   value?: string;
+  usedSourceId?: string[];
   onChange?: (value: string) => void;
   onSchemaLoad?: (props: {
     schema: DatabaseSchemas;
@@ -27,6 +29,7 @@ interface BoardSourcePickerProps {
 
 export default function BoardSourcePicker({
   value,
+  usedSourceId,
   onChange,
   onSchemaLoad,
 }: BoardSourcePickerProps) {
@@ -40,6 +43,39 @@ export default function BoardSourcePicker({
   const selectedSource = sourceList.find((source) => source.id === value);
   const DatabaseIcon = getDatabaseIcon(selectedSource?.type ?? "");
 
+  const usedSources = sourceList.filter((s) => usedSourceId?.includes(s.id));
+
+  const onSelectSource = useCallback(
+    (newSelectedSource: BoardSource) => {
+      if (onChange && sourceDriver) {
+        onChange(newSelectedSource.id);
+
+        setLoadingSchema(true);
+        setSchemaError(undefined);
+
+        sourceDriver
+          .schemas(newSelectedSource.id)
+          .then((loadedSchema) => {
+            if (onSchemaLoad) {
+              onSchemaLoad(loadedSchema);
+            }
+          })
+          .catch((e) => {
+            if (e instanceof OuterbaseAPIError) {
+              setSchemaError(e);
+            } else {
+              setSchemaError(new OuterbaseAPIError(e.message));
+            }
+          })
+          .finally(() => {
+            setLoadingSchema(false);
+          });
+      }
+      setOpen(false);
+    },
+    [onChange, sourceDriver, onSchemaLoad]
+  );
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -68,7 +104,27 @@ export default function BoardSourcePicker({
 
           <CommandList>
             <CommandEmpty>No data source found</CommandEmpty>
-            <CommandGroup>
+            {usedSources.length > 0 && (
+              <CommandGroup heading="Suggestions">
+                {usedSources.map((source) => {
+                  const DatabaseIcon = getDatabaseIcon(source.type);
+
+                  return (
+                    <CommandItem
+                      key={source.id}
+                      value={source.name}
+                      onSelect={() => {
+                        onSelectSource(source);
+                      }}
+                    >
+                      <DatabaseIcon />
+                      {source.name}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            )}
+            <CommandGroup heading="All Sources">
               {sourceList.map((source) => {
                 const DatabaseIcon = getDatabaseIcon(source.type);
 
@@ -77,31 +133,7 @@ export default function BoardSourcePicker({
                     key={source.id}
                     value={source.name}
                     onSelect={() => {
-                      if (onChange && sourceDriver) {
-                        onChange(source.id);
-
-                        setLoadingSchema(true);
-                        setSchemaError(undefined);
-
-                        sourceDriver
-                          .schemas(source.id)
-                          .then((loadedSchema) => {
-                            if (onSchemaLoad) {
-                              onSchemaLoad(loadedSchema);
-                            }
-                          })
-                          .catch((e) => {
-                            if (e instanceof OuterbaseAPIError) {
-                              setSchemaError(e);
-                            } else {
-                              setSchemaError(new OuterbaseAPIError(e.message));
-                            }
-                          })
-                          .finally(() => {
-                            setLoadingSchema(false);
-                          });
-                      }
-                      setOpen(false);
+                      onSelectSource(source);
                     }}
                   >
                     <DatabaseIcon />
diff --git a/src/components/board/board-tool/board-button-menu.tsx b/src/components/board/board-tool/board-button-menu.tsx
index 51da6c73..8de658cf 100644
--- a/src/components/board/board-tool/board-button-menu.tsx
+++ b/src/components/board/board-tool/board-button-menu.tsx
@@ -1,5 +1,6 @@
 import { CircularProgressBar } from "@/components/circular-progress-bar";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
+import { buttonVariants } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -67,10 +68,10 @@ export function BoardButtonMenu(props: Props) {
   if (props.mode === "REARRANGING_CHART") {
     return (
       <div className="flex items-center gap-2">
-        <Button variant={"secondary"} size={"sm"} onClick={props.onCancel}>
+        <Button variant={"secondary"} onClick={props.onCancel}>
           Cancel
         </Button>
-        <Button variant={"default"} size={"sm"} onClick={props.onSave}>
+        <Button variant={"primary"} onClick={props.onSave}>
           Save
         </Button>
       </div>
@@ -155,8 +156,7 @@ export function BoardButtonMenu(props: Props) {
       </DropdownMenu>
       <div>
         <Button
-          variant={"default"}
-          size="sm"
+          variant={"primary"}
           onClick={() => {
             setBoardMode("ADD_CHART");
           }}
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index d1a2db35..6f92747d 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -27,6 +27,7 @@ interface Props {
   onLayoutSave: () => void;
   onLayoutCancel: () => void;
   onRemove: (key: string) => void;
+  onAddChart: (value: ChartValue) => Promise<ChartValue | undefined>;
 }
 
 export default function Board({
@@ -38,6 +39,7 @@ export default function Board({
   onLayoutCancel,
   onLayoutSave,
   onRemove,
+  onAddChart,
 }: Props) {
   const [editMode, setEditMode] = useState<BoardEditorMode>(null);
 
@@ -76,6 +78,8 @@ export default function Board({
       lastRunTimestamp={lastRunTimestamp}
       setting={{ autoRefresh, name: value.name }}
       setBoardMode={setEditMode}
+      onAddChart={onAddChart}
+      value={value}
     >
       <div className="relative flex flex-1 flex-col">
         <BoardFilter
@@ -113,8 +117,8 @@ export default function Board({
         </div>
 
         {editMode === "ADD_CHART" && (
-          <div className="bg-background absolute top-0 bottom-0 left-0 z-50 flex w-screen">
-            <BoardChartEditor />
+          <div className="bg-background fixed top-14 bottom-0 left-0 z-50 flex w-screen">
+            <BoardChartEditor onChange={onChange} />
           </div>
         )}
       </div>
diff --git a/src/components/chart/chart-type.ts b/src/components/chart/chart-type.ts
index 25e4ad34..a730af3a 100644
--- a/src/components/chart/chart-type.ts
+++ b/src/components/chart/chart-type.ts
@@ -42,7 +42,7 @@ interface ChartOptions {
   theme?: string;
 }
 
-interface ChartParams {
+export interface ChartParams {
   id?: string;
   name?: string;
   type?: ChartType;
diff --git a/src/components/chart/edit-chart-menu.tsx b/src/components/chart/edit-chart-menu.tsx
index 939db826..138d2592 100644
--- a/src/components/chart/edit-chart-menu.tsx
+++ b/src/components/chart/edit-chart-menu.tsx
@@ -258,6 +258,7 @@ export default function EditChartMenu({
             onChange((prev) => {
               return produce(prev, (draft) => {
                 draft.name = v;
+                draft.params.name = v;
               });
             });
           }}
diff --git a/src/components/circular-progress-bar.tsx b/src/components/circular-progress-bar.tsx
index 78ed72e2..283ab1c9 100644
--- a/src/components/circular-progress-bar.tsx
+++ b/src/components/circular-progress-bar.tsx
@@ -35,7 +35,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
           cy={size / 2}
         />
         <circle
-          className="text-blue-600"
+          className="text-blue-600 transition-all"
           strokeWidth={strokeWidth}
           strokeDasharray={circumference}
           strokeDashoffset={strokeDashoffset}
@@ -47,9 +47,6 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
           cy={size / 2}
         />
       </svg>
-      {/* <span className="absolute text-xs text-blue-700">
-        {Math.round(progress)}
-      </span> */}
     </div>
   );
 };
diff --git a/src/outerbase-cloud/api-board.ts b/src/outerbase-cloud/api-board.ts
new file mode 100644
index 00000000..4eb1a5e9
--- /dev/null
+++ b/src/outerbase-cloud/api-board.ts
@@ -0,0 +1,18 @@
+import { ChartParams, ChartValue } from "@/components/chart/chart-type";
+import { requestOuterbase } from "./api";
+
+export async function createOuterbaseDashboardChart(
+  workspaceId: string,
+  options: {
+    type: string;
+    source_id: string;
+    params: ChartParams;
+    name: string;
+  }
+): Promise<ChartValue> {
+  return requestOuterbase<ChartValue>(
+    `/api/v1/workspace/${workspaceId}/chart`,
+    "POST",
+    options
+  );
+}
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index 7127e104..c467ab67 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -90,7 +90,7 @@ export async function createOuterbaseDashboard(
     "POST",
     {
       name,
-      base_id: baseId ?? "",
+      base_id: baseId ?? null,
       chart_ids: [],
       data: {
         version: 3,
@@ -98,6 +98,7 @@ export async function createOuterbaseDashboard(
         isWorkspaceScoped: !baseId,
       },
       layout: [],
+      directory_index: 0,
       type: "dashboard",
     }
   );

From c4172ed2e7d33db907418e5530d30124e529440b Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 10 Feb 2025 22:23:40 +0700
Subject: [PATCH 045/106] fixing the create dashboard

---
 src/outerbase-cloud/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index c467ab67..784828ac 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -90,7 +90,7 @@ export async function createOuterbaseDashboard(
     "POST",
     {
       name,
-      base_id: baseId ?? null,
+      base_id: baseId ?? "",
       chart_ids: [],
       data: {
         version: 3,

From df5aa6dca1d79d2688edc942ec708d606edff7cb Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 10 Feb 2025 22:28:16 +0700
Subject: [PATCH 046/106] trigger vercel preview deployment

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4e4f4d0d..9f9042b9 100644
--- a/README.md
+++ b/README.md
@@ -36,4 +36,4 @@ Outerbase Studio Desktop is a lightweight Electron wrapper for the Outerbase Stu
 - **Schema Editor**: It allows you to quickly create, modify, and remove table columns with just a few clicks without writing any SQL.
 - **Connection Manager**: It includes a flexible connection manager, allowing you to store your connections locally in your browser. You can also store them on a server and share your connections across multiple devices.
 
-The features mentioned above are just a few of the many we offer. Give it a try to explore everything we have in store.
+The features mentioned above are just a few of the many we offer. Give it a try to explore everything we have in store

From 0e84bd0e3c66daa32e64acd6a29d96cb9d3d0297 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 11 Feb 2025 07:30:39 +0700
Subject: [PATCH 047/106] add variable name

---
 .../sql-editor/variable-highlight-plugin.ts   | 101 +++++++++++++++
 src/components/gui/sql-editor/index.tsx       |  13 ++
 src/components/gui/tabs/query-tab.tsx         | 117 +++++++++---------
 3 files changed, 175 insertions(+), 56 deletions(-)
 create mode 100644 src/components/editor/sql-editor/variable-highlight-plugin.ts

diff --git a/src/components/editor/sql-editor/variable-highlight-plugin.ts b/src/components/editor/sql-editor/variable-highlight-plugin.ts
new file mode 100644
index 00000000..ad4d5630
--- /dev/null
+++ b/src/components/editor/sql-editor/variable-highlight-plugin.ts
@@ -0,0 +1,101 @@
+import { CompletionContext } from "@codemirror/autocomplete";
+import { LanguageSupport, syntaxTree } from "@codemirror/language";
+import { Range } from "@codemirror/state";
+import {
+  Decoration,
+  DecorationSet,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+} from "@codemirror/view";
+import { SyntaxNode } from "@lezer/common";
+
+const variableMark = Decoration.mark({ class: "cm-handlebar" });
+
+function decorateVariable(view: EditorView) {
+  const decorationList: Range<Decoration>[] = [];
+
+  for (const { from, to } of view.visibleRanges) {
+    const text = view.state.doc.sliceString(from, to);
+
+    for (const match of text.matchAll(
+      /(\{\{[\w\d-_]+\}\})|(\[\[[\w\d-_]+\]\])/g
+    )) {
+      decorationList.push(
+        variableMark.range(
+          from + match.index,
+          from + match.index + match[0].length
+        )
+      );
+    }
+  }
+
+  return Decoration.set(decorationList);
+}
+
+const variableHighlightView = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+    constructor(view: EditorView) {
+      this.decorations = decorateVariable(view);
+    }
+    update(update: ViewUpdate) {
+      this.decorations = decorateVariable(update.view);
+    }
+  },
+  { decorations: (v) => v.decorations }
+);
+
+const variableHighlightTheme = EditorView.baseTheme({
+  ".cm-handlebar": {
+    color: "#f20b97",
+    "font-weight": "bold",
+  },
+  ".cm-handlebar span": {
+    color: "#f20b97 !important",
+  },
+  "&dark .cm-handlebar": {
+    color: "#f9bbe6",
+  },
+  "&dark .cm-handlebar span": {
+    color: "#f9bbe6 !important",
+  },
+});
+
+export function createVariableHighlightPlugin({
+  variables,
+  language,
+}: {
+  variables: string[];
+  language: LanguageSupport;
+}) {
+  function handlebarCompletion(context: CompletionContext) {
+    const node = syntaxTree(context.state).resolveInner(context.pos);
+
+    let ptr: SyntaxNode | null | undefined = node.parent;
+
+    if (ptr?.type.name === "Braces" || ptr?.type.name === "Brackets") {
+      return {
+        from: node.from + 1,
+        options: variables.map((variableName) => ({
+          label: variableName,
+          type: "variable",
+          boost: 1000,
+        })),
+        filter: false,
+      };
+    }
+
+    return null;
+  }
+
+  const extensions = [
+    variableHighlightView,
+    variableHighlightTheme,
+    language.language.data.of({
+      autocomplete: handlebarCompletion,
+    }),
+  ].filter(Boolean);
+
+  return extensions;
+}
diff --git a/src/components/gui/sql-editor/index.tsx b/src/components/gui/sql-editor/index.tsx
index 0024c87d..5fb9f45c 100644
--- a/src/components/gui/sql-editor/index.tsx
+++ b/src/components/gui/sql-editor/index.tsx
@@ -17,6 +17,7 @@ import CodeMirror, {
 } from "@uiw/react-codemirror";
 import { forwardRef, KeyboardEventHandler, useMemo } from "react";
 
+import { createVariableHighlightPlugin } from "@/components/editor/sql-editor/variable-highlight-plugin";
 import { SupportedDialect } from "@/drivers/base-driver";
 import sqliteFunctionList from "@/drivers/sqlite/function-tooltip.json";
 import { sqliteDialect } from "@/drivers/sqlite/sqlite-dialect";
@@ -30,6 +31,8 @@ import SqlStatementHighlightPlugin from "./statement-highlight";
 import useCodeEditorTheme from "./use-editor-theme";
 
 interface SqlEditorProps {
+  highlightVariable?: boolean;
+  variableList?: string[];
   value: string;
   dialect: SupportedDialect;
   readOnly?: boolean;
@@ -57,6 +60,8 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
       readOnly,
       fontSize,
       onFontSizeChanged,
+      variableList,
+      highlightVariable,
     }: SqlEditorProps,
     ref
   ) {
@@ -164,6 +169,12 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
         }),
         keyExtensions,
         indentUnit.of("  "),
+        highlightVariable
+          ? createVariableHighlightPlugin({
+              variables: variableList ?? [],
+              language: sqlDialect,
+            })
+          : undefined,
         sqlDialect,
         tooltipExtension,
         tableNameHighlightPlugin,
@@ -182,6 +193,8 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
       keyExtensions,
       schema,
       tableNameHighlightPlugin,
+      (variableList ?? []).join(","),
+      highlightVariable,
     ]);
 
     return (
diff --git a/src/components/gui/tabs/query-tab.tsx b/src/components/gui/tabs/query-tab.tsx
index cbb57dc1..b7ee8df7 100644
--- a/src/components/gui/tabs/query-tab.tsx
+++ b/src/components/gui/tabs/query-tab.tsx
@@ -1,60 +1,60 @@
-import { format } from "sql-formatter";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  LucideGrid,
-  LucideMessageSquareWarning,
-  LucidePlay,
-} from "lucide-react";
 import SqlEditor from "@/components/gui/sql-editor";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
-  ResizablePanelGroup,
-  ResizablePanel,
   ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
 } from "@/components/ui/resizable";
-import { Button, buttonVariants } from "@/components/ui/button";
-import { KEY_BINDING } from "@/lib/key-matcher";
-import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
-import QueryProgressLog from "../query-progress-log";
-import { useDatabaseDriver } from "@/context/driver-provider";
 import {
-  MultipleQueryProgress,
-  MultipleQueryResult,
-  multipleQuery,
-} from "@/lib/sql/multiple-query";
-import WindowTabs, { useTabsContext, WindowTabItemProps } from "../windows-tab";
-import QueryResult from "../tabs-result/query-result-tab";
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { TAB_PREFIX_SAVED_QUERY } from "@/const";
+import { useDatabaseDriver } from "@/context/driver-provider";
 import { useSchema } from "@/context/schema-provider";
-import SaveDocButton from "../save-doc-button";
 import {
   SavedDocData,
   SavedDocInput,
 } from "@/drivers/saved-doc/saved-doc-driver";
-import { TAB_PREFIX_SAVED_QUERY } from "@/const";
-import { toast } from "sonner";
+import { escapeSqlValue, extractInputValue } from "@/drivers/sqlite/sql-helper";
+import { KEY_BINDING } from "@/lib/key-matcher";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+  multipleQuery,
+  MultipleQueryProgress,
+  MultipleQueryResult,
+} from "@/lib/sql/multiple-query";
+import { tokenizeSql } from "@/lib/sql/tokenizer";
+import { sendAnalyticEvents } from "@/lib/tracking";
+import { cn } from "@/lib/utils";
+import { CaretDown } from "@phosphor-icons/react";
+import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import {
+  LucideGrid,
+  LucideMessageSquareWarning,
+  LucidePlay,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { format } from "sql-formatter";
+import { isExplainQueryPlan } from "../query-explanation";
+import QueryProgressLog from "../query-progress-log";
+import SaveDocButton from "../save-doc-button";
 import {
   resolveToNearestStatement,
   splitSqlQuery,
 } from "../sql-editor/statement-highlight";
-import { CaretDown } from "@phosphor-icons/react";
-import { cn } from "@/lib/utils";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { isExplainQueryPlan } from "../query-explanation";
 import ExplainResultTab from "../tabs-result/explain-result-tab";
-import { tokenizeSql } from "@/lib/sql/tokenizer";
+import QueryResult from "../tabs-result/query-result-tab";
+import WindowTabs, { useTabsContext, WindowTabItemProps } from "../windows-tab";
 import { QueryPlaceholder } from "./query-placeholder";
-import { escapeSqlValue, extractInputValue } from "@/drivers/sqlite/sql-helper";
-import { sendAnalyticEvents } from "@/lib/tracking";
 
 interface QueryWindowProps {
   initialCode?: string;
@@ -290,7 +290,7 @@ export default function QueryWindow({
         title: "Summary",
         icon: LucideMessageSquareWarning,
         component: (
-          <div className="w-full h-full overflow-y-auto overflow-x-hidden">
+          <div className="h-full w-full overflow-x-hidden overflow-y-auto">
             <QueryProgressLog progress={progress} />
           </div>
         ),
@@ -309,16 +309,24 @@ export default function QueryWindow({
     );
   }, [progress, queryTabIndex, data, databaseDriver]);
 
+  const onCursorChange = useCallback(
+    (_: unknown, line: number, col: number) => {
+      setLineNumber(line);
+      setColumnNumber(col);
+    },
+    []
+  );
+
   return (
     <ResizablePanelGroup direction="vertical">
       <ResizablePanel style={{ position: "relative" }}>
-        <div className="absolute left-0 right-0 top-0 bottom-0 flex flex-col">
-          <div className="border-b pl-3 pr-1 py-3 flex dark:bg-neutral-950 bg-neutral-50">
-            <div className="text-sm shrink-0 items-center flex text-secondary-foreground p-1">
+        <div className="absolute top-0 right-0 bottom-0 left-0 flex flex-col">
+          <div className="flex border-b bg-neutral-50 py-3 pr-1 pl-3 dark:bg-neutral-950">
+            <div className="text-secondary-foreground flex shrink-0 items-center p-1 text-sm">
               {namespaceName} /
             </div>
-            <div className="inline-block relative">
-              <span className="inline-block text-sm p-1 outline-hidden font-semibold min-w-[175px] border border-background opacity-0">
+            <div className="relative inline-block">
+              <span className="border-background inline-block min-w-[175px] border p-1 text-sm font-semibold opacity-0 outline-hidden">
                 &nbsp;{name}
               </span>
               <input
@@ -329,7 +337,7 @@ export default function QueryWindow({
                 }}
                 placeholder="Please name your query"
                 spellCheck="false"
-                className="absolute top-0 right-0 left-0 bottom-0 text-sm p-1 outline-hidden font-semibold focus:border-secondary-foreground rounded bg-transparent"
+                className="focus:border-secondary-foreground absolute top-0 right-0 bottom-0 left-0 rounded bg-transparent p-1 text-sm font-semibold outline-hidden"
                 value={name}
                 onChange={(e) => setName(e.currentTarget.value)}
               />
@@ -354,7 +362,7 @@ export default function QueryWindow({
                     "rounded-r-none"
                   )}
                 >
-                  <LucidePlay className="w-4 h-4 mr-2" />
+                  <LucidePlay className="mr-2 h-4 w-4" />
                   Run
                 </button>
                 <DropdownMenu>
@@ -393,10 +401,7 @@ export default function QueryWindow({
               schema={autoCompleteSchema}
               fontSize={fontSize}
               onFontSizeChanged={setFontSize}
-              onCursorChange={(_, line, col) => {
-                setLineNumber(line);
-                setColumnNumber(col);
-              }}
+              onCursorChange={onCursorChange}
               onKeyDown={(e) => {
                 if (KEY_BINDING.run.match(e)) {
                   onRunClicked();
@@ -409,9 +414,9 @@ export default function QueryWindow({
               }}
             />
           </div>
-          <div className="grow-0 shrink-0">
-            <div className="flex gap-1 pb-1 px-2">
-              <div className="grow items-center flex text-xs mr-2 gap-2 pl-4">
+          <div className="shrink-0 grow-0">
+            <div className="flex gap-1 px-2 pb-1">
+              <div className="mr-2 flex grow items-center gap-2 pl-4 text-xs">
                 <div>Ln {lineNumber}</div>
                 <div>Col {columnNumber + 1}</div>
               </div>
@@ -437,7 +442,7 @@ export default function QueryWindow({
                 </TooltipTrigger>
                 <TooltipContent className="p-4">
                   <p className="mb-2">
-                    <span className="inline-block py-1 px-2 rounded bg-secondary text-secondary-foreground">
+                    <span className="bg-secondary text-secondary-foreground inline-block rounded px-2 py-1">
                       {KEY_BINDING.format.toString()}
                     </span>
                   </p>

From e340ecb37a1b73d6b2bdc68e78ac5f23be5bec27 Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Tue, 11 Feb 2025 10:07:15 +0700
Subject: [PATCH 048/106] add data catalog API functions and refactor imports
 (#352)

* add data catalog API functions and refactor imports

* fix lint check failed
---
 .../sql-editor/variable-highlight-plugin.ts   |   2 +-
 src/components/gui/sql-editor/index.tsx       |   2 +-
 src/outerbase-cloud/api-data-catalog.ts       | 131 ++++++++++++++++++
 src/outerbase-cloud/api.ts                    | 127 -----------------
 src/outerbase-cloud/data-catalog-driver.ts    |   2 +-
 5 files changed, 134 insertions(+), 130 deletions(-)
 create mode 100644 src/outerbase-cloud/api-data-catalog.ts

diff --git a/src/components/editor/sql-editor/variable-highlight-plugin.ts b/src/components/editor/sql-editor/variable-highlight-plugin.ts
index ad4d5630..d3e18e23 100644
--- a/src/components/editor/sql-editor/variable-highlight-plugin.ts
+++ b/src/components/editor/sql-editor/variable-highlight-plugin.ts
@@ -72,7 +72,7 @@ export function createVariableHighlightPlugin({
   function handlebarCompletion(context: CompletionContext) {
     const node = syntaxTree(context.state).resolveInner(context.pos);
 
-    let ptr: SyntaxNode | null | undefined = node.parent;
+    const ptr: SyntaxNode | null | undefined = node.parent;
 
     if (ptr?.type.name === "Braces" || ptr?.type.name === "Brackets") {
       return {
diff --git a/src/components/gui/sql-editor/index.tsx b/src/components/gui/sql-editor/index.tsx
index 5fb9f45c..34bc28dc 100644
--- a/src/components/gui/sql-editor/index.tsx
+++ b/src/components/gui/sql-editor/index.tsx
@@ -193,7 +193,7 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
       keyExtensions,
       schema,
       tableNameHighlightPlugin,
-      (variableList ?? []).join(","),
+      variableList,
       highlightVariable,
     ]);
 
diff --git a/src/outerbase-cloud/api-data-catalog.ts b/src/outerbase-cloud/api-data-catalog.ts
new file mode 100644
index 00000000..04bafe49
--- /dev/null
+++ b/src/outerbase-cloud/api-data-catalog.ts
@@ -0,0 +1,131 @@
+import { requestOuterbase } from "./api";
+import {
+  OuterbaseAPIResponse,
+  OuterbaseDataCatalogComment,
+  OuterbaseDataCatalogDefinition,
+  OuterbaseDataCatalogResponse,
+  OuterbaseDataCatalogSchemas,
+  OuterbaseDataCatalogVirtualColumnInput,
+  OuterbaseDefinitionInput,
+} from "./api-type";
+
+export async function getOuterbaseSchemas(
+  workspaceId: string,
+  sourceId: string,
+  baseId?: string
+) {
+  return await requestOuterbase<Record<string, OuterbaseDataCatalogSchemas[]>>(
+    `/api/v1/workspace/${workspaceId}/source/${sourceId}/schema?baseId=${baseId}`
+  );
+}
+
+export async function getOuterbaseBaseComments(
+  workspaceId: string,
+  sourceId: string,
+  baseId: string,
+  size: number = 1000
+) {
+  return await requestOuterbase<
+    OuterbaseDataCatalogResponse<OuterbaseDataCatalogComment[]>
+  >(
+    `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment?size=${size}&baseId=${baseId}`
+  );
+}
+
+export async function getOuterbaseDefinitions(
+  workspaceId: string,
+  baseId: string
+) {
+  return await requestOuterbase<
+    OuterbaseDataCatalogResponse<OuterbaseDataCatalogDefinition[]>
+  >(`/api/v1/workspace/${workspaceId}/base/${baseId}/definition`);
+}
+
+export async function updateOuerbaseDefinition(
+  workspaceId: string,
+  baseId: string,
+  definitionId: string,
+  data: OuterbaseDefinitionInput
+) {
+  const result = await requestOuterbase<OuterbaseDataCatalogDefinition>(
+    `/api/v1/workspace/${workspaceId}/base/${baseId}/definition/${definitionId}`,
+    "PUT",
+    data
+  );
+
+  return result;
+}
+export async function createOuterbaseDefinition(
+  workspaceId: string,
+  baseId: string,
+  data: OuterbaseDefinitionInput
+) {
+  const result = await requestOuterbase<OuterbaseDataCatalogDefinition>(
+    `/api/v1/workspace/${workspaceId}/base/${baseId}/definition`,
+    "POST",
+    {
+      base_id: baseId,
+      ...data,
+    }
+  );
+
+  return result;
+}
+
+export async function deleteOuterbaseDefinition(
+  workspaceId: string,
+  baseId: string,
+  definitionId: string
+) {
+  const result = await requestOuterbase<OuterbaseAPIResponse>(
+    `/api/v1/workspace/${workspaceId}/base/${baseId}/definition/${definitionId}`,
+    "DELETE"
+  );
+
+  return result;
+}
+
+export async function updateOuterbaseDataCatalogVirtualColumn(
+  workspaceId: string,
+  sourceId: string,
+  commentId: string,
+  data: OuterbaseDataCatalogVirtualColumnInput
+) {
+  const result = await requestOuterbase<OuterbaseDataCatalogComment>(
+    `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment/${commentId}`,
+    "PUT",
+    data
+  );
+
+  return result;
+}
+
+export async function createOuterbaseDataCatalogVirtualColumn(
+  workspaceId: string,
+  sourceId: string,
+  data: OuterbaseDataCatalogVirtualColumnInput
+) {
+  const result = await requestOuterbase<OuterbaseDataCatalogComment>(
+    `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment`,
+    "POST",
+    data
+  );
+
+  return result;
+}
+
+export async function deleteOutebaseDataCatalogVirtualColumn(
+  workspaceId: string,
+  sourceId: string,
+  commentId: string
+) {
+  try {
+    await requestOuterbase<boolean>(
+      `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment/${commentId}`,
+      "DELETE"
+    );
+    return true;
+  } catch {
+    return false;
+  }
+}
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index 784828ac..3193fe06 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -11,12 +11,6 @@ import {
   OuterbaseAPISession,
   OuterbaseAPIUser,
   OuterbaseAPIWorkspaceResponse,
-  OuterbaseDataCatalogComment,
-  OuterbaseDataCatalogDefinition,
-  OuterbaseDataCatalogResponse,
-  OuterbaseDataCatalogSchemas,
-  OuterbaseDataCatalogVirtualColumnInput,
-  OuterbaseDefinitionInput,
 } from "./api-type";
 
 export async function requestOuterbase<T = unknown>(
@@ -237,124 +231,3 @@ export async function getOuterbaseEmbedChart(
 
   return await result.json();
 }
-
-export async function getOuterbaseSchemas(
-  workspaceId: string,
-  sourceId: string,
-  baseId?: string
-) {
-  return await requestOuterbase<Record<string, OuterbaseDataCatalogSchemas[]>>(
-    `/api/v1/workspace/${workspaceId}/source/${sourceId}/schema?baseId=${baseId}`
-  );
-}
-
-export async function getOuterbaseBaseComments(
-  workspaceId: string,
-  sourceId: string,
-  baseId: string,
-  size: number = 1000
-) {
-  return await requestOuterbase<
-    OuterbaseDataCatalogResponse<OuterbaseDataCatalogComment[]>
-  >(
-    `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment?size=${size}&baseId=${baseId}`
-  );
-}
-
-export async function getOuterbaseDefinitions(
-  workspaceId: string,
-  baseId: string
-) {
-  return await requestOuterbase<
-    OuterbaseDataCatalogResponse<OuterbaseDataCatalogDefinition[]>
-  >(`/api/v1/workspace/${workspaceId}/base/${baseId}/definition`);
-}
-
-export async function updateOuerbaseDefinition(
-  workspaceId: string,
-  baseId: string,
-  definitionId: string,
-  data: OuterbaseDefinitionInput
-) {
-  const result = await requestOuterbase<OuterbaseDataCatalogDefinition>(
-    `/api/v1/workspace/${workspaceId}/base/${baseId}/definition/${definitionId}`,
-    "PUT",
-    data
-  );
-
-  return result;
-}
-export async function createOuterbaseDefinition(
-  workspaceId: string,
-  baseId: string,
-  data: OuterbaseDefinitionInput
-) {
-  const result = await requestOuterbase<OuterbaseDataCatalogDefinition>(
-    `/api/v1/workspace/${workspaceId}/base/${baseId}/definition`,
-    "POST",
-    {
-      base_id: baseId,
-      ...data,
-    }
-  );
-
-  return result;
-}
-
-export async function deleteOuterbaseDefinition(
-  workspaceId: string,
-  baseId: string,
-  definitionId: string
-) {
-  const result = await requestOuterbase<OuterbaseAPIResponse>(
-    `/api/v1/workspace/${workspaceId}/base/${baseId}/definition/${definitionId}`,
-    "DELETE"
-  );
-
-  return result;
-}
-
-export async function updateOuterbaseDataCatalogVirtualColumn(
-  workspaceId: string,
-  sourceId: string,
-  commentId: string,
-  data: OuterbaseDataCatalogVirtualColumnInput
-) {
-  const result = await requestOuterbase<OuterbaseDataCatalogComment>(
-    `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment/${commentId}`,
-    "PUT",
-    data
-  );
-
-  return result;
-}
-
-export async function createOuterbaseDataCatalogVirtualColumn(
-  workspaceId: string,
-  sourceId: string,
-  data: OuterbaseDataCatalogVirtualColumnInput
-) {
-  const result = await requestOuterbase<OuterbaseDataCatalogComment>(
-    `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment`,
-    "POST",
-    data
-  );
-
-  return result;
-}
-
-export async function deleteOutebaseDataCatalogVirtualColumn(
-  workspaceId: string,
-  sourceId: string,
-  commentId: string
-) {
-  try {
-    await requestOuterbase<boolean>(
-      `/api/v1/workspace/${workspaceId}/source/${sourceId}/comment/${commentId}`,
-      "DELETE"
-    );
-    return true;
-  } catch {
-    return false;
-  }
-}
diff --git a/src/outerbase-cloud/data-catalog-driver.ts b/src/outerbase-cloud/data-catalog-driver.ts
index 5f3f516d..4835610f 100644
--- a/src/outerbase-cloud/data-catalog-driver.ts
+++ b/src/outerbase-cloud/data-catalog-driver.ts
@@ -13,7 +13,7 @@ import {
   getOuterbaseSchemas,
   updateOuerbaseDefinition,
   updateOuterbaseDataCatalogVirtualColumn,
-} from "./api";
+} from "./api-data-catalog";
 import {
   OuterbaseDatabaseConfig,
   OuterbaseDataCatalogComment,

From 1a4127228950f80b9f53dee5697c3f5c9b977039 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 11 Feb 2025 10:14:22 +0700
Subject: [PATCH 049/106] fixing the typescript error

---
 .../sql-editor/variable-highlight-plugin.ts      | 16 ++++++++++------
 src/components/gui/sql-editor/index.tsx          | 10 +++++++---
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/editor/sql-editor/variable-highlight-plugin.ts b/src/components/editor/sql-editor/variable-highlight-plugin.ts
index ad4d5630..8bb64e0f 100644
--- a/src/components/editor/sql-editor/variable-highlight-plugin.ts
+++ b/src/components/editor/sql-editor/variable-highlight-plugin.ts
@@ -66,18 +66,20 @@ export function createVariableHighlightPlugin({
   variables,
   language,
 }: {
-  variables: string[];
+  variables: string;
   language: LanguageSupport;
 }) {
+  const variableList = variables.split(",").map((v) => v.trim());
+
   function handlebarCompletion(context: CompletionContext) {
     const node = syntaxTree(context.state).resolveInner(context.pos);
 
-    let ptr: SyntaxNode | null | undefined = node.parent;
+    const ptr: SyntaxNode | null | undefined = node.parent;
 
     if (ptr?.type.name === "Braces" || ptr?.type.name === "Brackets") {
       return {
         from: node.from + 1,
-        options: variables.map((variableName) => ({
+        options: variableList.map((variableName) => ({
           label: variableName,
           type: "variable",
           boost: 1000,
@@ -92,9 +94,11 @@ export function createVariableHighlightPlugin({
   const extensions = [
     variableHighlightView,
     variableHighlightTheme,
-    language.language.data.of({
-      autocomplete: handlebarCompletion,
-    }),
+    variableList
+      ? language.language.data.of({
+          autocomplete: handlebarCompletion,
+        })
+      : undefined,
   ].filter(Boolean);
 
   return extensions;
diff --git a/src/components/gui/sql-editor/index.tsx b/src/components/gui/sql-editor/index.tsx
index 5fb9f45c..e2a287b3 100644
--- a/src/components/gui/sql-editor/index.tsx
+++ b/src/components/gui/sql-editor/index.tsx
@@ -32,7 +32,11 @@ import useCodeEditorTheme from "./use-editor-theme";
 
 interface SqlEditorProps {
   highlightVariable?: boolean;
-  variableList?: string[];
+
+  /**
+   * Comma seprated variable name list
+   */
+  variableList?: string;
   value: string;
   dialect: SupportedDialect;
   readOnly?: boolean;
@@ -171,7 +175,7 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
         indentUnit.of("  "),
         highlightVariable
           ? createVariableHighlightPlugin({
-              variables: variableList ?? [],
+              variables: variableList ?? "",
               language: sqlDialect,
             })
           : undefined,
@@ -193,7 +197,7 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
       keyExtensions,
       schema,
       tableNameHighlightPlugin,
-      (variableList ?? []).join(","),
+      variableList,
       highlightVariable,
     ]);
 

From 39937e521cee44c093d8b9c5d0eaaa8d2a2b666c Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Wed, 12 Feb 2025 07:03:58 +0700
Subject: [PATCH 050/106] Outerbase Account setting (#355)

* add workspace context to navigation profile and update account settings link

* add refreshSession function to OuterbaseSessionContext

* add user profile update functions to api-account

* don't focus when readonly

* add account setting code

* fix: update user password

* account deletion confirmation footer component
---
 src/app/(outerbase)/nav-profile.tsx           |   9 +-
 src/app/(outerbase)/session-provider.tsx      |  18 ++-
 .../[workspaceId]/account/account-footer.tsx  | 109 ++++++++++++++
 .../w/[workspaceId]/account/editor-theme.tsx  | 106 +++++++++++++
 .../w/[workspaceId]/account/page.tsx          |  32 ++++
 .../[workspaceId]/account/two-factor-auth.tsx |  77 ++++++++++
 .../w/[workspaceId]/account/user-avatar.tsx   |  25 ++++
 .../[workspaceId]/account/user-form-input.tsx | 140 ++++++++++++++++++
 src/components/gui/sql-editor/index.tsx       |   2 +-
 src/outerbase-cloud/api-account.ts            |  25 ++++
 10 files changed, 538 insertions(+), 5 deletions(-)
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/account/account-footer.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/account/editor-theme.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/account/page.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/account/two-factor-auth.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/account/user-avatar.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/account/user-form-input.tsx
 create mode 100644 src/outerbase-cloud/api-account.ts

diff --git a/src/app/(outerbase)/nav-profile.tsx b/src/app/(outerbase)/nav-profile.tsx
index 1759a653..ea8daf83 100644
--- a/src/app/(outerbase)/nav-profile.tsx
+++ b/src/app/(outerbase)/nav-profile.tsx
@@ -11,8 +11,10 @@ import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
 import { useCallback } from "react";
 import { useSession } from "./session-provider";
+import { useWorkspaces } from "./workspace-provider";
 
 export default function NavigationProfile() {
+  const { currentWorkspace } = useWorkspaces();
   const { resolvedTheme, forcedTheme, setTheme } = useTheme();
   const { session } = useSession();
   const router = useRouter();
@@ -56,7 +58,12 @@ export default function NavigationProfile() {
           </div>
         </div>
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="justify-between">
+        <DropdownMenuItem
+          className="justify-between"
+          onClick={() => {
+            router.push(`/w/${currentWorkspace?.short_name}/account`);
+          }}
+        >
           Account Setting
           <Gear size={20} />
         </DropdownMenuItem>
diff --git a/src/app/(outerbase)/session-provider.tsx b/src/app/(outerbase)/session-provider.tsx
index a56cc280..ffdbdae0 100644
--- a/src/app/(outerbase)/session-provider.tsx
+++ b/src/app/(outerbase)/session-provider.tsx
@@ -1,6 +1,11 @@
 "use client";
-import { createContext, PropsWithChildren, useContext } from "react";
-import useSWR from "swr";
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+} from "react";
+import useSWR, { mutate } from "swr";
 import { getOuterbaseSession } from "../../outerbase-cloud/api";
 import {
   OuterbaseAPISession,
@@ -14,10 +19,12 @@ interface OuterebaseSessionContextProps {
     session: OuterbaseAPISession;
     user: OuterbaseAPIUser;
   };
+  refreshSession: () => Promise<void>;
 }
 
 const OuterbaseSessionContext = createContext<OuterebaseSessionContextProps>({
   isLoading: true,
+  refreshSession: async () => {},
 });
 
 export function useSession() {
@@ -40,9 +47,14 @@ export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
     }
   );
 
+  const refreshSession = useCallback(async () => {
+    if (!token) return;
+    await mutate("session-" + token);
+  }, [token]);
+
   return (
     <OuterbaseSessionContext.Provider
-      value={{ session: data, isLoading, token }}
+      value={{ session: data, isLoading, token, refreshSession }}
     >
       {children}
     </OuterbaseSessionContext.Provider>
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/account-footer.tsx b/src/app/(outerbase)/w/[workspaceId]/account/account-footer.tsx
new file mode 100644
index 00000000..a77d7666
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/account/account-footer.tsx
@@ -0,0 +1,109 @@
+import { useSession } from "@/app/(outerbase)/session-provider";
+import { Button } from "@/components/orbit/button";
+import { Input } from "@/components/orbit/input";
+import { Label } from "@/components/orbit/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { DialogTitle } from "@radix-ui/react-dialog";
+import { Check, Copy } from "lucide-react";
+import { useMemo, useState } from "react";
+
+export default function AccountFooter() {
+  const { session } = useSession();
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [email, setEmail] = useState("");
+
+  const isValidEmail = (email: string) => {
+    const emailRegex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/;
+    return emailRegex.test(email);
+  };
+
+  const copyToClipboard = async () => {
+    if (!session) return;
+    try {
+      await navigator.clipboard.writeText(session?.user.email);
+      setCopied(true);
+    } catch (error) {
+      console.error("Failed to copy:", error);
+    }
+  };
+  const onClose = () => {
+    setCopied(false);
+    setOpen(false);
+    setEmail("");
+  };
+  const fullName = useMemo(() => {
+    if (!session) return;
+    return session?.user.first_name + " " + session?.user.last_name;
+  }, [session]);
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            onClose();
+          }
+        }}
+      >
+        <DialogContent className="justify-items-start">
+          <DialogTitle>
+            Confirm deletion of {fullName}&apos; account
+          </DialogTitle>
+          <DialogDescription className="text-base">
+            Deleting this account will delete all Bases and Workspaces and
+            revoke all connections made to your databases. All members will lose
+            access. This action is permanent and{" "}
+            <span className="text-primary font-medium italic">cannot</span> be
+            undone.
+          </DialogDescription>
+          <Button onClick={copyToClipboard}>
+            {session?.user.email}
+            {copied ? (
+              <Check className="h-3 w-3" />
+            ) : (
+              <Copy className="h-3 w-3" />
+            )}
+          </Button>
+          <Label title="Enter your email address to confirm:">
+            <Input
+              value={email}
+              type="email"
+              onValueChange={setEmail}
+              placeholder="Enter email address"
+            />
+          </Label>
+          <div className="flex flex-row gap-5">
+            <Button
+              disabled={!isValidEmail(email)}
+              onClick={onClose}
+              variant="destructive"
+              title="I understand, delete my account"
+            />
+            <Button variant="secondary" onClick={onClose} title="Cancel" />
+          </div>
+        </DialogContent>
+      </Dialog>
+      <div className="flex flex-col items-start gap-2">
+        <h2 className="mt-5 text-xl font-medium text-balance text-neutral-800 dark:text-neutral-100">
+          Delete Account
+        </h2>
+        <div className="text-base">
+          This will delete your account and all the workspaces you own.
+        </div>
+        <Button
+          className="mt-5"
+          title="Delete Account"
+          variant="destructive"
+          size="lg"
+          onClick={() => setOpen(true)}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/editor-theme.tsx b/src/app/(outerbase)/w/[workspaceId]/account/editor-theme.tsx
new file mode 100644
index 00000000..2d4f93e6
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/account/editor-theme.tsx
@@ -0,0 +1,106 @@
+import SqlEditor from "@/components/gui/sql-editor";
+import { Button } from "@/components/orbit/button";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import { useTheme } from "next-themes";
+import { useState } from "react";
+
+function EditorTheme() {
+  const [selectedTheme, setSelectedTheme] = useState("");
+
+  const statement = `CREATE TABLE video_game (
+    game_id SERIAL PRIMARY KEY,
+    title VARCHAR(222) NOT NULL,
+    genre VARCHAR(222),
+    plaform VARCHAR(100),
+    release_dat DATE,
+    developer VARCHAR(255)
+    );`;
+
+  const EditorThemes = [
+    {
+      title: "Moondust",
+      value: "moondust",
+    },
+    {
+      title: "Invasion",
+      value: "invasion",
+    },
+    {
+      title: "Freedom",
+      value: "freedom",
+    },
+  ];
+  return (
+    <div className="mt-5">
+      <h2 className="mb-3 text-base font-medium">Editor theme</h2>
+      {EditorThemes.map((theme, index) => {
+        const isSelected = theme.value === selectedTheme;
+        return (
+          <div
+            key={index}
+            onClick={() => setSelectedTheme(theme.value)}
+            className="mb-2 w-full cursor-pointer"
+          >
+            <Label>{theme.title}</Label>
+            <div
+              className={cn(
+                "relative flex h-[200px] w-full items-center justify-center overflow-hidden rounded-2xl border bg-white p-2 dark:bg-neutral-950",
+                isSelected
+                  ? "border-1 border-neutral-500 opacity-100"
+                  : "opacity-50 hover:opacity-100"
+              )}
+            >
+              <div className="pointer-events-none">
+                <SqlEditor
+                  highlightVariable
+                  dialect="mysql"
+                  value={statement}
+                  readOnly
+                />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default function UserEditorTheme() {
+  const { theme, setTheme } = useTheme();
+
+  // Not implement yet
+  return (
+    <div className="mt-6 flex flex-col items-start gap-2">
+      <h2 className="text-xl font-medium text-balance text-neutral-800 dark:text-neutral-100">
+        Theming
+      </h2>
+      <h2 className="mt-5 mb-3 text-base font-medium">Theme</h2>
+      <div className="flex flex-row gap-5">
+        <Button
+          size="lg"
+          title="System"
+          toggled={theme === "system"}
+          className="w-[110px] justify-center"
+          onClick={() => setTheme("system")}
+        />
+        <Button
+          size="lg"
+          title="Dark"
+          className="w-[110px] justify-center"
+          toggled={theme === "dark"}
+          onClick={() => setTheme("dark")}
+        />
+        <Button
+          size="lg"
+          title="Light"
+          className="w-[110px] justify-center"
+          toggled={theme === "light"}
+          onClick={() => setTheme("light")}
+        />
+      </div>
+      <EditorTheme />
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/page.tsx b/src/app/(outerbase)/w/[workspaceId]/account/page.tsx
new file mode 100644
index 00000000..59505a03
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/account/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+import { NavigationBar } from "@/app/(outerbase)/nav";
+import { useSession } from "@/app/(outerbase)/session-provider";
+import AccountFooter from "./account-footer";
+import TwoFactorAuth from "./two-factor-auth";
+import UserAvatar from "./user-avatar";
+import UserFormInput from "./user-form-input";
+
+export default function AccountPage() {
+  const { session } = useSession();
+
+  if (!session?.user) return <div>You are not login!</div>;
+
+  return (
+    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+      <NavigationBar />
+
+      <main className="mx-auto flex max-w-sm flex-col overflow-x-hidden overflow-y-auto pt-20 pb-10">
+        <div className="flex flex-col gap-5">
+          <h1 className="text-primary text-2xl font-bold">Account Setting</h1>
+          <h2 className="mt-5 text-xl font-medium text-balance text-neutral-800 dark:text-neutral-100">
+            Details
+          </h2>
+          <UserAvatar user={session.user} />
+          <UserFormInput user={session.user} />
+          <TwoFactorAuth />
+          <AccountFooter />
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/two-factor-auth.tsx b/src/app/(outerbase)/w/[workspaceId]/account/two-factor-auth.tsx
new file mode 100644
index 00000000..08691f22
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/account/two-factor-auth.tsx
@@ -0,0 +1,77 @@
+import { Button } from "@/components/orbit/button";
+import { Input } from "@/components/orbit/input";
+import { Label } from "@/components/ui/label";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+export default function TwoFactorAuth() {
+  const [add, setAdd] = useState(false);
+  // not implement two factor authentication yet
+
+  let footer = (
+    <Button
+      onClick={() => setAdd(true)}
+      title="Add 2FA Device"
+      size="lg"
+      className="mt-10"
+    />
+  );
+
+  if (add) {
+    footer = (
+      <div className="mt-10 flex flex-col gap-5">
+        <div className="flex flex-row items-center gap-5">
+          <Button
+            onClick={() => setAdd(true)}
+            title="SMS"
+            size="lg"
+            className="w-[170px] justify-center"
+          />
+          <Button
+            onClick={() => setAdd(true)}
+            title="Authentication App"
+            size="lg"
+            className="w-[170px] justify-center"
+          />
+        </div>
+        <div className="mt-5 flex flex-col gap-2">
+          <Label className="font-semibold">
+            Country or region code <span className="text-red-500">*</span>
+          </Label>
+          <Button variant="secondary" className="w-[250px]">
+            <span className="font-normal">(+1) United State</span>
+            <div className="flex-1" />
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Label className="font-semibold">
+            Your phone number <span className="text-red-500">*</span>
+          </Label>
+          <Input className="w-[250px]" />
+        </div>
+        <div className="flex flex-row gap-5">
+          <Button variant="primary" title="Sent Code" className="rounded-4xl" />
+
+          <Button
+            title="Cancel"
+            onClick={() => setAdd(false)}
+            className="bg-gray-600"
+          />
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="mt-6 flex flex-col items-start gap-2">
+      <h2 className="text-xl font-medium text-balance text-neutral-800 dark:text-neutral-100">
+        Two-factor authentication
+      </h2>
+      <span className="text-accent-foreground text-base dark:text-neutral-400">
+        Requiring more than just a password to sign in to your account, giving
+        your Outerbase account an additional layer of security.
+      </span>
+      {footer}
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/user-avatar.tsx b/src/app/(outerbase)/w/[workspaceId]/account/user-avatar.tsx
new file mode 100644
index 00000000..34727a32
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/account/user-avatar.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@/components/orbit/button";
+import { OuterbaseAPIUser } from "@/outerbase-cloud/api-type";
+import Image from "next/image";
+
+export default function UserAvatar({ user }: { user: OuterbaseAPIUser }) {
+  // not implement upload user avatar
+
+  return (
+    <div className="flex items-center gap-5">
+      <div className="flex size-24 items-center justify-center rounded-full bg-neutral-200 text-center dark:bg-neutral-800">
+        {user.avatar ? (
+          <Image
+            src={user.avatar}
+            alt="User Avatar"
+            fill
+            className="rounded-full object-cover"
+          />
+        ) : (
+          <span className="text-4xl">{user.initials}</span>
+        )}
+      </div>
+      <Button title="Add Avatar" size="lg" />
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/user-form-input.tsx b/src/app/(outerbase)/w/[workspaceId]/account/user-form-input.tsx
new file mode 100644
index 00000000..7bfb1a90
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/account/user-form-input.tsx
@@ -0,0 +1,140 @@
+import { useSession } from "@/app/(outerbase)/session-provider";
+import { Button } from "@/components/orbit/button";
+import { Input } from "@/components/orbit/input";
+import { Label } from "@/components/orbit/label";
+import {
+  updateOuterbaseUserPassword,
+  updateOuterbaseUserProfile,
+} from "@/outerbase-cloud/api-account";
+import { OuterbaseAPIUser } from "@/outerbase-cloud/api-type";
+import { produce } from "immer";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+
+interface Props {
+  user: OuterbaseAPIUser;
+}
+
+export default function UserFormInput({ user }: Props) {
+  const { refreshSession } = useSession();
+  const [loading, setLoading] = useState<
+    "user_profile" | "login_method" | undefined
+  >();
+  const [userData, setUserData] = useState<OuterbaseAPIUser>(user);
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const updateUserProfile = useCallback(() => {
+    setLoading("user_profile");
+    updateOuterbaseUserProfile({
+      first_name: userData.first_name,
+      last_name: userData.last_name,
+    })
+      .then(() => {
+        toast.success("Profile updated");
+        refreshSession();
+      })
+      .catch((error) => {
+        toast.error(error?.message);
+      })
+      .finally(() => {
+        setLoading(undefined);
+      });
+  }, [userData, refreshSession]);
+
+  const updateUserPassword = useCallback(() => {
+    setLoading("login_method");
+    updateOuterbaseUserPassword({
+      new_password: newPassword,
+      old_password: currentPassword,
+    })
+      .then(() => {
+        toast.success("Password updated");
+        refreshSession();
+      })
+      .catch((error) => toast.error(error?.message))
+      .finally(() => {
+        setLoading(undefined);
+      });
+  }, [newPassword, currentPassword, refreshSession]);
+
+  return (
+    <div className="flex flex-col items-start gap-5">
+      <Label title="First Name" htmlFor="first_name">
+        <Input
+          value={userData?.first_name}
+          onValueChange={(v) => {
+            setUserData((prev) =>
+              produce(prev, (draft) => {
+                draft.first_name = v;
+              })
+            );
+          }}
+          placeholder="First name..."
+          id="first_name"
+          size="lg"
+        />
+      </Label>
+      <Label title="Last Name" htmlFor="last_name">
+        <Input
+          value={userData?.last_name}
+          onValueChange={(v) => {
+            setUserData((prev) =>
+              produce(prev, (draft) => {
+                draft.last_name = v;
+              })
+            );
+          }}
+          placeholder="Last name..."
+          id="last_name"
+          size="lg"
+        />
+      </Label>
+      <Button
+        loading={loading === "user_profile"}
+        title="Update"
+        onClick={updateUserProfile}
+        size="lg"
+        shape="base"
+        disabled={!userData.first_name || !userData.last_name}
+      />
+      <h2 className="mt-6 text-xl font-medium text-balance text-neutral-800 dark:text-neutral-100">
+        Login method
+      </h2>
+      <Label title="Email" htmlFor="email">
+        <Input
+          value={user.email}
+          placeholder="Enter email..."
+          id="email"
+          disabled
+          size="lg"
+        />
+      </Label>
+      <Label title="Current password" htmlFor="currentpassword">
+        <Input
+          value={currentPassword}
+          onValueChange={setCurrentPassword}
+          id="currentpassword"
+          size="lg"
+          type="password"
+        />
+      </Label>
+      <Label title="New Password" htmlFor="lastname">
+        <Input
+          value={newPassword}
+          id="lastname"
+          size="lg"
+          onValueChange={setNewPassword}
+          type="password"
+        />
+      </Label>
+
+      <Button
+        loading={loading === "login_method"}
+        disabled={!newPassword || !currentPassword}
+        title="Update"
+        size="lg"
+        onClick={updateUserPassword}
+      />
+    </div>
+  );
+}
diff --git a/src/components/gui/sql-editor/index.tsx b/src/components/gui/sql-editor/index.tsx
index e2a287b3..f2fb12ce 100644
--- a/src/components/gui/sql-editor/index.tsx
+++ b/src/components/gui/sql-editor/index.tsx
@@ -204,7 +204,7 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
     return (
       <CodeMirror
         ref={ref}
-        autoFocus
+        autoFocus={!readOnly}
         readOnly={readOnly}
         onKeyDown={onKeyDown}
         basicSetup={{
diff --git a/src/outerbase-cloud/api-account.ts b/src/outerbase-cloud/api-account.ts
new file mode 100644
index 00000000..f1b4058a
--- /dev/null
+++ b/src/outerbase-cloud/api-account.ts
@@ -0,0 +1,25 @@
+import { requestOuterbase } from "./api";
+
+export interface OuterbaseUserProfileInput {
+  first_name: string;
+  last_name: string;
+}
+
+export async function updateOuterbaseUserProfile(
+  data: OuterbaseUserProfileInput
+) {
+  return await requestOuterbase(`/api/v1/me/profile`, "POST", data);
+}
+
+export async function updateOuterbaseUserPassword(data: {
+  new_password: string;
+  old_password: string;
+}) {
+  return await requestOuterbase(`/api/v1/me/profile/password`, "PUT", data);
+}
+
+export async function updateOuterbaseUserFlag(editor_theme: string) {
+  return await requestOuterbase(`/api/v1/me/flag`, "POST", {
+    editor_theme,
+  });
+}

From 025afed978dc9742b85ca5f38110b0b9bee99273 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 12 Feb 2025 13:06:45 +0700
Subject: [PATCH 051/106] experiment prompt plugin (#357)

* testing with prompt plugin

* design the prompt

* finish the prompt editor

* add error message
---
 package-lock.json                             |  14 +
 package.json                                  |   1 +
 .../storybook/editor-prompt-widget/page.tsx   |   6 +
 src/app/storybook/editor/page.tsx             |  68 +++
 src/app/storybook/layout.tsx                  | 191 +++---
 src/components/editor/prompt-plugin.css       |  43 ++
 src/components/editor/prompt-plugin.tsx       | 569 ++++++++++++++++++
 src/components/editor/prompt-widget.tsx       | 205 +++++++
 src/components/gui/sql-editor/index.tsx       |  29 +-
 .../gui/sql-editor/statement-highlight.ts     |  11 +-
 10 files changed, 1039 insertions(+), 98 deletions(-)
 create mode 100644 src/app/storybook/editor-prompt-widget/page.tsx
 create mode 100644 src/app/storybook/editor/page.tsx
 create mode 100644 src/components/editor/prompt-plugin.css
 create mode 100644 src/components/editor/prompt-plugin.tsx
 create mode 100644 src/components/editor/prompt-widget.tsx

diff --git a/package-lock.json b/package-lock.json
index bc2cb3c2..dd743796 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-sql": "^6.5.5",
+        "@codemirror/merge": "^6.8.0",
         "@dagrejs/dagre": "^1.1.4",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/modifiers": "^7.0.0",
@@ -1051,6 +1052,19 @@
         "crelt": "^1.0.5"
       }
     },
+    "node_modules/@codemirror/merge": {
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/merge/-/merge-6.8.0.tgz",
+      "integrity": "sha512-EcCD4OJlGz6lJaqZOFM/RE6fqM4XSQlWNWVxm2CJS1snbrbkgYLTvj8c++pFUWpJOUiNgcxvYMYkMisnC0aR6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/highlight": "^1.0.0",
+        "style-mod": "^4.1.0"
+      }
+    },
     "node_modules/@codemirror/search": {
       "version": "6.5.8",
       "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.8.tgz",
diff --git a/package.json b/package.json
index 3d36303b..50883240 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.5.5",
+    "@codemirror/merge": "^6.8.0",
     "@dagrejs/dagre": "^1.1.4",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
diff --git a/src/app/storybook/editor-prompt-widget/page.tsx b/src/app/storybook/editor-prompt-widget/page.tsx
new file mode 100644
index 00000000..9f759b0b
--- /dev/null
+++ b/src/app/storybook/editor-prompt-widget/page.tsx
@@ -0,0 +1,6 @@
+"use client";
+import { CodeMirrorPromptWidget } from "@/components/editor/prompt-widget";
+
+export default function StorybookEditorPromptWidget() {
+  return <CodeMirrorPromptWidget />;
+}
diff --git a/src/app/storybook/editor/page.tsx b/src/app/storybook/editor/page.tsx
new file mode 100644
index 00000000..cae91a74
--- /dev/null
+++ b/src/app/storybook/editor/page.tsx
@@ -0,0 +1,68 @@
+"use client";
+import SqlEditor from "@/components/gui/sql-editor";
+import { useState } from "react";
+
+export default function StorybookEditorPage() {
+  const [value, setValue] = useState(`CREATE TABLE customer(
+  cust_id INTEGER PRIMARY KEY,
+  cust_name TEXT,
+  cust_addr TEXT
+);
+
+-- some comment here that should be ignore
+
+
+CREATE VIEW customer_address AS
+   SELECT cust_id, cust_addr FROM customer;
+CREATE TRIGGER cust_addr_chng
+INSTEAD OF UPDATE OF cust_addr ON customer_address
+BEGIN
+  UPDATE customer SET cust_addr=NEW.cust_addr
+   WHERE cust_id=NEW.cust_id;
+END;
+`);
+
+  return (
+    <div>
+      <SqlEditor
+        dialect="sqlite"
+        value={value}
+        onChange={setValue}
+        enablePrompt
+        onPrompt={async (prompt, selected) => {
+          const selectedText = selected?.text;
+
+          // do some fake delay
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+
+          // random error
+          if (Math.random() < 0.2) {
+            throw new Error("Random error");
+          }
+
+          const lines = selectedText?.split("\n") || [];
+
+          for (let i = 0; i < lines.length; i++) {
+            if (Math.random() > 0.5) {
+              lines.splice(i, 0, "some random text " + Math.random());
+              i++;
+            }
+          }
+
+          for (let i = 0; i < 5; i++) {
+            // add random lines at the end
+            if (Math.random() > 0.5) {
+              lines.push("some random text " + Math.random());
+            }
+          }
+
+          // randomly remove lines
+          const finalLines = lines.filter(() => Math.random() > 0.35);
+          console.log(finalLines);
+
+          return finalLines.join("\n");
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/storybook/layout.tsx b/src/app/storybook/layout.tsx
index 74a20e0e..543f1beb 100644
--- a/src/app/storybook/layout.tsx
+++ b/src/app/storybook/layout.tsx
@@ -1,3 +1,4 @@
+import ClientOnly from "@/components/client-only";
 import { SidebarMenuHeader, SidebarMenuItem } from "@/components/sidebar-menu";
 import ThemeToggle from "@/components/theme-toggle";
 import { Separator } from "@/components/ui/separator";
@@ -11,103 +12,109 @@ export default function StorybookRootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <ThemeLayout>
-      <div className="flex h-screen w-screen overflow-hidden">
-        <div className="flex w-[300px] flex-col border-r">
-          <div className="flex p-2">
-            <ThemeToggle />
-          </div>
+    <ClientOnly>
+      <ThemeLayout>
+        <div className="flex h-screen w-screen overflow-hidden">
+          <div className="flex w-[300px] flex-col border-r">
+            <div className="flex p-2">
+              <ThemeToggle />
+            </div>
 
-          <SidebarMenuItem icon={Layers2} text="Guideline" href="/storybook" />
-          <SidebarMenuHeader text="Shadcn UI" />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Guideline"
+              href="/storybook"
+            />
+            <SidebarMenuHeader text="Shadcn UI" />
 
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Dialog"
-            href="https://ui.shadcn.com/docs/components/dialog"
-          />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Create Dialog"
-            href="/storybook/create-dialog"
-          />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Dropdown Menu"
-            href="https://ui.shadcn.com/docs/components/dropdown-menu"
-          />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Popover"
-            href="https://ui.shadcn.com/docs/components/popover"
-          />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Dialog"
+              href="https://ui.shadcn.com/docs/components/dialog"
+            />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Create Dialog"
+              href="/storybook/create-dialog"
+            />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Dropdown Menu"
+              href="https://ui.shadcn.com/docs/components/dropdown-menu"
+            />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Popover"
+              href="https://ui.shadcn.com/docs/components/popover"
+            />
 
-          <SidebarMenuHeader text="Orbit Design System" />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Avatar"
-            href="/storybook/avatar"
-          />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Button"
-            href="/storybook/button"
-          />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Input"
-            href="/storybook/input"
-          />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Label"
-            href="/storybook/label"
-          />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Loader"
-            href="/storybook/loader"
-          />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Menu bar"
-            href="/storybook/menu-bar"
-          />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Select"
-            href="/storybook/select"
-          />
+            <SidebarMenuHeader text="Orbit Design System" />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Avatar"
+              href="/storybook/avatar"
+            />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Button"
+              href="/storybook/button"
+            />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Input"
+              href="/storybook/input"
+            />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Label"
+              href="/storybook/label"
+            />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Loader"
+              href="/storybook/loader"
+            />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Menu bar"
+              href="/storybook/menu-bar"
+            />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Select"
+              href="/storybook/select"
+            />
 
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Toggle"
-            href="/storybook/toggle"
-          />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Toggle"
+              href="/storybook/toggle"
+            />
 
-          <Separator />
-          <SidebarMenuHeader text="Advanced UI Components" />
-          <SidebarMenuItem
-            icon={Layers2}
-            text="Toolbar"
-            href="/storybook/toolbar"
-          />
-          <SidebarMenuItem
-            icon={Component}
-            text="List View"
-            href="/storybook/listview"
-          />
-          <SidebarMenuItem
-            icon={Component}
-            text="Chart Editor"
-            href="/storybook/chart-editor"
-          />
-          <SidebarMenuItem text="Board" href="/storybook/board" />
-        </div>
-        <div className="flex-1 overflow-y-auto p-4">
-          <TooltipProvider>{children}</TooltipProvider>
+            <Separator />
+            <SidebarMenuHeader text="Advanced UI Components" />
+            <SidebarMenuItem
+              icon={Layers2}
+              text="Toolbar"
+              href="/storybook/toolbar"
+            />
+            <SidebarMenuItem
+              icon={Component}
+              text="List View"
+              href="/storybook/listview"
+            />
+            <SidebarMenuItem
+              icon={Component}
+              text="Chart Editor"
+              href="/storybook/chart-editor"
+            />
+            <SidebarMenuItem text="Board" href="/storybook/board" />
+          </div>
+          <div className="flex-1 overflow-y-auto p-4">
+            <TooltipProvider>{children}</TooltipProvider>
+          </div>
         </div>
-      </div>
-    </ThemeLayout>
+      </ThemeLayout>
+    </ClientOnly>
   );
 }
diff --git a/src/components/editor/prompt-plugin.css b/src/components/editor/prompt-plugin.css
new file mode 100644
index 00000000..702b0f89
--- /dev/null
+++ b/src/components/editor/prompt-plugin.css
@@ -0,0 +1,43 @@
+.prompt-line-preview {
+  background: #abf7b1;
+}
+
+.prompt-line-selected {
+  background: #f5f5f5;
+}
+
+.dark .prompt-line-selected {
+  background: #222;
+}
+
+.cm-deletedChunk {
+  background-color: #fab1a0 !important;
+}
+
+.dark .cm-deletedChunk {
+  background-color: #b54b4b !important;
+}
+
+.cm-changedLine {
+  background-color: #55efc4 !important;
+}
+
+.cm-changedLine {
+  background-color: #55efc4 !important;
+}
+
+.dark .cm-changedLine {
+  background-color: #2f6542 !important;
+}
+
+.cm-insertedLine .cm-changedText {
+  background: none !important;
+}
+
+.cm-deletedChunk .cm-deletedText {
+  background: none !important;
+}
+
+.cm-deletedChunk del {
+  text-decoration: none !important;
+}
diff --git a/src/components/editor/prompt-plugin.tsx b/src/components/editor/prompt-plugin.tsx
new file mode 100644
index 00000000..255d9220
--- /dev/null
+++ b/src/components/editor/prompt-plugin.tsx
@@ -0,0 +1,569 @@
+import { unifiedMergeView } from "@codemirror/merge";
+import {
+  Compartment,
+  EditorState,
+  StateEffect,
+  StateField,
+  Transaction,
+} from "@codemirror/state";
+import {
+  Decoration,
+  EditorView,
+  keymap,
+  showTooltip,
+  Tooltip,
+  ViewPlugin,
+  WidgetType,
+} from "@codemirror/view";
+import { createRoot } from "react-dom/client";
+import { resolveToNearestStatement } from "../gui/sql-editor/statement-highlight";
+import "./prompt-plugin.css";
+import { CodeMirrorPromptWidget } from "./prompt-widget";
+
+// Effect to add/remove prompt widget
+const effectHidePrompt = StateEffect.define();
+const effectShowPrompt = StateEffect.define<{
+  lineNumber: number;
+  from: number;
+  to: number;
+}>();
+
+// This effect is used to add selected code
+// that will be for prompt suggestion
+const effectSelectedPromptLine = StateEffect.define<number[]>();
+
+export interface PromptSelectedFragment {
+  text: string;
+  fullText: string;
+  startLineNumber: number;
+  endLineNumber: number;
+}
+
+export type PromptCallback = (
+  promptQuery: string,
+  selected?: PromptSelectedFragment
+) => Promise<string>;
+
+class PlaceholderWidget extends WidgetType {
+  toDOM(): HTMLElement {
+    const wrap = document.createElement("span");
+    wrap.className = "cm-placeholder";
+    wrap.style.padding = "";
+    wrap.append(document.createTextNode("⌘ + B to get AI assistant"));
+    return wrap;
+  }
+
+  ignoreEvent(): boolean {
+    return false;
+  }
+}
+
+// React-based Widget for Inline Prompt
+class PromptWidget extends WidgetType {
+  protected container: HTMLDivElement;
+
+  constructor(
+    public plugin: CodeMirrorPromptPlugin,
+    public from: number,
+    public to: number
+  ) {
+    super();
+
+    plugin.lock();
+    this.container = document.createElement("div");
+
+    plugin.isActive = true;
+    plugin.activeWidget = this;
+
+    const view = plugin.getEditorView();
+    if (!view) return;
+
+    // First we need to lock the editor to read-only.
+    // This will simplify the logic of the plugin of not having to
+    // worry about keeping up with the editor state while the prompt
+    const getSelectionLines = () => {
+      const startLineNumber = view.state.doc.lineAt(from).number;
+      const endLineNumber = view.state.doc.lineAt(to).number;
+      return Array.from(
+        { length: endLineNumber - startLineNumber + 1 },
+        (_, i) => startLineNumber + i
+      );
+    };
+
+    const selectedLines = getSelectionLines();
+
+    // Calculate cursor and selection positions
+    const startPosition = from;
+    const startLineNumber = view.state.doc.lineAt(startPosition).number;
+    const endPosition = selectedLines
+      ? view.state.doc.line(selectedLines[selectedLines.length - 1]).to
+      : view.state.doc.lineAt(startPosition).to;
+
+    // Reverse the suggestion that we have made
+    const selectedOriginalText = view.state.sliceDoc(
+      startPosition,
+      endPosition
+    );
+
+    const originalText = view.state.doc.toString();
+    let suggestedText = selectedOriginalText;
+
+    const reverseSuggestion = () => {
+      if (suggestedText !== selectedOriginalText) {
+        this.plugin.hideSuggestionDiff();
+
+        view.dispatch({
+          changes: {
+            from: startPosition,
+            to: startPosition + suggestedText.length,
+            insert: selectedOriginalText,
+          },
+          annotations: [Transaction.addToHistory.of(false)],
+        });
+      }
+    };
+
+    this.container.style.padding = "10px";
+
+    this.container.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+
+    this.container.addEventListener("mousedown", (e) => {
+      e.stopPropagation();
+    });
+
+    this.container.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+    });
+
+    // The query counter helps in canceling queries.
+    // When a query is canceled, the counter is incremented.
+    // If the result of a query arrives and the counter has changed, the result is ignored.
+    let queryCounter = 1;
+
+    const onGenerate = async (promptText: string) => {
+      try {
+        const expectedQueryCounter = queryCounter;
+
+        const queryText = await this.plugin.getSuggestion(promptText, {
+          text: suggestedText ?? selectedOriginalText,
+          fullText: view.state.doc.toString(),
+          startLineNumber,
+          endLineNumber: view.state.doc.lineAt(
+            startPosition + suggestedText.length
+          ).number,
+        });
+
+        // This prevent when we close the widget before
+        // the suggestion return result which cause
+        // us to suggestion code to the editor
+        if (!this.plugin.isActive) return;
+
+        // If the query counter is not matched, it must be canceled
+        if (expectedQueryCounter !== queryCounter) return;
+
+        // We need to reverse the change before apply new suggestion
+        reverseSuggestion();
+
+        this.plugin.showDiff(originalText);
+
+        // Replace selection with suggested result from prompt
+        view.dispatch({
+          changes: {
+            from: startPosition,
+            to: endPosition,
+            insert: queryText,
+          },
+          annotations: [Transaction.addToHistory.of(false)],
+        });
+
+        suggestedText = queryText;
+
+        // Highlight the suggested code along with the previous selected code
+        view.dispatch({
+          effects: [
+            effectSelectedPromptLine.of(
+              Array.from(
+                {
+                  length:
+                    view.state.doc.lineAt(startPosition + suggestedText.length)
+                      .number - startLineNumber,
+                },
+                (_, i) => startLineNumber + i
+              )
+            ),
+          ],
+        });
+      } finally {
+        queryCounter++;
+      }
+    };
+
+    const onClosePrompt = () => {
+      plugin.closePrompt();
+      plugin.setEditorFocus();
+      reverseSuggestion();
+    };
+
+    const onReject = () => {
+      reverseSuggestion(); // Restore the original text
+
+      view.dispatch({
+        effects: [
+          effectSelectedPromptLine.of(selectedLines), // Reverse the selected line highlight
+        ],
+      });
+
+      suggestedText = selectedOriginalText;
+    };
+
+    const onCancel = () => {
+      queryCounter++;
+    };
+
+    const onAccept = () => {
+      plugin.closePrompt();
+      plugin.setEditorFocus();
+    };
+
+    createRoot(this.container).render(
+      <CodeMirrorPromptWidget
+        onClose={onClosePrompt}
+        onAccept={onAccept}
+        onSubmit={onGenerate}
+        onReject={onReject}
+        onCancel={onCancel}
+      />
+    );
+  }
+
+  toDOM() {
+    return this.container;
+  }
+
+  destroy() {
+    // Clean up when the widget is destroyed
+    this.plugin.unlock();
+
+    this.plugin.activeWidget = undefined;
+    this.plugin.isActive = false;
+  }
+
+  ignoreEvent() {
+    return false; // Allow interactions inside the widget
+  }
+}
+
+const decorationSelectedLine = Decoration.line({
+  class: "prompt-line-selected",
+});
+
+const promptSelectedLines = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+
+  update(v, tr) {
+    for (const e of tr.effects) {
+      if (e.is(effectSelectedPromptLine)) {
+        return Decoration.set(
+          e.value.map((line) =>
+            decorationSelectedLine.range(tr.state.doc.line(line).from)
+          )
+        );
+      } else if (e.is(effectHidePrompt)) {
+        return Decoration.none;
+      }
+    }
+
+    return v;
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
+
+function getCursorTooltips(
+  state: EditorState,
+  plugin: CodeMirrorPromptPlugin
+): readonly Tooltip[] {
+  return state.selection.ranges
+    .filter((range) => !range.empty)
+    .map((range) => {
+      return {
+        pos: range.head,
+        above: range.head < range.anchor,
+        strictSide: true,
+        arrow: false,
+        create: () => {
+          const dom = document.createElement("div");
+          dom.className = "rounded overflow-hidden border border-zinc-500";
+
+          const editButton = document.createElement("button");
+          editButton.className =
+            "bg-muted text-secondary-foreground text-sm p-1 px-2 cursor-pointer";
+          editButton.innerHTML = "Edit <span>⌘B</span>";
+
+          editButton.onclick = () => {
+            plugin.openPrompt(plugin.getEditorView()!);
+          };
+
+          dom.appendChild(editButton);
+
+          return { dom };
+        },
+      };
+    });
+}
+
+export class CodeMirrorPromptPlugin {
+  public isActive = false;
+  activeWidget?: PromptWidget;
+  promptCallback?: PromptCallback;
+
+  /**
+   * This is for locking when prompt is open. This is to prevent
+   * a lot of complication dealing with updated selected text and
+   * cursor position.
+   */
+  protected lockCompartment = new Compartment();
+
+  /**
+   * This is for showing the diff mode when we got response from
+   * AI agent.
+   */
+  protected diffCompartment = new Compartment();
+
+  protected view?: EditorView;
+
+  public lock() {
+    requestAnimationFrame(() => {
+      if (this.view) {
+        this.view.dispatch({
+          effects: this.lockCompartment.reconfigure([
+            EditorState.readOnly.of(true),
+          ]),
+        });
+      }
+    });
+  }
+
+  public unlock() {
+    requestAnimationFrame(() => {
+      if (this.view) {
+        this.view.dispatch({
+          effects: this.lockCompartment.reconfigure([]),
+        });
+      }
+    });
+  }
+
+  public setEditorFocus() {
+    this.view?.focus();
+  }
+
+  public closePrompt() {
+    this.view?.dispatch({
+      effects: [
+        effectHidePrompt.of(null),
+        this.diffCompartment.reconfigure([]),
+      ],
+    });
+  }
+
+  public getEditorView() {
+    return this.view;
+  }
+
+  public showDiff(originalText: string) {
+    if (this.view) {
+      this.view.dispatch({
+        effects: this.diffCompartment.reconfigure([
+          unifiedMergeView({
+            original: originalText,
+            mergeControls: false,
+            syntaxHighlightDeletions: false,
+          }),
+        ]),
+      });
+    }
+  }
+
+  public hideSuggestionDiff() {
+    if (this.view) {
+      this.view.dispatch({
+        effects: this.diffCompartment.reconfigure([]),
+      });
+    }
+  }
+
+  public openPrompt(v: EditorView) {
+    const currentCursor = v.state.selection.main.from;
+    const currentCursorLine = v.state.doc.lineAt(currentCursor);
+    const nearestA = resolveToNearestStatement(
+      v.state,
+      v.state.selection.main.from
+    );
+    const nearestB = resolveToNearestStatement(
+      v.state,
+      v.state.selection.main.to
+    );
+
+    const startLine = v.state.doc.lineAt(nearestA?.from ?? 0);
+    const endLine = v.state.doc.lineAt(nearestB?.to ?? v.state.doc.length);
+
+    setTimeout(() => {
+      if (v.state.selection.main.from === v.state.selection.main.to) {
+        // We need to find a way to know if user want to generate new query
+        // or user want to improve the existing query.
+
+        // We determine if user want to generate new query if it is in empty line
+        // and it is not in the middle of statement
+        if (currentCursor < startLine.from || currentCursor > endLine.to) {
+          v.dispatch({
+            effects: [
+              effectShowPrompt.of({
+                lineNumber: currentCursorLine.number,
+                from: currentCursorLine.from,
+                to: currentCursorLine.to,
+              }),
+            ],
+            selection: { anchor: currentCursor, head: currentCursor },
+          });
+          return true;
+        }
+      }
+
+      v.dispatch({
+        effects: [
+          effectShowPrompt.of({
+            lineNumber: startLine.number,
+            from: startLine.from,
+            to: endLine.to,
+          }),
+          effectSelectedPromptLine.of(
+            Array.from(
+              { length: endLine.number - startLine.number + 1 },
+              (_, i) => startLine.number + i
+            )
+          ),
+        ],
+        selection: { anchor: startLine.from, head: startLine.from },
+      });
+    }, 50);
+  }
+
+  /**
+   * This is cheap trick to get the view instance from the plugin.
+   * If there is a better way to do this, please let me know.
+   */
+  protected getViewInstance(self: CodeMirrorPromptPlugin) {
+    return ViewPlugin.fromClass(
+      class {
+        constructor(view: EditorView) {
+          self.view = view;
+        }
+      }
+    );
+  }
+
+  protected getStateFieldPrompt(self: CodeMirrorPromptPlugin) {
+    return StateField.define({
+      create: () => {
+        return Decoration.none;
+      },
+
+      update(v, tr) {
+        for (const e of tr.effects) {
+          if (e.is(effectShowPrompt)) {
+            return Decoration.set([
+              Decoration.widget({
+                widget: new PromptWidget(self, e.value.from, e.value.to),
+                side: -10,
+                block: true,
+              }).range(e.value.from),
+            ]);
+          } else if (e.is(effectHidePrompt)) {
+            return Decoration.none;
+          }
+        }
+
+        if (tr.docChanged) {
+          return v.map(tr.changes);
+        }
+
+        return v;
+      },
+
+      provide: (f) => EditorView.decorations.from(f),
+    });
+  }
+
+  getExtensions() {
+    return [
+      this.lockCompartment.of([]),
+      this.diffCompartment.of([]),
+      this.getStateFieldPrompt(this),
+      this.getViewInstance(this),
+      StateField.define<readonly Tooltip[]>({
+        create: (state) => getCursorTooltips(state, this),
+
+        update: (tooltips, tr) => {
+          if (!tr.docChanged && !tr.selection) return tooltips;
+          return getCursorTooltips(tr.state, this);
+        },
+
+        provide: (f) => showTooltip.computeN([f], (state) => state.field(f)),
+      }),
+      StateField.define({
+        create() {
+          return Decoration.none;
+        },
+        update: (v, tr) => {
+          const cursorPosition = tr.state.selection.main.from;
+          const line = tr.state.doc.lineAt(cursorPosition);
+          const lineText = line.text;
+
+          if (
+            lineText === "" &&
+            !this.isActive &&
+            tr.state.selection &&
+            tr.selection?.main.from === tr.selection?.main.to
+          ) {
+            return Decoration.set([
+              Decoration.widget({
+                widget: new PlaceholderWidget(),
+                side: 10,
+              }).range(line.from),
+            ]);
+          }
+
+          return Decoration.none;
+        },
+        provide: (f) => EditorView.decorations.from(f),
+      }),
+      promptSelectedLines,
+      keymap.of([
+        {
+          key: "Ctrl-b",
+          mac: "Cmd-b",
+          run: (v) => {
+            this.openPrompt(v);
+            return true;
+          },
+        },
+      ]),
+    ];
+  }
+
+  async getSuggestion(promptQuery: string, selected?: PromptSelectedFragment) {
+    if (this.promptCallback) {
+      return this.promptCallback(promptQuery, selected);
+    }
+
+    throw new Error("There is no suggestion function");
+  }
+
+  handleSuggestion(callback: PromptCallback) {
+    this.promptCallback = callback;
+  }
+}
diff --git a/src/components/editor/prompt-widget.tsx b/src/components/editor/prompt-widget.tsx
new file mode 100644
index 00000000..d4baa0c0
--- /dev/null
+++ b/src/components/editor/prompt-widget.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { X } from "@phosphor-icons/react";
+import { useCallback, useRef, useState } from "react";
+import { Button } from "../orbit/button";
+
+interface CodeMirrorPromptWidgetProps {
+  onClose?: () => void;
+  onCancel?: () => void;
+  onAccept?: () => void;
+  onReject?: () => void;
+  onSubmit?: (query: string) => Promise<void>;
+}
+
+export function CodeMirrorPromptWidget({
+  onClose,
+  onCancel,
+  onSubmit,
+  onAccept,
+  onReject,
+}: CodeMirrorPromptWidgetProps) {
+  const textareaClassName =
+    "absolute left-0 right-0 resize-none p-1 p-2 outline-none";
+
+  const fakeTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const [previousPrompt, setPreviousPrompt] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [height, setHeight] = useState(60);
+  const [prompt, setPrompt] = useState("");
+  const cancelTriggered = useRef(false);
+
+  const minHeight = 60;
+
+  const handleResize = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (fakeTextareaRef.current && textareaRef.current) {
+      fakeTextareaRef.current.value = e.currentTarget.value;
+      const newHeight = Math.max(
+        minHeight,
+        fakeTextareaRef.current.scrollHeight
+      );
+
+      setHeight(Math.max(minHeight, fakeTextareaRef.current.scrollHeight));
+      textareaRef.current.style.height = newHeight + "px";
+    }
+  };
+
+  const showSubmitButton = !previousPrompt && prompt;
+  const showSubmitEditButton = previousPrompt && previousPrompt !== prompt;
+  const showAcceptButton = prompt === previousPrompt && previousPrompt;
+
+  const triggerSubmit = useCallback(() => {
+    if (onSubmit) {
+      setLoading(true);
+      setError("");
+      cancelTriggered.current = false;
+
+      onSubmit(prompt)
+        .then(() => {
+          if (!cancelTriggered.current) {
+            setPreviousPrompt(prompt);
+          }
+        })
+        .catch((e) => {
+          if (!cancelTriggered.current) {
+            if (e instanceof Error) {
+              setError(e.message);
+            }
+
+            setError(e.toString());
+          }
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, [onSubmit, prompt]);
+
+  const triggerReject = useCallback(() => {
+    if (onReject) onReject();
+    setPreviousPrompt("");
+  }, [onReject]);
+
+  const triggerCancel = useCallback(() => {
+    if (onCancel) onCancel();
+    cancelTriggered.current = true;
+    setLoading(false);
+  }, [onCancel]);
+
+  const onKeydown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      if (showAcceptButton) {
+        if (onAccept) onAccept();
+      } else if (showSubmitEditButton) {
+        if (onSubmit) triggerSubmit();
+      }
+      e.preventDefault();
+    } else if (!e.shiftKey && e.key === "Enter") {
+      if (showSubmitButton) {
+        if (onSubmit) triggerSubmit();
+      }
+      e.preventDefault();
+    } else if (e.key === "Escape") {
+      if (onClose) onClose();
+      e.preventDefault();
+    } else if ((e.metaKey || e.ctrlKey) && e.key === "Backspace") {
+      if (loading) {
+        if (onCancel) triggerCancel();
+      } else {
+        if (onReject) triggerReject();
+      }
+      e.preventDefault();
+    }
+
+    e.stopPropagation();
+  };
+
+  return (
+    <div className="max-w-[500px] rounded border font-sans text-base">
+      <div className="flex">
+        <div
+          className="relative flex-1 overflow-hidden"
+          style={{ height: height + "px" }}
+        >
+          <textarea
+            ref={fakeTextareaRef}
+            className={cn(textareaClassName, "invisible")}
+            style={{ height: "1px" }}
+          />
+          <textarea
+            ref={textareaRef}
+            placeholder="Editing instruction"
+            autoFocus
+            className={cn(
+              textareaClassName,
+              "text-foreground top-0 bottom-0 overflow-hidden"
+            )}
+            onPaste={(e) => {
+              e.stopPropagation();
+            }}
+            onCopy={(e) => {
+              e.stopPropagation();
+            }}
+            onChange={(e) => {
+              setPrompt(e.currentTarget.value);
+            }}
+            value={prompt}
+            onKeyDown={onKeydown}
+            onKeyUp={(e) => {
+              handleResize(e);
+              e.stopPropagation();
+            }}
+          />
+        </div>
+        <div>
+          <button className="cursor-pointer p-2" onClick={onClose}>
+            <X weight="bold" />
+          </button>
+        </div>
+      </div>
+
+      {error && <div className="p-2 text-sm text-red-500">{error}</div>}
+
+      <div className="flex h-10 items-center gap-1 p-2">
+        {(showSubmitButton || showSubmitEditButton) && (
+          <Button
+            variant="primary"
+            size="sm"
+            loading={loading}
+            onClick={triggerSubmit}
+          >
+            {previousPrompt ? "⌘↵ Submit Edit" : "⌘ Submit"}
+          </Button>
+        )}
+
+        {showAcceptButton && (
+          <Button variant="primary" size="sm" onClick={onAccept}>
+            Accept
+          </Button>
+        )}
+
+        {previousPrompt && !loading && (
+          <Button variant="ghost" size="sm" onClick={triggerReject}>
+            ⌘⌫ Reject
+          </Button>
+        )}
+
+        {loading && (
+          <Button variant="ghost" size="sm" onClick={triggerCancel}>
+            ⌘⌫ Cancel
+          </Button>
+        )}
+
+        {!previousPrompt && !loading ? (
+          <span className="text-muted-foreground ml-2 text-sm">
+            Esc to close
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/gui/sql-editor/index.tsx b/src/components/gui/sql-editor/index.tsx
index f2fb12ce..ecb012a9 100644
--- a/src/components/gui/sql-editor/index.tsx
+++ b/src/components/gui/sql-editor/index.tsx
@@ -1,3 +1,4 @@
+"use client";
 import {
   acceptCompletion,
   completionStatus,
@@ -15,8 +16,12 @@ import CodeMirror, {
   Extension,
   ReactCodeMirrorRef,
 } from "@uiw/react-codemirror";
-import { forwardRef, KeyboardEventHandler, useMemo } from "react";
+import { forwardRef, KeyboardEventHandler, useEffect, useMemo } from "react";
 
+import {
+  CodeMirrorPromptPlugin,
+  PromptCallback,
+} from "@/components/editor/prompt-plugin";
 import { createVariableHighlightPlugin } from "@/components/editor/sql-editor/variable-highlight-plugin";
 import { SupportedDialect } from "@/drivers/base-driver";
 import sqliteFunctionList from "@/drivers/sqlite/function-tooltip.json";
@@ -37,6 +42,13 @@ interface SqlEditorProps {
    * Comma seprated variable name list
    */
   variableList?: string;
+
+  /**
+   * Prompt Support
+   */
+  enablePrompt?: boolean;
+  onPrompt?: PromptCallback;
+
   value: string;
   dialect: SupportedDialect;
   readOnly?: boolean;
@@ -66,6 +78,9 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
       onFontSizeChanged,
       variableList,
       highlightVariable,
+
+      enablePrompt,
+      onPrompt,
     }: SqlEditorProps,
     ref
   ) {
@@ -78,6 +93,16 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
       return createSQLTableNameHighlightPlugin([]);
     }, [schema]);
 
+    const promptPlugin = useMemo(() => {
+      return enablePrompt ? new CodeMirrorPromptPlugin() : null;
+    }, [enablePrompt]);
+
+    useEffect(() => {
+      if (promptPlugin && onPrompt) {
+        promptPlugin.handleSuggestion(onPrompt);
+      }
+    }, [promptPlugin, onPrompt]);
+
     const keyExtensions = useMemo(() => {
       return keymap.of([
         {
@@ -190,6 +215,7 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
           const columnNumber = pos - line.from;
           if (onCursorChange) onCursorChange(pos, lineNumber, columnNumber);
         }),
+        promptPlugin ? promptPlugin.getExtensions() : undefined,
       ].filter(Boolean) as Extension[];
     }, [
       dialect,
@@ -199,6 +225,7 @@ const SqlEditor = forwardRef<ReactCodeMirrorRef, SqlEditorProps>(
       tableNameHighlightPlugin,
       variableList,
       highlightVariable,
+      promptPlugin,
     ]);
 
     return (
diff --git a/src/components/gui/sql-editor/statement-highlight.ts b/src/components/gui/sql-editor/statement-highlight.ts
index 49cfb857..33dd7681 100644
--- a/src/components/gui/sql-editor/statement-highlight.ts
+++ b/src/components/gui/sql-editor/statement-highlight.ts
@@ -1,12 +1,12 @@
+import { syntaxTree } from "@codemirror/language";
+import { SyntaxNode } from "@lezer/common";
 import {
   Decoration,
   EditorState,
   EditorView,
-  StateField,
   Range,
+  StateField,
 } from "@uiw/react-codemirror";
-import { syntaxTree } from "@codemirror/language";
-import { SyntaxNode } from "@lezer/common";
 
 const statementLineHighlight = Decoration.line({
   class: "cm-highlight-statement",
@@ -102,10 +102,11 @@ export function splitSqlQuery(
 }
 
 export function resolveToNearestStatement(
-  state: EditorState
+  state: EditorState,
+  position?: number
 ): { from: number; to: number } | null {
   // Breakdown and grouping the statement
-  const cursor = state.selection.main.from;
+  const cursor = position ?? state.selection.main.from;
   const statements = splitSqlQuery(state, false);
 
   if (statements.length === 0) return null;

From 02542adccc4bda770e686026c5527017e53557b2 Mon Sep 17 00:00:00 2001
From: keppere <50957820+keppere@users.noreply.github.com>
Date: Wed, 12 Feb 2025 13:34:58 +0700
Subject: [PATCH 052/106] Fix: provide new data to chart on data change (#354)

* fix: update chart data to existing chart instance

* fix: enhance axis key assignment based on column types in chart editor

* fix: handle axis label

* fix: initialize yAxisKeys as an empty array in chart options

* fix: improve axis key assignment by determining column types dynamically

* feat: handle initial chart color and add new chart color
---
 src/app/storybook/chart-editor/page.tsx       |   2 +-
 src/components/board/board-chart-editor.tsx   | 127 ++++++++++++++++--
 src/components/chart/chart-series.tsx         |   2 +-
 src/components/chart/chart-type.ts            |   3 +-
 src/components/chart/chart-y-axis-section.tsx |   8 +-
 .../chart/echart-options-builder.ts           |  93 ++++++-------
 src/components/chart/edit-chart-menu.tsx      |   2 +-
 src/components/chart/index.tsx                |   1 +
 8 files changed, 169 insertions(+), 69 deletions(-)

diff --git a/src/app/storybook/chart-editor/page.tsx b/src/app/storybook/chart-editor/page.tsx
index c69633f7..066c39b3 100644
--- a/src/app/storybook/chart-editor/page.tsx
+++ b/src/app/storybook/chart-editor/page.tsx
@@ -70,7 +70,7 @@ const lineChartValue: ChartValue = {
     ],
     options: {
       xAxisKey: undefined,
-      yAxisKeys: undefined,
+      yAxisKeys: [],
       xAxisLabel: undefined,
       yAxisLabel: "cust sellers",
       backgroundType: "none",
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index 674e30a3..434afd85 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -1,11 +1,13 @@
 import { generateAutoComplete } from "@/context/schema-provider";
-import { DatabaseSchemas } from "@/drivers/base-driver";
+import { DatabaseResultSet, DatabaseSchemas } from "@/drivers/base-driver";
 import { ChartBar, Play, Table } from "@phosphor-icons/react";
 import { produce } from "immer";
+import { useTheme } from "next-themes";
 import { useCallback, useMemo, useState } from "react";
 import { DashboardProps } from ".";
 import Chart from "../chart";
-import { ChartValue } from "../chart/chart-type";
+import { ChartValue, DEFAULT_THEME, THEMES } from "../chart/chart-type";
+import { generateGradientColors } from "../chart/echart-options-builder";
 import EditChartMenu from "../chart/edit-chart-menu";
 import ResultTable from "../gui/query-result-table";
 import SqlEditor from "../gui/sql-editor";
@@ -58,6 +60,7 @@ export default function BoardChartEditor({
   const [selectedSchema, setSelectedSchema] = useState("");
   const [displayType, setDisplayType] = useState("chart");
   const [loading, setLoading] = useState(false);
+  const { forcedTheme, resolvedTheme } = useTheme();
   const autoCompletion = useMemo(() => {
     return generateAutoComplete(selectedSchema, schema);
   }, [schema, selectedSchema]);
@@ -70,6 +73,98 @@ export default function BoardChartEditor({
   } = useBoardContext();
   const [result, setResult] = useState<OptimizeTableState>();
 
+  const initialChartValue = useCallback(
+    (newResult: DatabaseResultSet, sql: string) => {
+      setValue((prev) => {
+        return produce(prev, (draft) => {
+          draft.params.layers[0].sql = sql;
+          if (newResult.headers?.length > 0) {
+            const columns = newResult.headers.map((header) => header.name);
+
+            if (newResult.rows.length > 0) {
+              const xAxisKeys = [];
+              const yAxisKeys = [];
+              const firstRecord = newResult.rows[0];
+              const columnType = getColumnType(firstRecord);
+              // study each column value and try to guess the type
+              if (columnType) {
+                for (const column of columns) {
+                  if (columnType[column] === "number") {
+                    yAxisKeys.push(column);
+                  } else {
+                    xAxisKeys.push(column);
+                  }
+                }
+              } else {
+                // if there is no column type, we will just use the first column as xAxisKey
+                for (let i = 0; i < newResult.headers.length; i++) {
+                  if (i === 0) {
+                    xAxisKeys.push(newResult.headers[i].name);
+                  } else {
+                    yAxisKeys.push(newResult.headers[i].name);
+                  }
+                }
+              }
+
+              draft.params.options.xAxisKey =
+                xAxisKeys.length > 0 ? xAxisKeys[0] : "";
+              draft.params.options.yAxisKeys = yAxisKeys;
+            }
+
+            // initial yAxisKeyColors
+            const axisColors = Object.keys(
+              draft.params.options.yAxisKeyColors ?? {}
+            );
+            const appTheme: "light" | "dark" = (forcedTheme ||
+              resolvedTheme) as "light" | "dark";
+            const themeColor =
+              THEMES[DEFAULT_THEME].colors?.[appTheme ?? "light"];
+            if (axisColors.length === 0 && columns.length > 0) {
+              // Add default yAxisKeyColors
+              const colors = generateGradientColors(
+                themeColor[0],
+                themeColor[1],
+                columns.length
+              );
+              const newColors = columns.reduce(
+                (acc, col, i) => {
+                  acc[col] = colors[i];
+                  return acc;
+                },
+                {} as Record<string, string>
+              );
+
+              draft.params.options.theme = DEFAULT_THEME;
+              draft.params.options.yAxisKeyColors = newColors;
+            } else if (
+              axisColors.length > 0 &&
+              columns.length > axisColors.length
+            ) {
+              // Add new yAxisKeyColors
+              const colors = generateGradientColors(
+                themeColor[0],
+                themeColor[1],
+                columns.length + 5
+              );
+
+              for (let i = 0; i < columns.length; i++) {
+                if (
+                  draft.params.options.yAxisKeyColors &&
+                  !draft.params.options.yAxisKeyColors[columns[i]]
+                ) {
+                  draft.params.options.yAxisKeyColors[columns[i]] = colors[
+                    i
+                  ] as string;
+                }
+              }
+            }
+          }
+        });
+      });
+    },
+    [forcedTheme, resolvedTheme]
+  );
+
   const onRunClicked = useCallback(() => {
     const sql = value?.params.layers[0].sql ?? "";
     const sourceId = value?.source_id ?? "";
@@ -86,16 +181,7 @@ export default function BoardChartEditor({
               schemas: schema,
             })
           );
-          setValue((prev) => {
-            return produce(prev, (draft) => {
-              draft.params.layers[0].sql = sql;
-              if (newResult.headers?.length > 0) {
-                const columns = newResult.headers.map((header) => header.name);
-                draft.params.options.xAxisKey = columns.pop();
-                draft.params.options.yAxisKeys = columns;
-              }
-            });
-          });
+          initialChartValue(newResult, sql);
         })
         .catch(() => {
           console.log("error");
@@ -104,7 +190,13 @@ export default function BoardChartEditor({
           setLoading(false);
         });
     }
-  }, [value, sourceDriver, schema]);
+  }, [
+    value?.params.layers,
+    value?.source_id,
+    sourceDriver,
+    schema,
+    initialChartValue,
+  ]);
 
   return (
     <div className="flex flex-1 overflow-hidden border-t">
@@ -243,3 +335,12 @@ export default function BoardChartEditor({
     </div>
   );
 }
+
+function getColumnType(firstRecord: any): Record<string, string> {
+  const columnTypes: Record<string, string> = {};
+  const keys = Object.keys(firstRecord);
+  for (const key of keys) {
+    columnTypes[key] = typeof firstRecord[key];
+  }
+  return columnTypes;
+}
diff --git a/src/components/chart/chart-series.tsx b/src/components/chart/chart-series.tsx
index 673147a8..23c8b907 100644
--- a/src/components/chart/chart-series.tsx
+++ b/src/components/chart/chart-series.tsx
@@ -111,7 +111,7 @@ export default function ChartSeries({
                     themeColor[1],
                     columns.length
                   );
-                  const newColors = prev.params.options.yAxisKeys?.reduce(
+                  const newColors = columns?.reduce(
                     (acc, col, i) => {
                       acc[col] = colors[i];
                       return acc;
diff --git a/src/components/chart/chart-type.ts b/src/components/chart/chart-type.ts
index a730af3a..2f277e66 100644
--- a/src/components/chart/chart-type.ts
+++ b/src/components/chart/chart-type.ts
@@ -30,7 +30,7 @@ interface ChartOptions {
   xAxisLabel?: string;
   yAxisLabel?: string;
   xAxisKey?: string;
-  yAxisKeys?: string[];
+  yAxisKeys: string[];
   yAxisKeyColors?: Record<string, string>;
   xAxisLabelDisplay?: ChartLabelDisplayX;
   yAxisLabelDisplay?: ChartLabelDisplayY;
@@ -177,3 +177,4 @@ export const THEMES: Record<
 };
 
 export const outerBaseUrl = "https://app.outerbase.com";
+export const DEFAULT_THEME = "afterburn";
diff --git a/src/components/chart/chart-y-axis-section.tsx b/src/components/chart/chart-y-axis-section.tsx
index e9d0e3e8..250ef4e9 100644
--- a/src/components/chart/chart-y-axis-section.tsx
+++ b/src/components/chart/chart-y-axis-section.tsx
@@ -51,11 +51,15 @@ export default function ChartYAxisSection({
       <div className="flex items-center justify-between gap-2">
         <SimpleInput
           value={value.params.options?.yAxisLabel}
-          placeholder={"Y Axis Label"}
+          placeholder={
+            value.params.options?.yAxisKeys?.length > 0
+              ? value.params.options?.yAxisKeys[0]
+              : "Y Axis Label"
+          }
           onSumit={(v) => {
             onChange((prev) => {
               return produce(prev, (draft) => {
-                draft.params.options.yAxisLabel = v;
+                draft.params.options.yAxisLabel = v === "" ? undefined : v;
               });
             });
           }}
diff --git a/src/components/chart/echart-options-builder.ts b/src/components/chart/echart-options-builder.ts
index 1d54a01b..fbe3c634 100644
--- a/src/components/chart/echart-options-builder.ts
+++ b/src/components/chart/echart-options-builder.ts
@@ -7,7 +7,13 @@ import {
   ScatterSeriesOption,
   SeriesOption,
 } from "echarts";
-import { ChartData, ChartValue, ThemeColors, THEMES } from "./chart-type";
+import {
+  ChartData,
+  ChartValue,
+  DEFAULT_THEME,
+  ThemeColors,
+  THEMES,
+} from "./chart-type";
 
 export default class EchartOptionsBuilder {
   private chartValue: ChartValue;
@@ -26,6 +32,10 @@ export default class EchartOptionsBuilder {
     this.chartValue = value;
   }
 
+  setChartData(data: ChartData[]) {
+    this.chartData = data;
+  }
+
   getChartType() {
     return this.chartValue.type;
   }
@@ -34,51 +44,34 @@ export default class EchartOptionsBuilder {
     this.theme = theme as "dark" | "light";
   }
 
-  private getColorValues(): string[] {
-    let colors: string[] = [];
+  private getColorRange(): string[] {
+    const axisKeyColors = this.getAxisKeyColors();
+    const keys = this.chartValue.params.options?.yAxisKeys ?? this.columns;
+    return keys.map((key) => axisKeyColors[key] as string);
+  }
 
-    if (!this.chartValue.params.options.theme) {
-      colors = Object.keys(
-        this.chartValue.params.options?.yAxisKeyColors || {}
-      ).map(
-        (key) => this.chartValue.params.options.yAxisKeyColors?.[key] as string
+  private getAxisKeyColors(): Record<string, string> {
+    if (this.chartValue.params.options?.yAxisKeyColors) {
+      return this.chartValue.params.options.yAxisKeyColors;
+    } else {
+      // return default colors
+      const selectedTheme = (this.chartValue.params.options?.theme ??
+        DEFAULT_THEME) as ThemeColors;
+      const appTheme: "light" | "dark" = this.theme;
+      const themeColor = THEMES[selectedTheme].colors?.[appTheme ?? "light"];
+      const colors = generateGradientColors(
+        themeColor[0],
+        themeColor[1],
+        this.columns.length
+      );
+      return this.columns.reduce(
+        (acc, col, i) => {
+          acc[col] = colors[i];
+          return acc;
+        },
+        {} as Record<string, string>
       );
-
-      // If the user has already set the colors, return them
-      if (colors.length >= this.columns.length) {
-        return colors;
-      }
-
-      // If the user has set some colors, but not enough, generate the rest
-      if (colors.length >= 2 && colors.length < this.columns.length) {
-        const startColor = colors[0];
-        const endColor = colors[1];
-        return [
-          ...colors,
-          ...generateGradientColors(
-            startColor,
-            endColor,
-            this.columns.length - colors.length
-          ),
-        ];
-      }
-    }
-
-    const colorTheme =
-      this.chartValue.params.options.theme ?? ("neonPunk" as ThemeColors);
-    const values = THEMES[colorTheme as ThemeColors];
-
-    if (!values) {
-      throw new Error(`Theme "${colorTheme}" does not exist`);
     }
-
-    const colorRange = values.colors[this.theme];
-
-    return generateGradientColors(
-      colorRange[0],
-      colorRange[1],
-      this.columns.length
-    );
   }
 
   private getTextColor(): string {
@@ -124,14 +117,14 @@ export default class EchartOptionsBuilder {
           shape: "polygon",
           indicator: this.columns.map((name) => ({ name })),
         },
-        series: this.columns.map((col, index) => ({
+        series: this.columns.map((col) => ({
           type: "radar",
           data: [
             {
               value: formattedSource.map((item) => Number(item[col])), // throws away precision of bigint?!
               name: col,
               itemStyle: {
-                color: this.getColorValues()[index],
+                color: this.getAxisKeyColors()[col],
               },
             },
           ],
@@ -347,7 +340,7 @@ export default class EchartOptionsBuilder {
             name: item[this.columns[0]] as string,
             value: item[this.columns[1]] as number,
           })),
-          color: this.getColorValues(),
+          color: this.getColorRange(),
         });
         break;
       case "pie":
@@ -368,10 +361,10 @@ export default class EchartOptionsBuilder {
           label: {
             show: this.chartValue.params?.options?.xAxisLabelHidden !== true,
             formatter: "{b}: {c} ({d}%)",
-            color: this.theme === "dark" ? "#fff" : "#000", // Set label text color to white
+            color: this.getTextColor(),
             textBorderColor: "transparent", // Remove text border
           },
-          color: this.getColorValues(),
+          color: this.getColorRange(),
           tooltip: {
             trigger: "item",
             borderColor: this.theme === "dark" ? "#FFFFFF08" : "#00000010", // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
@@ -390,7 +383,7 @@ export default class EchartOptionsBuilder {
     seriesType: T["type"],
     additionalOptions: Partial<Omit<T, "type">> = {}
   ): T[] {
-    return this.columns.slice(1).map((col, index) => {
+    return this.columns.slice(1).map((col) => {
       const baseSeries = {
         name: col,
         type: seriesType,
@@ -399,7 +392,7 @@ export default class EchartOptionsBuilder {
             ? { x: col, y: this.columns[0] } // For bar charts
             : { x: this.columns[0], y: col }, // For other chart types
         itemStyle: {
-          color: this.getColorValues()[index], // does NOT impact pie charts
+          color: this.getAxisKeyColors()[col],
         },
         symbol: "circle",
         ...additionalOptions,
diff --git a/src/components/chart/edit-chart-menu.tsx b/src/components/chart/edit-chart-menu.tsx
index 138d2592..74c7dc7e 100644
--- a/src/components/chart/edit-chart-menu.tsx
+++ b/src/components/chart/edit-chart-menu.tsx
@@ -124,7 +124,7 @@ export default function EditChartMenu({
             onSumit={(v) => {
               onChange((prev) => {
                 return produce(prev, (draft) => {
-                  draft.params.options.xAxisLabel = v;
+                  draft.params.options.xAxisLabel = v === "" ? undefined : v;
                 });
               });
             }}
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
index d46826b6..c79f1e41 100644
--- a/src/components/chart/index.tsx
+++ b/src/components/chart/index.tsx
@@ -168,6 +168,7 @@ const ChartComponent = ({ value, data }: OuterbaseChartProps) => {
       chartBuilderRef.current = new EchartOptionsBuilder(value, data);
     } else {
       chartBuilderRef.current.setChartValue(value);
+      chartBuilderRef.current.setChartData(data);
     }
 
     if (domRef.current) {

From 300de471e10757cda400ee6eebda30e1465ebe19 Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Wed, 12 Feb 2025 14:02:16 +0700
Subject: [PATCH 053/106] [Outerbase Cloud] Forgot Password (#359)

* reset password

* add image background
---
 public/assets/reset-password-orb.webp         | Bin 0 -> 61604 bytes
 src/app/(dark-only)/password_reset/page.tsx   | 147 ++++++++++++++++++
 src/app/(dark-only)/signin/page.tsx           |   2 +-
 .../[workspaceId]/account/account-footer.tsx  |   6 +-
 src/lib/validation.ts                         |   5 +
 src/outerbase-cloud/api-account.ts            |  19 +++
 6 files changed, 173 insertions(+), 6 deletions(-)
 create mode 100644 public/assets/reset-password-orb.webp
 create mode 100644 src/app/(dark-only)/password_reset/page.tsx

diff --git a/public/assets/reset-password-orb.webp b/public/assets/reset-password-orb.webp
new file mode 100644
index 0000000000000000000000000000000000000000..87983bdf53a2bd150b6ddc40aa5250f319db0eab
GIT binary patch
literal 61604
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
b2`npo@J};>IBl1yZ`;5C0000000000pIf>v

literal 0
HcmV?d00001

diff --git a/src/app/(dark-only)/password_reset/page.tsx b/src/app/(dark-only)/password_reset/page.tsx
new file mode 100644
index 00000000..f794c80f
--- /dev/null
+++ b/src/app/(dark-only)/password_reset/page.tsx
@@ -0,0 +1,147 @@
+"use client";
+import OuterbaseLogo from "@/components/icons/outerbase";
+import { Button } from "@/components/orbit/button";
+import { Input } from "@/components/orbit/input";
+import { Label } from "@/components/orbit/label";
+import { isValidEmail } from "@/lib/validation";
+import {
+  requestResetPassword,
+  resetPassword,
+} from "@/outerbase-cloud/api-account";
+import { SendHorizonal } from "lucide-react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+export default function PasswordResetPage() {
+  const param = useSearchParams();
+  const router = useRouter();
+  const reset_token = param.get("reset_token");
+  const [loading, setLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isSent, setIsSent] = useState(false);
+
+  const onResetPassword = useCallback(() => {
+    if (!reset_token) return;
+    setLoading(true);
+    resetPassword({
+      password,
+      reset_token,
+    })
+      .then(() => {
+        toast.success("Your password has been reseted");
+        router.replace("/signin");
+      })
+      .catch((error) => {
+        setLoading(false);
+        toast.error(`Error: ${error.message}`);
+      });
+  }, [password, reset_token, router]);
+
+  const onRequestResetPassword = useCallback(() => {
+    setLoading(true);
+    requestResetPassword({ email })
+      .then(() => setIsSent(true))
+      .catch((error) => {
+        setLoading(false);
+        toast.error(`Error: ${error.message}`);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [email]);
+
+  const { title, description } = useMemo(() => {
+    let title, description;
+
+    if (isSent) {
+      title = "Check your email";
+      description = "We've sent a reset link to";
+    } else if (reset_token) {
+      title = "Choose a new password";
+      description = "Enter a new password for your account.";
+    } else {
+      title = "Reset your password";
+      description = `Enter the email address you log in to Outerbase with, and we’ll email you a link to reset your password.`;
+    }
+
+    return { title, description };
+  }, [isSent, reset_token]);
+
+  return (
+    <div className="flex h-[100vh]">
+      <div className="bg-right-[20vh] flex h-full w-full flex-col overflow-hidden bg-neutral-950 bg-gradient-to-r bg-[url('/assets/reset-password-orb.webp')] from-neutral-950 from-70% to-neutral-900 bg-[60vw] bg-no-repeat">
+        <div className="flex items-start p-8" />
+        <div className="items start flex flex-1">
+          <div className="flex h-full flex-1 items-center">
+            <div className="m-auto w-full max-w-md p-8">
+              <div className="align-left items-start pb-12">
+                <Link href="#">
+                  <OuterbaseLogo className="h-6" />
+                </Link>
+              </div>
+              <div className="flex flex-col items-start gap-5">
+                <div className="text-3xl font-medium text-white">{title}</div>
+                <div className="flex flex-row items-center gap-2">
+                  {isSent && <SendHorizonal />}
+
+                  <p className="text-base text-neutral-400">
+                    {description}
+                    {isSent && (
+                      <span>
+                        <br />
+                        {email}
+                      </span>
+                    )}
+                  </p>
+                </div>
+                {(!isSent || reset_token) && (
+                  <>
+                    <Label
+                      title={reset_token ? "Password" : "Email"}
+                      required
+                      className="text-white"
+                    >
+                      <Input
+                        value={reset_token ? password : email}
+                        placeholder={
+                          reset_token ? "Enter password" : "Enter email address"
+                        }
+                        type={reset_token ? "password" : "email"}
+                        onValueChange={reset_token ? setPassword : setEmail}
+                      />
+                    </Label>
+                    <Button
+                      shape="base"
+                      loading={loading}
+                      onClick={
+                        reset_token ? onResetPassword : onRequestResetPassword
+                      }
+                      disabled={reset_token ? !password : !isValidEmail(email)}
+                      title={
+                        reset_token
+                          ? "Confirm new password"
+                          : "Sent Password Reset Email"
+                      }
+                      variant="primary"
+                    />
+                  </>
+                )}
+
+                <div className="font-sans text-sm">
+                  Still having trouble?{" "}
+                  <Link href="mailto:hello@outerbase.com" className="border-b">
+                    Contact support
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex-1" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(dark-only)/signin/page.tsx b/src/app/(dark-only)/signin/page.tsx
index eeeb5e5a..f2683ca9 100644
--- a/src/app/(dark-only)/signin/page.tsx
+++ b/src/app/(dark-only)/signin/page.tsx
@@ -120,7 +120,7 @@ export default function SigninPage() {
           </Button>
         </form>
 
-        <Link href="#" className="text-sm">
+        <Link href="/password_reset" className="text-sm">
           Forget password
         </Link>
       </div>
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/account-footer.tsx b/src/app/(outerbase)/w/[workspaceId]/account/account-footer.tsx
index a77d7666..e8c049be 100644
--- a/src/app/(outerbase)/w/[workspaceId]/account/account-footer.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/account/account-footer.tsx
@@ -7,6 +7,7 @@ import {
   DialogContent,
   DialogDescription,
 } from "@/components/ui/dialog";
+import { isValidEmail } from "@/lib/validation";
 import { DialogTitle } from "@radix-ui/react-dialog";
 import { Check, Copy } from "lucide-react";
 import { useMemo, useState } from "react";
@@ -17,11 +18,6 @@ export default function AccountFooter() {
   const [copied, setCopied] = useState(false);
   const [email, setEmail] = useState("");
 
-  const isValidEmail = (email: string) => {
-    const emailRegex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/;
-    return emailRegex.test(email);
-  };
-
   const copyToClipboard = async () => {
     if (!session) return;
     try {
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index f6437cf9..24468418 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -78,3 +78,8 @@ export function isLinkString(str: string) {
     return false;
   }
 }
+
+export function isValidEmail(email: string) {
+  const emailRegex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/;
+  return emailRegex.test(email);
+}
diff --git a/src/outerbase-cloud/api-account.ts b/src/outerbase-cloud/api-account.ts
index f1b4058a..2a286951 100644
--- a/src/outerbase-cloud/api-account.ts
+++ b/src/outerbase-cloud/api-account.ts
@@ -23,3 +23,22 @@ export async function updateOuterbaseUserFlag(editor_theme: string) {
     editor_theme,
   });
 }
+
+export async function requestResetPassword(data: { email: string }) {
+  return await requestOuterbase(
+    `/api/v1/auth/password_reset/request`,
+    "POST",
+    data
+  );
+}
+
+export async function resetPassword(data: {
+  password: string;
+  reset_token: string;
+}) {
+  return await requestOuterbase(
+    `/api/v1/auth/password_reset/submit`,
+    "POST",
+    data
+  );
+}

From 33329439d2a7745b1b23f933f6de7b68f40887bc Mon Sep 17 00:00:00 2001
From: Sokphal Adam <31284849+sokphaladam@users.noreply.github.com>
Date: Wed, 12 Feb 2025 19:24:30 +0700
Subject: [PATCH 054/106] add chart board & remove chart (#356)

* try to use outerbase board data with our board

* refactor: improve board canvas item mapping and tooltip structure

* refactor: enhance toggle item styling based on edit mode

* plug chart inside

* require workspace to load

* refactor: menu layout and create refresh board

* refactor: improve chart component imports and style definitions

* add header and loading

* refactor: update BoardTool and BoardProvider components

* refactor: improve board canvas item mapping and save edit layout

* refactor: remove console.log statement

* refactor: improve board page editor and board component

* feat: Export  interface for external use

* feat: Refactor chart management functions and integrate context for layout operations

* refactor the board storage

* feat: Add board filter input component and dialog

---------

Co-authored-by: Visal .In <invisal@gmail.com>
Co-authored-by: sokphaladam <sokphaladam@sokphaladams-MacBook-Air.local>
---
 .../w/[workspaceId]/board/[boardId]/page.tsx  | 128 +++-----------
 src/components/board/board-canvas.tsx         |  32 +++-
 src/components/board/board-chart-editor.tsx   |  67 ++++----
 src/components/board/board-delete-dialog.tsx  |  40 +++--
 src/components/board/board-filter-dialog.tsx  |   4 +-
 src/components/board/board-filter.tsx         | 161 +++++++-----------
 .../board/board-filter/board-filter-date.tsx  |  58 +++++++
 .../board/board-filter/board-filter-enum.tsx  |  78 +++++++++
 .../board/board-filter/board-filter-input.tsx |  27 +++
 src/components/board/board-provider.tsx       |  12 +-
 src/components/board/index.tsx                |  33 ++--
 src/drivers/board-storage/base.ts             |  12 ++
 src/drivers/board-storage/outerbase.ts        |  71 ++++++++
 src/outerbase-cloud/api-board.ts              |  15 ++
 src/outerbase-cloud/database-source/index.tsx | 102 ++++++++++-
 15 files changed, 556 insertions(+), 284 deletions(-)
 create mode 100644 src/components/board/board-filter/board-filter-date.tsx
 create mode 100644 src/components/board/board-filter/board-filter-enum.tsx
 create mode 100644 src/components/board/board-filter/board-filter-input.tsx
 create mode 100644 src/drivers/board-storage/base.ts
 create mode 100644 src/drivers/board-storage/outerbase.ts

diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index 61a21912..a0759cf1 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -3,146 +3,60 @@
 import { NavigationBar } from "@/app/(outerbase)/nav";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import Board from "@/components/board";
-import { deleteChartDialog } from "@/components/board/board-delete-dialog";
-import { ChartValue } from "@/components/chart/chart-type";
+import OuterbaseBoardStorageDriver from "@/drivers/board-storage/outerbase";
 
-import {
-  getOuterbaseDashboard,
-  updateOuterbaseDashboard,
-} from "@/outerbase-cloud/api";
-import { createOuterbaseDashboardChart } from "@/outerbase-cloud/api-board";
+import { getOuterbaseDashboard } from "@/outerbase-cloud/api";
 import { OuterbaseAPIDashboardDetail } from "@/outerbase-cloud/api-type";
 import OuterbaseBoardSourceDriver from "@/outerbase-cloud/database-source";
-import { produce } from "immer";
 import { useParams } from "next/navigation";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import useSWR, { KeyedMutator } from "swr";
 
 function BoardPageEditor({
   initialValue,
-  mutate,
 }: {
   initialValue: OuterbaseAPIDashboardDetail;
   mutate: KeyedMutator<OuterbaseAPIDashboardDetail>;
 }) {
-  const { workspaceId, boardId } = useParams<{
+  const { boardId } = useParams<{
     workspaceId: string;
     boardId: string;
   }>();
-  const { workspaces } = useWorkspaces();
+  const { currentWorkspace } = useWorkspaces();
   const [interval, setIntervals] = useState<number>(0);
 
   const boardSources = useMemo(() => {
-    if (workspaces.length === 0) return;
-    return new OuterbaseBoardSourceDriver(
-      workspaces.find(
-        (w) => w.id === workspaceId || w.short_name === workspaceId
-      )!
+    if (!currentWorkspace) return;
+    return new OuterbaseBoardSourceDriver(currentWorkspace);
+  }, [currentWorkspace]);
+
+  const storageDriver = useMemo(() => {
+    if (!currentWorkspace) return;
+    return new OuterbaseBoardStorageDriver(
+      currentWorkspace.short_name,
+      boardId
     );
-  }, [workspaceId, workspaces]);
+  }, [boardId, currentWorkspace]);
 
   const [value, setValue] = useState(initialValue);
-
-  const onSave = useCallback(() => {
-    const input = {
-      base_id: null,
-      chart_ids: Array.from(new Set(value.charts.map((v) => v.id))),
-      data: (value as any).data,
-      layout: value.layout.map(({ w, h, i, x, y }) => ({ w, h, x, y, i })),
-      directory_index: (value as any).directory_index,
-      name: value.name,
-      type: value.type,
-    };
-
-    updateOuterbaseDashboard(workspaceId, boardId, input)
-      .then()
-      .finally(mutate);
-  }, [boardId, value, workspaceId, mutate]);
-
-  const onRemove = useCallback(
-    async (key: string) => {
-      const chart = value.charts.find((f) => f.id === key);
-      if (chart) {
-        const deleteChartId = await deleteChartDialog.show({
-          workspaceId,
-          chartId: key,
-          chartName: chart.name,
-        });
-
-        if (deleteChartId) {
-          const input = {
-            base_id: null,
-            chart_ids: value.chart_ids.filter((f) => f !== deleteChartId),
-            data: (value as any).data,
-            layout: value.layout
-              .filter((f) => f.i !== deleteChartId)
-              .map(({ w, h, i, x, y }) => ({ w, h, x, y, i })),
-            directory_index: (value as any).directory_index,
-            name: value.name,
-            type: value.type,
-          };
-
-          updateOuterbaseDashboard(workspaceId, boardId, input)
-            .then(() => {
-              setValue((prev) => {
-                return produce(prev, (draft) => {
-                  draft.chart_ids = input.chart_ids;
-                  draft.layout = prev.layout.filter(
-                    (f) => f.i !== deleteChartId
-                  );
-                  draft.charts = prev.charts.filter(
-                    (f) => f.id !== deleteChartId
-                  );
-                });
-              });
-            })
-            .finally(mutate);
-        }
-      }
-    },
-    [value, workspaceId, boardId, mutate]
-  );
-
-  const onAddChart = useCallback(
-    async (chartValue: ChartValue) => {
-      if (!chartValue.source_id) return;
-      if (!chartValue.type) return;
-
-      return createOuterbaseDashboardChart(workspaceId, {
-        source_id: chartValue.source_id,
-        params: {
-          ...chartValue.params,
-          source_id: chartValue.source_id,
-          workspace_id: workspaceId,
-          layers: chartValue.params.layers.map((layer) => {
-            return {
-              ...layer,
-              type: chartValue.type!,
-            };
-          }),
-        },
-        type: chartValue.type,
-        name: chartValue.name ?? "",
-      });
-    },
-    [workspaceId]
-  );
+  const [filter, setFilter] = useState({});
 
   if (!boardSources) {
     return <div>Loading Workspace....</div>;
   }
 
+  console.log("xxx", filter);
+
   return (
     <Board
       value={value as any}
       onChange={setValue as any}
+      filterValue={filter}
+      onFilterValueChange={setFilter}
       sources={boardSources}
+      storage={storageDriver}
       interval={interval}
       onChangeInterval={setIntervals}
-      onLayoutCancel={() => setValue(initialValue)}
-      onLayoutSave={onSave}
-      onRemove={onRemove}
-      onAddChart={onAddChart}
     />
   );
 }
diff --git a/src/components/board/board-canvas.tsx b/src/components/board/board-canvas.tsx
index c2f3b411..9c422caa 100644
--- a/src/components/board/board-canvas.tsx
+++ b/src/components/board/board-canvas.tsx
@@ -21,6 +21,8 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import BoardChart from "./board-chart";
+import { deleteChartDialog } from "./board-delete-dialog";
+import { useBoardContext } from "./board-provider";
 import "./board-style.css";
 
 export interface BoardChartLayout {
@@ -36,7 +38,6 @@ interface BoardProps {
   onChange: (v: ReactGridLayout.Layout[]) => void;
   editMode?: "ADD_CHART" | "REARRANGING_CHART" | null;
   setEditMode?: (mode: "ADD_CHART" | "REARRANGING_CHART" | null) => void;
-  onRemove: (key: string) => void;
 }
 
 const ReactGridLayout = WidthProvider(RGL);
@@ -46,8 +47,12 @@ export function BoardCanvas({
   onChange,
   editMode,
   setEditMode,
-  onRemove,
 }: BoardProps) {
+  const {
+    storage,
+    value: boardValue,
+    onChange: onBoardChange,
+  } = useBoardContext();
   const sizes = [
     { w: 1, h: 1, name: "1", icon: <Square className="h-3 w-3" /> },
     {
@@ -65,6 +70,25 @@ export function BoardCanvas({
     },
   ];
 
+  const onRemove = useCallback(
+    async (key?: string) => {
+      if (storage && onBoardChange && boardValue) {
+        const find = value.charts.find((f) => f.id === key);
+        const valueAfterDelete = await deleteChartDialog.show({
+          chartId: key ?? "",
+          chartName: find?.name ?? "",
+          storage,
+          value: boardValue,
+        });
+        if (valueAfterDelete) {
+          storage.save(valueAfterDelete).then();
+          onBoardChange(valueAfterDelete);
+        }
+      }
+    },
+    [boardValue, onBoardChange, storage, value.charts]
+  );
+
   const menus = [
     {
       name: "Edit chart",
@@ -91,9 +115,7 @@ export function BoardCanvas({
     {
       name: "Delete chart",
       icon: <Trash2 className="h-4 w-4" />,
-      onclick: (key?: string) => {
-        onRemove(key || "");
-      },
+      onclick: onRemove,
     },
   ];
 
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index 434afd85..897d7734 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -69,7 +69,7 @@ export default function BoardChartEditor({
     sources: sourceDriver,
     setBoardMode,
     value: chartList,
-    onAddChart,
+    storage,
   } = useBoardContext();
   const [result, setResult] = useState<OptimizeTableState>();
 
@@ -198,6 +198,37 @@ export default function BoardChartEditor({
     initialChartValue,
   ]);
 
+  const onAddChart = useCallback(async () => {
+    if (storage) {
+      setLoading(true);
+      const newChart = await storage.add(value);
+      if (newChart) {
+        const newValue = produce(chartList!, (draft) => {
+          if (!draft?.charts) draft.charts = [];
+          draft?.charts.push(newChart);
+
+          if (!draft?.layout) draft.layout = [];
+
+          let y = 0;
+          for (const layout of draft.layout)
+            y = Math.max(y, layout.y + layout.h);
+
+          draft.layout.push({
+            x: 0,
+            y,
+            w: 2,
+            h: 2,
+            i: newChart.id!,
+          });
+        });
+        await storage.save(newValue);
+        onChange(newValue);
+        setBoardMode(null);
+        setLoading(false);
+      }
+    }
+  }, [chartList, onChange, setBoardMode, storage, value]);
+
   return (
     <div className="flex flex-1 overflow-hidden border-t">
       <div className="flex flex-1 flex-col overflow-hidden">
@@ -288,39 +319,7 @@ export default function BoardChartEditor({
           />
         </div>
         <div className="flex justify-end gap-2 border-t p-4">
-          <Button
-            variant="primary"
-            onClick={() => {
-              onAddChart(value).then((newChart) => {
-                if (!newChart) return;
-
-                console.log("onchange", onChange);
-
-                onChange(
-                  produce(chartList!, (draft) => {
-                    if (!draft?.charts) draft.charts = [];
-                    draft?.charts.push(newChart);
-
-                    if (!draft?.layout) draft.layout = [];
-
-                    let y = 0;
-                    for (const layout of draft.layout)
-                      y = Math.max(y, layout.y + layout.h);
-
-                    draft.layout.push({
-                      x: 0,
-                      y,
-                      w: 2,
-                      h: 2,
-                      i: newChart.id!,
-                    });
-                  })
-                );
-
-                setBoardMode(null);
-              });
-            }}
-          >
+          <Button variant="primary" onClick={onAddChart}>
             Save Changes
           </Button>
           <Button
diff --git a/src/components/board/board-delete-dialog.tsx b/src/components/board/board-delete-dialog.tsx
index 42c9dcc7..23133d9a 100644
--- a/src/components/board/board-delete-dialog.tsx
+++ b/src/components/board/board-delete-dialog.tsx
@@ -1,6 +1,8 @@
-import { deleteOuterbaseDashboardChart } from "@/outerbase-cloud/api";
+import { IBoardStorageDriver } from "@/drivers/board-storage/base";
+import { produce } from "immer";
 import { LucideLoader } from "lucide-react";
 import { useCallback, useState } from "react";
+import { DashboardProps } from ".";
 import CopyableText from "../copyable-text";
 import { createDialog } from "../create-dialog";
 import LabelInput from "../label-input";
@@ -14,29 +16,39 @@ import {
 
 export const deleteChartDialog = createDialog<
   {
-    workspaceId: string;
     chartId: string;
     chartName: string;
+    storage: IBoardStorageDriver | undefined;
+    value: DashboardProps | undefined;
   },
-  string | undefined
+  DashboardProps | undefined
 >(
-  ({ close, chartName, workspaceId, chartId }) => {
+  ({ close, chartName, chartId, storage, value }) => {
     const [loading, setLoading] = useState(false);
     const [name, setName] = useState("");
 
-    const deleteClicked = useCallback(() => {
+    const deleteClicked = useCallback(async () => {
       if (name !== chartName) return;
 
       setLoading(true);
 
-      deleteOuterbaseDashboardChart(workspaceId, chartId)
-        .then(() => {
-          close(chartId);
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-    }, [chartName, chartId, close, name, workspaceId]);
+      if (storage) {
+        if (value) {
+          storage
+            .remove(chartId)
+            .then(() => {
+              const newValue = produce(value, (draft) => {
+                draft.layout = draft.layout.filter((f) => f.i !== chartId);
+                draft.charts = draft.charts.filter((f) => f.id !== chartId);
+              });
+              close(newValue);
+            })
+            .finally(() => setLoading(false));
+        }
+      } else {
+        setLoading(false);
+      }
+    }, [name, chartName, storage, value, chartId, close]);
 
     return (
       <>
@@ -80,5 +92,5 @@ export const deleteChartDialog = createDialog<
       </>
     );
   },
-  { defaultValue: "close" }
+  { defaultValue: undefined }
 );
diff --git a/src/components/board/board-filter-dialog.tsx b/src/components/board/board-filter-dialog.tsx
index 572d633a..2b8a1dcb 100644
--- a/src/components/board/board-filter-dialog.tsx
+++ b/src/components/board/board-filter-dialog.tsx
@@ -89,7 +89,7 @@ export function BoardFilterDialog(props: Props) {
               <SelectContent>
                 <SelectItem value="search">Search</SelectItem>
                 <SelectItem value="enum">Multi-select ENUM</SelectItem>
-                <SelectItem value="date">Date Rang</SelectItem>
+                <SelectItem value="date">Date Range</SelectItem>
               </SelectContent>
             </Select>
           </div>
@@ -180,7 +180,7 @@ export function BoardFilterDialog(props: Props) {
             disabled={!allowAddFilter}
             onClick={onAddFilter}
           >
-            Add Filter
+            Save Filter
           </Button>
           <Button type="button" variant={"secondary"} onClick={props.onClose}>
             Cancel
diff --git a/src/components/board/board-filter.tsx b/src/components/board/board-filter.tsx
index 89a71e96..abf842e8 100644
--- a/src/components/board/board-filter.tsx
+++ b/src/components/board/board-filter.tsx
@@ -2,7 +2,6 @@
 import { produce } from "immer";
 import {
   CalendarDays,
-  Check,
   Ellipsis,
   ListFilter,
   ListOrdered,
@@ -11,15 +10,17 @@ import {
 import { useCallback, useState } from "react";
 import { DashboardProps } from ".";
 import { buttonVariants } from "../ui/button";
-import { Checkbox } from "../ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { BoardFilterDialog, DEFAULT_DATE_FILTER } from "./board-filter-dialog";
+import { BoardFilterDialog } from "./board-filter-dialog";
+import { BoardFilterDate } from "./board-filter/board-filter-date";
+import { BoardFilterEnum } from "./board-filter/board-filter-enum";
+import { BoardFilterInput } from "./board-filter/board-filter-input";
+import { useBoardContext } from "./board-provider";
 import { BoardTool } from "./board-tool/board-tool";
 import { BoardToolbar } from "./board-tool/board-toolbar";
 
@@ -29,13 +30,13 @@ interface Props {
   interval: number;
   onChangeInterval: (v: number) => void;
   onRefresh?: () => void;
-  onSave: () => void;
   onCancel: () => void;
   value: DashboardProps;
   onChange: (v: DashboardProps) => void;
 }
 
 export function BoardFilter(props: Props) {
+  const { storage, filterValue, onFilterValueChange } = useBoardContext();
   const [open, setOpen] = useState(false);
   const [show, setShow] = useState(true);
   const [selectIndex, setSelectIndex] = useState<number | undefined>(undefined);
@@ -55,6 +56,13 @@ export function BoardFilter(props: Props) {
     setOpen(true);
   }, [props]);
 
+  const onSave = useCallback(() => {
+    if (storage) {
+      props.onChangeEditMode(null);
+      storage.save(props.value);
+    }
+  }, [props, storage]);
+
   const mapFilterItem = props.value.data.filters.map((x, i) => {
     const icon =
       x.type === "search" ? (
@@ -66,104 +74,45 @@ export function BoardFilter(props: Props) {
       );
     const input =
       x.type === "search" ? (
-        <input
-          placeholder={`Enter ${x.name}`}
-          value={x.defaultValue}
+        <BoardFilterInput
+          name={x.name}
+          value={filterValue[x.name] ?? x.defaultValue}
           onChange={(v) => {
-            const data = structuredClone(props.value.data.filters);
-            data[i].defaultValue = v.target.value;
-            const value = produce(props.value, (draft) => {
-              draft.data.filters = data;
-            });
-            props.onChange(value);
+            if (!onFilterValueChange) return;
+            onFilterValueChange(
+              produce(filterValue, (draft) => {
+                draft[x.name] = v;
+              })
+            );
           }}
-          className="max-w-14 outline-0"
         />
       ) : x.type === "enum" ? (
-        <div className="z-100">
-          <Popover>
-            <PopoverTrigger asChild>
-              <div
-                className={
-                  x.defaultValue
-                    ? "px-2 py-1"
-                    : "text-muted-foreground px-2 py-1"
-                }
-              >
-                <div>{x.defaultValue || `Select ${x.name}`}</div>
-              </div>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto">
-              {x.value.split(",").map((v, idx) => {
-                return (
-                  <div
-                    key={v + idx}
-                    className="flex items-center justify-center gap-2"
-                  >
-                    <Checkbox
-                      id={v + idx}
-                      checked={x.defaultValue.split(",").includes(v)}
-                      onCheckedChange={(checked) => {
-                        const valueString = x.defaultValue.split(",");
-                        const data = structuredClone(props.value.data.filters);
-
-                        if (checked) {
-                          data[i].defaultValue = [...valueString, v]
-                            .filter((f) => !!f)
-                            .join(",");
-                        } else {
-                          valueString.filter((f) => f !== v);
-                          data[i].defaultValue = valueString
-                            .filter((f) => f !== v)
-                            .join(",");
-                        }
-                        const value = produce(props.value, (draft) => {
-                          draft.data.filters = data;
-                        });
-                        props.onChange(value);
-                      }}
-                    />
-                    <label htmlFor={v + idx}>{v}</label>
-                  </div>
-                );
-              })}
-            </PopoverContent>
-          </Popover>
-        </div>
+        <BoardFilterEnum
+          name={x.name}
+          enums={x.value.split(",")}
+          value={filterValue[x.name] ?? x.defaultValue}
+          onChange={(v) => {
+            if (!onFilterValueChange) return;
+            onFilterValueChange(
+              produce(filterValue, (draft) => {
+                draft[x.name] = v;
+              })
+            );
+          }}
+        />
       ) : (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <div
-              className={
-                x.defaultValue ? "px-2 py-1" : "text-muted-foreground px-2 py-1"
-              }
-            >
-              <div>{x.defaultValue || `Select ${x.name}`}</div>
-            </div>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            {DEFAULT_DATE_FILTER.map((date) => {
-              return (
-                <DropdownMenuItem
-                  key={date}
-                  onClick={() => {
-                    const data = structuredClone(props.value.data.filters);
-                    data[i].defaultValue = date;
-                    const value = produce(props.value, (draft) => {
-                      draft.data.filters = data;
-                    });
-                    props.onChange(value);
-                  }}
-                >
-                  <div className="flex items-center gap-2">
-                    {date}
-                    {date === x.defaultValue && <Check className="h-3 w-3" />}
-                  </div>
-                </DropdownMenuItem>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <BoardFilterDate
+          name={x.name}
+          value={filterValue[x.name] ?? x.defaultValue}
+          onChange={(v) => {
+            if (!onFilterValueChange) return;
+            onFilterValueChange(
+              produce(filterValue, (draft) => {
+                draft[x.name] = v;
+              })
+            );
+          }}
+        />
       );
     return (
       <div
@@ -205,7 +154,12 @@ export function BoardFilter(props: Props) {
                     (_, idx) => idx !== i
                   );
                 });
-                props.onChange(value);
+                storage
+                  ?.save(value)
+                  .then()
+                  .finally(() => {
+                    props.onChange(value);
+                  });
               }}
             >
               Remove
@@ -230,7 +184,7 @@ export function BoardFilter(props: Props) {
           onChange={props.onChangeInterval}
           onRefresh={props.onRefresh}
           mode={props.editMode}
-          onSave={props.onSave}
+          onSave={onSave}
           onCancel={props.onCancel}
           value={props.value}
           onChangeValue={props.onChange}
@@ -266,7 +220,12 @@ export function BoardFilter(props: Props) {
                 const value = produce(props.value, (draft) => {
                   draft.data.filters = data;
                 });
-                props.onChange(value);
+                storage
+                  ?.save(value)
+                  .then()
+                  .finally(() => {
+                    props.onChange(value);
+                  });
               }}
             />
           )}
diff --git a/src/components/board/board-filter/board-filter-date.tsx b/src/components/board/board-filter/board-filter-date.tsx
new file mode 100644
index 00000000..a1b83b2c
--- /dev/null
+++ b/src/components/board/board-filter/board-filter-date.tsx
@@ -0,0 +1,58 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Check } from "lucide-react";
+import { useEffect, useState } from "react";
+import { DEFAULT_DATE_FILTER } from "../board-filter-dialog";
+
+interface Props {
+  name: string;
+  value: string;
+  onChange: (v: string) => void;
+}
+
+export function BoardFilterDate(props: Props) {
+  const [internalValue, setInternalValue] = useState(props.value);
+
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+
+  return (
+    <DropdownMenu
+      onOpenChange={() => {
+        props.onChange(internalValue);
+      }}
+    >
+      <DropdownMenuTrigger asChild>
+        <div
+          className={
+            internalValue ? "px-2 py-1" : "text-muted-foreground px-2 py-1"
+          }
+        >
+          <div>{internalValue || `Select ${props.name}`}</div>
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {DEFAULT_DATE_FILTER.map((date) => {
+          return (
+            <DropdownMenuItem
+              key={date}
+              onClick={() => {
+                setInternalValue(date);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                {date}
+                {date === internalValue && <Check className="h-3 w-3" />}
+              </div>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/board/board-filter/board-filter-enum.tsx b/src/components/board/board-filter/board-filter-enum.tsx
new file mode 100644
index 00000000..80da0613
--- /dev/null
+++ b/src/components/board/board-filter/board-filter-enum.tsx
@@ -0,0 +1,78 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useEffect, useState } from "react";
+
+interface Props {
+  name: string;
+  value: string;
+  onChange: (v: string) => void;
+  enums: string[];
+}
+
+export function BoardFilterEnum(props: Props) {
+  const [internalValue, setInternalValue] = useState(props.value);
+
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+
+  console.log(internalValue);
+
+  return (
+    <div className="z-100">
+      <Popover
+        onOpenChange={() => {
+          props.onChange(internalValue);
+        }}
+      >
+        <PopoverTrigger asChild>
+          <div
+            className={
+              internalValue ? "px-2 py-1" : "text-muted-foreground px-2 py-1"
+            }
+          >
+            <div>{internalValue || `Select ${props.name}`}</div>
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto">
+          {props.enums.map((v, idx) => {
+            return (
+              <div
+                key={v + idx}
+                className="mt-2 flex items-center justify-start gap-2"
+              >
+                <div className="w-4">
+                  <Checkbox
+                    id={v + idx}
+                    checked={internalValue.split(",").includes(v)}
+                    onCheckedChange={(checked) => {
+                      const valueString = internalValue.split(",");
+                      if (checked) {
+                        const newValue = [...valueString, v]
+                          .filter((f) => !!f)
+                          .join(",");
+                        setInternalValue(newValue);
+                      } else {
+                        const newValue = valueString
+                          .filter((f) => f !== v)
+                          .join(",");
+                        setInternalValue(newValue);
+                      }
+                    }}
+                  />
+                </div>
+                <label htmlFor={v + idx} className="text-left">
+                  {v}
+                </label>
+              </div>
+            );
+          })}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/src/components/board/board-filter/board-filter-input.tsx b/src/components/board/board-filter/board-filter-input.tsx
new file mode 100644
index 00000000..30330b52
--- /dev/null
+++ b/src/components/board/board-filter/board-filter-input.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+interface Props {
+  name: string;
+  value: string;
+  onChange: (v: string) => void;
+}
+
+export function BoardFilterInput(props: Props) {
+  const [internalValue, setInternalValue] = useState(props.value);
+
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+
+  return (
+    <input
+      placeholder={`Enter ${props.name}`}
+      value={internalValue}
+      onChange={(v) => setInternalValue(v.target.value)}
+      onBlur={(e) => {
+        props.onChange(e.currentTarget.value);
+      }}
+      className="max-w-14 outline-0"
+    />
+  );
+}
diff --git a/src/components/board/board-provider.tsx b/src/components/board/board-provider.tsx
index cb79a185..53048c08 100644
--- a/src/components/board/board-provider.tsx
+++ b/src/components/board/board-provider.tsx
@@ -1,4 +1,5 @@
 import { BoardSourceDriver } from "@/drivers/board-source/base-source";
+import { IBoardStorageDriver } from "@/drivers/board-storage/base";
 import { noop } from "lodash";
 import {
   createContext,
@@ -8,7 +9,6 @@ import {
   useContext,
 } from "react";
 import { BoardEditorMode, DashboardProps } from ".";
-import { ChartValue } from "../chart/chart-type";
 
 interface BoardContextSettingProps {
   autoRefresh: string[];
@@ -17,19 +17,21 @@ interface BoardContextSettingProps {
 
 interface BoardContextProps {
   value?: DashboardProps;
+  onChange?: (value: DashboardProps) => void;
   sources?: BoardSourceDriver;
-  onAddChart: (value: ChartValue) => Promise<ChartValue | undefined>;
+  storage?: IBoardStorageDriver;
   setting?: BoardContextSettingProps;
   lastRunTimestamp: number;
   setBoardMode: Dispatch<SetStateAction<BoardEditorMode>>;
+  filterValue: Record<string, string>;
+  onFilterValueChange?: (value: Record<string, string>) => void;
 }
 
 const BoardContext = createContext<BoardContextProps>({
   lastRunTimestamp: 0,
   setBoardMode: noop,
-  onAddChart: async () => {
-    return undefined;
-  },
+  filterValue: {},
+  onFilterValueChange: noop,
 });
 
 export function useBoardContext() {
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index 6f92747d..47b869a9 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -1,4 +1,5 @@
 import { BoardSourceDriver } from "@/drivers/board-source/base-source";
+import { IBoardStorageDriver } from "@/drivers/board-storage/base";
 import { useEffect, useState } from "react";
 import { ChartValue } from "../chart/chart-type";
 import { BoardCanvas } from "./board-canvas";
@@ -20,26 +21,24 @@ export type BoardEditorMode = "ADD_CHART" | "REARRANGING_CHART" | null;
 
 interface Props {
   value: DashboardProps;
+  filterValue: Record<string, string>;
+  onFilterValueChange?: (value: Record<string, string>) => void;
   sources?: BoardSourceDriver;
+  storage?: IBoardStorageDriver;
   interval: number;
   onChange: (value: DashboardProps) => void;
   onChangeInterval: (v: number) => void;
-  onLayoutSave: () => void;
-  onLayoutCancel: () => void;
-  onRemove: (key: string) => void;
-  onAddChart: (value: ChartValue) => Promise<ChartValue | undefined>;
 }
 
 export default function Board({
   value,
   sources,
+  storage,
   interval,
   onChange,
   onChangeInterval,
-  onLayoutCancel,
-  onLayoutSave,
-  onRemove,
-  onAddChart,
+  filterValue,
+  onFilterValueChange,
 }: Props) {
   const [editMode, setEditMode] = useState<BoardEditorMode>(null);
 
@@ -74,12 +73,15 @@ export default function Board({
 
   return (
     <BoardProvider
+      filterValue={filterValue}
       sources={sources}
+      storage={storage}
+      onChange={onChange}
       lastRunTimestamp={lastRunTimestamp}
       setting={{ autoRefresh, name: value.name }}
       setBoardMode={setEditMode}
-      onAddChart={onAddChart}
       value={value}
+      onFilterValueChange={onFilterValueChange}
     >
       <div className="relative flex flex-1 flex-col">
         <BoardFilter
@@ -94,11 +96,7 @@ export default function Board({
           }}
           onCancel={() => {
             setEditMode(null);
-            onLayoutCancel();
-          }}
-          onSave={() => {
-            setEditMode(null);
-            onLayoutSave();
+            // onLayoutCancel();
           }}
         />
         <div className="relative flex-1">
@@ -112,7 +110,6 @@ export default function Board({
             }}
             editMode={editMode}
             setEditMode={setEditMode}
-            onRemove={onRemove}
           />
         </div>
 
@@ -121,6 +118,12 @@ export default function Board({
             <BoardChartEditor onChange={onChange} />
           </div>
         )}
+
+        {editMode === "ADD_CHART" && (
+          <div className="bg-background fixed top-14 bottom-0 left-0 z-50 flex w-screen">
+            <BoardChartEditor onChange={onChange} />
+          </div>
+        )}
       </div>
     </BoardProvider>
   );
diff --git a/src/drivers/board-storage/base.ts b/src/drivers/board-storage/base.ts
new file mode 100644
index 00000000..50f4d26e
--- /dev/null
+++ b/src/drivers/board-storage/base.ts
@@ -0,0 +1,12 @@
+import { DashboardProps } from "@/components/board";
+import { ChartValue } from "@/components/chart/chart-type";
+
+export abstract class IBoardStorageDriver {
+  abstract save(value: DashboardProps): Promise<unknown>;
+  abstract remove(chartId: string): Promise<unknown>;
+  abstract add(chart: ChartValue): Promise<ChartValue | undefined>;
+  abstract update(
+    chartId: string,
+    chart: ChartValue
+  ): Promise<ChartValue | undefined>;
+}
diff --git a/src/drivers/board-storage/outerbase.ts b/src/drivers/board-storage/outerbase.ts
new file mode 100644
index 00000000..e62b2c68
--- /dev/null
+++ b/src/drivers/board-storage/outerbase.ts
@@ -0,0 +1,71 @@
+import { DashboardProps } from "@/components/board";
+import { ChartParams, ChartValue } from "@/components/chart/chart-type";
+import { deleteOuterbaseDashboardChart, updateOuterbaseDashboard } from "@/outerbase-cloud/api";
+import { createOuterbaseDashboardChart, updateOuterbaseDashboardChart } from "@/outerbase-cloud/api-board";
+import { IBoardStorageDriver } from "./base";
+
+export default class OuterbaseBoardStorageDriver
+  implements IBoardStorageDriver
+{
+  constructor(
+    protected workspaceId: string,
+    protected boardId: string
+  ) {}
+
+  async save(value: DashboardProps): Promise<unknown> {
+    const input = {
+      base_id: null,
+      chart_ids: Array.from(new Set(value.charts.map((v) => v.id))),
+      data: (value as any).data,
+      layout: value.layout.map(({ w, h, i, x, y }) => ({ w, h, x, y, i })),
+      directory_index: (value as any).directory_index,
+      name: value.name,
+      type: 'dashboard',
+    };
+    return await updateOuterbaseDashboard(this.workspaceId, this.boardId, input);
+  }
+
+  async remove(chartId: string): Promise<unknown> {
+    return await deleteOuterbaseDashboardChart(this.workspaceId, chartId);
+  }
+
+  async add(chart: ChartValue): Promise<ChartValue> {
+    const input = {
+      source_id: chart.source_id!,
+      params: {
+        ...chart.params,
+        source_id: chart.source_id,
+        workspace_id: this.workspaceId,
+        layers: chart.params.layers.map((layer) => {
+          return {
+            ...layer,
+            type: chart.type!,
+          };
+        }),
+      } as ChartParams,
+      type: chart.type!,
+      name: chart.name ?? "",
+    }
+    return await createOuterbaseDashboardChart(this.workspaceId, input);
+  }
+
+  async update(chartId: string, chart: ChartValue): Promise<ChartValue> {
+    const input = {
+      source_id: chart.source_id!,
+      params: {
+        ...chart.params,
+        source_id: chart.source_id,
+        workspace_id: this.workspaceId,
+        layers: chart.params.layers.map((layer) => {
+          return {
+            ...layer,
+            type: chart.type!,
+          };
+        }),
+      } as ChartParams,
+      type: chart.type!,
+      name: chart.name ?? "",
+    }
+    return await updateOuterbaseDashboardChart(this.workspaceId, chartId, input);
+  }
+}
diff --git a/src/outerbase-cloud/api-board.ts b/src/outerbase-cloud/api-board.ts
index 4eb1a5e9..c7298595 100644
--- a/src/outerbase-cloud/api-board.ts
+++ b/src/outerbase-cloud/api-board.ts
@@ -16,3 +16,18 @@ export async function createOuterbaseDashboardChart(
     options
   );
 }
+
+export async function updateOuterbaseDashboardChart(
+  workspaceId: string,
+  chartId: string,
+  options: {
+    type: string;
+    source_id: string;
+    params: ChartParams;
+    name: string;
+  }
+): Promise<ChartValue>{
+  return requestOuterbase<ChartValue>(
+    `/api/v1/workspace/${workspaceId}/chart/${chartId}`, 'PUT', options
+  )
+}
diff --git a/src/outerbase-cloud/database-source/index.tsx b/src/outerbase-cloud/database-source/index.tsx
index e9b849ca..060b194e 100644
--- a/src/outerbase-cloud/database-source/index.tsx
+++ b/src/outerbase-cloud/database-source/index.tsx
@@ -1,4 +1,8 @@
-import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
+import { ChartValue } from "@/components/chart/chart-type";
+import {
+  OuterbaseAPIDashboardDetail,
+  OuterbaseAPIWorkspace,
+} from "@/outerbase-cloud/api-type";
 import { createOuterbaseDatabaseDriver } from "@/outerbase-cloud/database/utils";
 import {
   BaseDriver,
@@ -9,6 +13,11 @@ import {
   BoardSource,
   BoardSourceDriver,
 } from "../../drivers/board-source/base-source";
+import {
+  deleteOuterbaseDashboardChart,
+  updateOuterbaseDashboard,
+} from "../api";
+import { createOuterbaseDashboardChart } from "../api-board";
 
 export default class OuterbaseBoardSourceDriver implements BoardSourceDriver {
   protected workspace: OuterbaseAPIWorkspace;
@@ -86,4 +95,95 @@ export default class OuterbaseBoardSourceDriver implements BoardSourceDriver {
   cleanup(): void {
     // do nothing
   }
+
+  async onLayoutSave(
+    boardId: string,
+    value: OuterbaseAPIDashboardDetail
+  ): Promise<unknown> {
+    const input = {
+      base_id: null,
+      chart_ids: value.chart_ids
+        ? value.chart_ids
+        : Array.from(new Set(value.charts.map((v) => v.id))),
+      data: (value as any).data,
+      layout: value.layout.map(({ w, h, i, x, y }) => ({ w, h, x, y, i })),
+      directory_index: (value as any).directory_index,
+      name: value.name,
+      type: value.type,
+    };
+
+    return await updateOuterbaseDashboard(this.workspace.name, boardId, input);
+  }
+
+  async onLayoutRemove(
+    chartId: string,
+    boardId: string,
+    value: OuterbaseAPIDashboardDetail
+  ): Promise<unknown> {
+    const input: OuterbaseAPIDashboardDetail = {
+      ...value,
+      chart_ids: value.chart_ids.filter((f) => f !== chartId),
+      layout: value.layout.filter((f) => f.i !== chartId),
+      charts: value.charts.filter((f) => f.id !== chartId),
+    };
+    const deleteChart = await deleteOuterbaseDashboardChart(
+      this.workspace.name,
+      chartId
+    );
+    if (deleteChart) {
+      return await this.onLayoutSave(boardId, input);
+    }
+    return false;
+  }
+
+  async onAddChart(
+    boardId: string,
+    chart: ChartValue,
+    value: OuterbaseAPIDashboardDetail
+  ): Promise<ChartValue | undefined> {
+    if (!chart.source_id) return;
+    if (!chart.type) return;
+
+    const chartValue = {
+      source_id: chart.source_id,
+      params: {
+        ...chart.params,
+        source_id: chart.source_id,
+        workspace_id: this.workspace.name,
+        layers: chart.params.layers.map((layer) => {
+          return {
+            ...layer,
+            type: chart.type!,
+          };
+        }),
+      },
+      type: chart.type,
+      name: chart.name ?? "",
+    };
+
+    const request = await createOuterbaseDashboardChart(
+      this.workspace.name,
+      chartValue
+    );
+    if (request.id) {
+      await this.onLayoutSave(boardId, {
+        ...value,
+        chart_ids: [...value.chart_ids, request.id],
+        layout: [
+          ...value.layout,
+          {
+            i: request.id,
+            x: 0,
+            y: 2,
+            w: 2,
+            h: 2,
+            max_h: 0,
+            max_w: 0,
+          },
+        ],
+      });
+
+      return request;
+    }
+  }
 }

From 3481a3bc6743372af83c69fe65365ce5dce6a9b2 Mon Sep 17 00:00:00 2001
From: keppere <50957820+keppere@users.noreply.github.com>
Date: Wed, 12 Feb 2025 19:25:02 +0700
Subject: [PATCH 055/106] feat: support placeholder in board (#360)

---
 src/components/board/board-auto-value.ts    |  98 +++++++++++++
 src/components/board/board-chart-editor.tsx | 152 ++++++--------------
 src/lib/sql/fill-variables.ts               |  28 ++++
 src/lib/sql/tokenizer.ts                    |  10 +-
 4 files changed, 175 insertions(+), 113 deletions(-)
 create mode 100644 src/components/board/board-auto-value.ts
 create mode 100644 src/lib/sql/fill-variables.ts

diff --git a/src/components/board/board-auto-value.ts b/src/components/board/board-auto-value.ts
new file mode 100644
index 00000000..82568669
--- /dev/null
+++ b/src/components/board/board-auto-value.ts
@@ -0,0 +1,98 @@
+import { DatabaseResultSet } from "@/drivers/base-driver";
+import { produce } from "immer";
+import { ChartValue, DEFAULT_THEME, THEMES } from "../chart/chart-type";
+import { generateGradientColors } from "../chart/echart-options-builder";
+
+export function createAutoBoardChartValue(
+  prev: ChartValue,
+  newResult: DatabaseResultSet,
+  sql: string,
+  theme: string
+): ChartValue {
+  return produce(prev, (draft) => {
+    draft.params.layers[0].sql = sql;
+    if (newResult.headers?.length > 0) {
+      const columns = newResult.headers.map((header) => header.name);
+
+      if (newResult.rows.length > 0) {
+        const xAxisKeys = [];
+        const yAxisKeys = [];
+        const firstRecord = newResult.rows[0];
+        const columnType = getColumnType(firstRecord);
+        // study each column value and try to guess the type
+        if (columnType) {
+          for (const column of columns) {
+            if (columnType[column] === "number") {
+              yAxisKeys.push(column);
+            } else {
+              xAxisKeys.push(column);
+            }
+          }
+        } else {
+          // if there is no column type, we will just use the first column as xAxisKey
+          for (let i = 0; i < newResult.headers.length; i++) {
+            if (i === 0) {
+              xAxisKeys.push(newResult.headers[i].name);
+            } else {
+              yAxisKeys.push(newResult.headers[i].name);
+            }
+          }
+        }
+
+        draft.params.options.xAxisKey =
+          xAxisKeys.length > 0 ? xAxisKeys[0] : "";
+        draft.params.options.yAxisKeys = yAxisKeys;
+      }
+
+      // initial yAxisKeyColors
+      const axisColors = Object.keys(draft.params.options.yAxisKeyColors ?? {});
+      const appTheme: "light" | "dark" = theme as "light" | "dark";
+      const themeColor = THEMES[DEFAULT_THEME].colors?.[appTheme ?? "light"];
+      if (axisColors.length === 0 && columns.length > 0) {
+        // Add default yAxisKeyColors
+        const colors = generateGradientColors(
+          themeColor[0],
+          themeColor[1],
+          columns.length
+        );
+        const newColors = columns.reduce(
+          (acc, col, i) => {
+            acc[col] = colors[i];
+            return acc;
+          },
+          {} as Record<string, string>
+        );
+
+        draft.params.options.theme = DEFAULT_THEME;
+        draft.params.options.yAxisKeyColors = newColors;
+      } else if (axisColors.length > 0 && columns.length > axisColors.length) {
+        // Add new yAxisKeyColors
+        const colors = generateGradientColors(
+          themeColor[0],
+          themeColor[1],
+          columns.length + 5
+        );
+
+        for (let i = 0; i < columns.length; i++) {
+          if (
+            draft.params.options.yAxisKeyColors &&
+            !draft.params.options.yAxisKeyColors[columns[i]]
+          ) {
+            draft.params.options.yAxisKeyColors[columns[i]] = colors[
+              i
+            ] as string;
+          }
+        }
+      }
+    }
+  });
+}
+
+function getColumnType(firstRecord: any): Record<string, string> {
+  const columnTypes: Record<string, string> = {};
+  const keys = Object.keys(firstRecord);
+  for (const key of keys) {
+    columnTypes[key] = typeof firstRecord[key];
+  }
+  return columnTypes;
+}
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index 897d7734..21c34523 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -1,19 +1,25 @@
 import { generateAutoComplete } from "@/context/schema-provider";
-import { DatabaseResultSet, DatabaseSchemas } from "@/drivers/base-driver";
+import {
+  DatabaseResultSet,
+  DatabaseSchemas,
+  SupportedDialect,
+} from "@/drivers/base-driver";
+import { fillVariables } from "@/lib/sql/fill-variables";
+import { tokenizeSql } from "@/lib/sql/tokenizer";
 import { ChartBar, Play, Table } from "@phosphor-icons/react";
 import { produce } from "immer";
 import { useTheme } from "next-themes";
 import { useCallback, useMemo, useState } from "react";
 import { DashboardProps } from ".";
 import Chart from "../chart";
-import { ChartValue, DEFAULT_THEME, THEMES } from "../chart/chart-type";
-import { generateGradientColors } from "../chart/echart-options-builder";
+import { ChartValue } from "../chart/chart-type";
 import EditChartMenu from "../chart/edit-chart-menu";
 import ResultTable from "../gui/query-result-table";
 import SqlEditor from "../gui/sql-editor";
 import OptimizeTableState from "../gui/table-optimized/OptimizeTableState";
 import { Button } from "../orbit/button";
 import { MenuBar } from "../orbit/menu-bar";
+import { createAutoBoardChartValue } from "./board-auto-value";
 import { useBoardContext } from "./board-provider";
 import BoardSourcePicker from "./board-source-picker";
 
@@ -25,22 +31,14 @@ export default function BoardChartEditor({
   const [value, setValue] = useState<ChartValue>({
     model: "chart",
     type: "line",
-    connection_id: "",
-    created_at: "",
-    id: "",
-    source_id: "",
-    updated_at: "",
-    workspace_id: "",
     name: "New Chart",
     params: {
       type: "line",
-      id: "",
       name: "New Chart",
       model: "chart",
-      apiKey: "",
       layers: [
         {
-          type: "sql",
+          type: "line",
           sql: "",
         },
       ],
@@ -48,11 +46,6 @@ export default function BoardChartEditor({
         yAxisKeys: [],
         xAxisKey: "",
       },
-      source_id: "",
-      created_at: "",
-      updated_at: "",
-      workspace_id: "",
-      connection_id: "",
     },
   });
 
@@ -76,90 +69,12 @@ export default function BoardChartEditor({
   const initialChartValue = useCallback(
     (newResult: DatabaseResultSet, sql: string) => {
       setValue((prev) => {
-        return produce(prev, (draft) => {
-          draft.params.layers[0].sql = sql;
-          if (newResult.headers?.length > 0) {
-            const columns = newResult.headers.map((header) => header.name);
-
-            if (newResult.rows.length > 0) {
-              const xAxisKeys = [];
-              const yAxisKeys = [];
-              const firstRecord = newResult.rows[0];
-              const columnType = getColumnType(firstRecord);
-              // study each column value and try to guess the type
-              if (columnType) {
-                for (const column of columns) {
-                  if (columnType[column] === "number") {
-                    yAxisKeys.push(column);
-                  } else {
-                    xAxisKeys.push(column);
-                  }
-                }
-              } else {
-                // if there is no column type, we will just use the first column as xAxisKey
-                for (let i = 0; i < newResult.headers.length; i++) {
-                  if (i === 0) {
-                    xAxisKeys.push(newResult.headers[i].name);
-                  } else {
-                    yAxisKeys.push(newResult.headers[i].name);
-                  }
-                }
-              }
-
-              draft.params.options.xAxisKey =
-                xAxisKeys.length > 0 ? xAxisKeys[0] : "";
-              draft.params.options.yAxisKeys = yAxisKeys;
-            }
-
-            // initial yAxisKeyColors
-            const axisColors = Object.keys(
-              draft.params.options.yAxisKeyColors ?? {}
-            );
-            const appTheme: "light" | "dark" = (forcedTheme ||
-              resolvedTheme) as "light" | "dark";
-            const themeColor =
-              THEMES[DEFAULT_THEME].colors?.[appTheme ?? "light"];
-            if (axisColors.length === 0 && columns.length > 0) {
-              // Add default yAxisKeyColors
-              const colors = generateGradientColors(
-                themeColor[0],
-                themeColor[1],
-                columns.length
-              );
-              const newColors = columns.reduce(
-                (acc, col, i) => {
-                  acc[col] = colors[i];
-                  return acc;
-                },
-                {} as Record<string, string>
-              );
-
-              draft.params.options.theme = DEFAULT_THEME;
-              draft.params.options.yAxisKeyColors = newColors;
-            } else if (
-              axisColors.length > 0 &&
-              columns.length > axisColors.length
-            ) {
-              // Add new yAxisKeyColors
-              const colors = generateGradientColors(
-                themeColor[0],
-                themeColor[1],
-                columns.length + 5
-              );
-
-              for (let i = 0; i < columns.length; i++) {
-                if (
-                  draft.params.options.yAxisKeyColors &&
-                  !draft.params.options.yAxisKeyColors[columns[i]]
-                ) {
-                  draft.params.options.yAxisKeyColors[columns[i]] = colors[
-                    i
-                  ] as string;
-                }
-              }
-            }
-          }
-        });
+        return createAutoBoardChartValue(
+          prev,
+          newResult,
+          sql,
+          forcedTheme || resolvedTheme || ""
+        );
       });
     },
     [forcedTheme, resolvedTheme]
@@ -168,11 +83,29 @@ export default function BoardChartEditor({
   const onRunClicked = useCallback(() => {
     const sql = value?.params.layers[0].sql ?? "";
     const sourceId = value?.source_id ?? "";
-
     if (sourceDriver && sourceId) {
+      const dialect =
+        sourceDriver.sourceList().find((s) => s.id === sourceId)?.type ??
+        "sqlite";
+
+      const sqlTokens = tokenizeSql(sql, dialect as SupportedDialect);
+      const variables: Record<string, string> = (
+        chartList?.data.filters ?? []
+      ).reduce(
+        (acc, filter) => {
+          acc[filter.name] = (filter.value || filter.defaultValue) ?? "";
+          return acc;
+        },
+        {} as Record<string, string>
+      );
+
+      const sqlWithVariables = fillVariables(sqlTokens, variables)
+        .map((t) => t.value)
+        .join("");
+
       setLoading(true);
       sourceDriver
-        .query(sourceId, sql)
+        .query(sourceId, sqlWithVariables)
         .then((newResult) => {
           setResult(
             OptimizeTableState.createFromResult({
@@ -297,6 +230,10 @@ export default function BoardChartEditor({
           <div className="flex-1">
             <SqlEditor
               dialect="sqlite"
+              highlightVariable
+              variableList={(chartList?.data.filters ?? [])
+                .map((f) => f.name)
+                .join(",")}
               value={value.params.layers[0].sql}
               schema={autoCompletion}
               onChange={(e) => {
@@ -334,12 +271,3 @@ export default function BoardChartEditor({
     </div>
   );
 }
-
-function getColumnType(firstRecord: any): Record<string, string> {
-  const columnTypes: Record<string, string> = {};
-  const keys = Object.keys(firstRecord);
-  for (const key of keys) {
-    columnTypes[key] = typeof firstRecord[key];
-  }
-  return columnTypes;
-}
diff --git a/src/lib/sql/fill-variables.ts b/src/lib/sql/fill-variables.ts
new file mode 100644
index 00000000..54190c4b
--- /dev/null
+++ b/src/lib/sql/fill-variables.ts
@@ -0,0 +1,28 @@
+import { escapeSqlValue } from "@/drivers/sqlite/sql-helper";
+import { Token } from "./tokenizer";
+
+export function fillVariables(
+  tokens: Token[],
+  variables: Record<string, unknown>
+): Token[] {
+  return tokens.map((token) => {
+    let placeholder = "";
+    if (token.type === "PLACEHOLDER") {
+      placeholder = token.value.slice(1);
+    } else if (token.type === "OUTERBASE_PLACEHOLDER") {
+      placeholder = token.value.slice(2, -2);
+    }
+    if (placeholder === "") return token;
+
+    const variableValue = variables[placeholder];
+
+    if (variableValue === undefined) {
+      throw new Error(`Variable ${placeholder} is not defined`);
+    }
+
+    return {
+      type: token.type,
+      value: escapeSqlValue(variableValue),
+    };
+  });
+}
diff --git a/src/lib/sql/tokenizer.ts b/src/lib/sql/tokenizer.ts
index 5d82473c..413fe05c 100644
--- a/src/lib/sql/tokenizer.ts
+++ b/src/lib/sql/tokenizer.ts
@@ -1,6 +1,6 @@
 import { SupportedDialect } from "@/drivers/base-driver";
 
-interface Token {
+export interface Token {
   type: string;
   value: string;
 }
@@ -51,6 +51,14 @@ const tokenTypes: {
       return match?.[0] ?? null;
     },
   },
+  {
+    type: "OUTERBASE_PLACEHOLDER",
+    findToken: (input) => {
+      const regex = /^\{\{[a-zA-Z0-9_]+\}\}/;
+      const match = regex.exec(input);
+      return match?.[0] ?? null;
+    },
+  },
   {
     type: "COMMENT",
     findToken: (input, dialect) => {

From 848b173aebab48744f84f46200ce9f477a30217a Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 12 Feb 2025 20:54:44 +0700
Subject: [PATCH 056/106] first board polish

---
 src/components/board/board-canvas.tsx         |  28 +--
 src/components/board/board-chart-editor.tsx   | 177 +++++++++++-------
 src/components/board/board-chart.tsx          |  26 ++-
 src/components/board/board-filter.tsx         |  16 +-
 src/components/board/board-provider.tsx       |   4 +
 src/components/board/board-source-picker.tsx  |  52 ++---
 .../board/board-tool/board-button-menu.tsx    |   9 +-
 .../board/board-tool/board-tool.tsx           |  70 +++----
 .../board/board-tool/board-toolbar.tsx        |   1 -
 src/components/board/index.tsx                |  39 ++--
 10 files changed, 244 insertions(+), 178 deletions(-)

diff --git a/src/components/board/board-canvas.tsx b/src/components/board/board-canvas.tsx
index 9c422caa..b6b85d63 100644
--- a/src/components/board/board-canvas.tsx
+++ b/src/components/board/board-canvas.tsx
@@ -36,22 +36,17 @@ export interface BoardChartLayout {
 interface BoardProps {
   value: DashboardProps;
   onChange: (v: ReactGridLayout.Layout[]) => void;
-  editMode?: "ADD_CHART" | "REARRANGING_CHART" | null;
-  setEditMode?: (mode: "ADD_CHART" | "REARRANGING_CHART" | null) => void;
 }
 
 const ReactGridLayout = WidthProvider(RGL);
 
-export function BoardCanvas({
-  value,
-  onChange,
-  editMode,
-  setEditMode,
-}: BoardProps) {
+export function BoardCanvas({ value, onChange }: BoardProps) {
   const {
     storage,
     value: boardValue,
     onChange: onBoardChange,
+    boardMode,
+    setBoardMode,
   } = useBoardContext();
   const sizes = [
     { w: 1, h: 1, name: "1", icon: <Square className="h-3 w-3" /> },
@@ -93,7 +88,12 @@ export function BoardCanvas({
     {
       name: "Edit chart",
       icon: <EditIcon className="h-4 w-4" />,
-      onclick: () => {},
+      onclick: (key: string) => {
+        setBoardMode({
+          mode: "ADD_CHART",
+          chart: structuredClone(value.charts.find((f) => f.id === key)),
+        });
+      },
     },
     {
       name: "Refresh data",
@@ -104,7 +104,7 @@ export function BoardCanvas({
       name: "Rearrange layout",
       icon: <ImageUpscale className="h-4 w-4" />,
       onclick: () => {
-        setEditMode && setEditMode("REARRANGING_CHART");
+        setBoardMode({ mode: "REARRANGING_CHART" });
       },
     },
     {
@@ -133,13 +133,13 @@ export function BoardCanvas({
     return (
       <div
         key={_.i}
-        className="group bg-background relative flex items-center justify-center overflow-hidden rounded-xl bg-white shadow hover:bg-gray-50 dark:bg-neutral-900 dark:text-white"
+        className="group bg-background relative flex items-center justify-center rounded-xl bg-white shadow hover:bg-gray-50 dark:bg-neutral-900 dark:text-white"
         data-grid={_}
       >
         <BoardChart
           value={value.charts.find((chart) => chart.id === _.i) as any}
         />
-        {editMode === "REARRANGING_CHART" ? (
+        {boardMode?.mode === "REARRANGING_CHART" ? (
           <>
             <div className="absolute top-4 right-4 z-40 hidden gap-2 group-hover:flex">
               {sizes.map((x, index) => {
@@ -213,8 +213,8 @@ export function BoardCanvas({
         className="layout overflow-x-hidden"
         layout={value.layout}
         onLayoutChange={onChange}
-        isDraggable={editMode === "REARRANGING_CHART"}
-        isResizable={editMode === "REARRANGING_CHART"}
+        isDraggable={boardMode?.mode === "REARRANGING_CHART"}
+        isResizable={boardMode?.mode === "REARRANGING_CHART"}
         compactType={"vertical"}
       >
         {mapItem}
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index 21c34523..7153a7e5 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -9,7 +9,8 @@ import { tokenizeSql } from "@/lib/sql/tokenizer";
 import { ChartBar, Play, Table } from "@phosphor-icons/react";
 import { produce } from "immer";
 import { useTheme } from "next-themes";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
 import { DashboardProps } from ".";
 import Chart from "../chart";
 import { ChartValue } from "../chart/chart-type";
@@ -25,47 +26,53 @@ import BoardSourcePicker from "./board-source-picker";
 
 export default function BoardChartEditor({
   onChange,
+  initialValue,
 }: {
   onChange: (value: DashboardProps) => void;
+  initialValue?: ChartValue;
 }) {
-  const [value, setValue] = useState<ChartValue>({
-    model: "chart",
-    type: "line",
-    name: "New Chart",
-    params: {
-      type: "line",
-      name: "New Chart",
-      model: "chart",
-      layers: [
-        {
-          type: "line",
-          sql: "",
-        },
-      ],
-      options: {
-        yAxisKeys: [],
-        xAxisKey: "",
-      },
-    },
+  const {
+    sources: sourceDriver,
+    setBoardMode,
+    value: boardValue,
+    storage,
+    resolvedFilterValue,
+  } = useBoardContext();
+  const [result, setResult] = useState<OptimizeTableState>();
+
+  const [value, setValue] = useState<ChartValue>(() => {
+    if (initialValue) return initialValue;
+
+    if (boardValue?.charts && boardValue.charts.length) {
+      return {
+        ...NEW_CHART_EMPTY_VALUE,
+        source_id: boardValue?.charts[0].source_id,
+      };
+    }
+
+    const sourceList = sourceDriver?.sourceList() ?? [];
+    if (sourceList.length) {
+      return {
+        ...NEW_CHART_EMPTY_VALUE,
+        source_id: sourceList[0].id,
+      };
+    }
+
+    return NEW_CHART_EMPTY_VALUE;
   });
 
   const [schema, setSchema] = useState<DatabaseSchemas>({});
   const [selectedSchema, setSelectedSchema] = useState("");
   const [displayType, setDisplayType] = useState("chart");
+
   const [loading, setLoading] = useState(false);
+  const [saveLoading, setSaveLoading] = useState(false);
+
   const { forcedTheme, resolvedTheme } = useTheme();
   const autoCompletion = useMemo(() => {
     return generateAutoComplete(selectedSchema, schema);
   }, [schema, selectedSchema]);
 
-  const {
-    sources: sourceDriver,
-    setBoardMode,
-    value: chartList,
-    storage,
-  } = useBoardContext();
-  const [result, setResult] = useState<OptimizeTableState>();
-
   const initialChartValue = useCallback(
     (newResult: DatabaseResultSet, sql: string) => {
       setValue((prev) => {
@@ -89,17 +96,8 @@ export default function BoardChartEditor({
         "sqlite";
 
       const sqlTokens = tokenizeSql(sql, dialect as SupportedDialect);
-      const variables: Record<string, string> = (
-        chartList?.data.filters ?? []
-      ).reduce(
-        (acc, filter) => {
-          acc[filter.name] = (filter.value || filter.defaultValue) ?? "";
-          return acc;
-        },
-        {} as Record<string, string>
-      );
 
-      const sqlWithVariables = fillVariables(sqlTokens, variables)
+      const sqlWithVariables = fillVariables(sqlTokens, resolvedFilterValue)
         .map((t) => t.value)
         .join("");
 
@@ -116,8 +114,9 @@ export default function BoardChartEditor({
           );
           initialChartValue(newResult, sql);
         })
-        .catch(() => {
-          console.log("error");
+        .catch((e) => {
+          if (e instanceof Error) toast(e.message);
+          else toast("Unexpected error");
         })
         .finally(() => {
           setLoading(false);
@@ -129,38 +128,69 @@ export default function BoardChartEditor({
     sourceDriver,
     schema,
     initialChartValue,
+    resolvedFilterValue,
   ]);
 
+  // Ensure that we will run the query when we
+  // try to edit an existing chart
+  const runOnce = useRef(false);
+  useEffect(() => {
+    if (runOnce.current) return;
+
+    runOnce.current = true;
+    if (initialValue) {
+      onRunClicked();
+    }
+  }, [onRunClicked, initialValue]);
+
   const onAddChart = useCallback(async () => {
     if (storage) {
-      setLoading(true);
-      const newChart = await storage.add(value);
-      if (newChart) {
-        const newValue = produce(chartList!, (draft) => {
-          if (!draft?.charts) draft.charts = [];
-          draft?.charts.push(newChart);
-
-          if (!draft?.layout) draft.layout = [];
+      setSaveLoading(true);
 
-          let y = 0;
-          for (const layout of draft.layout)
-            y = Math.max(y, layout.y + layout.h);
+      // Decide if we are updating or creating a new chart
+      if (value.id) {
+        const newValue = produce(boardValue!, (draft) => {
+          const index = draft?.charts.findIndex((c) => c.id === value.id);
+          if (index === -1) return;
 
-          draft.layout.push({
-            x: 0,
-            y,
-            w: 2,
-            h: 2,
-            i: newChart.id!,
-          });
+          draft.charts[index] = value;
         });
+
+        await storage.update(value.id, value);
         await storage.save(newValue);
+
         onChange(newValue);
         setBoardMode(null);
-        setLoading(false);
+        setSaveLoading(false);
+      } else {
+        const newChart = await storage.add(value);
+        if (newChart) {
+          const newValue = produce(boardValue!, (draft) => {
+            if (!draft?.charts) draft.charts = [];
+            draft?.charts.push(newChart);
+
+            if (!draft?.layout) draft.layout = [];
+
+            let y = 0;
+            for (const layout of draft.layout)
+              y = Math.max(y, layout.y + layout.h);
+
+            draft.layout.push({
+              x: 0,
+              y,
+              w: 2,
+              h: 2,
+              i: newChart.id!,
+            });
+          });
+          await storage.save(newValue);
+          onChange(newValue);
+          setBoardMode(null);
+          setSaveLoading(false);
+        }
       }
     }
-  }, [chartList, onChange, setBoardMode, storage, value]);
+  }, [boardValue, onChange, setBoardMode, storage, value]);
 
   return (
     <div className="flex flex-1 overflow-hidden border-t">
@@ -175,7 +205,7 @@ export default function BoardChartEditor({
           <div className="flex gap-2 border-b px-4 py-2">
             <BoardSourcePicker
               value={value?.source_id}
-              usedSourceId={(chartList?.charts ?? []).map(
+              usedSourceId={(boardValue?.charts ?? []).map(
                 (c) => c.source_id || ""
               )}
               onChange={(newSourceId) => {
@@ -231,7 +261,7 @@ export default function BoardChartEditor({
             <SqlEditor
               dialect="sqlite"
               highlightVariable
-              variableList={(chartList?.data.filters ?? [])
+              variableList={(boardValue?.data.filters ?? [])
                 .map((f) => f.name)
                 .join(",")}
               value={value.params.layers[0].sql}
@@ -256,7 +286,7 @@ export default function BoardChartEditor({
           />
         </div>
         <div className="flex justify-end gap-2 border-t p-4">
-          <Button variant="primary" onClick={onAddChart}>
+          <Button variant="primary" onClick={onAddChart} loading={saveLoading}>
             Save Changes
           </Button>
           <Button
@@ -271,3 +301,24 @@ export default function BoardChartEditor({
     </div>
   );
 }
+
+const NEW_CHART_EMPTY_VALUE: ChartValue = {
+  model: "chart",
+  type: "line",
+  name: "New Chart",
+  params: {
+    type: "line",
+    name: "New Chart",
+    model: "chart",
+    layers: [
+      {
+        type: "line",
+        sql: "",
+      },
+    ],
+    options: {
+      yAxisKeys: [],
+      xAxisKey: "",
+    },
+  },
+};
diff --git a/src/components/board/board-chart.tsx b/src/components/board/board-chart.tsx
index 0e1b0ab4..12785c00 100644
--- a/src/components/board/board-chart.tsx
+++ b/src/components/board/board-chart.tsx
@@ -1,4 +1,7 @@
-import { useEffect, useRef, useState } from "react";
+import { SupportedDialect } from "@/drivers/base-driver";
+import { fillVariables } from "@/lib/sql/fill-variables";
+import { tokenizeSql } from "@/lib/sql/tokenizer";
+import { useEffect, useMemo, useRef, useState } from "react";
 import Chart from "../chart";
 import { ChartValue } from "../chart/chart-type";
 import { useBoardContext } from "./board-provider";
@@ -6,21 +9,34 @@ import { useBoardContext } from "./board-provider";
 export default function BoardChart({ value }: { value: ChartValue }) {
   const [data, setData] = useState<Record<string, unknown>[] | null>(null);
   const loaderRef = useRef<HTMLDivElement>(null);
-  const { sources, lastRunTimestamp } = useBoardContext();
+  const { sources, lastRunTimestamp, resolvedFilterValue } = useBoardContext();
   const [loading, setLoading] = useState(false);
 
   const sql = value.params.layers[0].sql;
   const sourceId = value.source_id;
 
+  const finalSql = useMemo(() => {
+    return fillVariables(
+      tokenizeSql(
+        sql,
+        (sources?.sourceList().find((s) => s.id === sourceId)?.type ??
+          "sqlite") as unknown as SupportedDialect
+      ),
+      resolvedFilterValue
+    )
+      .map((t) => t.value)
+      .join("");
+  }, [sql, sources, sourceId, resolvedFilterValue]);
+
   useEffect(() => {
-    if (!sources || !sourceId || !sql) {
+    if (!sources || !sourceId || !finalSql) {
       return;
     }
 
     setLoading(true);
 
     sources
-      .query(sourceId, sql)
+      .query(sourceId, finalSql)
       .then((v) => {
         setData(v.rows);
       })
@@ -30,7 +46,7 @@ export default function BoardChart({ value }: { value: ChartValue }) {
       .finally(() => {
         setLoading(false);
       });
-  }, [sources, sourceId, sql, lastRunTimestamp, loaderRef]);
+  }, [sources, sourceId, finalSql, lastRunTimestamp, loaderRef]);
 
   useEffect(() => {
     if (loaderRef.current && loading) {
diff --git a/src/components/board/board-filter.tsx b/src/components/board/board-filter.tsx
index abf842e8..42f5fe62 100644
--- a/src/components/board/board-filter.tsx
+++ b/src/components/board/board-filter.tsx
@@ -25,8 +25,6 @@ import { BoardTool } from "./board-tool/board-tool";
 import { BoardToolbar } from "./board-tool/board-toolbar";
 
 interface Props {
-  editMode: "ADD_CHART" | "REARRANGING_CHART" | null;
-  onChangeEditMode: (v: "ADD_CHART" | "REARRANGING_CHART" | null) => void;
   interval: number;
   onChangeInterval: (v: number) => void;
   onRefresh?: () => void;
@@ -36,7 +34,8 @@ interface Props {
 }
 
 export function BoardFilter(props: Props) {
-  const { storage, filterValue, onFilterValueChange } = useBoardContext();
+  const { storage, filterValue, onFilterValueChange, setBoardMode } =
+    useBoardContext();
   const [open, setOpen] = useState(false);
   const [show, setShow] = useState(true);
   const [selectIndex, setSelectIndex] = useState<number | undefined>(undefined);
@@ -58,10 +57,10 @@ export function BoardFilter(props: Props) {
 
   const onSave = useCallback(() => {
     if (storage) {
-      props.onChangeEditMode(null);
+      setBoardMode(null);
       storage.save(props.value);
     }
-  }, [props, storage]);
+  }, [props, storage, setBoardMode]);
 
   const mapFilterItem = props.value.data.filters.map((x, i) => {
     const icon =
@@ -172,10 +171,8 @@ export function BoardFilter(props: Props) {
 
   return (
     <>
-      <BoardTool
-        editMode={props.editMode}
-        setEditMode={props.onChangeEditMode}
-      />
+      <BoardTool />
+
       <div className="sticky top-0 z-50 bg-neutral-100 px-1 pt-0 pb-2 dark:bg-neutral-950">
         <BoardToolbar
           show={show}
@@ -183,7 +180,6 @@ export function BoardFilter(props: Props) {
           interval={props.interval}
           onChange={props.onChangeInterval}
           onRefresh={props.onRefresh}
-          mode={props.editMode}
           onSave={onSave}
           onCancel={props.onCancel}
           value={props.value}
diff --git a/src/components/board/board-provider.tsx b/src/components/board/board-provider.tsx
index 53048c08..b5767da0 100644
--- a/src/components/board/board-provider.tsx
+++ b/src/components/board/board-provider.tsx
@@ -23,15 +23,19 @@ interface BoardContextProps {
   setting?: BoardContextSettingProps;
   lastRunTimestamp: number;
   setBoardMode: Dispatch<SetStateAction<BoardEditorMode>>;
+  boardMode: BoardEditorMode;
   filterValue: Record<string, string>;
   onFilterValueChange?: (value: Record<string, string>) => void;
+  resolvedFilterValue: Record<string, string>;
 }
 
 const BoardContext = createContext<BoardContextProps>({
   lastRunTimestamp: 0,
   setBoardMode: noop,
+  boardMode: null,
   filterValue: {},
   onFilterValueChange: noop,
+  resolvedFilterValue: {},
 });
 
 export function useBoardContext() {
diff --git a/src/components/board/board-source-picker.tsx b/src/components/board/board-source-picker.tsx
index 7112640f..00959e7a 100644
--- a/src/components/board/board-source-picker.tsx
+++ b/src/components/board/board-source-picker.tsx
@@ -2,7 +2,7 @@ import { DatabaseSchemas } from "@/drivers/base-driver";
 import { BoardSource } from "@/drivers/board-source/base-source";
 import { OuterbaseAPIError } from "@/outerbase-cloud/api-type";
 import { CaretDown, WarningCircle } from "@phosphor-icons/react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Loader } from "../orbit/loader";
 import { getDatabaseIcon } from "../resource-card/utils";
 import { Button } from "../ui/button";
@@ -49,33 +49,41 @@ export default function BoardSourcePicker({
     (newSelectedSource: BoardSource) => {
       if (onChange && sourceDriver) {
         onChange(newSelectedSource.id);
-
-        setLoadingSchema(true);
-        setSchemaError(undefined);
-
-        sourceDriver
-          .schemas(newSelectedSource.id)
-          .then((loadedSchema) => {
-            if (onSchemaLoad) {
-              onSchemaLoad(loadedSchema);
-            }
-          })
-          .catch((e) => {
-            if (e instanceof OuterbaseAPIError) {
-              setSchemaError(e);
-            } else {
-              setSchemaError(new OuterbaseAPIError(e.message));
-            }
-          })
-          .finally(() => {
-            setLoadingSchema(false);
-          });
       }
       setOpen(false);
     },
     [onChange, sourceDriver, onSchemaLoad]
   );
 
+  const previousValue = useRef<string>("");
+  useEffect(() => {
+    if (!sourceDriver || !value) return;
+
+    if (previousValue.current === value) return;
+    previousValue.current = value;
+
+    setLoadingSchema(true);
+    setSchemaError(undefined);
+
+    sourceDriver
+      .schemas(value)
+      .then((loadedSchema) => {
+        if (onSchemaLoad) {
+          onSchemaLoad(loadedSchema);
+        }
+      })
+      .catch((e) => {
+        if (e instanceof OuterbaseAPIError) {
+          setSchemaError(e);
+        } else {
+          setSchemaError(new OuterbaseAPIError(e.message));
+        }
+      })
+      .finally(() => {
+        setLoadingSchema(false);
+      });
+  }, [value]);
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
diff --git a/src/components/board/board-tool/board-button-menu.tsx b/src/components/board/board-tool/board-button-menu.tsx
index 8de658cf..bbf9f24e 100644
--- a/src/components/board/board-tool/board-button-menu.tsx
+++ b/src/components/board/board-tool/board-button-menu.tsx
@@ -14,7 +14,6 @@ import { useEffect, useState } from "react";
 import { useBoardContext } from "../board-provider";
 
 interface Props {
-  mode?: "ADD_CHART" | "REARRANGING_CHART" | null;
   interval: number;
   onChangeInterval: (interval: number) => void;
   onRefresh?: () => void;
@@ -62,10 +61,10 @@ function useAutoRefresh(interval: number) {
 }
 
 export function BoardButtonMenu(props: Props) {
-  const { setting, setBoardMode } = useBoardContext();
+  const { setting, setBoardMode, boardMode } = useBoardContext();
   const timeleft = useAutoRefresh(props.interval);
 
-  if (props.mode === "REARRANGING_CHART") {
+  if (boardMode?.mode === "REARRANGING_CHART") {
     return (
       <div className="flex items-center gap-2">
         <Button variant={"secondary"} onClick={props.onCancel}>
@@ -158,7 +157,9 @@ export function BoardButtonMenu(props: Props) {
         <Button
           variant={"primary"}
           onClick={() => {
-            setBoardMode("ADD_CHART");
+            setBoardMode({
+              mode: "ADD_CHART",
+            });
           }}
         >
           Add Chart
diff --git a/src/components/board/board-tool/board-tool.tsx b/src/components/board/board-tool/board-tool.tsx
index 86d871b1..68a1ca7d 100644
--- a/src/components/board/board-tool/board-tool.tsx
+++ b/src/components/board/board-tool/board-tool.tsx
@@ -1,52 +1,34 @@
+import { Button } from "@/components/orbit/button";
 import { ChartLine, ImageUpscale } from "lucide-react";
-import { ToggleGroup, ToggleGroupItem } from "../../ui/toggle-group";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
+import { useBoardContext } from "../board-provider";
 
-interface Props {
-  editMode: "ADD_CHART" | "REARRANGING_CHART" | null;
-  setEditMode: (v: "ADD_CHART" | "REARRANGING_CHART") => void;
-}
+export function BoardTool() {
+  const { boardMode, setBoardMode } = useBoardContext();
+
+  if (boardMode?.mode === "ADD_CHART") {
+    return null;
+  }
 
-export function BoardTool(props: Props) {
   return (
-    <div className="reveal animate-revealMenu fixed bottom-6 left-[50%] z-100 flex -translate-x-[50%] rounded-xl bg-neutral-800 p-1 text-neutral-100 shadow-lg dark:bg-white dark:text-neutral-900">
-      <ToggleGroup
-        type="single"
-        size={"sm"}
-        value={props.editMode as string}
-        onValueChange={props.setEditMode}
+    <div className="reveal animate-revealMenu fixed bottom-6 left-[50%] z-100 flex -translate-x-[50%] gap-1 rounded-xl bg-neutral-800 p-1 text-neutral-100 shadow-lg dark:bg-white dark:text-neutral-900">
+      <Button
+        variant="primary"
+        shape="square"
+        onClick={() => setBoardMode({ mode: "ADD_CHART" })}
+      >
+        <ChartLine className="h-4 w-4" />
+      </Button>
+
+      <Button
+        shape="square"
+        variant="primary"
+        onClick={() =>
+          setBoardMode(boardMode?.mode ? null : { mode: "REARRANGING_CHART" })
+        }
+        toggled={boardMode?.mode === "REARRANGING_CHART"}
       >
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <ToggleGroupItem
-              value="ADD_CHART"
-              className={
-                props.editMode === "ADD_CHART"
-                  ? "bg-white/15 dark:bg-black/10"
-                  : ""
-              }
-            >
-              <ChartLine className="h-4 w-4" />
-            </ToggleGroupItem>
-          </TooltipTrigger>
-          <TooltipContent>Add Chart</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <ToggleGroupItem
-              value="REARRANGING_CHART"
-              className={
-                props.editMode === "REARRANGING_CHART"
-                  ? "bg-white/15 dark:bg-black/10"
-                  : ""
-              }
-            >
-              <ImageUpscale className="h-4 w-4" />
-            </ToggleGroupItem>
-          </TooltipTrigger>
-          <TooltipContent>Rearranging charts</TooltipContent>
-        </Tooltip>
-      </ToggleGroup>
+        <ImageUpscale className="h-4 w-4" />
+      </Button>
     </div>
   );
 }
diff --git a/src/components/board/board-tool/board-toolbar.tsx b/src/components/board/board-tool/board-toolbar.tsx
index 8098dd15..a68ad1c7 100644
--- a/src/components/board/board-tool/board-toolbar.tsx
+++ b/src/components/board/board-tool/board-toolbar.tsx
@@ -42,7 +42,6 @@ export function BoardToolbar(props: Props) {
       <div className="flex w-1/3 items-end justify-end">
         <BoardButtonMenu
           interval={props.interval}
-          mode={props.mode}
           onChangeInterval={props.onChange}
           onRefresh={props.onRefresh}
           onCancel={props.onCancel}
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index 47b869a9..668ecf8f 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -1,6 +1,6 @@
 import { BoardSourceDriver } from "@/drivers/board-source/base-source";
 import { IBoardStorageDriver } from "@/drivers/board-storage/base";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ChartValue } from "../chart/chart-type";
 import { BoardCanvas } from "./board-canvas";
 import BoardChartEditor from "./board-chart-editor";
@@ -17,7 +17,10 @@ export interface DashboardProps {
   };
 }
 
-export type BoardEditorMode = "ADD_CHART" | "REARRANGING_CHART" | null;
+export type BoardEditorMode = {
+  mode: "ADD_CHART" | "REARRANGING_CHART";
+  chart?: ChartValue;
+} | null;
 
 interface Props {
   value: DashboardProps;
@@ -71,6 +74,18 @@ export default function Board({
     };
   }, [interval]);
 
+  const resolvedFilterValue = useMemo(() => {
+    const tmp = structuredClone(filterValue);
+
+    value.data.filters.forEach((f) => {
+      if (!tmp[f.name]) {
+        tmp[f.name] = f.defaultValue;
+      }
+    });
+
+    return tmp;
+  }, [value, filterValue]);
+
   return (
     <BoardProvider
       filterValue={filterValue}
@@ -80,15 +95,15 @@ export default function Board({
       lastRunTimestamp={lastRunTimestamp}
       setting={{ autoRefresh, name: value.name }}
       setBoardMode={setEditMode}
+      boardMode={editMode}
       value={value}
+      resolvedFilterValue={resolvedFilterValue}
       onFilterValueChange={onFilterValueChange}
     >
       <div className="relative flex flex-1 flex-col">
         <BoardFilter
           value={value}
           onChange={onChange}
-          editMode={editMode}
-          onChangeEditMode={setEditMode}
           interval={interval}
           onChangeInterval={onChangeInterval}
           onRefresh={() => {
@@ -96,7 +111,6 @@ export default function Board({
           }}
           onCancel={() => {
             setEditMode(null);
-            // onLayoutCancel();
           }}
         />
         <div className="relative flex-1">
@@ -108,20 +122,15 @@ export default function Board({
                 layout: v,
               });
             }}
-            editMode={editMode}
-            setEditMode={setEditMode}
           />
         </div>
 
-        {editMode === "ADD_CHART" && (
-          <div className="bg-background fixed top-14 bottom-0 left-0 z-50 flex w-screen">
-            <BoardChartEditor onChange={onChange} />
-          </div>
-        )}
-
-        {editMode === "ADD_CHART" && (
+        {editMode?.mode === "ADD_CHART" && (
           <div className="bg-background fixed top-14 bottom-0 left-0 z-50 flex w-screen">
-            <BoardChartEditor onChange={onChange} />
+            <BoardChartEditor
+              onChange={onChange}
+              initialValue={editMode?.chart}
+            />
           </div>
         )}
       </div>

From 421b6533195f76aac94df22edb1bf38bbbd7c205 Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Fri, 14 Feb 2025 14:13:44 +0700
Subject: [PATCH 057/106] Minor fix bug and improve data catalog (#364)

* Fix: handle case when modelColumn is undefined in DataCatalogTableColumn

* feat: add success and error notifications for modelColumn toggle in DataCatalogTableAccordion

* minor fix bug and improve data catalog

* Fix: lint check fail remove unnecessary dependency

* make typescript satisfied
---
 src/components/board/board-source-picker.tsx  |   4 +-
 src/extensions/data-catalog/constant.ts       |   5 +-
 .../data-catalog-table-accordion.tsx          | 100 +++++---
 .../data-catalog-table-column.tsx             |   3 +-
 .../data-catalog/driver-inmemory.ts           |   2 +-
 .../data-catalog/table-metadata-modal.tsx     |   8 +-
 .../data-catalog/virtual-column.tsx           |   2 +-
 .../data-catalog/virtual-join-modal.tsx       | 225 ++++++++----------
 src/outerbase-cloud/api-type.ts               |   4 +-
 src/outerbase-cloud/data-catalog-driver.ts    |   2 +-
 src/outerbase-cloud/util.ts                   |   8 +-
 11 files changed, 188 insertions(+), 175 deletions(-)

diff --git a/src/components/board/board-source-picker.tsx b/src/components/board/board-source-picker.tsx
index 00959e7a..f19cd098 100644
--- a/src/components/board/board-source-picker.tsx
+++ b/src/components/board/board-source-picker.tsx
@@ -52,7 +52,7 @@ export default function BoardSourcePicker({
       }
       setOpen(false);
     },
-    [onChange, sourceDriver, onSchemaLoad]
+    [onChange, sourceDriver]
   );
 
   const previousValue = useRef<string>("");
@@ -82,7 +82,7 @@ export default function BoardSourcePicker({
       .finally(() => {
         setLoadingSchema(false);
       });
-  }, [value]);
+  }, [value, onSchemaLoad, sourceDriver]);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
diff --git a/src/extensions/data-catalog/constant.ts b/src/extensions/data-catalog/constant.ts
index ff1578bb..e804c103 100644
--- a/src/extensions/data-catalog/constant.ts
+++ b/src/extensions/data-catalog/constant.ts
@@ -1,6 +1,7 @@
-export const defaultVirtualColumn = {
+import { OuterbaseDataCatalogVirtualColumnInput } from "@/outerbase-cloud/api-type";
+
+export const defaultVirtualColumn: OuterbaseDataCatalogVirtualColumnInput = {
   body: "",
-  column: "",
   flags: {
     isActive: true,
     isVirtualKey: true,
diff --git a/src/extensions/data-catalog/data-catalog-table-accordion.tsx b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
index bb9096cb..3b28a95b 100644
--- a/src/extensions/data-catalog/data-catalog-table-accordion.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
@@ -17,6 +17,7 @@ import { cn } from "@/lib/utils";
 import { OuterbaseDataCatalogComment } from "@/outerbase-cloud/api-type";
 import { Blend, ChevronDown, Edit3, LucideMoreHorizontal } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
 import DataCatalogTableColumn from "./data-catalog-table-column";
 import DataCatalogDriver from "./driver";
 import TableMetadataModal from "./table-metadata-modal";
@@ -38,11 +39,11 @@ export default function DataCatalogTableAccordion({
   hasDefinitionOnly,
 }: DataCatalogTableAccordionProps) {
   const modelTable = driver.getTable(table.schemaName, table.tableName!);
-  const [open, setOpen] = useState(false);
+  const [collapsible, setCollapsible] = useState(false);
   const [seletedColumn, setSelectedColumn] = useState<
     OuterbaseDataCatalogComment | undefined
   >();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [openVirtualModal, setOpenVirtaulModal] = useState(false);
 
   const onDeletRelationship = useCallback(
@@ -77,6 +78,14 @@ export default function DataCatalogTableAccordion({
           modelColumn.id,
           isVirtual
         )
+        .then(() => {
+          let msg = `${modelColumn.column} is turned ${modelColumn.flags.isActive ? "on" : "off"}`;
+          if (isVirtual) {
+            msg = "Virtual relationship status updated.";
+          }
+          toast.success(msg);
+        })
+        .catch((error) => toast.error(error.message))
         .finally(() => {
           cb && cb();
         });
@@ -107,6 +116,13 @@ export default function DataCatalogTableAccordion({
     return true;
   }, [search, table]);
 
+  const virtualJoins = useMemo(() => {
+    if (modelTable?.virtualJoin && modelTable.virtualJoin.length > 0) {
+      return modelTable.virtualJoin;
+    }
+    return [];
+  }, [modelTable]);
+
   // this will work only toggle check box
   if (hasDefinitionOnly) {
     const columnsDefinition = table.columns
@@ -131,34 +147,41 @@ export default function DataCatalogTableAccordion({
 
   return (
     <>
-      <Dialog open={visible} onOpenChange={setVisible}>
+      <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent>
-          {visible && (
+          {open && (
             <TableMetadataModal
               driver={driver}
               schemaName={table.schemaName}
               tableName={table.tableName!}
               data={tableMetadata}
               onClose={() => {
-                setVisible(false);
+                setOpen(false);
+              }}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={openVirtualModal} onOpenChange={setOpenVirtaulModal}>
+        <DialogContent>
+          {openVirtualModal && (
+            <VirtualJoinModal
+              driver={driver}
+              data={seletedColumn}
+              tableName={table.tableName!}
+              schemaName={table.schemaName}
+              onSuccess={() => setCollapsible(true)}
+              onClose={() => {
+                setOpenVirtaulModal(false);
+                setSelectedColumn(undefined);
               }}
             />
           )}
         </DialogContent>
       </Dialog>
-      <VirtualJoinModal
-        driver={driver}
-        data={seletedColumn}
-        open={openVirtualModal}
-        tableName={table.tableName!}
-        schemaName={table.schemaName}
-        onOpenChange={setOpenVirtaulModal}
-        onClose={() => {
-          setOpenVirtaulModal(false);
-          setSelectedColumn(undefined);
-        }}
-      />
-      <Collapsible open={open} onOpenChange={setOpen}>
+
+      <Collapsible open={collapsible} onOpenChange={setCollapsible}>
         <div className="rounded-xl border border-neutral-200 bg-white/50 p-3 hover:border-neutral-300 hover:bg-white dark:border-neutral-800/50 dark:bg-neutral-900 dark:text-white dark:hover:border-neutral-800 dark:hover:bg-neutral-800">
           <div className="flex p-2">
             <div>
@@ -196,7 +219,7 @@ export default function DataCatalogTableAccordion({
                   <DropdownMenuItem
                     className="gap-1"
                     onClick={() => {
-                      setVisible(true);
+                      setOpen(true);
                     }}
                   >
                     Edit Metadata
@@ -205,6 +228,7 @@ export default function DataCatalogTableAccordion({
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem
+                    disabled={modelTable?.virtualJoin.length === 0}
                     onClick={() => {
                       setOpenVirtaulModal(true);
                       setSelectedColumn(undefined);
@@ -221,7 +245,7 @@ export default function DataCatalogTableAccordion({
                 <ChevronDown
                   className={cn(
                     "h-4 w-4 transform transition-transform duration-200",
-                    open ? "rotate-180" : "rotate-0"
+                    collapsible ? "rotate-180" : "rotate-0"
                   )}
                 />
               </CollapsibleTrigger>
@@ -241,27 +265,25 @@ export default function DataCatalogTableAccordion({
                 />
               );
             })}
-            {modelTable?.virtualJoin && modelTable.virtualJoin.length > 0 && (
+            {virtualJoins.length > 0 && (
               <div className="rounded-xl border border-neutral-200 p-3 hover:bg-white dark:border-neutral-800/50 dark:bg-neutral-950 dark:text-white">
                 <div className="p-3 font-bold">Relationships</div>
-                <div className="">
-                  {modelTable.virtualJoin?.map((column) => {
-                    return (
-                      <VirtualJoinColumn
-                        data={column}
-                        key={column.id}
-                        onEditRelationship={() => {
-                          setOpenVirtaulModal(true);
-                          setSelectedColumn(column);
-                        }}
-                        onToggleHideFromEzql={onToggleHideFromEzql}
-                        onDeletRelatinship={() => {
-                          onDeletRelationship(column.id);
-                        }}
-                      />
-                    );
-                  })}
-                </div>
+                {virtualJoins.map((column) => {
+                  return (
+                    <VirtualJoinColumn
+                      data={column}
+                      key={column.id}
+                      onEditRelationship={() => {
+                        setOpenVirtaulModal(true);
+                        setSelectedColumn(column);
+                      }}
+                      onToggleHideFromEzql={onToggleHideFromEzql}
+                      onDeletRelatinship={() => {
+                        onDeletRelationship(column.id);
+                      }}
+                    />
+                  );
+                })}
               </div>
             )}
           </CollapsibleContent>
diff --git a/src/extensions/data-catalog/data-catalog-table-column.tsx b/src/extensions/data-catalog/data-catalog-table-column.tsx
index 537adf5e..8df3bc54 100644
--- a/src/extensions/data-catalog/data-catalog-table-column.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-column.tsx
@@ -45,6 +45,7 @@ export default function DataCatalogTableColumn({
     table.tableName!,
     column.name
   );
+
   const definition = modelColumn?.body;
 
   const [open, setOpen] = useState(false);
@@ -74,7 +75,7 @@ export default function DataCatalogTableColumn({
     return [];
   }, [modelColumn]);
 
-  if (hasDefinitionOnly && !definition) {
+  if ((hasDefinitionOnly && !definition) || !modelColumn) {
     return null;
   }
 
diff --git a/src/extensions/data-catalog/driver-inmemory.ts b/src/extensions/data-catalog/driver-inmemory.ts
index 9d20197e..ac3dfe38 100644
--- a/src/extensions/data-catalog/driver-inmemory.ts
+++ b/src/extensions/data-catalog/driver-inmemory.ts
@@ -77,7 +77,7 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
             ...(data as unknown as OuterbaseDataCatalogComment),
           });
         }
-      } else {
+      } else if (data.column) {
         table.columns[data.column] = {
           ...table.columns[data.column],
           ...data,
diff --git a/src/extensions/data-catalog/table-metadata-modal.tsx b/src/extensions/data-catalog/table-metadata-modal.tsx
index 0fe96328..00241ceb 100644
--- a/src/extensions/data-catalog/table-metadata-modal.tsx
+++ b/src/extensions/data-catalog/table-metadata-modal.tsx
@@ -14,6 +14,7 @@ import {
 } from "@/outerbase-cloud/api-type";
 import { produce } from "immer";
 import { useCallback, useState } from "react";
+import { toast } from "sonner";
 import DataCatalogDriver from "./driver";
 
 interface DataCatalogTableColumnModalProps {
@@ -85,9 +86,14 @@ export default function TableMetadataModal({
       ...metadataInput,
       alias: metadataInput.alias || tableName,
     } as unknown as OuterbaseDataCatalogVirtualColumnInput;
-
     driver
       .updateTable(schemaName, tableName, metaInput, data?.id)
+      .then(() => {
+        toast.success(`Metatdata ${data?.id ? "updated" : "created"}`);
+      })
+      .catch((error) => {
+        toast.error(error.message);
+      })
       .finally(() => {
         setLoading(false);
         onClose();
diff --git a/src/extensions/data-catalog/virtual-column.tsx b/src/extensions/data-catalog/virtual-column.tsx
index 12ea1e94..b6520061 100644
--- a/src/extensions/data-catalog/virtual-column.tsx
+++ b/src/extensions/data-catalog/virtual-column.tsx
@@ -68,7 +68,7 @@ export default function VirtualJoinColumn({
         {data.column}
       </div>
       <div className="flex w-[150px] items-center p-2 text-base">
-        {data.table}
+        {data.virtualKeyTable}
       </div>
       <div className="flex w-[150px] items-center p-2 text-base">
         {data.body}
diff --git a/src/extensions/data-catalog/virtual-join-modal.tsx b/src/extensions/data-catalog/virtual-join-modal.tsx
index 11b768fd..40f1c993 100644
--- a/src/extensions/data-catalog/virtual-join-modal.tsx
+++ b/src/extensions/data-catalog/virtual-join-modal.tsx
@@ -2,8 +2,6 @@ import TableColumnCombobox from "@/components/gui/table-combobox/TableColumnComb
 import TableCombobox from "@/components/gui/table-combobox/TableCombobox";
 import { Button } from "@/components/orbit/button";
 import {
-  Dialog,
-  DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
@@ -15,60 +13,53 @@ import {
   OuterbaseDataCatalogVirtualColumnInput,
 } from "@/outerbase-cloud/api-type";
 import { produce } from "immer";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
 import { defaultVirtualColumn } from "./constant";
 import DataCatalogDriver from "./driver";
 
 interface Props {
-  open: boolean;
   driver: DataCatalogDriver;
   schemaName: string;
   tableName: string;
   data?: OuterbaseDataCatalogComment;
   onClose: () => void;
-  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
 }
 
 export default function VirtualJoinModal({
-  open,
   tableName,
   schemaName,
   driver,
   data,
   onClose,
-  onOpenChange,
+  onSuccess,
 }: Props) {
   const [loading, setLoading] = useState(false);
   const [virtualColumnInput, setVirtaulColumnInput] =
     useState<OuterbaseDataCatalogVirtualColumnInput>(() => {
-      return {
-        ...defaultVirtualColumn,
-        schema: schemaName,
-        virtual_key_schema: schemaName,
-        virtual_key_table: tableName,
-      };
+      if (data) {
+        return {
+          ...data,
+          body: data.body,
+          flags: data.flags,
+          sample_data: data.sample_data,
+          schema: data.schema,
+          table: data.table,
+          virtual_key_column: data.virtualKeyColumn,
+          virtual_key_schema: data.virtualKeySchema,
+          virtual_key_table: data.virtualKeyTable,
+        };
+      } else {
+        return {
+          ...defaultVirtualColumn,
+          schema: schemaName,
+          table: tableName,
+          virtual_key_schema: schemaName,
+        };
+      }
     });
 
-  const clear = useCallback(() => {
-    setVirtaulColumnInput(defaultVirtualColumn);
-  }, []);
-
-  useEffect(() => {
-    if (data) {
-      setVirtaulColumnInput({
-        body: data.body,
-        column: data.column,
-        flags: data.flags,
-        sample_data: data.sample_data,
-        schema: data.schema,
-        table: data.table,
-        virtual_key_column: data.virtualKeyColumn,
-        virtual_key_schema: data.virtualKeySchema,
-        virtual_key_table: data.virtualKeyTable,
-      });
-    }
-  }, [data]);
-
   const createUpdateVirtualJoin = useCallback(() => {
     if (!driver) return;
     setLoading(true);
@@ -77,60 +68,89 @@ export default function VirtualJoinModal({
         schemaName,
         tableName,
         virtualColumnInput,
-        data ? data.id : undefined,
+        data ? data.id : undefined, // when there is data.ID that mean update column
         true // make it true for update update virtual column
       )
-      .then()
-      .catch()
+      .then(() => {
+        onSuccess();
+        toast.success(`Virtaul join ${data?.id ? "updated" : "created"}`);
+      })
+      .catch((error) => toast.error(error.message))
       .finally(() => {
         setLoading(false);
         onClose();
-        clear();
       });
-  }, [driver, schemaName, tableName, virtualColumnInput, data, clear, onClose]);
+  }, [
+    driver,
+    schemaName,
+    onSuccess,
+    tableName,
+    virtualColumnInput,
+    data,
+    onClose,
+  ]);
 
   const disabled = useMemo(
-    () =>
-      !virtualColumnInput.body ||
-      !virtualColumnInput.table ||
-      !virtualColumnInput.column,
+    () => !virtualColumnInput.body || !virtualColumnInput.virtual_key_table,
     [virtualColumnInput]
   );
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(open) => {
-        if (!open) {
-          setVirtaulColumnInput({
-            ...defaultVirtualColumn,
-            schema: schemaName,
-            virtual_key_schema: schemaName,
-            virtual_key_table: tableName,
-          });
-        }
-        onOpenChange(open);
-      }}
-    >
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            {data ? "Edit" : "Add Relationship"} to {tableName}
-          </DialogTitle>
-        </DialogHeader>
-        <DialogDescription className="text-base">
-          Use virtual relationships to connect fields that don&apos;t have a
-          direct foreign key link. For example, if two tables should be related
-          by email or title but don&apos;t have a formal foreign key, use these
-          virtual relationships to link them.
-        </DialogDescription>
-        <div className="mt-2 flex flex-col gap-4">
-          <div className="flex flex-col gap-2">
-            <Label>Column</Label>
+    <>
+      <DialogHeader>
+        <DialogTitle>
+          {data ? "Edit" : "Add Relationship"} to {tableName}
+        </DialogTitle>
+      </DialogHeader>
+      <DialogDescription className="text-base">
+        Use virtual relationships to connect fields that don&apos;t have a
+        direct foreign key link. For example, if two tables should be related by
+        email or title but don&apos;t have a formal foreign key, use these
+        virtual relationships to link them.
+      </DialogDescription>
+      <div className="mt-2 flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <Label>Column</Label>
+        </div>
+        <TableColumnCombobox
+          value={virtualColumnInput.column}
+          schemaName={schemaName}
+          tableName={tableName}
+          onChange={(value) => {
+            setVirtaulColumnInput((prev) =>
+              produce(prev, (draft) => {
+                draft.column = value;
+                draft.virtual_key_column = value;
+              })
+            );
+          }}
+        />
+
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between gap-2">
+            <Label>Relationship Table</Label>
+          </div>
+          <TableCombobox
+            value={virtualColumnInput.virtual_key_table}
+            schemaName={schemaName}
+            onChange={(value) => {
+              setVirtaulColumnInput((prev) =>
+                produce(prev, (draft) => {
+                  draft.virtual_key_table = value;
+                  draft.body = draft.body !== value ? "" : draft.body;
+                })
+              );
+            }}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between gap-2">
+            <Label>Relationship Column</Label>
           </div>
           <TableColumnCombobox
             value={virtualColumnInput.body}
             schemaName={schemaName}
-            tableName={tableName}
+            tableName={virtualColumnInput.virtual_key_table}
             onChange={(value) => {
               setVirtaulColumnInput((prev) =>
                 produce(prev, (draft) => {
@@ -139,57 +159,20 @@ export default function VirtualJoinModal({
               );
             }}
           />
-
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center justify-between gap-2">
-              <Label>Relationship Table</Label>
-            </div>
-            <TableCombobox
-              value={virtualColumnInput.table}
-              schemaName={schemaName}
-              onChange={(value) => {
-                setVirtaulColumnInput((prev) =>
-                  produce(prev, (draft) => {
-                    draft.table = value;
-                    draft.column = draft.column !== value ? "" : draft.column;
-                  })
-                );
-              }}
-            />
-          </div>
-
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center justify-between gap-2">
-              <Label>Relationship Column</Label>
-            </div>
-            <TableColumnCombobox
-              value={virtualColumnInput.column}
-              schemaName={schemaName}
-              tableName={virtualColumnInput.table}
-              onChange={(value) => {
-                setVirtaulColumnInput((prev) =>
-                  produce(prev, (draft) => {
-                    draft.column = value;
-                    draft.virtual_key_column = value;
-                  })
-                );
-              }}
-            />
-          </div>
         </div>
+      </div>
 
-        <DialogFooter>
-          <Button
-            loading={loading}
-            variant="ghost"
-            disabled={disabled}
-            onClick={createUpdateVirtualJoin}
-            title={data ? "Edit Relationship" : "Create Virtual Join"}
-          />
+      <DialogFooter>
+        <Button
+          loading={loading}
+          variant="secondary"
+          disabled={disabled}
+          onClick={createUpdateVirtualJoin}
+          title={data ? "Edit Relationship" : "Create Relationship"}
+        />
 
-          <div className="flex-1" />
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        <div className="flex-1" />
+      </DialogFooter>
+    </>
   );
 }
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index 61c9e54a..8cbb66b8 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -249,12 +249,12 @@ export interface OuterbaseDefinitionInput {
 
 export interface OuterbaseDataCatalogVirtualColumnInput {
   body: string;
-  column: string;
+  column?: string;
   flags: OuterbaseDataCatalogFlag;
   sample_data: string;
   schema: string;
   table: string;
-  virtual_key_column: string;
+  virtual_key_column?: string;
   virtual_key_schema: string;
   virtual_key_table: string;
 }
diff --git a/src/outerbase-cloud/data-catalog-driver.ts b/src/outerbase-cloud/data-catalog-driver.ts
index 4835610f..78282827 100644
--- a/src/outerbase-cloud/data-catalog-driver.ts
+++ b/src/outerbase-cloud/data-catalog-driver.ts
@@ -105,7 +105,7 @@ export default class DataCatalogOuterbaseDriver implements DataCatalogDriver {
           } else {
             table.virtualJoin?.push(result);
           }
-        } else {
+        } else if (data.column) {
           table.columns[data.column] = {
             ...table.columns[data.column],
             ...result,
diff --git a/src/outerbase-cloud/util.ts b/src/outerbase-cloud/util.ts
index 6aa00361..13c1f15f 100644
--- a/src/outerbase-cloud/util.ts
+++ b/src/outerbase-cloud/util.ts
@@ -28,13 +28,14 @@ export function transformOuterbaseSchema(
 
         columns: schema.columns.reduce(
           (columnsAcc, col) => {
-            const comment = comments.find(
-              (c) =>
+            const comment = comments.find((c) => {
+              return (
                 c.schema === schema.schema &&
                 c.table === schema.name &&
                 c.column === col.name &&
                 !c.flags.isVirtualKey
-            );
+              );
+            });
 
             if (comment) {
               columnsAcc[col.name] = comment;
@@ -49,7 +50,6 @@ export function transformOuterbaseSchema(
           (c) =>
             c.schema === schema.schema &&
             c.table === schema.name &&
-            c.virtualKeyColumn &&
             c.flags.isVirtualKey
         ),
         metadata: tableMetadata,

From be00aa1686552e298348ef756ecb9db09f0971e9 Mon Sep 17 00:00:00 2001
From: keppere <50957820+keppere@users.noreply.github.com>
Date: Fri, 14 Feb 2025 19:04:20 +0700
Subject: [PATCH 058/106] Enhance chart (#363)

* fix: update chart data to existing chart instance

* chore: change fillVariables to use from @outerbase/sdk-transform to version 1.0.4

* feat: show sql error in BoardSqlErrorLog panel

* feat: display SQL error messages in BoardChart

* feat: add chart type suggestion feature in BoardChartEditor

* fix: bind text area value to chart options in EditChartMenu

* refact: redesign chart suggestion

* fix: handle optional suggestedChartType in ChartTypeSelection
---
 package-lock.json                             |   9 +-
 package.json                                  |   2 +-
 src/app/storybook/chart-editor/page.tsx       |   1 +
 src/components/board/board-auto-value.ts      | 163 +++++++++++++++++-
 src/components/board/board-chart-editor.tsx   |  39 ++---
 src/components/board/board-chart.tsx          |  28 ++-
 src/components/board/board-sql-error-log.tsx  |   9 +
 src/components/chart/chart-type-button.tsx    |  23 ++-
 src/components/chart/chart-type-selection.tsx |  12 ++
 src/components/chart/chart-type.ts            |   1 +
 .../chart/echart-options-builder.ts           |   2 +-
 src/components/chart/edit-chart-menu.tsx      |   3 +-
 src/lib/sql/fill-variables.ts                 |  28 ---
 13 files changed, 232 insertions(+), 88 deletions(-)
 create mode 100644 src/components/board/board-sql-error-log.tsx
 delete mode 100644 src/lib/sql/fill-variables.ts

diff --git a/package-lock.json b/package-lock.json
index dd743796..2a6761c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@mdx-js/loader": "^3.0.1",
         "@mdx-js/react": "^3.0.1",
         "@next/mdx": "^14.2.4",
-        "@outerbase/sdk-transform": "^1.0.1",
+        "@outerbase/sdk-transform": "^1.0.4",
         "@phosphor-icons/react": "^2.1.7",
         "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-avatar": "^1.0.4",
@@ -4513,10 +4513,9 @@
       "license": "MIT"
     },
     "node_modules/@outerbase/sdk-transform": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@outerbase/sdk-transform/-/sdk-transform-1.0.1.tgz",
-      "integrity": "sha512-WxAf3oQS92JEQARrpEv66q2hdo8HMI5Gj/8FTJ1szEK0g0A4NlQSFPXOlLAZdJXz7AnQO8Q5UpRavCtzDJCDEg==",
-      "license": "MIT"
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@outerbase/sdk-transform/-/sdk-transform-1.0.4.tgz",
+      "integrity": "sha512-9qHALbDPY6Hb1V+VinufxP/yvUAbbC8OiJgA0mheQAelGwgb7uUyLrJCgLCCwv+ST/abjxvQSrzPydK77ZBm2A=="
     },
     "node_modules/@phosphor-icons/react": {
       "version": "2.1.7",
diff --git a/package.json b/package.json
index 50883240..b747d14b 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.4",
-    "@outerbase/sdk-transform": "^1.0.1",
+    "@outerbase/sdk-transform": "^1.0.4",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
diff --git a/src/app/storybook/chart-editor/page.tsx b/src/app/storybook/chart-editor/page.tsx
index 066c39b3..e06eddd5 100644
--- a/src/app/storybook/chart-editor/page.tsx
+++ b/src/app/storybook/chart-editor/page.tsx
@@ -51,6 +51,7 @@ const data: ChartData[] = [
 ];
 
 const lineChartValue: ChartValue = {
+  suggestedChartType: [],
   connection_id: null,
   created_at: "2025-01-31T08:44:04.868Z",
   id: "94019f17-a1e0-4db2-b89e-4457cbed3ce4",
diff --git a/src/components/board/board-auto-value.ts b/src/components/board/board-auto-value.ts
index 82568669..3b2682e0 100644
--- a/src/components/board/board-auto-value.ts
+++ b/src/components/board/board-auto-value.ts
@@ -1,6 +1,12 @@
 import { DatabaseResultSet } from "@/drivers/base-driver";
 import { produce } from "immer";
-import { ChartValue, DEFAULT_THEME, THEMES } from "../chart/chart-type";
+import { isDate } from "lodash";
+import {
+  ChartType,
+  ChartValue,
+  DEFAULT_THEME,
+  THEMES,
+} from "../chart/chart-type";
 import { generateGradientColors } from "../chart/echart-options-builder";
 
 export function createAutoBoardChartValue(
@@ -15,10 +21,11 @@ export function createAutoBoardChartValue(
       const columns = newResult.headers.map((header) => header.name);
 
       if (newResult.rows.length > 0) {
-        const xAxisKeys = [];
-        const yAxisKeys = [];
+        const xAxisKeys: string[] = [];
+        const yAxisKeys: string[] = [];
         const firstRecord = newResult.rows[0];
         const columnType = getColumnType(firstRecord);
+
         // study each column value and try to guess the type
         if (columnType) {
           for (const column of columns) {
@@ -28,6 +35,9 @@ export function createAutoBoardChartValue(
               xAxisKeys.push(column);
             }
           }
+          if (xAxisKeys.length === 0 && yAxisKeys.length > 1) {
+            xAxisKeys.push(yAxisKeys.shift() as string);
+          }
         } else {
           // if there is no column type, we will just use the first column as xAxisKey
           for (let i = 0; i < newResult.headers.length; i++) {
@@ -39,9 +49,26 @@ export function createAutoBoardChartValue(
           }
         }
 
-        draft.params.options.xAxisKey =
-          xAxisKeys.length > 0 ? xAxisKeys[0] : "";
-        draft.params.options.yAxisKeys = yAxisKeys;
+        if (draft.params.options.xAxisKey === "") {
+          draft.params.options.xAxisKey =
+            xAxisKeys.length > 0 ? xAxisKeys[0] : "";
+        }
+
+        if (draft.params.options.yAxisKeys.length === 0) {
+          draft.params.options.yAxisKeys = yAxisKeys;
+        }
+
+        const suggestedChartTypes = suggestChartType(
+          xAxisKeys,
+          yAxisKeys,
+          newResult.rows
+        );
+
+        draft.suggestedChartType = suggestedChartTypes;
+        if (draft.type === undefined) {
+          draft.type = suggestedChartTypes[0];
+          draft.params.type = suggestedChartTypes[0];
+        }
       }
 
       // initial yAxisKeyColors
@@ -96,3 +123,127 @@ function getColumnType(firstRecord: any): Record<string, string> {
   }
   return columnTypes;
 }
+
+function suggestChartType(
+  xAxisKeys: string[],
+  yAxisKeys: string[],
+  rows: any[]
+): ChartType[] {
+  const suggestedChartTypes: ChartType[] = [];
+
+  if (isSuitableForSingleValue(rows)) {
+    suggestedChartTypes.push("single_value");
+  }
+  if (isSuitableForPieChart(xAxisKeys, yAxisKeys, rows)) {
+    suggestedChartTypes.push("pie");
+  }
+  if (isSuitableForLineChart(xAxisKeys, yAxisKeys, rows)) {
+    suggestedChartTypes.push("line");
+  }
+  if (isSuitableForColumnChart(xAxisKeys, yAxisKeys, rows)) {
+    suggestedChartTypes.push("column");
+  }
+  if (isSuitableForBarChart(xAxisKeys, yAxisKeys, rows)) {
+    suggestedChartTypes.push("bar");
+  }
+  if (isSuitableForFunnelChart(xAxisKeys, yAxisKeys, rows)) {
+    suggestedChartTypes.push("funnel");
+  }
+  if (isSuitableForScatterChart(xAxisKeys, yAxisKeys, rows)) {
+    suggestedChartTypes.push("scatter");
+  }
+  if (isSuitableForTable(xAxisKeys, yAxisKeys, rows)) {
+    suggestedChartTypes.push("table");
+  }
+  if (isSuitTableForRadarChart(xAxisKeys, yAxisKeys, rows)) {
+    suggestedChartTypes.push("radar");
+  }
+  if (suggestedChartTypes.length === 0) {
+    suggestedChartTypes.push("line");
+  }
+  return suggestedChartTypes;
+}
+
+function isSuitableForLineChart(
+  xAxisKeys: string[],
+  yAxisKeys: string[],
+  rows: any[]
+): boolean {
+  if (rows.length < 20) return false;
+  const hasTimeSeries = xAxisKeys.some((key) => isDate(rows[0][key]));
+  return hasTimeSeries && yAxisKeys.length > 0;
+}
+
+function isSuitableForColumnChart(
+  xAxisKeys: string[],
+  yAxisKeys: string[],
+  rows: any[]
+): boolean {
+  if (rows.length >= 20) return false;
+  return xAxisKeys.length > 0 && yAxisKeys.length > 0 && rows.length > 1;
+}
+
+function isSuitableForBarChart(
+  xAxisKeys: string[],
+  yAxisKeys: string[],
+  rows: any[]
+): boolean {
+  if (rows.length >= 20) return false;
+  return xAxisKeys.length === 1 && yAxisKeys.length === 1 && rows.length > 1;
+}
+
+function isSuitableForPieChart(
+  xAxisKeys: string[],
+  yAxisKeys: string[],
+  rows: any[]
+): boolean {
+  return xAxisKeys.length === 1 && yAxisKeys.length === 1 && rows.length > 1;
+}
+
+function isSuitableForFunnelChart(
+  xAxisKeys: string[],
+  yAxisKeys: string[],
+  rows: any[]
+): boolean {
+  return isSuitableForPieChart(xAxisKeys, yAxisKeys, rows);
+}
+
+function isSuitableForScatterChart(
+  xAxisKeys: string[],
+  yAxisKeys: string[],
+  rows: any[]
+): boolean {
+  if (xAxisKeys.length === 1 && yAxisKeys.length === 1 && rows.length > 1) {
+    if (
+      typeof rows[0][xAxisKeys[0]] === "number" &&
+      typeof rows[0][yAxisKeys[0]] === "number"
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function isSuitableForTable(
+  xAxisKeys: string[],
+  yAxisKeys: string[],
+  rows: any[]
+): boolean {
+  if (rows.length >= 20 || xAxisKeys.length + yAxisKeys.length > 2) return true;
+  return false;
+}
+
+function isSuitableForSingleValue(rows: any[]): boolean {
+  return rows.length === 1;
+}
+
+function isSuitTableForRadarChart(
+  xAxisKeys: string[],
+  yAxisKeys: string[],
+  rows: any[]
+): boolean {
+  if (yAxisKeys.length > 2 && rows.length > 1) {
+    return true;
+  }
+  return false;
+}
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index 7153a7e5..b88fe170 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -1,16 +1,11 @@
 import { generateAutoComplete } from "@/context/schema-provider";
-import {
-  DatabaseResultSet,
-  DatabaseSchemas,
-  SupportedDialect,
-} from "@/drivers/base-driver";
-import { fillVariables } from "@/lib/sql/fill-variables";
-import { tokenizeSql } from "@/lib/sql/tokenizer";
+import { DatabaseResultSet, DatabaseSchemas } from "@/drivers/base-driver";
+
+import { fillVariables, SupportedDialect } from "@outerbase/sdk-transform";
 import { ChartBar, Play, Table } from "@phosphor-icons/react";
 import { produce } from "immer";
 import { useTheme } from "next-themes";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
 import { DashboardProps } from ".";
 import Chart from "../chart";
 import { ChartValue } from "../chart/chart-type";
@@ -23,6 +18,7 @@ import { MenuBar } from "../orbit/menu-bar";
 import { createAutoBoardChartValue } from "./board-auto-value";
 import { useBoardContext } from "./board-provider";
 import BoardSourcePicker from "./board-source-picker";
+import BoardSqlErrorLog from "./board-sql-error-log";
 
 export default function BoardChartEditor({
   onChange,
@@ -64,6 +60,7 @@ export default function BoardChartEditor({
   const [schema, setSchema] = useState<DatabaseSchemas>({});
   const [selectedSchema, setSelectedSchema] = useState("");
   const [displayType, setDisplayType] = useState("chart");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const [loading, setLoading] = useState(false);
   const [saveLoading, setSaveLoading] = useState(false);
@@ -91,17 +88,13 @@ export default function BoardChartEditor({
     const sql = value?.params.layers[0].sql ?? "";
     const sourceId = value?.source_id ?? "";
     if (sourceDriver && sourceId) {
-      const dialect =
-        sourceDriver.sourceList().find((s) => s.id === sourceId)?.type ??
-        "sqlite";
-
-      const sqlTokens = tokenizeSql(sql, dialect as SupportedDialect);
+      const dialect = (sourceDriver.sourceList().find((s) => s.id === sourceId)
+        ?.type ?? "sqlite") as SupportedDialect;
 
-      const sqlWithVariables = fillVariables(sqlTokens, resolvedFilterValue)
-        .map((t) => t.value)
-        .join("");
+      const sqlWithVariables = fillVariables(sql, resolvedFilterValue, dialect);
 
       setLoading(true);
+      setErrorMessage(null);
       sourceDriver
         .query(sourceId, sqlWithVariables)
         .then((newResult) => {
@@ -115,8 +108,7 @@ export default function BoardChartEditor({
           initialChartValue(newResult, sql);
         })
         .catch((e) => {
-          if (e instanceof Error) toast(e.message);
-          else toast("Unexpected error");
+          setErrorMessage(e.toString());
         })
         .finally(() => {
           setLoading(false);
@@ -196,10 +188,13 @@ export default function BoardChartEditor({
     <div className="flex flex-1 overflow-hidden border-t">
       <div className="flex flex-1 flex-col overflow-hidden">
         <div className="h-1/2 overflow-x-hidden border-b">
-          {result && displayType === "table" && <ResultTable data={result} />}
-          {result && displayType === "chart" && (
+          {result && displayType === "table" && !errorMessage && (
+            <ResultTable data={result} />
+          )}
+          {result && displayType === "chart" && !errorMessage && (
             <Chart data={result.getAllRows().map((r) => r.raw)} value={value} />
           )}
+          {errorMessage && <BoardSqlErrorLog value={errorMessage} />}
         </div>
         <div className="h-1/2 overflow-x-hidden">
           <div className="flex gap-2 border-b px-4 py-2">
@@ -218,7 +213,6 @@ export default function BoardChartEditor({
               onSchemaLoad={(loadedSchema) => {
                 setSchema(loadedSchema.schema);
                 setSelectedSchema(loadedSchema.selectedSchema ?? "");
-                console.log(loadedSchema);
               }}
             />
 
@@ -304,7 +298,8 @@ export default function BoardChartEditor({
 
 const NEW_CHART_EMPTY_VALUE: ChartValue = {
   model: "chart",
-  type: "line",
+  type: undefined,
+  suggestedChartType: [],
   name: "New Chart",
   params: {
     type: "line",
diff --git a/src/components/board/board-chart.tsx b/src/components/board/board-chart.tsx
index 12785c00..60676844 100644
--- a/src/components/board/board-chart.tsx
+++ b/src/components/board/board-chart.tsx
@@ -1,31 +1,27 @@
-import { SupportedDialect } from "@/drivers/base-driver";
-import { fillVariables } from "@/lib/sql/fill-variables";
-import { tokenizeSql } from "@/lib/sql/tokenizer";
+import { fillVariables, SupportedDialect } from "@outerbase/sdk-transform";
 import { useEffect, useMemo, useRef, useState } from "react";
 import Chart from "../chart";
 import { ChartValue } from "../chart/chart-type";
 import { useBoardContext } from "./board-provider";
+import BoardSqlErrorLog from "./board-sql-error-log";
 
 export default function BoardChart({ value }: { value: ChartValue }) {
   const [data, setData] = useState<Record<string, unknown>[] | null>(null);
   const loaderRef = useRef<HTMLDivElement>(null);
   const { sources, lastRunTimestamp, resolvedFilterValue } = useBoardContext();
   const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const sql = value.params.layers[0].sql;
   const sourceId = value.source_id;
 
   const finalSql = useMemo(() => {
     return fillVariables(
-      tokenizeSql(
-        sql,
-        (sources?.sourceList().find((s) => s.id === sourceId)?.type ??
-          "sqlite") as unknown as SupportedDialect
-      ),
-      resolvedFilterValue
-    )
-      .map((t) => t.value)
-      .join("");
+      sql,
+      resolvedFilterValue,
+      (sources?.sourceList().find((s) => s.id === sourceId)?.type ??
+        "sqlite") as unknown as SupportedDialect
+    );
   }, [sql, sources, sourceId, resolvedFilterValue]);
 
   useEffect(() => {
@@ -34,6 +30,7 @@ export default function BoardChart({ value }: { value: ChartValue }) {
     }
 
     setLoading(true);
+    setErrorMessage(null);
 
     sources
       .query(sourceId, finalSql)
@@ -41,7 +38,7 @@ export default function BoardChart({ value }: { value: ChartValue }) {
         setData(v.rows);
       })
       .catch((e) => {
-        console.error(e);
+        setErrorMessage(e.toString());
       })
       .finally(() => {
         setLoading(false);
@@ -78,9 +75,10 @@ export default function BoardChart({ value }: { value: ChartValue }) {
           ></div>
         </div>
       )}
-      {data ? (
+      {data && !errorMessage && (
         <Chart className="h-full w-full" value={value} data={data} />
-      ) : null}
+      )}
+      {errorMessage && <BoardSqlErrorLog value={errorMessage} />}
     </>
   );
 }
diff --git a/src/components/board/board-sql-error-log.tsx b/src/components/board/board-sql-error-log.tsx
new file mode 100644
index 00000000..48e92b37
--- /dev/null
+++ b/src/components/board/board-sql-error-log.tsx
@@ -0,0 +1,9 @@
+interface BoardSqlErrorLogProps {
+  value: string;
+}
+
+export default function BoardSqlErrorLog({ value }: BoardSqlErrorLogProps) {
+  return (
+    <div className="mt-2 mb-2 w-full p-2 font-mono text-red-500">{value}</div>
+  );
+}
diff --git a/src/components/chart/chart-type-button.tsx b/src/components/chart/chart-type-button.tsx
index a7cc79b8..c1dd836c 100644
--- a/src/components/chart/chart-type-button.tsx
+++ b/src/components/chart/chart-type-button.tsx
@@ -5,6 +5,7 @@ interface ChartTypeButtonProps {
   isActive: boolean;
   onClick: () => void;
   tooltipText: string;
+  suggested: boolean;
 }
 
 export function ChartTypeButton({
@@ -12,16 +13,20 @@ export function ChartTypeButton({
   onClick,
   isActive,
   icon,
+  suggested,
 }: ChartTypeButtonProps) {
+  const className = suggested ? "border border-green-400 rounded-lg" : "";
   return (
-    <Button
-      variant={isActive ? "primary" : "secondary"}
-      size="lg"
-      shape="square"
-      onClick={onClick}
-      title={tooltipText}
-    >
-      {icon}
-    </Button>
+    <div className={className}>
+      <Button
+        variant={isActive ? "primary" : "secondary"}
+        size="lg"
+        shape="square"
+        onClick={onClick}
+        title={tooltipText}
+      >
+        {icon}
+      </Button>
+    </div>
   );
 }
diff --git a/src/components/chart/chart-type-selection.tsx b/src/components/chart/chart-type-selection.tsx
index 4c4da0a4..c75a0c2e 100644
--- a/src/components/chart/chart-type-selection.tsx
+++ b/src/components/chart/chart-type-selection.tsx
@@ -37,6 +37,7 @@ export default function ChartTypeSelection({
             });
           }}
           tooltipText="Line"
+          suggested={value.suggestedChartType?.includes("line") || false}
         />
         <ChartTypeButton
           icon={<ChartBar />}
@@ -49,6 +50,7 @@ export default function ChartTypeSelection({
             });
           }}
           tooltipText="Column"
+          suggested={value.suggestedChartType?.includes("column") || false}
         />
         <ChartTypeButton
           icon={<ChartBarHorizontal />}
@@ -61,6 +63,7 @@ export default function ChartTypeSelection({
             });
           }}
           tooltipText="Bar"
+          suggested={value.suggestedChartType?.includes("bar") || false}
         />
         <ChartTypeButton
           icon={<ChartScatter />}
@@ -73,6 +76,7 @@ export default function ChartTypeSelection({
             });
           }}
           tooltipText="scatter"
+          suggested={value.suggestedChartType?.includes("scatter") || false}
         />
         <ChartTypeButton
           icon={<TextT />}
@@ -85,6 +89,7 @@ export default function ChartTypeSelection({
             });
           }}
           tooltipText="Text"
+          suggested={value.suggestedChartType?.includes("text") || false}
         />
         <ChartTypeButton
           icon={<NumberCircleOne weight="bold" />}
@@ -97,6 +102,9 @@ export default function ChartTypeSelection({
             });
           }}
           tooltipText="Single Value"
+          suggested={
+            value.suggestedChartType?.includes("single_value") || false
+          }
         />
         <ChartTypeButton
           icon={<Table />}
@@ -109,6 +117,7 @@ export default function ChartTypeSelection({
             });
           }}
           tooltipText="Table"
+          suggested={value.suggestedChartType?.includes("table") || false}
         />
         <ChartTypeButton
           icon={<ChartPieSlice weight="bold" />}
@@ -121,6 +130,7 @@ export default function ChartTypeSelection({
             });
           }}
           tooltipText="Pie"
+          suggested={value.suggestedChartType?.includes("pie") || false}
         />
         <ChartTypeButton
           icon={<ChartPolar />}
@@ -133,6 +143,7 @@ export default function ChartTypeSelection({
             });
           }}
           tooltipText="Radar"
+          suggested={value.suggestedChartType?.includes("radar") || false}
         />
         <ChartTypeButton
           icon={<Funnel />}
@@ -145,6 +156,7 @@ export default function ChartTypeSelection({
             });
           }}
           tooltipText="Funnel"
+          suggested={value.suggestedChartType?.includes("funnel") || false}
         />
       </div>
     </section>
diff --git a/src/components/chart/chart-type.ts b/src/components/chart/chart-type.ts
index 2f277e66..514b6737 100644
--- a/src/components/chart/chart-type.ts
+++ b/src/components/chart/chart-type.ts
@@ -66,6 +66,7 @@ export interface ChartValue {
   params: ChartParams;
   source_id?: string;
   type?: ChartType;
+  suggestedChartType?: ChartType[];
   updated_at?: string;
   workspace_id?: string;
   description?: string;
diff --git a/src/components/chart/echart-options-builder.ts b/src/components/chart/echart-options-builder.ts
index fbe3c634..dfe52b6a 100644
--- a/src/components/chart/echart-options-builder.ts
+++ b/src/components/chart/echart-options-builder.ts
@@ -419,7 +419,7 @@ export default class EchartOptionsBuilder {
   }
 }
 
-function isDate(dateString: string): boolean {
+export function isDate(dateString: string): boolean {
   if (!isNaN(Number(dateString))) {
     // this is number
     return false;
diff --git a/src/components/chart/edit-chart-menu.tsx b/src/components/chart/edit-chart-menu.tsx
index 74c7dc7e..dda1dbb3 100644
--- a/src/components/chart/edit-chart-menu.tsx
+++ b/src/components/chart/edit-chart-menu.tsx
@@ -204,6 +204,7 @@ export default function EditChartMenu({
         <p className="mb-1.5 text-sm font-bold opacity-70">Text</p>
         <textarea
           className="h-[200px] w-full rounded-md border p-2"
+          value={value.params.options.text}
           onChange={(v) =>
             onChange((prev) => {
               return produce(prev, (draft) => {
@@ -214,7 +215,7 @@ export default function EditChartMenu({
         />
       </div>
     );
-  }, [onChange, value.type]);
+  }, [onChange, value.params.options.text, value.type]);
 
   const textColorSection = useMemo(() => {
     return (
diff --git a/src/lib/sql/fill-variables.ts b/src/lib/sql/fill-variables.ts
deleted file mode 100644
index 54190c4b..00000000
--- a/src/lib/sql/fill-variables.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { escapeSqlValue } from "@/drivers/sqlite/sql-helper";
-import { Token } from "./tokenizer";
-
-export function fillVariables(
-  tokens: Token[],
-  variables: Record<string, unknown>
-): Token[] {
-  return tokens.map((token) => {
-    let placeholder = "";
-    if (token.type === "PLACEHOLDER") {
-      placeholder = token.value.slice(1);
-    } else if (token.type === "OUTERBASE_PLACEHOLDER") {
-      placeholder = token.value.slice(2, -2);
-    }
-    if (placeholder === "") return token;
-
-    const variableValue = variables[placeholder];
-
-    if (variableValue === undefined) {
-      throw new Error(`Variable ${placeholder} is not defined`);
-    }
-
-    return {
-      type: token.type,
-      value: escapeSqlValue(variableValue),
-    };
-  });
-}

From c0ba8e94bd29b1db015f52f38f78bd41fe172163 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Fri, 14 Feb 2025 22:08:33 +0700
Subject: [PATCH 059/106] Redesign main page (#362)

* redesign main page

* add more design

* add new resource

* add more breakpoint

* another update

* make navigation layout

* allow user to switch namespace

* add workspace design
---
 public/assets/clouds.jpg                      | Bin 0 -> 137757 bytes
 public/assets/sat.png                         | Bin 0 -> 35596 bytes
 src/app/(dark-only)/signin/page.tsx           |  14 +-
 .../account/account-footer.tsx                |   0
 .../account/editor-theme.tsx                  |   0
 .../{w/[workspaceId] => }/account/page.tsx    |  10 +-
 .../account/two-factor-auth.tsx               |   0
 .../account/user-avatar.tsx                   |   0
 .../account/user-form-input.tsx               |   0
 src/app/(outerbase)/nav-header.tsx            |  35 +++
 src/app/(outerbase)/nav-layout.tsx            | 104 +++++++
 src/app/(outerbase)/nav-profile.tsx           |   4 +-
 src/app/(outerbase)/nav-signin-banner.tsx     |  53 ++++
 src/app/(outerbase)/new-resource-button.tsx   | 206 +++++++++++++
 src/app/(outerbase)/page.tsx                  |  35 +--
 src/app/(outerbase)/recent-page.tsx           |  83 ++++++
 src/app/(outerbase)/resource-card-loading.tsx |  13 +
 src/app/(outerbase)/resource-item-helper.tsx  |  87 ++++++
 src/app/(outerbase)/sidebar-profile.tsx       | 125 ++++++++
 .../w/[workspaceId]/board/[boardId]/page.tsx  |  18 +-
 .../w/[workspaceId]/page.backup.tsx           | 222 ++++++++++++++
 src/app/(outerbase)/w/[workspaceId]/page.tsx  | 274 +++++-------------
 src/app/(outerbase)/workspace-provider.tsx    |   2 +-
 src/app/globals.css                           |  26 ++
 src/components/orbit/banner/index.tsx         |  43 +++
 src/components/orbit/banner/pixel-filter.tsx  |  38 +++
 src/components/orbit/banner/ripple-filter.tsx |  25 ++
 src/components/sidebar-menu.tsx               |  26 +-
 src/lib/utils-datetime.ts                     |   4 +-
 src/outerbase-cloud/api-type.ts               |   5 +
 src/outerbase-cloud/api.ts                    |   6 +-
 src/outerbase-cloud/hook.ts                   |  20 ++
 32 files changed, 1212 insertions(+), 266 deletions(-)
 create mode 100644 public/assets/clouds.jpg
 create mode 100644 public/assets/sat.png
 rename src/app/(outerbase)/{w/[workspaceId] => }/account/account-footer.tsx (100%)
 rename src/app/(outerbase)/{w/[workspaceId] => }/account/editor-theme.tsx (100%)
 rename src/app/(outerbase)/{w/[workspaceId] => }/account/page.tsx (76%)
 rename src/app/(outerbase)/{w/[workspaceId] => }/account/two-factor-auth.tsx (100%)
 rename src/app/(outerbase)/{w/[workspaceId] => }/account/user-avatar.tsx (100%)
 rename src/app/(outerbase)/{w/[workspaceId] => }/account/user-form-input.tsx (100%)
 create mode 100644 src/app/(outerbase)/nav-header.tsx
 create mode 100644 src/app/(outerbase)/nav-layout.tsx
 create mode 100644 src/app/(outerbase)/nav-signin-banner.tsx
 create mode 100644 src/app/(outerbase)/new-resource-button.tsx
 create mode 100644 src/app/(outerbase)/recent-page.tsx
 create mode 100644 src/app/(outerbase)/resource-card-loading.tsx
 create mode 100644 src/app/(outerbase)/resource-item-helper.tsx
 create mode 100644 src/app/(outerbase)/sidebar-profile.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/page.backup.tsx
 create mode 100644 src/components/orbit/banner/index.tsx
 create mode 100644 src/components/orbit/banner/pixel-filter.tsx
 create mode 100644 src/components/orbit/banner/ripple-filter.tsx

diff --git a/public/assets/clouds.jpg b/public/assets/clouds.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6559feb45bd6edbe3326d0f0b62a49ea72cce324
GIT binary patch
literal 137757
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
C*8AuH

literal 0
HcmV?d00001

diff --git a/public/assets/sat.png b/public/assets/sat.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b249c01d228b33e77b80707cbb7299584810821
GIT binary patch
literal 35596
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

literal 0
HcmV?d00001

diff --git a/src/app/(dark-only)/signin/page.tsx b/src/app/(dark-only)/signin/page.tsx
index f2683ca9..25290e4d 100644
--- a/src/app/(dark-only)/signin/page.tsx
+++ b/src/app/(dark-only)/signin/page.tsx
@@ -1,10 +1,7 @@
 "use client";
 import LabelInput from "@/components/label-input";
 import { Button } from "@/components/orbit/button";
-import {
-  getOuterbaseWorkspace,
-  loginOuterbaseByPassword,
-} from "@/outerbase-cloud/api";
+import { loginOuterbaseByPassword } from "@/outerbase-cloud/api";
 import {
   OuterbaseAPIError,
   OuterbaseAPISession,
@@ -50,14 +47,7 @@ export default function SigninPage() {
       return;
     }
 
-    getOuterbaseWorkspace()
-      .then((w) => {
-        router.push(`/w/${w.items[0].short_name}`);
-      })
-      .catch(console.error)
-      .finally(() => {
-        setLoading(false);
-      });
+    router.push("/");
   }, [session, router]);
 
   return (
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/account-footer.tsx b/src/app/(outerbase)/account/account-footer.tsx
similarity index 100%
rename from src/app/(outerbase)/w/[workspaceId]/account/account-footer.tsx
rename to src/app/(outerbase)/account/account-footer.tsx
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/editor-theme.tsx b/src/app/(outerbase)/account/editor-theme.tsx
similarity index 100%
rename from src/app/(outerbase)/w/[workspaceId]/account/editor-theme.tsx
rename to src/app/(outerbase)/account/editor-theme.tsx
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/page.tsx b/src/app/(outerbase)/account/page.tsx
similarity index 76%
rename from src/app/(outerbase)/w/[workspaceId]/account/page.tsx
rename to src/app/(outerbase)/account/page.tsx
index 59505a03..ac60d7d0 100644
--- a/src/app/(outerbase)/w/[workspaceId]/account/page.tsx
+++ b/src/app/(outerbase)/account/page.tsx
@@ -1,6 +1,6 @@
 "use client";
-import { NavigationBar } from "@/app/(outerbase)/nav";
 import { useSession } from "@/app/(outerbase)/session-provider";
+import NavigationLayout from "../nav-layout";
 import AccountFooter from "./account-footer";
 import TwoFactorAuth from "./two-factor-auth";
 import UserAvatar from "./user-avatar";
@@ -12,10 +12,8 @@ export default function AccountPage() {
   if (!session?.user) return <div>You are not login!</div>;
 
   return (
-    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
-      <NavigationBar />
-
-      <main className="mx-auto flex max-w-sm flex-col overflow-x-hidden overflow-y-auto pt-20 pb-10">
+    <NavigationLayout>
+      <main className="flex max-w-sm flex-col p-8">
         <div className="flex flex-col gap-5">
           <h1 className="text-primary text-2xl font-bold">Account Setting</h1>
           <h2 className="mt-5 text-xl font-medium text-balance text-neutral-800 dark:text-neutral-100">
@@ -27,6 +25,6 @@ export default function AccountPage() {
           <AccountFooter />
         </div>
       </main>
-    </div>
+    </NavigationLayout>
   );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/two-factor-auth.tsx b/src/app/(outerbase)/account/two-factor-auth.tsx
similarity index 100%
rename from src/app/(outerbase)/w/[workspaceId]/account/two-factor-auth.tsx
rename to src/app/(outerbase)/account/two-factor-auth.tsx
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/user-avatar.tsx b/src/app/(outerbase)/account/user-avatar.tsx
similarity index 100%
rename from src/app/(outerbase)/w/[workspaceId]/account/user-avatar.tsx
rename to src/app/(outerbase)/account/user-avatar.tsx
diff --git a/src/app/(outerbase)/w/[workspaceId]/account/user-form-input.tsx b/src/app/(outerbase)/account/user-form-input.tsx
similarity index 100%
rename from src/app/(outerbase)/w/[workspaceId]/account/user-form-input.tsx
rename to src/app/(outerbase)/account/user-form-input.tsx
diff --git a/src/app/(outerbase)/nav-header.tsx b/src/app/(outerbase)/nav-header.tsx
new file mode 100644
index 00000000..6b9a42d1
--- /dev/null
+++ b/src/app/(outerbase)/nav-header.tsx
@@ -0,0 +1,35 @@
+import { cn } from "@/lib/utils";
+import { Cardholder, Database, Gear } from "@phosphor-icons/react";
+
+interface NavigationHeaderProps {
+  title: string;
+}
+
+export default function NavigationHeader({ title }: NavigationHeaderProps) {
+  const tabClassName =
+    "p-2 border-b-2 border-background flex gap-2 items-center h-full";
+  const selectedTabClassName = cn(tabClassName, "border-orange-500");
+
+  return (
+    <div className="bg-background flex h-12 flex-col gap-1 border-b px-6">
+      <ul className="flex h-full gap-2 text-base">
+        <li className={selectedTabClassName}>
+          <Database />
+          Resources
+        </li>
+        <li className={tabClassName}>
+          <Gear />
+          Settings
+        </li>
+        <li className={tabClassName}>
+          <Cardholder />
+          Billing
+        </li>
+
+        <li className="mr-6 flex flex-1 items-center justify-end font-bold">
+          {title}
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/nav-layout.tsx b/src/app/(outerbase)/nav-layout.tsx
new file mode 100644
index 00000000..a40f5c5f
--- /dev/null
+++ b/src/app/(outerbase)/nav-layout.tsx
@@ -0,0 +1,104 @@
+"use client";
+import { Input } from "@/components/orbit/input";
+import {
+  SidebarMenuHeader,
+  SidebarMenuItem,
+  SidebarMenuLoadingItem,
+} from "@/components/sidebar-menu";
+import {
+  Clock,
+  Database,
+  MagnifyingGlass,
+  Plus,
+  Star,
+} from "@phosphor-icons/react";
+import { useParams, usePathname, useRouter } from "next/navigation";
+import { PropsWithChildren } from "react";
+import NavigationSigninBanner from "./nav-signin-banner";
+import SidebarProfile from "./sidebar-profile";
+import { useWorkspaces } from "./workspace-provider";
+
+export default function NavigationLayout({ children }: PropsWithChildren) {
+  const router = useRouter();
+  const { workspaces, loading: workspaceLoading } = useWorkspaces();
+  const pathname = usePathname();
+  const { workspaceId } = useParams<{ workspaceId?: string }>();
+
+  return (
+    <div className="flex h-screen w-screen">
+      <div className="w-[250px] shrink-0 border-r">
+        <div className="px-2 py-2">
+          <SidebarProfile />
+        </div>
+
+        <div className="px-2">
+          <Input
+            size="base"
+            className="bg-secondary"
+            placeholder="Search for anything"
+            preText={<MagnifyingGlass className="mr-2" />}
+          />
+        </div>
+
+        <div className="flex flex-col border-b py-2">
+          <SidebarMenuItem
+            text="Recent"
+            icon={Clock}
+            selected={pathname === "/"}
+            onClick={() => {
+              router.push("/");
+            }}
+          />
+          <SidebarMenuItem text="Favorite" icon={Star} />
+        </div>
+
+        <div className="flex flex-col border-b pb-2">
+          <SidebarMenuHeader text="Workspace" />
+          <SidebarMenuItem text="Local Workspace" icon={Database} />
+
+          {workspaces.map((workspace) => {
+            return (
+              <SidebarMenuItem
+                key={workspace.id}
+                text={workspace.name}
+                icon={Database}
+                onClick={
+                  workspace.short_name === workspaceId
+                    ? undefined
+                    : () => {
+                        router.push(`/w/${workspace.short_name}`);
+                      }
+                }
+                selected={workspace.short_name === workspaceId}
+                badge={
+                  <span className="mr-2 rounded border px-1.5 py-0.5 text-xs">
+                    Free
+                  </span>
+                }
+              />
+            );
+          })}
+
+          {workspaceLoading && (
+            <>
+              <SidebarMenuLoadingItem />
+              <SidebarMenuLoadingItem />
+              <SidebarMenuLoadingItem />
+            </>
+          )}
+
+          <SidebarMenuItem
+            text={"New Workspace"}
+            icon={Plus}
+            onClick={() => router.push("/new-workspace")}
+          />
+        </div>
+
+        <NavigationSigninBanner />
+      </div>
+      <div className="flex min-h-screen w-full flex-col overflow-y-auto bg-neutral-50 dark:bg-neutral-950">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/nav-profile.tsx b/src/app/(outerbase)/nav-profile.tsx
index ea8daf83..deae9f9c 100644
--- a/src/app/(outerbase)/nav-profile.tsx
+++ b/src/app/(outerbase)/nav-profile.tsx
@@ -11,10 +11,8 @@ import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
 import { useCallback } from "react";
 import { useSession } from "./session-provider";
-import { useWorkspaces } from "./workspace-provider";
 
 export default function NavigationProfile() {
-  const { currentWorkspace } = useWorkspaces();
   const { resolvedTheme, forcedTheme, setTheme } = useTheme();
   const { session } = useSession();
   const router = useRouter();
@@ -61,7 +59,7 @@ export default function NavigationProfile() {
         <DropdownMenuItem
           className="justify-between"
           onClick={() => {
-            router.push(`/w/${currentWorkspace?.short_name}/account`);
+            router.push(`/account`);
           }}
         >
           Account Setting
diff --git a/src/app/(outerbase)/nav-signin-banner.tsx b/src/app/(outerbase)/nav-signin-banner.tsx
new file mode 100644
index 00000000..02dd7195
--- /dev/null
+++ b/src/app/(outerbase)/nav-signin-banner.tsx
@@ -0,0 +1,53 @@
+import Banner from "@/components/orbit/banner";
+import RippleFilter from "@/components/orbit/banner/ripple-filter";
+import { Button } from "@/components/orbit/button";
+import { useRouter } from "next/navigation";
+import { useSession } from "./session-provider";
+
+export default function NavigationSigninBanner() {
+  const { isLoading, session } = useSession();
+  const router = useRouter();
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (session) {
+    return null;
+  }
+
+  return (
+    <div className="flex p-3">
+      <Banner
+        image={"/assets/clouds.jpg"}
+        filter={<RippleFilter />}
+        className="ripple w-full"
+        onClick={() => {
+          router.push("/signin");
+        }}
+      >
+        <div className="absolute top-0 right-0 bottom-0 left-0 z-5 bg-white opacity-25"></div>
+
+        <div className="absolute top-2 left-3 z-15 w-[200px] text-left text-sm text-black">
+          <h2 className="text-lg font-semibold">Unlock Full Potential</h2>
+          <p className="mb-2">
+            Outerbase Cloud gives you AI-driver insights, managed database, and
+            team collaboation.
+          </p>
+
+          <Button size="sm">Sign In</Button>
+        </div>
+
+        <div className="ease-bounce absolute right-5 bottom-5 z-10 transition-transform duration-300 group-hover:-translate-3 group-hover:scale-105">
+          <img
+            src={"/assets/sat.png"}
+            width={50}
+            height={50}
+            className="float"
+            alt="img"
+          />
+        </div>
+      </Banner>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/new-resource-button.tsx b/src/app/(outerbase)/new-resource-button.tsx
new file mode 100644
index 00000000..41b2ddd0
--- /dev/null
+++ b/src/app/(outerbase)/new-resource-button.tsx
@@ -0,0 +1,206 @@
+import { MySQLIcon, PostgreIcon } from "@/components/icons/outerbase-icon";
+import { Button } from "@/components/orbit/button";
+import { Input } from "@/components/orbit/input";
+import {
+  CloudflareIcon,
+  DigitalOceanIcon,
+  NeonIcon,
+  StarbaseIcon,
+  SupabaseIcon,
+} from "@/components/resource-card/icon";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import {
+  ArrowLeft,
+  CaretDown,
+  ChartBar,
+  Database,
+  MagnifyingGlass,
+} from "@phosphor-icons/react";
+import { PropsWithChildren, useMemo, useState } from "react";
+
+function CreateResourceItem({ children }: PropsWithChildren) {
+  return (
+    <button
+      className={
+        "bg-secondary flex w-full items-center justify-start rounded p-2 text-base"
+      }
+    >
+      {children}
+    </button>
+  );
+}
+
+function CreateResourceItemSearch({
+  children,
+  selected,
+}: PropsWithChildren<{ selected?: boolean }>) {
+  return (
+    <button
+      className={cn(
+        "hover:bg-secondary flex w-full items-center justify-start rounded p-2 text-base",
+        { "bg-secondary": selected }
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface ResourceType {
+  name: string;
+  icon: React.FC<React.SVGProps<SVGSVGElement>>;
+  enterprise?: boolean;
+}
+
+const RESOURCE_TYPE_LIST: ResourceType[] = [
+  { name: "Supabase", icon: SupabaseIcon },
+  { name: "Cloudflare", icon: CloudflareIcon },
+  { name: "Neon", icon: NeonIcon },
+  { name: "StarbaseDB", icon: StarbaseIcon },
+  { name: "DigitalOcean", icon: DigitalOceanIcon },
+  { name: "Postgres", icon: PostgreIcon },
+  { name: "Motherduck", icon: Database },
+  { name: "SQL Server", icon: Database },
+  { name: "MySQL", icon: MySQLIcon },
+  { name: "Clickhouse", icon: Database, enterprise: true },
+  { name: "Snowflake", icon: Database, enterprise: true },
+  { name: "BigQuery", icon: Database, enterprise: true },
+  { name: "Redshift", icon: Database, enterprise: true },
+];
+
+export default function NewResourceButton() {
+  const leftSideResourceType = RESOURCE_TYPE_LIST.slice(0, 7);
+  const rightSideResourceType = RESOURCE_TYPE_LIST.slice(7);
+
+  const [search, setSearch] = useState("");
+
+  const allResourceType = (
+    <>
+      <div className="flex gap-4 p-2">
+        <button className="bg-secondary flex w-[250px] items-center gap-4 rounded p-2 px-4 text-left text-base">
+          <ChartBar className="h-8 w-8" />
+          <div>
+            <div className="font-semibold">Board</div>
+            <div className="text-sm">Multiple source dashboard</div>
+          </div>
+        </button>
+
+        <button className="flex w-[200px] items-center gap-4 rounded bg-gradient-to-r from-blue-800 to-indigo-900 p-2 px-4 text-left text-base text-white">
+          <StarbaseIcon className="h-8 w-8" />
+          <div>
+            <div className="font-semibold">StarbaseDB</div>
+            <div className="text-sm">Free 10GB SQLite</div>
+          </div>
+        </button>
+      </div>
+
+      <h2 className="px-3 py-2 text-base font-semibold">
+        Bring your existing databases
+      </h2>
+
+      <div className="my-2 flex">
+        <div className="flex w-1/2 flex-col gap-2 px-2">
+          {leftSideResourceType.map((resource) => (
+            <CreateResourceItem key={resource.name}>
+              <resource.icon className="mr-2 h-6 w-6" />
+              <span>{resource.name}</span>
+            </CreateResourceItem>
+          ))}
+        </div>
+
+        <div className="flex w-1/2 flex-col gap-2 px-2">
+          {rightSideResourceType.map((resource) => (
+            <CreateResourceItem key={resource.name}>
+              <resource.icon className="mr-2 h-6 w-6" />
+              <span className="flex-1 text-left">{resource.name}</span>
+              {resource.enterprise && (
+                <span className="text-primary-foreground rounded border bg-zinc-500 px-1.5 py-0.5 text-sm">
+                  Enterprise
+                </span>
+              )}
+            </CreateResourceItem>
+          ))}
+        </div>
+      </div>
+
+      <h2 className="mt-4 px-3 py-1 text-base">Or use connection string</h2>
+      <div className="mx-2 my-2 flex">
+        <Input
+          className="bg-secondary w-full"
+          postText={<ArrowLeft className="mr-2" />}
+          placeholder="postgres://testing"
+        />
+      </div>
+    </>
+  );
+
+  const resourceSearch = useMemo(() => {
+    const filteredResource = RESOURCE_TYPE_LIST.filter((resource) =>
+      resource.name.toLowerCase().includes(search.toLowerCase())
+    ).sort((a, b) => {
+      return a.name.localeCompare(b.name);
+    });
+
+    if (filteredResource.length === 0) {
+      return (
+        <div className="flex h-16 flex-col items-center justify-center px-2 pb-2">
+          <span className="text-base">
+            There is no resource type of <strong>{search}</strong>
+          </span>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex flex-col px-2 pb-2">
+        {filteredResource
+          .sort((a, b) => {
+            return a.name.localeCompare(b.name);
+          })
+          .map((resource, resourceIdx) => (
+            <CreateResourceItemSearch
+              key={resource.name}
+              selected={resourceIdx === 0}
+            >
+              <resource.icon className="mr-2 h-6 w-6" />
+              <span className="flex-1 text-left">{resource.name}</span>
+              {resource.enterprise && (
+                <span className="text-primary-foreground rounded border bg-zinc-500 px-1.5 py-0.5 text-sm">
+                  Enterprise
+                </span>
+              )}
+            </CreateResourceItemSearch>
+          ))}
+      </div>
+    );
+  }, [search]);
+
+  return (
+    <DropdownMenu onOpenChange={() => setSearch("")} modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="primary">
+          New Resource <CaretDown />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[500px]">
+        <div className="p-2">
+          <Input
+            placeholder="Search"
+            autoFocus
+            className="bg-secondary w-full"
+            value={search}
+            onValueChange={setSearch}
+            preText={<MagnifyingGlass className="mr-2" />}
+          />
+        </div>
+
+        {search ? resourceSearch : allResourceType}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/app/(outerbase)/page.tsx b/src/app/(outerbase)/page.tsx
index 57e8a260..99afc61e 100644
--- a/src/app/(outerbase)/page.tsx
+++ b/src/app/(outerbase)/page.tsx
@@ -1,33 +1,12 @@
 "use client";
 
-import PageLoading from "@/components/page-loading";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import { useSession } from "./session-provider";
-import { useWorkspaces } from "./workspace-provider";
+import NavigationLayout from "./nav-layout";
+import RecentResource from "./recent-page";
 
 export default function OuterbaseMainPage() {
-  const { token, isLoading, session } = useSession();
-  const { workspaces } = useWorkspaces();
-  const router = useRouter();
-
-  useEffect(() => {
-    // If there is no token, it means user has not logged in before.
-    // We will forward them to local workspace.
-    if (!token) {
-      router.push("/w/local-workspace");
-      return;
-    } else if (!isLoading && session && workspaces) {
-      // Valid session, we will forward to the first workspace
-      if (workspaces.length) {
-        router.push(`/w/${workspaces[0].short_name}`);
-      }
-    } else if (!isLoading && !session) {
-      // Invalid session, it might be expired session. We will
-      // ask them for login again
-      router.push("/signin");
-    }
-  }, [token, session, isLoading, workspaces, router]);
-
-  return <PageLoading>Loading Session</PageLoading>;
+  return (
+    <NavigationLayout>
+      <RecentResource />
+    </NavigationLayout>
+  );
 }
diff --git a/src/app/(outerbase)/recent-page.tsx b/src/app/(outerbase)/recent-page.tsx
new file mode 100644
index 00000000..1569a227
--- /dev/null
+++ b/src/app/(outerbase)/recent-page.tsx
@@ -0,0 +1,83 @@
+import { MySQLIcon, SQLiteIcon } from "@/components/icons/outerbase-icon";
+import { MenuBar } from "@/components/orbit/menu-bar";
+import { useOuterbaseDashboardList } from "@/outerbase-cloud/hook";
+import { CaretDown } from "@phosphor-icons/react";
+import { useMemo } from "react";
+import NavigationHeader from "./nav-header";
+import {
+  getResourceItemPropsFromBase,
+  getResourceItemPropsFromBoard,
+  ResourceItemList,
+} from "./resource-item-helper";
+import { useWorkspaces } from "./workspace-provider";
+
+export default function RecentResource() {
+  const { workspaces, loading: workspaceLoading } = useWorkspaces();
+  const { data: dashboardList } = useOuterbaseDashboardList();
+
+  const recentBases = useMemo(() => {
+    const bases = workspaces
+      .map((w) => w.bases.map((base) => getResourceItemPropsFromBase(w, base)))
+      .flat();
+
+    const dashboards = workspaces
+      .map((w) => {
+        return (
+          dashboardList
+            ?.filter(
+              (board) => board.workspace_id === w.id && board.base_id === null
+            )
+            .map((board) => {
+              return getResourceItemPropsFromBoard(w, board);
+            }) ?? []
+        );
+      })
+      .flat();
+
+    return [...bases, ...dashboards].sort((a, b) => b.lastUsed - a.lastUsed);
+  }, [workspaces, dashboardList]);
+
+  const resources = recentBases;
+
+  return (
+    <>
+      <NavigationHeader title="Recent" />
+      <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
+        <div className="mb-8 flex gap-4">
+          <button className="bg-background dark:bg-secondary flex items-center gap-2 rounded-lg border p-4">
+            <SQLiteIcon className="h-10 w-10" />
+            <div className="flex flex-col gap-1 text-left">
+              <span className="text-base font-bold">SQLite Playgorund</span>
+              <span className="text-sm">
+                Launch in-memory SQLite on browser
+              </span>
+            </div>
+            <CaretDown className="ml-4 h-4 w-4" />
+          </button>
+
+          <button className="bg-background dark:bg-secondary flex items-center gap-2 rounded-lg border p-4">
+            <MySQLIcon className="h-10 w-10" />
+            <div className="flex flex-col gap-1 text-left">
+              <span className="text-base font-bold">MySQL Playgorund</span>
+              <span className="text-sm">
+                Spin up cloud MySQL sandbox instance
+              </span>
+            </div>
+          </button>
+        </div>
+
+        <div>
+          <MenuBar
+            value={"recent-view"}
+            items={[
+              { content: "Recent viewed", value: "recent-view" },
+              { content: "Recent created", value: "recent-create" },
+            ]}
+          />
+        </div>
+
+        <ResourceItemList resources={resources} loading={workspaceLoading} />
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(outerbase)/resource-card-loading.tsx b/src/app/(outerbase)/resource-card-loading.tsx
new file mode 100644
index 00000000..e28e5af4
--- /dev/null
+++ b/src/app/(outerbase)/resource-card-loading.tsx
@@ -0,0 +1,13 @@
+export default function ResourceCardLoading() {
+  return (
+    <div className="bg-background flex h-36 w-full gap-2 rounded border p-4">
+      <div>
+        <div className="bg bg-muted h-10 w-10 animate-pulse rounded"></div>
+      </div>
+      <div className="mt-1 flex flex-col gap-2">
+        <div className="bg bg-muted h-3 w-24 animate-pulse rounded-sm"></div>
+        <div className="bg bg-muted h-3 w-32 animate-pulse rounded-sm"></div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
new file mode 100644
index 00000000..bdb050dd
--- /dev/null
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -0,0 +1,87 @@
+import ResourceCard from "@/components/resource-card";
+import {
+  getDatabaseFriendlyName,
+  getDatabaseIcon,
+  getDatabaseVisual,
+} from "@/components/resource-card/utils";
+import { timeSince } from "@/lib/utils-datetime";
+import {
+  OuterbaseAPIBase,
+  OuterbaseAPIDashboard,
+  OuterbaseAPIWorkspace,
+} from "@/outerbase-cloud/api-type";
+import ResourceCardLoading from "./resource-card-loading";
+
+export interface ResourceItemProps {
+  id: string;
+  type: string;
+  name: string;
+  href: string;
+  status?: string;
+  lastUsed: number;
+}
+
+export function getResourceItemPropsFromBase(
+  workspace: OuterbaseAPIWorkspace,
+  base: OuterbaseAPIBase
+): ResourceItemProps {
+  return {
+    id: base.id,
+    type: base.sources[0]?.type ?? "database",
+    name: base.name,
+    href: `/w/${workspace.short_name}/${base.short_name}`,
+    lastUsed: new Date(base.last_analytics_event.created_at).getTime(),
+  };
+}
+
+export function getResourceItemPropsFromBoard(
+  workspace: OuterbaseAPIWorkspace,
+  board: OuterbaseAPIDashboard
+): ResourceItemProps {
+  return {
+    id: board.id,
+    type: "board",
+    name: board.name,
+    href: `/w/${workspace?.short_name}/board/${board.id}`,
+    lastUsed: new Date(board.updated_at).getTime(),
+  };
+}
+
+export function ResourceItemList({
+  resources,
+  loading,
+}: {
+  resources: ResourceItemProps[];
+  loading?: boolean;
+}) {
+  return (
+    <div className="flex grid grid-cols-1 flex-wrap gap-4 min-[700px]:grid-cols-2 min-[900px]:grid-cols-3 min-[1200px]:grid-cols-4 min-[1500px]:grid-cols-5 min-[1800px]:grid-cols-6 min-[2100px]:grid-cols-7">
+      {loading && (
+        <>
+          <ResourceCardLoading />
+          <ResourceCardLoading />
+          <ResourceCardLoading />
+          <ResourceCardLoading />
+        </>
+      )}
+
+      {resources.map((resource) => {
+        const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
+
+        return (
+          <ResourceCard
+            className="w-full"
+            key={resource.id}
+            color="default"
+            icon={getDatabaseIcon(resource.type)}
+            href={resource.href}
+            title={resource.name}
+            subtitle={getDatabaseFriendlyName(resource.type)}
+            visual={getDatabaseVisual(resource.type)}
+            status={status}
+          />
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/sidebar-profile.tsx b/src/app/(outerbase)/sidebar-profile.tsx
new file mode 100644
index 00000000..b41ffb8d
--- /dev/null
+++ b/src/app/(outerbase)/sidebar-profile.tsx
@@ -0,0 +1,125 @@
+import { Avatar } from "@/components/orbit/avatar";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import {
+  CaretDown,
+  Gear,
+  SignOut,
+  ToggleLeft,
+  ToggleRight,
+} from "@phosphor-icons/react";
+import { useTheme } from "next-themes";
+import { useRouter } from "next/navigation";
+import { useCallback } from "react";
+import { useSession } from "./session-provider";
+
+export default function SidebarProfile() {
+  const { resolvedTheme, forcedTheme, setTheme } = useTheme();
+  const { session, isLoading } = useSession();
+  const router = useRouter();
+
+  const theme = forcedTheme ?? resolvedTheme;
+
+  const onLogoutClicked = useCallback(() => {
+    // Remove all the session data
+    localStorage.removeItem("session");
+    localStorage.removeItem("ob-token");
+    router.refresh();
+  }, [router]);
+
+  const onThemeToggleClicked = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      setTheme(theme === "dark" ? "light" : "dark");
+
+      // We don't want the dropdown to close
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [theme, setTheme]
+  );
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger>
+        <div
+          className={cn(
+            buttonVariants({
+              size: "lg",
+              variant: "ghost",
+            }),
+            "flex items-center justify-start gap-2 p-1"
+          )}
+        >
+          <Avatar username="Guest" as="div" />
+          {!isLoading && (
+            <div className="flex-1 text-left text-sm">
+              {session
+                ? session.user.first_name + " " + session?.user.last_name
+                : "Guest"}
+            </div>
+          )}
+
+          {isLoading && (
+            <div className="bg-muted h-4 w-16 animate-pulse rounded-sm" />
+          )}
+          <div>
+            <CaretDown weight="bold" className="h-3 w-3" />
+          </div>
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[250px]">
+        <div className="flex gap-2 border-b p-2">
+          <Avatar size="lg" username={session?.user?.initials ?? "Guest"} />
+
+          <div className="flex flex-col justify-center">
+            <div className="text-sm font-semibold">
+              {session
+                ? session.user.first_name + " " + session?.user.last_name
+                : "Guest"}
+            </div>
+            {session && <div className="text-sm">{session.user.email}</div>}
+          </div>
+        </div>
+
+        <div className="p-2">
+          {session && (
+            <DropdownMenuItem
+              className="justify-between"
+              onClick={() => {
+                router.push(`/account`);
+              }}
+            >
+              Account Setting
+              <Gear size={20} />
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem
+            className="justify-between"
+            onClick={onThemeToggleClicked}
+          >
+            Theme
+            {theme === "dark" ? (
+              <ToggleRight weight="fill" size={20} />
+            ) : (
+              <ToggleLeft size={20} />
+            )}
+          </DropdownMenuItem>
+          {session && (
+            <DropdownMenuItem
+              onClick={onLogoutClicked}
+              className="justify-between"
+            >
+              Log out <SignOut size={20} />
+            </DropdownMenuItem>
+          )}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index a0759cf1..06ccf89a 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { NavigationBar } from "@/app/(outerbase)/nav";
+import NavigationLayout from "@/app/(outerbase)/nav-layout";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import Board from "@/components/board";
+import { Loader } from "@/components/orbit/loader";
 import OuterbaseBoardStorageDriver from "@/drivers/board-storage/outerbase";
 
 import { getOuterbaseDashboard } from "@/outerbase-cloud/api";
@@ -70,16 +71,15 @@ export default function BoardPage() {
     return getOuterbaseDashboard(workspaceId, boardId);
   });
 
-  if (!data) {
-    return <div>Loading...</div>;
-  }
-
   return (
-    <div className="flex h-screen w-screen flex-col overflow-hidden">
-      <NavigationBar />
+    <NavigationLayout>
       <div className="flex flex-1 overflow-x-hidden overflow-y-auto">
-        <BoardPageEditor initialValue={data} mutate={mutate} />
+        {data ? (
+          <BoardPageEditor initialValue={data} mutate={mutate} />
+        ) : (
+          <Loader />
+        )}
       </div>
-    </div>
+    </NavigationLayout>
   );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.backup.tsx b/src/app/(outerbase)/w/[workspaceId]/page.backup.tsx
new file mode 100644
index 00000000..d7014159
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/page.backup.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import { Button } from "@/components/orbit/button";
+import { Input } from "@/components/orbit/input";
+import { MenuBar } from "@/components/orbit/menu-bar";
+import ResourceCard from "@/components/resource-card";
+import {
+  getDatabaseFriendlyName,
+  getDatabaseIcon,
+  getDatabaseVisual,
+} from "@/components/resource-card/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { getOuterbaseDashboardList } from "@/outerbase-cloud/api";
+import {
+  CalendarDots,
+  CaretDown,
+  Eye,
+  MagnifyingGlass,
+  SortAscending,
+  SortDescending,
+  Users,
+} from "@phosphor-icons/react";
+import { useParams, useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
+import useSWR from "swr";
+import { NavigationBar } from "../../nav";
+import { useWorkspaces } from "../../workspace-provider";
+import { deleteBaseDialog } from "./dialog-base-delete";
+import { createBoardDialog } from "./dialog-board-create";
+import { deleteBoardDialog } from "./dialog-board-delete";
+import useRedirectValidWorkspace from "./redirect-valid-workspace";
+
+interface ResourceItem {
+  id: string;
+  type: string;
+  name: string;
+  href: string;
+  status?: string;
+}
+
+export default function WorkspaceListPageClient() {
+  const router = useRouter();
+  const { currentWorkspace, refreshWorkspace } = useWorkspaces();
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+
+  const [filterType, setFilterType] = useState("all");
+  const [filterName, setFilterName] = useState("");
+
+  useRedirectValidWorkspace();
+
+  const { data: boards, mutate } = useSWR(
+    `/workspace/${workspaceId}/boards`,
+    () => {
+      return getOuterbaseDashboardList(workspaceId);
+    },
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  const resources: ResourceItem[] = useMemo(() => {
+    const baseResources = (currentWorkspace?.bases ?? []).map((base) => ({
+      id: base.id,
+      type: base.sources[0]?.type ?? "database",
+      name: base.name,
+      href: `/w/${currentWorkspace?.short_name}/${base.short_name}`,
+    }));
+
+    const boardResources = (boards?.items ?? [])
+      .filter((board) => board.base_id === null)
+      .map((board) => ({
+        id: board.id,
+        type: "board",
+        name: board.name,
+        href: `/w/${currentWorkspace?.short_name}/board/${board.id}`,
+      }));
+
+    let allResources = [...baseResources, ...boardResources];
+
+    // Apply filters
+    if (filterName) {
+      allResources = allResources.filter((resource) =>
+        resource.name?.toLowerCase().includes(filterName.toLowerCase())
+      );
+    }
+
+    if (filterType === "base") {
+      allResources = allResources.filter(
+        (resource) => resource.type !== "board"
+      );
+    } else if (filterType === "board") {
+      allResources = allResources.filter(
+        (resource) => resource.type === "board"
+      );
+    }
+
+    return allResources.sort((a, b) =>
+      (a.name ?? "").localeCompare(b.name ?? "")
+    );
+  }, [currentWorkspace, boards, filterName, filterType]);
+
+  return (
+    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+      <NavigationBar />
+
+      <div className="container mx-auto mt-10 p-4">
+        <div className="sticky top-14 z-20 mb-12 flex gap-4 bg-neutral-50 pb-2 dark:bg-neutral-950">
+          <div className="flex-1">
+            <Input
+              preText={<MagnifyingGlass size={16} className="mr-2" />}
+              size="lg"
+              placeholder="Search resources..."
+              onValueChange={setFilterName}
+              value={filterName}
+            />
+          </div>
+
+          <MenuBar
+            size="lg"
+            items={[
+              { value: "all", content: "All" },
+              { value: "base", content: "Bases" },
+              { value: "board", content: "Boards" },
+            ]}
+            onChange={setFilterType}
+            value={filterType}
+          />
+
+          <MenuBar
+            size="lg"
+            items={[
+              { value: "all", content: <SortAscending size={16} /> },
+              { value: "recent", content: <SortDescending size={16} /> },
+              { value: "updated", content: <CalendarDots size={16} /> },
+              { value: "created", content: <Eye size={16} /> },
+              { value: "name", content: <Users size={16} /> },
+            ]}
+          />
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="lg" variant="primary">
+                New Resource <CaretDown />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>New Base</DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={async () => {
+                  const createdBoard = await createBoardDialog.show({
+                    workspaceId,
+                  });
+
+                  if (createdBoard) {
+                    mutate();
+                    router.push(`/w/${workspaceId}/board/${createdBoard.id}`);
+                  }
+                }}
+              >
+                New Board
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {resources.map((resource) => (
+            <ResourceCard
+              className="w-full"
+              key={resource.id}
+              color="default"
+              icon={getDatabaseIcon(resource.type)}
+              href={resource.href}
+              title={resource.name}
+              subtitle={getDatabaseFriendlyName(resource.type)}
+              visual={getDatabaseVisual(resource.type)}
+              status={resource.status}
+            >
+              {resource.type === "board" && (
+                <DropdownMenuItem
+                  onClick={() => {
+                    deleteBoardDialog
+                      .show({
+                        workspaceId,
+                        boardId: resource.id,
+                        boardName: resource.name,
+                      })
+                      .then(() => mutate());
+                  }}
+                >
+                  Remove board
+                </DropdownMenuItem>
+              )}
+              {resource.type !== "board" && (
+                <DropdownMenuItem
+                  onClick={() => {
+                    deleteBaseDialog
+                      .show({
+                        workspaceId,
+                        baseId: resource.id,
+                        baseName: resource.name,
+                      })
+                      .then(() => refreshWorkspace());
+                  }}
+                >
+                  Remove
+                </DropdownMenuItem>
+              )}
+            </ResourceCard>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index d3082000..bca30b98 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -1,227 +1,99 @@
 "use client";
 
-import { Button } from "@/components/orbit/button";
 import { Input } from "@/components/orbit/input";
 import { MenuBar } from "@/components/orbit/menu-bar";
-import ResourceCard from "@/components/resource-card";
-import {
-  getDatabaseFriendlyName,
-  getDatabaseIcon,
-  getDatabaseVisual,
-} from "@/components/resource-card/utils";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { timeSince } from "@/lib/utils-datetime";
-import { getOuterbaseDashboardList } from "@/outerbase-cloud/api";
+import { useOuterbaseDashboardList } from "@/outerbase-cloud/hook";
 import {
   CalendarDots,
-  CaretDown,
   Eye,
   MagnifyingGlass,
   SortAscending,
   SortDescending,
   Users,
 } from "@phosphor-icons/react";
-import { useParams, useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
-import useSWR from "swr";
-import { NavigationBar } from "../../nav";
+import { useMemo } from "react";
+import NavigationHeader from "../../nav-header";
+import NavigationLayout from "../../nav-layout";
+import NewResourceButton from "../../new-resource-button";
+import {
+  getResourceItemPropsFromBase,
+  getResourceItemPropsFromBoard,
+  ResourceItemList,
+} from "../../resource-item-helper";
 import { useWorkspaces } from "../../workspace-provider";
-import { deleteBaseDialog } from "./dialog-base-delete";
-import { createBoardDialog } from "./dialog-board-create";
-import { deleteBoardDialog } from "./dialog-board-delete";
-import useRedirectValidWorkspace from "./redirect-valid-workspace";
-
-interface ResourceItem {
-  id: string;
-  type: string;
-  name: string;
-  href: string;
-  status?: string;
-}
-
-export default function WorkspaceListPageClient() {
-  const router = useRouter();
-  const { currentWorkspace, refreshWorkspace } = useWorkspaces();
-  const { workspaceId } = useParams<{ workspaceId: string }>();
-
-  const [filterType, setFilterType] = useState("all");
-  const [filterName, setFilterName] = useState("");
-
-  useRedirectValidWorkspace();
-
-  const { data: boards, mutate } = useSWR(
-    `/workspace/${workspaceId}/boards`,
-    () => {
-      return getOuterbaseDashboardList(workspaceId);
-    },
-    {
-      revalidateIfStale: false,
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-    }
-  );
-
-  const resources: ResourceItem[] = useMemo(() => {
-    const baseResources = (currentWorkspace?.bases ?? []).map((base) => ({
-      id: base.id,
-      type: base.sources[0]?.type ?? "database",
-      name: base.name,
-      href: `/w/${currentWorkspace?.short_name}/${base.short_name}`,
-      status: base.last_analytics_event?.created_at
-        ? `Last viewed ${timeSince(new Date(base.last_analytics_event?.created_at))} ago`
-        : undefined,
-    }));
-
-    const boardResources = (boards?.items ?? [])
-      .filter((board) => board.base_id === null)
-      .map((board) => ({
-        id: board.id,
-        type: "board",
-        name: board.name,
-        href: `/w/${currentWorkspace?.short_name}/board/${board.id}`,
-        status: `Last updated ${timeSince(new Date(board?.updated_at ?? ""))} ago`,
-      }));
 
-    let allResources = [...baseResources, ...boardResources];
-
-    // Apply filters
-    if (filterName) {
-      allResources = allResources.filter((resource) =>
-        resource.name?.toLowerCase().includes(filterName.toLowerCase())
-      );
-    }
-
-    if (filterType === "base") {
-      allResources = allResources.filter(
-        (resource) => resource.type !== "board"
-      );
-    } else if (filterType === "board") {
-      allResources = allResources.filter(
-        (resource) => resource.type === "board"
-      );
-    }
-
-    return allResources.sort((a, b) =>
-      (a.name ?? "").localeCompare(b.name ?? "")
+export default function WorkspaceListPage() {
+  const { currentWorkspace } = useWorkspaces();
+  const { data: dashboardList } = useOuterbaseDashboardList();
+
+  const bases = useMemo(() => {
+    if (!currentWorkspace) return [];
+
+    const bases =
+      (currentWorkspace.bases ?? []).map((base) => {
+        return getResourceItemPropsFromBase(currentWorkspace, base);
+      }) ?? [];
+
+    return bases;
+  }, [currentWorkspace]);
+
+  const dashboards = useMemo(() => {
+    if (!currentWorkspace) return [];
+
+    return (
+      (dashboardList ?? [])
+        .filter(
+          (board) =>
+            board.workspace_id === currentWorkspace.id && board.base_id === null
+        )
+        .map((board) => {
+          return getResourceItemPropsFromBoard(currentWorkspace, board);
+        }) ?? []
     );
-  }, [currentWorkspace, boards, filterName, filterType]);
+  }, [currentWorkspace, dashboardList]);
 
   return (
-    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
-      <NavigationBar />
+    <>
+      <title>{currentWorkspace?.name ?? "Untitled"}</title>
+      <NavigationLayout>
+        <NavigationHeader title={currentWorkspace?.name ?? "Untitled"} />
+
+        <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
+          <div className="flex gap-2">
+            <NewResourceButton />
 
-      <div className="container mx-auto mt-10 p-4">
-        <div className="sticky top-14 z-20 mb-12 flex gap-4 bg-neutral-50 pb-2 dark:bg-neutral-950">
-          <div className="flex-1">
             <Input
-              preText={<MagnifyingGlass size={16} className="mr-2" />}
-              size="lg"
-              placeholder="Search resources..."
-              onValueChange={setFilterName}
-              value={filterName}
+              preText={<MagnifyingGlass className="mr-2" />}
+              placeholder="Search"
             />
-          </div>
 
-          <MenuBar
-            size="lg"
-            items={[
-              { value: "all", content: "All" },
-              { value: "base", content: "Bases" },
-              { value: "board", content: "Boards" },
-            ]}
-            onChange={setFilterType}
-            value={filterType}
-          />
+            <div className="flex-1"></div>
 
-          <MenuBar
-            size="lg"
-            items={[
-              { value: "all", content: <SortAscending size={16} /> },
-              { value: "recent", content: <SortDescending size={16} /> },
-              { value: "updated", content: <CalendarDots size={16} /> },
-              { value: "created", content: <Eye size={16} /> },
-              { value: "name", content: <Users size={16} /> },
-            ]}
-          />
-
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="lg" variant="primary">
-                New Resource <CaretDown />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem>New Base</DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={async () => {
-                  const createdBoard = await createBoardDialog.show({
-                    workspaceId,
-                  });
-
-                  if (createdBoard) {
-                    mutate();
-                    router.push(`/w/${workspaceId}/board/${createdBoard.id}`);
-                  }
-                }}
-              >
-                New Board
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+            <MenuBar
+              size="lg"
+              items={[
+                { value: "all", content: <SortAscending size={16} /> },
+                { value: "recent", content: <SortDescending size={16} /> },
+                { value: "updated", content: <CalendarDots size={16} /> },
+                { value: "created", content: <Eye size={16} /> },
+                { value: "name", content: <Users size={16} /> },
+              ]}
+            />
+          </div>
 
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
-          {resources.map((resource) => (
-            <ResourceCard
-              className="w-full"
-              key={resource.id}
-              color="default"
-              icon={getDatabaseIcon(resource.type)}
-              href={resource.href}
-              title={resource.name}
-              subtitle={getDatabaseFriendlyName(resource.type)}
-              visual={getDatabaseVisual(resource.type)}
-              status={resource.status}
-            >
-              {resource.type === "board" && (
-                <DropdownMenuItem
-                  onClick={() => {
-                    deleteBoardDialog
-                      .show({
-                        workspaceId,
-                        boardId: resource.id,
-                        boardName: resource.name,
-                      })
-                      .then(() => mutate());
-                  }}
-                >
-                  Remove board
-                </DropdownMenuItem>
-              )}
-              {resource.type !== "board" && (
-                <DropdownMenuItem
-                  onClick={() => {
-                    deleteBaseDialog
-                      .show({
-                        workspaceId,
-                        baseId: resource.id,
-                        baseName: resource.name,
-                      })
-                      .then(() => refreshWorkspace());
-                  }}
-                >
-                  Remove
-                </DropdownMenuItem>
-              )}
-            </ResourceCard>
-          ))}
+          {dashboards.length > 0 && (
+            <>
+              <h2 className="text-base font-bold">Boards</h2>
+              <ResourceItemList resources={dashboards} />
+            </>
+          )}
+
+          {dashboards.length > 0 && (
+            <h2 className="text-base font-bold">Bases</h2>
+          )}
+          <ResourceItemList resources={bases} />
         </div>
-      </div>
-    </div>
+      </NavigationLayout>
+    </>
   );
 }
diff --git a/src/app/(outerbase)/workspace-provider.tsx b/src/app/(outerbase)/workspace-provider.tsx
index 2cf1f15b..833e6755 100644
--- a/src/app/(outerbase)/workspace-provider.tsx
+++ b/src/app/(outerbase)/workspace-provider.tsx
@@ -83,7 +83,7 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
       });
 
       mutate(newData, {
-        revalidate: true,
+        revalidate: false,
         optimisticData: newData,
       });
     },
diff --git a/src/app/globals.css b/src/app/globals.css
index 8ff6499a..a68a2010 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -960,3 +960,29 @@
   background-color: #888;
   /* Color of the scrollbar thumb on hover */
 }
+
+/* SVG filters */
+.pixelate {
+  filter: url(#pixelate);
+}
+
+/* Ripple filter */
+.ripple {
+  filter: url(#ripple);
+}
+
+.float {
+  animation: float 5s linear infinite alternate;
+}
+
+@keyframes float {
+  to {
+    transform: translate(5px, 15px);
+  }
+}
+
+@keyframes refresh {
+  to {
+    transform: rotate(360deg) scale(0.9);
+  }
+}
diff --git a/src/components/orbit/banner/index.tsx b/src/components/orbit/banner/index.tsx
new file mode 100644
index 00000000..c906fa04
--- /dev/null
+++ b/src/components/orbit/banner/index.tsx
@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+
+type BannerProps = {
+  children?: React.ReactNode;
+  className: string;
+  filter: React.ReactNode;
+  image: string;
+  onClick?: () => void;
+};
+
+const Banner = ({
+  children,
+  className,
+  filter,
+  image,
+  onClick,
+}: BannerProps) => {
+  return (
+    <div
+      onClick={onClick}
+      className="group relative aspect-video w-full cursor-pointer overflow-hidden rounded-lg bg-neutral-800 p-6 shadow-xl after:absolute after:top-0 after:left-0 after:size-full after:rounded-lg after:border-4 after:border-white/20"
+    >
+      <div className="dither absolute top-0 left-0 z-10 size-full" />
+
+      {children}
+
+      <div className="absolute top-0 left-0 flex size-full scale-105 items-center">
+        {filter}
+
+        <Image
+          src={image}
+          width={600}
+          height={600}
+          className={cn("scale-110", className)}
+          alt="img"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Banner;
diff --git a/src/components/orbit/banner/pixel-filter.tsx b/src/components/orbit/banner/pixel-filter.tsx
new file mode 100644
index 00000000..beb71d09
--- /dev/null
+++ b/src/components/orbit/banner/pixel-filter.tsx
@@ -0,0 +1,38 @@
+export const PixelFilter = () => {
+  return (
+    <svg width="0" height="0" className="absolute top-0 left-0">
+      <defs>
+        <filter id="pixelate" x="0%" y="0%" width="100%" height="100%">
+          <feGaussianBlur
+            stdDeviation="0"
+            in="SourceGraphic"
+            result="smoothed"
+          />
+          <feImage
+            width="10"
+            height="10"
+            xlinkHref="/pixel-grid.svg"
+            result="displacement-map"
+          />
+          <feTile in="displacement-map" result="pixelate-map" />
+          <feDisplacementMap
+            in="smoothed"
+            in2="pixelate-map"
+            xChannelSelector="R"
+            yChannelSelector="G"
+            scale="5"
+            result="pre-final"
+          >
+            <animate
+              attributeName="scale"
+              values="2; 0; 2"
+              dur="1s"
+              repeatCount="indefinite"
+            />
+          </feDisplacementMap>
+          <feComposite operator="in" in2="SourceGraphic" />
+        </filter>
+      </defs>
+    </svg>
+  )
+}
diff --git a/src/components/orbit/banner/ripple-filter.tsx b/src/components/orbit/banner/ripple-filter.tsx
new file mode 100644
index 00000000..bb5b16e0
--- /dev/null
+++ b/src/components/orbit/banner/ripple-filter.tsx
@@ -0,0 +1,25 @@
+const RippleFilter = () => {
+  return (
+    <svg width="0" height="0" className="absolute top-0 left-0">
+      <filter id="ripple" x="0" y="0" width="100%" height="100%">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.1"
+          numOctaves="1"
+          result="turbulence"
+        >
+          <animate
+            attributeName="baseFrequency"
+            values="0.08; 0.1; 0.08"
+            dur="4s"
+            repeatCount="indefinite"
+          />
+        </feTurbulence>
+
+        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="2" />
+      </filter>
+    </svg>
+  )
+}
+
+export default RippleFilter
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index c39a2fdf..5ba4483b 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -1,8 +1,10 @@
 import { cn } from "@/lib/utils";
 import Link from "next/link";
+import { ReactElement } from "react";
 
 interface SidebarMenuItemProps {
   text: string;
+  badge?: ReactElement;
   onClick?: () => void;
   href?: string;
   selected?: boolean;
@@ -13,15 +15,32 @@ interface SidebarMenuHeader {
   text: string;
 }
 
+export function SidebarMenuLoadingItem() {
+  const className =
+    "flex p-2 pl-4 text-sm hover:cursor-pointer h-8 items-center";
+
+  return (
+    <div className={className}>
+      <span className="mr-2 h-4 w-4">
+        <span className="bg-muted inline-flex h-4 w-4 animate-pulse rounded-full"></span>
+      </span>
+      <span className="flex flex-1 items-center text-left">
+        <span className="bg-muted mr-5 inline-flex h-3 w-full animate-pulse rounded-sm"></span>
+      </span>
+    </div>
+  );
+}
+
 export function SidebarMenuItem({
   text,
   onClick,
   icon: IconComponent,
+  badge,
   href,
   selected,
 }: SidebarMenuItemProps) {
   const className =
-    "flex p-2 pl-4 text-sm hover:cursor-pointer hover:bg-secondary";
+    "flex p-2 pl-4 text-sm hover:cursor-pointer hover:bg-secondary h-8 items-center";
 
   const body = (
     <>
@@ -30,7 +49,10 @@ export function SidebarMenuItem({
       ) : (
         <span className="mr-2 h-4 w-4"></span>
       )}
-      {text}
+
+      <span className="flex-1 text-left">{text}</span>
+
+      {badge && badge}
     </>
   );
 
diff --git a/src/lib/utils-datetime.ts b/src/lib/utils-datetime.ts
index eb940510..c8cbb645 100644
--- a/src/lib/utils-datetime.ts
+++ b/src/lib/utils-datetime.ts
@@ -1,6 +1,6 @@
 // https://stackoverflow.com/a/3177838
-export function timeSince(date: Date) {
-  const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+export function timeSince(timestamp: number) {
+  const seconds = Math.floor((new Date().getTime() - timestamp) / 1000);
 
   let interval = seconds / 31536000;
 
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index 8cbb66b8..4fb5eaf0 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -64,6 +64,11 @@ export interface OuterbaseAPIWorkspace {
   short_name: string;
   id: string;
   bases: OuterbaseAPIBase[];
+  is_enterprise: boolean;
+  subscription: {
+    status: "active" | "inactive";
+    plan: "starter" | "growth";
+  };
 }
 
 export interface OuterbaseAPIDashboard {
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index 3193fe06..5ad084b0 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -58,9 +58,11 @@ export async function deleteOuterbaseBase(workspaceId: string, baseId: string) {
   );
 }
 
-export async function getOuterbaseDashboardList(workspaceId: string) {
+export async function getOuterbaseDashboardList(workspaceId?: string) {
   return requestOuterbase<OuterbaseAPIDashboardListResponse>(
-    `/api/v1/workspace/${workspaceId}/dashboard`
+    workspaceId
+      ? `/api/v1/workspace/${workspaceId}/dashboard`
+      : "/api/v1/workspace/dashboard"
   );
 }
 
diff --git a/src/outerbase-cloud/hook.ts b/src/outerbase-cloud/hook.ts
index 2397b818..9ac09b6a 100644
--- a/src/outerbase-cloud/hook.ts
+++ b/src/outerbase-cloud/hook.ts
@@ -1,4 +1,6 @@
 import { useState } from "react";
+import useSWR from "swr";
+import { getOuterbaseDashboardList } from "./api";
 import { OuterbaseAPIError } from "./api-type";
 
 export default function useOuterbaseMutation<
@@ -25,3 +27,21 @@ export default function useOuterbaseMutation<
 
   return { loading, trigger, error };
 }
+
+export function useOuterbaseDashboardList() {
+  const { data, isLoading } = useSWR(
+    "/dashboards",
+    async () => {
+      const result = await getOuterbaseDashboardList();
+      return result.items;
+    },
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      dedupingInterval: 5000,
+      revalidateIfStale: false,
+    }
+  );
+
+  return { data, isLoading };
+}

From f417e8379352022df411b1e46a776a903e3a09df Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Fri, 14 Feb 2025 23:36:17 +0700
Subject: [PATCH 060/106] add dashboard sidebar

---
 src/app/(outerbase)/auth-provider.tsx         |   5 -
 src/app/(outerbase)/nav-board-layout.tsx      | 101 ++++++++++++++++++
 src/app/(outerbase)/nav-header.tsx            |   2 +-
 src/app/(outerbase)/new-resource-button.tsx   |  52 +++++----
 .../w/[workspaceId]/board/[boardId]/page.tsx  |  12 +--
 src/app/(outerbase)/w/[workspaceId]/page.tsx  |   4 +-
 src/components/board/board-canvas.tsx         |   8 +-
 src/components/board/board-chart-editor.tsx   |  16 +--
 src/components/board/board-chart.tsx          |   4 +-
 src/components/board/index.tsx                |  15 +--
 10 files changed, 167 insertions(+), 52 deletions(-)
 create mode 100644 src/app/(outerbase)/nav-board-layout.tsx

diff --git a/src/app/(outerbase)/auth-provider.tsx b/src/app/(outerbase)/auth-provider.tsx
index 5d47e489..61eb9417 100644
--- a/src/app/(outerbase)/auth-provider.tsx
+++ b/src/app/(outerbase)/auth-provider.tsx
@@ -1,5 +1,4 @@
 "use client";
-import PageLoading from "@/components/page-loading";
 import { usePathname, useRouter } from "next/navigation";
 import { PropsWithChildren, useEffect } from "react";
 import { useSession } from "./session-provider";
@@ -17,9 +16,5 @@ export default function AuthProvider({ children }: PropsWithChildren) {
     }
   }, [isLoading, session, pathname, router]);
 
-  if (isLoading || !session) {
-    return <PageLoading>Session Loading...</PageLoading>;
-  }
-
   return <>{children}</>;
 }
diff --git a/src/app/(outerbase)/nav-board-layout.tsx b/src/app/(outerbase)/nav-board-layout.tsx
new file mode 100644
index 00000000..41101e44
--- /dev/null
+++ b/src/app/(outerbase)/nav-board-layout.tsx
@@ -0,0 +1,101 @@
+"use client";
+import { Input } from "@/components/orbit/input";
+import {
+  SidebarMenuHeader,
+  SidebarMenuItem,
+  SidebarMenuLoadingItem,
+} from "@/components/sidebar-menu";
+import { useOuterbaseDashboardList } from "@/outerbase-cloud/hook";
+import { ChartBar, GlobeSimple, MagnifyingGlass } from "@phosphor-icons/react";
+import { useParams, usePathname, useRouter } from "next/navigation";
+import { PropsWithChildren, useMemo } from "react";
+import SidebarProfile from "./sidebar-profile";
+import { useWorkspaces } from "./workspace-provider";
+
+export default function NavigationDashboardLayout({
+  children,
+}: PropsWithChildren) {
+  const router = useRouter();
+  const { currentWorkspace, loading: workspaceLoading } = useWorkspaces();
+  const pathname = usePathname();
+
+  const { data: dashboardList, isLoading: dashboardLoading } =
+    useOuterbaseDashboardList();
+
+  const { boardId } = useParams<{ boardId?: string }>();
+
+  const dashboards = useMemo(() => {
+    if (!currentWorkspace) return [];
+    if (!dashboardList) return [];
+
+    const tmp = (dashboardList ?? []).filter(
+      (board) =>
+        board.workspace_id === currentWorkspace.id && board.base_id === null
+    );
+
+    tmp.sort((a, b) => a.name.localeCompare(b.name));
+    return tmp;
+  }, [dashboardList, currentWorkspace]);
+
+  return (
+    <div className="flex h-screen w-screen">
+      <div className="w-[250px] shrink-0 border-r">
+        <div className="px-2 py-2">
+          <SidebarProfile />
+        </div>
+
+        <div className="px-2">
+          <Input
+            size="base"
+            className="bg-secondary"
+            placeholder="Search for anything"
+            preText={<MagnifyingGlass className="mr-2" />}
+          />
+        </div>
+
+        {currentWorkspace && (
+          <div className="text-primary mt-2 border-b p-3 py-4">
+            <div
+              className="flex cursor-pointer items-center gap-2"
+              onClick={() => router.push(`/w/${currentWorkspace.short_name}`)}
+            >
+              <GlobeSimple weight="bold" className="h-5 w-5" />
+              <span className="font-semibold">{currentWorkspace.name}</span>
+            </div>
+          </div>
+        )}
+
+        <div className="flex flex-col border-b pb-2">
+          <SidebarMenuHeader text="Dashboards" />
+
+          {dashboards.map((board) => {
+            return (
+              <SidebarMenuItem
+                key={board.id}
+                selected={board.id === boardId}
+                text={board.name ?? "Untitled"}
+                icon={ChartBar}
+                onClick={() => {
+                  router.push(
+                    `/w/${currentWorkspace?.short_name}/board/${board.id}`
+                  );
+                }}
+              />
+            );
+          })}
+
+          {(workspaceLoading || dashboardLoading) && (
+            <>
+              <SidebarMenuLoadingItem />
+              <SidebarMenuLoadingItem />
+              <SidebarMenuLoadingItem />
+            </>
+          )}
+        </div>
+      </div>
+      <div className="flex min-h-screen w-full flex-col overflow-y-auto bg-neutral-50 dark:bg-neutral-950">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/nav-header.tsx b/src/app/(outerbase)/nav-header.tsx
index 6b9a42d1..6c32e53e 100644
--- a/src/app/(outerbase)/nav-header.tsx
+++ b/src/app/(outerbase)/nav-header.tsx
@@ -26,7 +26,7 @@ export default function NavigationHeader({ title }: NavigationHeaderProps) {
           Billing
         </li>
 
-        <li className="mr-6 flex flex-1 items-center justify-end font-bold">
+        <li className="flex flex-1 items-center justify-end font-bold">
           {title}
         </li>
       </ul>
diff --git a/src/app/(outerbase)/new-resource-button.tsx b/src/app/(outerbase)/new-resource-button.tsx
index 41b2ddd0..d1b60c2c 100644
--- a/src/app/(outerbase)/new-resource-button.tsx
+++ b/src/app/(outerbase)/new-resource-button.tsx
@@ -78,6 +78,7 @@ export default function NewResourceButton() {
   const rightSideResourceType = RESOURCE_TYPE_LIST.slice(7);
 
   const [search, setSearch] = useState("");
+  const [open, setOpen] = useState(false);
 
   const allResourceType = (
     <>
@@ -181,26 +182,37 @@ export default function NewResourceButton() {
   }, [search]);
 
   return (
-    <DropdownMenu onOpenChange={() => setSearch("")} modal={false}>
-      <DropdownMenuTrigger asChild>
-        <Button variant="primary">
-          New Resource <CaretDown />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-[500px]">
-        <div className="p-2">
-          <Input
-            placeholder="Search"
-            autoFocus
-            className="bg-secondary w-full"
-            value={search}
-            onValueChange={setSearch}
-            preText={<MagnifyingGlass className="mr-2" />}
-          />
-        </div>
+    <>
+      <DropdownMenu
+        onOpenChange={(openState) => {
+          setSearch("");
+          setOpen(openState);
+        }}
+        modal={false}
+      >
+        <DropdownMenuTrigger asChild>
+          <Button variant="primary" className={open ? "z-25" : ""}>
+            New Resource <CaretDown />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-[500px] shadow-xl">
+          <div className="p-2">
+            <Input
+              placeholder="Search"
+              autoFocus
+              className="bg-secondary w-full"
+              value={search}
+              onValueChange={setSearch}
+              preText={<MagnifyingGlass className="mr-2" />}
+            />
+          </div>
 
-        {search ? resourceSearch : allResourceType}
-      </DropdownMenuContent>
-    </DropdownMenu>
+          {search ? resourceSearch : allResourceType}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {open && (
+        <div className="fixed top-0 right-0 bottom-0 left-0 z-20 backdrop-blur-sm"></div>
+      )}
+    </>
   );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index 06ccf89a..7e35ecf3 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import NavigationLayout from "@/app/(outerbase)/nav-layout";
+import NavigationDashboardLayout from "@/app/(outerbase)/nav-board-layout";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import Board from "@/components/board";
 import { Loader } from "@/components/orbit/loader";
+import { WEBSITE_NAME } from "@/const";
 import OuterbaseBoardStorageDriver from "@/drivers/board-storage/outerbase";
 
 import { getOuterbaseDashboard } from "@/outerbase-cloud/api";
@@ -46,8 +47,6 @@ function BoardPageEditor({
     return <div>Loading Workspace....</div>;
   }
 
-  console.log("xxx", filter);
-
   return (
     <Board
       value={value as any}
@@ -72,14 +71,15 @@ export default function BoardPage() {
   });
 
   return (
-    <NavigationLayout>
-      <div className="flex flex-1 overflow-x-hidden overflow-y-auto">
+    <NavigationDashboardLayout>
+      <title>{data?.name ?? WEBSITE_NAME}</title>
+      <div className="relative flex flex-1 overflow-x-hidden overflow-y-auto">
         {data ? (
           <BoardPageEditor initialValue={data} mutate={mutate} />
         ) : (
           <Loader />
         )}
       </div>
-    </NavigationLayout>
+    </NavigationDashboardLayout>
   );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index bca30b98..2b4b5dad 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -23,7 +23,7 @@ import {
 import { useWorkspaces } from "../../workspace-provider";
 
 export default function WorkspaceListPage() {
-  const { currentWorkspace } = useWorkspaces();
+  const { currentWorkspace, loading: workspaceLoading } = useWorkspaces();
   const { data: dashboardList } = useOuterbaseDashboardList();
 
   const bases = useMemo(() => {
@@ -91,7 +91,7 @@ export default function WorkspaceListPage() {
           {dashboards.length > 0 && (
             <h2 className="text-base font-bold">Bases</h2>
           )}
-          <ResourceItemList resources={bases} />
+          <ResourceItemList resources={bases} loading={workspaceLoading} />
         </div>
       </NavigationLayout>
     </>
diff --git a/src/components/board/board-canvas.tsx b/src/components/board/board-canvas.tsx
index b6b85d63..5d4b6ba8 100644
--- a/src/components/board/board-canvas.tsx
+++ b/src/components/board/board-canvas.tsx
@@ -133,7 +133,7 @@ export function BoardCanvas({ value, onChange }: BoardProps) {
     return (
       <div
         key={_.i}
-        className="group bg-background relative flex items-center justify-center rounded-xl bg-white shadow hover:bg-gray-50 dark:bg-neutral-900 dark:text-white"
+        className="group bg-background relative flex items-center justify-center overflow-hidden rounded-xl bg-white shadow hover:bg-gray-50 dark:bg-neutral-900 dark:text-white"
         data-grid={_}
       >
         <BoardChart
@@ -141,7 +141,7 @@ export function BoardCanvas({ value, onChange }: BoardProps) {
         />
         {boardMode?.mode === "REARRANGING_CHART" ? (
           <>
-            <div className="absolute top-4 right-4 z-40 hidden gap-2 group-hover:flex">
+            <div className="absolute top-2 right-2 z-40 hidden gap-2 group-hover:flex">
               {sizes.map((x, index) => {
                 return (
                   <button
@@ -161,7 +161,7 @@ export function BoardCanvas({ value, onChange }: BoardProps) {
                 );
               })}
             </div>
-            <div className="absolute -top-2 -left-2 z-40 hidden group-hover:block">
+            <div className="absolute top-2 left-2 z-40 hidden group-hover:block">
               <button
                 className={cn(
                   buttonVariants({ variant: "default", size: "icon" }),
@@ -205,7 +205,7 @@ export function BoardCanvas({ value, onChange }: BoardProps) {
   });
 
   return (
-    <div className="bg-neutral-100 dark:bg-neutral-950">
+    <div className="min-h-full bg-neutral-100 dark:bg-neutral-950">
       <ReactGridLayout
         cols={4}
         rowHeight={220}
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index b88fe170..898828e9 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -73,12 +73,16 @@ export default function BoardChartEditor({
   const initialChartValue = useCallback(
     (newResult: DatabaseResultSet, sql: string) => {
       setValue((prev) => {
-        return createAutoBoardChartValue(
-          prev,
-          newResult,
-          sql,
-          forcedTheme || resolvedTheme || ""
-        );
+        try {
+          return createAutoBoardChartValue(
+            prev,
+            newResult,
+            sql,
+            forcedTheme || resolvedTheme || ""
+          );
+        } catch {
+          return prev;
+        }
       });
     },
     [forcedTheme, resolvedTheme]
diff --git a/src/components/board/board-chart.tsx b/src/components/board/board-chart.tsx
index 60676844..2406a2e4 100644
--- a/src/components/board/board-chart.tsx
+++ b/src/components/board/board-chart.tsx
@@ -12,8 +12,8 @@ export default function BoardChart({ value }: { value: ChartValue }) {
   const [loading, setLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  const sql = value.params.layers[0].sql;
-  const sourceId = value.source_id;
+  const sql = (value?.params?.layers ?? [])[0]?.sql ?? "";
+  const sourceId = value?.source_id;
 
   const finalSql = useMemo(() => {
     return fillVariables(
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index 668ecf8f..58c69c1e 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -126,12 +126,15 @@ export default function Board({
         </div>
 
         {editMode?.mode === "ADD_CHART" && (
-          <div className="bg-background fixed top-14 bottom-0 left-0 z-50 flex w-screen">
-            <BoardChartEditor
-              onChange={onChange}
-              initialValue={editMode?.chart}
-            />
-          </div>
+          <>
+            <div className="fixed top-0 left-0 z-50 h-full w-full backdrop-blur-sm"></div>
+            <div className="bg-background fixed top-[5%] right-[5%] bottom-[5%] left-[5%] z-50 flex overflow-hidden rounded-lg border-2">
+              <BoardChartEditor
+                onChange={onChange}
+                initialValue={editMode?.chart}
+              />
+            </div>
+          </>
         )}
       </div>
     </BoardProvider>

From 95fa169d84385f321db03d5761795520fbf08e41 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Fri, 14 Feb 2025 23:44:18 +0700
Subject: [PATCH 061/106] fixing build error

---
 src/app/(outerbase)/nav-board-layout.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/(outerbase)/nav-board-layout.tsx b/src/app/(outerbase)/nav-board-layout.tsx
index 41101e44..4067380a 100644
--- a/src/app/(outerbase)/nav-board-layout.tsx
+++ b/src/app/(outerbase)/nav-board-layout.tsx
@@ -7,7 +7,7 @@ import {
 } from "@/components/sidebar-menu";
 import { useOuterbaseDashboardList } from "@/outerbase-cloud/hook";
 import { ChartBar, GlobeSimple, MagnifyingGlass } from "@phosphor-icons/react";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { PropsWithChildren, useMemo } from "react";
 import SidebarProfile from "./sidebar-profile";
 import { useWorkspaces } from "./workspace-provider";
@@ -17,7 +17,6 @@ export default function NavigationDashboardLayout({
 }: PropsWithChildren) {
   const router = useRouter();
   const { currentWorkspace, loading: workspaceLoading } = useWorkspaces();
-  const pathname = usePathname();
 
   const { data: dashboardList, isLoading: dashboardLoading } =
     useOuterbaseDashboardList();

From a7d77f05f14e70437834cd9bee839eb90ddb392b Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sat, 15 Feb 2025 01:36:50 +0700
Subject: [PATCH 062/106] make sure filter null base

---
 src/app/(outerbase)/recent-page.tsx          | 6 +++++-
 src/app/(outerbase)/resource-item-helper.tsx | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app/(outerbase)/recent-page.tsx b/src/app/(outerbase)/recent-page.tsx
index 1569a227..6d6ee1ba 100644
--- a/src/app/(outerbase)/recent-page.tsx
+++ b/src/app/(outerbase)/recent-page.tsx
@@ -17,7 +17,11 @@ export default function RecentResource() {
 
   const recentBases = useMemo(() => {
     const bases = workspaces
-      .map((w) => w.bases.map((base) => getResourceItemPropsFromBase(w, base)))
+      .map((w) =>
+        w.bases
+          .filter(Boolean)
+          .map((base) => getResourceItemPropsFromBase(w, base))
+      )
       .flat();
 
     const dashboards = workspaces
diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
index bdb050dd..9c82ff95 100644
--- a/src/app/(outerbase)/resource-item-helper.tsx
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -30,7 +30,9 @@ export function getResourceItemPropsFromBase(
     type: base.sources[0]?.type ?? "database",
     name: base.name,
     href: `/w/${workspace.short_name}/${base.short_name}`,
-    lastUsed: new Date(base.last_analytics_event.created_at).getTime(),
+    lastUsed: base.last_analytics_event?.created_at
+      ? new Date(base.last_analytics_event?.created_at).getTime()
+      : 0,
   };
 }
 

From d1bebc895f65d52a2bc65e07552012858a8ffb08 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 17 Feb 2025 11:59:39 +0700
Subject: [PATCH 063/106] Add local board (#365)

* add local board

* slightly rework board
---
 .../local/board/[boardId]/page.tsx            |  79 ++++++++++++++
 .../(outerbase)/local/dialog-board-create.tsx |  67 ++++++++++++
 src/app/(outerbase)/local/hooks.tsx           |  36 +++++++
 src/app/(outerbase)/local/page.tsx            |  93 ++++++++++++++++
 src/app/(outerbase)/nav-board-layout.tsx      |  55 +++++-----
 src/app/(outerbase)/nav-layout.tsx            |  27 ++---
 src/app/(outerbase)/new-resource-button.tsx   |  11 +-
 src/app/(outerbase)/page.tsx                  |  31 +++++-
 src/app/(outerbase)/recent-page.tsx           |  87 ---------------
 src/app/(outerbase)/resource-item-helper.tsx  |  26 ++++-
 .../w/[workspaceId]/board/[boardId]/page.tsx  |  39 ++++++-
 .../w/[workspaceId]/dialog-board-create.tsx   |   2 +-
 src/app/(outerbase)/w/[workspaceId]/page.tsx  |  43 +++++---
 src/app/storybook/board/page.tsx              |  32 ------
 src/app/storybook/chart-editor/page.tsx       |   2 -
 src/components/chart/chart-type.ts            |   2 -
 src/components/sidebar-menu.tsx               |  11 +-
 src/drivers/board-source/local.tsx            |  75 +++++++++++++
 src/drivers/board-storage/local.ts            |  53 +++++++++
 src/drivers/helpers.ts                        |  31 ++++++
 src/indexdb.ts                                |  15 ++-
 src/outerbase-cloud/api-type.ts               |  47 ++------
 src/outerbase-cloud/database-source/index.tsx | 102 +-----------------
 src/outerbase-cloud/hook.ts                   |   4 +-
 24 files changed, 625 insertions(+), 345 deletions(-)
 create mode 100644 src/app/(outerbase)/local/board/[boardId]/page.tsx
 create mode 100644 src/app/(outerbase)/local/dialog-board-create.tsx
 create mode 100644 src/app/(outerbase)/local/hooks.tsx
 create mode 100644 src/app/(outerbase)/local/page.tsx
 delete mode 100644 src/app/(outerbase)/recent-page.tsx
 delete mode 100644 src/app/storybook/board/page.tsx
 create mode 100644 src/drivers/board-source/local.tsx
 create mode 100644 src/drivers/board-storage/local.ts
 create mode 100644 src/drivers/helpers.ts

diff --git a/src/app/(outerbase)/local/board/[boardId]/page.tsx b/src/app/(outerbase)/local/board/[boardId]/page.tsx
new file mode 100644
index 00000000..1a4abdb0
--- /dev/null
+++ b/src/app/(outerbase)/local/board/[boardId]/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+import NavigationDashboardLayout from "@/app/(outerbase)/nav-board-layout";
+import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
+import Board, { DashboardProps } from "@/components/board";
+import { BoardSourceDriver } from "@/drivers/board-source/base-source";
+import LocalBoardSource from "@/drivers/board-source/local";
+import LocalBoardStorage from "@/drivers/board-storage/local";
+import { LocalDashboardData } from "@/indexdb";
+import { useParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { useLocalDashboardList } from "../../hooks";
+
+function LocalBoardWithDataPage({
+  initialValue,
+}: {
+  initialValue: LocalDashboardData;
+}) {
+  const [interval, setIntervals] = useState<number>(0);
+  const [filter, setFilter] = useState({});
+  const [value, setValue] = useState<DashboardProps>(initialValue);
+
+  const [boardSources, setBoardSources] = useState<BoardSourceDriver>();
+  const boardStorage = useMemo(() => {
+    return new LocalBoardStorage(initialValue);
+  }, [initialValue]);
+
+  // Loading the local board source
+  useEffect(() => {
+    const sources = SavedConnectionLocalStorage.getDetailList();
+    setBoardSources(new LocalBoardSource(sources));
+  }, []);
+
+  if (!boardSources) return <div>Loading</div>;
+
+  return (
+    <Board
+      value={value}
+      onChange={setValue}
+      storage={boardStorage}
+      filterValue={filter}
+      onFilterValueChange={setFilter}
+      sources={boardSources}
+      interval={interval}
+      onChangeInterval={setIntervals}
+    />
+  );
+}
+
+export default function LocalBoardPage() {
+  const { boardId } = useParams<{
+    boardId: string;
+  }>();
+
+  const { data, isLoading } = useLocalDashboardList();
+  const board = data?.find((b) => b.id === boardId);
+
+  const dashboardList = useMemo(() => {
+    return (data ?? []).map((board) => {
+      return {
+        href: `/local/board/${board.id}`,
+        name: board.content.name,
+        id: board.id,
+      };
+    });
+  }, [data]);
+
+  if (!board) return <div>Loading...</div>;
+
+  return (
+    <NavigationDashboardLayout
+      boards={dashboardList}
+      workspaceName="Local"
+      loading={isLoading}
+      backHref="/local"
+    >
+      <LocalBoardWithDataPage initialValue={board.content} />
+    </NavigationDashboardLayout>
+  );
+}
diff --git a/src/app/(outerbase)/local/dialog-board-create.tsx b/src/app/(outerbase)/local/dialog-board-create.tsx
new file mode 100644
index 00000000..8c3d968c
--- /dev/null
+++ b/src/app/(outerbase)/local/dialog-board-create.tsx
@@ -0,0 +1,67 @@
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { LocalDashboardData } from "@/indexdb";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+import { createLocalDashboard } from "./hooks";
+
+export const createLocalBoardDialog = createDialog<
+  object,
+  LocalDashboardData | undefined
+>(({ close }) => {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState("");
+
+  const createBoardClicked = useCallback(() => {
+    if (name.length === 0) return;
+
+    setLoading(true);
+
+    createLocalDashboard(name)
+      .then((createdBoard) => {
+        close(createdBoard);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [close, name]);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>New Board</DialogTitle>
+        <DialogDescription></DialogDescription>
+      </DialogHeader>
+
+      <div>
+        <LabelInput
+          label="Board name"
+          placeholder="Untitled Board"
+          value={name}
+          required
+          onChange={(e) => setName(e.currentTarget.value)}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button
+          disabled={loading || name.length === 0}
+          onClick={createBoardClicked}
+        >
+          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}
+          Create Board
+        </Button>
+        <Button variant={"secondary"} onClick={() => close(undefined)}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </>
+  );
+});
diff --git a/src/app/(outerbase)/local/hooks.tsx b/src/app/(outerbase)/local/hooks.tsx
new file mode 100644
index 00000000..34711c10
--- /dev/null
+++ b/src/app/(outerbase)/local/hooks.tsx
@@ -0,0 +1,36 @@
+import { LocalDashboardData, localDb } from "@/indexdb";
+import useSWR from "swr";
+
+export function useLocalDashboardList() {
+  return useSWR(
+    "/dashboards/local",
+    () => {
+      return localDb.board.toCollection().toArray();
+    },
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      revalidateIfStale: false,
+    }
+  );
+}
+
+export async function createLocalDashboard(boardName: string) {
+  const id = crypto.randomUUID();
+  const now = Date.now();
+
+  const data: LocalDashboardData = {
+    id,
+    created_at: now,
+    updated_at: now,
+    name: boardName,
+    layout: [],
+    charts: [],
+    data: {
+      filters: [],
+    },
+  };
+
+  await localDb.table("board").add({ id, content: data });
+  return data;
+}
diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
new file mode 100644
index 00000000..c042ab22
--- /dev/null
+++ b/src/app/(outerbase)/local/page.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import {
+  SavedConnectionItem,
+  SavedConnectionLocalStorage,
+} from "@/app/(theme)/connect/saved-connection-storage";
+import { MySQLIcon, SQLiteIcon } from "@/components/icons/outerbase-icon";
+import { CaretDown } from "@phosphor-icons/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import NavigationHeader from "../nav-header";
+import NavigationLayout from "../nav-layout";
+import NewResourceButton from "../new-resource-button";
+import { ResourceItemList, ResourceItemProps } from "../resource-item-helper";
+import { createLocalBoardDialog } from "./dialog-board-create";
+import { useLocalDashboardList } from "./hooks";
+
+export default function LocalConnectionPage() {
+  const [baseResources, setBaseResources] = useState<ResourceItemProps[]>([]);
+
+  useEffect(() => {
+    setBaseResources(
+      SavedConnectionLocalStorage.getList().map((conn: SavedConnectionItem) => {
+        return {
+          href: `/client/s/${conn.driver}?p=${conn.id}`,
+          name: conn.name,
+          lastUsed: 0,
+          id: conn.id,
+          type: conn.driver,
+          status: "",
+        } as ResourceItemProps;
+      })
+    );
+  }, []);
+
+  // Getting the board from indexdb
+  const { data: dashboardList, mutate: refreshDashboard } =
+    useLocalDashboardList();
+  const dashboardResources = useMemo(() => {
+    return (
+      (dashboardList ?? []).map((board) => {
+        return {
+          href: `/local/board/${board.id}`,
+          name: board.content.name,
+          lastUsed: board.content.updated_at,
+          id: board.id,
+          type: "board",
+        } as ResourceItemProps;
+      }) ?? []
+    );
+  }, [dashboardList]);
+
+  const onCreateBoardClicked = useCallback(() => {
+    createLocalBoardDialog.show({}).then(() => {
+      refreshDashboard(undefined, { revalidate: true });
+    });
+  }, [refreshDashboard]);
+
+  return (
+    <NavigationLayout>
+      <NavigationHeader title={"Local Worksapce"} />
+      <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
+        <div className="flex gap-2">
+          <NewResourceButton onCreateBoard={onCreateBoardClicked} />
+        </div>
+
+        <div className="my-4 flex gap-4">
+          <button className="bg-background dark:bg-secondary flex items-center gap-2 rounded-lg border p-4">
+            <SQLiteIcon className="h-10 w-10" />
+            <div className="flex flex-col gap-1 text-left">
+              <span className="text-base font-bold">SQLite Playgorund</span>
+              <span className="text-sm">
+                Launch in-memory SQLite on browser
+              </span>
+            </div>
+            <CaretDown className="ml-4 h-4 w-4" />
+          </button>
+
+          <button className="bg-background dark:bg-secondary flex items-center gap-2 rounded-lg border p-4">
+            <MySQLIcon className="h-10 w-10" />
+            <div className="flex flex-col gap-1 text-left">
+              <span className="text-base font-bold">MySQL Playgorund</span>
+              <span className="text-sm">
+                Spin up cloud MySQL sandbox instance
+              </span>
+            </div>
+          </button>
+        </div>
+
+        <ResourceItemList boards={dashboardResources} bases={baseResources} />
+      </div>
+    </NavigationLayout>
+  );
+}
diff --git a/src/app/(outerbase)/nav-board-layout.tsx b/src/app/(outerbase)/nav-board-layout.tsx
index 4067380a..3e6e5ca0 100644
--- a/src/app/(outerbase)/nav-board-layout.tsx
+++ b/src/app/(outerbase)/nav-board-layout.tsx
@@ -5,37 +5,32 @@ import {
   SidebarMenuItem,
   SidebarMenuLoadingItem,
 } from "@/components/sidebar-menu";
-import { useOuterbaseDashboardList } from "@/outerbase-cloud/hook";
 import { ChartBar, GlobeSimple, MagnifyingGlass } from "@phosphor-icons/react";
 import { useParams, useRouter } from "next/navigation";
-import { PropsWithChildren, useMemo } from "react";
+import { PropsWithChildren } from "react";
 import SidebarProfile from "./sidebar-profile";
-import { useWorkspaces } from "./workspace-provider";
+
+interface NavigationDashboardLayoutProps {
+  boards?: {
+    name: string;
+    id: string;
+    href: string;
+  }[];
+  workspaceName?: string;
+  backHref?: string;
+  loading?: boolean;
+}
 
 export default function NavigationDashboardLayout({
   children,
-}: PropsWithChildren) {
+  backHref,
+  boards,
+  workspaceName,
+  loading,
+}: PropsWithChildren<NavigationDashboardLayoutProps>) {
   const router = useRouter();
-  const { currentWorkspace, loading: workspaceLoading } = useWorkspaces();
-
-  const { data: dashboardList, isLoading: dashboardLoading } =
-    useOuterbaseDashboardList();
-
   const { boardId } = useParams<{ boardId?: string }>();
 
-  const dashboards = useMemo(() => {
-    if (!currentWorkspace) return [];
-    if (!dashboardList) return [];
-
-    const tmp = (dashboardList ?? []).filter(
-      (board) =>
-        board.workspace_id === currentWorkspace.id && board.base_id === null
-    );
-
-    tmp.sort((a, b) => a.name.localeCompare(b.name));
-    return tmp;
-  }, [dashboardList, currentWorkspace]);
-
   return (
     <div className="flex h-screen w-screen">
       <div className="w-[250px] shrink-0 border-r">
@@ -52,14 +47,16 @@ export default function NavigationDashboardLayout({
           />
         </div>
 
-        {currentWorkspace && (
+        {!loading && (
           <div className="text-primary mt-2 border-b p-3 py-4">
             <div
               className="flex cursor-pointer items-center gap-2"
-              onClick={() => router.push(`/w/${currentWorkspace.short_name}`)}
+              onClick={() => {
+                if (backHref) router.push(backHref);
+              }}
             >
               <GlobeSimple weight="bold" className="h-5 w-5" />
-              <span className="font-semibold">{currentWorkspace.name}</span>
+              <span className="font-semibold">{workspaceName}</span>
             </div>
           </div>
         )}
@@ -67,7 +64,7 @@ export default function NavigationDashboardLayout({
         <div className="flex flex-col border-b pb-2">
           <SidebarMenuHeader text="Dashboards" />
 
-          {dashboards.map((board) => {
+          {(boards ?? []).map((board) => {
             return (
               <SidebarMenuItem
                 key={board.id}
@@ -75,15 +72,13 @@ export default function NavigationDashboardLayout({
                 text={board.name ?? "Untitled"}
                 icon={ChartBar}
                 onClick={() => {
-                  router.push(
-                    `/w/${currentWorkspace?.short_name}/board/${board.id}`
-                  );
+                  router.push(board.href);
                 }}
               />
             );
           })}
 
-          {(workspaceLoading || dashboardLoading) && (
+          {loading && (
             <>
               <SidebarMenuLoadingItem />
               <SidebarMenuLoadingItem />
diff --git a/src/app/(outerbase)/nav-layout.tsx b/src/app/(outerbase)/nav-layout.tsx
index a40f5c5f..ccf82bcd 100644
--- a/src/app/(outerbase)/nav-layout.tsx
+++ b/src/app/(outerbase)/nav-layout.tsx
@@ -5,13 +5,7 @@ import {
   SidebarMenuItem,
   SidebarMenuLoadingItem,
 } from "@/components/sidebar-menu";
-import {
-  Clock,
-  Database,
-  MagnifyingGlass,
-  Plus,
-  Star,
-} from "@phosphor-icons/react";
+import { Database, MagnifyingGlass, Plus } from "@phosphor-icons/react";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { PropsWithChildren } from "react";
 import NavigationSigninBanner from "./nav-signin-banner";
@@ -40,21 +34,14 @@ export default function NavigationLayout({ children }: PropsWithChildren) {
           />
         </div>
 
-        <div className="flex flex-col border-b py-2">
-          <SidebarMenuItem
-            text="Recent"
-            icon={Clock}
-            selected={pathname === "/"}
-            onClick={() => {
-              router.push("/");
-            }}
-          />
-          <SidebarMenuItem text="Favorite" icon={Star} />
-        </div>
-
         <div className="flex flex-col border-b pb-2">
           <SidebarMenuHeader text="Workspace" />
-          <SidebarMenuItem text="Local Workspace" icon={Database} />
+          <SidebarMenuItem
+            selected={pathname === "/local"}
+            text="Local Workspace"
+            icon={Database}
+            href="/local"
+          />
 
           {workspaces.map((workspace) => {
             return (
diff --git a/src/app/(outerbase)/new-resource-button.tsx b/src/app/(outerbase)/new-resource-button.tsx
index d1b60c2c..e86ed2c7 100644
--- a/src/app/(outerbase)/new-resource-button.tsx
+++ b/src/app/(outerbase)/new-resource-button.tsx
@@ -73,7 +73,11 @@ const RESOURCE_TYPE_LIST: ResourceType[] = [
   { name: "Redshift", icon: Database, enterprise: true },
 ];
 
-export default function NewResourceButton() {
+interface NewResourceProps {
+  onCreateBoard?: () => void;
+}
+
+export default function NewResourceButton({ onCreateBoard }: NewResourceProps) {
   const leftSideResourceType = RESOURCE_TYPE_LIST.slice(0, 7);
   const rightSideResourceType = RESOURCE_TYPE_LIST.slice(7);
 
@@ -83,7 +87,10 @@ export default function NewResourceButton() {
   const allResourceType = (
     <>
       <div className="flex gap-4 p-2">
-        <button className="bg-secondary flex w-[250px] items-center gap-4 rounded p-2 px-4 text-left text-base">
+        <button
+          className="bg-secondary flex w-[250px] cursor-pointer items-center gap-4 rounded p-2 px-4 text-left text-base"
+          onClick={onCreateBoard}
+        >
           <ChartBar className="h-8 w-8" />
           <div>
             <div className="font-semibold">Board</div>
diff --git a/src/app/(outerbase)/page.tsx b/src/app/(outerbase)/page.tsx
index 99afc61e..92d8fa29 100644
--- a/src/app/(outerbase)/page.tsx
+++ b/src/app/(outerbase)/page.tsx
@@ -1,12 +1,39 @@
 "use client";
 
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 import NavigationLayout from "./nav-layout";
-import RecentResource from "./recent-page";
+import { ResourceItemList } from "./resource-item-helper";
+import { useSession } from "./session-provider";
+import { useWorkspaces } from "./workspace-provider";
 
 export default function OuterbaseMainPage() {
+  const router = useRouter();
+  const { isLoading: sessionLoading, session } = useSession();
+  const { workspaces, loading: workspaceLoading } = useWorkspaces();
+
+  useEffect(() => {
+    if (sessionLoading) return;
+
+    // Invalid session, go to local connection
+    if (!session) {
+      router.push("/local");
+    }
+
+    if (workspaceLoading) return;
+    if (!workspaces) return;
+
+    // Redirect to the first workspace
+    if (workspaces.length > 0) {
+      router.push(`/w/${workspaces[0].short_name}`);
+    }
+  }, [session, sessionLoading, workspaceLoading, workspaces, router]);
+
   return (
     <NavigationLayout>
-      <RecentResource />
+      <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
+        <ResourceItemList boards={[]} bases={[]} loading />
+      </div>
     </NavigationLayout>
   );
 }
diff --git a/src/app/(outerbase)/recent-page.tsx b/src/app/(outerbase)/recent-page.tsx
deleted file mode 100644
index 6d6ee1ba..00000000
--- a/src/app/(outerbase)/recent-page.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { MySQLIcon, SQLiteIcon } from "@/components/icons/outerbase-icon";
-import { MenuBar } from "@/components/orbit/menu-bar";
-import { useOuterbaseDashboardList } from "@/outerbase-cloud/hook";
-import { CaretDown } from "@phosphor-icons/react";
-import { useMemo } from "react";
-import NavigationHeader from "./nav-header";
-import {
-  getResourceItemPropsFromBase,
-  getResourceItemPropsFromBoard,
-  ResourceItemList,
-} from "./resource-item-helper";
-import { useWorkspaces } from "./workspace-provider";
-
-export default function RecentResource() {
-  const { workspaces, loading: workspaceLoading } = useWorkspaces();
-  const { data: dashboardList } = useOuterbaseDashboardList();
-
-  const recentBases = useMemo(() => {
-    const bases = workspaces
-      .map((w) =>
-        w.bases
-          .filter(Boolean)
-          .map((base) => getResourceItemPropsFromBase(w, base))
-      )
-      .flat();
-
-    const dashboards = workspaces
-      .map((w) => {
-        return (
-          dashboardList
-            ?.filter(
-              (board) => board.workspace_id === w.id && board.base_id === null
-            )
-            .map((board) => {
-              return getResourceItemPropsFromBoard(w, board);
-            }) ?? []
-        );
-      })
-      .flat();
-
-    return [...bases, ...dashboards].sort((a, b) => b.lastUsed - a.lastUsed);
-  }, [workspaces, dashboardList]);
-
-  const resources = recentBases;
-
-  return (
-    <>
-      <NavigationHeader title="Recent" />
-      <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
-        <div className="mb-8 flex gap-4">
-          <button className="bg-background dark:bg-secondary flex items-center gap-2 rounded-lg border p-4">
-            <SQLiteIcon className="h-10 w-10" />
-            <div className="flex flex-col gap-1 text-left">
-              <span className="text-base font-bold">SQLite Playgorund</span>
-              <span className="text-sm">
-                Launch in-memory SQLite on browser
-              </span>
-            </div>
-            <CaretDown className="ml-4 h-4 w-4" />
-          </button>
-
-          <button className="bg-background dark:bg-secondary flex items-center gap-2 rounded-lg border p-4">
-            <MySQLIcon className="h-10 w-10" />
-            <div className="flex flex-col gap-1 text-left">
-              <span className="text-base font-bold">MySQL Playgorund</span>
-              <span className="text-sm">
-                Spin up cloud MySQL sandbox instance
-              </span>
-            </div>
-          </button>
-        </div>
-
-        <div>
-          <MenuBar
-            value={"recent-view"}
-            items={[
-              { content: "Recent viewed", value: "recent-view" },
-              { content: "Recent created", value: "recent-create" },
-            ]}
-          />
-        </div>
-
-        <ResourceItemList resources={resources} loading={workspaceLoading} />
-      </div>
-    </>
-  );
-}
diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
index 9c82ff95..1a85d9b9 100644
--- a/src/app/(outerbase)/resource-item-helper.tsx
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -49,7 +49,7 @@ export function getResourceItemPropsFromBoard(
   };
 }
 
-export function ResourceItemList({
+function ResourceItemSection({
   resources,
   loading,
 }: {
@@ -87,3 +87,27 @@ export function ResourceItemList({
     </div>
   );
 }
+
+export function ResourceItemList({
+  bases,
+  boards,
+  loading,
+}: {
+  bases: ResourceItemProps[];
+  boards: ResourceItemProps[];
+  loading?: boolean;
+}) {
+  return (
+    <>
+      {boards.length > 0 && (
+        <>
+          <h2 className="text-base font-bold">Boards</h2>
+          <ResourceItemSection resources={boards} />
+        </>
+      )}
+
+      {boards.length > 0 && <h2 className="text-base font-bold">Bases</h2>}
+      <ResourceItemSection resources={bases} loading={loading} />
+    </>
+  );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index 7e35ecf3..607c7d9a 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -2,7 +2,7 @@
 
 import NavigationDashboardLayout from "@/app/(outerbase)/nav-board-layout";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
-import Board from "@/components/board";
+import Board, { DashboardProps } from "@/components/board";
 import { Loader } from "@/components/orbit/loader";
 import { WEBSITE_NAME } from "@/const";
 import OuterbaseBoardStorageDriver from "@/drivers/board-storage/outerbase";
@@ -10,6 +10,7 @@ import OuterbaseBoardStorageDriver from "@/drivers/board-storage/outerbase";
 import { getOuterbaseDashboard } from "@/outerbase-cloud/api";
 import { OuterbaseAPIDashboardDetail } from "@/outerbase-cloud/api-type";
 import OuterbaseBoardSourceDriver from "@/outerbase-cloud/database-source";
+import { useOuterbaseDashboardList } from "@/outerbase-cloud/hook";
 import { useParams } from "next/navigation";
 import { useMemo, useState } from "react";
 import useSWR, { KeyedMutator } from "swr";
@@ -40,7 +41,7 @@ function BoardPageEditor({
     );
   }, [boardId, currentWorkspace]);
 
-  const [value, setValue] = useState(initialValue);
+  const [value, setValue] = useState<DashboardProps>(initialValue);
   const [filter, setFilter] = useState({});
 
   if (!boardSources) {
@@ -49,8 +50,8 @@ function BoardPageEditor({
 
   return (
     <Board
-      value={value as any}
-      onChange={setValue as any}
+      value={value}
+      onChange={setValue}
       filterValue={filter}
       onFilterValueChange={setFilter}
       sources={boardSources}
@@ -70,8 +71,36 @@ export default function BoardPage() {
     return getOuterbaseDashboard(workspaceId, boardId);
   });
 
+  const { currentWorkspace, loading: workspaceLoading } = useWorkspaces();
+  const { data: dashboardList, isLoading: dashboardLoading } =
+    useOuterbaseDashboardList();
+
+  const dashboards = useMemo(() => {
+    if (!currentWorkspace) return [];
+    if (!dashboardList) return [];
+
+    const tmp = (dashboardList ?? []).filter(
+      (board) =>
+        board.workspace_id === currentWorkspace.id && board.base_id === null
+    );
+
+    tmp.sort((a, b) => a.name.localeCompare(b.name));
+    return tmp.map((board) => {
+      return {
+        id: board.id,
+        name: board.name,
+        href: `/w/${currentWorkspace.short_name}/board/${board.id}`,
+      };
+    });
+  }, [dashboardList, currentWorkspace]);
+
   return (
-    <NavigationDashboardLayout>
+    <NavigationDashboardLayout
+      loading={workspaceLoading || dashboardLoading}
+      boards={dashboards}
+      workspaceName={currentWorkspace?.name}
+      backHref={`/w/${workspaceId}`}
+    >
       <title>{data?.name ?? WEBSITE_NAME}</title>
       <div className="relative flex flex-1 overflow-x-hidden overflow-y-auto">
         {data ? (
diff --git a/src/app/(outerbase)/w/[workspaceId]/dialog-board-create.tsx b/src/app/(outerbase)/w/[workspaceId]/dialog-board-create.tsx
index 6e47dd8b..eb194bc9 100644
--- a/src/app/(outerbase)/w/[workspaceId]/dialog-board-create.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/dialog-board-create.tsx
@@ -1,6 +1,6 @@
 import { createDialog } from "@/components/create-dialog";
 import LabelInput from "@/components/label-input";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
 import {
   DialogDescription,
   DialogFooter,
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 2b4b5dad..4144a603 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -11,7 +11,8 @@ import {
   SortDescending,
   Users,
 } from "@phosphor-icons/react";
-import { useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo } from "react";
 import NavigationHeader from "../../nav-header";
 import NavigationLayout from "../../nav-layout";
 import NewResourceButton from "../../new-resource-button";
@@ -21,10 +22,13 @@ import {
   ResourceItemList,
 } from "../../resource-item-helper";
 import { useWorkspaces } from "../../workspace-provider";
+import { createBoardDialog } from "./dialog-board-create";
 
 export default function WorkspaceListPage() {
+  const router = useRouter();
   const { currentWorkspace, loading: workspaceLoading } = useWorkspaces();
-  const { data: dashboardList } = useOuterbaseDashboardList();
+  const { data: dashboardList, mutate: refreshDashboardList } =
+    useOuterbaseDashboardList();
 
   const bases = useMemo(() => {
     if (!currentWorkspace) return [];
@@ -52,6 +56,23 @@ export default function WorkspaceListPage() {
     );
   }, [currentWorkspace, dashboardList]);
 
+  const onCreateBoardClicked = useCallback(() => {
+    if (!currentWorkspace) return;
+
+    createBoardDialog
+      .show({
+        workspaceId: currentWorkspace.id,
+      })
+      .then((createdBoard) => {
+        if (!createdBoard) return;
+
+        refreshDashboardList();
+        router.push(
+          `/w/${currentWorkspace.short_name}/board/${createdBoard.id}`
+        );
+      });
+  }, [currentWorkspace, router, refreshDashboardList]);
+
   return (
     <>
       <title>{currentWorkspace?.name ?? "Untitled"}</title>
@@ -60,7 +81,7 @@ export default function WorkspaceListPage() {
 
         <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
           <div className="flex gap-2">
-            <NewResourceButton />
+            <NewResourceButton onCreateBoard={onCreateBoardClicked} />
 
             <Input
               preText={<MagnifyingGlass className="mr-2" />}
@@ -81,17 +102,11 @@ export default function WorkspaceListPage() {
             />
           </div>
 
-          {dashboards.length > 0 && (
-            <>
-              <h2 className="text-base font-bold">Boards</h2>
-              <ResourceItemList resources={dashboards} />
-            </>
-          )}
-
-          {dashboards.length > 0 && (
-            <h2 className="text-base font-bold">Bases</h2>
-          )}
-          <ResourceItemList resources={bases} loading={workspaceLoading} />
+          <ResourceItemList
+            bases={bases}
+            boards={dashboards}
+            loading={workspaceLoading}
+          />
         </div>
       </NavigationLayout>
     </>
diff --git a/src/app/storybook/board/page.tsx b/src/app/storybook/board/page.tsx
deleted file mode 100644
index 82eb12d7..00000000
--- a/src/app/storybook/board/page.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-"use client";
-import { BoardFilterProps } from "@/components/board/board-filter-dialog";
-import { useState } from "react";
-import ReactGridLayout from "react-grid-layout";
-
-interface DashboardProps {
-  layout: ReactGridLayout.Layout[];
-  data: {
-    filters: BoardFilterProps[];
-  };
-}
-
-export default function StorybookBoardPage() {
-  const [value, setValue] = useState<DashboardProps>({
-    layout: [
-      { x: 0, y: 0, w: 1, h: 1, i: "0" },
-      { x: 1, y: 0, w: 1, h: 1, i: "1" },
-      { x: 2, y: 0, w: 1, h: 1, i: "2" },
-      { x: 3, y: 0, w: 1, h: 1, i: "3" },
-    ],
-    data: { filters: [] },
-  });
-
-  // console.log(value);
-
-  return (
-    <div className="relative h-full w-full flex-1">
-      {/* <Board value={value} setValue={setValue} /> */}
-    </div>
-  );
-}
diff --git a/src/app/storybook/chart-editor/page.tsx b/src/app/storybook/chart-editor/page.tsx
index e06eddd5..c41564c6 100644
--- a/src/app/storybook/chart-editor/page.tsx
+++ b/src/app/storybook/chart-editor/page.tsx
@@ -53,7 +53,6 @@ const data: ChartData[] = [
 const lineChartValue: ChartValue = {
   suggestedChartType: [],
   connection_id: null,
-  created_at: "2025-01-31T08:44:04.868Z",
   id: "94019f17-a1e0-4db2-b89e-4457cbed3ce4",
   model: "chart",
   name: "New Chart",
@@ -87,7 +86,6 @@ const lineChartValue: ChartValue = {
   },
   source_id: "856a1855-2bee-4d87-9756-a783088c0568",
   type: "line",
-  updated_at: "2025-02-09T07:58:17.571Z",
   workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
 };
 
diff --git a/src/components/chart/chart-type.ts b/src/components/chart/chart-type.ts
index 514b6737..e592b20c 100644
--- a/src/components/chart/chart-type.ts
+++ b/src/components/chart/chart-type.ts
@@ -59,7 +59,6 @@ export interface ChartParams {
 
 export interface ChartValue {
   connection_id?: string | null;
-  created_at?: string;
   id?: string;
   model?: string;
   name?: string;
@@ -67,7 +66,6 @@ export interface ChartValue {
   source_id?: string;
   type?: ChartType;
   suggestedChartType?: ChartType[];
-  updated_at?: string;
   workspace_id?: string;
   description?: string;
 }
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 5ba4483b..ff7b7f36 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -59,14 +59,21 @@ export function SidebarMenuItem({
   if (href) {
     if (href.startsWith("https://")) {
       return (
-        <Link href={href} className={className} target="_blank">
+        <Link
+          href={href}
+          className={cn(className, selected ? "bg-selected" : "")}
+          target="_blank"
+        >
           {body}
         </Link>
       );
     }
 
     return (
-      <Link href={href} className={className}>
+      <Link
+        href={href}
+        className={cn(className, selected ? "bg-selected" : "")}
+      >
         {body}
       </Link>
     );
diff --git a/src/drivers/board-source/local.tsx b/src/drivers/board-source/local.tsx
new file mode 100644
index 00000000..54755528
--- /dev/null
+++ b/src/drivers/board-source/local.tsx
@@ -0,0 +1,75 @@
+import { SavedConnectionItemDetail } from "@/app/(theme)/connect/saved-connection-storage";
+import { BaseDriver, DatabaseResultSet, DatabaseSchemas } from "../base-driver";
+import { createLocalDriver } from "../helpers";
+import { BoardSource, BoardSourceDriver } from "./base-source";
+
+export default class LocalBoardSource extends BoardSourceDriver {
+  protected sources: SavedConnectionItemDetail[];
+  protected drivers: Record<string, BaseDriver> = {};
+
+  protected cacheSchemas: Record<
+    string,
+    {
+      schema: DatabaseSchemas;
+      selectedSchema: string;
+    }
+  > = {};
+
+  constructor(sources: SavedConnectionItemDetail[]) {
+    super();
+    this.sources = sources;
+  }
+
+  sourceList(): BoardSource[] {
+    return this.sources.map((source) => {
+      return {
+        id: source.id,
+        name: source.name,
+        type: source.driver ?? "sqlite",
+      };
+    });
+  }
+
+  getDriver(sourceId: string) {
+    const source = this.sources.find((s) => s.id === sourceId);
+
+    if (!source) {
+      throw new Error("Source does not exist");
+    }
+
+    if (!this.drivers[sourceId]) {
+      this.drivers[sourceId] = createLocalDriver(source);
+    }
+
+    return this.drivers[sourceId];
+  }
+
+  query(sourceId: string, statement: string): Promise<DatabaseResultSet> {
+    const driver = this.getDriver(sourceId);
+
+    if (!driver) {
+      throw new Error("Soruce does not exist");
+    }
+
+    return driver.query(statement);
+  }
+
+  async schemas(sourceId: string) {
+    const driver = this.getDriver(sourceId);
+
+    if (this.cacheSchemas[sourceId]) {
+      return this.cacheSchemas[sourceId];
+    }
+
+    this.cacheSchemas[sourceId] = {
+      schema: await driver.schemas(),
+      selectedSchema: driver.getFlags().defaultSchema,
+    };
+
+    return this.cacheSchemas[sourceId];
+  }
+
+  cleanup(): void {
+    // do nothing
+  }
+}
diff --git a/src/drivers/board-storage/local.ts b/src/drivers/board-storage/local.ts
new file mode 100644
index 00000000..139119e0
--- /dev/null
+++ b/src/drivers/board-storage/local.ts
@@ -0,0 +1,53 @@
+import { DashboardProps } from "@/components/board";
+import { ChartValue } from "@/components/chart/chart-type";
+import { LocalDashboardData, localDb } from "@/indexdb";
+import { IBoardStorageDriver } from "./base";
+
+export default class LocalBoardStorage implements IBoardStorageDriver {
+  constructor(protected board: LocalDashboardData) {}
+
+  async add(chart: ChartValue): Promise<ChartValue | undefined> {
+    const id = crypto.randomUUID();
+    const now = Date.now();
+
+    const data: ChartValue = {
+      ...chart,
+      id,
+    };
+
+    this.board.charts.push(data);
+    this.board.updated_at = now;
+
+    localDb.board.put({ id: this.board.id, content: this.board });
+    return data;
+  }
+
+  async remove(chartId: string): Promise<void> {
+    this.board.charts = this.board.charts.filter((v) => v.id !== chartId);
+    localDb.board.put({ id: this.board.id, content: this.board });
+  }
+
+  async save(value: DashboardProps): Promise<void> {
+    const now = Date.now();
+    const newValue: LocalDashboardData = {
+      ...this.board,
+      ...value,
+      updated_at: now,
+    };
+
+    localDb.board.put({ id: this.board.id, content: newValue });
+  }
+
+  async update(
+    chartId: string,
+    chart: ChartValue
+  ): Promise<ChartValue | undefined> {
+    const index = this.board.charts.findIndex((v) => v.id === chartId);
+    if (index === -1) return Promise.resolve(undefined);
+
+    this.board.charts[index] = chart;
+
+    localDb.board.put({ id: this.board.id, content: this.board });
+    return chart;
+  }
+}
diff --git a/src/drivers/helpers.ts b/src/drivers/helpers.ts
new file mode 100644
index 00000000..1819f826
--- /dev/null
+++ b/src/drivers/helpers.ts
@@ -0,0 +1,31 @@
+import { SavedConnectionItemConfig } from "@/app/(theme)/connect/saved-connection-storage";
+import CloudflareD1Driver from "./cloudflare-d1-driver";
+import RqliteDriver from "./rqlite-driver";
+import StarbaseDriver from "./starbase-driver";
+import TursoDriver from "./turso-driver";
+import ValtownDriver from "./valtown-driver";
+
+export function createLocalDriver(conn: SavedConnectionItemConfig) {
+  if (conn.driver === "rqlite") {
+    return new RqliteDriver(
+      conn.config.url,
+      conn.config.username,
+      conn.config.password
+    );
+  } else if (conn.driver === "valtown") {
+    return new ValtownDriver(conn.config.token);
+  } else if (conn.driver === "cloudflare-d1") {
+    return new CloudflareD1Driver("/proxy/d1", {
+      Authorization: "Bearer " + conn.config.token,
+      "x-account-id": conn.config.username ?? "",
+      "x-database-id": conn.config.database ?? "",
+    });
+  } else if (conn.driver === "starbase") {
+    return new StarbaseDriver("/proxy/starbase", {
+      Authorization: "Bearer " + (conn.config.token ?? ""),
+      "x-starbase-url": conn.config.url ?? "",
+    });
+  }
+
+  return new TursoDriver(conn.config.url, conn.config.token, true);
+}
diff --git a/src/indexdb.ts b/src/indexdb.ts
index b86dc493..e34b630c 100644
--- a/src/indexdb.ts
+++ b/src/indexdb.ts
@@ -1,5 +1,11 @@
 import Dexie, { EntityTable } from "dexie";
+import { DashboardProps } from "./components/board";
 
+export interface LocalDashboardData extends DashboardProps {
+  id: string;
+  created_at: number;
+  updated_at: number;
+}
 interface IndexDbNamespace {
   id: string;
   database_id: string;
@@ -24,16 +30,23 @@ interface IndexDbFileHandler {
   handler: FileSystemFileHandle;
 }
 
+interface IndexDbBoard {
+  id: string;
+  content: LocalDashboardData;
+}
+
 const localDb = new Dexie("libstudio") as Dexie & {
   namespace: EntityTable<IndexDbNamespace, "id">;
   saved_doc: EntityTable<IndexDbDoc, "id">;
   file_handler: EntityTable<IndexDbFileHandler, "id">;
+  board: EntityTable<IndexDbBoard, "id">;
 };
 
-localDb.version(2).stores({
+localDb.version(3).stores({
   namespace: "++id, database_id",
   saved_doc: "++id, database_id, namespace_id",
   file_handler: "++id, handler",
+  board: "++id",
 });
 
 export { localDb };
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index 4fb5eaf0..b40a2a50 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -1,3 +1,5 @@
+import { DashboardProps } from "@/components/board";
+import { ChartValue } from "@/components/chart/chart-type";
 import { ColumnHeader, ResultStat } from "@outerbase/sdk-transform";
 
 export interface OuterbaseDatabaseConfig {
@@ -81,15 +83,6 @@ export interface OuterbaseAPIDashboard {
   type: "dashboard";
   name: string;
   workspace_id: string;
-  layout: {
-    h: number;
-    i: string;
-    w: number;
-    x: number;
-    y: number;
-    max_h: number;
-    max_w: number;
-  }[];
 }
 
 export interface OuterbaseAPIQuery {
@@ -99,36 +92,8 @@ export interface OuterbaseAPIQuery {
   query: string;
   source_id: string;
 }
-export interface OuterbaseAPIDashboardChart {
-  connection_id: string | null;
-  created_at: string;
-  id: string;
-  model: "chart";
-  name: string;
-  params: {
-    id: string;
-    name: string;
-    type: string;
-    model: string;
-    apiKey: string;
-    layers: {
-      sql: string;
-      type: string;
-    }[];
-    options: {
-      xAxisKey: string;
-    };
-    source_id: string;
-    created_at: string;
-    updated_at: string;
-    workspace_id: string;
-    connection_id: string | null;
-  };
+export interface OuterbaseAPIDashboardChart extends ChartValue {
   result?: OuterbaseAPIQueryRaw;
-  source_id: string;
-  type: string;
-  updated_at: string;
-  workspace_id: string;
 }
 
 export interface OuterbaseAPISession {
@@ -152,9 +117,9 @@ export interface OuterbaseAPIUser {
   first_name: string;
 }
 
-export interface OuterbaseAPIDashboardDetail extends OuterbaseAPIDashboard {
-  charts: OuterbaseAPIDashboardChart[];
-}
+export interface OuterbaseAPIDashboardDetail
+  extends OuterbaseAPIDashboard,
+    DashboardProps {}
 
 export interface OuterbaseAPIWorkspaceResponse {
   items: OuterbaseAPIWorkspace[];
diff --git a/src/outerbase-cloud/database-source/index.tsx b/src/outerbase-cloud/database-source/index.tsx
index 060b194e..e9b849ca 100644
--- a/src/outerbase-cloud/database-source/index.tsx
+++ b/src/outerbase-cloud/database-source/index.tsx
@@ -1,8 +1,4 @@
-import { ChartValue } from "@/components/chart/chart-type";
-import {
-  OuterbaseAPIDashboardDetail,
-  OuterbaseAPIWorkspace,
-} from "@/outerbase-cloud/api-type";
+import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
 import { createOuterbaseDatabaseDriver } from "@/outerbase-cloud/database/utils";
 import {
   BaseDriver,
@@ -13,11 +9,6 @@ import {
   BoardSource,
   BoardSourceDriver,
 } from "../../drivers/board-source/base-source";
-import {
-  deleteOuterbaseDashboardChart,
-  updateOuterbaseDashboard,
-} from "../api";
-import { createOuterbaseDashboardChart } from "../api-board";
 
 export default class OuterbaseBoardSourceDriver implements BoardSourceDriver {
   protected workspace: OuterbaseAPIWorkspace;
@@ -95,95 +86,4 @@ export default class OuterbaseBoardSourceDriver implements BoardSourceDriver {
   cleanup(): void {
     // do nothing
   }
-
-  async onLayoutSave(
-    boardId: string,
-    value: OuterbaseAPIDashboardDetail
-  ): Promise<unknown> {
-    const input = {
-      base_id: null,
-      chart_ids: value.chart_ids
-        ? value.chart_ids
-        : Array.from(new Set(value.charts.map((v) => v.id))),
-      data: (value as any).data,
-      layout: value.layout.map(({ w, h, i, x, y }) => ({ w, h, x, y, i })),
-      directory_index: (value as any).directory_index,
-      name: value.name,
-      type: value.type,
-    };
-
-    return await updateOuterbaseDashboard(this.workspace.name, boardId, input);
-  }
-
-  async onLayoutRemove(
-    chartId: string,
-    boardId: string,
-    value: OuterbaseAPIDashboardDetail
-  ): Promise<unknown> {
-    const input: OuterbaseAPIDashboardDetail = {
-      ...value,
-      chart_ids: value.chart_ids.filter((f) => f !== chartId),
-      layout: value.layout.filter((f) => f.i !== chartId),
-      charts: value.charts.filter((f) => f.id !== chartId),
-    };
-    const deleteChart = await deleteOuterbaseDashboardChart(
-      this.workspace.name,
-      chartId
-    );
-    if (deleteChart) {
-      return await this.onLayoutSave(boardId, input);
-    }
-    return false;
-  }
-
-  async onAddChart(
-    boardId: string,
-    chart: ChartValue,
-    value: OuterbaseAPIDashboardDetail
-  ): Promise<ChartValue | undefined> {
-    if (!chart.source_id) return;
-    if (!chart.type) return;
-
-    const chartValue = {
-      source_id: chart.source_id,
-      params: {
-        ...chart.params,
-        source_id: chart.source_id,
-        workspace_id: this.workspace.name,
-        layers: chart.params.layers.map((layer) => {
-          return {
-            ...layer,
-            type: chart.type!,
-          };
-        }),
-      },
-      type: chart.type,
-      name: chart.name ?? "",
-    };
-
-    const request = await createOuterbaseDashboardChart(
-      this.workspace.name,
-      chartValue
-    );
-    if (request.id) {
-      await this.onLayoutSave(boardId, {
-        ...value,
-        chart_ids: [...value.chart_ids, request.id],
-        layout: [
-          ...value.layout,
-          {
-            i: request.id,
-            x: 0,
-            y: 2,
-            w: 2,
-            h: 2,
-            max_h: 0,
-            max_w: 0,
-          },
-        ],
-      });
-
-      return request;
-    }
-  }
 }
diff --git a/src/outerbase-cloud/hook.ts b/src/outerbase-cloud/hook.ts
index 9ac09b6a..783d3aa1 100644
--- a/src/outerbase-cloud/hook.ts
+++ b/src/outerbase-cloud/hook.ts
@@ -29,7 +29,7 @@ export default function useOuterbaseMutation<
 }
 
 export function useOuterbaseDashboardList() {
-  const { data, isLoading } = useSWR(
+  const { data, isLoading, mutate } = useSWR(
     "/dashboards",
     async () => {
       const result = await getOuterbaseDashboardList();
@@ -43,5 +43,5 @@ export function useOuterbaseDashboardList() {
     }
   );
 
-  return { data, isLoading };
+  return { data, isLoading, mutate };
 }

From 13375b5288cfc55ce2addca0161cd52e60b3c8d1 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Mon, 17 Feb 2025 18:54:26 +0700
Subject: [PATCH 064/106] remake board navigation and add remove board and base
 for outerbase

---
 src/app/(outerbase)/nav-board-layout.tsx     |  39 ++-----
 src/app/(outerbase)/resource-item-helper.tsx | 115 ++++++++++++-------
 src/app/(outerbase)/w/[workspaceId]/page.tsx |  47 +++++++-
 3 files changed, 130 insertions(+), 71 deletions(-)

diff --git a/src/app/(outerbase)/nav-board-layout.tsx b/src/app/(outerbase)/nav-board-layout.tsx
index 3e6e5ca0..7b6a6af4 100644
--- a/src/app/(outerbase)/nav-board-layout.tsx
+++ b/src/app/(outerbase)/nav-board-layout.tsx
@@ -1,14 +1,12 @@
 "use client";
-import { Input } from "@/components/orbit/input";
 import {
   SidebarMenuHeader,
   SidebarMenuItem,
   SidebarMenuLoadingItem,
 } from "@/components/sidebar-menu";
-import { ChartBar, GlobeSimple, MagnifyingGlass } from "@phosphor-icons/react";
+import { CaretLeft, ChartBar } from "@phosphor-icons/react";
 import { useParams, useRouter } from "next/navigation";
 import { PropsWithChildren } from "react";
-import SidebarProfile from "./sidebar-profile";
 
 interface NavigationDashboardLayoutProps {
   boards?: {
@@ -34,34 +32,17 @@ export default function NavigationDashboardLayout({
   return (
     <div className="flex h-screen w-screen">
       <div className="w-[250px] shrink-0 border-r">
-        <div className="px-2 py-2">
-          <SidebarProfile />
+        <div
+          className="flex h-12 cursor-pointer items-center gap-2 border-b px-2 text-base font-bold"
+          onClick={() => {
+            if (backHref) router.push(backHref);
+          }}
+        >
+          <CaretLeft weight="bold" />
+          <span>{workspaceName}</span>
         </div>
 
-        <div className="px-2">
-          <Input
-            size="base"
-            className="bg-secondary"
-            placeholder="Search for anything"
-            preText={<MagnifyingGlass className="mr-2" />}
-          />
-        </div>
-
-        {!loading && (
-          <div className="text-primary mt-2 border-b p-3 py-4">
-            <div
-              className="flex cursor-pointer items-center gap-2"
-              onClick={() => {
-                if (backHref) router.push(backHref);
-              }}
-            >
-              <GlobeSimple weight="bold" className="h-5 w-5" />
-              <span className="font-semibold">{workspaceName}</span>
-            </div>
-          </div>
-        )}
-
-        <div className="flex flex-col border-b pb-2">
+        <div className="flex flex-col pb-2">
           <SidebarMenuHeader text="Dashboards" />
 
           {(boards ?? []).map((board) => {
diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
index 1a85d9b9..868e8691 100644
--- a/src/app/(outerbase)/resource-item-helper.tsx
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -4,12 +4,14 @@ import {
   getDatabaseIcon,
   getDatabaseVisual,
 } from "@/components/resource-card/utils";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { timeSince } from "@/lib/utils-datetime";
 import {
   OuterbaseAPIBase,
   OuterbaseAPIDashboard,
   OuterbaseAPIWorkspace,
 } from "@/outerbase-cloud/api-type";
+import { Trash } from "@phosphor-icons/react";
 import ResourceCardLoading from "./resource-card-loading";
 
 export interface ResourceItemProps {
@@ -49,65 +51,96 @@ export function getResourceItemPropsFromBoard(
   };
 }
 
-function ResourceItemSection({
-  resources,
-  loading,
-}: {
-  resources: ResourceItemProps[];
-  loading?: boolean;
-}) {
-  return (
-    <div className="flex grid grid-cols-1 flex-wrap gap-4 min-[700px]:grid-cols-2 min-[900px]:grid-cols-3 min-[1200px]:grid-cols-4 min-[1500px]:grid-cols-5 min-[1800px]:grid-cols-6 min-[2100px]:grid-cols-7">
-      {loading && (
-        <>
-          <ResourceCardLoading />
-          <ResourceCardLoading />
-          <ResourceCardLoading />
-          <ResourceCardLoading />
-        </>
-      )}
-
-      {resources.map((resource) => {
-        const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
-
-        return (
-          <ResourceCard
-            className="w-full"
-            key={resource.id}
-            color="default"
-            icon={getDatabaseIcon(resource.type)}
-            href={resource.href}
-            title={resource.name}
-            subtitle={getDatabaseFriendlyName(resource.type)}
-            visual={getDatabaseVisual(resource.type)}
-            status={status}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
 export function ResourceItemList({
   bases,
   boards,
   loading,
+  onBoardRemove,
+  onBaseRemove,
 }: {
   bases: ResourceItemProps[];
   boards: ResourceItemProps[];
   loading?: boolean;
+  onBoardRemove?: (item: ResourceItemProps) => void;
+  onBaseRemove?: (item: ResourceItemProps) => void;
 }) {
   return (
     <>
       {boards.length > 0 && (
         <>
           <h2 className="text-base font-bold">Boards</h2>
-          <ResourceItemSection resources={boards} />
+          <div className="flex grid grid-cols-1 flex-wrap gap-4 min-[700px]:grid-cols-2 min-[900px]:grid-cols-3 min-[1200px]:grid-cols-4 min-[1500px]:grid-cols-5 min-[1800px]:grid-cols-6 min-[2100px]:grid-cols-7">
+            {boards.map((resource: ResourceItemProps) => {
+              const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
+
+              return (
+                <ResourceCard
+                  className="w-full"
+                  key={resource.id}
+                  color="default"
+                  icon={getDatabaseIcon(resource.type)}
+                  href={resource.href}
+                  title={resource.name}
+                  subtitle={getDatabaseFriendlyName(resource.type)}
+                  visual={getDatabaseVisual(resource.type)}
+                  status={status}
+                >
+                  <DropdownMenuItem
+                    className="text-red-500 focus:text-red-500"
+                    onClick={() => {
+                      if (onBoardRemove) onBoardRemove(resource);
+                    }}
+                  >
+                    <Trash size={16} className="mr-2" />
+                    Remove board
+                  </DropdownMenuItem>
+                </ResourceCard>
+              );
+            })}
+          </div>
         </>
       )}
 
       {boards.length > 0 && <h2 className="text-base font-bold">Bases</h2>}
-      <ResourceItemSection resources={bases} loading={loading} />
+
+      <div className="flex grid grid-cols-1 flex-wrap gap-4 min-[700px]:grid-cols-2 min-[900px]:grid-cols-3 min-[1200px]:grid-cols-4 min-[1500px]:grid-cols-5 min-[1800px]:grid-cols-6 min-[2100px]:grid-cols-7">
+        {loading && (
+          <>
+            <ResourceCardLoading />
+            <ResourceCardLoading />
+            <ResourceCardLoading />
+            <ResourceCardLoading />
+          </>
+        )}
+
+        {bases.map((resource: ResourceItemProps) => {
+          const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
+
+          return (
+            <ResourceCard
+              className="w-full"
+              key={resource.id}
+              color="default"
+              icon={getDatabaseIcon(resource.type)}
+              href={resource.href}
+              title={resource.name}
+              subtitle={getDatabaseFriendlyName(resource.type)}
+              visual={getDatabaseVisual(resource.type)}
+              status={status}
+            >
+              <DropdownMenuItem
+                className="text-red-500 focus:text-red-500"
+                onClick={() => {
+                  if (onBaseRemove) onBaseRemove(resource);
+                }}
+              >
+                <Trash size={16} className="mr-2" />
+                Remove base
+              </DropdownMenuItem>
+            </ResourceCard>
+          );
+        })}
+      </div>
     </>
   );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 4144a603..5ca07f93 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -20,13 +20,20 @@ import {
   getResourceItemPropsFromBase,
   getResourceItemPropsFromBoard,
   ResourceItemList,
+  ResourceItemProps,
 } from "../../resource-item-helper";
 import { useWorkspaces } from "../../workspace-provider";
+import { deleteBaseDialog } from "./dialog-base-delete";
 import { createBoardDialog } from "./dialog-board-create";
+import { deleteBoardDialog } from "./dialog-board-delete";
 
 export default function WorkspaceListPage() {
   const router = useRouter();
-  const { currentWorkspace, loading: workspaceLoading } = useWorkspaces();
+  const {
+    currentWorkspace,
+    loading: workspaceLoading,
+    refreshWorkspace,
+  } = useWorkspaces();
   const { data: dashboardList, mutate: refreshDashboardList } =
     useOuterbaseDashboardList();
 
@@ -56,6 +63,42 @@ export default function WorkspaceListPage() {
     );
   }, [currentWorkspace, dashboardList]);
 
+  const onDeleteBoardClicked = useCallback(
+    (deletedResource: ResourceItemProps) => {
+      if (!currentWorkspace) return;
+
+      deleteBoardDialog
+        .show({
+          workspaceId: currentWorkspace.id,
+          boardId: deletedResource.id,
+          boardName: deletedResource.name,
+        })
+        .then(() => {
+          refreshDashboardList();
+        })
+        .catch();
+    },
+    [currentWorkspace, refreshDashboardList]
+  );
+
+  const onDeleteBaseClicked = useCallback(
+    (deletedResource: ResourceItemProps) => {
+      if (!currentWorkspace) return;
+
+      deleteBaseDialog
+        .show({
+          workspaceId: currentWorkspace.id,
+          baseId: deletedResource.id,
+          baseName: deletedResource.name,
+        })
+        .then(() => {
+          refreshWorkspace();
+        })
+        .catch();
+    },
+    [currentWorkspace, refreshWorkspace]
+  );
+
   const onCreateBoardClicked = useCallback(() => {
     if (!currentWorkspace) return;
 
@@ -106,6 +149,8 @@ export default function WorkspaceListPage() {
             bases={bases}
             boards={dashboards}
             loading={workspaceLoading}
+            onBoardRemove={onDeleteBoardClicked}
+            onBaseRemove={onDeleteBaseClicked}
           />
         </div>
       </NavigationLayout>

From 758926c305ac093b715a15e8d3eb307c485b9e1d Mon Sep 17 00:00:00 2001
From: Sokphal Adam <31284849+sokphaladam@users.noreply.github.com>
Date: Tue, 18 Feb 2025 07:11:11 +0700
Subject: [PATCH 065/106] support create table pg (#366)

* try to use outerbase board data with our board

* refactor: improve board canvas item mapping and tooltip structure

* refactor: enhance toggle item styling based on edit mode

* plug chart inside

* require workspace to load

* refactor: menu layout and create refresh board

* refactor: improve chart component imports and style definitions

* add header and loading

* refactor: update BoardTool and BoardProvider components

* refactor: improve board canvas item mapping and save edit layout

* refactor: remove console.log statement

* refactor: improve board page editor and board component

* feat: Export  interface for external use

* feat: Refactor chart management functions and integrate context for layout operations

* refactor the board storage

* feat: Add board filter input component and dialog

* postgres create table support and fixed board tool position

* disable auto increment when database is postgres

* improve create table pg

* enable column modification support in Postgres driver and enhance constraint handling in schema generation

---------

Co-authored-by: Visal .In <invisal@gmail.com>
Co-authored-by: sokphaladam <sokphaladam@sokphaladams-MacBook-Air.local>
---
 src/components/board/board-provider.tsx       |   3 +
 .../board/board-tool/board-tool.tsx           |  14 +-
 src/components/board/index.tsx                |  15 +-
 .../column-default-value-input.tsx            |  38 +--
 src/components/gui/schema-editor/index.tsx    |  62 ++---
 .../schema-editor-column-list.tsx             |  76 +++---
 src/components/gui/schema-sidebar-list.tsx    |  34 ++-
 src/components/gui/table-optimized/index.tsx  |  20 +-
 .../gui/table-optimized/table-cell.tsx        |   6 +-
 .../gui/table-result/render-cell.tsx          |  10 +-
 src/components/gui/tabs/schema-editor-tab.tsx |   7 +-
 src/components/my-studio.tsx                  |  12 +-
 src/drivers/postgres/generate-schema.ts       | 250 ++++++++++++++++++
 src/drivers/postgres/postgres-data-type.ts    | 150 +++++++++++
 src/drivers/postgres/postgres-driver.ts       |  44 ++-
 15 files changed, 599 insertions(+), 142 deletions(-)
 create mode 100644 src/drivers/postgres/generate-schema.ts
 create mode 100644 src/drivers/postgres/postgres-data-type.ts

diff --git a/src/components/board/board-provider.tsx b/src/components/board/board-provider.tsx
index b5767da0..9459df9f 100644
--- a/src/components/board/board-provider.tsx
+++ b/src/components/board/board-provider.tsx
@@ -4,6 +4,7 @@ import { noop } from "lodash";
 import {
   createContext,
   Dispatch,
+  MutableRefObject,
   PropsWithChildren,
   SetStateAction,
   useContext,
@@ -27,6 +28,7 @@ interface BoardContextProps {
   filterValue: Record<string, string>;
   onFilterValueChange?: (value: Record<string, string>) => void;
   resolvedFilterValue: Record<string, string>;
+  refMainBoard: MutableRefObject<HTMLDivElement | null>;
 }
 
 const BoardContext = createContext<BoardContextProps>({
@@ -36,6 +38,7 @@ const BoardContext = createContext<BoardContextProps>({
   filterValue: {},
   onFilterValueChange: noop,
   resolvedFilterValue: {},
+  refMainBoard: { current: null },
 });
 
 export function useBoardContext() {
diff --git a/src/components/board/board-tool/board-tool.tsx b/src/components/board/board-tool/board-tool.tsx
index 68a1ca7d..f18c0f54 100644
--- a/src/components/board/board-tool/board-tool.tsx
+++ b/src/components/board/board-tool/board-tool.tsx
@@ -3,14 +3,24 @@ import { ChartLine, ImageUpscale } from "lucide-react";
 import { useBoardContext } from "../board-provider";
 
 export function BoardTool() {
-  const { boardMode, setBoardMode } = useBoardContext();
+  const { boardMode, setBoardMode, refMainBoard } = useBoardContext();
 
   if (boardMode?.mode === "ADD_CHART") {
     return null;
   }
 
+  if (!refMainBoard.current) {
+    return null;
+  }
+
+  const rect = refMainBoard.current.getBoundingClientRect();
+  const centerX = rect.left + rect.width / 2;
+
   return (
-    <div className="reveal animate-revealMenu fixed bottom-6 left-[50%] z-100 flex -translate-x-[50%] gap-1 rounded-xl bg-neutral-800 p-1 text-neutral-100 shadow-lg dark:bg-white dark:text-neutral-900">
+    <div
+      style={{ left: centerX }}
+      className="reveal animate-revealMenu fixed bottom-6 z-100 flex -translate-x-[50%] gap-1 rounded-xl bg-neutral-800 p-1 text-neutral-100 shadow-lg dark:bg-white dark:text-neutral-900"
+    >
       <Button
         variant="primary"
         shape="square"
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index 58c69c1e..8682ba8a 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -1,6 +1,6 @@
 import { BoardSourceDriver } from "@/drivers/board-source/base-source";
 import { IBoardStorageDriver } from "@/drivers/board-storage/base";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ChartValue } from "../chart/chart-type";
 import { BoardCanvas } from "./board-canvas";
 import BoardChartEditor from "./board-chart-editor";
@@ -43,6 +43,7 @@ export default function Board({
   filterValue,
   onFilterValueChange,
 }: Props) {
+  const refMainBoard = useRef<HTMLDivElement | null>(null);
   const [editMode, setEditMode] = useState<BoardEditorMode>(null);
 
   const autoRefresh = [
@@ -99,8 +100,9 @@ export default function Board({
       value={value}
       resolvedFilterValue={resolvedFilterValue}
       onFilterValueChange={onFilterValueChange}
+      refMainBoard={refMainBoard}
     >
-      <div className="relative flex flex-1 flex-col">
+      <div className="relative flex flex-1 flex-col" ref={refMainBoard}>
         <BoardFilter
           value={value}
           onChange={onChange}
@@ -136,6 +138,15 @@ export default function Board({
             </div>
           </>
         )}
+
+        {editMode?.mode === "ADD_CHART" && (
+          <div className="bg-background fixed top-14 bottom-0 left-0 z-50 flex w-screen">
+            <BoardChartEditor
+              onChange={onChange}
+              initialValue={editMode?.chart}
+            />
+          </div>
+        )}
       </div>
     </BoardProvider>
   );
diff --git a/src/components/gui/schema-editor/column-default-value-input.tsx b/src/components/gui/schema-editor/column-default-value-input.tsx
index a47d39a7..c7aa7e3b 100644
--- a/src/components/gui/schema-editor/column-default-value-input.tsx
+++ b/src/components/gui/schema-editor/column-default-value-input.tsx
@@ -2,13 +2,14 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import {
   Popover,
-  PopoverTrigger,
   PopoverContent,
+  PopoverTrigger,
 } from "@/components/ui/popover";
+import { useDatabaseDriver } from "@/context/driver-provider";
+import { DatabaseTableColumnConstraint } from "@/drivers/base-driver";
 import { ChevronsUpDown } from "lucide-react";
 import { ChangeEvent, useCallback, useMemo } from "react";
 import { Input } from "../../ui/input";
-import { DatabaseTableColumnConstraint } from "@/drivers/base-driver";
 
 export default function ColumnDefaultValueInput({
   constraint,
@@ -19,6 +20,7 @@ export default function ColumnDefaultValueInput({
   disabled?: boolean;
   onChange: (constraint: DatabaseTableColumnConstraint) => void;
 }>) {
+  const { databaseDriver } = useDatabaseDriver();
   const display = useMemo(() => {
     if (
       constraint?.defaultValue !== undefined &&
@@ -115,12 +117,12 @@ export default function ColumnDefaultValueInput({
 
   return (
     <Popover>
-      <PopoverTrigger className="h-full flex w-full">
-        <div className="flex text-left px-2 py-2 text-sm h-full bg-background">
-          <div className="grow w-[150px] overflow-hidden mr-2">
+      <PopoverTrigger className="flex h-full w-full">
+        <div className="bg-background flex h-full px-2 py-2 text-left text-sm">
+          <div className="mr-2 w-[150px] grow overflow-hidden">
             {display || "EMPTY STRING"}
           </div>
-          <div className="text-gray-400 flex items-center">
+          <div className="flex items-center text-gray-400">
             <ChevronsUpDown size={14} />
           </div>
         </div>
@@ -136,15 +138,17 @@ export default function ColumnDefaultValueInput({
             />
             <Label htmlFor="no-default-value">No Default Value</Label>
           </div>
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="auto-increment"
-              disabled={disabled}
-              checked={!!constraint?.autoIncrement}
-              onCheckedChange={onAutoIncrementChange}
-            />
-            <Label htmlFor="auto-increment">Autoincrement</Label>
-          </div>
+          {databaseDriver.getFlags().dialect !== "postgres" && (
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="auto-increment"
+                disabled={disabled}
+                checked={!!constraint?.autoIncrement}
+                onCheckedChange={onAutoIncrementChange}
+              />
+              <Label htmlFor="auto-increment">Autoincrement</Label>
+            </div>
+          )}
           <div className="flex items-center space-x-2">
             <Checkbox
               id="custom-value"
@@ -154,7 +158,7 @@ export default function ColumnDefaultValueInput({
             />
             <Label htmlFor="custom-value">Custom Value</Label>
           </div>
-          <div className="flex mt-2 mb-2">
+          <div className="mt-2 mb-2 flex">
             <Input
               readOnly={disabled}
               placeholder="Default Value"
@@ -171,7 +175,7 @@ export default function ColumnDefaultValueInput({
             />
             <Label htmlFor="custom-expression">Custom Expression</Label>
           </div>
-          <div className="flex mt-2 mb-2">
+          <div className="mt-2 mb-2 flex">
             <Input
               readOnly={disabled}
               placeholder="Expression"
diff --git a/src/components/gui/schema-editor/index.tsx b/src/components/gui/schema-editor/index.tsx
index 2cc81146..836c7430 100644
--- a/src/components/gui/schema-editor/index.tsx
+++ b/src/components/gui/schema-editor/index.tsx
@@ -1,18 +1,18 @@
+import { useDatabaseDriver } from "@/context/driver-provider";
+import { DatabaseTableSchemaChange } from "@/drivers/base-driver";
+import { checkSchemaChange } from "@/lib/sql/sql-generate.schema";
 import { LucideCode, LucideCopy, LucidePlus, LucideSave } from "lucide-react";
-import { Separator } from "../../ui/separator";
 import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
+import { toast } from "sonner";
 import { Button, buttonVariants } from "../../ui/button";
-import SchemaEditorColumnList from "./schema-editor-column-list";
 import { Input } from "../../ui/input";
-import SchemaEditorConstraintList from "./schema-editor-constraint-list";
-import { ColumnsProvider } from "./column-provider";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+import { Separator } from "../../ui/separator";
 import CodePreview from "../code-preview";
-import { toast } from "sonner";
-import { DatabaseTableSchemaChange } from "@/drivers/base-driver";
-import { useDatabaseDriver } from "@/context/driver-provider";
+import { ColumnsProvider } from "./column-provider";
+import SchemaEditorColumnList from "./schema-editor-column-list";
+import SchemaEditorConstraintList from "./schema-editor-constraint-list";
 import SchemaNameSelect from "./schema-name-select";
-import { checkSchemaChange } from "@/lib/sql/sql-generate.schema";
 
 interface Props {
   onSave: () => void;
@@ -34,17 +34,17 @@ export default function SchemaEditor({
     const newColumn =
       value.columns.length === 0
         ? {
-          name: "id",
-          type: databaseDriver.columnTypeSelector.idTypeName ?? "INTEGER",
-          constraint: {
-            primaryKey: true,
-          },
-        }
+            name: "id",
+            type: databaseDriver.columnTypeSelector.idTypeName ?? "INTEGER",
+            constraint: {
+              primaryKey: true,
+            },
+          }
         : {
-          name: "column",
-          type: databaseDriver.columnTypeSelector.textTypeName ?? "TEXT",
-          constraint: {},
-        };
+            name: "column",
+            type: databaseDriver.columnTypeSelector.textTypeName ?? "TEXT",
+            constraint: {},
+          };
 
     onChange({
       ...value,
@@ -72,16 +72,16 @@ export default function SchemaEditor({
   }, [databaseDriver]);
 
   return (
-    <div className="w-full h-full flex flex-col">
-      <div className="grow-0 shrink-0">
-        <div className="p-1 flex gap-2">
+    <div className="flex h-full w-full flex-col">
+      <div className="shrink-0 grow-0">
+        <div className="flex gap-2 p-1">
           <Button
             variant="ghost"
             onClick={onSave}
             disabled={!hasChange || !value.name?.new || !value.schemaName}
             size={"sm"}
           >
-            <LucideSave className="w-4 h-4 mr-2" />
+            <LucideSave className="mr-2 h-4 w-4" />
             Save
           </Button>
           <Button
@@ -99,7 +99,7 @@ export default function SchemaEditor({
           </div>
 
           <Button variant="ghost" onClick={onAddColumn} size={"sm"}>
-            <LucidePlus className="w-4 h-4 mr-1" />
+            <LucidePlus className="mr-1 h-4 w-4" />
             Add Column
           </Button>
 
@@ -110,12 +110,12 @@ export default function SchemaEditor({
           <Popover>
             <PopoverTrigger>
               <div className={buttonVariants({ size: "sm", variant: "ghost" })}>
-                <LucideCode className="w-4 h-4 mr-1" />
+                <LucideCode className="mr-1 h-4 w-4" />
                 SQL Preview
               </div>
             </PopoverTrigger>
             <PopoverContent style={{ width: 500 }}>
-              <div className="text-xs font-semibold mb-1">SQL Preview</div>
+              <div className="mb-1 text-xs font-semibold">SQL Preview</div>
               <div style={{ maxHeight: 400 }} className="overflow-y-auto">
                 <CodePreview code={previewScript} />
               </div>
@@ -128,7 +128,7 @@ export default function SchemaEditor({
                 <div
                   className={buttonVariants({ size: "sm", variant: "ghost" })}
                 >
-                  <LucideCode className="w-4 h-4 mr-1" />
+                  <LucideCode className="mr-1 h-4 w-4" />
                   Create Script
                 </div>
               </PopoverTrigger>
@@ -143,12 +143,12 @@ export default function SchemaEditor({
                     );
                   }}
                 >
-                  <LucideCopy className="w-4 h-4 mr-2" />
+                  <LucideCopy className="mr-2 h-4 w-4" />
                   Copy
                 </Button>
                 <div
                   style={{ maxHeight: 400 }}
-                  className="overflow-y-auto mt-2"
+                  className="mt-2 overflow-y-auto"
                 >
                   <CodePreview code={value.createScript} />
                 </div>
@@ -157,9 +157,9 @@ export default function SchemaEditor({
           )}
         </div>
 
-        <div className="flex items-center mx-3 mt-3 mb-4 ml-5 gap-2">
+        <div className="mx-3 mt-3 mb-4 ml-5 flex items-center gap-2">
           <div>
-            <div className="text-xs font-medium mb-1">Table Name</div>
+            <div className="mb-1 text-xs font-medium">Table Name</div>
             <Input
               placeholder="Table Name"
               value={value.name.new ?? value.name.old ?? ""}
@@ -176,7 +176,7 @@ export default function SchemaEditor({
             />
           </div>
           <div>
-            <div className="text-xs font-medium mb-1">Schema</div>
+            <div className="mb-1 text-xs font-medium">Schema</div>
             <SchemaNameSelect
               readonly={!isCreateScript}
               value={value.schemaName}
diff --git a/src/components/gui/schema-editor/schema-editor-column-list.tsx b/src/components/gui/schema-editor/schema-editor-column-list.tsx
index d386ad16..a8c0f629 100644
--- a/src/components/gui/schema-editor/schema-editor-column-list.tsx
+++ b/src/components/gui/schema-editor/schema-editor-column-list.tsx
@@ -1,3 +1,24 @@
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useDatabaseDriver } from "@/context/driver-provider";
+import {
+  DatabaseTableColumn,
+  DatabaseTableColumnChange,
+  DatabaseTableColumnConstraint,
+  DatabaseTableSchemaChange,
+} from "@/drivers/base-driver";
+import { checkSchemaColumnChange } from "@/lib/sql/sql-generate.schema";
+import { cn } from "@/lib/utils";
+import { DndContext, DragEndEvent } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { LucidePlus, LucideTrash2 } from "lucide-react";
 import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
 import {
   DropdownMenu,
@@ -7,7 +28,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../../ui/dropdown-menu";
-import { LucidePlus, LucideTrash2 } from "lucide-react";
 import {
   Select,
   SelectContent,
@@ -15,34 +35,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../ui/select";
-import { CSS } from "@dnd-kit/utilities";
-import { Checkbox } from "@/components/ui/checkbox";
+import ColumnCheckPopup from "./column-check-popup";
+import ColumnCollation from "./column-collation";
 import ColumnDefaultValueInput from "./column-default-value-input";
-import {
-  DatabaseTableColumn,
-  DatabaseTableColumnChange,
-  DatabaseTableColumnConstraint,
-  DatabaseTableSchemaChange,
-} from "@/drivers/base-driver";
-import { cn } from "@/lib/utils";
-import ColumnPrimaryKeyPopup from "./column-pk-popup";
-import ColumnUniquePopup from "./column-unique-popup";
 import ColumnForeignKeyPopup from "./column-fk-popup";
 import ColumnGeneratingPopup from "./column-generate-popup";
-import ColumnCheckPopup from "./column-check-popup";
-import { Button } from "@/components/ui/button";
-import { DndContext, DragEndEvent } from "@dnd-kit/core";
-import {
-  SortableContext,
-  arrayMove,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { useDatabaseDriver } from "@/context/driver-provider";
+import ColumnPrimaryKeyPopup from "./column-pk-popup";
 import ColumnTypeSelector from "./column-type-selector";
-import ColumnCollation from "./column-collation";
-import { checkSchemaColumnChange } from "@/lib/sql/sql-generate.schema";
+import ColumnUniquePopup from "./column-unique-popup";
 
 export type ColumnChangeEvent = (
   newValue: Partial<DatabaseTableColumn> | null
@@ -120,7 +120,7 @@ function ColumnItemType({
         onValueChange={onChange}
         disabled={disabled}
       >
-        <SelectTrigger className="bg-inherit border-0 rounded-none shadow-none text-sm">
+        <SelectTrigger className="rounded-none border-0 bg-inherit text-sm shadow-none">
           <SelectValue placeholder="Select datatype" />
         </SelectTrigger>
         <SelectContent>
@@ -206,17 +206,17 @@ function ColumnItem({
       <td
         ref={setActivatorNodeRef}
         {...listeners}
-        className={cn("border-l border-t border-b")}
+        className={cn("border-t border-b border-l")}
       >
         <div
-          className={cn("w-[12px] h-[30px] ml-1 rounded", highlightClassName)}
+          className={cn("ml-1 h-[30px] w-[12px] rounded", highlightClassName)}
         ></div>
       </td>
-      <td className="border-r border-t border-b">
+      <td className="border-t border-r border-b">
         <input
           value={column.name}
           onChange={(e) => change({ name: e.currentTarget.value })}
-          className="p-2 text-sm outline-hidden w-[150px] bg-inherit"
+          className="w-[150px] bg-inherit p-2 text-sm outline-hidden"
           spellCheck={false}
         />
       </td>
@@ -236,7 +236,7 @@ function ColumnItem({
           disabled={disabled}
         />
       </td>
-      <td className="border text-center w-[50px]">
+      <td className="w-[50px] border text-center">
         <Checkbox
           disabled={disabled}
           checked={!column.constraint?.notNull}
@@ -290,8 +290,8 @@ function ColumnItem({
 
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button className="p-1 shadow-sm border rounded">
-                <LucidePlus className="w-4 h-4" />
+              <button className="rounded border p-1 shadow-sm">
+                <LucidePlus className="h-4 w-4" />
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
@@ -374,14 +374,14 @@ function ColumnItem({
           />
         </td>
       )}
-      <td className="px-1 border">
+      <td className="border px-1">
         <button
           className="p-1"
           onClick={() => {
             change(null);
           }}
         >
-          <LucideTrash2 className="w-4 h-4 text-red-500" />
+          <LucideTrash2 className="h-4 w-4 text-red-500" />
         </button>
       </td>
     </tr>
@@ -449,7 +449,7 @@ export default function SchemaEditorColumnList({
         onDragEnd={handleDragEnd}
         modifiers={[restrictToVerticalAxis]}
       >
-        <table className="w-full rounded overflow-hidden">
+        <table className="w-full overflow-hidden rounded">
           <thead>
             <tr>
               <td className={cn(headerStyle, "w-[20px]")}></td>
@@ -486,9 +486,9 @@ export default function SchemaEditorColumnList({
           </tbody>
           <tfoot>
             <tr>
-              <td colSpan={headerCounter} className="px-4 py-2 border">
+              <td colSpan={headerCounter} className="border px-4 py-2">
                 <Button size="sm" onClick={onAddColumn}>
-                  <LucidePlus className="w-4 h-4 mr-1" /> Add Column
+                  <LucidePlus className="mr-1 h-4 w-4" /> Add Column
                 </Button>
               </td>
             </tr>
diff --git a/src/components/gui/schema-sidebar-list.tsx b/src/components/gui/schema-sidebar-list.tsx
index 7ef22ad3..a965dd8f 100644
--- a/src/components/gui/schema-sidebar-list.tsx
+++ b/src/components/gui/schema-sidebar-list.tsx
@@ -1,15 +1,15 @@
+import { useConfig } from "@/context/config-provider";
+import { useDatabaseDriver } from "@/context/driver-provider";
+import { useSchema } from "@/context/schema-provider";
+import { OpenContextMenuList } from "@/core/channel-builtin";
+import { scc } from "@/core/command";
+import { DatabaseSchemaItem } from "@/drivers/base-driver";
+import { triggerEditorExtensionTab } from "@/extensions/trigger-editor";
+import { Table } from "@phosphor-icons/react";
 import { LucideCog, LucideDatabase, LucideView } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { DatabaseSchemaItem } from "@/drivers/base-driver";
-import { useSchema } from "@/context/schema-provider";
 import { ListView, ListViewItem } from "../listview";
-import { useDatabaseDriver } from "@/context/driver-provider";
-import { Table } from "@phosphor-icons/react";
 import SchemaCreateDialog from "./schema-editor/schema-create";
-import { scc } from "@/core/command";
-import { useConfig } from "@/context/config-provider";
-import { OpenContextMenuList } from "@/core/channel-builtin";
-import { triggerEditorExtensionTab } from "@/extensions/trigger-editor";
 
 interface SchemaListProps {
   search: string;
@@ -266,11 +266,19 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
             });
           } else if (item.data.type === "schema") {
             if (databaseDriver.getFlags().supportUseStatement) {
-              databaseDriver
-                .query("USE " + databaseDriver.escapeId(item.name))
-                .then(() => {
-                  refresh();
-                });
+              const dialect = databaseDriver.getFlags().dialect;
+              const switch_keyword =
+                dialect === "postgres" ? "SET search_path TO " : "USE ";
+              const name = [databaseDriver.escapeId(item.name)];
+              if (dialect === "postgres") {
+                name.push(databaseDriver.escapeId("$user"));
+                if (item.name !== "public") {
+                  name.push(databaseDriver.escapeId("public"));
+                }
+              }
+              databaseDriver.query(switch_keyword + name.join(",")).then(() => {
+                refresh();
+              });
             }
           }
         }}
diff --git a/src/components/gui/table-optimized/index.tsx b/src/components/gui/table-optimized/index.tsx
index a12b9241..b8135a76 100644
--- a/src/components/gui/table-optimized/index.tsx
+++ b/src/components/gui/table-optimized/index.tsx
@@ -1,23 +1,23 @@
 "use client";
 
+import { DatabaseTableColumn } from "@/drivers/base-driver";
+import { cn } from "@/lib/utils";
+import { ColumnType } from "@outerbase/sdk-transform";
+import { Icon } from "@phosphor-icons/react";
 import React, {
-  useState,
   ReactElement,
-  useRef,
-  useMemo,
   useCallback,
   useEffect,
+  useMemo,
+  useRef,
+  useState,
 } from "react";
-import useTableVisibilityRecalculation from "./useTableVisibilityRecalculation";
+import OptimizeTableState from "./OptimizeTableState";
+import OptimizeTableCell from "./table-cell";
 import TableFakeBodyPadding from "./table-fake-body-padding";
 import TableFakeRowPadding from "./table-fake-row-padding";
 import TableHeaderList from "./table-header-list";
-import OptimizeTableState from "./OptimizeTableState";
-import { DatabaseTableColumn } from "@/drivers/base-driver";
-import OptimizeTableCell from "./table-cell";
-import { cn } from "@/lib/utils";
-import { Icon } from "@phosphor-icons/react";
-import { ColumnType } from "@outerbase/sdk-transform";
+import useTableVisibilityRecalculation from "./useTableVisibilityRecalculation";
 
 export interface TableHeaderMetadata {
   from?: {
diff --git a/src/components/gui/table-optimized/table-cell.tsx b/src/components/gui/table-optimized/table-cell.tsx
index 5a4a795c..7ed79ac4 100644
--- a/src/components/gui/table-optimized/table-cell.tsx
+++ b/src/components/gui/table-optimized/table-cell.tsx
@@ -1,8 +1,8 @@
-import OptimizeTableState from "./OptimizeTableState";
+import { cn } from "@/lib/utils";
+import { useMemo } from "react";
 import { OptimizeTableHeaderWithIndexProps } from ".";
 import tableResultCellRenderer from "../table-result/render-cell";
-import { useMemo } from "react";
-import { cn } from "@/lib/utils";
+import OptimizeTableState from "./OptimizeTableState";
 
 export default function OptimizeTableCell({
   state,
diff --git a/src/components/gui/table-result/render-cell.tsx b/src/components/gui/table-result/render-cell.tsx
index acbd9a41..464f7fea 100644
--- a/src/components/gui/table-result/render-cell.tsx
+++ b/src/components/gui/table-result/render-cell.tsx
@@ -1,12 +1,12 @@
-import { OptimizeTableCellRenderProps } from "../table-optimized";
+import BlobCell from "@/components/gui/table-cell/blob-cell";
 import { DatabaseValue } from "@/drivers/base-driver";
-import TextCell from "../table-cell/text-cell";
 import parseSafeJson from "@/lib/json-safe";
-import NumberCell from "../table-cell/number-cell";
+import { ColumnType } from "@outerbase/sdk-transform";
 import BigNumberCell from "../table-cell/big-number-cell";
 import GenericCell from "../table-cell/generic-cell";
-import BlobCell from "@/components/gui/table-cell/blob-cell";
-import { ColumnType } from "@outerbase/sdk-transform";
+import NumberCell from "../table-cell/number-cell";
+import TextCell from "../table-cell/text-cell";
+import { OptimizeTableCellRenderProps } from "../table-optimized";
 
 function detectTextEditorType(
   value: DatabaseValue<string>
diff --git a/src/components/gui/tabs/schema-editor-tab.tsx b/src/components/gui/tabs/schema-editor-tab.tsx
index 872c4fe5..bd5a0cd5 100644
--- a/src/components/gui/tabs/schema-editor-tab.tsx
+++ b/src/components/gui/tabs/schema-editor-tab.tsx
@@ -1,11 +1,11 @@
 import OpacityLoading from "@/components/gui/loading-opacity";
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDatabaseDriver } from "@/context/driver-provider";
-import SchemaSaveDialog from "../schema-editor/schema-save-dialog";
 import { DatabaseTableSchemaChange } from "@/drivers/base-driver";
-import SchemaEditor from "../schema-editor";
 import { createTableSchemaDraft } from "@/lib/sql/sql-generate.schema";
 import { cloneDeep } from "lodash";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import SchemaEditor from "../schema-editor";
+import SchemaSaveDialog from "../schema-editor/schema-save-dialog";
 
 interface SchemaEditorTabProps {
   tableName?: string;
@@ -89,6 +89,7 @@ export default function SchemaEditorTab({
       </div>
     );
   }
+
   return (
     <>
       {isSaving && (
diff --git a/src/components/my-studio.tsx b/src/components/my-studio.tsx
index f1a718d1..d36e2f1b 100644
--- a/src/components/my-studio.tsx
+++ b/src/components/my-studio.tsx
@@ -1,9 +1,3 @@
-import { useRouter } from "next/navigation";
-import { useCallback, useMemo } from "react";
-import { BaseDriver } from "@/drivers/base-driver";
-import { CollaborationBaseDriver } from "@/drivers/collaboration-driver-base";
-import { Studio } from "./gui/studio";
-import { SavedDocDriver } from "@/drivers/saved-doc/saved-doc-driver";
 import { StudioExtensionManager } from "@/core/extension-manager";
 import {
   createMySQLExtensions,
@@ -11,6 +5,12 @@ import {
   createSQLiteExtensions,
   createStandardExtensions,
 } from "@/core/standard-extension";
+import { BaseDriver } from "@/drivers/base-driver";
+import { CollaborationBaseDriver } from "@/drivers/collaboration-driver-base";
+import { SavedDocDriver } from "@/drivers/saved-doc/saved-doc-driver";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo } from "react";
+import { Studio } from "./gui/studio";
 
 interface MyStudioProps {
   name: string;
diff --git a/src/drivers/postgres/generate-schema.ts b/src/drivers/postgres/generate-schema.ts
new file mode 100644
index 00000000..8b546796
--- /dev/null
+++ b/src/drivers/postgres/generate-schema.ts
@@ -0,0 +1,250 @@
+import { isEqual, omit } from "lodash";
+import {
+  BaseDriver,
+  DatabaseTableColumn,
+  DatabaseTableColumnConstraint,
+  DatabaseTableSchemaChange,
+} from "../base-driver";
+
+function wrapParen(str: string) {
+  if (str.toUpperCase() === "NULL") return str;
+  if (str.length >= 2 && str.startsWith("(") && str.endsWith(")")) return str;
+  return "(" + str + ")";
+}
+
+function generateCreateColumn(
+  driver: BaseDriver,
+  col: DatabaseTableColumn,
+  edit?: boolean
+): string {
+  const tokens: string[] = edit
+    ? [
+        driver.escapeId(col.name),
+        "TYPE",
+        col.type,
+        "USING",
+        `${driver.escapeId(col.name)}::${col.type}`,
+      ]
+    : [driver.escapeId(col.name), col.type];
+
+  if (col.constraint?.primaryKey) {
+    tokens.push(
+      [
+        "PRIMARY KEY",
+        col.constraint.primaryKeyOrder,
+        col.constraint.primaryKeyConflict
+          ? `ON CONFLICT ${col.constraint.primaryKeyConflict}`
+          : undefined,
+        col.constraint.autoIncrement
+          ? "GENERATED ALWAYS AS IDENTITY"
+          : undefined,
+      ]
+        .filter(Boolean)
+        .join(" ")
+    );
+  }
+
+  if (col.constraint?.unique) {
+    tokens.push(
+      [
+        "UNIQUE",
+        col.constraint.uniqueConflict
+          ? `ON CONFLICT ${col.constraint.uniqueConflict}`
+          : undefined,
+      ]
+        .filter(Boolean)
+        .join(" ")
+    );
+  }
+
+  if (col.constraint?.notNull) {
+    tokens.push(
+      [
+        "NOT NULL",
+        col.constraint.notNullConflict
+          ? `ON CONFLICT ${col.constraint.notNullConflict}`
+          : undefined,
+      ]
+        .filter(Boolean)
+        .join(" ")
+    );
+  }
+
+  if (col.constraint?.defaultValue) {
+    tokens.push(
+      ["DEFAULT", driver.escapeValue(col.constraint.defaultValue)].join(" ")
+    );
+  }
+
+  if (col.constraint?.defaultExpression) {
+    tokens.push(
+      ["DEFAULT", wrapParen(col.constraint.defaultExpression)].join(" ")
+    );
+  }
+
+  if (col.constraint?.generatedExpression) {
+    tokens.push(
+      [
+        "GENERATED ALWAYS AS",
+        wrapParen(col.constraint.generatedExpression),
+        col.constraint.generatedType,
+      ].join(" ")
+    );
+  }
+
+  if (col.constraint?.collate) {
+    tokens.push("COLLATE " + driver.escapeValue(col.constraint.collate));
+  }
+
+  if (col.constraint?.checkExpression) {
+    tokens.push("CHECK " + wrapParen(col.constraint.checkExpression));
+  }
+
+  const foreignTableName = col.constraint?.foreignKey?.foreignTableName;
+  const foreignColumnName = (col.constraint?.foreignKey?.foreignColumns ?? [
+    undefined,
+  ])[0];
+
+  if (foreignTableName && foreignColumnName) {
+    tokens.push(
+      [
+        "FOREIGN KEY REFERENCES",
+        driver.escapeId(foreignTableName) +
+          `(${driver.escapeId(foreignColumnName)})`,
+      ].join(" ")
+    );
+  }
+
+  return tokens.join(" ");
+}
+
+function generateConstraintScript(
+  driver: BaseDriver,
+  con: DatabaseTableColumnConstraint
+) {
+  if (con.primaryKey) {
+    return `PRIMARY KEY (${con.primaryColumns?.map(driver.escapeId).join(", ")})`;
+  } else if (con.unique) {
+    return `UNIQUE (${con.uniqueColumns?.map(driver.escapeId).join(", ")})`;
+  } else if (con.checkExpression !== undefined) {
+    return `CHECK (${con.checkExpression})`;
+  } else if (con.foreignKey) {
+    return (
+      `FOREIGN KEY (${con.foreignKey.columns?.map(driver.escapeId).join(", ")}) ` +
+      `REFERENCES ${driver.escapeId(con.foreignKey.foreignTableName ?? "")} ` +
+      `(${con.foreignKey.foreignColumns?.map(driver.escapeId).join(", ")})`
+    );
+  }
+}
+
+function generateConstraintModifyScript(
+  driver: BaseDriver,
+  con: DatabaseTableColumnConstraint,
+  tableName: string
+) {
+  let keyName = "";
+  if (con?.primaryKey) {
+    keyName = `${tableName}_pkey`;
+  }
+  if (con?.foreignKey) {
+    keyName = `${tableName}_${con.foreignKey.foreignTableName}_${con.foreignKey.columns?.join("")}_fkey`;
+  }
+  if (con.unique) {
+    keyName = `${tableName}_${con.uniqueColumns?.join("")}_key`;
+  }
+
+  return [
+    `DROP CONSTRAINT IF EXISTS ${keyName}`,
+    `ADD CONSTRAINT ${keyName} ${generateConstraintScript(driver, con)}`,
+  ];
+}
+
+//https://www.postgresql.org/docs/current/sql-createtable.html
+export function generatePostgresSchemaChange(
+  driver: BaseDriver,
+  change: DatabaseTableSchemaChange
+): string[] {
+  const isCreateScript = !change.name.old;
+
+  const lines = [];
+
+  for (const col of change.columns) {
+    if (col.new === null) lines.push(`DROP COLUMN ${col.old?.name}`);
+    else if (col.old === null) {
+      if (isCreateScript) {
+        lines.push(generateCreateColumn(driver, col.new));
+      } else {
+        lines.push("ADD " + generateCreateColumn(driver, col.new));
+      }
+    } else {
+      // check if there is rename
+      if (col.new.name !== col.old.name) {
+        lines.push(
+          `RENAME COLUMN ${driver.escapeId(col.old.name)} TO ${driver.escapeId(
+            col.new.name
+          )}`
+        );
+      }
+
+      // check if there is any changed except name
+      if (!isEqual(omit(col.old, ["name"]), omit(col.new, ["name"]))) {
+        lines.push(
+          `ALTER COLUMN ${generateCreateColumn(
+            driver,
+            {
+              name: col.new.name,
+              type: col.new.type,
+              pk: col.new.pk,
+              constraint: {},
+            },
+            true
+          )}`
+        );
+        if (col.new.constraint) {
+          for (const s of generateConstraintModifyScript(
+            driver,
+            {
+              ...col.new.constraint,
+              primaryColumns: [col.new.name],
+              uniqueColumns: [col.new.name],
+              foreignKey: {
+                ...col.new.constraint.foreignKey,
+                columns: [col.new.name],
+              },
+            },
+            change.name.old ?? ""
+          )) {
+            lines.push(s);
+          }
+        }
+      }
+    }
+  }
+
+  for (const con of change.constraints) {
+    if (con.new) {
+      if (isCreateScript) {
+        lines.push(generateConstraintScript(driver, con.new));
+      }
+    }
+  }
+
+  if (!isCreateScript) {
+    if (change.name.new !== change.name.old) {
+      lines.push(
+        `RENAME TO ${driver.escapeId(change.schemaName ?? "main")}.${driver.escapeId(change.name.new ?? "")}`
+      );
+    }
+  }
+
+  if (isCreateScript) {
+    return [
+      `CREATE TABLE ${driver.escapeId(change.schemaName ?? "main")}.${driver.escapeId(
+        change.name.new || "no_table_name"
+      )}(\n${lines.map((line) => "  " + line).join(",\n")}\n)`,
+    ];
+  } else {
+    const alter = `ALTER TABLE ${driver.escapeId(change.schemaName ?? "main")}.${driver.escapeId(change.name.old ?? "")} `;
+    return lines.map((line) => alter + line);
+  }
+}
diff --git a/src/drivers/postgres/postgres-data-type.ts b/src/drivers/postgres/postgres-data-type.ts
new file mode 100644
index 00000000..1a25f230
--- /dev/null
+++ b/src/drivers/postgres/postgres-data-type.ts
@@ -0,0 +1,150 @@
+import { ColumnTypeSelector } from "../base-driver";
+
+//https://www.postgresql.org/docs/current/datatype.html
+export const POSTGRES_DATA_TYPE_SUGGESTION: ColumnTypeSelector = {
+  type: "text",
+  idTypeName: "Integer",
+  textTypeName: "VARCHAR(255)",
+  typeSuggestions: [
+    {
+      name: "Integer",
+      suggestions: [
+        {
+          name: "serial",
+          description: "autoincrementing four-byte integer",
+        },
+        {
+          name: "boolean",
+          description: "Logical Boolean (true/false)",
+        },
+        {
+          name: "smallint",
+          description: "Signed two-byte integer",
+        },
+        {
+          name: "integer",
+          description: "Signed four-byte integer",
+        },
+        {
+          name: "bigint",
+          description: "Signed eight-byte integer",
+        },
+      ],
+    },
+    {
+      name: "Real",
+      suggestions: [
+        { name: "real", description: "4 byte float" },
+        { name: "double precision", description: "8 byte float" },
+        {
+          name: "numeric",
+          parameters: [
+            {
+              name: "precision",
+              description: "Total number of digits",
+              default: "10",
+            },
+            {
+              name: "scale",
+              description: "Number of digits after the decimal point",
+              default: "2",
+            },
+          ],
+          description: decimalDescription,
+        },
+      ],
+    },
+    {
+      name: "Text",
+      suggestions: [
+        {
+          name: "char",
+          parameters: [{ name: "length", default: "255" }],
+          description: "Fixed-length string",
+        },
+        {
+          name: "varchar",
+          parameters: [{ name: "length", default: "255" }],
+          description: "Variable-length string",
+        },
+        {
+          name: "text",
+          description: "A text column with a maximum length of 65,535.",
+        },
+        {
+          name: "json",
+          description:
+            "Document stored in JSON column are converted to an internal format that permits quick read access to document elements",
+        },
+        {
+          name: "uuid",
+          description:
+            "The UUID data type is intended for the storage of 128.bit UUID.",
+        },
+      ],
+    },
+    {
+      name: "Binary",
+      suggestions: [
+        {
+          name: "bit",
+          parameters: [{ name: "length", default: "255" }],
+          description: "Fixed-length bit string",
+        },
+        {
+          name: "varbit",
+          parameters: [{ name: "length", default: "255" }],
+          description: "Variable-length bit string",
+        },
+        {
+          name: "bytea",
+          description: "Binary data (“byte array”)",
+        },
+      ],
+    },
+    {
+      name: "Date",
+      suggestions: [
+        { name: "date", description: "Date" },
+        { name: "time", description: "Time" },
+        { name: "timetz", description: "Time of day, including time zone" },
+        { name: "timestamp", description: "Date and time (no time zone)" },
+        {
+          name: "timestamptz",
+          description: "Date and time, including time zone",
+        },
+      ],
+    },
+  ],
+};
+
+function decimalDescription(_: string, parameters?: string[]) {
+  const precision = Number(parameters?.[0]);
+  const scale = Number(parameters?.[1] ?? 0);
+
+  if (
+    Number.isFinite(precision) &&
+    Number.isFinite(scale) &&
+    Number.isInteger(precision) &&
+    Number.isInteger(scale) &&
+    precision > 0 &&
+    precision < 20
+  ) {
+    const exampleNumber = "12345678901234567890".substring(0, precision);
+    const exampleBeforeDot = exampleNumber.substring(0, precision - scale);
+    const exampleAfterDot = exampleNumber.substring(precision - scale);
+
+    return `<div>
+    <div class="mb-2">Fixed-point number</div>
+    <div class='inline-block'>
+      <div class="text-xs">Precision</div>
+      <div class="inline-block border-t-4 border-t-primary font-mono text-lg">
+        <span>${exampleBeforeDot}</span><strong>.</strong><span class="inline-block border-b-4 border-b-primary">${exampleAfterDot}</span>
+      </div>
+      <div class="text-xs text-right">Scale</div>
+    </div>
+  </div>`;
+  }
+
+  return `<div>Fixed-point number</div>`;
+}
diff --git a/src/drivers/postgres/postgres-driver.ts b/src/drivers/postgres/postgres-driver.ts
index 9aaaf19f..3a077747 100644
--- a/src/drivers/postgres/postgres-driver.ts
+++ b/src/drivers/postgres/postgres-driver.ts
@@ -6,12 +6,15 @@ import {
   DatabaseTableColumn,
   DatabaseTableColumnConstraint,
   DatabaseTableSchema,
+  DatabaseTableSchemaChange,
   DatabaseTriggerSchema,
   DatabaseViewSchema,
   DriverFlags,
 } from "../base-driver";
 import CommonSQLImplement from "../common-sql-imp";
 import { escapeSqlValue } from "../sqlite/sql-helper";
+import { generatePostgresSchemaChange } from "./generate-schema";
+import { POSTGRES_DATA_TYPE_SUGGESTION } from "./postgres-data-type";
 
 interface PostgresSchemaRow {
   catalog_name: string;
@@ -57,9 +60,7 @@ interface PostgresConstraintRow {
 }
 
 export default abstract class PostgresLikeDriver extends CommonSQLImplement {
-  columnTypeSelector: ColumnTypeSelector = {
-    type: "text",
-  };
+  columnTypeSelector: ColumnTypeSelector = POSTGRES_DATA_TYPE_SUGGESTION;
 
   escapeId(id: string) {
     return `"${id.replace(/"/g, '""')}"`;
@@ -76,15 +77,26 @@ export default abstract class PostgresLikeDriver extends CommonSQLImplement {
       optionalSchema: false,
       supportRowId: false,
       supportBigInt: false,
-      supportModifyColumn: false,
-      supportCreateUpdateTable: false,
+      supportModifyColumn: true,
+      supportCreateUpdateTable: true,
       supportCreateUpdateDatabase: false,
       supportInsertReturning: true,
       supportUpdateReturning: true,
       supportCreateUpdateTrigger: false,
+      supportUseStatement: true,
     };
   }
 
+  async getCurrentSchema(): Promise<string | null> {
+    const result = (await this.query("SHOW search_path")) as unknown as {
+      rows: { search_path?: string | null }[];
+    };
+
+    const db = result.rows[0].search_path!.split(",")[0];
+
+    return db === this.escapeId("$user") ? "public" : db;
+  }
+
   async schemas(): Promise<DatabaseSchemas> {
     const schemaResult = (
       await this.query(
@@ -294,7 +306,9 @@ WHERE
     ).rows as unknown as PostgresConstraintRow[];
 
     const constraintRecord: Record<string, DatabaseTableColumnConstraint> = {};
-    for (const constraint of constraintResult) {
+    for (const constraint of constraintResult.filter(
+      (f) => f.column_name !== null
+    )) {
       const key = constraint.constraint_name;
       const constraintItem = constraintRecord[key] || {
         name: constraint.constraint_name,
@@ -321,11 +335,18 @@ WHERE
           ],
           columns: [constraint.column_name],
         };
+      } else if (constraint.constraint_type === "UNIQUE") {
+        constraintItem.unique = true;
+        constraintItem.uniqueColumns = [constraint.column_name];
       }
 
       constraintRecord[key] = constraintItem;
     }
 
+    const pkColumn =
+      Object.values(constraintRecord).find((c) => c.primaryKey)
+        ?.primaryColumns ?? [];
+
     const tableSchema: DatabaseTableSchema = {
       columns: columnsResult.map((column) => ({
         name: column.column_name,
@@ -334,13 +355,12 @@ WHERE
           notNull: column.is_nullable === "NO",
           defaultValue: column.column_default,
           generatedExpression: column.generation_expression,
+          primaryKey: pkColumn.includes(column.column_name),
         },
       })),
       constraints: Object.values(constraintRecord),
-      pk:
-        Object.values(constraintRecord).find((c) => c.primaryKey)
-          ?.primaryColumns ?? [],
-      autoIncrement: false,
+      pk: pkColumn,
+      autoIncrement: true,
       schemaName,
       tableName,
     };
@@ -352,8 +372,8 @@ WHERE
     throw new Error("Not implemented");
   }
 
-  createUpdateTableSchema(): string[] {
-    throw new Error("Not implemented");
+  createUpdateTableSchema(change: DatabaseTableSchemaChange): string[] {
+    return generatePostgresSchemaChange(this, change);
   }
 
   createUpdateDatabaseSchema(): string[] {

From 03456779a416b08404b3204886bc66405e9a776c Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Tue, 18 Feb 2025 07:12:04 +0700
Subject: [PATCH 066/106] Two factor authentication (#367)

* Add country code picker component

* Add function to request one-time password via phone

* Add OTP verification page

* feat: finished 2FA with authentication app

* feat: 2FA phone
---
 src/app/(dark-only)/signin/page.tsx           |  15 +-
 src/app/(dark-only)/verify/page.tsx           |  99 ++++++
 .../(outerbase)/account/two-factor-auth.tsx   | 305 ++++++++++++++++--
 src/app/(outerbase)/auth-provider.tsx         |   6 +
 src/app/(outerbase)/layout.tsx                |   5 +-
 src/components/picker/country-code-picker.tsx | 270 ++++++++++++++++
 src/outerbase-cloud/api-account.ts            |  42 +++
 src/outerbase-cloud/api-type.ts               |   3 +
 8 files changed, 712 insertions(+), 33 deletions(-)
 create mode 100644 src/app/(dark-only)/verify/page.tsx
 create mode 100644 src/components/picker/country-code-picker.tsx

diff --git a/src/app/(dark-only)/signin/page.tsx b/src/app/(dark-only)/signin/page.tsx
index 25290e4d..3557f5a1 100644
--- a/src/app/(dark-only)/signin/page.tsx
+++ b/src/app/(dark-only)/signin/page.tsx
@@ -1,7 +1,10 @@
 "use client";
 import LabelInput from "@/components/label-input";
 import { Button } from "@/components/orbit/button";
-import { loginOuterbaseByPassword } from "@/outerbase-cloud/api";
+import {
+  getOuterbaseSession,
+  loginOuterbaseByPassword,
+} from "@/outerbase-cloud/api";
 import {
   OuterbaseAPIError,
   OuterbaseAPISession,
@@ -23,9 +26,14 @@ export default function SigninPage() {
     setLoading(true);
 
     loginOuterbaseByPassword(email, password)
-      .then((session) => {
-        localStorage.setItem("session", JSON.stringify(session));
+      .then(async (session) => {
         localStorage.setItem("ob-token", session.token);
+        localStorage.setItem("session", JSON.stringify(session));
+
+        const { user } = await getOuterbaseSession();
+        if (user.has_otp) {
+          localStorage.setItem("continue-redirect", "/verify");
+        }
 
         setSession(session);
       })
@@ -42,7 +50,6 @@ export default function SigninPage() {
 
     const redirect = localStorage.getItem("continue-redirect");
     if (redirect) {
-      localStorage.removeItem("continue-redirect");
       router.push(redirect);
       return;
     }
diff --git a/src/app/(dark-only)/verify/page.tsx b/src/app/(dark-only)/verify/page.tsx
new file mode 100644
index 00000000..8bf9643d
--- /dev/null
+++ b/src/app/(dark-only)/verify/page.tsx
@@ -0,0 +1,99 @@
+"use client";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import { verifyOuterbaseOTP } from "@/outerbase-cloud/api-account";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+import { LoginBaseSpaceship } from "../signin/starbase-portal";
+
+export default function VerifyPage() {
+  const [code, setCode] = useState("");
+  const [error, setError] = useState("");
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  const onVerifyOTP = useCallback(() => {
+    if (code.length < 6) return;
+    setLoading(true);
+    verifyOuterbaseOTP(code)
+      .then(() => {
+        localStorage.removeItem("continue-redirect");
+        router.push("/");
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [code, router]);
+
+  return (
+    <>
+      <div
+        className="absolute left-[10%] z-2 flex w-[400px] flex-col gap-4 rounded-lg border-neutral-800 bg-neutral-900 p-8 md:m-0"
+        style={{
+          top: "50%",
+          transform: "translateY(-50%)",
+        }}
+      >
+        <div className="mb-8 flex flex-col items-center text-white">
+          <svg
+            fill="currentColor"
+            viewBox="75 75 350 350"
+            className="mb-2 h-14 w-14 text-black dark:text-white"
+          >
+            <path d="M249.51,146.58c-58.7,0-106.45,49.37-106.45,110.04c0,60.68,47.76,110.04,106.45,110.04 c58.7,0,106.46-49.37,106.46-110.04C355.97,195.95,308.21,146.58,249.51,146.58z M289.08,332.41l-0.02,0.04l-0.51,0.65 c-5.55,7.06-12.37,9.35-17.11,10.02c-1.23,0.17-2.5,0.26-3.78,0.26c-12.94,0-25.96-9.09-37.67-26.29 c-9.56-14.05-17.84-32.77-23.32-52.71c-9.78-35.61-8.67-68.08,2.83-82.74c5.56-7.07,12.37-9.35,17.11-10.02 c13.46-1.88,27.16,6.2,39.64,23.41c10.29,14.19,19.22,33.83,25.12,55.32C301,285.35,300.08,317.46,289.08,332.41z"></path>
+          </svg>
+
+          <h1 className="text-2xl font-bold">Verify that it&apos;s you</h1>
+          <p className="text-center text-base text-neutral-300">
+            Enter the verification code for Outerbase from your two-factor
+            authentication app.
+          </p>
+        </div>
+
+        <form
+          onSubmit={(e) => {
+            onVerifyOTP();
+            e.preventDefault();
+          }}
+          className="flex flex-col gap-4"
+        >
+          <LabelInput
+            required
+            label="Verification code"
+            size="lg"
+            value={code}
+            placeholder="XXXXXX"
+            onChange={(e) => setCode(e.currentTarget.value)}
+          />
+
+          {error && <div className="text-red-400">{error}</div>}
+
+          <Button
+            disabled={code.length < 6}
+            loading={loading}
+            onClick={onVerifyOTP}
+            variant="primary"
+            size="lg"
+            className="justify-center"
+          >
+            Verify
+          </Button>
+        </form>
+
+        <div className="text-center font-sans text-sm">
+          Still having trouble?{" "}
+          <Link
+            href="mailto:hello@outerbase.com"
+            className="text-primary border-b"
+          >
+            Contact support
+          </Link>
+        </div>
+      </div>
+
+      <LoginBaseSpaceship />
+    </>
+  );
+}
diff --git a/src/app/(outerbase)/account/two-factor-auth.tsx b/src/app/(outerbase)/account/two-factor-auth.tsx
index 08691f22..34f756f0 100644
--- a/src/app/(outerbase)/account/two-factor-auth.tsx
+++ b/src/app/(outerbase)/account/two-factor-auth.tsx
@@ -1,12 +1,209 @@
 import { Button } from "@/components/orbit/button";
 import { Input } from "@/components/orbit/input";
+import { CountryCodePicker } from "@/components/picker/country-code-picker";
 import { Label } from "@/components/ui/label";
-import { ChevronDown } from "lucide-react";
-import { useState } from "react";
+import {
+  deleteOuterbaseTwoFactorAuth,
+  requestOuterbase2FAPhone,
+  requestOuterbaseTwoFactorAuth,
+  submitVerifyPhone2FA,
+  verifyOuterbase2FAOTP,
+} from "@/outerbase-cloud/api-account";
+import { CheckCircle2 } from "lucide-react";
+import Image from "next/image";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { useSession } from "../session-provider";
 
+interface HasOTPProps {
+  loading?: boolean;
+  onDelete: () => void;
+}
+function HasOTP({ onDelete, loading }: HasOTPProps) {
+  return (
+    <div className="flex flex-col items-start gap-5">
+      <div>Authentication App</div>
+      <p className="text-base">
+        Verification codes will be generated by the authentication app you
+        configured.
+      </p>
+      <Button loading={loading} onClick={onDelete} title="Disable" size="lg" />
+    </div>
+  );
+}
+
+interface VerifyCodeInputProps {
+  loading: boolean;
+  code: string;
+  disabled?: boolean;
+  onCancel?: () => void;
+  onSave: () => void;
+  onChange: (v: string) => void;
+}
+function VerifyCodeInput({
+  code,
+  onChange,
+  onSave,
+  disabled,
+  loading,
+  onCancel,
+}: VerifyCodeInputProps) {
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        <Label className="text-primary font-semibold">
+          Enter verification code
+          <span className="text-red-500">*</span>
+        </Label>
+        <Input value={code} onValueChange={onChange} className="w-[250px]" />
+      </div>
+      <div className="flex flex-row gap-5">
+        <Button
+          disabled={disabled}
+          onClick={onSave}
+          variant="primary"
+          title="Save"
+          shape="base"
+          loading={loading}
+          className="rounded-4xl"
+        />
+
+        <Button title="Cancel" onClick={onCancel} className="bg-gray-600" />
+      </div>
+    </>
+  );
+}
+
+type TwoFactorAuthType = "otp" | "phone";
+interface QRCode {
+  base32: string;
+  id: string;
+  image: string;
+}
+
+interface ISMS {
+  id: string;
+  number_masked: string;
+  user_id: string;
+}
 export default function TwoFactorAuth() {
+  const { session, refreshSession } = useSession();
+  const [twoFactorType, setTwoFactorType] =
+    useState<TwoFactorAuthType>("phone");
   const [add, setAdd] = useState(false);
-  // not implement two factor authentication yet
+  const [loading, setLoading] = useState(false);
+  const [prefix, setPrefix] = useState("+1");
+  const [phone, setPhone] = useState("");
+  const [verifyCode, setVerifyCode] = useState("");
+  const [sms, setSMS] = useState<ISMS>();
+  const [qrcode, setQrcode] = useState<QRCode>();
+  const [deleting, setDeleting] = useState(false);
+  const [sending, setSending] = useState(false);
+
+  const onClear = () => {
+    setDeleting(false);
+    setQrcode(undefined);
+    setDeleting(false);
+    setVerifyCode("");
+    setAdd(false);
+    setTwoFactorType("phone");
+  };
+
+  const onRefreshSession = useCallback(
+    (msg: string) => {
+      refreshSession().then(() => {
+        onClear();
+        toast.success(msg);
+      });
+    },
+    [refreshSession]
+  );
+
+  const onSendRequestPhone2FA = useCallback(() => {
+    setSending(true);
+    requestOuterbaseTwoFactorAuth("phone", {
+      number: prefix + phone,
+    })
+      .then((r) => {
+        requestOuterbase2FAPhone((r as ISMS).id).then(() => {
+          setSMS(r as ISMS);
+          setSending(false);
+        });
+      })
+      .catch(() => setSending(false));
+  }, [prefix, phone]);
+
+  const onRequestOuterbaseTwoFactorAuth = useCallback(
+    (type: TwoFactorAuthType) => {
+      setTwoFactorType(type);
+      if (type === "otp" && !qrcode) {
+        requestOuterbaseTwoFactorAuth(type, {})
+          .then((r) => {
+            if (type === "otp") {
+              setQrcode(r as QRCode);
+            }
+          })
+          .catch()
+          .finally();
+      }
+    },
+    [qrcode]
+  );
+
+  const onVerifyOuterbaseOTP = useCallback(() => {
+    if (!qrcode?.id) return;
+    setLoading(true);
+    verifyOuterbase2FAOTP({
+      otp_id: qrcode.id,
+      token: verifyCode,
+    })
+      .then(() => {
+        onRefreshSession("2FA enabled");
+      })
+      .catch((error) => {
+        setLoading(false);
+        toast.error(error.message);
+      });
+  }, [qrcode, verifyCode, onRefreshSession]);
+
+  const onSubmitPhone2FA = useCallback(() => {
+    if (!sms) return;
+    setLoading(true);
+    submitVerifyPhone2FA(sms?.id, { code: verifyCode })
+      .then(() => {
+        onRefreshSession("2FA enabled");
+      })
+      .catch((error) => {
+        setLoading(false);
+        toast.error(error.message);
+      });
+  }, [sms, verifyCode, onRefreshSession]);
+
+  function handleSave() {
+    if (twoFactorType === "otp") {
+      onVerifyOuterbaseOTP();
+    } else {
+      onSubmitPhone2FA();
+    }
+  }
+
+  const onDeleteTwoFactor = useCallback(() => {
+    setDeleting(true);
+    deleteOuterbaseTwoFactorAuth()
+      .then(() => {
+        onRefreshSession("2FA disabled");
+      })
+      .catch((error) => {
+        setDeleting(false);
+        toast.error(error.message);
+      });
+  }, [onRefreshSession]);
+
+  const disabled = twoFactorType === "otp" && verifyCode.length < 6;
+
+  if (session?.user.has_otp) {
+    return <HasOTP loading={deleting} onDelete={onDeleteTwoFactor} />;
+  }
 
   let footer = (
     <Button
@@ -16,49 +213,101 @@ export default function TwoFactorAuth() {
       className="mt-10"
     />
   );
-
   if (add) {
     footer = (
       <div className="mt-10 flex flex-col gap-5">
         <div className="flex flex-row items-center gap-5">
           <Button
-            onClick={() => setAdd(true)}
+            onClick={() => onRequestOuterbaseTwoFactorAuth("phone")}
             title="SMS"
             size="lg"
+            variant={twoFactorType === "phone" ? "primary" : "secondary"}
             className="w-[170px] justify-center"
           />
           <Button
-            onClick={() => setAdd(true)}
+            onClick={() => onRequestOuterbaseTwoFactorAuth("otp")}
             title="Authentication App"
             size="lg"
+            variant={twoFactorType === "otp" ? "primary" : "secondary"}
             className="w-[170px] justify-center"
           />
         </div>
         <div className="mt-5 flex flex-col gap-2">
-          <Label className="font-semibold">
-            Country or region code <span className="text-red-500">*</span>
-          </Label>
-          <Button variant="secondary" className="w-[250px]">
-            <span className="font-normal">(+1) United State</span>
-            <div className="flex-1" />
-            <ChevronDown className="h-4 w-4" />
-          </Button>
+          {twoFactorType === "otp" ? (
+            <>
+              <Label className="text-primary font-semibold">
+                Scan the QR code
+              </Label>
+              <div className="text-sm">
+                Use an authentication app like Google Authenticator, 1Password
+                or Authy.
+              </div>{" "}
+              <div className="relative h-[180px] w-[180px] rounded bg-white">
+                {qrcode && (
+                  <Image
+                    src={qrcode?.image}
+                    alt="qr-code"
+                    fill
+                    className="rounded object-fill"
+                  />
+                )}
+              </div>
+            </>
+          ) : (
+            <>
+              <Label className="text-primary font-semibold">
+                Country or region code <span className="text-red-500">*</span>
+              </Label>
+              <div className="w-[250px]">
+                <CountryCodePicker
+                  onChange={(c) => {
+                    setPrefix(c.code);
+                  }}
+                  className="w-[250px]"
+                />
+              </div>
+            </>
+          )}
         </div>
-        <div className="flex flex-col gap-2">
-          <Label className="font-semibold">
-            Your phone number <span className="text-red-500">*</span>
-          </Label>
-          <Input className="w-[250px]" />
-        </div>
-        <div className="flex flex-row gap-5">
-          <Button variant="primary" title="Sent Code" className="rounded-4xl" />
+        {twoFactorType === "phone" && (
+          <div className="flex flex-col gap-2">
+            <Label className="text-primary font-semibold">
+              Your phone number
+              <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              value={phone}
+              onValueChange={setPhone}
+              className="w-[250px]"
+            />
+            <div className="mt-5 flex flex-row gap-5">
+              <Button
+                disabled={!!sms || phone.length === 0}
+                variant="primary"
+                title="Sent Code"
+                shape="base"
+                loading={sending}
+                className="rounded-4xl"
+                onClick={onSendRequestPhone2FA}
+              />
+              {sms && (
+                <div className="text-primary flex flex-row items-center gap-2 text-base">
+                  <CheckCircle2 className="h-4 w-4" color="green" />
+                  SMS sent
+                </div>
+              )}
+            </div>
+          </div>
+        )}
 
-          <Button
-            title="Cancel"
-            onClick={() => setAdd(false)}
-            className="bg-gray-600"
-          />
-        </div>
+        <VerifyCodeInput
+          disabled={disabled}
+          code={verifyCode}
+          loading={loading}
+          onChange={setVerifyCode}
+          onSave={handleSave}
+          onCancel={onClear}
+        />
       </div>
     );
   }
diff --git a/src/app/(outerbase)/auth-provider.tsx b/src/app/(outerbase)/auth-provider.tsx
index 61eb9417..5f0a72c1 100644
--- a/src/app/(outerbase)/auth-provider.tsx
+++ b/src/app/(outerbase)/auth-provider.tsx
@@ -10,9 +10,15 @@ export default function AuthProvider({ children }: PropsWithChildren) {
 
   useEffect(() => {
     if (isLoading) return;
+    const redirect = localStorage.getItem("continue-redirect");
     if (!session?.session || !session?.user) {
       localStorage.setItem("continue-redirect", pathname);
       router.replace("/signin");
+      // IF user enabled 2FA keep redirect to verify page
+    } else if (session.user.has_otp && redirect === "/verify") {
+      router.replace(redirect);
+    } else {
+      localStorage.removeItem("continue-redirect");
     }
   }, [isLoading, session, pathname, router]);
 
diff --git a/src/app/(outerbase)/layout.tsx b/src/app/(outerbase)/layout.tsx
index 853ce284..58f3180a 100644
--- a/src/app/(outerbase)/layout.tsx
+++ b/src/app/(outerbase)/layout.tsx
@@ -1,6 +1,7 @@
 import { OuterbaseSessionProvider } from "@/app/(outerbase)/session-provider";
 import ClientOnly from "@/components/client-only";
 import ThemeLayout from "../(theme)/theme_layout";
+import AuthProvider from "./auth-provider";
 import { WorkspaceProvider } from "./workspace-provider";
 
 export default function OuterbaseLayout({
@@ -12,7 +13,9 @@ export default function OuterbaseLayout({
     <ThemeLayout>
       <ClientOnly>
         <OuterbaseSessionProvider>
-          <WorkspaceProvider>{children}</WorkspaceProvider>
+          <AuthProvider>
+            <WorkspaceProvider>{children}</WorkspaceProvider>
+          </AuthProvider>
         </OuterbaseSessionProvider>
       </ClientOnly>
     </ThemeLayout>
diff --git a/src/components/picker/country-code-picker.tsx b/src/components/picker/country-code-picker.tsx
new file mode 100644
index 00000000..2fc66cba
--- /dev/null
+++ b/src/components/picker/country-code-picker.tsx
@@ -0,0 +1,270 @@
+import { cn } from "@/lib/utils";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "../ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+
+const countries = [
+  { name: "United States", code: "+1", flag: "🇺🇸" },
+  { name: "United Kingdom", code: "+44", flag: "🇬🇧" },
+  { name: "China", code: "+86", flag: "🇨🇳" },
+  { name: "Australia", code: "+61", flag: "🇦🇺" },
+  { name: "Japan", code: "+81", flag: "🇯🇵" },
+  { name: "Taiwan", code: "+886", flag: "🇹🇼" },
+  { name: "Afghanistan", code: "+93", flag: "🇦🇫" },
+  { name: "Albania", code: "+355", flag: "🇦🇱" },
+  { name: "Algeria", code: "+213", flag: "🇩🇿" },
+  { name: "Andorra", code: "+376", flag: "🇦🇩" },
+  { name: "Angola", code: "+244", flag: "🇦🇴" },
+  { name: "Argentina", code: "+54", flag: "🇦🇷" },
+  { name: "Armenia", code: "+374", flag: "🇦🇲" },
+  { name: "Austria", code: "+43", flag: "🇦🇹" },
+  { name: "Azerbaijan", code: "+994", flag: "🇦🇿" },
+  { name: "Bahamas", code: "+1-242", flag: "🇧🇸" },
+  { name: "Bahrain", code: "+973", flag: "🇧🇭" },
+  { name: "Bangladesh", code: "+880", flag: "🇧🇩" },
+  { name: "Barbados", code: "+1-246", flag: "🇧🇧" },
+  { name: "Belarus", code: "+375", flag: "🇧🇾" },
+  { name: "Belgium", code: "+32", flag: "🇧🇪" },
+  { name: "Belize", code: "+501", flag: "🇧🇿" },
+  { name: "Benin", code: "+229", flag: "🇧🇯" },
+  { name: "Bhutan", code: "+975", flag: "🇧🇹" },
+  { name: "Bolivia", code: "+591", flag: "🇧🇴" },
+  { name: "Bosnia and Herzegovina", code: "+387", flag: "🇧🇦" },
+  { name: "Botswana", code: "+267", flag: "🇧🇼" },
+  { name: "Brazil", code: "+55", flag: "🇧🇷" },
+  { name: "Brunei", code: "+673", flag: "🇧🇳" },
+  { name: "Bulgaria", code: "+359", flag: "🇧🇬" },
+  { name: "Burkina Faso", code: "+226", flag: "🇧🇫" },
+  { name: "Burundi", code: "+257", flag: "🇧🇮" },
+  { name: "Cambodia", code: "+855", flag: "🇰🇭" },
+  { name: "Cameroon", code: "+237", flag: "🇨🇲" },
+  { name: "Canada", code: "+1", flag: "🇨🇦" },
+  { name: "Cape Verde", code: "+238", flag: "🇨🇻" },
+  { name: "Central African Republic", code: "+236", flag: "🇨🇫" },
+  { name: "Chad", code: "+235", flag: "🇹🇩" },
+  { name: "Chile", code: "+56", flag: "🇨🇱" },
+  { name: "Colombia", code: "+57", flag: "🇨🇴" },
+  { name: "Comoros", code: "+269", flag: "🇰🇲" },
+  { name: "Congo", code: "+242", flag: "🇨🇬" },
+  { name: "Costa Rica", code: "+506", flag: "🇨🇷" },
+  { name: "Croatia", code: "+385", flag: "🇭🇷" },
+  { name: "Cuba", code: "+53", flag: "🇨🇺" },
+  { name: "Cyprus", code: "+357", flag: "🇨🇾" },
+  { name: "Czech Republic", code: "+420", flag: "🇨🇿" },
+  { name: "Denmark", code: "+45", flag: "🇩🇰" },
+  { name: "Djibouti", code: "+253", flag: "🇩🇯" },
+  { name: "Dominica", code: "+1-767", flag: "🇩🇲" },
+  { name: "Dominican Republic", code: "+1-809", flag: "🇩🇴" },
+  { name: "East Timor", code: "+670", flag: "🇹🇱" },
+  { name: "Ecuador", code: "+593", flag: "🇪🇨" },
+  { name: "Egypt", code: "+20", flag: "🇪🇬" },
+  { name: "El Salvador", code: "+503", flag: "🇸🇻" },
+  { name: "Equatorial Guinea", code: "+240", flag: "🇬🇶" },
+  { name: "Eritrea", code: "+291", flag: "🇪🇷" },
+  { name: "Estonia", code: "+372", flag: "🇪🇪" },
+  { name: "Ethiopia", code: "+251", flag: "🇪🇹" },
+  { name: "Fiji", code: "+679", flag: "🇫🇯" },
+  { name: "Finland", code: "+358", flag: "🇫🇮" },
+  { name: "France", code: "+33", flag: "🇫🇷" },
+  { name: "Gabon", code: "+241", flag: "🇬🇦" },
+  { name: "Gambia", code: "+220", flag: "🇬🇲" },
+  { name: "Georgia", code: "+995", flag: "🇬🇪" },
+  { name: "Germany", code: "+49", flag: "🇩🇪" },
+  { name: "Ghana", code: "+233", flag: "🇬🇭" },
+  { name: "Greece", code: "+30", flag: "🇬🇷" },
+  { name: "Grenada", code: "+1-473", flag: "🇬🇩" },
+  { name: "Guatemala", code: "+502", flag: "🇬🇹" },
+  { name: "Guinea", code: "+224", flag: "🇬🇳" },
+  { name: "Guinea-Bissau", code: "+245", flag: "🇬🇼" },
+  { name: "Guyana", code: "+592", flag: "🇬🇾" },
+  { name: "Haiti", code: "+509", flag: "🇭🇹" },
+  { name: "Honduras", code: "+504", flag: "🇭🇳" },
+  { name: "Hungary", code: "+36", flag: "🇭🇺" },
+  { name: "Iceland", code: "+354", flag: "🇮🇸" },
+  { name: "India", code: "+91", flag: "🇮🇳" },
+  { name: "Indonesia", code: "+62", flag: "🇮🇩" },
+  { name: "Iran", code: "+98", flag: "🇮🇷" },
+  { name: "Iraq", code: "+964", flag: "🇮🇶" },
+  { name: "Ireland", code: "+353", flag: "🇮🇪" },
+  { name: "Israel", code: "+972", flag: "🇮🇱" },
+  { name: "Italy", code: "+39", flag: "🇮🇹" },
+  { name: "Jamaica", code: "+1-876", flag: "🇯🇲" },
+  { name: "Jordan", code: "+962", flag: "🇯🇴" },
+  { name: "Kazakhstan", code: "+7", flag: "🇰🇿" },
+  { name: "Kenya", code: "+254", flag: "🇰🇪" },
+  { name: "Kiribati", code: "+686", flag: "🇰🇮" },
+  { name: "Korea, North", code: "+850", flag: "🇰🇵" },
+  { name: "Korea, South", code: "+82", flag: "🇰🇷" },
+  { name: "Kuwait", code: "+965", flag: "🇰🇼" },
+  { name: "Kyrgyzstan", code: "+996", flag: "🇰🇬" },
+  { name: "Laos", code: "+856", flag: "🇱🇦" },
+  { name: "Latvia", code: "+371", flag: "🇱🇻" },
+  { name: "Lebanon", code: "+961", flag: "🇱🇧" },
+  { name: "Lesotho", code: "+266", flag: "🇱🇸" },
+  { name: "Liberia", code: "+231", flag: "🇱🇷" },
+  { name: "Libya", code: "+218", flag: "🇱🇾" },
+  { name: "Liechtenstein", code: "+423", flag: "🇱🇮" },
+  { name: "Lithuania", code: "+370", flag: "🇱🇹" },
+  { name: "Luxembourg", code: "+352", flag: "🇱🇺" },
+  { name: "Madagascar", code: "+261", flag: "🇲🇬" },
+  { name: "Malawi", code: "+265", flag: "🇲🇼" },
+  { name: "Malaysia", code: "+60", flag: "🇲🇾" },
+  { name: "Maldives", code: "+960", flag: "🇲🇻" },
+  { name: "Mali", code: "+223", flag: "🇲🇱" },
+  { name: "Malta", code: "+356", flag: "🇲🇹" },
+  { name: "Marshall Islands", code: "+692", flag: "🇲🇭" },
+  { name: "Mauritania", code: "+222", flag: "🇲🇷" },
+  { name: "Mauritius", code: "+230", flag: "🇲🇺" },
+  { name: "Mexico", code: "+52", flag: "🇲🇽" },
+  { name: "Micronesia", code: "+691", flag: "🇫🇲" },
+  { name: "Moldova", code: "+373", flag: "🇲🇩" },
+  { name: "Monaco", code: "+377", flag: "🇲🇨" },
+  { name: "Mongolia", code: "+976", flag: "🇲🇳" },
+  { name: "Montenegro", code: "+382", flag: "🇲🇪" },
+  { name: "Morocco", code: "+212", flag: "🇲🇦" },
+  { name: "Mozambique", code: "+258", flag: "🇲🇿" },
+  { name: "Myanmar", code: "+95", flag: "🇲🇲" },
+  { name: "Namibia", code: "+264", flag: "🇳🇦" },
+  { name: "Nauru", code: "+674", flag: "🇳🇷" },
+  { name: "Nepal", code: "+977", flag: "🇳🇵" },
+  { name: "Netherlands", code: "+31", flag: "🇳🇱" },
+  { name: "New Zealand", code: "+64", flag: "🇳🇿" },
+  { name: "Nicaragua", code: "+505", flag: "🇳🇮" },
+  { name: "Niger", code: "+227", flag: "🇳🇪" },
+  { name: "Nigeria", code: "+234", flag: "🇳🇬" },
+  { name: "Norway", code: "+47", flag: "🇳🇴" },
+  { name: "Oman", code: "+968", flag: "🇴🇲" },
+  { name: "Pakistan", code: "+92", flag: "🇵🇰" },
+  { name: "Palau", code: "+680", flag: "🇵🇼" },
+  { name: "Panama", code: "+507", flag: "🇵🇦" },
+  { name: "Papua New Guinea", code: "+675", flag: "🇵🇬" },
+  { name: "Paraguay", code: "+595", flag: "🇵🇾" },
+  { name: "Peru", code: "+51", flag: "🇵🇪" },
+  { name: "Philippines", code: "+63", flag: "🇵🇭" },
+  { name: "Poland", code: "+48", flag: "🇵🇱" },
+  { name: "Portugal", code: "+351", flag: "🇵🇹" },
+  { name: "Qatar", code: "+974", flag: "🇶🇦" },
+  { name: "Romania", code: "+40", flag: "🇷🇴" },
+  { name: "Russia", code: "+7", flag: "🇷🇺" },
+  { name: "Rwanda", code: "+250", flag: "🇷🇼" },
+  { name: "Saint Kitts and Nevis", code: "+1-869", flag: "🇰🇳" },
+  { name: "Saint Lucia", code: "+1-758", flag: "🇱🇨" },
+  { name: "Saint Vincent", code: "+1-784", flag: "🇻🇨" },
+  { name: "Samoa", code: "+685", flag: "🇼🇸" },
+  { name: "San Marino", code: "+378", flag: "🇸🇲" },
+  { name: "Sao Tome and Principe", code: "+239", flag: "🇸🇹" },
+  { name: "Saudi Arabia", code: "+966", flag: "🇸🇦" },
+  { name: "Senegal", code: "+221", flag: "🇸🇳" },
+  { name: "Serbia", code: "+381", flag: "🇷🇸" },
+  { name: "Seychelles", code: "+248", flag: "🇸🇨" },
+  { name: "Sierra Leone", code: "+232", flag: "🇸🇱" },
+  { name: "Singapore", code: "+65", flag: "🇸🇬" },
+  { name: "Slovakia", code: "+421", flag: "🇸🇰" },
+  { name: "Slovenia", code: "+386", flag: "🇸🇮" },
+  { name: "Solomon Islands", code: "+677", flag: "🇸🇧" },
+  { name: "Somalia", code: "+252", flag: "🇸🇴" },
+  { name: "South Africa", code: "+27", flag: "🇿🇦" },
+  { name: "South Sudan", code: "+211", flag: "🇸🇸" },
+  { name: "Spain", code: "+34", flag: "🇪🇸" },
+  { name: "Sri Lanka", code: "+94", flag: "🇱🇰" },
+  { name: "Sudan", code: "+249", flag: "🇸🇩" },
+  { name: "Suriname", code: "+597", flag: "🇸🇷" },
+  { name: "Swaziland", code: "+268", flag: "🇸🇿" },
+  { name: "Sweden", code: "+46", flag: "🇸🇪" },
+  { name: "Switzerland", code: "+41", flag: "🇨🇭" },
+  { name: "Syria", code: "+963", flag: "🇸🇾" },
+  { name: "Tajikistan", code: "+992", flag: "🇹🇯" },
+  { name: "Tanzania", code: "+255", flag: "🇹🇿" },
+  { name: "Thailand", code: "+66", flag: "🇹🇭" },
+  { name: "Togo", code: "+228", flag: "🇹🇬" },
+  { name: "Tonga", code: "+676", flag: "🇹🇴" },
+  { name: "Trinidad and Tobago", code: "+1-868", flag: "🇹🇹" },
+  { name: "Tunisia", code: "+216", flag: "🇹🇳" },
+  { name: "Turkey", code: "+90", flag: "🇹🇷" },
+  { name: "Turkmenistan", code: "+993", flag: "🇹🇲" },
+  { name: "Tuvalu", code: "+688", flag: "🇹🇻" },
+  { name: "Uganda", code: "+256", flag: "🇺🇬" },
+  { name: "Ukraine", code: "+380", flag: "🇺🇦" },
+  { name: "United Arab Emirates", code: "+971", flag: "🇦🇪" },
+  { name: "Uruguay", code: "+598", flag: "🇺🇾" },
+  { name: "Uzbekistan", code: "+998", flag: "🇺🇿" },
+  { name: "Vanuatu", code: "+678", flag: "🇻🇺" },
+  { name: "Vatican City", code: "+379", flag: "🇻🇦" },
+  { name: "Venezuela", code: "+58", flag: "🇻🇪" },
+  { name: "Vietnam", code: "+84", flag: "🇻🇳" },
+  { name: "Yemen", code: "+967", flag: "🇾🇪" },
+  { name: "Zambia", code: "+260", flag: "🇿🇲" },
+  { name: "Zimbabwe", code: "+263", flag: "🇿🇼" },
+];
+
+interface CountryCodePickerProps {
+  onChange?: (country: { name: string; code: string; flag: string }) => void;
+  className?: string;
+}
+
+export function CountryCodePicker({
+  onChange,
+  className,
+}: CountryCodePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("United States");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          className={cn(
+            "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+            !value && "text-muted-foreground"
+          )}
+        >
+          {value ? (
+            <>
+              {countries.find((country) => country.name === value)?.flag}{" "}
+              {countries.find((country) => country.name === value)?.code}
+            </>
+          ) : (
+            "Select country code"
+          )}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn("max-h-[300px] w-[300px] overflow-y-auto p-0", className)}
+      >
+        <Command>
+          <CommandInput placeholder="Search country..." />
+          <CommandEmpty>No country found.</CommandEmpty>
+          <CommandGroup>
+            {countries.map((country) => (
+              <CommandItem
+                key={country.name}
+                value={country.name}
+                onSelect={(currentValue) => {
+                  setValue(currentValue);
+                  setOpen(false);
+                  onChange?.(country);
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === country.name ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {country.flag} {country.name} ({country.code})
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/outerbase-cloud/api-account.ts b/src/outerbase-cloud/api-account.ts
index 2a286951..bc373afc 100644
--- a/src/outerbase-cloud/api-account.ts
+++ b/src/outerbase-cloud/api-account.ts
@@ -1,4 +1,5 @@
 import { requestOuterbase } from "./api";
+import { OuterbaseAPIResponse } from "./api-type";
 
 export interface OuterbaseUserProfileInput {
   first_name: string;
@@ -42,3 +43,44 @@ export async function resetPassword(data: {
     data
   );
 }
+
+export async function requestOuterbaseTwoFactorAuth(
+  type: "otp" | "phone",
+  data: {
+    number?: string;
+  }
+) {
+  return await requestOuterbase(`/api/v1/me/${type}`, "POST", data);
+}
+
+export async function verifyOuterbase2FAOTP(data: {
+  otp_id: string;
+  token: string;
+}) {
+  return await requestOuterbase<OuterbaseAPIResponse>(
+    `/api/v1/me/otp/verify`,
+    "POST",
+    data
+  );
+}
+
+export async function deleteOuterbaseTwoFactorAuth() {
+  return await requestOuterbase<OuterbaseAPIResponse>(
+    "/api/v1/me/otp",
+    "DELETE"
+  );
+}
+
+export async function requestOuterbase2FAPhone(id: string) {
+  return await requestOuterbase(`/api/v1/me/phone/${id}/request`, "POST");
+}
+
+export async function verifyOuterbaseOTP(token: string) {
+  return await requestOuterbase("/api/v1/auth/mfa/otp/verify", "POST", {
+    token,
+  });
+}
+
+export async function submitVerifyPhone2FA(id: string, data: { code: string }) {
+  return await requestOuterbase(`/api/v1/me/phone/${id}/submit`, "POST", data);
+}
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index b40a2a50..c30bfd89 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -115,6 +115,9 @@ export interface OuterbaseAPIUser {
   email: string;
   last_name: string;
   first_name: string;
+  has_otp: boolean;
+  has_password: boolean;
+  has_verified_phone: boolean;
 }
 
 export interface OuterbaseAPIDashboardDetail

From 3ba84035569e76c5aded46a57af96310dc6e2e59 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 18 Feb 2025 10:40:35 +0700
Subject: [PATCH 067/106] add animation when remove and add resource

---
 package-lock.json                             |  69 +++++++
 package.json                                  |   1 +
 src/app/(outerbase)/layout.tsx                |   5 +-
 .../(outerbase)/local/dialog-board-delete.tsx |  76 ++++++++
 src/app/(outerbase)/local/hooks.tsx           |   7 +-
 src/app/(outerbase)/local/page.tsx            |  22 ++-
 src/app/(outerbase)/nav-header-local.tsx      |   0
 src/app/(outerbase)/nav-header.tsx            |  54 ++++--
 src/app/(outerbase)/nav.tsx                   | 180 ------------------
 src/app/(outerbase)/resource-item-helper.tsx  | 120 +++++++-----
 src/app/(outerbase)/sidebar-profile.tsx       |  10 +
 .../w/[workspaceId]/billing/page.tsx          |  13 +-
 .../w/[workspaceId]/settings/page.tsx         |   9 +-
 .../(outerbase)/w/local-workspace/page.tsx    |  54 ------
 14 files changed, 302 insertions(+), 318 deletions(-)
 create mode 100644 src/app/(outerbase)/local/dialog-board-delete.tsx
 create mode 100644 src/app/(outerbase)/nav-header-local.tsx
 delete mode 100644 src/app/(outerbase)/nav.tsx
 delete mode 100644 src/app/(outerbase)/w/local-workspace/page.tsx

diff --git a/package-lock.json b/package-lock.json
index 2a6761c8..1771dfc0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,6 +75,7 @@
         "lodash": "^4.17.21",
         "lucia": "^3.2.0",
         "lucide-react": "^0.474.0",
+        "motion": "^12.4.3",
         "next": "15.1.4",
         "next-themes": "^0.4.4",
         "oslo": "^1.1.3",
@@ -10774,6 +10775,33 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.4.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.3.tgz",
+      "integrity": "sha512-rsMeO7w3dKyNG09o3cGwSH49iHU+VgDmfSSfsX+wfkO3zDA6WWkh4sUsMXd155YROjZP+7FTIhDrBYfgZeHjKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.0.0",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-monkey": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.6.tgz",
@@ -14833,6 +14861,47 @@
       "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/motion": {
+      "version": "12.4.3",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.4.3.tgz",
+      "integrity": "sha512-KeoMpKFEVdofN0v/z1g3tm4cMtk1WAHQ5Pg7M1ElxeRLA8cBSrkmSCJ9q6hLo7spp/n906h2kmeDNvBkysaxcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.4.3",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
+      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index b747d14b..2ee885ae 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "lodash": "^4.17.21",
     "lucia": "^3.2.0",
     "lucide-react": "^0.474.0",
+    "motion": "^12.4.3",
     "next": "15.1.4",
     "next-themes": "^0.4.4",
     "oslo": "^1.1.3",
diff --git a/src/app/(outerbase)/layout.tsx b/src/app/(outerbase)/layout.tsx
index 58f3180a..853ce284 100644
--- a/src/app/(outerbase)/layout.tsx
+++ b/src/app/(outerbase)/layout.tsx
@@ -1,7 +1,6 @@
 import { OuterbaseSessionProvider } from "@/app/(outerbase)/session-provider";
 import ClientOnly from "@/components/client-only";
 import ThemeLayout from "../(theme)/theme_layout";
-import AuthProvider from "./auth-provider";
 import { WorkspaceProvider } from "./workspace-provider";
 
 export default function OuterbaseLayout({
@@ -13,9 +12,7 @@ export default function OuterbaseLayout({
     <ThemeLayout>
       <ClientOnly>
         <OuterbaseSessionProvider>
-          <AuthProvider>
-            <WorkspaceProvider>{children}</WorkspaceProvider>
-          </AuthProvider>
+          <WorkspaceProvider>{children}</WorkspaceProvider>
         </OuterbaseSessionProvider>
       </ClientOnly>
     </ThemeLayout>
diff --git a/src/app/(outerbase)/local/dialog-board-delete.tsx b/src/app/(outerbase)/local/dialog-board-delete.tsx
new file mode 100644
index 00000000..a0fa0077
--- /dev/null
+++ b/src/app/(outerbase)/local/dialog-board-delete.tsx
@@ -0,0 +1,76 @@
+import CopyableText from "@/components/copyable-text";
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+import { deleteLocalDashboard } from "./hooks";
+
+export const deleteLocalBoardDialog = createDialog<{
+  boardId: string;
+  boardName: string;
+}>(({ close, boardName, boardId }) => {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState("");
+
+  const deleteClicked = useCallback(() => {
+    if (name !== boardName) return;
+
+    setLoading(true);
+
+    deleteLocalDashboard(boardId)
+      .then(() => {
+        close(undefined);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [name, boardId, close, boardName]);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Confirm deletion of board {boardName}</DialogTitle>
+        <DialogDescription>
+          All saved charts and any other contributions made to your Dashboard
+          will be deleted. This action is permanent and <strong>cannot</strong>{" "}
+          be undone.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-4">
+        <div>
+          <CopyableText text={boardName} />
+        </div>
+
+        <LabelInput
+          label="Enter the name of this Base to confirm:"
+          placeholder="Board name"
+          value={name}
+          required
+          onChange={(e) => setName(e.currentTarget.value)}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button
+          variant={"destructive"}
+          disabled={loading || boardName !== name}
+          onClick={deleteClicked}
+        >
+          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}I
+          understand, delete this board
+        </Button>
+        <Button variant={"secondary"} onClick={() => close(undefined)}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </>
+  );
+});
diff --git a/src/app/(outerbase)/local/hooks.tsx b/src/app/(outerbase)/local/hooks.tsx
index 34711c10..e0e66340 100644
--- a/src/app/(outerbase)/local/hooks.tsx
+++ b/src/app/(outerbase)/local/hooks.tsx
@@ -1,5 +1,5 @@
 import { LocalDashboardData, localDb } from "@/indexdb";
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 
 export function useLocalDashboardList() {
   return useSWR(
@@ -34,3 +34,8 @@ export async function createLocalDashboard(boardName: string) {
   await localDb.table("board").add({ id, content: data });
   return data;
 }
+
+export async function deleteLocalDashboard(boardId: string) {
+  await localDb.table("board").delete(boardId);
+  mutate("/dashboards/local");
+}
diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
index c042ab22..95b6b439 100644
--- a/src/app/(outerbase)/local/page.tsx
+++ b/src/app/(outerbase)/local/page.tsx
@@ -12,6 +12,7 @@ import NavigationLayout from "../nav-layout";
 import NewResourceButton from "../new-resource-button";
 import { ResourceItemList, ResourceItemProps } from "../resource-item-helper";
 import { createLocalBoardDialog } from "./dialog-board-create";
+import { deleteLocalBoardDialog } from "./dialog-board-delete";
 import { useLocalDashboardList } from "./hooks";
 
 export default function LocalConnectionPage() {
@@ -49,18 +50,25 @@ export default function LocalConnectionPage() {
     );
   }, [dashboardList]);
 
-  const onCreateBoardClicked = useCallback(() => {
+  const onBoardCreate = useCallback(() => {
     createLocalBoardDialog.show({}).then(() => {
-      refreshDashboard(undefined, { revalidate: true });
+      refreshDashboard();
     });
   }, [refreshDashboard]);
 
+  const onBoardRemove = useCallback((deletedResource: ResourceItemProps) => {
+    deleteLocalBoardDialog
+      .show({ boardId: deletedResource.id, boardName: deletedResource.name })
+      .then()
+      .catch();
+  }, []);
+
   return (
     <NavigationLayout>
-      <NavigationHeader title={"Local Worksapce"} />
+      <NavigationHeader />
       <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
         <div className="flex gap-2">
-          <NewResourceButton onCreateBoard={onCreateBoardClicked} />
+          <NewResourceButton onCreateBoard={onBoardCreate} />
         </div>
 
         <div className="my-4 flex gap-4">
@@ -86,7 +94,11 @@ export default function LocalConnectionPage() {
           </button>
         </div>
 
-        <ResourceItemList boards={dashboardResources} bases={baseResources} />
+        <ResourceItemList
+          boards={dashboardResources}
+          bases={baseResources}
+          onBoardRemove={onBoardRemove}
+        />
       </div>
     </NavigationLayout>
   );
diff --git a/src/app/(outerbase)/nav-header-local.tsx b/src/app/(outerbase)/nav-header-local.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/(outerbase)/nav-header.tsx b/src/app/(outerbase)/nav-header.tsx
index 6c32e53e..d61f4865 100644
--- a/src/app/(outerbase)/nav-header.tsx
+++ b/src/app/(outerbase)/nav-header.tsx
@@ -1,35 +1,57 @@
 import { cn } from "@/lib/utils";
 import { Cardholder, Database, Gear } from "@phosphor-icons/react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { useWorkspaces } from "./workspace-provider";
 
-interface NavigationHeaderProps {
-  title: string;
-}
-
-export default function NavigationHeader({ title }: NavigationHeaderProps) {
+export default function NavigationHeader() {
   const tabClassName =
     "p-2 border-b-2 border-background flex gap-2 items-center h-full";
   const selectedTabClassName = cn(tabClassName, "border-orange-500");
 
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  const { currentWorkspace } = useWorkspaces();
+  const pathname = usePathname();
+
   return (
     <div className="bg-background flex h-12 flex-col gap-1 border-b px-6">
-      <ul className="flex h-full gap-2 text-base">
-        <li className={selectedTabClassName}>
+      <nav className="flex h-full gap-2 text-base">
+        <Link
+          className={
+            pathname.endsWith(workspaceId) ? selectedTabClassName : tabClassName
+          }
+          href={`/w/${workspaceId}`}
+        >
           <Database />
           Resources
-        </li>
-        <li className={tabClassName}>
+        </Link>
+        <Link
+          className={
+            pathname.endsWith(`/${workspaceId}/settings`)
+              ? selectedTabClassName
+              : tabClassName
+          }
+          href={`/w/${workspaceId}/settings`}
+        >
           <Gear />
           Settings
-        </li>
-        <li className={tabClassName}>
+        </Link>
+        <Link
+          className={
+            pathname.endsWith(`/${workspaceId}/billing`)
+              ? selectedTabClassName
+              : tabClassName
+          }
+          href={`/w/${workspaceId}/billing`}
+        >
           <Cardholder />
           Billing
-        </li>
+        </Link>
 
-        <li className="flex flex-1 items-center justify-end font-bold">
-          {title}
-        </li>
-      </ul>
+        <div className="flex flex-1 items-center justify-end font-bold">
+          {currentWorkspace?.name ?? ""}
+        </div>
+      </nav>
     </div>
   );
 }
diff --git a/src/app/(outerbase)/nav.tsx b/src/app/(outerbase)/nav.tsx
deleted file mode 100644
index 44052708..00000000
--- a/src/app/(outerbase)/nav.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-"use client";
-import { OuterbaseIcon } from "@/components/icons/outerbase";
-import { Button } from "@/components/orbit/button";
-import { getDatabaseIcon } from "@/components/resource-card/utils";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  CaretUpDown,
-  Gear,
-  GlobeHemisphereEast,
-  SquaresFour,
-} from "@phosphor-icons/react";
-import Link from "next/link";
-import { useParams, usePathname, useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
-import NavigationProfile from "./nav-profile";
-import { useSession } from "./session-provider";
-import { useWorkspaces } from "./workspace-provider";
-
-export function NavigationBar() {
-  const { currentWorkspace } = useWorkspaces();
-  const { workspaceId } = useParams<{ workspaceId: string }>();
-  const pathname = usePathname();
-  const { session } = useSession();
-
-  return (
-    <div className="dark:bg-background relative sticky top-0 z-20 flex h-14 items-center justify-center gap-2 bg-neutral-50 px-2">
-      <div className="text-primary absolute left-0 flex h-14 items-center pl-2">
-        <Link
-          href={
-            pathname !== "/w/local-workspace"
-              ? `/w/${workspaceId}`
-              : "/w/local-workspace"
-          }
-        >
-          <OuterbaseIcon className="h-8 w-8" />
-        </Link>
-
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="ghost">
-              {currentWorkspace?.name ?? "Local"}
-              <CaretUpDown className="ml-2" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="h-[400px] w-[500px] p-0" align="start">
-            <WorkspaceSelector />
-          </PopoverContent>
-        </Popover>
-      </div>
-
-      {workspaceId && workspaceId !== "local-workspace" && (
-        <div className="flex gap-4 text-base">
-          <Link
-            href={`/w/${workspaceId}`}
-            className="flex cursor-pointer items-center gap-1"
-          >
-            <GlobeHemisphereEast weight="fill" className="size-5" /> Home
-          </Link>
-          <Link
-            href={`/w/${workspaceId}/settings`}
-            className="flex cursor-pointer items-center gap-1"
-          >
-            <Gear className="size-5" />
-            Settings
-          </Link>
-          <Link
-            href={`/w/${workspaceId}/billing`}
-            className="flex cursor-pointer items-center gap-1"
-          >
-            <Gear className="size-5" />
-            Billing
-          </Link>
-        </div>
-      )}
-
-      <div className="absolute right-0 flex gap-2 pr-2">
-        <div className="bg-secondary text-secondary-foreground flex h-9 items-center justify-center rounded-lg border px-4 text-base font-semibold">
-          Feedback
-        </div>
-
-        <NavigationProfile />
-
-        {!session && (
-          <Button href="/signin" size="lg" as="link">
-            Sign In
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function WorkspaceSelector() {
-  const router = useRouter();
-  const { session } = useSession();
-  const { workspaces, currentWorkspace } = useWorkspaces();
-  const { workspaceId } = useParams<{ workspaceId: string }>();
-  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState(workspaceId);
-
-  const selectedWorkspace = workspaces.find(
-    (w) => w.id === selectedWorkspaceId || w.short_name === selectedWorkspaceId
-  );
-
-  const bases = useMemo(() => {
-    const currentBases = [...(selectedWorkspace?.bases ?? [])];
-    currentBases.sort((a, b) => a.name.localeCompare(b.name));
-    return currentBases;
-  }, [selectedWorkspace]);
-
-  return (
-    <div className="flex h-[400px] w-[500px]">
-      <div className="flex h-full w-1/2 flex-col gap-0.5 border-r p-1">
-        <label className="text-muted-foreground mt-1 px-2 py-1 text-sm">
-          WORKSPACES
-        </label>
-
-        <Button
-          variant="ghost"
-          size="sm"
-          className="p-4 font-normal"
-          onClick={() => router.push(`/w/local-workspace`)}
-          toggled={!currentWorkspace}
-        >
-          Local
-        </Button>
-
-        {workspaces.map((workspace) => (
-          <Button
-            key={workspace.id}
-            onClick={() => router.push(`/w/${workspace.short_name}`)}
-            onMouseEnter={() => setSelectedWorkspaceId(workspace.short_name)}
-            variant="ghost"
-            toggled={currentWorkspace?.id === workspace.id}
-            className="p-4 font-normal"
-            size="sm"
-          >
-            {workspace.name}
-          </Button>
-        ))}
-
-        <Button
-          variant="ghost"
-          className="p-4 font-normal"
-          size="sm"
-          as="link"
-          href={session ? "/new-workspace" : "/signin"}
-        >
-          <SquaresFour size={16} /> New Workspace
-        </Button>
-      </div>
-      <div className="flex h-full w-1/2 flex-col gap-0.5 overflow-y-auto p-1 text-sm">
-        <label className="text-muted-foreground mt-1 px-3 py-1 text-sm">
-          BASES
-        </label>
-        {bases.map((base) => {
-          const IconComponent = getDatabaseIcon(base.sources[0]?.type);
-
-          return (
-            <Button
-              key={base.id}
-              variant="ghost"
-              className="p-4 font-normal"
-              size="sm"
-              onClick={() =>
-                router.push(`/w/${selectedWorkspaceId}/${base.short_name}`, {})
-              }
-            >
-              <IconComponent className="h-4 w-4" />
-              {base.name}
-            </Button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
index 868e8691..ad4baa15 100644
--- a/src/app/(outerbase)/resource-item-helper.tsx
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -12,6 +12,7 @@ import {
   OuterbaseAPIWorkspace,
 } from "@/outerbase-cloud/api-type";
 import { Trash } from "@phosphor-icons/react";
+import { AnimatePresence, motion } from "framer-motion";
 import ResourceCardLoading from "./resource-card-loading";
 
 export interface ResourceItemProps {
@@ -70,33 +71,43 @@ export function ResourceItemList({
         <>
           <h2 className="text-base font-bold">Boards</h2>
           <div className="flex grid grid-cols-1 flex-wrap gap-4 min-[700px]:grid-cols-2 min-[900px]:grid-cols-3 min-[1200px]:grid-cols-4 min-[1500px]:grid-cols-5 min-[1800px]:grid-cols-6 min-[2100px]:grid-cols-7">
-            {boards.map((resource: ResourceItemProps) => {
-              const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
+            <AnimatePresence initial={false}>
+              {boards.map((resource: ResourceItemProps) => {
+                const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
 
-              return (
-                <ResourceCard
-                  className="w-full"
-                  key={resource.id}
-                  color="default"
-                  icon={getDatabaseIcon(resource.type)}
-                  href={resource.href}
-                  title={resource.name}
-                  subtitle={getDatabaseFriendlyName(resource.type)}
-                  visual={getDatabaseVisual(resource.type)}
-                  status={status}
-                >
-                  <DropdownMenuItem
-                    className="text-red-500 focus:text-red-500"
-                    onClick={() => {
-                      if (onBoardRemove) onBoardRemove(resource);
-                    }}
+                return (
+                  <motion.div
+                    key={resource.id}
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    exit={{ opacity: 0, scale: 0.5 }}
+                    transition={{ duration: 0.3 }}
                   >
-                    <Trash size={16} className="mr-2" />
-                    Remove board
-                  </DropdownMenuItem>
-                </ResourceCard>
-              );
-            })}
+                    <ResourceCard
+                      className="w-full"
+                      color="default"
+                      key={resource.id}
+                      icon={getDatabaseIcon(resource.type)}
+                      href={resource.href}
+                      title={resource.name}
+                      subtitle={getDatabaseFriendlyName(resource.type)}
+                      visual={getDatabaseVisual(resource.type)}
+                      status={status}
+                    >
+                      <DropdownMenuItem
+                        className="text-red-500 focus:text-red-500"
+                        onClick={() => {
+                          if (onBoardRemove) onBoardRemove(resource);
+                        }}
+                      >
+                        <Trash size={16} className="mr-2" />
+                        Remove board
+                      </DropdownMenuItem>
+                    </ResourceCard>
+                  </motion.div>
+                );
+              })}
+            </AnimatePresence>
           </div>
         </>
       )}
@@ -113,33 +124,42 @@ export function ResourceItemList({
           </>
         )}
 
-        {bases.map((resource: ResourceItemProps) => {
-          const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
+        <AnimatePresence initial={false}>
+          {bases.map((resource: ResourceItemProps) => {
+            const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
 
-          return (
-            <ResourceCard
-              className="w-full"
-              key={resource.id}
-              color="default"
-              icon={getDatabaseIcon(resource.type)}
-              href={resource.href}
-              title={resource.name}
-              subtitle={getDatabaseFriendlyName(resource.type)}
-              visual={getDatabaseVisual(resource.type)}
-              status={status}
-            >
-              <DropdownMenuItem
-                className="text-red-500 focus:text-red-500"
-                onClick={() => {
-                  if (onBaseRemove) onBaseRemove(resource);
-                }}
+            return (
+              <motion.div
+                key={resource.id}
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.5 }}
+                transition={{ duration: 0.3 }}
               >
-                <Trash size={16} className="mr-2" />
-                Remove base
-              </DropdownMenuItem>
-            </ResourceCard>
-          );
-        })}
+                <ResourceCard
+                  className="w-full"
+                  color="default"
+                  icon={getDatabaseIcon(resource.type)}
+                  href={resource.href}
+                  title={resource.name}
+                  subtitle={getDatabaseFriendlyName(resource.type)}
+                  visual={getDatabaseVisual(resource.type)}
+                  status={status}
+                >
+                  <DropdownMenuItem
+                    className="text-red-500 focus:text-red-500"
+                    onClick={() => {
+                      if (onBaseRemove) onBaseRemove(resource);
+                    }}
+                  >
+                    <Trash size={16} className="mr-2" />
+                    Remove base
+                  </DropdownMenuItem>
+                </ResourceCard>
+              </motion.div>
+            );
+          })}
+        </AnimatePresence>
       </div>
     </>
   );
diff --git a/src/app/(outerbase)/sidebar-profile.tsx b/src/app/(outerbase)/sidebar-profile.tsx
index b41ffb8d..0aacd697 100644
--- a/src/app/(outerbase)/sidebar-profile.tsx
+++ b/src/app/(outerbase)/sidebar-profile.tsx
@@ -118,6 +118,16 @@ export default function SidebarProfile() {
               Log out <SignOut size={20} />
             </DropdownMenuItem>
           )}
+          {!session && (
+            <DropdownMenuItem
+              onClick={() => {
+                router.push("/signin");
+              }}
+              className="justify-between"
+            >
+              Log in
+            </DropdownMenuItem>
+          )}
         </div>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx b/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
index 80469b25..85114a4b 100644
--- a/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
@@ -1,9 +1,14 @@
-import { NavigationBar } from "@/app/(outerbase)/nav";
+"use client";
+import NavigationHeader from "@/app/(outerbase)/nav-header";
+import NavigationLayout from "@/app/(outerbase)/nav-layout";
 
 export default function WorkspaceBillingPage() {
   return (
-    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
-      <NavigationBar />
-    </div>
+    <NavigationLayout>
+      <NavigationHeader />
+      <div className="container mt-10 flex flex-col p-4">
+        <h1 className="text-lg font-bold">Billing</h1>
+      </div>
+    </NavigationLayout>
   );
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
index cf5940af..ebfda8e0 100644
--- a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
@@ -1,5 +1,6 @@
 "use client";
-import { NavigationBar } from "@/app/(outerbase)/nav";
+import NavigationHeader from "@/app/(outerbase)/nav-header";
+import NavigationLayout from "@/app/(outerbase)/nav-layout";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import { Loader } from "@/components/orbit/loader";
 import WorkspaceDeleteSection from "./delete";
@@ -11,8 +12,8 @@ export default function WorkspaceBillingPage() {
   const { currentWorkspace } = useWorkspaces();
 
   return (
-    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
-      <NavigationBar />
+    <NavigationLayout>
+      <NavigationHeader />
 
       <div className="container mt-10 flex flex-col p-4">
         <h1 className="text-lg font-bold">Workspace settings</h1>
@@ -31,6 +32,6 @@ export default function WorkspaceBillingPage() {
           </div>
         )}
       </div>
-    </div>
+    </NavigationLayout>
   );
 }
diff --git a/src/app/(outerbase)/w/local-workspace/page.tsx b/src/app/(outerbase)/w/local-workspace/page.tsx
deleted file mode 100644
index 3d55a028..00000000
--- a/src/app/(outerbase)/w/local-workspace/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client";
-import {
-  SavedConnectionItem,
-  SavedConnectionLocalStorage,
-} from "@/app/(theme)/connect/saved-connection-storage";
-import ResourceCard from "@/components/resource-card";
-import {
-  getDatabaseFriendlyName,
-  getDatabaseIcon,
-  getDatabaseVisual,
-} from "@/components/resource-card/utils";
-import { useEffect, useState } from "react";
-import { NavigationBar } from "../../nav";
-
-export default function LocalWorkspacePage() {
-  const [localSavedConns, setLocalSavedConns] = useState<SavedConnectionItem[]>(
-    []
-  );
-
-  useEffect(() => {
-    setLocalSavedConns(SavedConnectionLocalStorage.getList());
-  }, []);
-
-  return (
-    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
-      <NavigationBar />
-
-      <div className="container mx-auto p-4">
-        <h1 className="text-primary mb-8 text-xl font-semibold">
-          Local Connection
-        </h1>
-
-        <div className="bg-secondary mb-8 flex h-[200px] items-center justify-center rounded-lg">
-          Something about not login
-        </div>
-
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
-          {localSavedConns.map((conn) => (
-            <ResourceCard
-              className="w-full"
-              key={conn.id}
-              color={conn.label ?? ""}
-              icon={getDatabaseIcon(conn.driver ?? "")}
-              href={`/client/s/${conn.driver}?p=${conn.id}`}
-              title={conn.name}
-              subtitle={getDatabaseFriendlyName(conn.driver ?? "")}
-              visual={getDatabaseVisual(conn.driver ?? "")}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

From 3c6543edae2b67a4afc8afe11d2112fefdcff7d2 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Tue, 18 Feb 2025 13:05:57 +0700
Subject: [PATCH 068/106] remove backup page

---
 .../w/[workspaceId]/page.backup.tsx           | 222 ------------------
 src/app/(outerbase)/w/[workspaceId]/page.tsx  |   2 +-
 2 files changed, 1 insertion(+), 223 deletions(-)
 delete mode 100644 src/app/(outerbase)/w/[workspaceId]/page.backup.tsx

diff --git a/src/app/(outerbase)/w/[workspaceId]/page.backup.tsx b/src/app/(outerbase)/w/[workspaceId]/page.backup.tsx
deleted file mode 100644
index d7014159..00000000
--- a/src/app/(outerbase)/w/[workspaceId]/page.backup.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-"use client";
-
-import { Button } from "@/components/orbit/button";
-import { Input } from "@/components/orbit/input";
-import { MenuBar } from "@/components/orbit/menu-bar";
-import ResourceCard from "@/components/resource-card";
-import {
-  getDatabaseFriendlyName,
-  getDatabaseIcon,
-  getDatabaseVisual,
-} from "@/components/resource-card/utils";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { getOuterbaseDashboardList } from "@/outerbase-cloud/api";
-import {
-  CalendarDots,
-  CaretDown,
-  Eye,
-  MagnifyingGlass,
-  SortAscending,
-  SortDescending,
-  Users,
-} from "@phosphor-icons/react";
-import { useParams, useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
-import useSWR from "swr";
-import { NavigationBar } from "../../nav";
-import { useWorkspaces } from "../../workspace-provider";
-import { deleteBaseDialog } from "./dialog-base-delete";
-import { createBoardDialog } from "./dialog-board-create";
-import { deleteBoardDialog } from "./dialog-board-delete";
-import useRedirectValidWorkspace from "./redirect-valid-workspace";
-
-interface ResourceItem {
-  id: string;
-  type: string;
-  name: string;
-  href: string;
-  status?: string;
-}
-
-export default function WorkspaceListPageClient() {
-  const router = useRouter();
-  const { currentWorkspace, refreshWorkspace } = useWorkspaces();
-  const { workspaceId } = useParams<{ workspaceId: string }>();
-
-  const [filterType, setFilterType] = useState("all");
-  const [filterName, setFilterName] = useState("");
-
-  useRedirectValidWorkspace();
-
-  const { data: boards, mutate } = useSWR(
-    `/workspace/${workspaceId}/boards`,
-    () => {
-      return getOuterbaseDashboardList(workspaceId);
-    },
-    {
-      revalidateIfStale: false,
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-    }
-  );
-
-  const resources: ResourceItem[] = useMemo(() => {
-    const baseResources = (currentWorkspace?.bases ?? []).map((base) => ({
-      id: base.id,
-      type: base.sources[0]?.type ?? "database",
-      name: base.name,
-      href: `/w/${currentWorkspace?.short_name}/${base.short_name}`,
-    }));
-
-    const boardResources = (boards?.items ?? [])
-      .filter((board) => board.base_id === null)
-      .map((board) => ({
-        id: board.id,
-        type: "board",
-        name: board.name,
-        href: `/w/${currentWorkspace?.short_name}/board/${board.id}`,
-      }));
-
-    let allResources = [...baseResources, ...boardResources];
-
-    // Apply filters
-    if (filterName) {
-      allResources = allResources.filter((resource) =>
-        resource.name?.toLowerCase().includes(filterName.toLowerCase())
-      );
-    }
-
-    if (filterType === "base") {
-      allResources = allResources.filter(
-        (resource) => resource.type !== "board"
-      );
-    } else if (filterType === "board") {
-      allResources = allResources.filter(
-        (resource) => resource.type === "board"
-      );
-    }
-
-    return allResources.sort((a, b) =>
-      (a.name ?? "").localeCompare(b.name ?? "")
-    );
-  }, [currentWorkspace, boards, filterName, filterType]);
-
-  return (
-    <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
-      <NavigationBar />
-
-      <div className="container mx-auto mt-10 p-4">
-        <div className="sticky top-14 z-20 mb-12 flex gap-4 bg-neutral-50 pb-2 dark:bg-neutral-950">
-          <div className="flex-1">
-            <Input
-              preText={<MagnifyingGlass size={16} className="mr-2" />}
-              size="lg"
-              placeholder="Search resources..."
-              onValueChange={setFilterName}
-              value={filterName}
-            />
-          </div>
-
-          <MenuBar
-            size="lg"
-            items={[
-              { value: "all", content: "All" },
-              { value: "base", content: "Bases" },
-              { value: "board", content: "Boards" },
-            ]}
-            onChange={setFilterType}
-            value={filterType}
-          />
-
-          <MenuBar
-            size="lg"
-            items={[
-              { value: "all", content: <SortAscending size={16} /> },
-              { value: "recent", content: <SortDescending size={16} /> },
-              { value: "updated", content: <CalendarDots size={16} /> },
-              { value: "created", content: <Eye size={16} /> },
-              { value: "name", content: <Users size={16} /> },
-            ]}
-          />
-
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="lg" variant="primary">
-                New Resource <CaretDown />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem>New Base</DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={async () => {
-                  const createdBoard = await createBoardDialog.show({
-                    workspaceId,
-                  });
-
-                  if (createdBoard) {
-                    mutate();
-                    router.push(`/w/${workspaceId}/board/${createdBoard.id}`);
-                  }
-                }}
-              >
-                New Board
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
-          {resources.map((resource) => (
-            <ResourceCard
-              className="w-full"
-              key={resource.id}
-              color="default"
-              icon={getDatabaseIcon(resource.type)}
-              href={resource.href}
-              title={resource.name}
-              subtitle={getDatabaseFriendlyName(resource.type)}
-              visual={getDatabaseVisual(resource.type)}
-              status={resource.status}
-            >
-              {resource.type === "board" && (
-                <DropdownMenuItem
-                  onClick={() => {
-                    deleteBoardDialog
-                      .show({
-                        workspaceId,
-                        boardId: resource.id,
-                        boardName: resource.name,
-                      })
-                      .then(() => mutate());
-                  }}
-                >
-                  Remove board
-                </DropdownMenuItem>
-              )}
-              {resource.type !== "board" && (
-                <DropdownMenuItem
-                  onClick={() => {
-                    deleteBaseDialog
-                      .show({
-                        workspaceId,
-                        baseId: resource.id,
-                        baseName: resource.name,
-                      })
-                      .then(() => refreshWorkspace());
-                  }}
-                >
-                  Remove
-                </DropdownMenuItem>
-              )}
-            </ResourceCard>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 5ca07f93..6106c0fd 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -120,7 +120,7 @@ export default function WorkspaceListPage() {
     <>
       <title>{currentWorkspace?.name ?? "Untitled"}</title>
       <NavigationLayout>
-        <NavigationHeader title={currentWorkspace?.name ?? "Untitled"} />
+        <NavigationHeader />
 
         <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
           <div className="flex gap-2">

From 0c45666a5fcfebe94129a39b87ff5efe9479286e Mon Sep 17 00:00:00 2001
From: keppere <50957820+keppere@users.noreply.github.com>
Date: Tue, 18 Feb 2025 21:37:44 +0700
Subject: [PATCH 069/106] Change tokenizer (#368)

* fix: update chart data to existing chart instance

* refactor: Update @outerbase/sdk-transform to version 1.0.5 and refactor SQL tokenizer import

* fix: prevent flicking on run error query in board editor

* fix: hanle color for pie and funnel chart

* fix: handle single number component
---
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 src/components/board/board-auto-value.ts      |   2 +
 src/components/board/board-chart-editor.tsx   |   2 +-
 .../chart/echart-options-builder.ts           |  24 +-
 src/components/chart/index.tsx                |   5 +-
 src/components/gui/tabs/query-tab.tsx         |   2 +-
 src/lib/sql/tokenizer.test.ts                 | 445 ------------------
 src/lib/sql/tokenizer.ts                      | 125 -----
 9 files changed, 32 insertions(+), 583 deletions(-)
 delete mode 100644 src/lib/sql/tokenizer.test.ts
 delete mode 100644 src/lib/sql/tokenizer.ts

diff --git a/package-lock.json b/package-lock.json
index 1771dfc0..2ab360da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@mdx-js/loader": "^3.0.1",
         "@mdx-js/react": "^3.0.1",
         "@next/mdx": "^14.2.4",
-        "@outerbase/sdk-transform": "^1.0.4",
+        "@outerbase/sdk-transform": "^1.0.5",
         "@phosphor-icons/react": "^2.1.7",
         "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-avatar": "^1.0.4",
@@ -4514,9 +4514,9 @@
       "license": "MIT"
     },
     "node_modules/@outerbase/sdk-transform": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@outerbase/sdk-transform/-/sdk-transform-1.0.4.tgz",
-      "integrity": "sha512-9qHALbDPY6Hb1V+VinufxP/yvUAbbC8OiJgA0mheQAelGwgb7uUyLrJCgLCCwv+ST/abjxvQSrzPydK77ZBm2A=="
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@outerbase/sdk-transform/-/sdk-transform-1.0.5.tgz",
+      "integrity": "sha512-JOBHD8svYDxK77Myr9peSWgr4eR/+Pu3Lv8i+A4o42Wz08Vb6b/bVOkvjkOjLY4ZD6sApeIdOKXLjOM3Gr4Pfg=="
     },
     "node_modules/@phosphor-icons/react": {
       "version": "2.1.7",
diff --git a/package.json b/package.json
index 2ee885ae..0de4d469 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.4",
-    "@outerbase/sdk-transform": "^1.0.4",
+    "@outerbase/sdk-transform": "^1.0.5",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
diff --git a/src/components/board/board-auto-value.ts b/src/components/board/board-auto-value.ts
index 3b2682e0..9e90108a 100644
--- a/src/components/board/board-auto-value.ts
+++ b/src/components/board/board-auto-value.ts
@@ -26,6 +26,8 @@ export function createAutoBoardChartValue(
         const firstRecord = newResult.rows[0];
         const columnType = getColumnType(firstRecord);
 
+        // remove the previous xAxisKey and yAxisKeys
+
         // study each column value and try to guess the type
         if (columnType) {
           for (const column of columns) {
diff --git a/src/components/board/board-chart-editor.tsx b/src/components/board/board-chart-editor.tsx
index 898828e9..3c0274c5 100644
--- a/src/components/board/board-chart-editor.tsx
+++ b/src/components/board/board-chart-editor.tsx
@@ -98,7 +98,6 @@ export default function BoardChartEditor({
       const sqlWithVariables = fillVariables(sql, resolvedFilterValue, dialect);
 
       setLoading(true);
-      setErrorMessage(null);
       sourceDriver
         .query(sourceId, sqlWithVariables)
         .then((newResult) => {
@@ -109,6 +108,7 @@ export default function BoardChartEditor({
               schemas: schema,
             })
           );
+          setErrorMessage(null);
           initialChartValue(newResult, sql);
         })
         .catch((e) => {
diff --git a/src/components/chart/echart-options-builder.ts b/src/components/chart/echart-options-builder.ts
index dfe52b6a..58da4352 100644
--- a/src/components/chart/echart-options-builder.ts
+++ b/src/components/chart/echart-options-builder.ts
@@ -44,7 +44,17 @@ export default class EchartOptionsBuilder {
     this.theme = theme as "dark" | "light";
   }
 
-  private getColorRange(): string[] {
+  private getColorRange(theme?: ThemeColors, numColors?: number): string[] {
+    if (theme) {
+      const themeColor = THEMES[theme].colors?.[this.theme ?? "light"];
+      const colors = generateGradientColors(
+        themeColor[0],
+        themeColor[1],
+        numColors || 20
+      );
+      return colors;
+    }
+
     const axisKeyColors = this.getAxisKeyColors();
     const keys = this.chartValue.params.options?.yAxisKeys ?? this.columns;
     return keys.map((key) => axisKeyColors[key] as string);
@@ -340,7 +350,11 @@ export default class EchartOptionsBuilder {
             name: item[this.columns[0]] as string,
             value: item[this.columns[1]] as number,
           })),
-          color: this.getColorRange(),
+          color: this.getColorRange(
+            (this.chartValue.params.options?.theme ??
+              DEFAULT_THEME) as ThemeColors,
+            this.chartData.length
+          ),
         });
         break;
       case "pie":
@@ -364,7 +378,11 @@ export default class EchartOptionsBuilder {
             color: this.getTextColor(),
             textBorderColor: "transparent", // Remove text border
           },
-          color: this.getColorRange(),
+          color: this.getColorRange(
+            (this.chartValue.params.options?.theme ??
+              DEFAULT_THEME) as ThemeColors,
+            this.chartData.length
+          ),
           tooltip: {
             trigger: "item",
             borderColor: this.theme === "dark" ? "#FFFFFF08" : "#00000010", // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
index c79f1e41..d978ef9a 100644
--- a/src/components/chart/index.tsx
+++ b/src/components/chart/index.tsx
@@ -53,9 +53,8 @@ const TextComponent = ({ value }: OuterbaseChartProps) => {
 
 const SingleValueComponent = ({ value, data }: OuterbaseChartProps) => {
   const firstRecord = data.length > 0 ? data[0] : null;
-  let firstRecordValue = firstRecord
-    ? firstRecord[value.params.options.xAxisKey ?? ""]
-    : "";
+  const keys = Object.keys(firstRecord ?? {});
+  let firstRecordValue = firstRecord ? firstRecord[keys[0] ?? ""] : "";
   const formattedValue = value.params.options?.format;
 
   if (formattedValue === "percent") {
diff --git a/src/components/gui/tabs/query-tab.tsx b/src/components/gui/tabs/query-tab.tsx
index b7ee8df7..8faa2eed 100644
--- a/src/components/gui/tabs/query-tab.tsx
+++ b/src/components/gui/tabs/query-tab.tsx
@@ -31,9 +31,9 @@ import {
   MultipleQueryProgress,
   MultipleQueryResult,
 } from "@/lib/sql/multiple-query";
-import { tokenizeSql } from "@/lib/sql/tokenizer";
 import { sendAnalyticEvents } from "@/lib/tracking";
 import { cn } from "@/lib/utils";
+import { tokenizeSql } from "@outerbase/sdk-transform";
 import { CaretDown } from "@phosphor-icons/react";
 import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import {
diff --git a/src/lib/sql/tokenizer.test.ts b/src/lib/sql/tokenizer.test.ts
deleted file mode 100644
index 01adc37a..00000000
--- a/src/lib/sql/tokenizer.test.ts
+++ /dev/null
@@ -1,445 +0,0 @@
-import { tokenizeSql } from "./tokenizer";
-
-test("Select simple query", () => {
-  const sql = "SELECT * FROM customers";
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "*" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("Check identifers", () => {
-  const sql = `SELECT customer.name, [customer].[first name], "customer"."last name"
-  FROM customers WHERE customers.name = 'John Doe'`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customer" },
-    { type: "PUNCTUATION", value: "." },
-    { type: "IDENTIFIER", value: "name" },
-    { type: "PUNCTUATION", value: "," },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "[customer]" },
-    { type: "PUNCTUATION", value: "." },
-    { type: "IDENTIFIER", value: "[first name]" },
-    { type: "PUNCTUATION", value: "," },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: '"customer"' },
-    { type: "PUNCTUATION", value: "." },
-    { type: "IDENTIFIER", value: '"last name"' },
-    { type: "WHITESPACE", value: "\n  " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "WHERE" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "PUNCTUATION", value: "." },
-    { type: "IDENTIFIER", value: "name" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "WHITESPACE", value: " " },
-    { type: "STRING", value: "'John Doe'" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("Back tick identifier", () => {
-  const sql = "SELECT `customer`.`name` FROM `customers`";
-  const tokens = tokenizeSql(sql, "mysql");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "`customer`" },
-    { type: "PUNCTUATION", value: "." },
-    { type: "IDENTIFIER", value: "`name`" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "`customers`" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("Invalid identifier", () => {
-  const sql = `SELECT [customer].[fist
-  name] FROM "customers"`;
-  const tokens = tokenizeSql(sql, "mysql");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "[customer]" },
-    { type: "PUNCTUATION", value: "." },
-    { type: "UNKNOWN", value: "[" },
-    { type: "IDENTIFIER", value: "fist" },
-    { type: "WHITESPACE", value: "\n  " },
-    { type: "IDENTIFIER", value: "name" },
-    { type: "UNKNOWN", value: "]" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: '"customers"' },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("String literal", () => {
-  const sql = `SELECT 'Hello' AS "greeting" FROM "customers" WHERE "name" = 'John Doe'`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "STRING", value: "'Hello'" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "AS" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: '"greeting"' },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: '"customers"' },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "WHERE" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: '"name"' },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "WHITESPACE", value: " " },
-    { type: "STRING", value: "'John Doe'" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("number literal", () => {
-  const sql = `SELECT 123.45 FROM "customers" WHERE "age" = 30`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "NUMBER", value: "123.45" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: '"customers"' },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "WHERE" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: '"age"' },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "WHITESPACE", value: " " },
-    { type: "NUMBER", value: "30" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("Placeholder", () => {
-  const sql = `SELECT * FROM customers WHERE name = :name`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "*" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "WHERE" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "name" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "WHITESPACE", value: " " },
-    { type: "PLACEHOLDER", value: ":name" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("Placehoder witch have sign : in string and comment", () => {
-  const sql = `/*
-  SELECT * FROM customers WHERE name = ':name' AND "code" =:code -- only :code is a placeholder
-  */
-  SELECT * FROM customers WHERE name = ':name' AND "code" =:code -- only :code is a placeholder`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    {
-      type: "COMMENT",
-      value:
-        "/*\n" +
-        `  SELECT * FROM customers WHERE name = ':name' AND "code" =:code -- only :code is a placeholder\n` +
-        "  */",
-    },
-    { type: "WHITESPACE", value: "\n  " },
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "*" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "WHERE" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "name" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "WHITESPACE", value: " " },
-    { type: "STRING", value: "':name'" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "AND" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: '"code"' },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "PLACEHOLDER", value: ":code" },
-    { type: "WHITESPACE", value: " " },
-    { type: "COMMENT", value: "-- only :code is a placeholder" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("Mysql comment", () => {
-  const sql = `SELECT * FROM customers WHERE name = 'John Doe'
-  # this is a comment
-  -- this is also comment
-  /* this is a block comment */
-  `;
-  const tokens = tokenizeSql(sql, "mysql");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "*" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "WHERE" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "name" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "WHITESPACE", value: " " },
-    { type: "STRING", value: "'John Doe'" },
-    { type: "WHITESPACE", value: "\n  " },
-    { type: "COMMENT", value: "# this is a comment" },
-    { type: "WHITESPACE", value: "\n  " },
-    { type: "COMMENT", value: "-- this is also comment" },
-    { type: "WHITESPACE", value: "\n  " },
-    { type: "COMMENT", value: "/* this is a block comment */" },
-    { type: "WHITESPACE", value: "\n  " },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("Error on invalid # comment from non-mysql", () => {
-  const sql = `SELECT * FROM customers WHERE name = 'John Doe' # this is a comment`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "*" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "WHERE" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "name" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "WHITESPACE", value: " " },
-    { type: "STRING", value: "'John Doe'" },
-    { type: "WHITESPACE", value: " " },
-    { type: "UNKNOWN", value: "#" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "this" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "is" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "a" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "comment" },
-  ]);
-});
-
-test("Operator and punctuation", () => {
-  const sql = `SELECT * FROM customers WHERE name = 'John Doe' AND age > 30;`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "*" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "WHERE" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "name" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "WHITESPACE", value: " " },
-    { type: "STRING", value: "'John Doe'" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "AND" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "age" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: ">" },
-    { type: "WHITESPACE", value: " " },
-    { type: "NUMBER", value: "30" },
-    { type: "PUNCTUATION", value: ";" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-test("Keyword WITH and subquery", () => {
-  const sql = `WITH subquery AS (SELECT * FROM customers) SELECT * FROM subquery`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "WITH" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "subquery" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "AS" },
-    { type: "WHITESPACE", value: " " },
-    { type: "PUNCTUATION", value: "(" },
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "*" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "PUNCTUATION", value: ")" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "*" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "subquery" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("IN clause", () => {
-  const sql = `SELECT * FROM customers WHERE age IN (25, 30, 35)`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "*" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "WHERE" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "age" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "IN" },
-    { type: "WHITESPACE", value: " " },
-    { type: "PUNCTUATION", value: "(" },
-    { type: "NUMBER", value: "25" },
-    { type: "PUNCTUATION", value: "," },
-    { type: "WHITESPACE", value: " " },
-    { type: "NUMBER", value: "30" },
-    { type: "PUNCTUATION", value: "," },
-    { type: "WHITESPACE", value: " " },
-    { type: "NUMBER", value: "35" },
-    { type: "PUNCTUATION", value: ")" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("INNER JOIN", () => {
-  const sql = `SELECT customers.name, orders.id FROM customers INNER JOIN orders ON customers.id = orders.customer_id`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "PUNCTUATION", value: "." },
-    { type: "IDENTIFIER", value: "name" },
-    { type: "PUNCTUATION", value: "," },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "orders" },
-    { type: "PUNCTUATION", value: "." },
-    { type: "IDENTIFIER", value: "id" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "INNER" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "JOIN" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "orders" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "ON" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "PUNCTUATION", value: "." },
-    { type: "IDENTIFIER", value: "id" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "orders" },
-    { type: "PUNCTUATION", value: "." },
-    { type: "IDENTIFIER", value: "customer_id" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
-
-test("Accumulate unknown tokens", () => {
-  const sql = `SELECT * FROM customers WHERE name = 'John Doe' ### this # is a comment ##`;
-  const tokens = tokenizeSql(sql, "sqlite");
-  expect(tokens).toEqual([
-    { type: "IDENTIFIER", value: "SELECT" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "*" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "FROM" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "customers" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "WHERE" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "name" },
-    { type: "WHITESPACE", value: " " },
-    { type: "OPERATOR", value: "=" },
-    { type: "WHITESPACE", value: " " },
-    { type: "STRING", value: "'John Doe'" },
-    { type: "WHITESPACE", value: " " },
-    { type: "UNKNOWN", value: "###" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "this" },
-    { type: "WHITESPACE", value: " " },
-    { type: "UNKNOWN", value: "#" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "is" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "a" },
-    { type: "WHITESPACE", value: " " },
-    { type: "IDENTIFIER", value: "comment" },
-    { type: "WHITESPACE", value: " " },
-    { type: "UNKNOWN", value: "##" },
-  ]);
-  expect(tokens.map((t) => t.value).join("")).toBe(sql);
-});
diff --git a/src/lib/sql/tokenizer.ts b/src/lib/sql/tokenizer.ts
deleted file mode 100644
index 413fe05c..00000000
--- a/src/lib/sql/tokenizer.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { SupportedDialect } from "@/drivers/base-driver";
-
-export interface Token {
-  type: string;
-  value: string;
-}
-
-const tokenTypes: {
-  type: string;
-  findToken: (input: string, dialect?: SupportedDialect) => string | null;
-}[] = [
-  {
-    type: "WHITESPACE",
-    findToken: (input) => {
-      const regex = /^\s+/;
-      const match = regex.exec(input);
-      return match?.[0] ?? null;
-    },
-  },
-  {
-    type: "IDENTIFIER",
-    findToken: (input) => {
-      const regex =
-        /^(`[^(`\n)]+`|"[^("\n)]+"|\[[^(\]\n)]+\]|[a-zA-Z_][a-zA-Z0-9_]*)/;
-      const match = regex.exec(input);
-      return match?.[0] ?? null;
-    },
-  },
-  {
-    type: "STRING",
-    findToken: (input) => {
-      const regex = /^(?:'(?:[^('\n)]|'')*'|"(?:[^("\n)]|"")*")/;
-      const match = regex.exec(input);
-      return match?.[0] ?? null;
-    },
-  },
-
-  {
-    type: "NUMBER",
-    findToken: (input) => {
-      const regex = /^\d+(\.\d+)?/;
-      const match = regex.exec(input);
-      return match?.[0] ?? null;
-    },
-  },
-  {
-    type: "PLACEHOLDER",
-    findToken: (input) => {
-      const regex = /^:[a-zA-Z_][a-zA-Z0-9_]*/;
-      const match = regex.exec(input);
-      return match?.[0] ?? null;
-    },
-  },
-  {
-    type: "OUTERBASE_PLACEHOLDER",
-    findToken: (input) => {
-      const regex = /^\{\{[a-zA-Z0-9_]+\}\}/;
-      const match = regex.exec(input);
-      return match?.[0] ?? null;
-    },
-  },
-  {
-    type: "COMMENT",
-    findToken: (input, dialect) => {
-      let regex = /^(--.*|\/\*[\s\S]*?\*\/)/; // -- comment, /* comment */
-      if (dialect === "mysql") regex = /^(--.*|#.*|\/\*[\s\S]*?\*\/)/; // for mysql, # is also used for comments
-
-      const match = regex.exec(input);
-      return match?.[0] ?? null;
-    },
-  },
-  {
-    type: "OPERATOR",
-    findToken: (input) => {
-      const regex = /^(=|<>|!=|<|>|<=|>=|\+|-|\*|\/)/;
-      const match = regex.exec(input);
-      return match?.[0] ?? null;
-    },
-  },
-  {
-    type: "PUNCTUATION",
-    findToken: (input) => {
-      const regex = /^[`,;().]/;
-      const match = regex.exec(input);
-      return match?.[0] ?? null;
-    },
-  },
-];
-
-export function tokenizeSql(sql: string, dialect: SupportedDialect): Token[] {
-  try {
-    const tokens: Token[] = [];
-    let cursor = 0;
-    const length = sql.length;
-    let unknownAcc = "";
-
-    while (cursor < length) {
-      let matched = false;
-      const subStr = sql.substring(cursor);
-      for (const { type, findToken } of tokenTypes) {
-        const match = findToken(subStr, dialect);
-        if (match) {
-          if (unknownAcc !== "") {
-            tokens.push({ type: "UNKNOWN", value: unknownAcc });
-            unknownAcc = "";
-          }
-
-          tokens.push({ type, value: match });
-          cursor += match.length;
-          matched = true;
-          break;
-        }
-      }
-
-      if (!matched) {
-        unknownAcc += subStr[0];
-        cursor++;
-      }
-    }
-    if (unknownAcc !== "") tokens.push({ type: "UNKNOWN", value: unknownAcc });
-    return tokens;
-  } catch (e) {
-    return [{ type: "SQL", value: sql }];
-  }
-}

From 1be462a05295dcd46c551bd21bf1a365750d422a Mon Sep 17 00:00:00 2001
From: Sokphal Adam <31284849+sokphaladam@users.noreply.github.com>
Date: Tue, 18 Feb 2025 21:38:15 +0700
Subject: [PATCH 070/106] Fix layout board tool (#369)

* try to use outerbase board data with our board

* refactor: improve board canvas item mapping and tooltip structure

* refactor: enhance toggle item styling based on edit mode

* plug chart inside

* require workspace to load

* refactor: menu layout and create refresh board

* refactor: improve chart component imports and style definitions

* add header and loading

* refactor: update BoardTool and BoardProvider components

* refactor: improve board canvas item mapping and save edit layout

* refactor: remove console.log statement

* refactor: improve board page editor and board component

* feat: Export  interface for external use

* feat: Refactor chart management functions and integrate context for layout operations

* refactor the board storage

* feat: Add board filter input component and dialog

* postgres create table support and fixed board tool position

* disable auto increment when database is postgres

* improve create table pg

---------

Co-authored-by: Visal .In <invisal@gmail.com>
Co-authored-by: sokphaladam <sokphaladam@sokphaladams-MacBook-Air.local>
---
 .../w/[workspaceId]/board/[boardId]/page.tsx  |  2 +-
 src/components/board/board-canvas.tsx         |  2 +-
 src/components/board/board-chart.tsx          |  2 +-
 src/components/board/board-filter.tsx         |  3 --
 src/components/board/board-provider.tsx       |  3 --
 src/components/board/board-style.css          |  6 ++--
 .../board/board-tool/board-tool.tsx           | 15 ++--------
 src/components/board/index.tsx                | 29 +++++++++----------
 8 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index 607c7d9a..779ae602 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -102,7 +102,7 @@ export default function BoardPage() {
       backHref={`/w/${workspaceId}`}
     >
       <title>{data?.name ?? WEBSITE_NAME}</title>
-      <div className="relative flex flex-1 overflow-x-hidden overflow-y-auto">
+      <div className="relative overflow-x-hidden overflow-y-auto">
         {data ? (
           <BoardPageEditor initialValue={data} mutate={mutate} />
         ) : (
diff --git a/src/components/board/board-canvas.tsx b/src/components/board/board-canvas.tsx
index 5d4b6ba8..36dbb1de 100644
--- a/src/components/board/board-canvas.tsx
+++ b/src/components/board/board-canvas.tsx
@@ -205,7 +205,7 @@ export function BoardCanvas({ value, onChange }: BoardProps) {
   });
 
   return (
-    <div className="min-h-full bg-neutral-100 dark:bg-neutral-950">
+    <div className="bg-neutral-100 dark:bg-neutral-950">
       <ReactGridLayout
         cols={4}
         rowHeight={220}
diff --git a/src/components/board/board-chart.tsx b/src/components/board/board-chart.tsx
index 2406a2e4..c76b7d45 100644
--- a/src/components/board/board-chart.tsx
+++ b/src/components/board/board-chart.tsx
@@ -12,7 +12,7 @@ export default function BoardChart({ value }: { value: ChartValue }) {
   const [loading, setLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  const sql = (value?.params?.layers ?? [])[0]?.sql ?? "";
+  const sql = value ? ((value?.params?.layers ?? [])[0]?.sql ?? "") : "";
   const sourceId = value?.source_id;
 
   const finalSql = useMemo(() => {
diff --git a/src/components/board/board-filter.tsx b/src/components/board/board-filter.tsx
index 42f5fe62..4c2a3866 100644
--- a/src/components/board/board-filter.tsx
+++ b/src/components/board/board-filter.tsx
@@ -21,7 +21,6 @@ import { BoardFilterDate } from "./board-filter/board-filter-date";
 import { BoardFilterEnum } from "./board-filter/board-filter-enum";
 import { BoardFilterInput } from "./board-filter/board-filter-input";
 import { useBoardContext } from "./board-provider";
-import { BoardTool } from "./board-tool/board-tool";
 import { BoardToolbar } from "./board-tool/board-toolbar";
 
 interface Props {
@@ -171,8 +170,6 @@ export function BoardFilter(props: Props) {
 
   return (
     <>
-      <BoardTool />
-
       <div className="sticky top-0 z-50 bg-neutral-100 px-1 pt-0 pb-2 dark:bg-neutral-950">
         <BoardToolbar
           show={show}
diff --git a/src/components/board/board-provider.tsx b/src/components/board/board-provider.tsx
index 9459df9f..b5767da0 100644
--- a/src/components/board/board-provider.tsx
+++ b/src/components/board/board-provider.tsx
@@ -4,7 +4,6 @@ import { noop } from "lodash";
 import {
   createContext,
   Dispatch,
-  MutableRefObject,
   PropsWithChildren,
   SetStateAction,
   useContext,
@@ -28,7 +27,6 @@ interface BoardContextProps {
   filterValue: Record<string, string>;
   onFilterValueChange?: (value: Record<string, string>) => void;
   resolvedFilterValue: Record<string, string>;
-  refMainBoard: MutableRefObject<HTMLDivElement | null>;
 }
 
 const BoardContext = createContext<BoardContextProps>({
@@ -38,7 +36,6 @@ const BoardContext = createContext<BoardContextProps>({
   filterValue: {},
   onFilterValueChange: noop,
   resolvedFilterValue: {},
-  refMainBoard: { current: null },
 });
 
 export function useBoardContext() {
diff --git a/src/components/board/board-style.css b/src/components/board/board-style.css
index 8fa084e3..ac45af41 100644
--- a/src/components/board/board-style.css
+++ b/src/components/board/board-style.css
@@ -120,7 +120,7 @@
 
 .reveal {
   opacity: 0;
-  transform: translateY(20px);
+  transform: translateY(0);
 }
 
 .animate-revealMenu {
@@ -129,8 +129,8 @@
 
 @keyframes revealMenu {
   0% {
-    opacity: 100%;
-    transform: translateY(100px) translateX(-40%);
+    opacity: 0%;
+    transform: translateY(-100px) translateX(-40%);
   }
   100% {
     opacity: 100%;
diff --git a/src/components/board/board-tool/board-tool.tsx b/src/components/board/board-tool/board-tool.tsx
index f18c0f54..82ee9a72 100644
--- a/src/components/board/board-tool/board-tool.tsx
+++ b/src/components/board/board-tool/board-tool.tsx
@@ -1,26 +1,17 @@
+"use client";
 import { Button } from "@/components/orbit/button";
 import { ChartLine, ImageUpscale } from "lucide-react";
 import { useBoardContext } from "../board-provider";
 
 export function BoardTool() {
-  const { boardMode, setBoardMode, refMainBoard } = useBoardContext();
+  const { boardMode, setBoardMode } = useBoardContext();
 
   if (boardMode?.mode === "ADD_CHART") {
     return null;
   }
 
-  if (!refMainBoard.current) {
-    return null;
-  }
-
-  const rect = refMainBoard.current.getBoundingClientRect();
-  const centerX = rect.left + rect.width / 2;
-
   return (
-    <div
-      style={{ left: centerX }}
-      className="reveal animate-revealMenu fixed bottom-6 z-100 flex -translate-x-[50%] gap-1 rounded-xl bg-neutral-800 p-1 text-neutral-100 shadow-lg dark:bg-white dark:text-neutral-900"
-    >
+    <div className="reveal animate-revealMenu sticky bottom-6 mx-auto flex w-[75px] gap-1 rounded-xl bg-neutral-800 p-1 text-neutral-100 shadow-lg dark:bg-white dark:text-neutral-900">
       <Button
         variant="primary"
         shape="square"
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index 8682ba8a..2444a03f 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -1,12 +1,13 @@
 import { BoardSourceDriver } from "@/drivers/board-source/base-source";
 import { IBoardStorageDriver } from "@/drivers/board-storage/base";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ChartValue } from "../chart/chart-type";
 import { BoardCanvas } from "./board-canvas";
 import BoardChartEditor from "./board-chart-editor";
 import { BoardFilter } from "./board-filter";
 import { BoardFilterProps } from "./board-filter-dialog";
 import { BoardProvider } from "./board-provider";
+import { BoardTool } from "./board-tool/board-tool";
 
 export interface DashboardProps {
   charts: ChartValue[];
@@ -43,7 +44,6 @@ export default function Board({
   filterValue,
   onFilterValueChange,
 }: Props) {
-  const refMainBoard = useRef<HTMLDivElement | null>(null);
   const [editMode, setEditMode] = useState<BoardEditorMode>(null);
 
   const autoRefresh = [
@@ -100,9 +100,8 @@ export default function Board({
       value={value}
       resolvedFilterValue={resolvedFilterValue}
       onFilterValueChange={onFilterValueChange}
-      refMainBoard={refMainBoard}
     >
-      <div className="relative flex flex-1 flex-col" ref={refMainBoard}>
+      <div className="relative h-auto w-full">
         <BoardFilter
           value={value}
           onChange={onChange}
@@ -115,18 +114,15 @@ export default function Board({
             setEditMode(null);
           }}
         />
-        <div className="relative flex-1">
-          <BoardCanvas
-            value={value}
-            onChange={(v) => {
-              onChange({
-                ...value,
-                layout: v,
-              });
-            }}
-          />
-        </div>
-
+        <BoardCanvas
+          value={value}
+          onChange={(v) => {
+            onChange({
+              ...value,
+              layout: v,
+            });
+          }}
+        />
         {editMode?.mode === "ADD_CHART" && (
           <>
             <div className="fixed top-0 left-0 z-50 h-full w-full backdrop-blur-sm"></div>
@@ -148,6 +144,7 @@ export default function Board({
           </div>
         )}
       </div>
+      <BoardTool />
     </BoardProvider>
   );
 }

From b60250a71c2dbfb5c80e098b47b232c78ba49bc9 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 19 Feb 2025 10:04:12 +0700
Subject: [PATCH 071/106] Unify connection editor (#370)

Add the unify connection editor component.
---
 src/app/(outerbase)/base-template.tsx         | 104 +++++++++++++
 .../(outerbase)/local/dialog-base-delete.tsx  |  73 +++++++++
 .../local/edit-base/[baseId]/page.tsx         | 101 +++++++++++++
 .../local/new-base/[driver]/page.tsx          | 106 +++++++++++++
 src/app/(outerbase)/local/page.tsx            |  63 +++++---
 src/app/(outerbase)/nav-header.tsx            |   8 +-
 src/app/(outerbase)/nav-layout.tsx            |   7 +-
 src/app/(outerbase)/new-resource-button.tsx   | 118 ++++++++-------
 src/app/(outerbase)/resource-item-helper.tsx  |  87 ++++++-----
 src/app/(outerbase)/w/[workspaceId]/page.tsx  |   5 +-
 .../w/[workspaceId]/settings/page.tsx         |   6 +-
 .../client/[[...driver]]/page-client.tsx      |  10 +-
 .../client/s/[[...driver]]/page-client.tsx    |  14 +-
 .../connect/saved-connection-storage.ts       |   4 +-
 src/app/storybook/connection-editor/page.tsx  |  86 +++++++++++
 .../connection-config-editor/index.tsx        | 141 ++++++++++++++++++
 .../template/cloudflare.ts                    |  37 +++++
 .../template/generic.ts                       |  59 ++++++++
 .../template/rqlite.ts                        |  32 ++++
 .../template/turso.ts                         |  26 ++++
 src/components/ui/textarea.tsx                |   2 +-
 src/drivers/helpers.ts                        |   6 +-
 22 files changed, 955 insertions(+), 140 deletions(-)
 create mode 100644 src/app/(outerbase)/base-template.tsx
 create mode 100644 src/app/(outerbase)/local/dialog-base-delete.tsx
 create mode 100644 src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
 create mode 100644 src/app/(outerbase)/local/new-base/[driver]/page.tsx
 create mode 100644 src/app/storybook/connection-editor/page.tsx
 create mode 100644 src/components/connection-config-editor/index.tsx
 create mode 100644 src/components/connection-config-editor/template/cloudflare.ts
 create mode 100644 src/components/connection-config-editor/template/generic.ts
 create mode 100644 src/components/connection-config-editor/template/rqlite.ts
 create mode 100644 src/components/connection-config-editor/template/turso.ts

diff --git a/src/app/(outerbase)/base-template.tsx b/src/app/(outerbase)/base-template.tsx
new file mode 100644
index 00000000..68a571be
--- /dev/null
+++ b/src/app/(outerbase)/base-template.tsx
@@ -0,0 +1,104 @@
+import {
+  CommonConnectionConfig,
+  CommonConnectionConfigTemplate,
+} from "@/components/connection-config-editor";
+import { CLOUDFLARE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/cloudflare";
+import { RQLITE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/rqlite";
+import { TURSO_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/turso";
+import { SavedConnectionItemConfig } from "../(theme)/connect/saved-connection-storage";
+
+export interface ConnectionTemplateList<T = any> {
+  template: CommonConnectionConfigTemplate;
+  from: (value: T) => CommonConnectionConfig;
+  to: (value: CommonConnectionConfig) => T;
+}
+
+export const LOCAL_CONNECTION_TEMPLATES: Record<
+  string,
+  ConnectionTemplateList<SavedConnectionItemConfig>
+> = {
+  "cloudflare-d1": {
+    template: CLOUDFLARE_CONNECTION_TEMPLATE,
+    from: (value: SavedConnectionItemConfig): CommonConnectionConfig => {
+      return {
+        name: value.name,
+        database: value.config.database,
+        token: value.config.token,
+        username: value.config.username,
+      };
+    },
+    to: (value: CommonConnectionConfig): SavedConnectionItemConfig => {
+      return {
+        name: value.name,
+        driver: "cloudflare-d1",
+        config: {
+          database: value.database,
+          token: value.token,
+          username: value.username,
+        },
+      };
+    },
+  },
+  turso: {
+    template: TURSO_CONNECTION_TEMPLATE,
+    from: (value: SavedConnectionItemConfig): CommonConnectionConfig => {
+      return {
+        name: value.name,
+        host: value.config.url,
+        token: value.config.token,
+      };
+    },
+    to: (value: CommonConnectionConfig): SavedConnectionItemConfig => {
+      return {
+        name: value.name,
+        driver: "turso",
+        config: {
+          url: value.host,
+          token: value.token,
+        },
+      };
+    },
+  },
+  starbase: {
+    template: TURSO_CONNECTION_TEMPLATE,
+    from: (value: SavedConnectionItemConfig): CommonConnectionConfig => {
+      return {
+        name: value.name,
+        host: value.config.url,
+        token: value.config.token,
+      };
+    },
+    to: (value: CommonConnectionConfig): SavedConnectionItemConfig => {
+      return {
+        driver: "starbase",
+        name: value.name,
+        config: {
+          url: value.host,
+          token: value.token,
+        },
+      };
+    },
+  },
+  rqlite: {
+    template: RQLITE_CONNECTION_TEMPLATE,
+    from: (value: SavedConnectionItemConfig): CommonConnectionConfig => {
+      return {
+        name: value.name,
+        host: value.config.url,
+        username: value.config.username,
+        password: value.config.password,
+      };
+    },
+    to: (value: CommonConnectionConfig): SavedConnectionItemConfig => {
+      return {
+        name: value.name,
+        driver: "rqlite",
+        config: {
+          url: value.host,
+          username: value.username,
+          password: value.password,
+        },
+      };
+    },
+  },
+};
diff --git a/src/app/(outerbase)/local/dialog-base-delete.tsx b/src/app/(outerbase)/local/dialog-base-delete.tsx
new file mode 100644
index 00000000..35594fca
--- /dev/null
+++ b/src/app/(outerbase)/local/dialog-base-delete.tsx
@@ -0,0 +1,73 @@
+import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
+import CopyableText from "@/components/copyable-text";
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+
+export const deleteLocalBaseDialog = createDialog<{
+  baseId: string;
+  baseName: string;
+}>(({ close, baseName, baseId }) => {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState("");
+
+  const deleteClicked = useCallback(() => {
+    if (name !== baseName) return;
+
+    setLoading(true);
+
+    SavedConnectionLocalStorage.remove(baseId);
+    setLoading(false);
+    close(undefined);
+  }, [name, baseId, close, baseName]);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Confirm deletion of {baseName}</DialogTitle>
+        <DialogDescription>
+          All saved queries, dashboards, definitions and any other contributions
+          made to your Base will be deleted. This action is permanent and{" "}
+          <strong>cannot</strong>
+          be undone.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-4">
+        <div>
+          <CopyableText text={baseName} />
+        </div>
+
+        <LabelInput
+          label="Enter the name of this Base to confirm:"
+          placeholder="Board name"
+          value={name}
+          required
+          onChange={(e) => setName(e.currentTarget.value)}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button
+          disabled={loading || baseName !== name}
+          onClick={deleteClicked}
+          variant={"destructive"}
+        >
+          {loading && <LucideLoader className="mr-2 h-4 w-4 animate-spin" />}I
+          understand, delete this base
+        </Button>
+        <Button variant={"secondary"} onClick={() => close(undefined)}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </>
+  );
+});
diff --git a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
new file mode 100644
index 00000000..2decd364
--- /dev/null
+++ b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
@@ -0,0 +1,101 @@
+"use client";
+import {
+  ConnectionTemplateList,
+  LOCAL_CONNECTION_TEMPLATES,
+} from "@/app/(outerbase)/base-template";
+import {
+  SavedConnectionItemConfig,
+  SavedConnectionLocalStorage,
+} from "@/app/(theme)/connect/saved-connection-storage";
+import {
+  CommonConnectionConfig,
+  ConnectionConfigEditor,
+} from "@/components/connection-config-editor";
+import { Button } from "@/components/orbit/button";
+import { ArrowLeft, ArrowRight, FloppyDisk } from "@phosphor-icons/react";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { mutate } from "swr";
+
+export default function LocalEditBasePage() {
+  const router = useRouter();
+  const { baseId } = useParams<{ baseId: string }>();
+  const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
+  const [loading, setLoading] = useState(true);
+  const [databaseName, setDatabaseName] = useState("");
+  const [template, setTemplate] =
+    useState<ConnectionTemplateList<SavedConnectionItemConfig>>();
+
+  const onSave = useCallback(() => {
+    if (!template) return;
+
+    SavedConnectionLocalStorage.update(baseId, template.to(value));
+
+    // Redirect to the connection page
+    mutate("/local/bases");
+    router.push("/local");
+  }, [template, value, router, baseId]);
+
+  // Loading the base
+  useEffect(() => {
+    const config = SavedConnectionLocalStorage.get(baseId);
+
+    if (!config) return;
+
+    // Check for the template
+    const template = LOCAL_CONNECTION_TEMPLATES[config.driver ?? ""];
+    if (!template) return;
+
+    setDatabaseName(config.name ?? "");
+    setTemplate(template);
+    setValue(template.from(config));
+    setLoading(false);
+  }, [baseId]);
+
+  if (loading || !template) return <div>Loading....</div>;
+
+  return (
+    <>
+      <div className="container">
+        <div className="my-8 flex">
+          <Button variant="secondary" size="lg" href="/local" as="link">
+            <ArrowLeft />
+            Back
+          </Button>
+
+          <div className="flex-1"></div>
+        </div>
+
+        <div className="mb-8 text-2xl">
+          <div>
+            Edit <strong>{databaseName}</strong>
+          </div>
+        </div>
+
+        <div>
+          <div className="w-1/2">
+            <ConnectionConfigEditor
+              template={template.template}
+              value={value}
+              onChange={setValue}
+            />
+          </div>
+          <div></div>
+        </div>
+      </div>
+
+      <div className="bg-background sticky bottom-0 mt-12 border-t px-2 py-6">
+        <div className="container flex gap-3">
+          <Button variant="primary" size="lg">
+            <ArrowRight />
+            Connect
+          </Button>
+          <Button variant="secondary" size="lg" onClick={onSave}>
+            <FloppyDisk />
+            Save
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(outerbase)/local/new-base/[driver]/page.tsx b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
new file mode 100644
index 00000000..250d7ad0
--- /dev/null
+++ b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { LOCAL_CONNECTION_TEMPLATES } from "@/app/(outerbase)/base-template";
+import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
+import {
+  CommonConnectionConfig,
+  ConnectionConfigEditor,
+} from "@/components/connection-config-editor";
+import { Button } from "@/components/orbit/button";
+import { getDatabaseFriendlyName } from "@/components/resource-card/utils";
+import { ArrowLeft, ArrowRight, FloppyDisk } from "@phosphor-icons/react";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+import { mutate } from "swr";
+
+export default function LocalNewBasePage() {
+  const { driver } = useParams<{ driver: string }>();
+  const router = useRouter();
+  const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
+  const [loading, setLoading] = useState(false);
+
+  const template = useMemo(() => {
+    return LOCAL_CONNECTION_TEMPLATES[driver];
+  }, [driver]);
+
+  const onSave = useCallback(() => {
+    setLoading(true);
+    SavedConnectionLocalStorage.save({
+      storage: "local",
+      ...template.to(value),
+    });
+
+    // Redirect to the connection page
+    mutate("/local/bases");
+    router.push("/local");
+  }, [template, value, router]);
+
+  const onConnect = useCallback(() => {
+    setLoading(true);
+    const tmp = SavedConnectionLocalStorage.save({
+      storage: "local",
+      ...template.to(value),
+    });
+
+    // Redirect to the connection page
+    mutate("/local/bases");
+    router.push(`/client/s/${driver}?p=${tmp.id}`);
+  }, [template, value, router, driver]);
+
+  if (!template) {
+    return <div>Invalid driver</div>;
+  }
+
+  return (
+    <>
+      <div className="container">
+        <div className="my-8 flex">
+          <Button variant="secondary" size="lg" href="/local" as="link">
+            <ArrowLeft />
+            Back
+          </Button>
+
+          <div className="flex-1"></div>
+        </div>
+
+        <div className="mb-8 text-2xl font-bold">
+          <div>Connect to {getDatabaseFriendlyName(driver)} database</div>
+        </div>
+
+        <div>
+          <div className="w-1/2">
+            <ConnectionConfigEditor
+              template={template.template}
+              value={value}
+              onChange={setValue}
+            />
+          </div>
+          <div></div>
+        </div>
+      </div>
+
+      <div className="bg-background sticky bottom-0 mt-12 border-t px-2 py-6">
+        <div className="container flex gap-3">
+          <Button
+            variant="primary"
+            size="lg"
+            onClick={onConnect}
+            disabled={loading}
+          >
+            <ArrowRight />
+            Connect
+          </Button>
+          <Button
+            variant="secondary"
+            size="lg"
+            onClick={onSave}
+            disabled={loading}
+          >
+            <FloppyDisk />
+            Save
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
index 95b6b439..09d3a19e 100644
--- a/src/app/(outerbase)/local/page.tsx
+++ b/src/app/(outerbase)/local/page.tsx
@@ -6,32 +6,38 @@ import {
 } from "@/app/(theme)/connect/saved-connection-storage";
 import { MySQLIcon, SQLiteIcon } from "@/components/icons/outerbase-icon";
 import { CaretDown } from "@phosphor-icons/react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import NavigationHeader from "../nav-header";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo } from "react";
+import useSWR from "swr";
+import { LOCAL_CONNECTION_TEMPLATES } from "../base-template";
 import NavigationLayout from "../nav-layout";
 import NewResourceButton from "../new-resource-button";
 import { ResourceItemList, ResourceItemProps } from "../resource-item-helper";
+import { deleteLocalBaseDialog } from "./dialog-base-delete";
 import { createLocalBoardDialog } from "./dialog-board-create";
 import { deleteLocalBoardDialog } from "./dialog-board-delete";
 import { useLocalDashboardList } from "./hooks";
 
 export default function LocalConnectionPage() {
-  const [baseResources, setBaseResources] = useState<ResourceItemProps[]>([]);
+  const router = useRouter();
+  const {
+    isLoading,
+    data: baseResources,
+    mutate: refreshBase,
+  } = useSWR("/local/bases", async () => {
+    const tmp = SavedConnectionLocalStorage.getList();
 
-  useEffect(() => {
-    setBaseResources(
-      SavedConnectionLocalStorage.getList().map((conn: SavedConnectionItem) => {
-        return {
-          href: `/client/s/${conn.driver}?p=${conn.id}`,
-          name: conn.name,
-          lastUsed: 0,
-          id: conn.id,
-          type: conn.driver,
-          status: "",
-        } as ResourceItemProps;
-      })
-    );
-  }, []);
+    return tmp.map((conn: SavedConnectionItem) => {
+      return {
+        href: `/client/s/${conn.driver}?p=${conn.id}`,
+        name: conn.name,
+        lastUsed: 0,
+        id: conn.id,
+        type: conn.driver,
+        status: "",
+      } as ResourceItemProps;
+    });
+  });
 
   // Getting the board from indexdb
   const { data: dashboardList, mutate: refreshDashboard } =
@@ -56,6 +62,16 @@ export default function LocalConnectionPage() {
     });
   }, [refreshDashboard]);
 
+  const onBaseRemove = useCallback(
+    (deletedResource: ResourceItemProps) => {
+      deleteLocalBaseDialog
+        .show({ baseId: deletedResource.id, baseName: deletedResource.name })
+        .then(refreshBase)
+        .catch();
+    },
+    [refreshBase]
+  );
+
   const onBoardRemove = useCallback((deletedResource: ResourceItemProps) => {
     deleteLocalBoardDialog
       .show({ boardId: deletedResource.id, boardName: deletedResource.name })
@@ -65,10 +81,12 @@ export default function LocalConnectionPage() {
 
   return (
     <NavigationLayout>
-      <NavigationHeader />
       <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
         <div className="flex gap-2">
-          <NewResourceButton onCreateBoard={onBoardCreate} />
+          <NewResourceButton
+            onCreateBoard={onBoardCreate}
+            templates={LOCAL_CONNECTION_TEMPLATES}
+          />
         </div>
 
         <div className="my-4 flex gap-4">
@@ -96,8 +114,13 @@ export default function LocalConnectionPage() {
 
         <ResourceItemList
           boards={dashboardResources}
-          bases={baseResources}
+          bases={baseResources ?? []}
+          loading={isLoading}
           onBoardRemove={onBoardRemove}
+          onBaseRemove={onBaseRemove}
+          onBaseEdit={(resource) => {
+            router.push(`/local/edit-base/${resource.id}`);
+          }}
         />
       </div>
     </NavigationLayout>
diff --git a/src/app/(outerbase)/nav-header.tsx b/src/app/(outerbase)/nav-header.tsx
index d61f4865..b7538a66 100644
--- a/src/app/(outerbase)/nav-header.tsx
+++ b/src/app/(outerbase)/nav-header.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import { Cardholder, Database, Gear } from "@phosphor-icons/react";
+import { Database, Gear } from "@phosphor-icons/react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 import { useWorkspaces } from "./workspace-provider";
@@ -15,7 +15,7 @@ export default function NavigationHeader() {
 
   return (
     <div className="bg-background flex h-12 flex-col gap-1 border-b px-6">
-      <nav className="flex h-full gap-2 text-base">
+      <nav className="flex h-full gap-2 text-sm">
         <Link
           className={
             pathname.endsWith(workspaceId) ? selectedTabClassName : tabClassName
@@ -36,7 +36,7 @@ export default function NavigationHeader() {
           <Gear />
           Settings
         </Link>
-        <Link
+        {/* <Link
           className={
             pathname.endsWith(`/${workspaceId}/billing`)
               ? selectedTabClassName
@@ -46,7 +46,7 @@ export default function NavigationHeader() {
         >
           <Cardholder />
           Billing
-        </Link>
+        </Link> */}
 
         <div className="flex flex-1 items-center justify-end font-bold">
           {currentWorkspace?.name ?? ""}
diff --git a/src/app/(outerbase)/nav-layout.tsx b/src/app/(outerbase)/nav-layout.tsx
index ccf82bcd..77caab7c 100644
--- a/src/app/(outerbase)/nav-layout.tsx
+++ b/src/app/(outerbase)/nav-layout.tsx
@@ -1,11 +1,10 @@
 "use client";
-import { Input } from "@/components/orbit/input";
 import {
   SidebarMenuHeader,
   SidebarMenuItem,
   SidebarMenuLoadingItem,
 } from "@/components/sidebar-menu";
-import { Database, MagnifyingGlass, Plus } from "@phosphor-icons/react";
+import { Database, Plus } from "@phosphor-icons/react";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { PropsWithChildren } from "react";
 import NavigationSigninBanner from "./nav-signin-banner";
@@ -25,14 +24,14 @@ export default function NavigationLayout({ children }: PropsWithChildren) {
           <SidebarProfile />
         </div>
 
-        <div className="px-2">
+        {/* <div className="px-2">
           <Input
             size="base"
             className="bg-secondary"
             placeholder="Search for anything"
             preText={<MagnifyingGlass className="mr-2" />}
           />
-        </div>
+        </div> */}
 
         <div className="flex flex-col border-b pb-2">
           <SidebarMenuHeader text="Workspace" />
diff --git a/src/app/(outerbase)/new-resource-button.tsx b/src/app/(outerbase)/new-resource-button.tsx
index e86ed2c7..d387e2f4 100644
--- a/src/app/(outerbase)/new-resource-button.tsx
+++ b/src/app/(outerbase)/new-resource-button.tsx
@@ -1,85 +1,92 @@
-import { MySQLIcon, PostgreIcon } from "@/components/icons/outerbase-icon";
 import { Button } from "@/components/orbit/button";
 import { Input } from "@/components/orbit/input";
 import {
-  CloudflareIcon,
-  DigitalOceanIcon,
-  NeonIcon,
-  StarbaseIcon,
-  SupabaseIcon,
-} from "@/components/resource-card/icon";
+  getDatabaseFriendlyName,
+  getDatabaseIcon,
+} from "@/components/resource-card/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
-import {
-  ArrowLeft,
-  CaretDown,
-  ChartBar,
-  Database,
-  MagnifyingGlass,
-} from "@phosphor-icons/react";
+import { CaretDown, ChartBar, MagnifyingGlass } from "@phosphor-icons/react";
+import Link from "next/link";
 import { PropsWithChildren, useMemo, useState } from "react";
+import { ConnectionTemplateList } from "./base-template";
 
-function CreateResourceItem({ children }: PropsWithChildren) {
+function CreateResourceItem({
+  children,
+  href,
+}: PropsWithChildren<{ href: string }>) {
   return (
-    <button
+    <Link
+      prefetch={false}
+      href={href}
       className={
-        "bg-secondary flex w-full items-center justify-start rounded p-2 text-base"
+        "bg-secondary flex w-full cursor-pointer items-center justify-start rounded p-2 text-base"
       }
     >
       {children}
-    </button>
+    </Link>
   );
 }
 
 function CreateResourceItemSearch({
   children,
   selected,
-}: PropsWithChildren<{ selected?: boolean }>) {
+  href,
+}: PropsWithChildren<{ selected?: boolean; href: string }>) {
   return (
-    <button
+    <Link
+      prefetch={false}
+      href={href}
       className={cn(
-        "hover:bg-secondary flex w-full items-center justify-start rounded p-2 text-base",
+        "hover:bg-secondary flex w-full cursor-pointer items-center justify-start rounded p-2 text-base",
         { "bg-secondary": selected }
       )}
     >
       {children}
-    </button>
+    </Link>
   );
 }
 
 interface ResourceType {
   name: string;
   icon: React.FC<React.SVGProps<SVGSVGElement>>;
+  href: string;
   enterprise?: boolean;
 }
-
-const RESOURCE_TYPE_LIST: ResourceType[] = [
-  { name: "Supabase", icon: SupabaseIcon },
-  { name: "Cloudflare", icon: CloudflareIcon },
-  { name: "Neon", icon: NeonIcon },
-  { name: "StarbaseDB", icon: StarbaseIcon },
-  { name: "DigitalOcean", icon: DigitalOceanIcon },
-  { name: "Postgres", icon: PostgreIcon },
-  { name: "Motherduck", icon: Database },
-  { name: "SQL Server", icon: Database },
-  { name: "MySQL", icon: MySQLIcon },
-  { name: "Clickhouse", icon: Database, enterprise: true },
-  { name: "Snowflake", icon: Database, enterprise: true },
-  { name: "BigQuery", icon: Database, enterprise: true },
-  { name: "Redshift", icon: Database, enterprise: true },
-];
-
 interface NewResourceProps {
   onCreateBoard?: () => void;
+  templates: Record<string, ConnectionTemplateList>;
 }
 
-export default function NewResourceButton({ onCreateBoard }: NewResourceProps) {
-  const leftSideResourceType = RESOURCE_TYPE_LIST.slice(0, 7);
-  const rightSideResourceType = RESOURCE_TYPE_LIST.slice(7);
+export default function NewResourceButton({
+  onCreateBoard,
+  templates,
+}: NewResourceProps) {
+  const resourceTypeList = useMemo(() => {
+    const tmp = Object.entries(templates).map(([key]) => {
+      return {
+        name: getDatabaseFriendlyName(key),
+        icon: getDatabaseIcon(key),
+        enterprise: false,
+        href: `/local/new-base/${key}`,
+      } as ResourceType;
+    });
+
+    tmp.sort((a, b) => {
+      return a.name.localeCompare(b.name);
+    });
+
+    return tmp;
+  }, [templates]);
+
+  const [leftSideResourceType, rightSideResourceType] = useMemo(() => {
+    const split = Math.floor(resourceTypeList.length / 2);
+    return [resourceTypeList.slice(0, split), resourceTypeList.slice(split)];
+  }, [resourceTypeList]);
 
   const [search, setSearch] = useState("");
   const [open, setOpen] = useState(false);
@@ -98,13 +105,13 @@ export default function NewResourceButton({ onCreateBoard }: NewResourceProps) {
           </div>
         </button>
 
-        <button className="flex w-[200px] items-center gap-4 rounded bg-gradient-to-r from-blue-800 to-indigo-900 p-2 px-4 text-left text-base text-white">
+        {/* <button className="flex w-[200px] items-center gap-4 rounded bg-gradient-to-r from-blue-800 to-indigo-900 p-2 px-4 text-left text-base text-white">
           <StarbaseIcon className="h-8 w-8" />
           <div>
             <div className="font-semibold">StarbaseDB</div>
             <div className="text-sm">Free 10GB SQLite</div>
           </div>
-        </button>
+        </button> */}
       </div>
 
       <h2 className="px-3 py-2 text-base font-semibold">
@@ -114,7 +121,7 @@ export default function NewResourceButton({ onCreateBoard }: NewResourceProps) {
       <div className="my-2 flex">
         <div className="flex w-1/2 flex-col gap-2 px-2">
           {leftSideResourceType.map((resource) => (
-            <CreateResourceItem key={resource.name}>
+            <CreateResourceItem key={resource.name} href={resource.href}>
               <resource.icon className="mr-2 h-6 w-6" />
               <span>{resource.name}</span>
             </CreateResourceItem>
@@ -123,7 +130,7 @@ export default function NewResourceButton({ onCreateBoard }: NewResourceProps) {
 
         <div className="flex w-1/2 flex-col gap-2 px-2">
           {rightSideResourceType.map((resource) => (
-            <CreateResourceItem key={resource.name}>
+            <CreateResourceItem key={resource.name} href={resource.href}>
               <resource.icon className="mr-2 h-6 w-6" />
               <span className="flex-1 text-left">{resource.name}</span>
               {resource.enterprise && (
@@ -136,23 +143,25 @@ export default function NewResourceButton({ onCreateBoard }: NewResourceProps) {
         </div>
       </div>
 
-      <h2 className="mt-4 px-3 py-1 text-base">Or use connection string</h2>
+      {/* <h2 className="mt-4 px-3 py-1 text-base">Or use connection string</h2>
       <div className="mx-2 my-2 flex">
         <Input
           className="bg-secondary w-full"
           postText={<ArrowLeft className="mr-2" />}
           placeholder="postgres://testing"
         />
-      </div>
+      </div> */}
     </>
   );
 
   const resourceSearch = useMemo(() => {
-    const filteredResource = RESOURCE_TYPE_LIST.filter((resource) =>
-      resource.name.toLowerCase().includes(search.toLowerCase())
-    ).sort((a, b) => {
-      return a.name.localeCompare(b.name);
-    });
+    const filteredResource = resourceTypeList
+      .filter((resource) =>
+        resource.name.toLowerCase().includes(search.toLowerCase())
+      )
+      .sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      });
 
     if (filteredResource.length === 0) {
       return (
@@ -172,6 +181,7 @@ export default function NewResourceButton({ onCreateBoard }: NewResourceProps) {
           })
           .map((resource, resourceIdx) => (
             <CreateResourceItemSearch
+              href={resource.href}
               key={resource.name}
               selected={resourceIdx === 0}
             >
@@ -186,7 +196,7 @@ export default function NewResourceButton({ onCreateBoard }: NewResourceProps) {
           ))}
       </div>
     );
-  }, [search]);
+  }, [search, resourceTypeList]);
 
   return (
     <>
diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
index ad4baa15..5302fde4 100644
--- a/src/app/(outerbase)/resource-item-helper.tsx
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -4,14 +4,17 @@ import {
   getDatabaseIcon,
   getDatabaseVisual,
 } from "@/components/resource-card/utils";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
 import { timeSince } from "@/lib/utils-datetime";
 import {
   OuterbaseAPIBase,
   OuterbaseAPIDashboard,
   OuterbaseAPIWorkspace,
 } from "@/outerbase-cloud/api-type";
-import { Trash } from "@phosphor-icons/react";
+import { Pencil, Trash } from "@phosphor-icons/react";
 import { AnimatePresence, motion } from "framer-motion";
 import ResourceCardLoading from "./resource-card-loading";
 
@@ -58,12 +61,14 @@ export function ResourceItemList({
   loading,
   onBoardRemove,
   onBaseRemove,
+  onBaseEdit,
 }: {
   bases: ResourceItemProps[];
   boards: ResourceItemProps[];
   loading?: boolean;
   onBoardRemove?: (item: ResourceItemProps) => void;
   onBaseRemove?: (item: ResourceItemProps) => void;
+  onBaseEdit?: (item: ResourceItemProps) => void;
 }) {
   return (
     <>
@@ -124,42 +129,54 @@ export function ResourceItemList({
           </>
         )}
 
-        <AnimatePresence initial={false}>
-          {bases.map((resource: ResourceItemProps) => {
-            const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
+        {bases.length > 0 && (
+          <AnimatePresence initial={false}>
+            {bases.map((resource: ResourceItemProps) => {
+              const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
 
-            return (
-              <motion.div
-                key={resource.id}
-                initial={{ opacity: 0, scale: 0.8 }}
-                animate={{ opacity: 1, scale: 1 }}
-                exit={{ opacity: 0, scale: 0.5 }}
-                transition={{ duration: 0.3 }}
-              >
-                <ResourceCard
-                  className="w-full"
-                  color="default"
-                  icon={getDatabaseIcon(resource.type)}
-                  href={resource.href}
-                  title={resource.name}
-                  subtitle={getDatabaseFriendlyName(resource.type)}
-                  visual={getDatabaseVisual(resource.type)}
-                  status={status}
+              return (
+                <motion.div
+                  key={resource.id}
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.5 }}
+                  transition={{ duration: 0.3 }}
                 >
-                  <DropdownMenuItem
-                    className="text-red-500 focus:text-red-500"
-                    onClick={() => {
-                      if (onBaseRemove) onBaseRemove(resource);
-                    }}
+                  <ResourceCard
+                    key={resource.id}
+                    className="w-full"
+                    color="default"
+                    icon={getDatabaseIcon(resource.type)}
+                    href={resource.href}
+                    title={resource.name}
+                    subtitle={getDatabaseFriendlyName(resource.type)}
+                    visual={getDatabaseVisual(resource.type)}
+                    status={status}
                   >
-                    <Trash size={16} className="mr-2" />
-                    Remove base
-                  </DropdownMenuItem>
-                </ResourceCard>
-              </motion.div>
-            );
-          })}
-        </AnimatePresence>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        if (onBaseEdit) onBaseEdit(resource);
+                      }}
+                    >
+                      <Pencil size={16} className="mr-2" />
+                      Edit base
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      className="text-red-500 focus:text-red-500"
+                      onClick={() => {
+                        if (onBaseRemove) onBaseRemove(resource);
+                      }}
+                    >
+                      <Trash size={16} className="mr-2" />
+                      Remove base
+                    </DropdownMenuItem>
+                  </ResourceCard>
+                </motion.div>
+              );
+            })}
+          </AnimatePresence>
+        )}
       </div>
     </>
   );
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 6106c0fd..d1ce6d24 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -124,7 +124,10 @@ export default function WorkspaceListPage() {
 
         <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
           <div className="flex gap-2">
-            <NewResourceButton onCreateBoard={onCreateBoardClicked} />
+            <NewResourceButton
+              onCreateBoard={onCreateBoardClicked}
+              templates={{}}
+            />
 
             <Input
               preText={<MagnifyingGlass className="mr-2" />}
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
index ebfda8e0..d03497ef 100644
--- a/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/page.tsx
@@ -5,8 +5,6 @@ import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import { Loader } from "@/components/orbit/loader";
 import WorkspaceDeleteSection from "./delete";
 import WorkspaceDetailSection from "./detail";
-import WorkspaceGatewaySection from "./gateway";
-import WorkspaceMemberSection from "./members";
 
 export default function WorkspaceBillingPage() {
   const { currentWorkspace } = useWorkspaces();
@@ -21,8 +19,8 @@ export default function WorkspaceBillingPage() {
         {currentWorkspace ? (
           <>
             <WorkspaceDetailSection workspace={currentWorkspace} />
-            <WorkspaceMemberSection />
-            <WorkspaceGatewaySection />
+            {/* <WorkspaceMemberSection />
+            <WorkspaceGatewaySection /> */}
             <WorkspaceDeleteSection workspace={currentWorkspace} />
           </>
         ) : (
diff --git a/src/app/(theme)/client/[[...driver]]/page-client.tsx b/src/app/(theme)/client/[[...driver]]/page-client.tsx
index cafaf051..5b8d4d47 100644
--- a/src/app/(theme)/client/[[...driver]]/page-client.tsx
+++ b/src/app/(theme)/client/[[...driver]]/page-client.tsx
@@ -1,12 +1,12 @@
 "use client";
+import RqliteDriver from "@/drivers/rqlite-driver";
 import TursoDriver from "@/drivers/turso-driver";
+import ValtownDriver from "@/drivers/valtown-driver";
 import { useMemo } from "react";
 import {
   SavedConnectionItemConfigConfig,
   SupportedDriver,
 } from "../../connect/saved-connection-storage";
-import RqliteDriver from "@/drivers/rqlite-driver";
-import ValtownDriver from "@/drivers/valtown-driver";
 
 import MyStudio from "@/components/my-studio";
 import CloudflareD1Driver from "@/drivers/cloudflare-d1-driver";
@@ -19,9 +19,9 @@ export default function ClientPageBody() {
     } = JSON.parse(sessionStorage.getItem("connection") ?? "{}");
 
     if (config.driver === "rqlite") {
-      return new RqliteDriver(config.url, config.username, config.password);
+      return new RqliteDriver(config.url!, config.username, config.password);
     } else if (config.driver === "valtown") {
-      return new ValtownDriver(config.token);
+      return new ValtownDriver(config.token!);
     } else if (config.driver === "cloudflare-d1") {
       return new CloudflareD1Driver("/proxy/d1", {
         Authorization: "Bearer " + (config.token ?? ""),
@@ -35,7 +35,7 @@ export default function ClientPageBody() {
       });
     }
 
-    return new TursoDriver(config.url, config.token as string, true);
+    return new TursoDriver(config.url!, config.token as string, true);
   }, []);
 
   return <MyStudio driver={driver} name="Quick Connect" color="blue" />;
diff --git a/src/app/(theme)/client/s/[[...driver]]/page-client.tsx b/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
index 233a6e60..a216f447 100644
--- a/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
+++ b/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
@@ -1,14 +1,14 @@
 "use client";
 import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
+import MyStudio from "@/components/my-studio";
+import CloudflareD1Driver from "@/drivers/cloudflare-d1-driver";
 import RqliteDriver from "@/drivers/rqlite-driver";
+import IndexdbSavedDoc from "@/drivers/saved-doc/indexdb-saved-doc";
+import StarbaseDriver from "@/drivers/starbase-driver";
 import TursoDriver from "@/drivers/turso-driver";
 import ValtownDriver from "@/drivers/valtown-driver";
 import { useSearchParams } from "next/navigation";
 import { useMemo } from "react";
-import MyStudio from "@/components/my-studio";
-import IndexdbSavedDoc from "@/drivers/saved-doc/indexdb-saved-doc";
-import CloudflareD1Driver from "@/drivers/cloudflare-d1-driver";
-import StarbaseDriver from "@/drivers/starbase-driver";
 
 export default function ClientPageBody() {
   const params = useSearchParams();
@@ -24,12 +24,12 @@ export default function ClientPageBody() {
     if (!conn) return null;
     if (conn.driver === "rqlite") {
       return new RqliteDriver(
-        conn.config.url,
+        conn.config.url!,
         conn.config.username,
         conn.config.password
       );
     } else if (conn.driver === "valtown") {
-      return new ValtownDriver(conn.config.token);
+      return new ValtownDriver(conn.config.token!);
     } else if (conn.driver === "cloudflare-d1") {
       return new CloudflareD1Driver("/proxy/d1", {
         Authorization: "Bearer " + conn.config.token,
@@ -43,7 +43,7 @@ export default function ClientPageBody() {
       });
     }
 
-    return new TursoDriver(conn.config.url, conn.config.token, true);
+    return new TursoDriver(conn.config.url!, conn.config.token!, true);
   }, [conn]);
 
   const docDriver = useMemo(() => {
diff --git a/src/app/(theme)/connect/saved-connection-storage.ts b/src/app/(theme)/connect/saved-connection-storage.ts
index 28eb6ef9..15aef321 100644
--- a/src/app/(theme)/connect/saved-connection-storage.ts
+++ b/src/app/(theme)/connect/saved-connection-storage.ts
@@ -275,8 +275,8 @@ export interface SavedConnectionItem {
 }
 
 export interface SavedConnectionItemConfigConfig {
-  token: string;
-  url: string;
+  token?: string;
+  url?: string;
   username?: string;
   password?: string;
   database?: string;
diff --git a/src/app/storybook/connection-editor/page.tsx b/src/app/storybook/connection-editor/page.tsx
new file mode 100644
index 00000000..4c890bfd
--- /dev/null
+++ b/src/app/storybook/connection-editor/page.tsx
@@ -0,0 +1,86 @@
+"use client";
+import {
+  CommonConnectionConfig,
+  CommonConnectionConfigTemplate,
+  ConnectionConfigEditor,
+} from "@/components/connection-config-editor";
+import { useState } from "react";
+
+const TESTING_TEMPLATE: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "host",
+        label: "Host",
+        type: "text",
+        required: true,
+        placeholder: "Hostname or IP address",
+      },
+      {
+        name: "port",
+        label: "Port",
+        type: "text",
+        required: true,
+        placeholder: "Port",
+        size: "max-w-[100px]",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "username",
+        label: "Username",
+        type: "text",
+        required: true,
+        placeholder: "Database username",
+      },
+      {
+        name: "password",
+        label: "Password",
+        type: "password",
+        placeholder: "Database password",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "database",
+        label: "Database",
+        type: "text",
+        placeholder: "Database name",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "token",
+        label: "Access Token",
+        type: "textarea",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "ssl",
+        label: "Use SSL",
+        type: "checkbox",
+      },
+    ],
+  },
+];
+
+export default function StorybookConnectionEditor() {
+  const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
+
+  return (
+    <ConnectionConfigEditor
+      template={TESTING_TEMPLATE}
+      value={value}
+      onChange={setValue}
+    />
+  );
+}
diff --git a/src/components/connection-config-editor/index.tsx b/src/components/connection-config-editor/index.tsx
new file mode 100644
index 00000000..f925a8d5
--- /dev/null
+++ b/src/components/connection-config-editor/index.tsx
@@ -0,0 +1,141 @@
+/**
+ * This component offers a versatile solution for managing connection configurations
+ * across various drivers. It supports storing configurations in multiple locations,
+ * such as cloud storage, local storage, and potentially other future storage options.
+ * By utilizing this component, we eliminate the need to duplicate code for each
+ * connection configuration editor for different drivers.
+ *
+ * It operates by taking templates and providing the appropriate interface for the user.
+ * Users can customize the templates to suit their specific requirements.
+ */
+
+import { cn } from "@/lib/utils";
+import { produce } from "immer";
+import { Input } from "../orbit/input";
+import { Label } from "../orbit/label";
+import { Textarea } from "../ui/textarea";
+
+export function ConnectionConfigEditor({
+  template,
+  onChange,
+  value,
+}: ConnectionConfigEditorProps) {
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <Label title="Name">
+        <Input
+          autoFocus
+          size="lg"
+          placeholder="Connection name"
+          value={value.name}
+          onChange={(e) => {
+            onChange(
+              produce(value, (draft) => {
+                draft.name = e.target.value as never;
+              })
+            );
+          }}
+        />
+      </Label>
+
+      {template.map((row, index) => {
+        return (
+          <div key={index} className={"flex flex-row gap-4"}>
+            {row.columns.map((column, index) => {
+              let content = <div />;
+
+              if (column.type === "text" || column.type === "password") {
+                content = (
+                  <Label title={column.label} required={column.required}>
+                    <Input
+                      size="lg"
+                      placeholder={column.placeholder}
+                      value={(value[column.name] as string) ?? ""}
+                      onChange={(e) => {
+                        onChange(
+                          produce(value, (draft) => {
+                            draft[column.name] = e.target.value as never;
+                          })
+                        );
+                      }}
+                    />
+                  </Label>
+                );
+              } else if (column.type === "textarea") {
+                content = (
+                  <Label title={column.label} required={column.required}>
+                    <Textarea
+                      rows={4}
+                      className="resize-none"
+                      placeholder={column.placeholder}
+                      value={(value[column.name] as string) ?? ""}
+                      onChange={(e) => {
+                        onChange(
+                          produce(value, (draft) => {
+                            draft[column.name] = e.target.value as never;
+                          })
+                        );
+                      }}
+                    />
+                  </Label>
+                );
+              } else if (column.type === "checkbox") {
+                content = (
+                  <label className="mx-1 flex flex-1 gap-2 text-base select-none">
+                    <input type="checkbox" checked className="scale-125" />
+                    {column.label}
+                  </label>
+                );
+              }
+
+              return (
+                <div key={index} className={cn("flex-1", column.size)}>
+                  {content}
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export interface CommonConnectionConfig {
+  name: string;
+
+  username?: string;
+  password?: string;
+  token?: string;
+  host?: string;
+  port?: string;
+  database?: string;
+
+  ssl?: boolean;
+
+  // Primarily used for loading the SQLite database file
+  // from the browser using the File System Access API
+  filehandler?: string;
+}
+
+interface CommonConnectionConfigColumn {
+  name: keyof CommonConnectionConfig;
+  label: string;
+  type: "text" | "password" | "file" | "textarea" | "checkbox";
+  required?: boolean;
+  placeholder?: string;
+  size?: string;
+}
+
+type CommonConnectionConfigTemplateRow = {
+  columns: CommonConnectionConfigColumn[];
+};
+
+export type CommonConnectionConfigTemplate =
+  CommonConnectionConfigTemplateRow[];
+
+interface ConnectionConfigEditorProps {
+  template: CommonConnectionConfigTemplate;
+  value: CommonConnectionConfig;
+  onChange: (value: CommonConnectionConfig) => void;
+}
diff --git a/src/components/connection-config-editor/template/cloudflare.ts b/src/components/connection-config-editor/template/cloudflare.ts
new file mode 100644
index 00000000..7f718b2d
--- /dev/null
+++ b/src/components/connection-config-editor/template/cloudflare.ts
@@ -0,0 +1,37 @@
+import { CommonConnectionConfigTemplate } from "..";
+
+export const CLOUDFLARE_CONNECTION_TEMPLATE: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "username",
+        label: "Account ID",
+        type: "text",
+        required: true,
+        placeholder: "Account ID",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "database",
+        label: "Database ID",
+        type: "text",
+        required: true,
+        placeholder: "Database ID",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "token",
+        label: "API Token",
+        type: "textarea",
+        required: true,
+        placeholder: "API Token",
+      },
+    ],
+  },
+];
diff --git a/src/components/connection-config-editor/template/generic.ts b/src/components/connection-config-editor/template/generic.ts
new file mode 100644
index 00000000..5817e52e
--- /dev/null
+++ b/src/components/connection-config-editor/template/generic.ts
@@ -0,0 +1,59 @@
+import { CommonConnectionConfigTemplate } from "..";
+
+export const GENERIC_CONNECTION_TEMPLATE: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "host",
+        label: "Host",
+        type: "text",
+        required: true,
+        placeholder: "Hostname or IP address",
+      },
+      {
+        name: "port",
+        label: "Port",
+        type: "text",
+        required: true,
+        placeholder: "Port",
+        size: "max-w-[100px]",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "username",
+        label: "Username",
+        type: "text",
+        required: true,
+        placeholder: "Database username",
+      },
+      {
+        name: "password",
+        label: "Password",
+        type: "password",
+        placeholder: "Database password",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "database",
+        label: "Database",
+        type: "text",
+        placeholder: "Database name",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "ssl",
+        label: "Use SSL",
+        type: "checkbox",
+      },
+    ],
+  },
+];
diff --git a/src/components/connection-config-editor/template/rqlite.ts b/src/components/connection-config-editor/template/rqlite.ts
new file mode 100644
index 00000000..9d8773cd
--- /dev/null
+++ b/src/components/connection-config-editor/template/rqlite.ts
@@ -0,0 +1,32 @@
+import { CommonConnectionConfigTemplate } from "..";
+
+export const RQLITE_CONNECTION_TEMPLATE: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "host",
+        label: "Host",
+        type: "text",
+        required: true,
+        placeholder: "Hostname or IP address",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "username",
+        label: "Username",
+        type: "text",
+        required: true,
+        placeholder: "Database username",
+      },
+      {
+        name: "password",
+        label: "Password",
+        type: "password",
+        placeholder: "Database password",
+      },
+    ],
+  },
+];
diff --git a/src/components/connection-config-editor/template/turso.ts b/src/components/connection-config-editor/template/turso.ts
new file mode 100644
index 00000000..4541eee8
--- /dev/null
+++ b/src/components/connection-config-editor/template/turso.ts
@@ -0,0 +1,26 @@
+import { CommonConnectionConfigTemplate } from "..";
+
+export const TURSO_CONNECTION_TEMPLATE: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "host",
+        label: "URL",
+        type: "text",
+        required: true,
+        placeholder: "URL",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "token",
+        label: "Access Token",
+        type: "textarea",
+        required: false,
+        placeholder: "Access Token",
+      },
+    ],
+  },
+];
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index ecfcadcd..cb4c974d 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/src/drivers/helpers.ts b/src/drivers/helpers.ts
index 1819f826..9ca219e8 100644
--- a/src/drivers/helpers.ts
+++ b/src/drivers/helpers.ts
@@ -8,12 +8,12 @@ import ValtownDriver from "./valtown-driver";
 export function createLocalDriver(conn: SavedConnectionItemConfig) {
   if (conn.driver === "rqlite") {
     return new RqliteDriver(
-      conn.config.url,
+      conn.config.url!,
       conn.config.username,
       conn.config.password
     );
   } else if (conn.driver === "valtown") {
-    return new ValtownDriver(conn.config.token);
+    return new ValtownDriver(conn.config.token!);
   } else if (conn.driver === "cloudflare-d1") {
     return new CloudflareD1Driver("/proxy/d1", {
       Authorization: "Bearer " + conn.config.token,
@@ -27,5 +27,5 @@ export function createLocalDriver(conn: SavedConnectionItemConfig) {
     });
   }
 
-  return new TursoDriver(conn.config.url, conn.config.token, true);
+  return new TursoDriver(conn.config.url!, conn.config.token!, true);
 }

From 83b16c1e91ae8c1b9d4a4f9efdae1afc480af2ee Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 19 Feb 2025 19:10:49 +0700
Subject: [PATCH 072/106] add support for local file for new interface

---
 src/app/(outerbase)/base-template.tsx         | 21 +++++++++++++++++++
 .../local/edit-base/[baseId]/page.tsx         | 20 +++++++++++++++++-
 .../local/new-base/[driver]/page.tsx          |  8 +++++--
 src/app/(outerbase)/local/page.tsx            |  5 ++++-
 .../connection-config-editor/index.tsx        | 21 +++++++++++++++++++
 .../template/sqlite.ts                        | 15 +++++++++++++
 src/components/resource-card/utils.tsx        |  1 +
 7 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 src/components/connection-config-editor/template/sqlite.ts

diff --git a/src/app/(outerbase)/base-template.tsx b/src/app/(outerbase)/base-template.tsx
index 68a571be..248ecc7a 100644
--- a/src/app/(outerbase)/base-template.tsx
+++ b/src/app/(outerbase)/base-template.tsx
@@ -4,6 +4,7 @@ import {
 } from "@/components/connection-config-editor";
 import { CLOUDFLARE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/cloudflare";
 import { RQLITE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/rqlite";
+import { SQLITE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/sqlite";
 import { TURSO_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/turso";
 import { SavedConnectionItemConfig } from "../(theme)/connect/saved-connection-storage";
 
@@ -101,4 +102,24 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
       };
     },
   },
+  "sqlite-filehandler": {
+    template: SQLITE_CONNECTION_TEMPLATE,
+    from: (value: SavedConnectionItemConfig): CommonConnectionConfig => {
+      return {
+        name: value.name,
+        filehandler: value.config.filehandler,
+      };
+    },
+    to: (value: CommonConnectionConfig): SavedConnectionItemConfig => {
+      return {
+        name: value.name,
+        driver: "sqlite-filehandler",
+        config: {
+          url: value.host,
+          username: value.username,
+          password: value.password,
+        },
+      };
+    },
+  },
 };
diff --git a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
index 2decd364..71ac626d 100644
--- a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
+++ b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
@@ -36,6 +36,24 @@ export default function LocalEditBasePage() {
     router.push("/local");
   }, [template, value, router, baseId]);
 
+  const onConnect = useCallback(() => {
+    if (!template) return;
+
+    setLoading(true);
+    const tmp = SavedConnectionLocalStorage.save({
+      storage: "local",
+      ...template.to(value),
+    });
+
+    // Redirect to the connection page
+    mutate("/local/bases");
+    router.push(
+      tmp.driver === "sqlite-filehandler"
+        ? `/playground/client?s=${tmp.id}`
+        : `/client/s/${tmp.driver ?? "turso"}?p=${tmp.id}`
+    );
+  }, [template, value, router]);
+
   // Loading the base
   useEffect(() => {
     const config = SavedConnectionLocalStorage.get(baseId);
@@ -86,7 +104,7 @@ export default function LocalEditBasePage() {
 
       <div className="bg-background sticky bottom-0 mt-12 border-t px-2 py-6">
         <div className="container flex gap-3">
-          <Button variant="primary" size="lg">
+          <Button variant="primary" size="lg" onClick={onConnect}>
             <ArrowRight />
             Connect
           </Button>
diff --git a/src/app/(outerbase)/local/new-base/[driver]/page.tsx b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
index 250d7ad0..4b42b626 100644
--- a/src/app/(outerbase)/local/new-base/[driver]/page.tsx
+++ b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
@@ -44,8 +44,12 @@ export default function LocalNewBasePage() {
 
     // Redirect to the connection page
     mutate("/local/bases");
-    router.push(`/client/s/${driver}?p=${tmp.id}`);
-  }, [template, value, router, driver]);
+    router.push(
+      tmp.driver === "sqlite-filehandler"
+        ? `/playground/client?s=${tmp.id}`
+        : `/client/s/${tmp.driver ?? "turso"}?p=${tmp.id}`
+    );
+  }, [template, value, router]);
 
   if (!template) {
     return <div>Invalid driver</div>;
diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
index 09d3a19e..2d7b7a32 100644
--- a/src/app/(outerbase)/local/page.tsx
+++ b/src/app/(outerbase)/local/page.tsx
@@ -29,7 +29,10 @@ export default function LocalConnectionPage() {
 
     return tmp.map((conn: SavedConnectionItem) => {
       return {
-        href: `/client/s/${conn.driver}?p=${conn.id}`,
+        href:
+          conn.driver === "sqlite-filehandler"
+            ? `/playground/client?s=${conn.id}`
+            : `/client/s/${conn.driver ?? "turso"}?p=${conn.id}`,
         name: conn.name,
         lastUsed: 0,
         id: conn.id,
diff --git a/src/components/connection-config-editor/index.tsx b/src/components/connection-config-editor/index.tsx
index f925a8d5..30d9ba3a 100644
--- a/src/components/connection-config-editor/index.tsx
+++ b/src/components/connection-config-editor/index.tsx
@@ -11,6 +11,8 @@
 
 import { cn } from "@/lib/utils";
 import { produce } from "immer";
+import { CommonDialogProvider } from "../common-dialog";
+import FileHandlerPicker from "../filehandler-picker";
 import { Input } from "../orbit/input";
 import { Label } from "../orbit/label";
 import { Textarea } from "../ui/textarea";
@@ -86,6 +88,25 @@ export function ConnectionConfigEditor({
                     {column.label}
                   </label>
                 );
+              } else if (column.type === "file") {
+                content = (
+                  <Label title={column.label} required={column.required}>
+                    <div>
+                      <CommonDialogProvider>
+                        <FileHandlerPicker
+                          value={value[column.name] as string}
+                          onChange={(fileId) => {
+                            onChange(
+                              produce(value, (draft) => {
+                                draft[column.name] = fileId as never;
+                              })
+                            );
+                          }}
+                        />
+                      </CommonDialogProvider>
+                    </div>
+                  </Label>
+                );
               }
 
               return (
diff --git a/src/components/connection-config-editor/template/sqlite.ts b/src/components/connection-config-editor/template/sqlite.ts
new file mode 100644
index 00000000..0904dd48
--- /dev/null
+++ b/src/components/connection-config-editor/template/sqlite.ts
@@ -0,0 +1,15 @@
+import { CommonConnectionConfigTemplate } from "..";
+
+export const SQLITE_CONNECTION_TEMPLATE: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "filehandler",
+        label: "File",
+        type: "file",
+        required: true,
+        placeholder: "Please select file",
+      },
+    ],
+  },
+];
diff --git a/src/components/resource-card/utils.tsx b/src/components/resource-card/utils.tsx
index e79db461..15e064b7 100644
--- a/src/components/resource-card/utils.tsx
+++ b/src/components/resource-card/utils.tsx
@@ -15,6 +15,7 @@ import {
 
 export function getDatabaseFriendlyName(type: string) {
   if (type === "sqlite") return "SQLite";
+  if (type === "sqlite-filehandler") return "SQLite";
   if (type === "mysql") return "MySQL";
   if (type === "postgres") return "PostgreSQL";
   if (type === "rqlite") return "rqlite";

From c147d2ccb2e5672f892618db583fa4ccf8e32f03 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 19 Feb 2025 20:47:06 +0700
Subject: [PATCH 073/106] add dummy interface for create local mysql

---
 .../(outerbase)/local/new-base/mysql/page.tsx | 107 ++++++++++++
 src/app/(outerbase)/local/page.tsx            | 125 +++++++++++++-
 src/app/(outerbase)/new-resource-button.tsx   | 154 +++++++++---------
 src/app/(outerbase)/w/[workspaceId]/page.tsx  |   2 +-
 4 files changed, 303 insertions(+), 85 deletions(-)
 create mode 100644 src/app/(outerbase)/local/new-base/mysql/page.tsx

diff --git a/src/app/(outerbase)/local/new-base/mysql/page.tsx b/src/app/(outerbase)/local/new-base/mysql/page.tsx
new file mode 100644
index 00000000..3e45d7fa
--- /dev/null
+++ b/src/app/(outerbase)/local/new-base/mysql/page.tsx
@@ -0,0 +1,107 @@
+"use client";
+import { useSession } from "@/app/(outerbase)/session-provider";
+import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
+import { Button } from "@/components/orbit/button";
+import { Loader } from "@/components/orbit/loader";
+import { ArrowLeft } from "@phosphor-icons/react";
+import Link from "next/link";
+
+function LocalMySQLCloudSection() {
+  const { isLoading, session } = useSession();
+  const { workspaces, loading } = useWorkspaces();
+
+  if (isLoading || loading) {
+    return (
+      <div className="flex w-1/2 flex-col gap-4 border-r p-4">
+        <Loader />
+      </div>
+    );
+  }
+
+  if (!session?.user) {
+    return (
+      <div className="flex w-1/2 flex-col gap-4 border-r p-4">
+        <h1 className="text-lg font-bold">Outerbase Cloud</h1>
+
+        <div>
+          <p>Connect to our cloud services</p>
+          <ul className="">
+            <li>Benefit 1</li>
+            <li>Benefit 2</li>
+            <li>Benefit 3</li>
+            <li>Benefit 4</li>
+          </ul>
+        </div>
+
+        <div>
+          <Button
+            variant="primary"
+            className="inline-flex"
+            size="lg"
+            href="/signin"
+            as="link"
+          >
+            Sign In
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-1/2 flex-col gap-4 border-r p-4">
+      <h1 className="text-lg font-bold">Outerbase Cloud</h1>
+      <p>Please select the workspace</p>
+      {(workspaces ?? []).map((workspace) => {
+        return (
+          <Link
+            key={workspace.id}
+            href={`/w/${workspace.short_name}/new-base/mysql`}
+          >
+            {workspace.name}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+export default function LocalMySQLNewBasePage() {
+  return (
+    <div className="container">
+      <div className="my-8 flex">
+        <Button variant="secondary" size="lg" href="/local" as="link">
+          <ArrowLeft />
+          Back
+        </Button>
+      </div>
+
+      <div className="mb-12 p-4">
+        It is not possible to run MySQL from browser.
+        <br /> Please use the desktop app or our cloud services.
+      </div>
+
+      <div className="flex">
+        <LocalMySQLCloudSection />
+
+        <div className="flex w-1/2 flex-col gap-4 p-4">
+          <h1 className="text-lg font-bold">Desktop App</h1>
+
+          <div>Connect locally with our desktop app</div>
+
+          <div>
+            <Button
+              variant="primary"
+              className="inline-flex"
+              size="lg"
+              href="https://github.com/outerbase/studio-desktop/releases"
+              as="link"
+            >
+              Download Desktop App
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
index 2d7b7a32..8d507cd5 100644
--- a/src/app/(outerbase)/local/page.tsx
+++ b/src/app/(outerbase)/local/page.tsx
@@ -4,20 +4,135 @@ import {
   SavedConnectionItem,
   SavedConnectionLocalStorage,
 } from "@/app/(theme)/connect/saved-connection-storage";
-import { MySQLIcon, SQLiteIcon } from "@/components/icons/outerbase-icon";
-import { CaretDown } from "@phosphor-icons/react";
+import {
+  CloudflareIcon,
+  MySQLIcon,
+  PostgreIcon,
+  SQLiteIcon,
+} from "@/components/icons/outerbase-icon";
+import {
+  DigitalOceanIcon,
+  NeonIcon,
+  StarbaseIcon,
+  SupabaseIcon,
+  TursoIcon,
+} from "@/components/resource-card/icon";
+import { CaretDown, Database } from "@phosphor-icons/react";
 import { useRouter } from "next/navigation";
 import { useCallback, useMemo } from "react";
 import useSWR from "swr";
-import { LOCAL_CONNECTION_TEMPLATES } from "../base-template";
 import NavigationLayout from "../nav-layout";
-import NewResourceButton from "../new-resource-button";
+import NewResourceButton, { NewResourceType } from "../new-resource-button";
 import { ResourceItemList, ResourceItemProps } from "../resource-item-helper";
 import { deleteLocalBaseDialog } from "./dialog-base-delete";
 import { createLocalBoardDialog } from "./dialog-board-create";
 import { deleteLocalBoardDialog } from "./dialog-board-delete";
 import { useLocalDashboardList } from "./hooks";
 
+const RESOURCE_TYPE_LIST: NewResourceType[] = [
+  {
+    name: "Supabase",
+    icon: SupabaseIcon,
+    href: "",
+    comingSoon: true,
+    thirdParty: true,
+  },
+  {
+    name: "Cloudflare",
+    icon: CloudflareIcon,
+    href: "",
+    thirdParty: true,
+    comingSoon: true,
+  },
+  {
+    name: "Cloudflare (Manual)",
+    icon: CloudflareIcon,
+    href: "/local/new-base/cloudflare-d1",
+  },
+  {
+    name: "Neon",
+    icon: NeonIcon,
+    href: "",
+    comingSoon: true,
+    thirdParty: true,
+  },
+  {
+    name: "StarbaseDB",
+    icon: StarbaseIcon,
+    href: "/local/new-base/starbase",
+  },
+  {
+    name: "Turso/LibSQL (Manual)",
+    icon: TursoIcon,
+    href: "/local/new-base/turso",
+  },
+  {
+    name: "Turso",
+    icon: TursoIcon,
+    thirdParty: true,
+    comingSoon: true,
+    href: "/local/new-base/turso",
+  },
+  {
+    name: "DigitalOcean",
+    icon: DigitalOceanIcon,
+    comingSoon: true,
+    href: "/local/new-base/digitalocean",
+    thirdParty: true,
+  },
+  {
+    name: "Postgres",
+    icon: PostgreIcon,
+    href: "/local/new-base/postgres",
+  },
+  {
+    name: "Motherduck",
+    icon: Database,
+    href: "",
+    comingSoon: true,
+  },
+  {
+    name: "SQL Server",
+    icon: Database,
+    href: "",
+    comingSoon: true,
+  },
+  {
+    name: "MySQL",
+    icon: MySQLIcon,
+    href: "/local/new-base/mysql",
+  },
+  {
+    name: "Clickhouse",
+    icon: Database,
+    comingSoon: true,
+    href: "",
+  },
+  {
+    name: "Snowflake",
+    icon: Database,
+    comingSoon: true,
+    href: "",
+  },
+  {
+    name: "BigQuery",
+    icon: Database,
+    comingSoon: true,
+    href: "",
+  },
+  {
+    name: "Redshift",
+    icon: Database,
+    comingSoon: true,
+    href: "",
+  },
+  {
+    name: "SQLite",
+    icon: SQLiteIcon,
+    href: "/local/new-base/sqlite-filehandler",
+  },
+];
+
 export default function LocalConnectionPage() {
   const router = useRouter();
   const {
@@ -88,7 +203,7 @@ export default function LocalConnectionPage() {
         <div className="flex gap-2">
           <NewResourceButton
             onCreateBoard={onBoardCreate}
-            templates={LOCAL_CONNECTION_TEMPLATES}
+            templates={RESOURCE_TYPE_LIST}
           />
         </div>
 
diff --git a/src/app/(outerbase)/new-resource-button.tsx b/src/app/(outerbase)/new-resource-button.tsx
index d387e2f4..0bb76e14 100644
--- a/src/app/(outerbase)/new-resource-button.tsx
+++ b/src/app/(outerbase)/new-resource-button.tsx
@@ -1,9 +1,5 @@
 import { Button } from "@/components/orbit/button";
 import { Input } from "@/components/orbit/input";
-import {
-  getDatabaseFriendlyName,
-  getDatabaseIcon,
-} from "@/components/resource-card/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,81 +9,70 @@ import { cn } from "@/lib/utils";
 import { CaretDown, ChartBar, MagnifyingGlass } from "@phosphor-icons/react";
 import Link from "next/link";
 import { PropsWithChildren, useMemo, useState } from "react";
-import { ConnectionTemplateList } from "./base-template";
 
 function CreateResourceItem({
-  children,
-  href,
-}: PropsWithChildren<{ href: string }>) {
-  return (
-    <Link
-      prefetch={false}
-      href={href}
-      className={
-        "bg-secondary flex w-full cursor-pointer items-center justify-start rounded p-2 text-base"
-      }
-    >
-      {children}
-    </Link>
-  );
-}
-
-function CreateResourceItemSearch({
-  children,
   selected,
-  href,
-}: PropsWithChildren<{ selected?: boolean; href: string }>) {
+  data,
+}: PropsWithChildren<{ data: NewResourceType; selected?: boolean }>) {
+  if (data.comingSoon) {
+    return (
+      <div
+        className={cn(
+          "text-muted-foreground flex w-full cursor-pointer items-center justify-start rounded p-2 text-base",
+          { "bg-secondary": selected },
+          data.colorClassName
+        )}
+      >
+        <data.icon className="mr-2 h-6 w-6" />
+        <span className="flex-1 text-left">{data.name}</span>
+        {data.comingSoon && (
+          <span className="text-primary-foreground rounded border bg-zinc-500 px-1.5 py-0.5 text-xs">
+            Coming Soon
+          </span>
+        )}
+      </div>
+    );
+  }
+
   return (
     <Link
       prefetch={false}
-      href={href}
+      href={data.href}
       className={cn(
         "hover:bg-secondary flex w-full cursor-pointer items-center justify-start rounded p-2 text-base",
-        { "bg-secondary": selected }
+        { "bg-secondary": selected },
+        data.colorClassName
       )}
     >
-      {children}
+      <data.icon className="mr-2 h-6 w-6" />
+      <span className="flex-1 text-left">{data.name}</span>
     </Link>
   );
 }
 
-interface ResourceType {
+export interface NewResourceType {
   name: string;
   icon: React.FC<React.SVGProps<SVGSVGElement>>;
   href: string;
-  enterprise?: boolean;
+  comingSoon?: boolean;
+  colorClassName?: string;
+  thirdParty?: boolean;
 }
 interface NewResourceProps {
   onCreateBoard?: () => void;
-  templates: Record<string, ConnectionTemplateList>;
+  templates: NewResourceType[];
 }
 
-export default function NewResourceButton({
+export default function NewResourceType({
   onCreateBoard,
   templates,
 }: NewResourceProps) {
   const resourceTypeList = useMemo(() => {
-    const tmp = Object.entries(templates).map(([key]) => {
-      return {
-        name: getDatabaseFriendlyName(key),
-        icon: getDatabaseIcon(key),
-        enterprise: false,
-        href: `/local/new-base/${key}`,
-      } as ResourceType;
-    });
-
-    tmp.sort((a, b) => {
-      return a.name.localeCompare(b.name);
-    });
-
+    const tmp = [...templates];
+    tmp.sort((a, b) => a.name.localeCompare(b.name));
     return tmp;
   }, [templates]);
 
-  const [leftSideResourceType, rightSideResourceType] = useMemo(() => {
-    const split = Math.floor(resourceTypeList.length / 2);
-    return [resourceTypeList.slice(0, split), resourceTypeList.slice(split)];
-  }, [resourceTypeList]);
-
   const [search, setSearch] = useState("");
   const [open, setOpen] = useState(false);
 
@@ -120,26 +105,45 @@ export default function NewResourceButton({
 
       <div className="my-2 flex">
         <div className="flex w-1/2 flex-col gap-2 px-2">
-          {leftSideResourceType.map((resource) => (
-            <CreateResourceItem key={resource.name} href={resource.href}>
-              <resource.icon className="mr-2 h-6 w-6" />
-              <span>{resource.name}</span>
-            </CreateResourceItem>
-          ))}
+          {resourceTypeList
+            .filter((resource) => !resource.thirdParty)
+            .filter((_, idx) => idx % 2 === 0)
+            .map((resource) => (
+              <CreateResourceItem key={resource.name} data={resource} />
+            ))}
         </div>
 
         <div className="flex w-1/2 flex-col gap-2 px-2">
-          {rightSideResourceType.map((resource) => (
-            <CreateResourceItem key={resource.name} href={resource.href}>
-              <resource.icon className="mr-2 h-6 w-6" />
-              <span className="flex-1 text-left">{resource.name}</span>
-              {resource.enterprise && (
-                <span className="text-primary-foreground rounded border bg-zinc-500 px-1.5 py-0.5 text-sm">
-                  Enterprise
-                </span>
-              )}
-            </CreateResourceItem>
-          ))}
+          {resourceTypeList
+            .filter((resource) => !resource.thirdParty)
+            .filter((_, idx) => idx % 2 === 1)
+            .map((resource) => (
+              <CreateResourceItem key={resource.name} data={resource} />
+            ))}
+        </div>
+      </div>
+
+      <h2 className="border-t px-3 py-2 pt-4 text-base font-semibold">
+        Third party integrations
+      </h2>
+
+      <div className="my- flex">
+        <div className="flex w-1/2 flex-col gap-2 px-2">
+          {resourceTypeList
+            .filter((resource) => !!resource.thirdParty)
+            .filter((_, idx) => idx % 2 === 0)
+            .map((resource) => (
+              <CreateResourceItem key={resource.name} data={resource} />
+            ))}
+        </div>
+
+        <div className="flex w-1/2 flex-col gap-2 px-2">
+          {resourceTypeList
+            .filter((resource) => !!resource.thirdParty)
+            .filter((_, idx) => idx % 2 === 1)
+            .map((resource) => (
+              <CreateResourceItem key={resource.name} data={resource} />
+            ))}
         </div>
       </div>
 
@@ -174,25 +178,17 @@ export default function NewResourceButton({
     }
 
     return (
-      <div className="flex flex-col px-2 pb-2">
+      <div className="flex flex-col gap-0.5 px-2 pb-2">
         {filteredResource
           .sort((a, b) => {
             return a.name.localeCompare(b.name);
           })
           .map((resource, resourceIdx) => (
-            <CreateResourceItemSearch
-              href={resource.href}
+            <CreateResourceItem
               key={resource.name}
+              data={resource}
               selected={resourceIdx === 0}
-            >
-              <resource.icon className="mr-2 h-6 w-6" />
-              <span className="flex-1 text-left">{resource.name}</span>
-              {resource.enterprise && (
-                <span className="text-primary-foreground rounded border bg-zinc-500 px-1.5 py-0.5 text-sm">
-                  Enterprise
-                </span>
-              )}
-            </CreateResourceItemSearch>
+            />
           ))}
       </div>
     );
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index d1ce6d24..62b0f945 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -126,7 +126,7 @@ export default function WorkspaceListPage() {
           <div className="flex gap-2">
             <NewResourceButton
               onCreateBoard={onCreateBoardClicked}
-              templates={{}}
+              templates={[]}
             />
 
             <Input

From ce569da9ec5333c935d11dace90a4fb0e0e4ac24 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 19 Feb 2025 20:53:18 +0700
Subject: [PATCH 074/106] fixing the sqlite filehandler

---
 src/app/(outerbase)/base-template.tsx                | 4 +---
 src/app/(outerbase)/local/new-base/[driver]/page.tsx | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/(outerbase)/base-template.tsx b/src/app/(outerbase)/base-template.tsx
index 248ecc7a..46a03581 100644
--- a/src/app/(outerbase)/base-template.tsx
+++ b/src/app/(outerbase)/base-template.tsx
@@ -115,9 +115,7 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
         name: value.name,
         driver: "sqlite-filehandler",
         config: {
-          url: value.host,
-          username: value.username,
-          password: value.password,
+          filehandler: value.filehandler,
         },
       };
     },
diff --git a/src/app/(outerbase)/local/new-base/[driver]/page.tsx b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
index 4b42b626..d5b14283 100644
--- a/src/app/(outerbase)/local/new-base/[driver]/page.tsx
+++ b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
@@ -44,7 +44,7 @@ export default function LocalNewBasePage() {
 
     // Redirect to the connection page
     mutate("/local/bases");
-    router.push(
+    router.replace(
       tmp.driver === "sqlite-filehandler"
         ? `/playground/client?s=${tmp.id}`
         : `/client/s/${tmp.driver ?? "turso"}?p=${tmp.id}`

From d9d5e5efebd04cdd967e39545b888ba130839b52 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Wed, 19 Feb 2025 22:11:26 +0700
Subject: [PATCH 075/106] add outerbase api for create base and source

---
 src/app/(outerbase)/base-template.tsx         | 54 +++++++++--
 .../[workspaceId]/new-base/[driver]/page.tsx  | 92 +++++++++++++++++++
 src/outerbase-cloud/api-type.ts               | 15 +++
 src/outerbase-cloud/api-workspace.ts          | 29 +++++-
 4 files changed, 179 insertions(+), 11 deletions(-)
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx

diff --git a/src/app/(outerbase)/base-template.tsx b/src/app/(outerbase)/base-template.tsx
index 46a03581..e9bb3494 100644
--- a/src/app/(outerbase)/base-template.tsx
+++ b/src/app/(outerbase)/base-template.tsx
@@ -3,9 +3,11 @@ import {
   CommonConnectionConfigTemplate,
 } from "@/components/connection-config-editor";
 import { CLOUDFLARE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/cloudflare";
+import { GENERIC_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/generic";
 import { RQLITE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/rqlite";
 import { SQLITE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/sqlite";
 import { TURSO_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/turso";
+import { OuterbaseAPISourceInput } from "@/outerbase-cloud/api-type";
 import { SavedConnectionItemConfig } from "../(theme)/connect/saved-connection-storage";
 
 export interface ConnectionTemplateList<T = any> {
@@ -20,7 +22,7 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
 > = {
   "cloudflare-d1": {
     template: CLOUDFLARE_CONNECTION_TEMPLATE,
-    from: (value: SavedConnectionItemConfig): CommonConnectionConfig => {
+    from: (value) => {
       return {
         name: value.name,
         database: value.config.database,
@@ -28,7 +30,7 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
         username: value.config.username,
       };
     },
-    to: (value: CommonConnectionConfig): SavedConnectionItemConfig => {
+    to: (value) => {
       return {
         name: value.name,
         driver: "cloudflare-d1",
@@ -42,14 +44,14 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
   },
   turso: {
     template: TURSO_CONNECTION_TEMPLATE,
-    from: (value: SavedConnectionItemConfig): CommonConnectionConfig => {
+    from: (value) => {
       return {
         name: value.name,
         host: value.config.url,
         token: value.config.token,
       };
     },
-    to: (value: CommonConnectionConfig): SavedConnectionItemConfig => {
+    to: (value) => {
       return {
         name: value.name,
         driver: "turso",
@@ -62,14 +64,14 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
   },
   starbase: {
     template: TURSO_CONNECTION_TEMPLATE,
-    from: (value: SavedConnectionItemConfig): CommonConnectionConfig => {
+    from: (value) => {
       return {
         name: value.name,
         host: value.config.url,
         token: value.config.token,
       };
     },
-    to: (value: CommonConnectionConfig): SavedConnectionItemConfig => {
+    to: (value) => {
       return {
         driver: "starbase",
         name: value.name,
@@ -82,7 +84,7 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
   },
   rqlite: {
     template: RQLITE_CONNECTION_TEMPLATE,
-    from: (value: SavedConnectionItemConfig): CommonConnectionConfig => {
+    from: (value) => {
       return {
         name: value.name,
         host: value.config.url,
@@ -90,7 +92,7 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
         password: value.config.password,
       };
     },
-    to: (value: CommonConnectionConfig): SavedConnectionItemConfig => {
+    to: (value) => {
       return {
         name: value.name,
         driver: "rqlite",
@@ -104,13 +106,13 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
   },
   "sqlite-filehandler": {
     template: SQLITE_CONNECTION_TEMPLATE,
-    from: (value: SavedConnectionItemConfig): CommonConnectionConfig => {
+    from: (value) => {
       return {
         name: value.name,
         filehandler: value.config.filehandler,
       };
     },
-    to: (value: CommonConnectionConfig): SavedConnectionItemConfig => {
+    to: (value) => {
       return {
         name: value.name,
         driver: "sqlite-filehandler",
@@ -121,3 +123,35 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
     },
   },
 };
+
+export const REMOTE_CONNECTION_TEMPLATES: Record<
+  string,
+  ConnectionTemplateList<{ source: OuterbaseAPISourceInput; name: string }>
+> = {
+  mysql: {
+    template: GENERIC_CONNECTION_TEMPLATE,
+    from: (value) => {
+      return {
+        name: value.name,
+        host: value.source.host,
+        username: value.source.user,
+        database: value.source.database,
+        port: value.source.port,
+      };
+    },
+    to: (value) => {
+      return {
+        name: value.name,
+        source: {
+          host: value.host,
+          user: value.username,
+          password: value.password,
+          database: value.database,
+          port: value.port,
+          type: "mysql",
+          base_id: "",
+        },
+      };
+    },
+  },
+};
diff --git a/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
new file mode 100644
index 00000000..a6377be1
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
@@ -0,0 +1,92 @@
+"use client";
+import { REMOTE_CONNECTION_TEMPLATES } from "@/app/(outerbase)/base-template";
+import {
+  CommonConnectionConfig,
+  ConnectionConfigEditor,
+} from "@/components/connection-config-editor";
+import { Button } from "@/components/orbit/button";
+import { getDatabaseFriendlyName } from "@/components/resource-card/utils";
+import { ArrowLeft, ArrowRight, FloppyDisk } from "@phosphor-icons/react";
+import { useParams } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+
+export default function WorkspaceNewBasePage() {
+  const { driver } = useParams<{ driver: string }>();
+  const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
+  const [loading, setLoading] = useState(false);
+
+  const template = useMemo(() => {
+    return REMOTE_CONNECTION_TEMPLATES[driver];
+  }, [driver]);
+
+  const onSave = useCallback(() => {
+    setLoading(true);
+
+    // @TODO: Save the connection to Outerbase API
+    // @TODO: Redirect to workspace page
+  }, []);
+
+  const onConnect = useCallback(() => {
+    setLoading(true);
+
+    // @TODO: Save the connection to Outerbase API
+    // @TODO: Redirect to base page
+  }, []);
+
+  if (!template) {
+    return <div>Invalid driver</div>;
+  }
+
+  return (
+    <>
+      <div className="container">
+        <div className="my-8 flex">
+          <Button variant="secondary" size="lg" href="/local" as="link">
+            <ArrowLeft />
+            Back
+          </Button>
+
+          <div className="flex-1"></div>
+        </div>
+
+        <div className="mb-8 text-2xl font-bold">
+          <div>Connect to {getDatabaseFriendlyName(driver)} database</div>
+        </div>
+
+        <div>
+          <div className="w-1/2">
+            <ConnectionConfigEditor
+              template={template.template}
+              value={value}
+              onChange={setValue}
+            />
+          </div>
+          <div></div>
+        </div>
+      </div>
+
+      <div className="bg-background sticky bottom-0 mt-12 border-t px-2 py-6">
+        <div className="container flex gap-3">
+          <Button
+            variant="primary"
+            size="lg"
+            onClick={onConnect}
+            disabled={loading}
+          >
+            <ArrowRight />
+            Connect
+          </Button>
+          <Button
+            variant="secondary"
+            size="lg"
+            onClick={onSave}
+            disabled={loading}
+          >
+            <FloppyDisk />
+            Save
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index c30bfd89..0f6007ec 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -45,6 +45,21 @@ export interface OuterbaseAPIQueryRaw {
 export interface OuterbaseAPIAnalyticEvent {
   created_at: string;
 }
+
+export interface OuterbaseAPISourceInput {
+  host?: string;
+  user?: string;
+  password?: string;
+  port?: string;
+  database?: string;
+  type: string;
+  ssl_config?: {
+    require: boolean;
+    rejectUnauthorized: boolean;
+  };
+  base_id: string;
+}
+
 export interface OuterbaseAPISource {
   model: "source";
   type: string;
diff --git a/src/outerbase-cloud/api-workspace.ts b/src/outerbase-cloud/api-workspace.ts
index 220e10b0..7d7b6265 100644
--- a/src/outerbase-cloud/api-workspace.ts
+++ b/src/outerbase-cloud/api-workspace.ts
@@ -1,5 +1,10 @@
 import { requestOuterbase } from "./api";
-import { OuterbaseAPIWorkspace } from "./api-type";
+import {
+  OuterbaseAPIBase,
+  OuterbaseAPISource,
+  OuterbaseAPISourceInput,
+  OuterbaseAPIWorkspace,
+} from "./api-type";
 
 export function createOuterbaseWorkspace(options: {
   short_name: string;
@@ -22,3 +27,25 @@ export function updateOuterbaseWorkspace(
 export function deleteOuterbaseWorkspace(workspaceId: string) {
   return requestOuterbase(`/api/v1/workspace/${workspaceId}`, "DELETE");
 }
+
+export function createOuterbaseBase(workspaceId: string, name: string) {
+  return requestOuterbase<OuterbaseAPIBase>(
+    `/api/v1/workspace/${workspaceId}/base`,
+    "POST",
+    {
+      name,
+    }
+  );
+}
+
+export function createOuterbaseSource(
+  workspaceId: string,
+  baseId: string,
+  source: OuterbaseAPISourceInput
+) {
+  return requestOuterbase<OuterbaseAPISource>(
+    `/api/v1/workspace/${workspaceId}/base/${baseId}/source`,
+    "POST",
+    source
+  );
+}

From 4a0eefbd8ccde9cc3b3241f7b4ee5d9261c5ac5c Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Thu, 20 Feb 2025 22:00:50 +0700
Subject: [PATCH 076/106] add cloud connection

---
 src/app/(outerbase)/base-template.tsx         |  53 ++++++++
 src/app/(outerbase)/local/page.tsx            | 127 +-----------------
 src/app/(outerbase)/new-resource-button.tsx   |   9 +-
 src/app/(outerbase)/new-resource-list.tsx     |  94 +++++++++++++
 .../[workspaceId]/new-base/[driver]/page.tsx  |  75 +++++++++--
 .../w/[workspaceId]/new-base/page.tsx         |   3 +
 src/app/(outerbase)/w/[workspaceId]/page.tsx  |   2 +-
 .../connection-config-editor/index.tsx        |  16 ++-
 src/outerbase-cloud/api-type.ts               |  13 ++
 src/outerbase-cloud/api-workspace.ts          |  30 ++++-
 10 files changed, 276 insertions(+), 146 deletions(-)
 create mode 100644 src/app/(outerbase)/new-resource-list.tsx
 create mode 100644 src/app/(outerbase)/w/[workspaceId]/new-base/page.tsx

diff --git a/src/app/(outerbase)/base-template.tsx b/src/app/(outerbase)/base-template.tsx
index e9bb3494..9688c549 100644
--- a/src/app/(outerbase)/base-template.tsx
+++ b/src/app/(outerbase)/base-template.tsx
@@ -154,4 +154,57 @@ export const REMOTE_CONNECTION_TEMPLATES: Record<
       };
     },
   },
+  postgres: {
+    template: GENERIC_CONNECTION_TEMPLATE,
+    from: (value) => {
+      return {
+        name: value.name,
+        host: value.source.host,
+        username: value.source.user,
+        database: value.source.database,
+        port: value.source.port,
+      };
+    },
+    to: (value) => {
+      return {
+        name: value.name,
+        source: {
+          host: value.host,
+          user: value.username,
+          password: value.password,
+          database: value.database,
+          port: value.port,
+          type: "postgres",
+          base_id: "",
+        },
+      };
+    },
+  },
+
+  starbasedb: {
+    template: TURSO_CONNECTION_TEMPLATE,
+    from: (value) => {
+      return {
+        name: value.name,
+        host: value.source.host,
+        username: value.source.user,
+        database: value.source.database,
+        port: value.source.port,
+      };
+    },
+    to: (value) => {
+      return {
+        name: value.name,
+        source: {
+          host: value.host,
+          user: value.username,
+          password: value.password,
+          database: value.database,
+          port: value.port,
+          type: "starbasedb",
+          base_id: "",
+        },
+      };
+    },
+  },
 };
diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
index 8d507cd5..6a981204 100644
--- a/src/app/(outerbase)/local/page.tsx
+++ b/src/app/(outerbase)/local/page.tsx
@@ -4,135 +4,19 @@ import {
   SavedConnectionItem,
   SavedConnectionLocalStorage,
 } from "@/app/(theme)/connect/saved-connection-storage";
-import {
-  CloudflareIcon,
-  MySQLIcon,
-  PostgreIcon,
-  SQLiteIcon,
-} from "@/components/icons/outerbase-icon";
-import {
-  DigitalOceanIcon,
-  NeonIcon,
-  StarbaseIcon,
-  SupabaseIcon,
-  TursoIcon,
-} from "@/components/resource-card/icon";
-import { CaretDown, Database } from "@phosphor-icons/react";
+import { MySQLIcon, SQLiteIcon } from "@/components/icons/outerbase-icon";
+import { CaretDown } from "@phosphor-icons/react";
 import { useRouter } from "next/navigation";
 import { useCallback, useMemo } from "react";
 import useSWR from "swr";
 import NavigationLayout from "../nav-layout";
-import NewResourceButton, { NewResourceType } from "../new-resource-button";
+import NewResourceButton from "../new-resource-button";
 import { ResourceItemList, ResourceItemProps } from "../resource-item-helper";
 import { deleteLocalBaseDialog } from "./dialog-base-delete";
 import { createLocalBoardDialog } from "./dialog-board-create";
 import { deleteLocalBoardDialog } from "./dialog-board-delete";
 import { useLocalDashboardList } from "./hooks";
 
-const RESOURCE_TYPE_LIST: NewResourceType[] = [
-  {
-    name: "Supabase",
-    icon: SupabaseIcon,
-    href: "",
-    comingSoon: true,
-    thirdParty: true,
-  },
-  {
-    name: "Cloudflare",
-    icon: CloudflareIcon,
-    href: "",
-    thirdParty: true,
-    comingSoon: true,
-  },
-  {
-    name: "Cloudflare (Manual)",
-    icon: CloudflareIcon,
-    href: "/local/new-base/cloudflare-d1",
-  },
-  {
-    name: "Neon",
-    icon: NeonIcon,
-    href: "",
-    comingSoon: true,
-    thirdParty: true,
-  },
-  {
-    name: "StarbaseDB",
-    icon: StarbaseIcon,
-    href: "/local/new-base/starbase",
-  },
-  {
-    name: "Turso/LibSQL (Manual)",
-    icon: TursoIcon,
-    href: "/local/new-base/turso",
-  },
-  {
-    name: "Turso",
-    icon: TursoIcon,
-    thirdParty: true,
-    comingSoon: true,
-    href: "/local/new-base/turso",
-  },
-  {
-    name: "DigitalOcean",
-    icon: DigitalOceanIcon,
-    comingSoon: true,
-    href: "/local/new-base/digitalocean",
-    thirdParty: true,
-  },
-  {
-    name: "Postgres",
-    icon: PostgreIcon,
-    href: "/local/new-base/postgres",
-  },
-  {
-    name: "Motherduck",
-    icon: Database,
-    href: "",
-    comingSoon: true,
-  },
-  {
-    name: "SQL Server",
-    icon: Database,
-    href: "",
-    comingSoon: true,
-  },
-  {
-    name: "MySQL",
-    icon: MySQLIcon,
-    href: "/local/new-base/mysql",
-  },
-  {
-    name: "Clickhouse",
-    icon: Database,
-    comingSoon: true,
-    href: "",
-  },
-  {
-    name: "Snowflake",
-    icon: Database,
-    comingSoon: true,
-    href: "",
-  },
-  {
-    name: "BigQuery",
-    icon: Database,
-    comingSoon: true,
-    href: "",
-  },
-  {
-    name: "Redshift",
-    icon: Database,
-    comingSoon: true,
-    href: "",
-  },
-  {
-    name: "SQLite",
-    icon: SQLiteIcon,
-    href: "/local/new-base/sqlite-filehandler",
-  },
-];
-
 export default function LocalConnectionPage() {
   const router = useRouter();
   const {
@@ -201,10 +85,7 @@ export default function LocalConnectionPage() {
     <NavigationLayout>
       <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
         <div className="flex gap-2">
-          <NewResourceButton
-            onCreateBoard={onBoardCreate}
-            templates={RESOURCE_TYPE_LIST}
-          />
+          <NewResourceButton onCreateBoard={onBoardCreate} />
         </div>
 
         <div className="my-4 flex gap-4">
diff --git a/src/app/(outerbase)/new-resource-button.tsx b/src/app/(outerbase)/new-resource-button.tsx
index 0bb76e14..9fa55887 100644
--- a/src/app/(outerbase)/new-resource-button.tsx
+++ b/src/app/(outerbase)/new-resource-button.tsx
@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
 import { CaretDown, ChartBar, MagnifyingGlass } from "@phosphor-icons/react";
 import Link from "next/link";
 import { PropsWithChildren, useMemo, useState } from "react";
+import { getCreateResourceTypeList } from "./new-resource-list";
 
 function CreateResourceItem({
   selected,
@@ -60,18 +61,18 @@ export interface NewResourceType {
 }
 interface NewResourceProps {
   onCreateBoard?: () => void;
-  templates: NewResourceType[];
+  workspaceId?: string;
 }
 
 export default function NewResourceType({
   onCreateBoard,
-  templates,
+  workspaceId,
 }: NewResourceProps) {
   const resourceTypeList = useMemo(() => {
-    const tmp = [...templates];
+    const tmp = getCreateResourceTypeList(workspaceId);
     tmp.sort((a, b) => a.name.localeCompare(b.name));
     return tmp;
-  }, [templates]);
+  }, [workspaceId]);
 
   const [search, setSearch] = useState("");
   const [open, setOpen] = useState(false);
diff --git a/src/app/(outerbase)/new-resource-list.tsx b/src/app/(outerbase)/new-resource-list.tsx
new file mode 100644
index 00000000..0244af21
--- /dev/null
+++ b/src/app/(outerbase)/new-resource-list.tsx
@@ -0,0 +1,94 @@
+import {
+  MySQLIcon,
+  PostgreIcon,
+  SQLiteIcon,
+} from "@/components/icons/outerbase-icon";
+import {
+  CloudflareIcon,
+  DigitalOceanIcon,
+  NeonIcon,
+  StarbaseIcon,
+  SupabaseIcon,
+  TursoIcon,
+} from "@/components/resource-card/icon";
+import { NewResourceType } from "./new-resource-button";
+
+export function getCreateResourceTypeList(
+  workspaceId?: string
+): NewResourceType[] {
+  return [
+    {
+      name: "Supabase",
+      icon: SupabaseIcon,
+      href: workspaceId ? "" : "",
+      comingSoon: true,
+      thirdParty: true,
+    },
+    {
+      name: "Cloudflare",
+      icon: CloudflareIcon,
+      href: workspaceId ? "" : "",
+      thirdParty: true,
+      comingSoon: true,
+    },
+    {
+      name: "Cloudflare (Manual)",
+      icon: CloudflareIcon,
+      href: workspaceId ? "" : "/local/new-base/cloudflare-d1",
+    },
+    {
+      name: "Neon",
+      icon: NeonIcon,
+      href: workspaceId ? "" : "",
+      comingSoon: true,
+      thirdParty: true,
+    },
+    {
+      name: "StarbaseDB",
+      icon: StarbaseIcon,
+      href: workspaceId
+        ? `/w/${workspaceId}/new-base/starbasedb`
+        : "/local/new-base/starbase",
+    },
+    {
+      name: "Turso/LibSQL (Manual)",
+      icon: TursoIcon,
+      href: workspaceId ? "" : "/local/new-base/turso",
+    },
+    {
+      name: "Turso",
+      icon: TursoIcon,
+      thirdParty: true,
+      comingSoon: true,
+      href: workspaceId
+        ? `/w/${workspaceId}/new-base/turso`
+        : "/local/new-base/turso",
+    },
+    {
+      name: "DigitalOcean",
+      icon: DigitalOceanIcon,
+      comingSoon: true,
+      href: workspaceId ? "" : "",
+      thirdParty: true,
+    },
+    {
+      name: "Postgres",
+      icon: PostgreIcon,
+      href: workspaceId
+        ? `/w/${workspaceId}/new-base/postgres`
+        : "/local/new-base/postgres",
+    },
+    {
+      name: "MySQL",
+      icon: MySQLIcon,
+      href: workspaceId
+        ? `/w/${workspaceId}/new-base/mysql`
+        : "/local/new-base/mysql",
+    },
+    {
+      name: "SQLite",
+      icon: SQLiteIcon,
+      href: workspaceId ? "" : "/local/new-base/sqlite-filehandler",
+    },
+  ].filter((resource) => resource.href || resource.comingSoon);
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
index a6377be1..be391c01 100644
--- a/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
@@ -6,32 +6,70 @@ import {
 } from "@/components/connection-config-editor";
 import { Button } from "@/components/orbit/button";
 import { getDatabaseFriendlyName } from "@/components/resource-card/utils";
+import {
+  createOuterbaseBase,
+  createOuterbaseConnection,
+  createOuterbaseSource,
+  testOuterbaseSource,
+} from "@/outerbase-cloud/api-workspace";
 import { ArrowLeft, ArrowRight, FloppyDisk } from "@phosphor-icons/react";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
 
 export default function WorkspaceNewBasePage() {
-  const { driver } = useParams<{ driver: string }>();
+  const { driver, workspaceId } = useParams<{
+    driver: string;
+    workspaceId: string;
+  }>();
+  const router = useRouter();
   const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
 
   const template = useMemo(() => {
     return REMOTE_CONNECTION_TEMPLATES[driver];
   }, [driver]);
 
-  const onSave = useCallback(() => {
-    setLoading(true);
+  const onSave = useCallback(
+    (overrideRedirect?: string) => {
+      setLoading(true);
+      setError("");
+
+      const { name: baseName, source } = template.to(value);
+
+      const runSave = async () => {
+        await testOuterbaseSource(workspaceId, source);
+        const baseResponse = await createOuterbaseBase(workspaceId, baseName);
+        const connResponse = await createOuterbaseConnection(
+          workspaceId,
+          baseResponse.id,
+          baseName
+        );
 
-    // @TODO: Save the connection to Outerbase API
-    // @TODO: Redirect to workspace page
-  }, []);
+        await createOuterbaseSource(workspaceId, {
+          ...source,
+          base_id: baseResponse.id,
+          connection_id: connResponse.id,
+        });
 
-  const onConnect = useCallback(() => {
-    setLoading(true);
+        router.replace(
+          overrideRedirect ?? `/w/${workspaceId}/${baseResponse.short_name}`
+        );
+      };
 
-    // @TODO: Save the connection to Outerbase API
-    // @TODO: Redirect to base page
-  }, []);
+      runSave()
+        .then()
+        .catch((e) => {
+          if (e instanceof Error) {
+            setError(e.message);
+          } else {
+            setError(e.toString());
+          }
+        })
+        .finally(() => setLoading(false));
+    },
+    [workspaceId, template, value, router]
+  );
 
   if (!template) {
     return <div>Invalid driver</div>;
@@ -55,6 +93,12 @@ export default function WorkspaceNewBasePage() {
 
         <div>
           <div className="w-1/2">
+            {error && (
+              <div className="mb-4 rounded border border-red-500 bg-red-100 p-2 text-base dark:bg-red-500 dark:text-white">
+                {error}
+              </div>
+            )}
+
             <ConnectionConfigEditor
               template={template.template}
               value={value}
@@ -68,18 +112,21 @@ export default function WorkspaceNewBasePage() {
       <div className="bg-background sticky bottom-0 mt-12 border-t px-2 py-6">
         <div className="container flex gap-3">
           <Button
+            loading={loading}
             variant="primary"
             size="lg"
-            onClick={onConnect}
+            onClick={() => onSave()}
             disabled={loading}
           >
             <ArrowRight />
             Connect
           </Button>
+
           <Button
+            loading={loading}
             variant="secondary"
             size="lg"
-            onClick={onSave}
+            onClick={() => onSave(`/w/${workspaceId}`)}
             disabled={loading}
           >
             <FloppyDisk />
diff --git a/src/app/(outerbase)/w/[workspaceId]/new-base/page.tsx b/src/app/(outerbase)/w/[workspaceId]/new-base/page.tsx
new file mode 100644
index 00000000..d7c56182
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/new-base/page.tsx
@@ -0,0 +1,3 @@
+export default function NewBasePage() {
+  return <div>Unknown page</div>;
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 62b0f945..295bcbbb 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -126,7 +126,7 @@ export default function WorkspaceListPage() {
           <div className="flex gap-2">
             <NewResourceButton
               onCreateBoard={onCreateBoardClicked}
-              templates={[]}
+              workspaceId={currentWorkspace?.short_name}
             />
 
             <Input
diff --git a/src/components/connection-config-editor/index.tsx b/src/components/connection-config-editor/index.tsx
index 30d9ba3a..cd3c9b79 100644
--- a/src/components/connection-config-editor/index.tsx
+++ b/src/components/connection-config-editor/index.tsx
@@ -15,6 +15,7 @@ import { CommonDialogProvider } from "../common-dialog";
 import FileHandlerPicker from "../filehandler-picker";
 import { Input } from "../orbit/input";
 import { Label } from "../orbit/label";
+import { Toggle } from "../orbit/toggle";
 import { Textarea } from "../ui/textarea";
 
 export function ConnectionConfigEditor({
@@ -83,8 +84,19 @@ export function ConnectionConfigEditor({
                 );
               } else if (column.type === "checkbox") {
                 content = (
-                  <label className="mx-1 flex flex-1 gap-2 text-base select-none">
-                    <input type="checkbox" checked className="scale-125" />
+                  <label className="mx-1 flex flex-1 items-center justify-start gap-2 text-base select-none">
+                    <Toggle
+                      size="sm"
+                      onChange={(checked) => {
+                        onChange(
+                          produce(value, (draft) => {
+                            draft[column.name] = checked as never;
+                          })
+                        );
+                      }}
+                      toggled={!!value[column.name]}
+                    />
+
                     {column.label}
                   </label>
                 );
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index 0f6007ec..7a61b1ba 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -57,7 +57,9 @@ export interface OuterbaseAPISourceInput {
     require: boolean;
     rejectUnauthorized: boolean;
   };
+  starbasedb_options?: { database_path: string; database_token: string };
   base_id: string;
+  connection_id?: string;
 }
 
 export interface OuterbaseAPISource {
@@ -75,6 +77,17 @@ export interface OuterbaseAPIBase {
   last_analytics_event: OuterbaseAPIAnalyticEvent;
 }
 
+export interface OuterbaseAPIConnection {
+  base_id: string;
+  created_at: string;
+  description: string;
+  id: string;
+  model: "connection";
+  name: string;
+  updated_at: string;
+  workspace_id: string;
+}
+
 export interface OuterbaseAPIWorkspace {
   model: "workspace";
   name: string;
diff --git a/src/outerbase-cloud/api-workspace.ts b/src/outerbase-cloud/api-workspace.ts
index 7d7b6265..4c66dde3 100644
--- a/src/outerbase-cloud/api-workspace.ts
+++ b/src/outerbase-cloud/api-workspace.ts
@@ -1,6 +1,7 @@
 import { requestOuterbase } from "./api";
 import {
   OuterbaseAPIBase,
+  OuterbaseAPIConnection,
   OuterbaseAPISource,
   OuterbaseAPISourceInput,
   OuterbaseAPIWorkspace,
@@ -38,13 +39,38 @@ export function createOuterbaseBase(workspaceId: string, name: string) {
   );
 }
 
-export function createOuterbaseSource(
+export function createOuterbaseConnection(
   workspaceId: string,
   baseId: string,
+  name: string
+) {
+  return requestOuterbase<OuterbaseAPIConnection>(
+    `/api/v1/workspace/${workspaceId}/connection`,
+    "POST",
+    {
+      name,
+      baseId,
+    }
+  );
+}
+
+export function testOuterbaseSource(
+  workspaceId: string,
+  source: OuterbaseAPISourceInput
+) {
+  return requestOuterbase(
+    `/api/v1/workspace/${workspaceId}/source/credential/test`,
+    "POST",
+    source
+  );
+}
+
+export function createOuterbaseSource(
+  workspaceId: string,
   source: OuterbaseAPISourceInput
 ) {
   return requestOuterbase<OuterbaseAPISource>(
-    `/api/v1/workspace/${workspaceId}/base/${baseId}/source`,
+    `/api/v1/workspace/${workspaceId}/source`,
     "POST",
     source
   );

From 1e3bfc4a4ff14b17e6a155e71c560dbb99da5a9f Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Fri, 21 Feb 2025 12:56:55 +0700
Subject: [PATCH 077/106] refactor data catalog (#372)

* refactor data catalog entry modal

* refactor data catalog tab to use DataCatalogTermDefinition

* refactor data catalog in memory driver

* refactor data catalog

* fix: initialize definition state with column definition

* make column enabled by default
---
 src/extensions/data-catalog/constant.ts       |  15 -
 .../data-catalog/data-catalog-entry-modal.tsx |  49 +-
 .../data-catalog/data-catalog-tab.tsx         |  29 +-
 .../data-catalog-table-accordion.tsx          | 140 +-----
 .../data-catalog-table-column-modal.tsx       |  69 +--
 .../data-catalog-table-column.tsx             |  71 +--
 .../data-catalog/data-model-tab.tsx           | 134 ++---
 .../data-catalog/driver-inmemory.ts           | 219 ++++----
 src/extensions/data-catalog/driver.tsx        |  90 ++--
 .../data-catalog/table-metadata-modal.tsx     |  86 ++--
 .../data-catalog/table-result-header.tsx      |  42 +-
 .../data-catalog/term-definition-list.tsx     |   6 +-
 .../data-catalog/virtual-column.tsx           | 101 ++--
 .../data-catalog/virtual-join-modal.tsx       | 151 +++---
 src/outerbase-cloud/api-type.ts               |   6 +-
 src/outerbase-cloud/data-catalog-driver.ts    | 473 ++++++++++++------
 src/outerbase-cloud/util.ts                   |  61 ---
 17 files changed, 865 insertions(+), 877 deletions(-)
 delete mode 100644 src/extensions/data-catalog/constant.ts
 delete mode 100644 src/outerbase-cloud/util.ts

diff --git a/src/extensions/data-catalog/constant.ts b/src/extensions/data-catalog/constant.ts
deleted file mode 100644
index e804c103..00000000
--- a/src/extensions/data-catalog/constant.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { OuterbaseDataCatalogVirtualColumnInput } from "@/outerbase-cloud/api-type";
-
-export const defaultVirtualColumn: OuterbaseDataCatalogVirtualColumnInput = {
-  body: "",
-  flags: {
-    isActive: true,
-    isVirtualKey: true,
-  },
-  sample_data: "",
-  schema: "",
-  table: "",
-  virtual_key_column: "",
-  virtual_key_schema: "",
-  virtual_key_table: "",
-};
diff --git a/src/extensions/data-catalog/data-catalog-entry-modal.tsx b/src/extensions/data-catalog/data-catalog-entry-modal.tsx
index a8db5eaa..5b64472b 100644
--- a/src/extensions/data-catalog/data-catalog-entry-modal.tsx
+++ b/src/extensions/data-catalog/data-catalog-entry-modal.tsx
@@ -9,42 +9,53 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { OuterbaseDataCatalogDefinition } from "@/outerbase-cloud/api-type";
 import { useCallback, useState } from "react";
 import DataCatalogDriver, { DataCatalogTermDefinition } from "./driver";
 
 interface Props {
   driver?: DataCatalogDriver;
   onClose: () => void;
-  definition?: OuterbaseDataCatalogDefinition;
+  definition?: DataCatalogTermDefinition;
+}
+
+interface TermDefinitionInut extends Omit<DataCatalogTermDefinition, "id"> {
+  id?: string;
 }
 
 export function DataCatalogEntryModal({ onClose, driver, definition }: Props) {
   const [deleting, setDeleting] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [formData, setFormData] = useState<DataCatalogTermDefinition>(() => ({
-    ...definition,
-  }));
+  const [formData, setFormData] = useState<TermDefinitionInut>(
+    () => definition
+  );
 
   const saveTermDefinition = useCallback(() => {
     setLoading(true);
-    const data = {
-      ...formData,
-      id: definition?.id || undefined,
-    };
 
-    driver
-      ?.updateTermDefinition(data)
-      .then()
-      .finally(() => onClose());
-  }, [formData, driver, definition, onClose]);
+    if (formData.id) {
+      driver
+        ?.updateTermDefinition({ ...formData, id: formData.id })
+        .then()
+        .finally(() => onClose());
+    } else {
+      driver
+        ?.addTermDefinition({
+          name: formData.name,
+          definition: formData.definition,
+          otherNames: formData.otherNames,
+        })
+        .then()
+        .finally(() => onClose());
+    }
+  }, [formData, driver, onClose]);
 
   function onDelete() {
     if (!definition) return;
 
     setDeleting(true);
+
     driver
-      ?.deleteTermDefinition(definition.id)
+      ?.deleteTermDefinition(definition.id!)
       .then()
       .finally(() => onClose());
   }
@@ -77,7 +88,7 @@ export function DataCatalogEntryModal({ onClose, driver, definition }: Props) {
             </Label>
           </div>
           <Input
-            value={formData.name}
+            value={formData?.name || ""}
             placeholder="Add a name"
             className="w-full"
             onValueChange={(value) => onChangeValue(value, "name")}
@@ -88,7 +99,7 @@ export function DataCatalogEntryModal({ onClose, driver, definition }: Props) {
             <Label className="text-right text-sm">Other Names</Label>
           </div>
           <Input
-            value={formData.otherNames}
+            value={formData?.otherNames || ""}
             placeholder="Add other names"
             className="w-full"
             onChange={(e) => onChangeValue(e.currentTarget.value, "otherNames")}
@@ -100,7 +111,7 @@ export function DataCatalogEntryModal({ onClose, driver, definition }: Props) {
           </Label>
           <Textarea
             rows={4}
-            value={formData.definition}
+            value={formData?.definition || ""}
             className="text-base"
             placeholder="Add a definition"
             onChange={(e) => onChangeValue(e.currentTarget.value, "definition")}
@@ -110,7 +121,7 @@ export function DataCatalogEntryModal({ onClose, driver, definition }: Props) {
       <DialogFooter>
         <Button
           loading={loading}
-          disabled={loading || !formData.name || !formData.definition}
+          disabled={loading || !formData?.name || !formData?.definition}
           onClick={saveTermDefinition}
           title={definition ? "Save Change" : "Add Entry"}
           shape="base"
diff --git a/src/extensions/data-catalog/data-catalog-tab.tsx b/src/extensions/data-catalog/data-catalog-tab.tsx
index 6bd99ef6..eb4df4ab 100644
--- a/src/extensions/data-catalog/data-catalog-tab.tsx
+++ b/src/extensions/data-catalog/data-catalog-tab.tsx
@@ -2,10 +2,10 @@ import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
 import { Button } from "@/components/orbit/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { useConfig } from "@/context/config-provider";
-import { OuterbaseDataCatalogDefinition } from "@/outerbase-cloud/api-type";
 import { useEffect, useState } from "react";
 import DataCatalogExtension from ".";
 import { DataCatalogEntryModal } from "./data-catalog-entry-modal";
+import { DataCatalogTermDefinition } from "./driver";
 import EmptyTermDefinition from "./empty-definition";
 import TermDefinitionList from "./term-definition-list";
 
@@ -14,27 +14,22 @@ export default function DataCatalogTab() {
   const dataCatalogExtension =
     extensions.getExtension<DataCatalogExtension>("data-catalog");
   const driver = dataCatalogExtension?.driver;
-
+  const [definitions, setDefinitions] = useState<DataCatalogTermDefinition[]>(
+    []
+  );
   const [open, setOpen] = useState(false);
 
-  const [dataCatalog, setDataCatalog] = useState<
-    OuterbaseDataCatalogDefinition[]
-  >([]);
-
-  const [definition, setDefinition] =
-    useState<OuterbaseDataCatalogDefinition>();
+  const [definition, setDefinition] = useState<DataCatalogTermDefinition>();
 
   useEffect(() => {
     if (!driver) return;
     const getDataCatalog = () => {
-      setDataCatalog(driver?.getTermDefinitions() || []);
+      setDefinitions(driver?.getTermDefinitions() || []);
     };
 
     getDataCatalog();
 
-    const unsubscribe = driver.addEventListener(getDataCatalog);
-
-    return () => unsubscribe;
+    return driver.listen(getDataCatalog);
   }, [driver]);
 
   function onOpenModal() {
@@ -70,21 +65,21 @@ export default function DataCatalogTab() {
       <div className="flex-1 gap-5 overflow-scroll p-10 pb-0">
         <div className="w-[450px]">
           <div className="text-3xl font-bold">
-            {dataCatalog?.length === 0
+            {definitions?.length === 0
               ? "Get started with Data Catalog"
               : "Definitions"}
           </div>
           <div className="text-base">
-            {dataCatalog?.length === 0
+            {definitions?.length === 0
               ? " Provide explanations for terminology in your schema. EZQL will use this to make running queries more efficient and accurate."
               : "Defined terms to be used in your product."}
           </div>
         </div>
-        {dataCatalog?.length === 0 ? (
+        {definitions?.length === 0 ? (
           <EmptyTermDefinition />
         ) : (
           <TermDefinitionList
-            data={dataCatalog}
+            data={definitions}
             onSelect={(item) => {
               setDefinition(item);
               setOpen(true);
@@ -93,7 +88,7 @@ export default function DataCatalogTab() {
         )}
         <Button
           title={
-            dataCatalog?.length === 0 ? "Create your first entry" : "Add Entry"
+            definitions?.length === 0 ? "Create your first entry" : "Add Entry"
           }
           className="mt-10 mb-10"
           onClick={onOpenModal}
diff --git a/src/extensions/data-catalog/data-catalog-table-accordion.tsx b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
index 3b28a95b..d9a8b081 100644
--- a/src/extensions/data-catalog/data-catalog-table-accordion.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-accordion.tsx
@@ -14,20 +14,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { DatabaseTableSchema } from "@/drivers/base-driver";
 import { cn } from "@/lib/utils";
-import { OuterbaseDataCatalogComment } from "@/outerbase-cloud/api-type";
 import { Blend, ChevronDown, Edit3, LucideMoreHorizontal } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
-import { toast } from "sonner";
+import { useMemo, useState } from "react";
 import DataCatalogTableColumn from "./data-catalog-table-column";
+import { useDataCatalogContext } from "./data-model-tab";
 import DataCatalogDriver from "./driver";
 import TableMetadataModal from "./table-metadata-modal";
 import VirtualJoinColumn from "./virtual-column";
-import VirtualJoinModal from "./virtual-join-modal";
+import { virtualJoinDialog } from "./virtual-join-modal";
 
 interface DataCatalogTableAccordionProps {
   table: DatabaseTableSchema;
   driver: DataCatalogDriver;
-  search?: string;
   columnName?: string;
   hasDefinitionOnly?: boolean;
 }
@@ -35,69 +33,16 @@ interface DataCatalogTableAccordionProps {
 export default function DataCatalogTableAccordion({
   table,
   driver,
-  search,
   hasDefinitionOnly,
 }: DataCatalogTableAccordionProps) {
   const modelTable = driver.getTable(table.schemaName, table.tableName!);
+  const virtualJoinList = modelTable?.relations ?? [];
+
   const [collapsible, setCollapsible] = useState(false);
-  const [seletedColumn, setSelectedColumn] = useState<
-    OuterbaseDataCatalogComment | undefined
-  >();
+  const { search } = useDataCatalogContext();
   const [open, setOpen] = useState(false);
-  const [openVirtualModal, setOpenVirtaulModal] = useState(false);
-
-  const onDeletRelationship = useCallback(
-    (id: string) => {
-      driver.deleteVirtualColumn(table.schemaName, table.tableName!, id);
-    },
-    [driver, table]
-  );
-
-  const onToggleHideFromEzql = useCallback(
-    (
-      modelColumn?: OuterbaseDataCatalogComment,
-      cb?: () => void,
-      isVirtual?: boolean
-    ) => {
-      if (!modelColumn) return;
-      driver
-        .updateColumn(
-          table.schemaName,
-          table.tableName!,
-          {
-            flags: modelColumn.flags,
-            body: modelColumn.body,
-            column: modelColumn.column,
-            sample_data: modelColumn.sample_data,
-            schema: modelColumn.schema,
-            table: modelColumn.table,
-            virtual_key_column: modelColumn.virtualKeyColumn,
-            virtual_key_schema: modelColumn.virtualKeySchema,
-            virtual_key_table: modelColumn.virtualKeyTable,
-          },
-          modelColumn.id,
-          isVirtual
-        )
-        .then(() => {
-          let msg = `${modelColumn.column} is turned ${modelColumn.flags.isActive ? "on" : "off"}`;
-          if (isVirtual) {
-            msg = "Virtual relationship status updated.";
-          }
-          toast.success(msg);
-        })
-        .catch((error) => toast.error(error.message))
-        .finally(() => {
-          cb && cb();
-        });
-    },
-    [driver, table]
-  );
 
-  const tableMetadata = useMemo(() => {
-    if (modelTable && modelTable.metadata) {
-      return modelTable.metadata;
-    }
-  }, [modelTable]);
+  const tableMetadata = modelTable?.metadata;
 
   // Check if any of the column match?
   const matchColumns = useMemo(() => {
@@ -116,13 +61,6 @@ export default function DataCatalogTableAccordion({
     return true;
   }, [search, table]);
 
-  const virtualJoins = useMemo(() => {
-    if (modelTable?.virtualJoin && modelTable.virtualJoin.length > 0) {
-      return modelTable.virtualJoin;
-    }
-    return [];
-  }, [modelTable]);
-
   // this will work only toggle check box
   if (hasDefinitionOnly) {
     const columnsDefinition = table.columns
@@ -132,10 +70,9 @@ export default function DataCatalogTableAccordion({
           table.tableName!,
           col.name
         );
-        return !!modelColumn?.body;
+        return modelColumn?.definition;
       })
       .filter(Boolean);
-
     if (columnsDefinition.length === 0) {
       return null;
     }
@@ -151,7 +88,6 @@ export default function DataCatalogTableAccordion({
         <DialogContent>
           {open && (
             <TableMetadataModal
-              driver={driver}
               schemaName={table.schemaName}
               tableName={table.tableName!}
               data={tableMetadata}
@@ -163,24 +99,6 @@ export default function DataCatalogTableAccordion({
         </DialogContent>
       </Dialog>
 
-      <Dialog open={openVirtualModal} onOpenChange={setOpenVirtaulModal}>
-        <DialogContent>
-          {openVirtualModal && (
-            <VirtualJoinModal
-              driver={driver}
-              data={seletedColumn}
-              tableName={table.tableName!}
-              schemaName={table.schemaName}
-              onSuccess={() => setCollapsible(true)}
-              onClose={() => {
-                setOpenVirtaulModal(false);
-                setSelectedColumn(undefined);
-              }}
-            />
-          )}
-        </DialogContent>
-      </Dialog>
-
       <Collapsible open={collapsible} onOpenChange={setCollapsible}>
         <div className="rounded-xl border border-neutral-200 bg-white/50 p-3 hover:border-neutral-300 hover:bg-white dark:border-neutral-800/50 dark:bg-neutral-900 dark:text-white dark:hover:border-neutral-800 dark:hover:bg-neutral-800">
           <div className="flex p-2">
@@ -199,9 +117,9 @@ export default function DataCatalogTableAccordion({
                       </span>
                     </div>
                   )}
-                  {tableMetadata?.body && (
+                  {tableMetadata?.definition && (
                     <div className="mt-2 text-base font-semibold">
-                      {tableMetadata?.body}
+                      {tableMetadata?.definition}
                     </div>
                   )}
                 </div>
@@ -228,10 +146,18 @@ export default function DataCatalogTableAccordion({
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem
-                    disabled={modelTable?.virtualJoin.length === 0}
                     onClick={() => {
-                      setOpenVirtaulModal(true);
-                      setSelectedColumn(undefined);
+                      virtualJoinDialog.show({
+                        driver,
+                        relation: {
+                          schemaName: table.schemaName,
+                          tableName: table.tableName || "",
+                          referenceTableName: "",
+                          referenceColumnName: "",
+                          columnName: "",
+                          hide: false,
+                        },
+                      });
                     }}
                     className="gap-1"
                   >
@@ -256,33 +182,17 @@ export default function DataCatalogTableAccordion({
               return (
                 <DataCatalogTableColumn
                   key={column.name}
-                  table={table}
                   column={column}
-                  driver={driver}
-                  search={search}
+                  table={table}
                   hasDefinitionOnly={hasDefinitionOnly}
-                  onToggleHideFromEzql={onToggleHideFromEzql}
                 />
               );
             })}
-            {virtualJoins.length > 0 && (
+            {virtualJoinList.length > 0 && (
               <div className="rounded-xl border border-neutral-200 p-3 hover:bg-white dark:border-neutral-800/50 dark:bg-neutral-950 dark:text-white">
                 <div className="p-3 font-bold">Relationships</div>
-                {virtualJoins.map((column) => {
-                  return (
-                    <VirtualJoinColumn
-                      data={column}
-                      key={column.id}
-                      onEditRelationship={() => {
-                        setOpenVirtaulModal(true);
-                        setSelectedColumn(column);
-                      }}
-                      onToggleHideFromEzql={onToggleHideFromEzql}
-                      onDeletRelatinship={() => {
-                        onDeletRelationship(column.id);
-                      }}
-                    />
-                  );
+                {virtualJoinList.map((column) => {
+                  return <VirtualJoinColumn data={column} key={column.id} />;
                 })}
               </div>
             )}
diff --git a/src/extensions/data-catalog/data-catalog-table-column-modal.tsx b/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
index 26210ea3..fcb2e4ca 100644
--- a/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-column-modal.tsx
@@ -8,60 +8,35 @@ import {
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { useDatabaseDriver } from "@/context/driver-provider";
-import { OuterbaseDataCatalogVirtualColumnInput } from "@/outerbase-cloud/api-type";
 import { MagicWand } from "@phosphor-icons/react";
 import { produce } from "immer";
 import { LucideLoader } from "lucide-react";
 import { useCallback, useState } from "react";
-import { defaultVirtualColumn } from "./constant";
-import DataCatalogDriver from "./driver";
+import { useDataCatalogContext } from "./data-model-tab";
+import { DataCatalogColumnInput } from "./driver";
 
 interface DataCatalogTableColumnModalProps {
-  driver: DataCatalogDriver;
   schemaName: string;
   tableName: string;
   columnName: string;
   onClose: () => void;
 }
 export default function DataCatalogTableColumnModal({
-  driver,
   schemaName,
   tableName,
   columnName,
   onClose,
 }: DataCatalogTableColumnModalProps) {
+  const { driver } = useDataCatalogContext();
   const modelColumn = driver.getColumn(schemaName, tableName, columnName);
+
   const { databaseDriver } = useDatabaseDriver();
-  const [column, setColumn] = useState<OuterbaseDataCatalogVirtualColumnInput>(
-    () => {
-      if (modelColumn) {
-        return {
-          body: modelColumn.body,
-          column: modelColumn.column,
-          flags: modelColumn.flags,
-          sample_data: modelColumn.sample_data,
-          schema: modelColumn.schema,
-          table: modelColumn.table,
-          virtual_key_column: modelColumn.virtualKeyColumn,
-          virtual_key_schema: modelColumn.virtualKeySchema,
-          virtual_key_table: modelColumn.virtualKeyTable,
-        };
-      } else {
-        return {
-          ...defaultVirtualColumn,
-          flags: {
-            isActive: true,
-            isVirtualKey: false,
-          },
-          schema: schemaName,
-          table: tableName,
-          column: columnName,
-          virtual_key_schema: schemaName,
-          virtual_key_table: tableName,
-        };
-      }
-    }
-  );
+  const [column, setColumn] = useState<DataCatalogColumnInput>(() => ({
+    definition: modelColumn?.definition || "",
+    samples: modelColumn?.samples || [],
+    hide: modelColumn?.hide || false,
+  }));
+
   const [loading, setLoading] = useState(false);
   const [sampleLoading, setSampleLoading] = useState(false);
 
@@ -74,7 +49,8 @@ export default function DataCatalogTableColumnModal({
       .then((r) => {
         setColumn((prev) =>
           produce(prev, (draft) => {
-            draft.sample_data = r.rows.map((row) => row[columnName]).join(", ");
+            const row = r.rows.map((row) => row[columnName]);
+            draft.samples = row as string[];
           })
         );
       })
@@ -83,14 +59,21 @@ export default function DataCatalogTableColumnModal({
 
   const onSaveUpdateColumn = useCallback(() => {
     setLoading(true);
+
+    const data: DataCatalogColumnInput = {
+      definition: column.definition,
+      samples: column.samples,
+      hide: column.hide,
+    };
+
     driver
-      .updateColumn(schemaName, tableName, column, modelColumn?.id)
+      .updateColumn(schemaName, tableName, columnName, data)
       .then()
       .finally(() => {
         setLoading(false);
         onClose();
       });
-  }, [driver, column, onClose, schemaName, tableName, modelColumn]);
+  }, [driver, column, columnName, onClose, schemaName, tableName]);
 
   return (
     <>
@@ -107,11 +90,11 @@ export default function DataCatalogTableColumnModal({
           <Label>Column Description</Label>
           <Textarea
             rows={4}
-            value={column.body}
+            value={column.definition}
             onChange={(e) => {
               setColumn((prev) =>
                 produce(prev, (draft) => {
-                  draft.body = e.target.value;
+                  draft.definition = e.target.value;
                 })
               );
             }}
@@ -135,11 +118,11 @@ export default function DataCatalogTableColumnModal({
           </div>
           <Textarea
             rows={4}
-            value={column.sample_data}
+            value={column.samples}
             onChange={(e) => {
               setColumn((prev) => {
                 return produce(prev, (draft) => {
-                  draft.sample_data = e.target.value;
+                  draft.samples = e.target.value.split(",");
                 });
               });
             }}
@@ -152,7 +135,7 @@ export default function DataCatalogTableColumnModal({
         <Button
           loading={loading}
           title="Save"
-          disabled={loading || !column.body}
+          disabled={loading || !column.definition}
           onClick={onSaveUpdateColumn}
         />
       </DialogFooter>
diff --git a/src/extensions/data-catalog/data-catalog-table-column.tsx b/src/extensions/data-catalog/data-catalog-table-column.tsx
index 8df3bc54..642bd1dc 100644
--- a/src/extensions/data-catalog/data-catalog-table-column.tsx
+++ b/src/extensions/data-catalog/data-catalog-table-column.tsx
@@ -14,68 +14,50 @@ import {
   DatabaseTableSchema,
 } from "@/drivers/base-driver";
 import { cn } from "@/lib/utils";
-import { OuterbaseDataCatalogComment } from "@/outerbase-cloud/api-type";
 import { Edit3, EyeOff, LucideMoreHorizontal } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
 import DataCatalogTableColumnModal from "./data-catalog-table-column-modal";
-import DataCatalogDriver from "./driver";
+import { useDataCatalogContext } from "./data-model-tab";
 
 interface DataCatalogTableColumnProps {
   table: DatabaseTableSchema;
   column: DatabaseTableColumn;
-  driver: DataCatalogDriver;
-  search?: string;
   hasDefinitionOnly?: boolean;
-  onToggleHideFromEzql: (
-    column?: OuterbaseDataCatalogComment,
-    cb?: () => void
-  ) => void;
 }
 
 export default function DataCatalogTableColumn({
   column,
   table,
-  driver,
-  search,
   hasDefinitionOnly,
-  onToggleHideFromEzql,
 }: DataCatalogTableColumnProps) {
+  const { driver, search } = useDataCatalogContext();
+
   const modelColumn = driver.getColumn(
     table.schemaName,
     table.tableName!,
     column.name
   );
-
-  const definition = modelColumn?.body;
-
   const [open, setOpen] = useState(false);
-  const [hideFromEzql, setHideFromEzql] = useState<boolean>(() => {
-    if (modelColumn?.flags) {
-      return modelColumn.flags.isActive;
-    }
-    return true;
+  const [enabled, setEnabled] = useState<boolean>(() => {
+    return modelColumn?.hide ?? true;
   });
 
   const handleClickToggle = useCallback(() => {
-    if (!modelColumn) return;
-    setHideFromEzql(!hideFromEzql);
-    onToggleHideFromEzql({
-      ...modelColumn,
-      flags: {
-        ...modelColumn.flags,
-        isActive: !hideFromEzql,
-      },
-    });
-  }, [modelColumn, hideFromEzql, onToggleHideFromEzql]);
-
-  const sampleData = useMemo(() => {
-    if (modelColumn?.sample_data) {
-      return modelColumn.sample_data.split(",").map((s) => s.trim());
-    }
-    return [];
-  }, [modelColumn]);
+    driver
+      .updateColumn(table.schemaName, table.tableName!, column.name, {
+        samples: modelColumn?.samples ?? [],
+        definition: modelColumn?.definition ?? "",
+        hide: !enabled,
+      })
+      .then(() =>
+        toast.success(`${column.name} is turned ${!enabled ? "on" : "off"}`)
+      )
+      .catch(() => toast.error("Failed to update column"));
+    setEnabled((prev) => !prev);
+  }, [modelColumn, driver, enabled, table, column]);
 
-  if ((hasDefinitionOnly && !definition) || !modelColumn) {
+  if (hasDefinitionOnly) {
     return null;
   }
 
@@ -84,20 +66,20 @@ export default function DataCatalogTableColumn({
       key={column.name}
       className={cn(
         "border-accent flex items-center border-t pt-2 pb-2 text-sm",
-        hideFromEzql ? "opacity-100" : "opacity-50"
+        enabled ? "opacity-100" : "opacity-50"
       )}
     >
-      <Toggle size="sm" toggled={hideFromEzql} onChange={handleClickToggle} />
+      <Toggle size="sm" toggled={enabled} onChange={handleClickToggle} />
       <div className="flex w-[150px] items-center p-2 text-base">
         <HighlightText text={column.name} highlight={search} />
       </div>
       <div className="text-muted-foreground flex-1 p-2 text-base">
-        {definition || "No description"}
+        {modelColumn?.definition || "No description"}
       </div>
       <div className="w-[150px] p-2">
-        {sampleData.length > 0 && (
+        {modelColumn && modelColumn?.samples.length > 0 && (
           <span className="bg-secondary rounded p-1 px-2 text-sm">
-            {sampleData.length} sample data
+            {modelColumn?.samples.length} sample data
           </span>
         )}
       </div>
@@ -107,7 +89,7 @@ export default function DataCatalogTableColumn({
         //=================
       }
       <DropdownMenu>
-        <DropdownMenuTrigger asChild disabled={!hideFromEzql}>
+        <DropdownMenuTrigger asChild disabled={!enabled}>
           <Button variant="ghost">
             <LucideMoreHorizontal className="h-4 w-4" />
           </Button>
@@ -140,7 +122,6 @@ export default function DataCatalogTableColumn({
         <DialogContent>
           {open && (
             <DataCatalogTableColumnModal
-              driver={driver}
               schemaName={table.schemaName}
               tableName={table.tableName!}
               columnName={column.name}
diff --git a/src/extensions/data-catalog/data-model-tab.tsx b/src/extensions/data-catalog/data-model-tab.tsx
index 206814e9..125fe8fc 100644
--- a/src/extensions/data-catalog/data-model-tab.tsx
+++ b/src/extensions/data-catalog/data-model-tab.tsx
@@ -6,88 +6,96 @@ import { useConfig } from "@/context/config-provider";
 import { useSchema } from "@/context/schema-provider";
 import { DatabaseTableSchema } from "@/drivers/base-driver";
 import { MagnifyingGlass } from "@phosphor-icons/react";
-import { useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import DataCatalogExtension from ".";
 import DataCatalogTableAccordion from "./data-catalog-table-accordion";
+import DataCatalogDriver from "./driver";
+
+const DataCatalogContext = createContext<{
+  driver: DataCatalogDriver;
+  search: string;
+}>({
+  driver: new Proxy({}, {}) as DataCatalogDriver,
+  search: "",
+});
+
+export function useDataCatalogContext() {
+  return useContext(DataCatalogContext);
+}
 
 export default function DataCatalogModelTab() {
-  const { currentSchemaName, schema } = useSchema();
+  const { currentSchemaName, schema: schemaList } = useSchema();
   const [search, setSearch] = useState("");
   const [hasDefinitionOnly, setHasDefinitionOnly] = useState(false);
   const [selectedSchema, setSelectedSchema] = useState(currentSchemaName);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setRevision] = useState(1);
 
   const { extensions } = useConfig();
-  const [schemas, setSchemas] = useState<DatabaseTableSchema[]>([]);
-  const dataCatalogExtension =
-    extensions.getExtension<DataCatalogExtension>("data-catalog");
-
-  const driver = dataCatalogExtension?.driver;
-
-  useEffect(() => {
-    if (!driver) return;
 
-    const onRefresh = () => {
-      if (!selectedSchema) return [];
-      const result = (schema[selectedSchema] || [])
-        .filter((table) => table.type === "table")
-        .map((table) => table.tableSchema)
-        .filter(Boolean) as DatabaseTableSchema[];
+  const driver = useMemo(() => {
+    const dataCatalogExtension =
+      extensions.getExtension<DataCatalogExtension>("data-catalog");
+    return dataCatalogExtension?.driver as DataCatalogDriver;
+  }, [extensions]);
 
-      result.sort((a, b) => a.tableName!.localeCompare(b.tableName!));
+  const schemas = useMemo(() => {
+    const result = (schemaList[selectedSchema] || [])
+      .filter((table) => table.type === "table")
+      .map((table) => table.tableSchema)
+      .filter(Boolean) as DatabaseTableSchema[];
 
-      setSchemas(result);
-    };
+    result.sort((a, b) => a.tableName!.localeCompare(b.tableName!));
 
-    onRefresh();
+    return result;
+  }, [selectedSchema, schemaList]);
 
-    const unsubscribe = driver.addEventListener(onRefresh);
-
-    return () => unsubscribe;
-  }, [driver, schema, selectedSchema]);
-
-  if (!driver) {
-    return <div>Missing driver</div>;
-  }
+  useEffect(() => {
+    return driver.listen(() => {
+      setRevision((prev) => prev + 1);
+    });
+  }, [driver, setRevision]);
 
   return (
     <div className="flex h-full flex-1 flex-col overflow-hidden">
-      <div className="border-b p-1">
-        <Toolbar>
-          <SchemaNameSelect
-            value={selectedSchema}
-            onChange={setSelectedSchema}
-          />
-          <div className="ml-2 flex items-center gap-2">
-            <Toggle
-              toggled={hasDefinitionOnly}
-              size="sm"
-              onChange={setHasDefinitionOnly}
+      <DataCatalogContext.Provider value={{ driver, search }}>
+        <div className="border-b p-1">
+          <Toolbar>
+            <SchemaNameSelect
+              value={selectedSchema}
+              onChange={setSelectedSchema}
             />
-            <label className="text-base">Definition only?</label>
-          </div>
-          <ToolbarFiller />
-          <div>
-            <Input
-              value={search}
-              onValueChange={setSearch}
-              preText={<MagnifyingGlass className="mr-2" />}
-              placeholder="Search tables, columns"
-            />
-          </div>
-        </Toolbar>
-      </div>
+            <div className="ml-2 flex items-center gap-2">
+              <Toggle
+                toggled={hasDefinitionOnly}
+                size="sm"
+                onChange={setHasDefinitionOnly}
+              />
+              <label className="text-base">Definition only?</label>
+            </div>
+            <ToolbarFiller />
+            <div>
+              <Input
+                value={search}
+                onValueChange={setSearch}
+                preText={<MagnifyingGlass className="mr-2" />}
+                placeholder="Search tables, columns"
+              />
+            </div>
+          </Toolbar>
+        </div>
 
-      <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
-        {schemas.map((table) => (
-          <DataCatalogTableAccordion
-            search={search}
-            key={table.tableName}
-            table={table}
-            driver={driver}
-            hasDefinitionOnly={hasDefinitionOnly}
-          />
-        ))}
-      </div>
+        <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
+          {schemas.map((table, index) => (
+            <DataCatalogTableAccordion
+              key={index}
+              table={table}
+              driver={driver}
+              hasDefinitionOnly={hasDefinitionOnly}
+            />
+          ))}
+        </div>
+      </DataCatalogContext.Provider>
     </div>
   );
 }
diff --git a/src/extensions/data-catalog/driver-inmemory.ts b/src/extensions/data-catalog/driver-inmemory.ts
index ac3dfe38..d02c800c 100644
--- a/src/extensions/data-catalog/driver-inmemory.ts
+++ b/src/extensions/data-catalog/driver-inmemory.ts
@@ -1,32 +1,32 @@
-import {
-  OuterbaseDataCatalogComment,
-  OuterbaseDataCatalogDefinition,
-  OuterbaseDataCatalogVirtualColumnInput,
-} from "@/outerbase-cloud/api-type";
 import DataCatalogDriver, {
-  DataCatalogModelTable,
+  DataCatalogColumn,
+  DataCatalogColumnInput,
   DataCatalogSchemas,
+  DataCatalogTable,
+  DataCatalogTableRelationship,
   DataCatalogTermDefinition,
 } from "./driver";
 
+const nanoid = () => Math.random().toString(36).slice(2);
+
 interface DataCatalogInmemoryDriverOptions {
   delay?: number;
 }
 
 export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
-  protected options: DataCatalogInmemoryDriverOptions;
   private schemas: DataCatalogSchemas;
-  private definitions: OuterbaseDataCatalogDefinition[];
+  protected options: DataCatalogInmemoryDriverOptions;
+  private definitions: DataCatalogTermDefinition[];
   private subscribers: Set<() => void> = new Set();
 
   constructor(
     schemas: DataCatalogSchemas,
-    definitions: OuterbaseDataCatalogDefinition[],
+    dataCatalog: DataCatalogTermDefinition[],
     options: DataCatalogInmemoryDriverOptions
   ) {
     this.schemas = schemas;
     this.options = options;
-    this.definitions = definitions;
+    this.definitions = dataCatalog;
   }
 
   private async delay() {
@@ -36,13 +36,11 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
   }
 
   async load(): Promise<{
-    schemas: DataCatalogSchemas;
-    definitions: OuterbaseDataCatalogDefinition[];
+    definitions: DataCatalogTermDefinition[];
   }> {
     await this.delay();
 
     return {
-      schemas: this.schemas,
       definitions: this.definitions,
     };
   }
@@ -50,53 +48,64 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
   async updateColumn(
     schemaName: string,
     tableName: string,
-    data: OuterbaseDataCatalogVirtualColumnInput,
-    commentId?: string,
-    isVirtual?: boolean
-  ): Promise<OuterbaseDataCatalogComment> {
+    columnName: string,
+    data: DataCatalogColumnInput
+  ): Promise<DataCatalogColumn> {
     await this.delay();
 
     const normalizedSchemaName = schemaName.toLowerCase();
     const normalizedTableName = tableName.toLowerCase();
+    const normalizedColumnName = columnName.toLowerCase();
+
+    if (!this.schemas[normalizedSchemaName]) {
+      this.schemas[normalizedSchemaName] = {};
+    }
+
+    const schemas = this.schemas[normalizedSchemaName];
 
-    if (
-      this.schemas[normalizedSchemaName] &&
-      this.schemas[normalizedSchemaName][normalizedTableName]
-    ) {
-      const table = this.schemas[normalizedSchemaName][normalizedTableName];
-
-      if (isVirtual) {
-        const index = table.virtualJoin.findIndex((vc) => vc.id === commentId);
-        if (index > -1) {
-          table.virtualJoin[index] = {
-            ...table.virtualJoin[index],
-            ...data,
-          };
-        } else {
-          table.virtualJoin?.push({
-            ...(data as unknown as OuterbaseDataCatalogComment),
-          });
-        }
-      } else if (data.column) {
-        table.columns[data.column] = {
-          ...table.columns[data.column],
-          ...data,
-        };
-      }
-      // notify update driver
-      this.notify();
+    if (!schemas[normalizedTableName]) {
+      schemas[normalizedTableName] = {
+        schemaName: normalizedSchemaName,
+        tableName: normalizedTableName,
+        columns: [],
+        relations: [],
+      };
+    }
+
+    const table = schemas[normalizedTableName];
+
+    const index = table.columns.findIndex(
+      (col) =>
+        col.columnName?.toLowerCase() === normalizedColumnName &&
+        col.schemaName?.toLowerCase() === normalizedSchemaName &&
+        col.tableName?.toLowerCase() === normalizedTableName
+    );
+    if (index > -1) {
+      table.columns[index] = {
+        ...table.columns[index],
+        ...data,
+      };
+    } else {
+      table.columns.push({
+        schemaName: normalizedSchemaName,
+        tableName: normalizedTableName,
+        columnName: normalizedColumnName,
+        ...data,
+      });
     }
 
-    return data as unknown as OuterbaseDataCatalogComment;
+    this.notify();
+
+    return table.columns[index];
   }
 
   async updateTable(
     schemaName: string,
     tableName: string,
-    data: OuterbaseDataCatalogVirtualColumnInput,
-    commentId: string
-  ): Promise<DataCatalogModelTable | undefined> {
+    data: DataCatalogColumn
+  ): Promise<DataCatalogTable> {
     await this.delay();
+
     const normalizedSchemaName = schemaName.toLowerCase();
     const normalizedTableName = tableName.toLowerCase();
 
@@ -110,21 +119,15 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
       schemas[normalizedTableName] = {
         schemaName: normalizedSchemaName,
         tableName: normalizedTableName,
-        columns: {},
-        virtualJoin: [],
+        columns: [],
+        relations: [],
       };
     }
-    const table = schemas[normalizedTableName];
-
-    this.schemas[schemaName][tableName] = {
-      ...table,
-      metadata: {
-        ...data,
-        ...(commentId ? { commentId } : {}),
-      } as unknown as OuterbaseDataCatalogComment,
-    };
 
+    const table = schemas[normalizedTableName];
+    schemas[normalizedTableName] = { ...table, ...data };
     this.notify();
+
     return schemas[normalizedTableName];
   }
 
@@ -132,35 +135,19 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     schemaName: string,
     tableName: string,
     columnName: string
-  ): OuterbaseDataCatalogComment | undefined {
+  ): DataCatalogColumn | undefined {
     const normalizedColumnName = columnName.toLowerCase();
     const table = this.getTable(schemaName, tableName);
-    return table?.columns[normalizedColumnName];
-  }
-  async deleteVirtualColumn(
-    schemaName: string,
-    tableName: string,
-    id: string
-  ): Promise<boolean> {
-    const normalizedSchemaName = schemaName.toLowerCase();
-    const normalizedTableName = tableName.toLowerCase();
-
-    if (
-      this.schemas[normalizedSchemaName] &&
-      this.schemas[normalizedSchemaName][normalizedTableName]
-    ) {
-      const table = this.schemas[normalizedSchemaName][normalizedTableName];
-      table.virtualJoin = table.virtualJoin?.filter((vc) => vc.id !== id) || [];
-      // notify update driver
-      this.notify();
-    }
-    return true;
+    const column = table?.columns.find(
+      (col) => col.columnName.toLowerCase() === normalizedColumnName
+    );
+    return column;
   }
 
   getTable(
     schemaName: string,
     tableName: string
-  ): DataCatalogModelTable | undefined {
+  ): DataCatalogTable | undefined {
     const normalizedSchemaName = schemaName.toLowerCase();
     const normalizedTableName = tableName.toLowerCase();
 
@@ -177,12 +164,57 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     return table;
   }
 
-  getTermDefinitions(): OuterbaseDataCatalogDefinition[] {
+  async updateVirtualJoin(): Promise<boolean> {
+    await this.delay();
+
+    //TODO here
+
+    this.notify();
+    return true;
+  }
+
+  async addVirtualJoin(
+    data: Omit<DataCatalogTableRelationship, "id">
+  ): Promise<DataCatalogTableRelationship> {
+    await this.delay();
+
+    //TODO here
+    this.notify();
+
+    const relation = {
+      ...data,
+      id: nanoid(),
+    };
+    return relation;
+  }
+
+  async deleteVirtualColumn(): Promise<boolean> {
+    this.notify();
+
+    return true;
+  }
+
+  getTermDefinitions(): DataCatalogTermDefinition[] {
     if (!this.definitions) {
       return [];
     }
     return this.definitions;
   }
+  async addTermDefinition(
+    data: Omit<DataCatalogTermDefinition, "id">
+  ): Promise<DataCatalogTermDefinition | undefined> {
+    await this.delay();
+
+    if (!this.definitions) {
+      this.definitions = [];
+    }
+    const definitions = this.definitions;
+    const id = nanoid();
+    definitions.unshift({ ...data, id });
+    this.notify();
+
+    return { ...data, id };
+  }
 
   async updateTermDefinition(
     data: DataCatalogTermDefinition
@@ -199,10 +231,10 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
 
     if (existingIndex !== -1) {
       definitions[existingIndex] = { ...definitions[existingIndex], ...data };
-    } else {
-      definitions.unshift(data as OuterbaseDataCatalogDefinition);
     }
 
+    this.notify();
+
     return data;
   }
 
@@ -210,21 +242,20 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     await this.delay();
     if (!this.definitions) return false;
 
-    const definitions = this.definitions;
-    const initialLength = definitions.length;
+    const dataCatalog = this.definitions;
+    const initialLength = dataCatalog.length;
 
-    this.definitions = definitions.filter((term) => term.id !== id);
-
-    return definitions.length < initialLength;
-  }
+    this.definitions = dataCatalog.filter((term) => term.id !== id);
+    this.notify();
 
-  addEventListener(callback: () => void) {
-    this.subscribers.add(callback);
-    return () => this.removeEventListener(callback);
+    return dataCatalog.length < initialLength;
   }
 
-  removeEventListener(callback: () => void) {
-    this.subscribers.delete(callback);
+  listen(cb: () => void): () => void {
+    this.subscribers.add(cb);
+    return () => {
+      this.subscribers.delete(cb);
+    };
   }
 
   // Notify all subscribers
diff --git a/src/extensions/data-catalog/driver.tsx b/src/extensions/data-catalog/driver.tsx
index fa441e53..bec20326 100644
--- a/src/extensions/data-catalog/driver.tsx
+++ b/src/extensions/data-catalog/driver.tsx
@@ -1,74 +1,98 @@
-import {
-  OuterbaseDataCatalogComment,
-  OuterbaseDataCatalogDefinition,
-  OuterbaseDataCatalogVirtualColumnInput,
-} from "@/outerbase-cloud/api-type";
-
 export interface DataCatalogTermDefinition {
-  id?: string;
+  id: string;
   name: string;
   definition?: string;
   otherNames?: string;
 }
-export interface DataCatalogModelTable {
+
+export interface DataCatalogColumnInput {
+  definition: string;
+  samples: string[];
+  hide: boolean;
+}
+
+export interface DataCatalogColumn extends DataCatalogColumnInput {
   schemaName: string;
   tableName: string;
+  columnName: string;
+}
 
-  virtualJoin: OuterbaseDataCatalogComment[];
-  columns: Record<string, OuterbaseDataCatalogComment>;
-  metadata?: OuterbaseDataCatalogComment;
+export interface DataCatalogTableRelationship {
+  id: string;
+  schemaName: string;
+  tableName: string;
+  columnName: string;
+  referenceTableName: string;
+  referenceColumnName: string;
+  hide: boolean;
+}
+
+export interface DataCatalogTableMetadata extends DataCatalogColumn {
+  alias?: string;
+}
+
+export interface DataCatalogTable {
+  schemaName: string;
+  tableName: string;
+  columns: DataCatalogColumn[];
+  relations: DataCatalogTableRelationship[];
+  metadata?: DataCatalogTableMetadata;
 }
 
 export type DataCatalogSchemas = Record<
   string,
-  Record<string, DataCatalogModelTable>
+  Record<string, DataCatalogTable>
 >;
 
 export default abstract class DataCatalogDriver {
   abstract load(): Promise<{
-    schemas: DataCatalogSchemas;
-    definitions: OuterbaseDataCatalogDefinition[];
+    definitions: DataCatalogTermDefinition[];
   }>;
+
   abstract updateColumn(
     schemaName: string,
     tableName: string,
-    data: OuterbaseDataCatalogVirtualColumnInput,
-    commentId?: string,
-    isVirtual?: boolean
-  ): Promise<OuterbaseDataCatalogComment>;
+    columnName: string,
+    data: DataCatalogColumnInput
+  ): Promise<DataCatalogColumn>;
 
   abstract updateTable(
     schemaName: string,
     tableName: string,
-    data: OuterbaseDataCatalogVirtualColumnInput,
-    commentId?: string
-  ): Promise<DataCatalogModelTable | undefined>;
+    data: DataCatalogTableMetadata
+  ): Promise<DataCatalogTable | undefined>;
 
   abstract getColumn(
     schemaName: string,
     tableName: string,
     columnName: string
-  ): OuterbaseDataCatalogComment | undefined;
+  ): DataCatalogColumn | undefined;
 
   abstract getTable(
     schemaName: string,
     tableName: string
-  ): DataCatalogModelTable | undefined;
+  ): DataCatalogTable | undefined;
+
+  abstract deleteVirtualColumn(id: string): Promise<boolean>;
+
+  abstract addVirtualJoin(
+    data: Omit<DataCatalogTableRelationship, "id">
+  ): Promise<DataCatalogTableRelationship>;
+
+  abstract updateVirtualJoin(
+    data: DataCatalogTableRelationship
+  ): Promise<boolean>;
+
+  abstract addTermDefinition(
+    data: Omit<DataCatalogTermDefinition, "id">
+  ): Promise<DataCatalogTermDefinition | undefined>;
 
   abstract updateTermDefinition(
     data: DataCatalogTermDefinition
   ): Promise<DataCatalogTermDefinition | undefined>;
 
-  abstract getTermDefinitions(): OuterbaseDataCatalogDefinition[];
-
+  abstract getTermDefinitions(): DataCatalogTermDefinition[];
   abstract deleteTermDefinition(id: string): Promise<boolean>;
 
-  abstract deleteVirtualColumn(
-    schemaName: string,
-    tableName: string,
-    id: string
-  ): Promise<boolean>;
-
-  abstract addEventListener(cb: () => void): void;
-  abstract removeEventListener(cb: () => void): void;
+  abstract listen(cb: () => void): () => void;
 }
diff --git a/src/extensions/data-catalog/table-metadata-modal.tsx b/src/extensions/data-catalog/table-metadata-modal.tsx
index 00241ceb..cb4a9c9d 100644
--- a/src/extensions/data-catalog/table-metadata-modal.tsx
+++ b/src/extensions/data-catalog/table-metadata-modal.tsx
@@ -8,88 +8,58 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  OuterbaseDataCatalogComment,
-  OuterbaseDataCatalogVirtualColumnInput,
-} from "@/outerbase-cloud/api-type";
 import { produce } from "immer";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
-import DataCatalogDriver from "./driver";
+import { useDataCatalogContext } from "./data-model-tab";
+import { DataCatalogTableMetadata } from "./driver";
 
 interface DataCatalogTableColumnModalProps {
-  driver: DataCatalogDriver;
   schemaName: string;
   tableName: string;
   onClose: () => void;
-  data?: OuterbaseDataCatalogComment;
-}
-
-interface TableMetadataInput {
-  alias: string;
-  body: string;
-  flags: { isActive: boolean; isVirtualKey: boolean };
-  sample_data: string;
-  schema: string;
-  table: string;
-  unit: string | null;
-  virtual_key_column: string;
-  virtual_key_schema: string;
-  virtual_key_table: string;
+  data?: DataCatalogTableMetadata;
 }
 
-const defaultMetadata: TableMetadataInput = {
-  alias: "",
-  body: "",
-  flags: { isActive: true, isVirtualKey: false },
-  sample_data: "",
-  schema: "",
-  table: "",
-  unit: null,
-  virtual_key_column: "",
-  virtual_key_schema: "",
-  virtual_key_table: "",
-};
 export default function TableMetadataModal({
-  driver,
   schemaName,
   tableName,
   onClose,
   data,
 }: DataCatalogTableColumnModalProps) {
-  const [metadataInput, setMetadataInput] = useState<TableMetadataInput>(() => {
-    if (data) {
+  const { driver } = useDataCatalogContext();
+  const [metadataInput, setMetadataInput] = useState<DataCatalogTableMetadata>(
+    () => {
+      if (data) return data;
       return {
-        alias: data.alias || "",
-        body: data.body,
-        flags: data.flags,
-        sample_data: data.sample_data,
-        schema: data.schema,
-        table: data.table,
-        unit: data.unit,
-        virtual_key_column: "",
-        virtual_key_schema: "",
-        virtual_key_table: "",
+        alias: tableName,
+        definition: "",
+        columnName: "",
+        tableName: tableName,
+        samples: [],
+        schemaName: schemaName,
+        hide: false,
       };
     }
-    return {
-      ...defaultMetadata,
-      alias: tableName,
-    };
-  });
+  );
 
   const [loading, setLoading] = useState(false);
 
   const onSaveUpdateColumn = useCallback(() => {
     setLoading(true);
-    const metaInput = {
-      ...metadataInput,
-      alias: metadataInput.alias || tableName,
-    } as unknown as OuterbaseDataCatalogVirtualColumnInput;
+
     driver
-      .updateTable(schemaName, tableName, metaInput, data?.id)
+      .updateTable(schemaName, tableName, {
+        alias: metadataInput.alias,
+        definition: metadataInput.definition,
+        tableName: tableName,
+        schemaName: schemaName,
+        columnName: metadataInput.columnName,
+        samples: [],
+        hide: true,
+      })
       .then(() => {
-        toast.success(`Metatdata ${data?.id ? "updated" : "created"}`);
+        toast.success(`Metatdata ${data ? "updated" : "created"}`);
       })
       .catch((error) => {
         toast.error(error.message);
@@ -127,12 +97,12 @@ export default function TableMetadataModal({
         <div className="flex flex-col gap-2">
           <Label className="text-sm">Table Description</Label>
           <Textarea
-            value={metadataInput.body}
+            value={metadataInput.definition}
             rows={4}
             onChange={(e) => {
               setMetadataInput((prev) => {
                 return produce(prev, (draft) => {
-                  draft.body = e.target.value;
+                  draft.definition = e.target.value;
                 });
               });
             }}
diff --git a/src/extensions/data-catalog/table-result-header.tsx b/src/extensions/data-catalog/table-result-header.tsx
index 1865aa18..e1e88fd3 100644
--- a/src/extensions/data-catalog/table-result-header.tsx
+++ b/src/extensions/data-catalog/table-result-header.tsx
@@ -1,6 +1,7 @@
+import { Button } from "@/components/orbit/button";
 import { Textarea } from "@/components/ui/textarea";
-import { LucideLoader } from "lucide-react";
 import { useCallback, useState } from "react";
+import { toast } from "sonner";
 import DataCatalogDriver from "./driver";
 
 interface DataCatalogResultHeaderProps {
@@ -17,7 +18,7 @@ export default function DataCatalogResultHeader({
   driver,
 }: DataCatalogResultHeaderProps) {
   const column = driver.getColumn(schemaName, tableName, columnName);
-  const [definition, setDefinition] = useState(() => column?.body ?? "");
+  const [definition, setDefinition] = useState(column?.definition || "");
   const [loading, setLoading] = useState(false);
 
   const onSaveClicked = useCallback(() => {
@@ -25,34 +26,31 @@ export default function DataCatalogResultHeader({
     setLoading(true);
 
     driver
-      .updateColumn(schemaName, tableName, {
-        flags: column.flags,
-        body: definition,
-        column: column.column,
-        sample_data: column.sample_data,
-        schema: column.schema,
-        table: column.table,
-        virtual_key_column: column.virtualKeyColumn,
-        virtual_key_schema: column.virtualKeySchema,
-        virtual_key_table: column.virtualKeyTable,
+      .updateColumn(schemaName, tableName, columnName, {
+        definition,
+        hide: column.hide || false,
+        samples: column.samples,
+      })
+      .then(() => {
+        toast.success("updated");
       })
-      .then()
       .catch()
       .finally(() => setLoading(false));
-  }, [driver, definition, column, schemaName, tableName]);
+  }, [driver, definition, column, columnName, schemaName, tableName]);
 
   return (
     <div className="flex flex-col gap-2 border-b p-2 text-sm">
       <div className="flex items-center justify-between">
-        <h2 className="text-xs font-semibold">Data Catalog</h2>
-        <button
-          className="bg-primary text-primary-foreground flex cursor-pointer items-center rounded p-1 px-3 text-xs"
+        <h2 className="text-base font-semibold">Data Catalog</h2>
+
+        <Button
+          loading={loading}
+          title="Save"
+          shape="base"
+          variant="primary"
+          size="sm"
           onClick={onSaveClicked}
-          disabled={loading}
-        >
-          {loading && <LucideLoader className="mr-1 h-3 w-3 animate-spin" />}
-          Save
-        </button>
+        />
       </div>
 
       <Textarea
diff --git a/src/extensions/data-catalog/term-definition-list.tsx b/src/extensions/data-catalog/term-definition-list.tsx
index 720298bc..70177966 100644
--- a/src/extensions/data-catalog/term-definition-list.tsx
+++ b/src/extensions/data-catalog/term-definition-list.tsx
@@ -1,9 +1,9 @@
-import { OuterbaseDataCatalogDefinition } from "@/outerbase-cloud/api-type";
 import { Edit3 } from "lucide-react";
+import { DataCatalogTermDefinition } from "./driver";
 
 interface Props {
-  onSelect: (item: OuterbaseDataCatalogDefinition) => void;
-  data: OuterbaseDataCatalogDefinition[];
+  onSelect: (item: DataCatalogTermDefinition) => void;
+  data: DataCatalogTermDefinition[];
 }
 export default function TermDefinitionList({ data, onSelect }: Props) {
   return (
diff --git a/src/extensions/data-catalog/virtual-column.tsx b/src/extensions/data-catalog/virtual-column.tsx
index b6520061..da452d82 100644
--- a/src/extensions/data-catalog/virtual-column.tsx
+++ b/src/extensions/data-catalog/virtual-column.tsx
@@ -8,49 +8,56 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
-import { OuterbaseDataCatalogComment } from "@/outerbase-cloud/api-type";
 import { Edit3, LucideMoreHorizontal, Trash } from "lucide-react";
 import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { useDataCatalogContext } from "./data-model-tab";
+import { DataCatalogTableRelationship } from "./driver";
+import { virtualJoinDialog } from "./virtual-join-modal";
 
 interface Props {
-  data: OuterbaseDataCatalogComment;
-  onDeletRelatinship: () => void;
-  onEditRelationship: () => void;
-  onToggleHideFromEzql: (
-    column?: OuterbaseDataCatalogComment,
-    cb?: () => void,
-    isVirtual?: boolean
-  ) => void;
+  data: DataCatalogTableRelationship;
 }
 
-export default function VirtualJoinColumn({
-  data,
-  onToggleHideFromEzql,
-  onEditRelationship,
-  onDeletRelatinship,
-}: Props) {
-  const [isActive, setIsActive] = useState<boolean>(() => {
-    if (data.flags) {
-      return data?.flags.isActive;
-    }
-    return true;
-  });
+export default function VirtualJoinColumn({ data }: Props) {
+  const { driver } = useDataCatalogContext();
+  const [isActive, setIsActive] = useState<boolean>(() => data.hide);
+
+  const onDeletRelationship = useCallback(() => {
+    driver
+      .deleteVirtualColumn(data.id)
+      .catch((error) => toast.error(error.message));
+  }, [driver, data.id]);
 
   const handleClickToggle = useCallback(() => {
-    setIsActive(!isActive);
-    onToggleHideFromEzql(
-      {
-        ...data,
-        flags: {
-          ...data.flags,
-          isActive: !isActive,
-        },
-      },
-      // call me back when you're done
-      () => {},
-      true
-    );
-  }, [data, isActive, onToggleHideFromEzql]);
+    const newActiveState = !isActive;
+
+    setIsActive(newActiveState);
+    const column = {
+      hide: newActiveState,
+      schemaName: data.schemaName,
+      tableName: data.tableName,
+      columnName: data.columnName,
+      referenceTableName: data.referenceTableName,
+      referenceColumnName: data.referenceColumnName,
+    };
+    if (data.id) {
+      driver
+        .updateVirtualJoin({ ...column, id: data.id })
+        .then(() => {
+          toast.success(
+            `${data.columnName} is turned ${isActive ? "off" : "on"}`
+          );
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      driver.addVirtualJoin(column).then(() => {
+        toast.success(`${data.columnName} is turned on`);
+      });
+    }
+  }, [driver, data, isActive]);
 
   return (
     <div
@@ -65,14 +72,13 @@ export default function VirtualJoinColumn({
         Virtual Relationship
       </div>
       <div className="flex w-[150px] items-center p-2 text-base">
-        {data.column}
-      </div>
-      <div className="flex w-[150px] items-center p-2 text-base">
-        {data.virtualKeyTable}
+        {data.referenceColumnName}
       </div>
+
       <div className="flex w-[150px] items-center p-2 text-base">
-        {data.body}
+        {data.referenceTableName}
       </div>
+
       <div className="flex-1" />
       {
         //=================
@@ -86,13 +92,24 @@ export default function VirtualJoinColumn({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="p-2">
-          <DropdownMenuItem className="gap-5" onClick={onEditRelationship}>
+          <DropdownMenuItem
+            className="gap-5"
+            onClick={() => {
+              virtualJoinDialog
+                .show({
+                  driver,
+                  relation: data,
+                })
+                .then()
+                .catch();
+            }}
+          >
             Edit Relationship
             <div className="flex-1" />
             <Edit3 className="h-4 w-4" />
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuItem className="gap-5" onClick={onDeletRelatinship}>
+          <DropdownMenuItem className="gap-5" onClick={onDeletRelationship}>
             Delete Virtual FK
             <div className="flex-1" />
             <Trash className="h-4 w-4" />
diff --git a/src/extensions/data-catalog/virtual-join-modal.tsx b/src/extensions/data-catalog/virtual-join-modal.tsx
index 40f1c993..a4e9179d 100644
--- a/src/extensions/data-catalog/virtual-join-modal.tsx
+++ b/src/extensions/data-catalog/virtual-join-modal.tsx
@@ -1,3 +1,4 @@
+import { createDialog } from "@/components/create-dialog";
 import TableColumnCombobox from "@/components/gui/table-combobox/TableColumnCombobox";
 import TableCombobox from "@/components/gui/table-combobox/TableCombobox";
 import { Button } from "@/components/orbit/button";
@@ -8,97 +9,62 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
-import {
-  OuterbaseDataCatalogComment,
-  OuterbaseDataCatalogVirtualColumnInput,
-} from "@/outerbase-cloud/api-type";
 import { produce } from "immer";
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { defaultVirtualColumn } from "./constant";
-import DataCatalogDriver from "./driver";
+import DataCatalogDriver, { DataCatalogTableRelationship } from "./driver";
 
-interface Props {
-  driver: DataCatalogDriver;
-  schemaName: string;
-  tableName: string;
-  data?: OuterbaseDataCatalogComment;
-  onClose: () => void;
-  onSuccess: () => void;
+interface IRelationship extends Omit<DataCatalogTableRelationship, "id"> {
+  id?: string;
 }
-
-export default function VirtualJoinModal({
-  tableName,
-  schemaName,
-  driver,
-  data,
-  onClose,
-  onSuccess,
-}: Props) {
+export const virtualJoinDialog = createDialog<{
+  driver: DataCatalogDriver;
+  relation: IRelationship;
+}>(({ driver, relation, close }) => {
   const [loading, setLoading] = useState(false);
-  const [virtualColumnInput, setVirtaulColumnInput] =
-    useState<OuterbaseDataCatalogVirtualColumnInput>(() => {
-      if (data) {
-        return {
-          ...data,
-          body: data.body,
-          flags: data.flags,
-          sample_data: data.sample_data,
-          schema: data.schema,
-          table: data.table,
-          virtual_key_column: data.virtualKeyColumn,
-          virtual_key_schema: data.virtualKeySchema,
-          virtual_key_table: data.virtualKeyTable,
-        };
-      } else {
-        return {
-          ...defaultVirtualColumn,
-          schema: schemaName,
-          table: tableName,
-          virtual_key_schema: schemaName,
-        };
-      }
-    });
+  const [value, setValue] = useState<IRelationship>(() =>
+    structuredClone(relation)
+  );
 
   const createUpdateVirtualJoin = useCallback(() => {
-    if (!driver) return;
     setLoading(true);
-    driver
-      .updateColumn(
-        schemaName,
-        tableName,
-        virtualColumnInput,
-        data ? data.id : undefined, // when there is data.ID that mean update column
-        true // make it true for update update virtual column
-      )
-      .then(() => {
-        onSuccess();
-        toast.success(`Virtaul join ${data?.id ? "updated" : "created"}`);
-      })
-      .catch((error) => toast.error(error.message))
-      .finally(() => {
-        setLoading(false);
-        onClose();
-      });
-  }, [
-    driver,
-    schemaName,
-    onSuccess,
-    tableName,
-    virtualColumnInput,
-    data,
-    onClose,
-  ]);
+
+    if (value?.id) {
+      // Update
+      driver
+        .updateVirtualJoin({ ...value, id: value.id })
+        .then(() => {
+          close(undefined);
+          toast.success("Virtaul join updated");
+        })
+        .catch()
+        .finally(() => setLoading(false));
+    } else {
+      // Create
+      driver
+        .addVirtualJoin(value)
+        .then(() => {
+          close(undefined);
+          toast.success("Virtaul join created");
+        })
+        .catch()
+        .finally(() => setLoading(false));
+    }
+  }, [driver, value, close]);
 
   const disabled = useMemo(
-    () => !virtualColumnInput.body || !virtualColumnInput.virtual_key_table,
-    [virtualColumnInput]
+    () =>
+      !value.referenceTableName ||
+      !value.referenceColumnName ||
+      !value.columnName,
+    [value]
   );
+
   return (
     <>
       <DialogHeader>
         <DialogTitle>
-          {data ? "Edit" : "Add Relationship"} to {tableName}
+          {value.id ? "Edit" : "Add Relationship"} to {value.tableName}
         </DialogTitle>
       </DialogHeader>
       <DialogDescription className="text-base">
@@ -112,14 +78,13 @@ export default function VirtualJoinModal({
           <Label>Column</Label>
         </div>
         <TableColumnCombobox
-          value={virtualColumnInput.column}
-          schemaName={schemaName}
-          tableName={tableName}
+          value={value.columnName}
+          schemaName={value.schemaName}
+          tableName={value.tableName}
           onChange={(value) => {
-            setVirtaulColumnInput((prev) =>
+            setValue((prev) =>
               produce(prev, (draft) => {
-                draft.column = value;
-                draft.virtual_key_column = value;
+                draft.columnName = value;
               })
             );
           }}
@@ -130,13 +95,13 @@ export default function VirtualJoinModal({
             <Label>Relationship Table</Label>
           </div>
           <TableCombobox
-            value={virtualColumnInput.virtual_key_table}
-            schemaName={schemaName}
+            value={value.referenceTableName}
+            schemaName={value.schemaName}
             onChange={(value) => {
-              setVirtaulColumnInput((prev) =>
+              setValue((prev) =>
                 produce(prev, (draft) => {
-                  draft.virtual_key_table = value;
-                  draft.body = draft.body !== value ? "" : draft.body;
+                  draft.referenceTableName = value;
+                  draft.referenceColumnName = "";
                 })
               );
             }}
@@ -148,13 +113,13 @@ export default function VirtualJoinModal({
             <Label>Relationship Column</Label>
           </div>
           <TableColumnCombobox
-            value={virtualColumnInput.body}
-            schemaName={schemaName}
-            tableName={virtualColumnInput.virtual_key_table}
+            value={value.referenceColumnName}
+            schemaName={value.schemaName}
+            tableName={value.referenceTableName}
             onChange={(value) => {
-              setVirtaulColumnInput((prev) =>
+              setValue((prev) =>
                 produce(prev, (draft) => {
-                  draft.body = value;
+                  draft.referenceColumnName = value;
                 })
               );
             }}
@@ -168,11 +133,11 @@ export default function VirtualJoinModal({
           variant="secondary"
           disabled={disabled}
           onClick={createUpdateVirtualJoin}
-          title={data ? "Edit Relationship" : "Create Relationship"}
+          title={value.id ? "Edit Relationship" : "Create Relationship"}
         />
 
         <div className="flex-1" />
       </DialogFooter>
     </>
   );
-}
+});
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index 7a61b1ba..188ed288 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -249,13 +249,15 @@ export interface OuterbaseDefinitionInput {
 }
 
 export interface OuterbaseDataCatalogVirtualColumnInput {
+  alias?: string;
   body: string;
   column?: string;
   flags: OuterbaseDataCatalogFlag;
   sample_data: string;
   schema: string;
   table: string;
+  unit?: string | null;
   virtual_key_column?: string;
-  virtual_key_schema: string;
-  virtual_key_table: string;
+  virtual_key_schema?: string;
+  virtual_key_table?: string;
 }
diff --git a/src/outerbase-cloud/data-catalog-driver.ts b/src/outerbase-cloud/data-catalog-driver.ts
index 78282827..fa7f0582 100644
--- a/src/outerbase-cloud/data-catalog-driver.ts
+++ b/src/outerbase-cloud/data-catalog-driver.ts
@@ -1,6 +1,9 @@
 import DataCatalogDriver, {
-  DataCatalogModelTable,
-  DataCatalogSchemas,
+  DataCatalogColumn,
+  DataCatalogColumnInput,
+  DataCatalogTable,
+  DataCatalogTableMetadata,
+  DataCatalogTableRelationship,
   DataCatalogTermDefinition,
 } from "@/extensions/data-catalog/driver";
 import {
@@ -10,7 +13,6 @@ import {
   deleteOuterbaseDefinition,
   getOuterbaseBaseComments,
   getOuterbaseDefinitions,
-  getOuterbaseSchemas,
   updateOuerbaseDefinition,
   updateOuterbaseDataCatalogVirtualColumn,
 } from "./api-data-catalog";
@@ -20,11 +22,10 @@ import {
   OuterbaseDataCatalogDefinition,
   OuterbaseDataCatalogVirtualColumnInput,
 } from "./api-type";
-import { transformOuterbaseSchema } from "./util";
 
 export default class DataCatalogOuterbaseDriver implements DataCatalogDriver {
-  private schemas: DataCatalogSchemas = {};
   private definitions: OuterbaseDataCatalogDefinition[] = [];
+  protected comments: OuterbaseDataCatalogComment[] = [];
   protected config: OuterbaseDatabaseConfig;
   private subscribers: Set<() => void> = new Set();
 
@@ -33,30 +34,25 @@ export default class DataCatalogOuterbaseDriver implements DataCatalogDriver {
   }
 
   async load(): Promise<{
-    schemas: DataCatalogSchemas;
     definitions: OuterbaseDataCatalogDefinition[];
   }> {
     const { sourceId, workspaceId, baseId } = this.config;
-    const [schemas, comments, definition] = await Promise.all([
-      getOuterbaseSchemas(workspaceId, sourceId, baseId),
+    const [comments, definition] = await Promise.all([
       getOuterbaseBaseComments(workspaceId, sourceId, baseId!),
       getOuterbaseDefinitions(workspaceId, baseId!),
     ]);
-    const transformedSchemas = transformOuterbaseSchema(
-      schemas,
-      comments.items
-    );
-    this.schemas = transformedSchemas;
+
     this.definitions = definition.items;
+    this.comments = comments.items;
+
     return {
-      schemas: this.schemas,
       definitions: this.definitions,
     };
   }
 
   private async createUpdateColumn(
-    data: OuterbaseDataCatalogVirtualColumnInput,
-    id?: string
+    id: string | undefined,
+    data: OuterbaseDataCatalogVirtualColumnInput
   ) {
     if (id) {
       return await updateOuterbaseDataCatalogVirtualColumn(
@@ -74,188 +70,308 @@ export default class DataCatalogOuterbaseDriver implements DataCatalogDriver {
     }
   }
 
+  private getCommentById(id: string): OuterbaseDataCatalogComment | undefined {
+    return this.comments.find((c) => c.id === id);
+  }
+
+  private getComment(
+    schemaName: string,
+    tableName: string,
+    columnName: string,
+    isVirtualKey: boolean
+  ): OuterbaseDataCatalogComment | undefined {
+    const normalizedSchemaName = schemaName.toLowerCase();
+    const normalizedTableName = tableName.toLowerCase();
+    const normalizedColumnName = columnName.toLowerCase();
+    if (this.comments.length === 0) return;
+    const comment = this.comments.find(
+      (c) =>
+        c.schema?.toLowerCase() === normalizedSchemaName &&
+        c.table?.toLowerCase() === normalizedTableName &&
+        c.column?.toLowerCase() === normalizedColumnName &&
+        c.flags.isVirtualKey === isVirtualKey
+    );
+
+    return comment;
+  }
+
   async updateColumn(
     schemaName: string,
     tableName: string,
-    data: OuterbaseDataCatalogVirtualColumnInput,
-    commentId?: string,
-    isVirtual?: boolean
-  ): Promise<OuterbaseDataCatalogComment> {
-    const result = await this.createUpdateColumn(data, commentId);
+    columnName: string,
+    data: DataCatalogColumnInput
+  ): Promise<DataCatalogColumn> {
+    // Check if it exists in the outerbase comment
+    const comment = this.getComment(schemaName, tableName, columnName, false);
+    const inputData: OuterbaseDataCatalogVirtualColumnInput = {
+      body: data.definition,
+      column: columnName,
+      schema: schemaName,
+      table: tableName,
+      sample_data: data.samples.join(","),
+      flags: {
+        isActive: data.hide,
+        isVirtualKey: false,
+      },
+      virtual_key_column: "",
+      virtual_key_schema: "",
+      virtual_key_table: "",
+    };
 
+    const result = await this.createUpdateColumn(comment?.id, inputData);
     if (result) {
-      const normalizedSchemaName = schemaName.toLowerCase();
-      const normalizedTableName = tableName.toLowerCase();
-
-      if (
-        this.schemas[normalizedSchemaName] &&
-        this.schemas[normalizedSchemaName][normalizedTableName]
-      ) {
-        const table = this.schemas[normalizedSchemaName][normalizedTableName];
-
-        if (isVirtual) {
-          const index = table.virtualJoin.findIndex(
-            (vc) => vc.id === commentId
-          );
-          if (index > -1) {
-            table.virtualJoin[index] = {
-              ...table.virtualJoin[index],
-              ...result,
-            };
-          } else {
-            table.virtualJoin?.push(result);
-          }
-        } else if (data.column) {
-          table.columns[data.column] = {
-            ...table.columns[data.column],
-            ...result,
-          };
-        }
-        // notify update driver
-        this.notify();
+      const updatedComments = this.comments;
+      const index = updatedComments.findIndex((c) => c.id === comment?.id);
+      if (index > -1) {
+        updatedComments[index] = {
+          ...updatedComments[index],
+          ...result,
+        };
+
+        this.comments = updatedComments;
+      } else {
+        this.comments.unshift(result);
       }
     }
 
-    return result;
+    //notify update driver
+
+    this.notify();
+
+    return {
+      ...data,
+      columnName,
+      tableName,
+      schemaName,
+    };
   }
 
-  async deleteVirtualColumn(
-    schemaName: string,
-    tableName: string,
-    id: string
-  ): Promise<boolean> {
+  async addVirtualJoin(
+    data: Omit<DataCatalogTableRelationship, "id">
+  ): Promise<DataCatalogTableRelationship> {
+    const inputData: OuterbaseDataCatalogVirtualColumnInput = {
+      body: "",
+      column: data.columnName,
+      schema: data.schemaName,
+      table: data.tableName,
+      sample_data: "",
+      flags: {
+        isActive: true,
+        isVirtualKey: true,
+      },
+      virtual_key_column: data.referenceColumnName,
+      virtual_key_schema: data.schemaName,
+      virtual_key_table: data.referenceTableName,
+    };
+    const result = await this.createUpdateColumn(undefined, inputData);
+    if (result) {
+      this.comments.unshift(result);
+      //notify update driver
+      this.notify();
+    }
+    return {
+      id: result.id,
+      schemaName: result.schema,
+      tableName: result.table,
+      columnName: result.column,
+      referenceTableName: result.virtualKeyTable,
+      referenceColumnName: result.virtualKeyColumn,
+      hide: result.flags.isActive,
+    };
+  }
+
+  async deleteVirtualColumn(id: string): Promise<boolean> {
     const success = await deleteOutebaseDataCatalogVirtualColumn(
       this.config.workspaceId,
       this.config.sourceId,
       id
     );
+
     if (success) {
-      const normalizedSchemaName = schemaName.toLowerCase();
-      const normalizedTableName = tableName.toLowerCase();
-
-      if (
-        this.schemas[normalizedSchemaName] &&
-        this.schemas[normalizedSchemaName][normalizedTableName]
-      ) {
-        const table = this.schemas[normalizedSchemaName][normalizedTableName];
-        table.virtualJoin =
-          table.virtualJoin?.filter((vc) => vc.id !== id) || [];
-        // notify update driver
-        this.notify();
-      }
+      const updatedComments = this.comments.filter((c) => c.id !== id);
+      this.comments = updatedComments;
+      //notify update driver
+      this.notify();
     }
 
     return success;
   }
 
-  async updateTable(
-    schemaName: string,
-    tableName: string,
-    data: OuterbaseDataCatalogVirtualColumnInput,
-    commentId: string
-  ): Promise<DataCatalogModelTable | undefined> {
-    const result = await this.createUpdateColumn(data, commentId);
-
-    if (result) {
-      const normalizedSchemaName = schemaName.toLowerCase();
-      const normalizedTableName = tableName.toLowerCase();
-
-      if (!this.schemas[normalizedSchemaName]) {
-        this.schemas[normalizedSchemaName] = {};
-      }
+  async updateVirtualJoin(
+    data: DataCatalogTableRelationship
+  ): Promise<boolean> {
+    const comment = this.getCommentById(data.id);
+    if (!comment) return false;
 
-      const schemas = this.schemas[normalizedSchemaName];
+    const inputData: OuterbaseDataCatalogVirtualColumnInput = {
+      body: comment.body,
+      column: data.columnName,
+      schema: data.schemaName,
+      table: data.tableName,
+      sample_data: comment.sample_data,
+      flags: {
+        isActive: data.hide,
+        isVirtualKey: true,
+      },
+      virtual_key_column: data.referenceColumnName,
+      virtual_key_schema: data.schemaName,
+      virtual_key_table: data.referenceTableName,
+    };
 
-      if (!schemas[normalizedTableName]) {
-        schemas[normalizedTableName] = {
-          schemaName: normalizedSchemaName,
-          tableName: normalizedTableName,
-          columns: {},
-          virtualJoin: [],
+    const result = await this.createUpdateColumn(comment.id, inputData);
+    if (result) {
+      const updatedComments = this.comments;
+      const index = updatedComments.findIndex((c) => c.id === comment.id);
+      if (index > -1) {
+        updatedComments[index] = {
+          ...updatedComments[index],
+          ...result,
         };
+        this.comments = updatedComments;
+      } else {
+        this.comments.unshift(result);
       }
-      const table = schemas[normalizedTableName];
-
-      this.schemas[schemaName][tableName] = {
-        ...table,
-        metadata: result,
-      };
-
+      //notify update driver
       this.notify();
-      return schemas[normalizedTableName];
+      return true;
     }
+
+    return false;
   }
 
-  async updateTermDefinition(
-    data: DataCatalogTermDefinition
-  ): Promise<OuterbaseDataCatalogDefinition | undefined> {
-    if (!data) return;
-    let result;
-    const inputData = {
-      name: data.name,
-      otherNames: data.otherNames,
-      definition: data.definition!,
+  async updateTable(
+    schemaName: string,
+    tableName: string,
+    data: DataCatalogTableMetadata
+  ): Promise<DataCatalogTable | undefined> {
+    const normalizedSchemaName = schemaName.toLowerCase();
+    const normalizedTableName = tableName.toLowerCase();
+    const comment = this.comments.find(
+      (c) =>
+        c.schema?.toLowerCase() === normalizedSchemaName &&
+        c.table?.toLowerCase() === normalizedTableName &&
+        !c.flags.isVirtualKey &&
+        !!c.alias
+    );
+
+    const inputData: OuterbaseDataCatalogVirtualColumnInput = {
+      alias: data.alias,
+      body: data.definition,
+      schema: schemaName,
+      table: tableName,
+      sample_data: data.samples.join(","),
+      flags: {
+        isActive: data.hide,
+        isVirtualKey: false,
+      },
+      virtual_key_column: "",
+      virtual_key_table: "",
+      virtual_key_schema: "",
     };
-    if (data.id) {
-      result = await updateOuerbaseDefinition(
-        this.config.workspaceId,
-        this.config.baseId!,
-        data.id,
-        inputData
-      );
-    } else {
-      result = await createOuterbaseDefinition(
-        this.config.workspaceId,
-        this.config.baseId!,
-        inputData
-      );
-    }
+    const result = await this.createUpdateColumn(comment?.id, inputData);
 
     if (result) {
-      const updatedDefinitions = this.definitions;
-      const index = updatedDefinitions.findIndex((def) => def.id === data.id);
+      const updatedComments = this.comments;
+      const index = updatedComments.findIndex((c) => c.id === comment?.id);
       if (index > -1) {
-        updatedDefinitions[index] = {
-          ...updatedDefinitions[index],
-          ...data,
+        updatedComments[index] = {
+          ...updatedComments[index],
+          ...result,
         };
-        this.definitions = updatedDefinitions;
+        this.comments = updatedComments;
       } else {
-        this.definitions.unshift(result);
+        this.comments.unshift(result);
       }
-      //notify update driver
-      this.notify();
     }
-    return result;
+    const table = this.getTable(schemaName, tableName);
+
+    this.notify();
+    //notify update driver
+
+    return table;
   }
 
   getColumn(
     schemaName: string,
     tableName: string,
     columnName: string
-  ): OuterbaseDataCatalogComment | undefined {
-    const normalizedColumnName = columnName.toLowerCase();
-    const table = this.getTable(schemaName, tableName);
-    return table?.columns[normalizedColumnName];
+  ): DataCatalogColumn | undefined {
+    const comment = this.getComment(schemaName, tableName, columnName, false);
+    if (!comment) return;
+    return {
+      schemaName: comment.schema,
+      tableName: comment.table,
+      columnName: comment.column,
+      definition: comment.body,
+      samples:
+        comment.sample_data && comment.sample_data.trim()
+          ? comment.sample_data.split(",")
+          : [],
+      hide: comment.flags.isActive,
+    };
   }
 
   getTable(
     schemaName: string,
     tableName: string
-  ): DataCatalogModelTable | undefined {
+  ): DataCatalogTable | undefined {
     const normalizedSchemaName = schemaName.toLowerCase();
     const normalizedTableName = tableName.toLowerCase();
+    const columns = this.comments.filter(
+      (c) =>
+        c.schema?.toLowerCase() === normalizedSchemaName &&
+        c.table?.toLowerCase() === normalizedTableName &&
+        !c.flags.isVirtualKey
+    );
 
-    if (!this.schemas[normalizedSchemaName]) {
-      return;
-    }
+    const relations = this.comments.filter(
+      (c) =>
+        c.schema?.toLowerCase() === normalizedSchemaName &&
+        c.table?.toLowerCase() === normalizedTableName &&
+        c.flags?.isVirtualKey
+    );
 
-    const schemas = this.schemas[normalizedSchemaName];
-    if (!schemas[normalizedTableName]) {
-      return;
-    }
+    const metadata = this.comments.find(
+      (c) =>
+        c.schema?.toLowerCase() === normalizedSchemaName &&
+        c.table?.toLowerCase() === normalizedTableName &&
+        !c.flags.isVirtualKey &&
+        !!c.alias
+    );
+
+    const table: DataCatalogTable = {
+      schemaName,
+      tableName,
+      columns: columns.map((c) => ({
+        schemaName: c.schema,
+        tableName: c.table,
+        columnName: c.column,
+        definition: c.body,
+        samples: c.sample_data.split(","),
+        hide: c.flags.isActive,
+      })),
+      relations: relations.map((c) => ({
+        id: c.id,
+        schemaName: c.schema,
+        tableName: c.table,
+        columnName: c.column,
+        referenceTableName: c.virtualKeyTable,
+        referenceColumnName: c.virtualKeyColumn,
+        hide: c.flags.isActive,
+      })),
+      metadata: metadata
+        ? {
+            tableName: metadata.table,
+            alias: metadata.alias || "",
+            definition: metadata.body,
+            columnName: metadata.column,
+            schemaName: metadata.schema,
+            samples: [],
+            hide: false,
+          }
+        : undefined,
+    };
 
-    const table = schemas[normalizedTableName];
     return table;
   }
 
@@ -266,6 +382,60 @@ export default class DataCatalogOuterbaseDriver implements DataCatalogDriver {
     return this.definitions;
   }
 
+  async addTermDefinition(
+    data: Omit<DataCatalogTermDefinition, "id">
+  ): Promise<DataCatalogTermDefinition | undefined> {
+    if (!data) return;
+    const inputData = {
+      name: data.name,
+      otherNames: data.otherNames,
+      definition: data.definition!,
+    };
+
+    const result = await createOuterbaseDefinition(
+      this.config.workspaceId,
+      this.config.baseId!,
+      inputData
+    );
+
+    if (result) {
+      this.definitions.unshift(result);
+      //notify update driver
+      this.notify();
+    }
+    return result;
+  }
+  async updateTermDefinition(
+    data: DataCatalogTermDefinition
+  ): Promise<OuterbaseDataCatalogDefinition | undefined> {
+    if (!data) return;
+    const inputData = {
+      name: data.name,
+      otherNames: data.otherNames,
+      definition: data.definition!,
+    };
+
+    const result = await updateOuerbaseDefinition(
+      this.config.workspaceId,
+      this.config.baseId!,
+      data.id,
+      inputData
+    );
+    if (result) {
+      const updatedDefinitions = this.definitions;
+      const index = updatedDefinitions.findIndex((def) => def.id === data.id);
+      updatedDefinitions[index] = {
+        ...updatedDefinitions[index],
+        ...result,
+      };
+      this.definitions = updatedDefinitions;
+
+      //notify update driver
+      this.notify();
+    }
+    return result;
+  }
+
   async deleteTermDefinition(id: string): Promise<boolean> {
     try {
       await deleteOuterbaseDefinition(
@@ -273,6 +443,7 @@ export default class DataCatalogOuterbaseDriver implements DataCatalogDriver {
         this.config.baseId!,
         id
       );
+
       const newDefinitions = this.definitions.filter((def) => def.id !== id);
       this.definitions = newDefinitions;
       //notify update driver
@@ -283,13 +454,11 @@ export default class DataCatalogOuterbaseDriver implements DataCatalogDriver {
     }
   }
 
-  addEventListener(callback: () => void) {
-    this.subscribers.add(callback);
-    return () => this.removeEventListener(callback);
-  }
-
-  removeEventListener(callback: () => void) {
-    this.subscribers.delete(callback);
+  listen(cb: () => void): () => void {
+    this.subscribers.add(cb);
+    return () => {
+      this.subscribers.delete(cb);
+    };
   }
 
   // Notify all subscribers
diff --git a/src/outerbase-cloud/util.ts b/src/outerbase-cloud/util.ts
deleted file mode 100644
index 13c1f15f..00000000
--- a/src/outerbase-cloud/util.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { DataCatalogSchemas } from "@/extensions/data-catalog/driver";
-import {
-  OuterbaseDataCatalogComment,
-  OuterbaseDataCatalogSchemas,
-} from "./api-type";
-
-export function transformOuterbaseSchema(
-  data: Record<string, OuterbaseDataCatalogSchemas[]>,
-  comments: OuterbaseDataCatalogComment[]
-): DataCatalogSchemas {
-  return Object.keys(data).reduce<DataCatalogSchemas>((acc, key) => {
-    data[key].forEach((schema) => {
-      if (!acc[schema.schema]) {
-        acc[schema.schema] = {};
-      }
-
-      const tableMetadata = comments.find(
-        (c) =>
-          c.schema === schema.schema &&
-          c.table === schema.name &&
-          !c.column &&
-          !c.flags.isVirtualKey
-      );
-
-      acc[schema.schema][schema.name] = {
-        schemaName: schema.schema,
-        tableName: schema.name,
-
-        columns: schema.columns.reduce(
-          (columnsAcc, col) => {
-            const comment = comments.find((c) => {
-              return (
-                c.schema === schema.schema &&
-                c.table === schema.name &&
-                c.column === col.name &&
-                !c.flags.isVirtualKey
-              );
-            });
-
-            if (comment) {
-              columnsAcc[col.name] = comment;
-            }
-
-            return columnsAcc;
-          },
-          {} as Record<string, OuterbaseDataCatalogComment>
-        ),
-
-        virtualJoin: comments.filter(
-          (c) =>
-            c.schema === schema.schema &&
-            c.table === schema.name &&
-            c.flags.isVirtualKey
-        ),
-        metadata: tableMetadata,
-      };
-    });
-
-    return acc;
-  }, {});
-}

From af418756e1c8e0f672b8476c517b0f60325fe852 Mon Sep 17 00:00:00 2001
From: Brayden Wilmoth <brayden.wilmoth@gmail.com>
Date: Fri, 21 Feb 2025 10:06:03 -0500
Subject: [PATCH 078/106] Update table styles (#373)

* Update table styles

* Cell colors
---
 src/app/(outerbase)/nav-board-layout.tsx      |   4 +-
 src/app/(outerbase)/nav-layout.tsx            |   6 +-
 src/app/globals.css                           |  18 +-
 .../gui/export/export-result-button.tsx       |  24 +-
 src/components/gui/query-result-table.tsx     |   6 +-
 src/components/gui/result-stat.tsx            |   6 +-
 src/components/gui/sidebar-tab.tsx            |  30 +-
 .../gui/table-cell/generic-cell.tsx           |  18 +-
 src/components/gui/table-optimized/index.tsx  |   8 +-
 .../gui/table-optimized/table-cell.tsx        |  18 +-
 .../gui/table-optimized/table-header-list.tsx |   6 +-
 .../gui/table-result/filter-column.tsx        |  27 +-
 src/components/gui/tabs/table-data-tab.tsx    | 300 +++++++++---------
 src/components/listview/index.tsx             |   2 +-
 src/components/ui/scroll-area.tsx             |   2 +-
 src/lib/build-table-result.ts                 |   6 +-
 16 files changed, 232 insertions(+), 249 deletions(-)

diff --git a/src/app/(outerbase)/nav-board-layout.tsx b/src/app/(outerbase)/nav-board-layout.tsx
index 7b6a6af4..5bedef3e 100644
--- a/src/app/(outerbase)/nav-board-layout.tsx
+++ b/src/app/(outerbase)/nav-board-layout.tsx
@@ -31,7 +31,7 @@ export default function NavigationDashboardLayout({
 
   return (
     <div className="flex h-screen w-screen">
-      <div className="w-[250px] shrink-0 border-r">
+      <div className="w-[250px] shrink-0 border-r overflow-hidden flex flex-col">
         <div
           className="flex h-12 cursor-pointer items-center gap-2 border-b px-2 text-base font-bold"
           onClick={() => {
@@ -42,7 +42,7 @@ export default function NavigationDashboardLayout({
           <span>{workspaceName}</span>
         </div>
 
-        <div className="flex flex-col pb-2">
+        <div className="flex flex-1 flex-col pb-2 overflow-scroll">
           <SidebarMenuHeader text="Dashboards" />
 
           {(boards ?? []).map((board) => {
diff --git a/src/app/(outerbase)/nav-layout.tsx b/src/app/(outerbase)/nav-layout.tsx
index 77caab7c..de1a5318 100644
--- a/src/app/(outerbase)/nav-layout.tsx
+++ b/src/app/(outerbase)/nav-layout.tsx
@@ -19,7 +19,7 @@ export default function NavigationLayout({ children }: PropsWithChildren) {
 
   return (
     <div className="flex h-screen w-screen">
-      <div className="w-[250px] shrink-0 border-r">
+      <div className="w-[250px] shrink-0 border-r overflow-hidden flex flex-col">
         <div className="px-2 py-2">
           <SidebarProfile />
         </div>
@@ -33,7 +33,7 @@ export default function NavigationLayout({ children }: PropsWithChildren) {
           />
         </div> */}
 
-        <div className="flex flex-col border-b pb-2">
+        <div className="flex flex-1 flex-col border-b pb-2 overflow-scroll">
           <SidebarMenuHeader text="Workspace" />
           <SidebarMenuItem
             selected={pathname === "/local"}
@@ -57,7 +57,7 @@ export default function NavigationLayout({ children }: PropsWithChildren) {
                 }
                 selected={workspace.short_name === workspaceId}
                 badge={
-                  <span className="mr-2 rounded border px-1.5 py-0.5 text-xs">
+                  <span className="mr-2 rounded border border-neutral-200 bg-white px-1.5 py-0.5 text-sm font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200">
                     Free
                   </span>
                 }
diff --git a/src/app/globals.css b/src/app/globals.css
index a68a2010..828d1e89 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -258,7 +258,7 @@
     --primary: black;
     --primary-foreground: white;
 
-    --secondary: #f1f5f9;
+    --secondary: #f5f5f5;
     --secondary-foreground: #444;
 
     --muted: #eee;
@@ -277,7 +277,8 @@
     --radius: 0.5rem;
 
     --selected: #e2e8f0;
-    --scroll-bar: #e2e8f0;
+    --scroll-bar: #d4d4d4;
+    --scroll-bar-hover: #ccc;
   }
 
   .dark {
@@ -314,13 +315,14 @@
 
     --selected: #222;
     --scroll-bar: #353535;
+    --scroll-bar-hover: #444;
   }
 }
 
 @layer utilities {
   ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
   }
 
   /* Track */
@@ -330,12 +332,18 @@
 
   /* Handle */
   ::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 8px;
+  }
+
+  /* Show thumb on container hover */
+  *:hover::-webkit-scrollbar-thumb {
     background: var(--scroll-bar);
   }
 
   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
-    background: var(--scroll-bar);
+    background: var(--scroll-bar-hover);
   }
 }
 
diff --git a/src/components/gui/export/export-result-button.tsx b/src/components/gui/export/export-result-button.tsx
index b70bbef5..7920ebfe 100644
--- a/src/components/gui/export/export-result-button.tsx
+++ b/src/components/gui/export/export-result-button.tsx
@@ -1,9 +1,6 @@
-import { Button, buttonVariants } from "../../ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
-import OptimizeTableState, {
-  TableSelectionRange,
-} from "../table-optimized/OptimizeTableState";
-import { useCallback, useEffect, useMemo, useState } from "react";
+// import { Button, buttonVariants } from "../../ui/button";
+import { Button } from "@/components/orbit/button";
+import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
@@ -12,8 +9,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Label } from "@/components/ui/label";
 import { getFormatHandlers } from "@/lib/export-helper";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+import OptimizeTableState, {
+  TableSelectionRange,
+} from "../table-optimized/OptimizeTableState";
 
 export type ExportTarget = "clipboard" | "file";
 type ExportFormat = "csv" | "delimited" | "json" | "sql" | "xlsx";
@@ -230,12 +231,9 @@ export default function ExportResultButton({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger>
-        <div
-          className={buttonVariants({ variant: "ghost", size: "sm" })}
-          onClick={() => setOpen(!open)}
-        >
-          Export
-        </div>
+        <Button variant={"secondary"} onClick={() => setOpen(!open)}>
+          <div className="text-sm">Export</div>
+        </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0 min-w[550px] w-[550px]">
         <div>
diff --git a/src/components/gui/query-result-table.tsx b/src/components/gui/query-result-table.tsx
index 0f4f716f..1bce90c4 100644
--- a/src/components/gui/query-result-table.tsx
+++ b/src/components/gui/query-result-table.tsx
@@ -52,14 +52,14 @@ function Header({
 
   if (internalState.getSelectedColIndex().includes(colIndex)) {
     if (internalState.isFullSelectionCol(colIndex)) {
-      textClass = "grow line-clamp-1 font-mono font-bold text-white font-bold";
+      textClass = "grow line-clamp-1 font-mono font-bold text-black dark:text-white font-bold";
       thClass =
-        "flex grow items-center px-2 overflow-hidden bg-blue-600 dark:bg-blue-900";
+        "flex grow items-center px-2 overflow-hidden bg-neutral-100 dark:bg-neutral-900";
     } else {
       textClass =
         "grow line-clamp-1 font-mono font-bold dark:text-white font-bold";
       thClass =
-        "flex grow items-center px-2 overflow-hidden bg-blue-200 dark:bg-blue-400";
+        "flex grow items-center px-2 overflow-hidden bg-neutral-100 dark:bg-neutral-900";
     }
   }
 
diff --git a/src/components/gui/result-stat.tsx b/src/components/gui/result-stat.tsx
index 5e6b65ff..97af2927 100644
--- a/src/components/gui/result-stat.tsx
+++ b/src/components/gui/result-stat.tsx
@@ -2,7 +2,7 @@ import { DatabaseResultStat } from "@/drivers/base-driver";
 
 export default function ResultStats({ stats }: { stats: DatabaseResultStat }) {
   return (
-    <div className="text-xs p-2 flex">
+    <div className="text-sm p-2 flex">
       {stats.queryDurationMs !== null && (
         <div className="px-2 border-r">
           <span className="font-semibold">Query Duration</span>:{" "}
@@ -24,8 +24,8 @@ export default function ResultStats({ stats }: { stats: DatabaseResultStat }) {
       )}
 
       {!!stats.rowsAffected && (
-        <div className="px-2 border-r">
-          <span className="font-semibold text-xs">Affected Rows</span>:{" "}
+        <div className="px-2">
+          <span className="font-semibold">Affected Rows</span>:{" "}
           {stats.rowsAffected}
         </div>
       )}
diff --git a/src/components/gui/sidebar-tab.tsx b/src/components/gui/sidebar-tab.tsx
index b8ca106e..72feb877 100644
--- a/src/components/gui/sidebar-tab.tsx
+++ b/src/components/gui/sidebar-tab.tsx
@@ -4,7 +4,7 @@ import { ArrowLeft } from "@phosphor-icons/react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { ReactElement, useMemo, useState } from "react";
+import { ReactElement, useState } from "react";
 import ThemeToggle from "../theme-toggle";
 import {
   DropdownMenu,
@@ -42,36 +42,10 @@ export default function SidebarTab({ tabs }: Readonly<SidebarTabProps>) {
 
   const config = useConfig();
 
-  /**
-   * Adding color to help identify the database.
-   * Some people have multiple databases open at the same time.
-   * This will help them identify the database they are working on.
-   *
-   * https://github.com/outerbase/studio/issues/234
-   */
-  const databaseColorIndicatorClassName = useMemo(() => {
-    if (config.color === "red") {
-      return `border-l-8 border-red-400 dark:border-red-800`;
-    } else if (config.color === "blue") {
-      return `border-l-8 border-blue-400 dark:border-blue-800`;
-    } else if (config.color === "green") {
-      return `border-l-8 border-green-400 dark:border-green-800`;
-    } else if (config.color === "yellow") {
-      return `border-l-8 border-yellow-400 dark:border-yellow-800`;
-    } else if (config.color === "purple") {
-      return `border-l-8 border-purple-400 dark:border-purple-800`;
-    } else if (config.color === "gray") {
-      return `border-l-8 border-gray-400 dark:border-gray-800`;
-    }
-
-    return "";
-  }, [config.color]);
-
   return (
     <div
       className={cn(
-        "flex h-full bg-neutral-50 dark:bg-neutral-950",
-        databaseColorIndicatorClassName
+        "flex h-full bg-neutral-50 dark:bg-neutral-950"
       )}
     >
       <div className={cn("shrink-0")}>
diff --git a/src/components/gui/table-cell/generic-cell.tsx b/src/components/gui/table-cell/generic-cell.tsx
index 1f73d2ac..6c0612d4 100644
--- a/src/components/gui/table-cell/generic-cell.tsx
+++ b/src/components/gui/table-cell/generic-cell.tsx
@@ -1,18 +1,18 @@
-import { useEffect, useMemo, useState } from "react";
-import { isLinkString } from "@/lib/validation";
-import DisplayLinkCell from "./display-link-cell";
-import { cn } from "@/lib/utils";
-import { OptimizeTableHeaderWithIndexProps } from "../table-optimized";
-import { LucideArrowUpRight, LucideLoader } from "lucide-react";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { DatabaseResultSet, DatabaseValue } from "@/drivers/base-driver";
 import { useDatabaseDriver } from "@/context/driver-provider";
+import { DatabaseResultSet, DatabaseValue } from "@/drivers/base-driver";
 import { convertDatabaseValueToString } from "@/drivers/sqlite/sql-helper";
+import { cn } from "@/lib/utils";
+import { isLinkString } from "@/lib/validation";
 import { ColumnType } from "@outerbase/sdk-transform";
+import { LucideArrowUpRight, LucideLoader } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { OptimizeTableHeaderWithIndexProps } from "../table-optimized";
+import DisplayLinkCell from "./display-link-cell";
 
 interface TableCellProps<T = unknown> {
   align?: "left" | "right";
@@ -182,7 +182,7 @@ export default function GenericCell({
   const isAlignRight = align === "right";
 
   const textBaseStyle = cn(
-    "flex grow text-gray-500",
+    "flex grow text-neutral-500",
     isAlignRight ? "justify-end" : ""
   );
 
@@ -225,7 +225,7 @@ export default function GenericCell({
         <span
           className={cn(
             "flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
-            "text-green-600 dark:text-green-500"
+            "text-neutral-950 dark:text-neutral-50"
           )}
         >
           {value}
diff --git a/src/components/gui/table-optimized/index.tsx b/src/components/gui/table-optimized/index.tsx
index b8135a76..cd93330a 100644
--- a/src/components/gui/table-optimized/index.tsx
+++ b/src/components/gui/table-optimized/index.tsx
@@ -145,19 +145,19 @@ function renderCellList({
 
     let textClass =
       "libsql-table-cell flex items-center justify-end h-full pr-2 font-mono";
-    let tdClass = "sticky left-0 bg-zinc-100 dark:bg-zinc-900";
+    let tdClass = "sticky left-0 bg-neutral-50 dark:bg-neutral-950";
 
     if (internalState.getSelectedRowIndex().includes(absoluteRowIndex)) {
       if (internalState.isFullSelectionRow(absoluteRowIndex)) {
         textClass = cn(
           "libsql-table-cell flex items-center justify-end h-full pr-2 font-mono",
-          "bg-blue-600 border-red-900  text-white font-bold"
+          "bg-neutral-100 dark:bg-neutral-900 border-red-900 text-black dark:text-white font-bold"
         );
-        tdClass = "sticky left-0 bg-blue-600 dark:bg-blue-800";
+        tdClass = "sticky left-0 bg-neutral-100 dark:bg-blue-800";
       } else {
         textClass =
           "libsql-table-cell flex items-center justify-end h-full pr-2 font-mono dark:text-white font-bold";
-        tdClass = "sticky left-0 bg-blue-200 dark:bg-blue-400";
+        tdClass = "sticky left-0 bg-neutral-100 dark:bg-neutral-900";
       }
     }
 
diff --git a/src/components/gui/table-optimized/table-cell.tsx b/src/components/gui/table-optimized/table-cell.tsx
index 7ed79ac4..06e946cc 100644
--- a/src/components/gui/table-optimized/table-cell.tsx
+++ b/src/components/gui/table-optimized/table-cell.tsx
@@ -28,20 +28,20 @@ export default function OptimizeTableCell({
     return { zIndex: 15, left: state.gutterColumnWidth + "px" };
   }, [state.gutterColumnWidth, isSticky]);
 
-  let cellBackgroundColor = "bg-background";
+  let cellBackgroundColor = "bg-transparent";
 
   if (isSelected) {
     if (isRemoved) {
       cellBackgroundColor = "bg-red-200 dark:bg-red-800";
     } else if (isChanged) {
-      cellBackgroundColor = "bg-yellow-200 dark:bg-orange-600";
+      cellBackgroundColor = "bg-yellow-200 dark:bg-yellow-600";
     } else if (isNew) {
       cellBackgroundColor = "bg-green-200 dark:bg-green-700";
     } else {
-      cellBackgroundColor = "bg-blue-100 dark:bg-sky-900";
+      cellBackgroundColor = "";
     }
   } else if (isChanged) {
-    cellBackgroundColor = "bg-yellow-100 dark:bg-orange-700";
+    cellBackgroundColor = "bg-[#ffe693] dark:bg-[#916b20]";
   } else if (isNew) {
     cellBackgroundColor = "bg-green-100 dark:bg-green-900";
   } else if (isRemoved) {
@@ -49,11 +49,11 @@ export default function OptimizeTableCell({
   }
 
   const cellClassName = cn(
-    "box-border",
-    isSelected && "border-blue-300 dark:border-blue-500",
-    isBorderBottom && "border-b border-b-blue-500",
-    isBorderRight && "border-r border-r-blue-500",
-    isFocus && "shadow-[0_0_0_1px_rgba(0,0,255,0.5)_inset]",
+    "box-border hover:bg-neutral-100 dark:hover:bg-neutral-800",
+    isSelected && "border-neutral-950 dark:border-neutral-50",
+    isBorderBottom && "border-b border-b-neutral-950 dark:border-b-neutral-50",
+    isBorderRight && "border-r border-r-neutral-950 dark:border-r-neutral-50",
+    isFocus && "shadow-[0_0_0_1px_rgba(0,0,0,0.5)_inset] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.5)_inset]",
     isSticky && "sticky",
     cellBackgroundColor
   );
diff --git a/src/components/gui/table-optimized/table-header-list.tsx b/src/components/gui/table-optimized/table-header-list.tsx
index 73ba192c..5459bd04 100644
--- a/src/components/gui/table-optimized/table-header-list.tsx
+++ b/src/components/gui/table-optimized/table-header-list.tsx
@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 import { OptimizeTableHeaderWithIndexProps } from ".";
-import TableHeader from "./table-header";
 import OptimizeTableState from "./OptimizeTableState";
+import TableHeader from "./table-header";
 
 export default function TableHeaderList({
   headers,
@@ -27,9 +27,9 @@ export default function TableHeaderList({
   return (
     <thead>
       <tr>
-        <th className="sticky left-0 z-30 bg-zinc-100 dark:bg-zinc-900">
+        <th className="sticky left-0 z-30 bg-neutral-50 dark:bg-neutral-950">
           <div className="libsql-table-cell flex h-full items-center justify-end pr-2 font-mono font-bold">
-            #
+            
           </div>
         </th>
         {headers.map((header, idx) => {
diff --git a/src/components/gui/table-result/filter-column.tsx b/src/components/gui/table-result/filter-column.tsx
index e03aa0ed..37e57607 100644
--- a/src/components/gui/table-result/filter-column.tsx
+++ b/src/components/gui/table-result/filter-column.tsx
@@ -1,12 +1,4 @@
-import { useEffect, useState } from "react";
-import OptimizeTableState from "../table-optimized/OptimizeTableState";
-import { Button } from "@/components/ui/button";
-import { Check, ListChecks, LucideSettings2 } from "lucide-react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+// import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandGroup,
@@ -14,7 +6,18 @@ import {
   CommandItem,
   CommandSeparator,
 } from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import { Check, ListChecks, LucideSettings2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import OptimizeTableState from "../table-optimized/OptimizeTableState";
+
+import { Button } from "@/components/orbit/button";
+
 
 export default function useTableResultColumnFilter({
   state,
@@ -36,11 +39,11 @@ export default function useTableResultColumnFilter({
   const filterColumnButton = (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant={"ghost"} size={"sm"}>
-          <LucideSettings2 className="mr-2 h-4 w-4" />
+        <Button variant={"secondary"} size={"sm"} className="ml-[3px] bg-neutral-200 border-neutral-300 dark:bg-neutral-800 dark:border-neutral-700 flex items-center gap-1">
+          <LucideSettings2 className="h-3 w-4" />
           Columns
           {!!columnFilterBadge && (
-            <span className="ml-2 h-4 w-4 rounded-full bg-primary text-[10px] text-primary text-primary-foreground">
+            <span className="h-4 w-4 ml-1 transform-y-[-2px] rounded-[1px] bg-neutral-700 border border-neutral-600 text-[11px] text-secondary text-secondary-foreground">
               {columnFilterBadge}
             </span>
           )}
diff --git a/src/components/gui/tabs/table-data-tab.tsx b/src/components/gui/tabs/table-data-tab.tsx
index baa68ebd..7be96ed5 100644
--- a/src/components/gui/tabs/table-data-tab.tsx
+++ b/src/components/gui/tabs/table-data-tab.tsx
@@ -1,22 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
 import ResultTable from "@/components/gui/query-result-table";
-import { Button } from "@/components/ui/button";
-import {
-  LucideArrowLeft,
-  LucideArrowRight,
-  LucideDelete,
-  LucideFilter,
-  LucidePlus,
-  LucideRefreshCcw,
-  LucideSaveAll,
-} from "lucide-react";
-import { Separator } from "@/components/ui/separator";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { commitChange } from "@/lib/sql/sql-execute-helper";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -24,24 +6,38 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
 } from "@/components/ui/alert-dialog";
+// import { Button } from "@/components/ui/button";
+import { Button } from "@/components/orbit/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useAutoComplete } from "@/context/auto-complete-provider";
+import { useDatabaseDriver } from "@/context/driver-provider";
+import { useSchema } from "@/context/schema-provider";
 import {
   ColumnSortOption,
   DatabaseResultStat,
   DatabaseTableSchema,
 } from "@/drivers/base-driver";
-import { useAutoComplete } from "@/context/auto-complete-provider";
+import { KEY_BINDING } from "@/lib/key-matcher";
+import { commitChange } from "@/lib/sql/sql-execute-helper";
+import { AlertDialogTitle } from "@radix-ui/react-alert-dialog";
+import {
+  LucideArrowLeft,
+  LucideArrowRight,
+  LucideRefreshCcw
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import AggregateResultButton from "../aggregate-result/aggregate-result-button";
+import ExportResultButton from "../export/export-result-button";
 import OpacityLoading from "../loading-opacity";
-import OptimizeTableState from "../table-optimized/OptimizeTableState";
-import { useDatabaseDriver } from "@/context/driver-provider";
 import ResultStats from "../result-stat";
+import OptimizeTableState from "../table-optimized/OptimizeTableState";
 import useTableResultColumnFilter from "../table-result/filter-column";
-import { AlertDialogTitle } from "@radix-ui/react-alert-dialog";
+import { Toolbar } from "../toolbar";
 import { useCurrentTab } from "../windows-tab";
-import { KEY_BINDING } from "@/lib/key-matcher";
-import { Toolbar, ToolbarButton } from "../toolbar";
-import AggregateResultButton from "../aggregate-result/aggregate-result-button";
-import ExportResultButton from "../export/export-result-button";
-import { useSchema } from "@/context/schema-provider";
 
 interface TableDataContentProps {
   tableName: string;
@@ -222,56 +218,27 @@ export default function TableDataWindow({
       )}
       <div className="shrink-0 grow-0 border-b border-neutral-200 py-2 dark:border-neutral-800">
         <Toolbar>
-          <ToolbarButton
-            text="Commit"
-            icon={<LucideSaveAll className="h-4 w-4" />}
-            tooltip={`Commit your changes (${KEY_BINDING.commit.toString()})`}
-            disabled={!changeNumber || isExecuting}
-            loading={isExecuting}
-            onClick={onCommit}
-            badge={changeNumber ? changeNumber.toString() : ""}
-          />
-
-          <ToolbarButton
-            text="Discard Change"
-            tooltip={`Dicard all changes (${KEY_BINDING.discard.toString()})`}
-            destructive
-            disabled={!changeNumber}
-            onClick={onDiscard}
-          />
-
-          <div className="mx-1">
-            <Separator orientation="vertical" />
-          </div>
-
-          {filterColumnButton}
-
-          <div className="mx-1">
-            <Separator orientation="vertical" />
+          <div className="flex flex-1 items-center gap-2 ml-2">
+            <Button
+              variant={"secondary"}
+              onClick={() => setRevision((prev) => prev + 1)}
+              disabled={loading}
+            >
+              <LucideRefreshCcw className="h-4 w-4" />
+            </Button>
+
+            <Button variant={"secondary"} onClick={onNewRow} className="flex items-center gap-1">
+              <div className="text-sm">Add row</div>
+            </Button>
+
+            <Button variant={"secondary"} onClick={onRemoveRow}>
+              <div className="text-sm">Delete row</div>
+            </Button>
           </div>
 
-          <Button variant={"ghost"} size={"sm"} onClick={onNewRow}>
-            <LucidePlus className="h-4 w-4 text-green-600" />
-          </Button>
-
-          <Button variant={"ghost"} size={"sm"} onClick={onRemoveRow}>
-            <LucideDelete className="h-4 w-4 text-red-600" />
-          </Button>
-
-          <Button
-            variant={"ghost"}
-            size={"sm"}
-            onClick={() => setRevision((prev) => prev + 1)}
-            disabled={loading}
-          >
-            <LucideRefreshCcw className="h-4 w-4 text-green-600" />
-          </Button>
-
-          <div className="mx-2 flex grow">
-            <div className="flex w-full items-center overflow-hidden rounded bg-secondary">
-              <div className="flex h-full items-center bg-neutral-200 px-2 text-sm text-gray-500 dark:bg-neutral-800">
-                <LucideFilter className="h-4 w-4 text-black dark:text-white" />
-              </div>
+          <div className="mx-2 flex grow max-w-1/3">
+            <div className="flex w-full items-center overflow-hidden rounded bg-neutral-50 dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800">
+              {filterColumnButton}
               <input
                 type="text"
                 placeholder="eg: id=5"
@@ -282,84 +249,44 @@ export default function TableDataWindow({
                     setWhere(e.currentTarget.value);
                   }
                 }}
-                className="h-full grow bg-inherit p-1 pl-2 pr-2 font-mono text-sm outline-hidden"
+                className="h-full grow p-2 pl-3 pr-2 font-mono text-sm outline-hidden"
               />
             </div>
           </div>
 
-          <div>
-            <Separator orientation="vertical" />
-          </div>
+          <div className="flex-1 flex flex-row-reverse items-center gap-2 mr-2">
+            {/* <ToolbarButton
+              text="Save"
+              // icon={<LucideSaveAll className="h-4 w-4" />}
+              tooltip={`Commit your changes (${KEY_BINDING.commit.toString()})`}
+              disabled={!changeNumber || isExecuting}
+              loading={isExecuting}
+              onClick={onCommit}
+              badge={changeNumber ? changeNumber.toString() : ""}
+            />
 
-          <Button
-            variant={"ghost"}
-            size={"sm"}
-            disabled={finalOffset === 0 || loading}
-            onClick={() => {
-              setFinalOffset(finalOffset - finalLimit);
-              setOffset((finalOffset - finalLimit).toString());
-            }}
-          >
-            <LucideArrowLeft className="h-4 w-4" />
-          </Button>
-
-          <div className="flex gap-2">
-            <Tooltip>
-              <TooltipTrigger>
-                <input
-                  value={limit}
-                  onChange={(e) => setLimit(e.currentTarget.value)}
-                  onBlur={(e) => {
-                    try {
-                      const finalValue = parseInt(e.currentTarget.value);
-                      if (finalValue !== finalLimit) {
-                        setFinalLimit(finalValue);
-                      }
-                    } catch (e) {
-                      setLimit(finalLimit.toString());
-                    }
-                  }}
-                  style={{ width: 50 }}
-                  className="h-full rounded bg-neutral-200 p-1 pl-2 pr-2 text-xs dark:bg-neutral-800"
-                  alt="Limit"
-                />
-              </TooltipTrigger>
-              <TooltipContent>Limit</TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-              <TooltipTrigger>
-                <input
-                  value={offset}
-                  onChange={(e) => setOffset(e.currentTarget.value)}
-                  onBlur={(e) => {
-                    try {
-                      const finalValue = parseInt(e.currentTarget.value);
-                      if (finalValue !== finalOffset) {
-                        setFinalOffset(finalValue);
-                      }
-                    } catch (e) {
-                      setOffset(finalOffset.toString());
-                    }
-                  }}
-                  style={{ width: 50 }}
-                  className="h-full rounded bg-neutral-200 p-1 pl-2 pr-2 text-xs dark:bg-neutral-800"
-                  alt="Offset"
-                />
-              </TooltipTrigger>
-              <TooltipContent>Offset</TooltipContent>
-            </Tooltip>
+            <ToolbarButton
+              text="Discard"
+              tooltip={`Dicard all changes (${KEY_BINDING.discard.toString()})`}
+              destructive
+              disabled={!changeNumber}
+              onClick={onDiscard}
+            /> */}
+            
+
+              { changeNumber ?
+                <>
+                  <Button variant={"primary"} onClick={onCommit} loading={isExecuting} disabled={!changeNumber || isExecuting}>
+                    <div className="text-sm">Save {changeNumber ? changeNumber.toString() : ""} changes</div>
+                  </Button>
+                  
+                  <Button variant={"destructive"} onClick={onDiscard}>
+                    <div className="text-sm">Discard</div>
+                  </Button>
+                </>
+                : <></>
+              }
           </div>
-
-          <Button variant={"ghost"} size={"sm"} disabled={loading}>
-            <LucideArrowRight
-              className="h-4 w-4"
-              onClick={() => {
-                setFinalOffset(finalOffset + finalLimit);
-                setOffset((finalOffset + finalLimit).toString());
-              }}
-            />
-          </Button>
         </Toolbar>
       </div>
       <div className="relative grow overflow-hidden">
@@ -381,16 +308,89 @@ export default function TableDataWindow({
         ) : null}
       </div>
       {stat && data && (
-        <div className="flex shrink-0 justify-between border-t">
-          <div className="flex p-1">
-            <ResultStats stats={stat} />
+        <div className="flex shrink-0 h-12 justify-between border-t">
+          <div className="flex p-1 px-2 items-center">
             <div>
               <ExportResultButton data={data} />
             </div>
+            <ResultStats stats={stat} />
           </div>
           <div className="p-1 pr-3">
             <AggregateResultButton data={data} />
           </div>
+          
+            <div className="flex items-center gap-2 mr-3">
+              <Button
+                variant={"secondary"}
+                size={"sm"}
+                disabled={finalOffset === 0 || loading}
+                onClick={() => {
+                  setFinalOffset(finalOffset - finalLimit);
+                  setOffset((finalOffset - finalLimit).toString());
+                }}
+                style={{ width: 32, height: 32 }}
+              >
+                <LucideArrowLeft className="h-4 w-4" />
+              </Button>
+
+              <div className="flex gap-2">
+                <Tooltip>
+                  <TooltipTrigger>
+                    <input
+                      value={limit}
+                      onChange={(e) => setLimit(e.currentTarget.value)}
+                      onBlur={(e) => {
+                        try {
+                          const finalValue = parseInt(e.currentTarget.value);
+                          if (finalValue !== finalLimit) {
+                            setFinalLimit(finalValue);
+                          }
+                        } catch (e) {
+                          setLimit(finalLimit.toString());
+                        }
+                      }}
+                      style={{ width: 50 }}
+                      className="h-8 rounded bg-neutral-200 p-1 pl-2 pr-2 text-xs dark:bg-neutral-900"
+                      alt="Limit"
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>Limit</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                  <TooltipTrigger>
+                    <input
+                      value={offset}
+                      onChange={(e) => setOffset(e.currentTarget.value)}
+                      onBlur={(e) => {
+                        try {
+                          const finalValue = parseInt(e.currentTarget.value);
+                          if (finalValue !== finalOffset) {
+                            setFinalOffset(finalValue);
+                          }
+                        } catch (e) {
+                          setOffset(finalOffset.toString());
+                        }
+                      }}
+                      style={{ width: 50 }}
+                      className="h-full rounded bg-neutral-200 p-1 pl-2 pr-2 text-xs dark:bg-neutral-900"
+                      alt="Offset"
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>Offset</TooltipContent>
+                </Tooltip>
+              </div>
+
+              <Button variant={"secondary"} size={"sm"} disabled={loading} style={{ width: 32, height: 32 }}>
+                <LucideArrowRight
+                  className="h-4 w-4"
+                  onClick={() => {
+                    setFinalOffset(finalOffset + finalLimit);
+                    setOffset((finalOffset + finalLimit).toString());
+                  }}
+                />
+              </Button>
+            </div>
         </div>
       )}
     </div>
diff --git a/src/components/listview/index.tsx b/src/components/listview/index.tsx
index b5c39d35..687e279c 100644
--- a/src/components/listview/index.tsx
+++ b/src/components/listview/index.tsx
@@ -220,7 +220,7 @@ function renderList<T>(props: ListViewRendererProps<T>): React.ReactElement {
                   {item.progressBarValue && item.progressBarMax && (
                     <div className="text-muted-foreground relative flex h-full w-[50px] items-center">
                       <div
-                        className="h-[20px] rounded-sm border border-gray-200 bg-gray-100 dark:border-gray-700 dark:bg-gray-800"
+                        className="h-[20px] rounded-sm border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800"
                         style={{
                           width:
                             Math.max(
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 32cf968d..37c16bcd 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/src/lib/build-table-result.ts b/src/lib/build-table-result.ts
index 142f5523..579749a6 100644
--- a/src/lib/build-table-result.ts
+++ b/src/lib/build-table-result.ts
@@ -241,13 +241,13 @@ export function pipeColumnIcon(headers: OptimizeTableHeaderProps[]) {
   for (const header of headers) {
     if (header.metadata.isPrimaryKey) {
       header.display.icon = LucideKey;
-      header.display.iconClassName = "text-red-500";
+      header.display.iconClassName = "text-neutral-950 dark:text-neutral-50";
     } else if (header.metadata.referenceTo) {
       header.display.icon = LucideKeySquare;
-      header.display.iconClassName = "text-yellow-500";
+      header.display.iconClassName = "text-neutral-950 dark:text-neutral-50";
     } else if (header.metadata.columnSchema?.constraint?.generatedExpression) {
       header.display.icon = LucideSigma;
-      header.display.iconClassName = "text-blue-500";
+      header.display.iconClassName = "text-neutral-950 dark:text-neutral-50";
     }
   }
 }

From c753ba1fa2268f1ef8cef07367f77846840fd86b Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Fri, 21 Feb 2025 22:57:51 +0700
Subject: [PATCH 079/106] add sqlite playground dropdown

---
 src/app/(outerbase)/local/page.tsx            | 81 ++++++++++++++++---
 .../w/[workspaceId]/[baseId]/page.tsx         |  4 +-
 2 files changed, 73 insertions(+), 12 deletions(-)

diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
index 6a981204..808b5a19 100644
--- a/src/app/(outerbase)/local/page.tsx
+++ b/src/app/(outerbase)/local/page.tsx
@@ -5,7 +5,13 @@ import {
   SavedConnectionLocalStorage,
 } from "@/app/(theme)/connect/saved-connection-storage";
 import { MySQLIcon, SQLiteIcon } from "@/components/icons/outerbase-icon";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { CaretDown } from "@phosphor-icons/react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useMemo } from "react";
 import useSWR from "swr";
@@ -89,18 +95,71 @@ export default function LocalConnectionPage() {
         </div>
 
         <div className="my-4 flex gap-4">
-          <button className="bg-background dark:bg-secondary flex items-center gap-2 rounded-lg border p-4">
-            <SQLiteIcon className="h-10 w-10" />
-            <div className="flex flex-col gap-1 text-left">
-              <span className="text-base font-bold">SQLite Playgorund</span>
-              <span className="text-sm">
-                Launch in-memory SQLite on browser
-              </span>
-            </div>
-            <CaretDown className="ml-4 h-4 w-4" />
-          </button>
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <button className="bg-background dark:bg-secondary flex cursor-pointer items-center gap-2 rounded-lg border p-4">
+                <SQLiteIcon className="h-10 w-10" />
+                <div className="flex flex-col gap-1 text-left">
+                  <span className="text-base font-bold">SQLite Playground</span>
+                  <span className="text-sm">
+                    Launch in-memory SQLite on browser
+                  </span>
+                </div>
+                <CaretDown className="ml-4 h-4 w-4" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="flex w-[500px] flex-col gap-4 p-4"
+              align="start"
+            >
+              <Link
+                href="/playground/client"
+                className="bg-secondary hover:bg-primary hover:text-primary-foreground flex cursor-pointer flex-col gap-2 rounded p-2 py-4 text-base font-bold"
+              >
+                Open Empty SQLite Database
+              </Link>
+
+              <div className="flex gap-4">
+                <Link
+                  href="/playground/client?template=northwind"
+                  className="bg-secondary hover:bg-primary hover:text-primary-foreground flex cursor-pointer flex-col gap-2 rounded p-2 text-left text-base"
+                >
+                  <span className="font-bold">Northwind</span>
+                  <span className="text-sm">
+                    The Northwind Database is a sample business database for
+                    learning SQL queries and database design.
+                  </span>
+                </Link>
+
+                <Link
+                  href="/playground/client?template=chinook"
+                  className="bg-secondary hover:bg-primary hover:text-primary-foreground flex cursor-pointer flex-col gap-2 rounded p-2 text-left text-base"
+                >
+                  <span className="font-bold">Chinook</span>
+                  <span className="text-sm">
+                    The Chinook Database is a sample digital media store
+                    database for learning and practicing SQL queries.
+                  </span>
+                </Link>
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <button
+            className="bg-background dark:bg-secondary flex cursor-pointer items-center gap-2 rounded-lg border p-4"
+            onClick={() => {
+              // Random 8 character alphabeth string
+              const roomName = new Array(8)
+                .fill("a")
+                .map(
+                  () =>
+                    "abcdefghijklmnopqrstuvwxyz"[Math.floor(Math.random() * 26)]
+                )
+                .join("");
 
-          <button className="bg-background dark:bg-secondary flex items-center gap-2 rounded-lg border p-4">
+              router.push(`/playground/mysql/${roomName}`);
+            }}
+          >
             <MySQLIcon className="h-10 w-10" />
             <div className="flex flex-col gap-1 text-left">
               <span className="text-base font-bold">MySQL Playgorund</span>
diff --git a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
index f84b6d50..727c9ad7 100644
--- a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
@@ -24,6 +24,7 @@ export default function OuterbaseSourcePage() {
     workspaceId: string;
     baseId: string;
   }>();
+  const [name, setName] = useState<string>("");
   const [source, setSource] = useState<OuterbaseAPISource>();
 
   useEffect(() => {
@@ -33,6 +34,7 @@ export default function OuterbaseSourcePage() {
     getOuterbaseBase(workspaceId, baseId).then((base) => {
       if (!base) return;
       setSource(base.sources[0]);
+      setName(base.name);
     });
   }, [workspaceId, baseId]);
 
@@ -93,7 +95,7 @@ export default function OuterbaseSourcePage() {
       driver={outerbaseDriver}
       docDriver={savedDocDriver}
       extensions={extensions}
-      name="Storybook Testing"
+      name={name}
     />
   );
 }

From 7b70eb60d017a7dee93ca62733307fe7da36ce93 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 23 Feb 2025 09:44:23 +0700
Subject: [PATCH 080/106] deprecate the old connection editor

---
 src/app/(outerbase)/base-template.tsx         |  58 ++--
 .../local/board/[boardId]/page.tsx            |   8 +-
 .../(outerbase)/local/dialog-base-delete.tsx  |   8 +-
 .../local/edit-base/[baseId]/page.tsx         |  56 ++--
 src/app/(outerbase)/local/hooks.tsx           | 108 +++++-
 .../local/new-base/[driver]/page.tsx          |  25 +-
 src/app/(outerbase)/local/page.tsx            |  28 +-
 .../client/[[...driver]]/page-client.tsx      |  42 ---
 src/app/(theme)/client/[[...driver]]/page.tsx |  10 -
 .../client/s/[[...driver]]/page-client.tsx    |  45 +--
 src/app/(theme)/connect/connection-list.tsx   | 268 ---------------
 .../connect/connection-string-input.tsx       |  98 ------
 src/app/(theme)/connect/driver-dropdown.tsx   | 153 ---------
 src/app/(theme)/connect/page-client.tsx       |  42 ---
 src/app/(theme)/connect/page.tsx              |  20 --
 src/app/(theme)/connect/quick-connect.tsx     |  64 ----
 .../(theme)/connect/saved-connection-card.tsx |  45 ---
 .../connect/saved-connection-config.tsx       | 136 --------
 .../connect/saved-connection-content.tsx      |  43 ---
 .../connect/saved-connection-storage.ts       | 152 +--------
 .../connect/saved-connection-storage.ts.txt   | 315 ++++++++++++++++++
 .../(theme)/connect/saved-connection-type.tsx |  61 ----
 src/app/(theme)/connect/saved-connection.tsx  | 125 -------
 .../(theme)/connect/saved-edit-connection.tsx | 175 ----------
 .../connect/saved-remove-connection.tsx       |  84 -----
 .../(theme)/playground/client/page-client.tsx |  33 +-
 src/components/filehandler-picker.tsx         |  20 +-
 src/drivers/board-source/local.tsx            |   8 +-
 src/drivers/helpers.ts                        |  24 +-
 src/indexdb.ts                                |  12 +-
 tsconfig.json                                 |   8 +-
 31 files changed, 570 insertions(+), 1704 deletions(-)
 delete mode 100644 src/app/(theme)/client/[[...driver]]/page-client.tsx
 delete mode 100644 src/app/(theme)/client/[[...driver]]/page.tsx
 delete mode 100644 src/app/(theme)/connect/connection-list.tsx
 delete mode 100644 src/app/(theme)/connect/connection-string-input.tsx
 delete mode 100644 src/app/(theme)/connect/driver-dropdown.tsx
 delete mode 100644 src/app/(theme)/connect/page-client.tsx
 delete mode 100644 src/app/(theme)/connect/page.tsx
 delete mode 100644 src/app/(theme)/connect/quick-connect.tsx
 delete mode 100644 src/app/(theme)/connect/saved-connection-card.tsx
 delete mode 100644 src/app/(theme)/connect/saved-connection-config.tsx
 delete mode 100644 src/app/(theme)/connect/saved-connection-content.tsx
 create mode 100644 src/app/(theme)/connect/saved-connection-storage.ts.txt
 delete mode 100644 src/app/(theme)/connect/saved-connection-type.tsx
 delete mode 100644 src/app/(theme)/connect/saved-connection.tsx
 delete mode 100644 src/app/(theme)/connect/saved-edit-connection.tsx
 delete mode 100644 src/app/(theme)/connect/saved-remove-connection.tsx

diff --git a/src/app/(outerbase)/base-template.tsx b/src/app/(outerbase)/base-template.tsx
index 9688c549..d3a12af1 100644
--- a/src/app/(outerbase)/base-template.tsx
+++ b/src/app/(outerbase)/base-template.tsx
@@ -8,7 +8,7 @@ import { RQLITE_CONNECTION_TEMPLATE } from "@/components/connection-config-edito
 import { SQLITE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/sqlite";
 import { TURSO_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/turso";
 import { OuterbaseAPISourceInput } from "@/outerbase-cloud/api-type";
-import { SavedConnectionItemConfig } from "../(theme)/connect/saved-connection-storage";
+import { SavedConnectionRawLocalStorage } from "../(theme)/connect/saved-connection-storage";
 
 export interface ConnectionTemplateList<T = any> {
   template: CommonConnectionConfigTemplate;
@@ -18,27 +18,25 @@ export interface ConnectionTemplateList<T = any> {
 
 export const LOCAL_CONNECTION_TEMPLATES: Record<
   string,
-  ConnectionTemplateList<SavedConnectionItemConfig>
+  ConnectionTemplateList<SavedConnectionRawLocalStorage>
 > = {
   "cloudflare-d1": {
     template: CLOUDFLARE_CONNECTION_TEMPLATE,
     from: (value) => {
       return {
         name: value.name,
-        database: value.config.database,
-        token: value.config.token,
-        username: value.config.username,
+        database: value.database,
+        token: value.token,
+        username: value.username,
       };
     },
     to: (value) => {
       return {
         name: value.name,
         driver: "cloudflare-d1",
-        config: {
-          database: value.database,
-          token: value.token,
-          username: value.username,
-        },
+        database: value.database,
+        token: value.token,
+        username: value.username,
       };
     },
   },
@@ -47,18 +45,16 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
     from: (value) => {
       return {
         name: value.name,
-        host: value.config.url,
-        token: value.config.token,
+        host: value.url,
+        token: value.token,
       };
     },
     to: (value) => {
       return {
         name: value.name,
         driver: "turso",
-        config: {
-          url: value.host,
-          token: value.token,
-        },
+        url: value.host,
+        token: value.token,
       };
     },
   },
@@ -67,18 +63,16 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
     from: (value) => {
       return {
         name: value.name,
-        host: value.config.url,
-        token: value.config.token,
+        host: value.url,
+        token: value.token,
       };
     },
     to: (value) => {
       return {
         driver: "starbase",
         name: value.name,
-        config: {
-          url: value.host,
-          token: value.token,
-        },
+        url: value.host,
+        token: value.token,
       };
     },
   },
@@ -87,20 +81,18 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
     from: (value) => {
       return {
         name: value.name,
-        host: value.config.url,
-        username: value.config.username,
-        password: value.config.password,
+        host: value.url,
+        username: value.username,
+        password: value.password,
       };
     },
     to: (value) => {
       return {
         name: value.name,
         driver: "rqlite",
-        config: {
-          url: value.host,
-          username: value.username,
-          password: value.password,
-        },
+        url: value.host,
+        username: value.username,
+        password: value.password,
       };
     },
   },
@@ -109,16 +101,14 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
     from: (value) => {
       return {
         name: value.name,
-        filehandler: value.config.filehandler,
+        filehandler: value.file_handler,
       };
     },
     to: (value) => {
       return {
         name: value.name,
         driver: "sqlite-filehandler",
-        config: {
-          filehandler: value.filehandler,
-        },
+        filehandler: value.filehandler,
       };
     },
   },
diff --git a/src/app/(outerbase)/local/board/[boardId]/page.tsx b/src/app/(outerbase)/local/board/[boardId]/page.tsx
index 1a4abdb0..827459b3 100644
--- a/src/app/(outerbase)/local/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/local/board/[boardId]/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 import NavigationDashboardLayout from "@/app/(outerbase)/nav-board-layout";
-import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
 import Board, { DashboardProps } from "@/components/board";
 import { BoardSourceDriver } from "@/drivers/board-source/base-source";
 import LocalBoardSource from "@/drivers/board-source/local";
@@ -8,7 +7,7 @@ import LocalBoardStorage from "@/drivers/board-storage/local";
 import { LocalDashboardData } from "@/indexdb";
 import { useParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
-import { useLocalDashboardList } from "../../hooks";
+import { getLocalConnectionList, useLocalDashboardList } from "../../hooks";
 
 function LocalBoardWithDataPage({
   initialValue,
@@ -26,8 +25,9 @@ function LocalBoardWithDataPage({
 
   // Loading the local board source
   useEffect(() => {
-    const sources = SavedConnectionLocalStorage.getDetailList();
-    setBoardSources(new LocalBoardSource(sources));
+    getLocalConnectionList().then((sources) => {
+      setBoardSources(new LocalBoardSource(sources.map((s) => s.content)));
+    });
   }, []);
 
   if (!boardSources) return <div>Loading</div>;
diff --git a/src/app/(outerbase)/local/dialog-base-delete.tsx b/src/app/(outerbase)/local/dialog-base-delete.tsx
index 35594fca..848aa6ac 100644
--- a/src/app/(outerbase)/local/dialog-base-delete.tsx
+++ b/src/app/(outerbase)/local/dialog-base-delete.tsx
@@ -1,4 +1,3 @@
-import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
 import CopyableText from "@/components/copyable-text";
 import { createDialog } from "@/components/create-dialog";
 import LabelInput from "@/components/label-input";
@@ -11,6 +10,7 @@ import {
 } from "@/components/ui/dialog";
 import { LucideLoader } from "lucide-react";
 import { useCallback, useState } from "react";
+import { removeLocalConnection } from "./hooks";
 
 export const deleteLocalBaseDialog = createDialog<{
   baseId: string;
@@ -19,13 +19,13 @@ export const deleteLocalBaseDialog = createDialog<{
   const [loading, setLoading] = useState(false);
   const [name, setName] = useState("");
 
-  const deleteClicked = useCallback(() => {
+  const deleteClicked = useCallback(async () => {
     if (name !== baseName) return;
 
     setLoading(true);
-
-    SavedConnectionLocalStorage.remove(baseId);
+    await removeLocalConnection(baseId);
     setLoading(false);
+
     close(undefined);
   }, [name, baseId, close, baseName]);
 
diff --git a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
index 71ac626d..9e4b36fc 100644
--- a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
+++ b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
@@ -3,10 +3,7 @@ import {
   ConnectionTemplateList,
   LOCAL_CONNECTION_TEMPLATES,
 } from "@/app/(outerbase)/base-template";
-import {
-  SavedConnectionItemConfig,
-  SavedConnectionLocalStorage,
-} from "@/app/(theme)/connect/saved-connection-storage";
+import { SavedConnectionRawLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
@@ -15,7 +12,7 @@ import { Button } from "@/components/orbit/button";
 import { ArrowLeft, ArrowRight, FloppyDisk } from "@phosphor-icons/react";
 import { useParams, useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
-import { mutate } from "swr";
+import { getLocalConnection, updateLocalConnection } from "../../hooks";
 
 export default function LocalEditBasePage() {
   const router = useRouter();
@@ -24,50 +21,39 @@ export default function LocalEditBasePage() {
   const [loading, setLoading] = useState(true);
   const [databaseName, setDatabaseName] = useState("");
   const [template, setTemplate] =
-    useState<ConnectionTemplateList<SavedConnectionItemConfig>>();
+    useState<ConnectionTemplateList<SavedConnectionRawLocalStorage>>();
 
-  const onSave = useCallback(() => {
+  const onSave = useCallback(async () => {
     if (!template) return;
-
-    SavedConnectionLocalStorage.update(baseId, template.to(value));
-
-    // Redirect to the connection page
-    mutate("/local/bases");
+    await updateLocalConnection(baseId, template.to(value));
     router.push("/local");
   }, [template, value, router, baseId]);
 
-  const onConnect = useCallback(() => {
+  const onConnect = useCallback(async () => {
     if (!template) return;
-
     setLoading(true);
-    const tmp = SavedConnectionLocalStorage.save({
-      storage: "local",
-      ...template.to(value),
-    });
-
-    // Redirect to the connection page
-    mutate("/local/bases");
+    const tmp = await updateLocalConnection(baseId, template.to(value));
     router.push(
-      tmp.driver === "sqlite-filehandler"
-        ? `/playground/client?s=${tmp.id}`
-        : `/client/s/${tmp.driver ?? "turso"}?p=${tmp.id}`
+      tmp?.content.driver === "sqlite-filehandler"
+        ? `/playground/client?s=${tmp?.content.id}`
+        : `/client/s/${tmp?.content.driver ?? "turso"}?p=${tmp?.content.id}`
     );
-  }, [template, value, router]);
+  }, [template, value, router, baseId]);
 
   // Loading the base
   useEffect(() => {
-    const config = SavedConnectionLocalStorage.get(baseId);
+    getLocalConnection(baseId).then((config) => {
+      if (!config) return;
 
-    if (!config) return;
+      // Check for the template
+      const template = LOCAL_CONNECTION_TEMPLATES[config.content.driver ?? ""];
+      if (!template) return;
 
-    // Check for the template
-    const template = LOCAL_CONNECTION_TEMPLATES[config.driver ?? ""];
-    if (!template) return;
-
-    setDatabaseName(config.name ?? "");
-    setTemplate(template);
-    setValue(template.from(config));
-    setLoading(false);
+      setDatabaseName(config.content.name ?? "");
+      setTemplate(template);
+      setValue(template.from(config.content));
+      setLoading(false);
+    });
   }, [baseId]);
 
   if (loading || !template) return <div>Loading....</div>;
diff --git a/src/app/(outerbase)/local/hooks.tsx b/src/app/(outerbase)/local/hooks.tsx
index e0e66340..f6f4a669 100644
--- a/src/app/(outerbase)/local/hooks.tsx
+++ b/src/app/(outerbase)/local/hooks.tsx
@@ -1,4 +1,6 @@
-import { LocalDashboardData, localDb } from "@/indexdb";
+import { SavedConnectionRawLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
+import { LocalConnectionData, LocalDashboardData, localDb } from "@/indexdb";
+import parseSafeJson from "@/lib/json-safe";
 import useSWR, { mutate } from "swr";
 
 export function useLocalDashboardList() {
@@ -39,3 +41,107 @@ export async function deleteLocalDashboard(boardId: string) {
   await localDb.table("board").delete(boardId);
   mutate("/dashboards/local");
 }
+
+export function useLocalConnectionList() {
+  return useSWR(
+    "/connections/local",
+    async (): Promise<LocalConnectionData[]> => {
+      // Migrate the connection from local storage to indexdb
+      if (localStorage.getItem("connections")) {
+        const legacyList = parseSafeJson<SavedConnectionRawLocalStorage[]>(
+          localStorage.getItem("connections") ?? "[]",
+          []
+        );
+
+        if (legacyList.length) {
+          const list = legacyList.map((conn) => {
+            return {
+              id: conn.id!,
+              content: conn,
+              created_at: Date.now(),
+              updated_at: conn.last_used ?? Date.now(),
+            };
+          });
+
+          try {
+            await localDb.connection.bulkAdd(list);
+          } catch (e) {
+            console.log(e);
+          }
+
+          localStorage.removeItem("connections");
+          return list;
+        }
+
+        localStorage.removeItem("connections");
+      }
+
+      return await localDb.connection.toCollection().toArray();
+    }
+  );
+}
+
+export function useLocalConnection(id: string) {
+  return useSWR(
+    `/connections/local/${id}`,
+    async (): Promise<LocalConnectionData | undefined> => {
+      return await localDb.connection.get(id);
+    },
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      revalidateIfStale: false,
+    }
+  );
+}
+
+export async function removeLocalConnection(id: string) {
+  await localDb.connection.delete(id);
+  mutate("/connections/local");
+}
+
+export async function createLocalConnection(
+  config: SavedConnectionRawLocalStorage
+): Promise<LocalConnectionData> {
+  const id = crypto.randomUUID();
+
+  const data = {
+    id,
+    content: config,
+    created_at: Date.now(),
+    updated_at: Date.now(),
+  };
+
+  await localDb.connection.put(data);
+  mutate("/connections/local");
+
+  return data;
+}
+
+export async function updateLocalConnection(
+  id: string,
+  config: SavedConnectionRawLocalStorage
+) {
+  const oldData = await localDb.connection.get(id);
+  if (!oldData) return;
+
+  const data = {
+    id,
+    content: config,
+    updated_at: Date.now(),
+    created_at: oldData.created_at,
+  };
+
+  await localDb.connection.put(data);
+  mutate("/connections/local");
+
+  return data;
+}
+
+export async function getLocalConnectionList() {
+  return await localDb.connection.toCollection().toArray();
+}
+
+export async function getLocalConnection(id: string) {
+  return await localDb.connection.get(id);
+}
diff --git a/src/app/(outerbase)/local/new-base/[driver]/page.tsx b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
index d5b14283..2e98246e 100644
--- a/src/app/(outerbase)/local/new-base/[driver]/page.tsx
+++ b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { LOCAL_CONNECTION_TEMPLATES } from "@/app/(outerbase)/base-template";
-import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
@@ -12,6 +11,7 @@ import { ArrowLeft, ArrowRight, FloppyDisk } from "@phosphor-icons/react";
 import { useParams, useRouter } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
 import { mutate } from "swr";
+import { createLocalConnection } from "../../hooks";
 
 export default function LocalNewBasePage() {
   const { driver } = useParams<{ driver: string }>();
@@ -23,31 +23,22 @@ export default function LocalNewBasePage() {
     return LOCAL_CONNECTION_TEMPLATES[driver];
   }, [driver]);
 
-  const onSave = useCallback(() => {
+  const onSave = useCallback(async () => {
     setLoading(true);
-    SavedConnectionLocalStorage.save({
-      storage: "local",
-      ...template.to(value),
-    });
-
-    // Redirect to the connection page
-    mutate("/local/bases");
+    await createLocalConnection(template.to(value));
     router.push("/local");
   }, [template, value, router]);
 
-  const onConnect = useCallback(() => {
+  const onConnect = useCallback(async () => {
     setLoading(true);
-    const tmp = SavedConnectionLocalStorage.save({
-      storage: "local",
-      ...template.to(value),
-    });
+    const newConnection = await createLocalConnection(template.to(value));
 
     // Redirect to the connection page
     mutate("/local/bases");
     router.replace(
-      tmp.driver === "sqlite-filehandler"
-        ? `/playground/client?s=${tmp.id}`
-        : `/client/s/${tmp.driver ?? "turso"}?p=${tmp.id}`
+      newConnection.content.driver === "sqlite-filehandler"
+        ? `/playground/client?s=${newConnection.id}`
+        : `/client/s/${newConnection.content.driver ?? "turso"}?p=${newConnection.id}`
     );
   }, [template, value, router]);
 
diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
index 808b5a19..16468b90 100644
--- a/src/app/(outerbase)/local/page.tsx
+++ b/src/app/(outerbase)/local/page.tsx
@@ -1,9 +1,5 @@
 "use client";
 
-import {
-  SavedConnectionItem,
-  SavedConnectionLocalStorage,
-} from "@/app/(theme)/connect/saved-connection-storage";
 import { MySQLIcon, SQLiteIcon } from "@/components/icons/outerbase-icon";
 import {
   DropdownMenu,
@@ -14,38 +10,38 @@ import { CaretDown } from "@phosphor-icons/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useMemo } from "react";
-import useSWR from "swr";
 import NavigationLayout from "../nav-layout";
 import NewResourceButton from "../new-resource-button";
 import { ResourceItemList, ResourceItemProps } from "../resource-item-helper";
 import { deleteLocalBaseDialog } from "./dialog-base-delete";
 import { createLocalBoardDialog } from "./dialog-board-create";
 import { deleteLocalBoardDialog } from "./dialog-board-delete";
-import { useLocalDashboardList } from "./hooks";
+import { useLocalConnectionList, useLocalDashboardList } from "./hooks";
 
 export default function LocalConnectionPage() {
   const router = useRouter();
+
   const {
+    data: localBases,
     isLoading,
-    data: baseResources,
     mutate: refreshBase,
-  } = useSWR("/local/bases", async () => {
-    const tmp = SavedConnectionLocalStorage.getList();
+  } = useLocalConnectionList();
 
-    return tmp.map((conn: SavedConnectionItem) => {
+  const baseResources = useMemo(() => {
+    return (localBases ?? []).map((conn) => {
       return {
         href:
-          conn.driver === "sqlite-filehandler"
+          conn.content.driver === "sqlite-filehandler"
             ? `/playground/client?s=${conn.id}`
-            : `/client/s/${conn.driver ?? "turso"}?p=${conn.id}`,
-        name: conn.name,
-        lastUsed: 0,
+            : `/client/s/${conn.content.driver ?? "turso"}?p=${conn.id}`,
+        name: conn.content.name,
+        lastUsed: conn.updated_at,
         id: conn.id,
-        type: conn.driver,
+        type: conn.content.driver,
         status: "",
       } as ResourceItemProps;
     });
-  });
+  }, [localBases]);
 
   // Getting the board from indexdb
   const { data: dashboardList, mutate: refreshDashboard } =
diff --git a/src/app/(theme)/client/[[...driver]]/page-client.tsx b/src/app/(theme)/client/[[...driver]]/page-client.tsx
deleted file mode 100644
index 5b8d4d47..00000000
--- a/src/app/(theme)/client/[[...driver]]/page-client.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-import RqliteDriver from "@/drivers/rqlite-driver";
-import TursoDriver from "@/drivers/turso-driver";
-import ValtownDriver from "@/drivers/valtown-driver";
-import { useMemo } from "react";
-import {
-  SavedConnectionItemConfigConfig,
-  SupportedDriver,
-} from "../../connect/saved-connection-storage";
-
-import MyStudio from "@/components/my-studio";
-import CloudflareD1Driver from "@/drivers/cloudflare-d1-driver";
-import StarbaseDriver from "@/drivers/starbase-driver";
-
-export default function ClientPageBody() {
-  const driver = useMemo(() => {
-    const config: SavedConnectionItemConfigConfig & {
-      driver: SupportedDriver;
-    } = JSON.parse(sessionStorage.getItem("connection") ?? "{}");
-
-    if (config.driver === "rqlite") {
-      return new RqliteDriver(config.url!, config.username, config.password);
-    } else if (config.driver === "valtown") {
-      return new ValtownDriver(config.token!);
-    } else if (config.driver === "cloudflare-d1") {
-      return new CloudflareD1Driver("/proxy/d1", {
-        Authorization: "Bearer " + (config.token ?? ""),
-        "x-account-id": config.username ?? "",
-        "x-database-id": config.database ?? "",
-      });
-    } else if (config.driver === "starbase") {
-      return new StarbaseDriver("/proxy/starbase", {
-        Authorization: "Bearer " + (config.token ?? ""),
-        "x-starbase-url": config.url ?? "",
-      });
-    }
-
-    return new TursoDriver(config.url!, config.token as string, true);
-  }, []);
-
-  return <MyStudio driver={driver} name="Quick Connect" color="blue" />;
-}
diff --git a/src/app/(theme)/client/[[...driver]]/page.tsx b/src/app/(theme)/client/[[...driver]]/page.tsx
deleted file mode 100644
index 935bee1c..00000000
--- a/src/app/(theme)/client/[[...driver]]/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import ClientOnly from "@/components/client-only";
-import ClientPageBody from "./page-client";
-
-export default function SessionPage() {
-  return (
-    <ClientOnly>
-      <ClientPageBody />
-    </ClientOnly>
-  );
-}
diff --git a/src/app/(theme)/client/s/[[...driver]]/page-client.tsx b/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
index a216f447..b9d5dac7 100644
--- a/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
+++ b/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
@@ -1,49 +1,22 @@
 "use client";
-import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
+import { useLocalConnection } from "@/app/(outerbase)/local/hooks";
 import MyStudio from "@/components/my-studio";
-import CloudflareD1Driver from "@/drivers/cloudflare-d1-driver";
-import RqliteDriver from "@/drivers/rqlite-driver";
+import { createLocalDriver } from "@/drivers/helpers";
 import IndexdbSavedDoc from "@/drivers/saved-doc/indexdb-saved-doc";
-import StarbaseDriver from "@/drivers/starbase-driver";
-import TursoDriver from "@/drivers/turso-driver";
-import ValtownDriver from "@/drivers/valtown-driver";
 import { useSearchParams } from "next/navigation";
 import { useMemo } from "react";
 
 export default function ClientPageBody() {
   const params = useSearchParams();
-  const conn = useMemo(() => {
-    const connectionParams = params.get("p");
-    if (!connectionParams) return null;
-
-    const conn = SavedConnectionLocalStorage.get(connectionParams);
-    return conn;
-  }, [params]);
+  const { data: conn } = useLocalConnection(params.get("p") ?? "");
 
   const driver = useMemo(() => {
     if (!conn) return null;
-    if (conn.driver === "rqlite") {
-      return new RqliteDriver(
-        conn.config.url!,
-        conn.config.username,
-        conn.config.password
-      );
-    } else if (conn.driver === "valtown") {
-      return new ValtownDriver(conn.config.token!);
-    } else if (conn.driver === "cloudflare-d1") {
-      return new CloudflareD1Driver("/proxy/d1", {
-        Authorization: "Bearer " + conn.config.token,
-        "x-account-id": conn.config.username ?? "",
-        "x-database-id": conn.config.database ?? "",
-      });
-    } else if (conn.driver === "starbase") {
-      return new StarbaseDriver("/proxy/starbase", {
-        Authorization: "Bearer " + (conn.config.token ?? ""),
-        "x-starbase-url": conn.config.url ?? "",
-      });
-    }
 
-    return new TursoDriver(conn.config.url!, conn.config.token!, true);
+    const config = conn.content;
+    if (!config) return null;
+
+    return createLocalDriver(config);
   }, [conn]);
 
   const docDriver = useMemo(() => {
@@ -60,8 +33,8 @@ export default function ClientPageBody() {
     <MyStudio
       driver={driver}
       docDriver={docDriver}
-      name={conn.name}
-      color={conn.label ?? "blue"}
+      name={conn?.content.name}
+      color={conn?.content.label ?? "blue"}
     />
   );
 }
diff --git a/src/app/(theme)/connect/connection-list.tsx b/src/app/(theme)/connect/connection-list.tsx
deleted file mode 100644
index d89dde71..00000000
--- a/src/app/(theme)/connect/connection-list.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-"use client";
-import {
-  SavedConnectionItem,
-  SavedConnectionLocalStorage,
-  SupportedDriver,
-} from "@/app/(theme)/connect/saved-connection-storage";
-import { Button } from "@/components/ui/button";
-import { getDatabases } from "@/lib/api/fetch-databases";
-import { cn } from "@/lib/utils";
-import { User } from "lucia";
-import { LucideChevronDown, LucideSearch } from "lucide-react";
-import {
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import DriverDropdown from "./driver-dropdown";
-import QuickConnect from "./quick-connect";
-import SaveConnection from "./saved-connection";
-import ConnectionItemCard from "./saved-connection-card";
-import EditSavedConnection from "./saved-edit-connection";
-import RemoveSavedConnection from "./saved-remove-connection";
-
-function ConnectionListSection({
-  data,
-  name,
-  search,
-  onRemove,
-  onEdit,
-}: Readonly<{
-  search: string;
-  data: SavedConnectionItem[];
-  name?: string;
-  onRemove: Dispatch<SetStateAction<SavedConnectionItem | undefined>>;
-  onEdit: Dispatch<SetStateAction<SavedConnectionItem | undefined>>;
-}>) {
-  const body = useMemo(() => {
-    const filteredData = data.filter((d) =>
-      d.name.toLowerCase().includes(search.toLowerCase())
-    );
-
-    if (filteredData.length === 0)
-      return (
-        <div className="py-4 text-sm">
-          {search
-            ? `There is no record with '${search}'`
-            : "There is no base. Please add new base"}
-        </div>
-      );
-
-    return (
-      <div className={cn("flex flex-wrap gap-4", name ? "mt-4" : "mt-8")}>
-        {filteredData.map((conn) => {
-          return (
-            <ConnectionItemCard
-              key={conn.id}
-              conn={conn}
-              onRemove={() => {
-                onRemove(conn);
-              }}
-              onEdit={() => {
-                onEdit(conn);
-              }}
-            />
-          );
-        })}
-      </div>
-    );
-  }, [name, data, search, onRemove, onEdit]);
-
-  return (
-    <>
-      {name && (
-        <h2 className="text-primary mt-4 text-sm font-semibold">{name}</h2>
-      )}
-      {body}
-    </>
-  );
-}
-
-export default function ConnectionList({
-  user,
-}: Readonly<{ user: User | null }>) {
-  const [search, setSearch] = useState("");
-  const [quickConnect, setQuickConnect] = useState<SupportedDriver | null>(
-    null
-  );
-  const [showAddConnection, setShowAddConnection] =
-    useState<SupportedDriver | null>(null);
-  const [removeConnection, setRemoveConnection] =
-    useState<SavedConnectionItem>();
-  const [editConnection, setEditConnection] = useState<SavedConnectionItem>();
-  const [localSavedConns, setLocalSavedConns] = useState<SavedConnectionItem[]>(
-    []
-  );
-
-  const [remoteSavedConns, setRemoteSavedConns] = useState<
-    SavedConnectionItem[]
-  >([]);
-
-  useEffect(() => {
-    setLocalSavedConns(SavedConnectionLocalStorage.getList());
-    if (user) getDatabases().then((r) => setRemoteSavedConns(r.databases));
-  }, [setLocalSavedConns, setRemoteSavedConns, user]);
-
-  // ---------------------------------------------
-  // Remove the connection handlers
-  // ---------------------------------------------
-  const onRemoveConnectionClose = useCallback(() => {
-    setRemoveConnection(undefined);
-  }, [setRemoveConnection]);
-
-  const onRemoveConnectionComplete = useCallback(
-    (conn: SavedConnectionItem) => {
-      if (conn.storage === "local") {
-        setLocalSavedConns(SavedConnectionLocalStorage.getList());
-      } else {
-        setRemoteSavedConns((prev) => prev.filter((r) => r.id !== conn.id));
-      }
-
-      onRemoveConnectionClose();
-    },
-    [setLocalSavedConns, onRemoveConnectionClose, setRemoteSavedConns]
-  );
-
-  // ---------------------------------------------
-  // Add new connection handlers
-  // ---------------------------------------------
-  const onSaveComplete = useCallback(
-    (savedConn: SavedConnectionItem) => {
-      if (savedConn.storage === "remote") {
-        setRemoteSavedConns((prev) => [savedConn, ...prev]);
-      } else {
-        setLocalSavedConns(SavedConnectionLocalStorage.getList());
-      }
-      setShowAddConnection(null);
-    },
-    [setLocalSavedConns, setRemoteSavedConns, setShowAddConnection]
-  );
-
-  // ---------------------------------------------
-  // Edit connection handlers
-  // ---------------------------------------------
-  const onEditComplete = useCallback(
-    (savedConn: SavedConnectionItem) => {
-      if (savedConn.storage === "remote") {
-        setRemoteSavedConns((prev) =>
-          prev.map((r) => {
-            if (r.id === savedConn.id) return savedConn;
-            return r;
-          })
-        );
-      } else {
-        setLocalSavedConns(SavedConnectionLocalStorage.getList());
-      }
-
-      setEditConnection(undefined);
-    },
-    [setLocalSavedConns, setEditConnection, setRemoteSavedConns]
-  );
-
-  let dialogComponent: JSX.Element | null = null;
-
-  // ---------------------------------------------
-  // Display Part
-  // ---------------------------------------------
-  if (editConnection) {
-    dialogComponent = (
-      <EditSavedConnection
-        onClose={() => {
-          setEditConnection(undefined);
-        }}
-        conn={editConnection}
-        storage={editConnection.storage}
-        onSaveComplete={onEditComplete}
-      />
-    );
-  }
-
-  if (showAddConnection) {
-    dialogComponent = (
-      <SaveConnection
-        driver={showAddConnection}
-        user={user}
-        onClose={() => setShowAddConnection(null)}
-        onSaveComplete={onSaveComplete}
-      />
-    );
-  }
-
-  if (quickConnect) {
-    dialogComponent = (
-      <QuickConnect
-        driver={quickConnect}
-        onClose={() => setQuickConnect(null)}
-      />
-    );
-  }
-
-  if (removeConnection) {
-    dialogComponent = (
-      <RemoveSavedConnection
-        conn={removeConnection}
-        onClose={onRemoveConnectionClose}
-        onRemove={onRemoveConnectionComplete}
-      />
-    );
-  }
-
-  return (
-    <div className="mx-auto flex max-w-[1000px] flex-1 flex-col pb-12">
-      <div className="mt-12 flex gap-2">
-        <h1 className="text-primary flex flex-1 items-center text-xl font-semibold">
-          Bases
-        </h1>
-
-        <div>
-          <div className="bg-background mx-2 flex grow items-center overflow-hidden rounded border">
-            <div className="flex h-full items-center px-2 text-sm">
-              <LucideSearch className="h-4 w-4 text-black dark:text-white" />
-            </div>
-            <input
-              value={search}
-              onChange={(e) => setSearch(e.currentTarget.value)}
-              type="text"
-              className="h-full grow bg-inherit p-2 pr-2 pl-2 text-sm outline-hidden"
-              placeholder="Search base name"
-            />
-          </div>
-        </div>
-
-        <DriverDropdown onSelect={setShowAddConnection}>
-          <Button variant={"default"}>
-            New Connection
-            <LucideChevronDown className="ml-2 h-4 w-4" />
-          </Button>
-        </DriverDropdown>
-
-        <DriverDropdown onSelect={setQuickConnect}>
-          <Button variant={"secondary"}>Quick Connect</Button>
-        </DriverDropdown>
-      </div>
-
-      {dialogComponent}
-
-      <ConnectionListSection
-        name={user ? "Local" : ""}
-        search={search}
-        data={localSavedConns}
-        onRemove={setRemoveConnection}
-        onEdit={setEditConnection}
-      />
-
-      {user && (
-        <ConnectionListSection
-          search={search}
-          name="Remote"
-          data={remoteSavedConns}
-          onRemove={setRemoveConnection}
-          onEdit={setEditConnection}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/src/app/(theme)/connect/connection-string-input.tsx b/src/app/(theme)/connect/connection-string-input.tsx
deleted file mode 100644
index 13afda5b..00000000
--- a/src/app/(theme)/connect/connection-string-input.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Textarea } from "@/components/ui/textarea";
-import {
-  DRIVER_DETAIL,
-  SavedConnectionItemConfigConfig,
-  SupportedDriver,
-} from "./saved-connection-storage";
-import { Input } from "@/components/ui/input";
-import FileHandlerPicker from "@/components/filehandler-picker";
-import { CommonDialogProvider } from "@/components/common-dialog";
-
-export default function ConnectionStringInput({
-  value,
-  onChange,
-  driver,
-  showLockedCredential,
-  autoFocus,
-}: Readonly<{
-  value: SavedConnectionItemConfigConfig;
-  onChange: (value: SavedConnectionItemConfigConfig) => void;
-  driver: SupportedDriver;
-  showLockedCredential?: boolean;
-  autoFocus?: boolean;
-}>) {
-  const driverDetail = DRIVER_DETAIL[driver];
-
-  return (
-    <>
-      {driverDetail.fields.map((field, idx) => {
-        let inputDom = <div></div>;
-        const error = field.invalidate
-          ? field.invalidate(value[field.name] ?? "")
-          : null;
-
-        if (field.type === "text" || field.type === "password") {
-          inputDom = (
-            <Input
-              type={field.type}
-              placeholder={
-                showLockedCredential && !value[field.name]
-                  ? "✱✱✱✱✱✱✱✱✱"
-                  : field.placeholder
-              }
-              className={
-                showLockedCredential && !value[field.name] ? "bg-secondary" : ""
-              }
-              autoFocus={autoFocus && idx === 0}
-              value={value[field.name]}
-              onChange={(e) => {
-                onChange({ ...value, [field.name]: e.currentTarget.value });
-              }}
-            />
-          );
-        } else if (field.type === "textarea") {
-          inputDom = (
-            <Textarea
-              placeholder={
-                showLockedCredential && !value[field.name]
-                  ? "✱✱✱✱✱✱✱✱✱"
-                  : "Token"
-              }
-              className={
-                showLockedCredential && !value[field.name] ? "bg-secondary" : ""
-              }
-              value={value[field.name]}
-              onChange={(e) => {
-                onChange({ ...value, [field.name]: e.currentTarget.value });
-              }}
-            />
-          );
-        } else if (field.type === "filehandler") {
-          inputDom = (
-            <CommonDialogProvider>
-              <FileHandlerPicker
-                value={value[field.name]}
-                onChange={(fileId) => {
-                  onChange({ ...value, [field.name]: fileId });
-                }}
-              />
-            </CommonDialogProvider>
-          );
-        }
-
-        return (
-          <div key={field.name}>
-            <div className="text-xs mb-2 font-semibold">
-              {field.title} {field.required && <span>(*)</span>}
-            </div>
-            {inputDom}
-            {error && <div className="text-xs mt-2 text-red-400">{error}</div>}
-            {field.description && (
-              <div className="text-xs mt-2">{field.description}</div>
-            )}
-          </div>
-        );
-      })}
-    </>
-  );
-}
diff --git a/src/app/(theme)/connect/driver-dropdown.tsx b/src/app/(theme)/connect/driver-dropdown.tsx
deleted file mode 100644
index bf3e5dd6..00000000
--- a/src/app/(theme)/connect/driver-dropdown.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { PropsWithChildren } from "react";
-import { SupportedDriver } from "./saved-connection-storage";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useRouter } from "next/navigation";
-import {
-  CloudflareIcon,
-  MySQLIcon,
-  RqliteIcon,
-  SQLiteIcon,
-  StarbaseIcon,
-  TursoIcon,
-  ValtownIcon,
-} from "@/components/icons/outerbase-icon";
-import Link from "next/link";
-
-interface Props {
-  onSelect: (driver: SupportedDriver) => void;
-}
-
-export default function DriverDropdown({
-  children,
-  onSelect,
-}: PropsWithChildren<Props>) {
-  const router = useRouter();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent className="w-[500px]">
-        <div className="flex">
-          <div className="w-1/2 border-r pr-1">
-            <span className="block text-xs ml-2 mb-2 mt-2 font-semibold text-muted-foreground">
-              SQLite-based Database
-            </span>
-            <div>
-              <DropdownMenuItem
-                onClick={() => {
-                  onSelect("turso");
-                }}
-              >
-                <div className="flex gap-4 px-2 items-center h-8">
-                  <TursoIcon className="w-6 h-6" />
-                  <div className="font-semibold">Turso / LibSQL</div>
-                </div>
-              </DropdownMenuItem>
-
-              <DropdownMenuItem
-                onClick={() => {
-                  onSelect("cloudflare-d1");
-                }}
-              >
-                <div className="flex gap-4 px-2 items-center h-8">
-                  <CloudflareIcon className="w-6 h-6" />
-                  <div>
-                    <div className="font-semibold">Cloudflare D1</div>
-                  </div>
-                </div>
-              </DropdownMenuItem>
-
-              <DropdownMenuItem
-                onClick={() => {
-                  onSelect("rqlite");
-                }}
-              >
-                <div className="flex gap-4 px-2 items-center h-8">
-                  <RqliteIcon className="w-6 h-6" />
-                  <div className="font-semibold">rqlite</div>
-                </div>
-              </DropdownMenuItem>
-
-              <DropdownMenuItem
-                onClick={() => {
-                  onSelect("valtown");
-                }}
-              >
-                <div className="flex gap-4 px-2 items-center h-8">
-                  <ValtownIcon className="w-6 h-6" />
-                  <div className="font-semibold">val.town</div>
-                </div>
-              </DropdownMenuItem>
-
-              <DropdownMenuItem
-                onClick={() => {
-                  onSelect("starbase");
-                }}
-              >
-                <div className="flex gap-4 px-2 items-center h-8">
-                  <StarbaseIcon className="w-6 h-6" />
-                  <div className="font-semibold">StarbaseDB</div>
-                </div>
-              </DropdownMenuItem>
-
-              <DropdownMenuSeparator />
-
-              <DropdownMenuItem
-                onClick={() => {
-                  onSelect("sqlite-filehandler");
-                }}
-              >
-                <div className="flex gap-4 px-2 items-center h-8">
-                  <SQLiteIcon className="w-6 h-6" />
-                  <div>
-                    <div className="font-semibold">SQLite File</div>
-                  </div>
-                </div>
-              </DropdownMenuItem>
-
-              <DropdownMenuItem
-                onClick={() => {
-                  router.push("/playground/client");
-                }}
-              >
-                <div className="flex gap-4 px-2 items-center h-8">
-                  <SQLiteIcon className="w-6 h-6" />
-                  <div>
-                    <div className="font-semibold">Blank SQLite</div>
-                  </div>
-                </div>
-              </DropdownMenuItem>
-            </div>
-          </div>
-
-          <div className="w-1/2 pl-1">
-            <span className="block text-xs ml-2 mb-2 mt-2 font-semibold text-muted-foreground">
-              Other
-            </span>
-
-            <div>
-              <DropdownMenuItem>
-                <Link
-                  className="flex gap-4 px-2 items-center h-8 block"
-                  href="/databases/mysql"
-                  target="_blank"
-                >
-                  <MySQLIcon className="w-6 h-6" />
-                  <div>
-                    <div className="font-semibold">MySQL</div>
-                  </div>
-                </Link>
-              </DropdownMenuItem>
-            </div>
-          </div>
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/src/app/(theme)/connect/page-client.tsx b/src/app/(theme)/connect/page-client.tsx
deleted file mode 100644
index 675c098c..00000000
--- a/src/app/(theme)/connect/page-client.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-import ThemeToggle from "@/components/theme-toggle";
-import { Button } from "@/components/ui/button";
-import { User } from "lucia";
-import Link from "next/link";
-import ConnectionList from "./connection-list";
-
-export default function ConnectBody({ user }: Readonly<{ user: User | null }>) {
-  return (
-    <div className="dark:bg-background min-h-screen w-screen bg-zinc-50">
-      <div className="bg-background sticky top-0 flex border-b p-2">
-        <Link className="flex h-12 w-12 items-center justify-center" href="/">
-          <svg
-            fill="currentColor"
-            viewBox="75 75 350 350"
-            className="h-10 w-10 cursor-pointer text-black dark:text-white"
-          >
-            <path d="M249.51,146.58c-58.7,0-106.45,49.37-106.45,110.04c0,60.68,47.76,110.04,106.45,110.04 c58.7,0,106.46-49.37,106.46-110.04C355.97,195.95,308.21,146.58,249.51,146.58z M289.08,332.41l-0.02,0.04l-0.51,0.65 c-5.55,7.06-12.37,9.35-17.11,10.02c-1.23,0.17-2.5,0.26-3.78,0.26c-12.94,0-25.96-9.09-37.67-26.29 c-9.56-14.05-17.84-32.77-23.32-52.71c-9.78-35.61-8.67-68.08,2.83-82.74c5.56-7.07,12.37-9.35,17.11-10.02 c13.46-1.88,27.16,6.2,39.64,23.41c10.29,14.19,19.22,33.83,25.12,55.32C301,285.35,300.08,317.46,289.08,332.41z"></path>
-          </svg>
-        </Link>
-
-        <div className="flex-1" />
-
-        <div className="mr-2 flex items-center gap-2">
-          <ThemeToggle />
-
-          {user ? (
-            <Link prefetch={false} href="/logout">
-              <Button variant={"secondary"}>Sign Out</Button>
-            </Link>
-          ) : (
-            <Link prefetch={false} href="/login">
-              <Button variant={"secondary"}>Sign In</Button>
-            </Link>
-          )}
-        </div>
-      </div>
-
-      <ConnectionList user={user} />
-    </div>
-  );
-}
diff --git a/src/app/(theme)/connect/page.tsx b/src/app/(theme)/connect/page.tsx
deleted file mode 100644
index 318da86a..00000000
--- a/src/app/(theme)/connect/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Metadata } from "next";
-import { getSessionFromCookie } from "@/lib/auth";
-import ConnectBody from "./page-client";
-import ThemeLayout from "../theme_layout";
-import { WEBSITE_NAME } from "@/const";
-
-export const metadata: Metadata = {
-  title: WEBSITE_NAME,
-  description: WEBSITE_NAME,
-};
-
-export default async function Home() {
-  const { user } = await getSessionFromCookie();
-
-  return (
-    <ThemeLayout>
-      <ConnectBody user={user} />
-    </ThemeLayout>
-  );
-}
diff --git a/src/app/(theme)/connect/quick-connect.tsx b/src/app/(theme)/connect/quick-connect.tsx
deleted file mode 100644
index 69102fd3..00000000
--- a/src/app/(theme)/connect/quick-connect.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Button } from "@/components/ui/button";
-import ConnectionDialogContent from "./saved-connection-content";
-import { useCallback, useMemo, useState } from "react";
-import useConnect from "@/hooks/use-connect";
-import {
-  DRIVER_DETAIL,
-  SavedConnectionItemConfigConfig,
-  SupportedDriver,
-  prefillConnectionString,
-  validateConnectionString,
-} from "./saved-connection-storage";
-import { CloudflareWarning, RqliteInstruction } from "./saved-connection";
-import ConnectionStringInput from "./connection-string-input";
-
-export default function QuickConnect({
-  driver,
-  onClose,
-}: Readonly<{ onClose: () => void; driver: SupportedDriver }>) {
-  const driverDetail = DRIVER_DETAIL[driver ?? "turso"];
-  const [connectionConfig, setConnectionConfig] =
-    useState<SavedConnectionItemConfigConfig>(() =>
-      prefillConnectionString(driverDetail)
-    );
-
-  const connect = useConnect();
-
-  const valid = useMemo(() => {
-    return validateConnectionString(driverDetail, connectionConfig);
-  }, [connectionConfig, driverDetail]);
-
-  const onConnect = useCallback(() => {
-    connect(driver, {
-      token: connectionConfig.token,
-      url: connectionConfig.url,
-      password: connectionConfig.password,
-      username: connectionConfig.username,
-      database: connectionConfig.database,
-    });
-  }, [connect, driver, connectionConfig]);
-
-  return (
-    <ConnectionDialogContent
-      driver={driver}
-      title="Quick Connect"
-      onClose={onClose}
-    >
-      {driver === "rqlite" && <RqliteInstruction />}
-      {driver === "cloudflare-d1" && <CloudflareWarning />}
-
-      <ConnectionStringInput
-        autoFocus
-        driver={driver}
-        onChange={setConnectionConfig}
-        value={connectionConfig}
-      />
-
-      <div className="mt-12 flex gap-4">
-        <Button onClick={onConnect} disabled={!valid}>
-          Connect
-        </Button>
-      </div>
-    </ConnectionDialogContent>
-  );
-}
diff --git a/src/app/(theme)/connect/saved-connection-card.tsx b/src/app/(theme)/connect/saved-connection-card.tsx
deleted file mode 100644
index e8178f65..00000000
--- a/src/app/(theme)/connect/saved-connection-card.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import ResourceCard from "@/components/resource-card";
-import {
-  getDatabaseFriendlyName,
-  getDatabaseIcon,
-  getDatabaseVisual,
-} from "@/components/resource-card/utils";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { LucidePencil, LucideTrash } from "lucide-react";
-import { SavedConnectionItem } from "./saved-connection-storage";
-
-export default function ConnectionItemCard({
-  conn,
-  onEdit,
-  onRemove,
-}: Readonly<{
-  conn: SavedConnectionItem;
-  onEdit: () => void;
-  onRemove: () => void;
-}>) {
-  return (
-    <ResourceCard
-      href={
-        conn.storage === "local"
-          ? conn.driver === "sqlite-filehandler"
-            ? `/playground/client?s=${conn.id}`
-            : `/client/s/${conn.driver ?? "turso"}?p=${conn.id}`
-          : `/client/r?p=${conn.id}`
-      }
-      title={conn.name}
-      subtitle={getDatabaseFriendlyName(conn.driver ?? "")}
-      color={conn.label === "gray" ? "default" : conn.label}
-      icon={getDatabaseIcon(conn.driver ?? "")}
-      visual={getDatabaseVisual(conn.driver ?? "")}
-    >
-      <DropdownMenuItem onClick={onEdit}>
-        <LucidePencil className="mr-2 h-4 w-4" />
-        Edit
-      </DropdownMenuItem>
-      <DropdownMenuItem onClick={onRemove}>
-        <LucideTrash className="mr-2 h-4 w-4" />
-        Remove
-      </DropdownMenuItem>
-    </ResourceCard>
-  );
-}
diff --git a/src/app/(theme)/connect/saved-connection-config.tsx b/src/app/(theme)/connect/saved-connection-config.tsx
deleted file mode 100644
index a244a8dc..00000000
--- a/src/app/(theme)/connect/saved-connection-config.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  CONNECTION_LABEL_COLORS,
-  DRIVER_DETAIL,
-  SavedConnectionItemConfig,
-  SavedConnectionItemConfigConfig,
-  SavedConnectionLabel,
-  SupportedDriver,
-  prefillConnectionString,
-  validateConnectionString,
-} from "@/app/(theme)/connect/saved-connection-storage";
-import { cn } from "@/lib/utils";
-import { useMemo, useState } from "react";
-import { LucideLoader } from "lucide-react";
-import ConnectionStringInput from "./connection-string-input";
-
-interface Props {
-  onSave: (conn: SavedConnectionItemConfig) => void;
-  onClose: () => void;
-  driver: SupportedDriver;
-  initialData?: SavedConnectionItemConfig;
-  loading?: boolean;
-  showLockedCredential?: boolean;
-}
-
-function ColorItem({
-  color,
-  selected,
-  onClick,
-}: Readonly<{ color: string; selected: boolean; onClick: () => void }>) {
-  const className = cn(
-    color,
-    selected ? "border-black" : "border-gray-300",
-    "w-8 h-8 cursor-pointer rounded border-2"
-  );
-
-  return <div className={className} onClick={onClick}></div>;
-}
-
-export default function SavedConnectionConfig({
-  onSave,
-  onClose,
-  driver,
-  showLockedCredential,
-  initialData,
-  loading,
-}: Readonly<Props>) {
-  const driverDetail = DRIVER_DETAIL[driver ?? "turso"];
-  const [name, setName] = useState(initialData?.name ?? "");
-  const [description, setDescription] = useState(
-    initialData?.description ?? ""
-  );
-  const [color, setColor] = useState<SavedConnectionLabel>(
-    initialData?.label ?? "gray"
-  );
-
-  const [connectionString, setConnectionString] =
-    useState<SavedConnectionItemConfigConfig>(() =>
-      prefillConnectionString(driverDetail, initialData?.config)
-    );
-
-  const onSaveClicked = () => {
-    onSave({
-      label: color,
-      name,
-      description,
-      driver,
-      config: connectionString,
-    });
-  };
-
-  const valid = useMemo(() => {
-    return validateConnectionString(driverDetail, connectionString);
-  }, [connectionString, driverDetail]);
-
-  return (
-    <>
-      <div>
-        <div className="text-xs mb-2">Name</div>
-        <Input
-          autoFocus
-          placeholder="Name"
-          value={name}
-          onChange={(e) => setName(e.currentTarget.value)}
-        />
-      </div>
-
-      <div>
-        <div className="text-xs mb-2">Description (Optional)</div>
-        <Textarea
-          placeholder="Description"
-          value={description}
-          onChange={(e) => setDescription(e.currentTarget.value)}
-        />
-      </div>
-
-      <div className="flex gap-2">
-        {Object.entries(CONNECTION_LABEL_COLORS).map(
-          ([labelColor, colorClassName]) => {
-            return (
-              <ColorItem
-                onClick={() => setColor(labelColor as SavedConnectionLabel)}
-                color={colorClassName}
-                key={labelColor}
-                selected={color === labelColor}
-              />
-            );
-          }
-        )}
-      </div>
-
-      <Separator />
-
-      <ConnectionStringInput
-        driver={driver}
-        onChange={setConnectionString}
-        value={connectionString}
-        showLockedCredential={showLockedCredential}
-      />
-
-      <div className="mt-12 flex gap-2">
-        <Button onClick={onSaveClicked} disabled={loading || !valid}>
-          {loading && <LucideLoader className="w-4 h-4 mr-2 animate-spin" />}
-          Save
-        </Button>
-
-        <Button onClick={onClose} variant={"secondary"}>
-          Close
-        </Button>
-      </div>
-    </>
-  );
-}
diff --git a/src/app/(theme)/connect/saved-connection-content.tsx b/src/app/(theme)/connect/saved-connection-content.tsx
deleted file mode 100644
index 08c33b31..00000000
--- a/src/app/(theme)/connect/saved-connection-content.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { PropsWithChildren } from "react";
-import { DRIVER_DETAIL, SupportedDriver } from "./saved-connection-storage";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
-export default function ConnectionDialogContent({
-  children,
-  title,
-  driver,
-  onClose,
-}: Readonly<
-  PropsWithChildren<{
-    title: string;
-    onClose: () => void;
-    driver: SupportedDriver;
-  }>
->) {
-  const DatabaseIcon = DRIVER_DETAIL[driver ?? "turso"].icon;
-
-  return (
-    <Dialog
-      open
-      onOpenChange={(open) => {
-        if (!open) return onClose();
-      }}
-    >
-      <DialogContent className="lg:min-w-[600px] xl:min-w-[600px]">
-        <DialogTitle>
-          <div className="flex gap-2 items-center h-8">
-            <DatabaseIcon className="w-8 h-8" />
-            <div className="flex flex-1 items-center">{title}</div>
-          </div>
-        </DialogTitle>
-        <DialogDescription />
-        <div className="flex flex-col gap-4 text-foreground">{children}</div>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/app/(theme)/connect/saved-connection-storage.ts b/src/app/(theme)/connect/saved-connection-storage.ts
index 15aef321..6a79cc00 100644
--- a/src/app/(theme)/connect/saved-connection-storage.ts
+++ b/src/app/(theme)/connect/saved-connection-storage.ts
@@ -7,7 +7,6 @@ import {
   ValtownIcon,
 } from "@/components/icons/outerbase-icon";
 import { ApiUser } from "@/lib/api/api-database-response";
-import parseSafeJson from "@/lib/json-safe";
 import { FunctionComponent } from "react";
 
 export interface DriverDetailField {
@@ -299,152 +298,17 @@ export type SavedConnectionItemDetail = {
   id: string;
 } & SavedConnectionItemWithoutId;
 
-interface SavedConnectionRawLocalStorage {
-  id: string;
+export interface SavedConnectionRawLocalStorage {
+  id?: string;
   name: string;
-  url: string;
-  token: string;
-  username: string;
-  password: string;
-  database: string;
+  url?: string;
+  token?: string;
+  username?: string;
+  password?: string;
+  database?: string;
   driver?: SupportedDriver;
   label?: SavedConnectionLabel;
   file_handler?: string;
   description?: string;
-  last_used: number;
-}
-
-function configToRaw(
-  id: string,
-  data: SavedConnectionItemConfig
-): SavedConnectionRawLocalStorage {
-  return {
-    id,
-    name: data.name,
-    driver: data.driver ?? "turso",
-    url: data.config?.url ?? "",
-    token: data.config?.token ?? "",
-    file_handler: data.config?.filehandler,
-    username: data.config?.username ?? "",
-    password: data.config?.password ?? "",
-    database: data.config?.database ?? "",
-    label: data.label,
-    last_used: Date.now(),
-    description: data.description ?? "",
-  };
-}
-
-function mapRaw(data: SavedConnectionRawLocalStorage): SavedConnectionItem {
-  return {
-    storage: "local",
-    label: data.label,
-    driver: data.driver ?? "turso",
-    id: data.id,
-    name: data.name,
-    description: data.description ?? "",
-  };
-}
-
-function mapDetailRaw(
-  data: SavedConnectionRawLocalStorage
-): SavedConnectionItemDetail {
-  return {
-    storage: "local",
-    id: data.id,
-    driver: data.driver,
-    name: data.name,
-    description: data.description,
-    label: data.label,
-    config: {
-      token: data.token,
-      url: data.url,
-      password: data.password,
-      username: data.username,
-      database: data.database,
-      filehandler: data.file_handler,
-    },
-  };
-}
-
-function getAllConnections() {
-  return parseSafeJson<SavedConnectionRawLocalStorage[]>(
-    localStorage.getItem("connections"),
-    []
-  );
-}
-
-export class SavedConnectionLocalStorage {
-  static getList(): SavedConnectionItem[] {
-    return parseSafeJson<SavedConnectionRawLocalStorage[]>(
-      localStorage.getItem("connections"),
-      []
-    ).map(mapRaw);
-  }
-
-  static getDetailList(): SavedConnectionItemDetail[] {
-    return parseSafeJson<SavedConnectionRawLocalStorage[]>(
-      localStorage.getItem("connections"),
-      []
-    ).map(mapDetailRaw);
-  }
-
-  static remove(id: string) {
-    const tmp = getAllConnections().filter((conn) => conn.id !== id);
-    localStorage.setItem("connections", JSON.stringify(tmp));
-  }
-
-  static update(
-    id: string,
-    data: SavedConnectionItemConfig
-  ): SavedConnectionItem {
-    const tmp = getAllConnections().map((t) => {
-      if (t.id === id) {
-        return configToRaw(id, data);
-      }
-
-      return t;
-    });
-
-    localStorage.setItem("connections", JSON.stringify(tmp));
-
-    return {
-      id,
-      name: data.name,
-      storage: "local",
-      description: data.description,
-      label: data.label,
-    };
-  }
-
-  static save(conn: SavedConnectionItemWithoutId): SavedConnectionItem {
-    const uuid = crypto.randomUUID();
-    const previousConnList = getAllConnections();
-
-    localStorage.setItem(
-      "connections",
-      JSON.stringify([
-        configToRaw(uuid, conn),
-        ...previousConnList,
-      ] as SavedConnectionRawLocalStorage[])
-    );
-
-    return {
-      id: uuid,
-      name: conn.name,
-      driver: conn.driver,
-      storage: "local",
-      description: conn.description,
-      label: conn.label,
-    };
-  }
-
-  static get(id: string) {
-    const found = parseSafeJson<SavedConnectionRawLocalStorage[]>(
-      localStorage.getItem("connections"),
-      []
-    ).find((raw) => raw.id === id);
-
-    if (found) return mapDetailRaw(found);
-    return null;
-  }
+  last_used?: number;
 }
diff --git a/src/app/(theme)/connect/saved-connection-storage.ts.txt b/src/app/(theme)/connect/saved-connection-storage.ts.txt
new file mode 100644
index 00000000..1cf1d186
--- /dev/null
+++ b/src/app/(theme)/connect/saved-connection-storage.ts.txt
@@ -0,0 +1,315 @@
+import {
+  CloudflareIcon,
+  RqliteIcon,
+  SQLiteIcon,
+  StarbaseIcon,
+  TursoIcon,
+  ValtownIcon,
+} from "@/components/icons/outerbase-icon";
+import { ApiUser } from "@/lib/api/api-database-response";
+import { FunctionComponent } from "react";
+
+export interface DriverDetailField {
+  name: keyof SavedConnectionItemConfigConfig;
+  type: "text" | "textarea" | "password" | "filehandler";
+  secret?: boolean;
+  required?: boolean;
+  title?: string;
+  placeholder?: string;
+  description?: string;
+  prefill?: string;
+  invalidate?: (value: string) => string | null;
+}
+
+export interface DriverDetail {
+  displayName: string;
+  name: string;
+  icon: FunctionComponent<{ className: string }>;
+  disableRemote?: boolean;
+  fields: DriverDetailField[];
+}
+
+export const DRIVER_DETAIL: Record<SupportedDriver, DriverDetail> =
+  Object.freeze({
+    "sqlite-filehandler": {
+      displayName: "SQLite",
+      name: "sqlite-filehandler",
+      icon: SQLiteIcon,
+      disableRemote: true,
+      fields: [
+        {
+          name: "filehandler",
+          required: true,
+          type: "filehandler",
+          title: "File",
+          description: "",
+        },
+      ],
+    },
+    turso: {
+      name: "turso",
+      displayName: "Turso",
+      icon: TursoIcon,
+      fields: [
+        {
+          name: "url",
+          required: true,
+          type: "text",
+          title: "URL",
+          description: "Example: libsql://example.turso.io",
+          invalidate: (url: string): null | string => {
+            const trimmedUrl = url.trim();
+            const valid =
+              trimmedUrl.startsWith("https://") ||
+              trimmedUrl.startsWith("http://") ||
+              trimmedUrl.startsWith("ws://") ||
+              trimmedUrl.startsWith("wss://") ||
+              trimmedUrl.startsWith("libsql://");
+
+            if (!valid) {
+              return "Endpoint must start with libsql://, https://, http://, wss:// or ws://";
+            }
+
+            return null;
+          },
+        },
+        { name: "token", title: "Token", type: "textarea", secret: true },
+      ],
+    },
+    valtown: {
+      name: "valtown",
+      displayName: "Valtown",
+      icon: ValtownIcon,
+      prefill: "",
+      fields: [
+        {
+          name: "token",
+          title: "API Token",
+          required: true,
+          type: "text",
+          secret: true,
+        },
+      ],
+    },
+    starbase: {
+      name: "starbase",
+      displayName: "StarbaseDB",
+      icon: StarbaseIcon,
+      disableRemote: true,
+      prefill: "",
+      fields: [
+        {
+          name: "url",
+          title: "Endpoint",
+          required: true,
+          type: "text",
+          secret: false,
+          invalidate: (url: string): null | string => {
+            const trimmedUrl = url.trim();
+            const valid =
+              trimmedUrl.startsWith("https://") ||
+              trimmedUrl.startsWith("http://");
+
+            if (!valid) {
+              return "Endpoint must start with https:// or http://";
+            }
+
+            return null;
+          },
+        },
+        {
+          name: "token",
+          title: "API Token",
+          required: true,
+          type: "text",
+          secret: true,
+        },
+      ],
+    },
+    "cloudflare-d1": {
+      name: "cloudflare-d1",
+      displayName: "Cloudflare D1",
+      icon: CloudflareIcon,
+      fields: [
+        {
+          name: "username",
+          type: "text",
+          title: "Account ID",
+          required: true,
+          placeholder: "Account ID",
+        },
+        {
+          name: "database",
+          type: "text",
+          title: "Database ID",
+          required: true,
+          placeholder: "Database ID",
+        },
+        {
+          name: "token",
+          title: "API Token",
+          required: true,
+          type: "text",
+          secret: true,
+        },
+      ],
+    },
+    rqlite: {
+      name: "rqlite",
+      displayName: "rqlite",
+      icon: RqliteIcon,
+      fields: [
+        {
+          name: "url",
+          required: true,
+          type: "text",
+          title: "URL",
+          prefill: "http://localhost:4001",
+          description: "Example: http://localhost:4001",
+          invalidate: (url: string): null | string => {
+            const trimmedUrl = url.trim();
+            const valid =
+              trimmedUrl.startsWith("https://") ||
+              trimmedUrl.startsWith("http://");
+
+            if (!valid) {
+              return "Endpoint must start with https://, http://";
+            }
+
+            return null;
+          },
+        },
+        {
+          name: "username",
+          type: "text",
+          title: "Username",
+          placeholder: "Username",
+        },
+        {
+          name: "password",
+          type: "password",
+          title: "Password",
+          secret: true,
+          placeholder: "Password",
+        },
+      ],
+    },
+  });
+
+export function validateConnectionString(
+  driver: DriverDetail,
+  connectionString?: SavedConnectionItemConfigConfig
+) {
+  if (!connectionString) return false;
+
+  for (const field of driver.fields) {
+    if (
+      field.invalidate &&
+      field.invalidate(connectionString[field.name] ?? "")
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function prefillConnectionString(
+  driver: DriverDetail,
+  defaultValue?: SavedConnectionItemConfigConfig
+): SavedConnectionItemConfigConfig {
+  return {
+    url:
+      defaultValue?.url ??
+      driver.fields.find((f) => f.name === "url")?.prefill ??
+      "",
+    token:
+      defaultValue?.token ??
+      driver.fields.find((f) => f.name === "token")?.prefill ??
+      "",
+    database:
+      defaultValue?.database ??
+      driver.fields.find((f) => f.name === "database")?.prefill ??
+      "",
+    username:
+      defaultValue?.username ??
+      driver.fields.find((f) => f.name === "username")?.prefill ??
+      "",
+    password:
+      defaultValue?.token ??
+      driver.fields.find((f) => f.name === "password")?.prefill ??
+      "",
+  };
+}
+
+export type SupportedDriver =
+  | "turso"
+  | "rqlite"
+  | "valtown"
+  | "starbase"
+  | "cloudflare-d1"
+  | "sqlite-filehandler";
+
+export type SavedConnectionStorage = "remote" | "local";
+export type SavedConnectionLabel = "gray" | "red" | "yellow" | "green" | "blue";
+
+export const CONNECTION_LABEL_COLORS: Record<SavedConnectionLabel, string> = {
+  gray: "bg-gray-200 dark:bg-gray-500",
+  red: "bg-red-500",
+  yellow: "bg-yellow-500",
+  green: "bg-green-800",
+  blue: "bg-blue-800",
+};
+
+export interface SavedConnectionItem {
+  id: string;
+  driver?: SupportedDriver;
+  storage: SavedConnectionStorage;
+  name: string;
+  description?: string;
+  label?: SavedConnectionLabel;
+  lastUsed?: number;
+  shared?: {
+    sharedBy: ApiUser;
+  };
+}
+
+export interface SavedConnectionItemConfigConfig {
+  token?: string;
+  url?: string;
+  username?: string;
+  password?: string;
+  database?: string;
+  filehandler?: string;
+}
+
+export interface SavedConnectionItemConfig {
+  name: string;
+  driver?: SupportedDriver;
+  label?: SavedConnectionLabel;
+  description?: string;
+  config: SavedConnectionItemConfigConfig;
+}
+
+export type SavedConnectionItemWithoutId = {
+  storage: SavedConnectionStorage;
+} & SavedConnectionItemConfig;
+
+export type SavedConnectionItemDetail = {
+  id: string;
+} & SavedConnectionItemWithoutId;
+
+export interface SavedConnectionRawLocalStorage {
+  id?: string;
+  name: string;
+  url?: string;
+  token?: string;
+  username?: string;
+  password?: string;
+  database?: string;
+  driver?: SupportedDriver;
+  label?: SavedConnectionLabel;
+  file_handler?: string;
+  description?: string;
+  last_used?: number;
+}
diff --git a/src/app/(theme)/connect/saved-connection-type.tsx b/src/app/(theme)/connect/saved-connection-type.tsx
deleted file mode 100644
index db12d6aa..00000000
--- a/src/app/(theme)/connect/saved-connection-type.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { SavedConnectionStorage } from "@/app/(theme)/connect/saved-connection-storage";
-import { cn } from "@/lib/utils";
-import { useState } from "react";
-
-function SaveConnectionTypeItem({
-  active,
-  title,
-  description,
-  onClick,
-}: Readonly<{
-  active?: boolean;
-  title: string;
-  description: string;
-  onClick: () => void;
-}>) {
-  const className = cn(
-    "p-4 border max-w-[350px] border-2 rounded flex gap-4 cursor-pointer",
-    active ? "border-black dark:border-white" : undefined
-  );
-
-  return (
-    <div className={className} onClick={onClick}>
-      <div>
-        <h2 className="font-bold">{title}</h2>
-        <p className="text-sm mt-2">{description}</p>
-      </div>
-    </div>
-  );
-}
-
-export default function SaveConnectionType({
-  onContinue,
-}: Readonly<{ onContinue: (type: SavedConnectionStorage) => void }>) {
-  const [type, setType] = useState<SavedConnectionStorage>("local");
-
-  return (
-    <div>
-      <p className="mb-8">Where do you want to store your connection?</p>
-
-      <div className="flex flex-col gap-4">
-        <SaveConnectionTypeItem
-          onClick={() => setType("local")}
-          active={type === "local"}
-          title="Local Storage"
-          description="Store your database credential on your local storage."
-        />
-        <SaveConnectionTypeItem
-          onClick={() => setType("remote")}
-          active={type === "remote"}
-          title="Remote"
-          description="Securely store your database credential on our server."
-        />
-      </div>
-
-      <Button className="mt-8" onClick={() => onContinue(type)}>
-        Continue
-      </Button>
-    </div>
-  );
-}
diff --git a/src/app/(theme)/connect/saved-connection.tsx b/src/app/(theme)/connect/saved-connection.tsx
deleted file mode 100644
index 572b457d..00000000
--- a/src/app/(theme)/connect/saved-connection.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import {
-  DRIVER_DETAIL,
-  SavedConnectionItem,
-  SavedConnectionItemConfig,
-  SavedConnectionItemWithoutId,
-  SavedConnectionLocalStorage,
-  SavedConnectionStorage,
-  SupportedDriver,
-} from "@/app/(theme)/connect/saved-connection-storage";
-import { WEBSITE_NAME } from "@/const";
-import { createDatabase } from "@/lib/api/fetch-databases";
-import { User } from "lucia";
-import { useCallback, useState } from "react";
-import SavedConnectionConfig from "./saved-connection-config";
-import ConnectionDialogContent from "./saved-connection-content";
-import SaveConnectionType from "./saved-connection-type";
-
-type SaveConnectionStep = "storage" | "config";
-
-export function RqliteInstruction() {
-  return (
-    <div className="bg-secondary mb-4 p-4 text-sm">
-      You should include {WEBSITE_NAME} in the list of allowed origins for CORS
-      (Cross-Origin Resource Sharing)
-      <pre className="mt-2">
-        <code>{`rqlited --http-allow-origin="https://libsqlstudio.com"`}</code>
-      </pre>
-    </div>
-  );
-}
-
-export function CloudflareWarning() {
-  return (
-    <div className="bg-secondary mb-4 p-4 text-sm">
-      To bypass CORS (Cross-Origin Resource Sharing) restrictions, we will route
-      your request through our server. If you are fine with this, please
-      proceed.
-    </div>
-  );
-}
-
-export default function SaveConnection({
-  user,
-  driver,
-  onSaveComplete,
-  onClose,
-}: Readonly<{
-  user: User | null;
-  driver: SupportedDriver;
-  onSaveComplete: (storageType: SavedConnectionItem) => void;
-  onClose: () => void;
-}>) {
-  const [storage, setStorage] = useState<SavedConnectionStorage | undefined>(
-    user ? undefined : "local"
-  );
-  const [step, setStep] = useState<SaveConnectionStep>(() => {
-    if (!user) return "config";
-    if (DRIVER_DETAIL[driver].disableRemote) return "config";
-    return "storage";
-  });
-  const [loading, setLoading] = useState(false);
-
-  const onConnectionTypeSelected = useCallback(
-    (type: SavedConnectionStorage) => {
-      setStep("config");
-      setStorage(type);
-    },
-    [setStep]
-  );
-
-  const onSaveConnection = useCallback(
-    (data: SavedConnectionItemConfig) => {
-      if (storage === "remote") {
-        setLoading(true);
-        createDatabase({ ...data, driver: data.driver ?? "turso" })
-          .then((r) => onSaveComplete(r.data))
-          .finally(() => {
-            setLoading(false);
-          });
-      } else {
-        const finalConfig: SavedConnectionItemWithoutId = {
-          ...data,
-          storage: storage ?? "local",
-        };
-        const conn = SavedConnectionLocalStorage.save(finalConfig);
-
-        onSaveComplete({
-          id: conn.id,
-          name: finalConfig.name,
-          driver: finalConfig.driver ?? "turso",
-          storage: "local",
-          description: finalConfig.description,
-          label: finalConfig.label,
-        });
-      }
-    },
-    [storage, onSaveComplete]
-  );
-
-  return (
-    <ConnectionDialogContent
-      driver={driver}
-      title="New Connection"
-      onClose={onClose}
-    >
-      {step === "storage" && (
-        <SaveConnectionType onContinue={onConnectionTypeSelected} />
-      )}
-      {step === "config" && (
-        <>
-          {driver === "rqlite" && storage === "local" && <RqliteInstruction />}
-          {driver === "cloudflare-d1" && storage === "local" && (
-            <CloudflareWarning />
-          )}
-          <SavedConnectionConfig
-            driver={driver}
-            onClose={onClose}
-            onSave={onSaveConnection}
-            loading={loading}
-          />
-        </>
-      )}
-    </ConnectionDialogContent>
-  );
-}
diff --git a/src/app/(theme)/connect/saved-edit-connection.tsx b/src/app/(theme)/connect/saved-edit-connection.tsx
deleted file mode 100644
index 95517c8b..00000000
--- a/src/app/(theme)/connect/saved-edit-connection.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import {
-  SavedConnectionItem,
-  SavedConnectionItemConfig,
-  SavedConnectionLocalStorage,
-  SavedConnectionStorage,
-} from "./saved-connection-storage";
-import ConnectionDialogContent from "./saved-connection-content";
-import SavedConnectionConfig from "./saved-connection-config";
-import { getDatabase, updateDatabase } from "@/lib/api/fetch-databases";
-import { LucideLoader2 } from "lucide-react";
-
-type SaveCompleteHandler = (v: SavedConnectionItem) => void;
-
-interface Props {
-  conn: SavedConnectionItem;
-  storage: SavedConnectionStorage;
-  onSaveComplete: SaveCompleteHandler;
-  onClose: () => void;
-}
-
-function EditRemote({
-  id,
-  onSaveComplete,
-  onClose,
-}: Readonly<{
-  id: string;
-  onSaveComplete: SaveCompleteHandler;
-  onClose: () => void;
-}>) {
-  const [loading, setLoading] = useState(true);
-  const [saveLoading, setSaveLoading] = useState(false);
-  const [initialData, setInitialData] = useState<SavedConnectionItemConfig>();
-
-  useEffect(() => {
-    getDatabase(id)
-      .then((r) => {
-        return setInitialData({
-          name: r.name,
-          description: r.description,
-          label: r.label,
-          driver: r.driver,
-          config: {
-            url: r.config.url,
-            token: r.config.token,
-            username: r.config.username,
-            database: r.config.database,
-          },
-        });
-      })
-      .finally(() => setLoading(false));
-  }, [id]);
-
-  if (loading) {
-    return (
-      <div>
-        <LucideLoader2 className="mb-5 animate-spin w-12 h-12" />
-        <p>Please wait a moment. Fetching connection detail.</p>
-      </div>
-    );
-  }
-
-  if (!initialData) {
-    return <div>Something wrong.</div>;
-  }
-
-  return (
-    <SavedConnectionConfig
-      driver={initialData.driver ?? "turso"}
-      initialData={initialData}
-      showLockedCredential
-      loading={saveLoading}
-      onClose={onClose}
-      onSave={(conn) => {
-        setSaveLoading(true);
-        updateDatabase(id, {
-          name: conn.name,
-          driver: conn.driver,
-          description: conn.description,
-          label: conn.label,
-          config: {
-            token: conn.config.token,
-            url: conn.config.url,
-            password: conn.config.password,
-            username: conn.config.username,
-            database: conn.config.database,
-          },
-        })
-          .then(() => {
-            onSaveComplete({
-              id: id,
-              driver: conn.driver,
-              name: conn.name,
-              storage: "remote",
-              description: conn.description,
-              label: conn.label,
-            });
-          })
-          .finally(() => {
-            setSaveLoading(false);
-          });
-      }}
-    />
-  );
-}
-
-function EditLocal({
-  id,
-  onSaveComplete,
-  onClose,
-}: Readonly<{
-  id: string;
-  onSaveComplete: SaveCompleteHandler;
-  onClose: () => void;
-}>) {
-  useEffect(() => {
-    fetch("/");
-  }, []);
-
-  const initialData = useMemo(() => {
-    return SavedConnectionLocalStorage.get(id);
-  }, [id]);
-
-  if (!initialData) {
-    return <div>We cannot find this connection config in local storage</div>;
-  }
-
-  return (
-    <SavedConnectionConfig
-      onClose={onClose}
-      driver={initialData.driver ?? "turso"}
-      initialData={initialData}
-      onSave={(conn) => {
-        SavedConnectionLocalStorage.update(id, conn);
-        onSaveComplete({
-          id: id,
-          name: conn.name,
-          driver: conn.driver,
-          storage: "local",
-          description: conn.description,
-          label: conn.label,
-        });
-      }}
-    />
-  );
-}
-
-export default function EditSavedConnection({
-  conn,
-  storage,
-  onSaveComplete,
-  onClose,
-}: Readonly<Props>) {
-  return (
-    <ConnectionDialogContent
-      driver={conn.driver ?? "turso"}
-      title="Edit Connection"
-      onClose={onClose}
-    >
-      {storage === "local" ? (
-        <EditLocal
-          id={conn.id}
-          onSaveComplete={onSaveComplete}
-          onClose={onClose}
-        />
-      ) : (
-        <EditRemote
-          id={conn.id}
-          onSaveComplete={onSaveComplete}
-          onClose={onClose}
-        />
-      )}
-    </ConnectionDialogContent>
-  );
-}
diff --git a/src/app/(theme)/connect/saved-remove-connection.tsx b/src/app/(theme)/connect/saved-remove-connection.tsx
deleted file mode 100644
index e01a62f2..00000000
--- a/src/app/(theme)/connect/saved-remove-connection.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { useCallback, useMemo, useState } from "react";
-import {
-  SavedConnectionItem,
-  SavedConnectionLocalStorage,
-} from "./saved-connection-storage";
-import { deleteDatabase } from "@/lib/api/fetch-databases";
-import { LucideLoader } from "lucide-react";
-
-interface Props {
-  conn: SavedConnectionItem;
-  onRemove: (conn: SavedConnectionItem) => void;
-  onClose: () => void;
-}
-
-export default function RemoveSavedConnection({
-  conn,
-  onRemove,
-  onClose,
-}: Readonly<Props>) {
-  const [confirmText, setConfirmText] = useState("");
-  const [loading, setLoading] = useState(false);
-  const correctText = useMemo(() => conn.name.trim(), [conn]);
-
-  const onRemoveClicked = useCallback(() => {
-    if (confirmText === correctText) {
-      if (conn.storage === "local") {
-        SavedConnectionLocalStorage.remove(conn.id);
-      } else {
-        setLoading(true);
-        deleteDatabase(conn.id)
-          .then()
-          .finally(() => setLoading(false));
-      }
-
-      onRemove(conn);
-    }
-  }, [onRemove, conn, confirmText, correctText]);
-
-  return (
-    <Dialog
-      open
-      onOpenChange={(open) => {
-        if (!open) onClose();
-      }}
-    >
-      <DialogContent>
-        <DialogTitle>Remove Connection</DialogTitle>
-
-        <div className="flex flex-col gap-4">
-          <p>
-            Please type <strong className="text-red-500">{correctText}</strong>{" "}
-            to confirm you removing connection.
-          </p>
-
-          <Input
-            autoFocus
-            placeholder="Type to confirm"
-            value={confirmText}
-            onChange={(e) => setConfirmText(e.currentTarget.value)}
-          />
-        </div>
-
-        <DialogFooter>
-          <Button
-            variant={"destructive"}
-            onClick={onRemoveClicked}
-            disabled={loading}
-          >
-            {loading && <LucideLoader className="w-4 h-4 mr-2 animate-spin" />}
-            Remove
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/app/(theme)/playground/client/page-client.tsx b/src/app/(theme)/playground/client/page-client.tsx
index 0e93b583..3c56547c 100644
--- a/src/app/(theme)/playground/client/page-client.tsx
+++ b/src/app/(theme)/playground/client/page-client.tsx
@@ -1,6 +1,17 @@
 "use client";
-import { saveAs } from "file-saver";
+import { Studio } from "@/components/gui/studio";
+import {
+  Toolbar,
+  ToolbarButton,
+  ToolbarSeparator,
+} from "@/components/gui/toolbar";
+import ScreenDropZone from "@/components/screen-dropzone";
+import { StudioExtensionManager } from "@/core/extension-manager";
+import { createSQLiteExtensions } from "@/core/standard-extension";
 import SqljsDriver from "@/drivers/sqljs-driver";
+import { localDb } from "@/indexdb";
+import downloadFileFromUrl from "@/lib/download-file";
+import { saveAs } from "file-saver";
 import {
   FolderOpenIcon,
   LucideFile,
@@ -8,23 +19,11 @@ import {
   RefreshCcw,
   Save,
 } from "lucide-react";
+import { useSearchParams } from "next/navigation";
 import Script from "next/script";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Database, SqlJsStatic } from "sql.js";
-import ScreenDropZone from "@/components/screen-dropzone";
 import { toast } from "sonner";
-import downloadFileFromUrl from "@/lib/download-file";
-import { useSearchParams } from "next/navigation";
-import { localDb } from "@/indexdb";
-import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
-import { Studio } from "@/components/gui/studio";
-import {
-  Toolbar,
-  ToolbarButton,
-  ToolbarSeparator,
-} from "@/components/gui/toolbar";
-import { StudioExtensionManager } from "@/core/extension-manager";
-import { createSQLiteExtensions } from "@/core/standard-extension";
+import { Database, SqlJsStatic } from "sql.js";
 
 const SQLITE_FILE_EXTENSIONS =
   ".db,.sdb,.sqlite,.db3,.s3db,.sqlite3,.sl3,.db2,.s2db,.sqlite2,.sl2";
@@ -337,10 +336,10 @@ export default function PlaygroundEditorBody({
  * @returns
  */
 async function loadDatabaseFileHandlerFromSessionId(sessionId: string) {
-  const session = SavedConnectionLocalStorage.get(sessionId);
+  const session = await localDb.connection.get(sessionId);
   if (!session) return;
 
-  const fileHandlerId = session?.config.filehandler;
+  const fileHandlerId = session?.content?.file_handler;
   if (!fileHandlerId) return;
 
   const sessionData = await localDb.file_handler.get(fileHandlerId);
diff --git a/src/components/filehandler-picker.tsx b/src/components/filehandler-picker.tsx
index 3f07faea..002c1fbb 100644
--- a/src/components/filehandler-picker.tsx
+++ b/src/components/filehandler-picker.tsx
@@ -1,20 +1,20 @@
-import { useCallback, useEffect, useState } from "react";
-import { Button, buttonVariants } from "./ui/button";
 import { localDb } from "@/indexdb";
-import { LucideFile, LucideFolderClosed } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
-import { unsupportFileHandlerDialogContent } from "./screen-dropzone";
+import { LucideFile, LucideFolderClosed } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
 import { useCommonDialog } from "./common-dialog";
+import { unsupportFileHandlerDialogContent } from "./screen-dropzone";
+import { Button, buttonVariants } from "./ui/button";
 
 /**
  * Cleanup file handler from indexdb database when
  * it is no longer needed.
  */
 async function cleanupFileHandler() {
-  const connectionList = SavedConnectionLocalStorage.getDetailList();
   const validHandlerIds = new Set(
-    connectionList.map((c) => c.config?.filehandler).filter(Boolean) as string[]
+    (await localDb.connection.toCollection().toArray())
+      .map((c) => c.content.file_handler)
+      .filter(Boolean) as string[]
   );
 
   const fileHandlerList = (await localDb.file_handler.toArray()).map(
@@ -97,10 +97,10 @@ export default function FileHandlerPicker({
         onClick={onChangeFile}
         className={cn(
           buttonVariants({ variant: "outline" }),
-          "w-full justify-start cursor-pointer"
+          "w-full cursor-pointer justify-start"
         )}
       >
-        <LucideFile className="w-4 h-4 mr-2" />
+        <LucideFile className="mr-2 h-4 w-4" />
         {handler.name}
       </div>
     );
@@ -108,7 +108,7 @@ export default function FileHandlerPicker({
 
   return (
     <Button onClick={onChangeFile} variant={"outline"}>
-      <LucideFolderClosed className="w-4 h-4 mr-2" />
+      <LucideFolderClosed className="mr-2 h-4 w-4" />
       Open File
     </Button>
   );
diff --git a/src/drivers/board-source/local.tsx b/src/drivers/board-source/local.tsx
index 54755528..72b4d8b4 100644
--- a/src/drivers/board-source/local.tsx
+++ b/src/drivers/board-source/local.tsx
@@ -1,10 +1,10 @@
-import { SavedConnectionItemDetail } from "@/app/(theme)/connect/saved-connection-storage";
+import { SavedConnectionRawLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
 import { BaseDriver, DatabaseResultSet, DatabaseSchemas } from "../base-driver";
 import { createLocalDriver } from "../helpers";
 import { BoardSource, BoardSourceDriver } from "./base-source";
 
 export default class LocalBoardSource extends BoardSourceDriver {
-  protected sources: SavedConnectionItemDetail[];
+  protected sources: SavedConnectionRawLocalStorage[];
   protected drivers: Record<string, BaseDriver> = {};
 
   protected cacheSchemas: Record<
@@ -15,7 +15,7 @@ export default class LocalBoardSource extends BoardSourceDriver {
     }
   > = {};
 
-  constructor(sources: SavedConnectionItemDetail[]) {
+  constructor(sources: SavedConnectionRawLocalStorage[]) {
     super();
     this.sources = sources;
   }
@@ -23,7 +23,7 @@ export default class LocalBoardSource extends BoardSourceDriver {
   sourceList(): BoardSource[] {
     return this.sources.map((source) => {
       return {
-        id: source.id,
+        id: source.id!,
         name: source.name,
         type: source.driver ?? "sqlite",
       };
diff --git a/src/drivers/helpers.ts b/src/drivers/helpers.ts
index 9ca219e8..50bad7f9 100644
--- a/src/drivers/helpers.ts
+++ b/src/drivers/helpers.ts
@@ -1,31 +1,27 @@
-import { SavedConnectionItemConfig } from "@/app/(theme)/connect/saved-connection-storage";
+import { SavedConnectionRawLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
 import CloudflareD1Driver from "./cloudflare-d1-driver";
 import RqliteDriver from "./rqlite-driver";
 import StarbaseDriver from "./starbase-driver";
 import TursoDriver from "./turso-driver";
 import ValtownDriver from "./valtown-driver";
 
-export function createLocalDriver(conn: SavedConnectionItemConfig) {
+export function createLocalDriver(conn: SavedConnectionRawLocalStorage) {
   if (conn.driver === "rqlite") {
-    return new RqliteDriver(
-      conn.config.url!,
-      conn.config.username,
-      conn.config.password
-    );
+    return new RqliteDriver(conn.url!, conn.username, conn.password);
   } else if (conn.driver === "valtown") {
-    return new ValtownDriver(conn.config.token!);
+    return new ValtownDriver(conn.token!);
   } else if (conn.driver === "cloudflare-d1") {
     return new CloudflareD1Driver("/proxy/d1", {
-      Authorization: "Bearer " + conn.config.token,
-      "x-account-id": conn.config.username ?? "",
-      "x-database-id": conn.config.database ?? "",
+      Authorization: "Bearer " + conn.token,
+      "x-account-id": conn.username ?? "",
+      "x-database-id": conn.database ?? "",
     });
   } else if (conn.driver === "starbase") {
     return new StarbaseDriver("/proxy/starbase", {
-      Authorization: "Bearer " + (conn.config.token ?? ""),
-      "x-starbase-url": conn.config.url ?? "",
+      Authorization: "Bearer " + (conn.token ?? ""),
+      "x-starbase-url": conn.url ?? "",
     });
   }
 
-  return new TursoDriver(conn.config.url!, conn.config.token!, true);
+  return new TursoDriver(conn.url!, conn.token!, true);
 }
diff --git a/src/indexdb.ts b/src/indexdb.ts
index e34b630c..b0978565 100644
--- a/src/indexdb.ts
+++ b/src/indexdb.ts
@@ -1,4 +1,5 @@
 import Dexie, { EntityTable } from "dexie";
+import { SavedConnectionRawLocalStorage } from "./app/(theme)/connect/saved-connection-storage";
 import { DashboardProps } from "./components/board";
 
 export interface LocalDashboardData extends DashboardProps {
@@ -35,18 +36,27 @@ interface IndexDbBoard {
   content: LocalDashboardData;
 }
 
+export interface LocalConnectionData {
+  id: string;
+  content: SavedConnectionRawLocalStorage;
+  created_at: number;
+  updated_at: number;
+}
+
 const localDb = new Dexie("libstudio") as Dexie & {
   namespace: EntityTable<IndexDbNamespace, "id">;
   saved_doc: EntityTable<IndexDbDoc, "id">;
   file_handler: EntityTable<IndexDbFileHandler, "id">;
   board: EntityTable<IndexDbBoard, "id">;
+  connection: EntityTable<LocalConnectionData, "id">;
 };
 
-localDb.version(3).stores({
+localDb.version(4).stores({
   namespace: "++id, database_id",
   saved_doc: "++id, database_id, namespace_id",
   file_handler: "++id, handler",
   board: "++id",
+  connection: "++id",
 });
 
 export { localDb };
diff --git a/tsconfig.json b/tsconfig.json
index 97a8b2c6..59e78d2f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/app/(theme)/connect/saved-connection-storage.ts.back"
+  ],
   "exclude": ["node_modules"]
 }

From 1f0cdff32628b5e2128881edecfd41418dfe263f Mon Sep 17 00:00:00 2001
From: roth <68660484+roth-dev@users.noreply.github.com>
Date: Sun, 23 Feb 2025 09:46:05 +0700
Subject: [PATCH 081/106] feat: delete user (#375)

---
 .../(outerbase)/account/account-footer.tsx    | 45 +++++++++++++++----
 src/app/(outerbase)/session-provider.tsx      | 12 ++++-
 src/outerbase-cloud/api-account.ts            |  4 ++
 3 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/app/(outerbase)/account/account-footer.tsx b/src/app/(outerbase)/account/account-footer.tsx
index e8c049be..6a40b343 100644
--- a/src/app/(outerbase)/account/account-footer.tsx
+++ b/src/app/(outerbase)/account/account-footer.tsx
@@ -6,17 +6,21 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogHeader,
+  DialogTitle,
 } from "@/components/ui/dialog";
 import { isValidEmail } from "@/lib/validation";
-import { DialogTitle } from "@radix-ui/react-dialog";
+import { deleteOuterbaseUser } from "@/outerbase-cloud/api-account";
 import { Check, Copy } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
 
 export default function AccountFooter() {
-  const { session } = useSession();
+  const { session, logout } = useSession();
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
 
   const copyToClipboard = async () => {
     if (!session) return;
@@ -27,16 +31,36 @@ export default function AccountFooter() {
       console.error("Failed to copy:", error);
     }
   };
+
   const onClose = () => {
     setCopied(false);
     setOpen(false);
     setEmail("");
+    setLoading(false);
   };
+
+  const onDeleteOuerbaseUser = useCallback(() => {
+    setLoading(true);
+    deleteOuterbaseUser()
+      .then(() => {
+        onClose();
+        logout();
+      })
+      .catch((err) => {
+        setLoading(false);
+        toast.error(err.message);
+      });
+  }, [logout]);
+
   const fullName = useMemo(() => {
     if (!session) return;
     return session?.user.first_name + " " + session?.user.last_name;
   }, [session]);
 
+  const disabled = useMemo(() => {
+    return !isValidEmail(email) || email !== session?.user.email;
+  }, [email, session]);
+
   return (
     <>
       <Dialog
@@ -48,9 +72,12 @@ export default function AccountFooter() {
         }}
       >
         <DialogContent className="justify-items-start">
-          <DialogTitle>
-            Confirm deletion of {fullName}&apos; account
-          </DialogTitle>
+          <DialogHeader>
+            <DialogTitle>
+              Confirm deletion of {fullName}&apos; account
+            </DialogTitle>
+          </DialogHeader>
+
           <DialogDescription className="text-base">
             Deleting this account will delete all Bases and Workspaces and
             revoke all connections made to your databases. All members will lose
@@ -76,9 +103,11 @@ export default function AccountFooter() {
           </Label>
           <div className="flex flex-row gap-5">
             <Button
-              disabled={!isValidEmail(email)}
-              onClick={onClose}
+              loading={loading}
+              disabled={disabled}
+              onClick={onDeleteOuerbaseUser}
               variant="destructive"
+              shape="base"
               title="I understand, delete my account"
             />
             <Button variant="secondary" onClick={onClose} title="Cancel" />
diff --git a/src/app/(outerbase)/session-provider.tsx b/src/app/(outerbase)/session-provider.tsx
index ffdbdae0..d34e5903 100644
--- a/src/app/(outerbase)/session-provider.tsx
+++ b/src/app/(outerbase)/session-provider.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useRouter } from "next/navigation";
 import {
   createContext,
   PropsWithChildren,
@@ -19,11 +20,13 @@ interface OuterebaseSessionContextProps {
     session: OuterbaseAPISession;
     user: OuterbaseAPIUser;
   };
+  logout: () => void;
   refreshSession: () => Promise<void>;
 }
 
 const OuterbaseSessionContext = createContext<OuterebaseSessionContextProps>({
   isLoading: true,
+  logout: () => {},
   refreshSession: async () => {},
 });
 
@@ -32,6 +35,7 @@ export function useSession() {
 }
 
 export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
+  const router = useRouter();
   const token =
     typeof window !== "undefined" ? localStorage.getItem("ob-token") || "" : "";
 
@@ -52,9 +56,15 @@ export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
     await mutate("session-" + token);
   }, [token]);
 
+  const logout = useCallback(() => {
+    localStorage.removeItem("session");
+    localStorage.removeItem("ob-token");
+    router.push("/signin");
+  }, [router]);
+
   return (
     <OuterbaseSessionContext.Provider
-      value={{ session: data, isLoading, token, refreshSession }}
+      value={{ session: data, isLoading, token, logout, refreshSession }}
     >
       {children}
     </OuterbaseSessionContext.Provider>
diff --git a/src/outerbase-cloud/api-account.ts b/src/outerbase-cloud/api-account.ts
index bc373afc..0aa9002d 100644
--- a/src/outerbase-cloud/api-account.ts
+++ b/src/outerbase-cloud/api-account.ts
@@ -84,3 +84,7 @@ export async function verifyOuterbaseOTP(token: string) {
 export async function submitVerifyPhone2FA(id: string, data: { code: string }) {
   return await requestOuterbase(`/api/v1/me/phone/${id}/submit`, "POST", data);
 }
+
+export async function deleteOuterbaseUser() {
+  return await requestOuterbase("/api/v1/me", "DELETE");
+}

From adff2e98f28598d56620aa4c7f87b48e121e70de Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 23 Feb 2025 21:44:32 +0700
Subject: [PATCH 082/106] add search resource

---
 src/app/(outerbase)/base-template.tsx         |  2 +-
 src/app/(outerbase)/local/hooks.tsx           | 15 ++++
 src/app/(outerbase)/local/page.tsx            |  8 +-
 src/app/(outerbase)/resource-item-helper.tsx  | 76 ++++++++++++++++++-
 src/app/(outerbase)/w/[workspaceId]/page.tsx  | 38 +---------
 .../client/s/[[...driver]]/page-client.tsx    | 15 +++-
 6 files changed, 105 insertions(+), 49 deletions(-)

diff --git a/src/app/(outerbase)/base-template.tsx b/src/app/(outerbase)/base-template.tsx
index d3a12af1..41e25706 100644
--- a/src/app/(outerbase)/base-template.tsx
+++ b/src/app/(outerbase)/base-template.tsx
@@ -108,7 +108,7 @@ export const LOCAL_CONNECTION_TEMPLATES: Record<
       return {
         name: value.name,
         driver: "sqlite-filehandler",
-        filehandler: value.filehandler,
+        file_handler: value.filehandler,
       };
     },
   },
diff --git a/src/app/(outerbase)/local/hooks.tsx b/src/app/(outerbase)/local/hooks.tsx
index f6f4a669..dd84a604 100644
--- a/src/app/(outerbase)/local/hooks.tsx
+++ b/src/app/(outerbase)/local/hooks.tsx
@@ -138,6 +138,21 @@ export async function updateLocalConnection(
   return data;
 }
 
+export async function updateLocalConnectionUsed(id: string) {
+  const oldData = await localDb.connection.get(id);
+  if (!oldData) return;
+
+  const data = {
+    ...oldData,
+    updated_at: Date.now(),
+  };
+
+  await localDb.connection.put(data);
+  mutate("/connections/local");
+
+  return data;
+}
+
 export async function getLocalConnectionList() {
   return await localDb.connection.toCollection().toArray();
 }
diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
index 16468b90..63759e15 100644
--- a/src/app/(outerbase)/local/page.tsx
+++ b/src/app/(outerbase)/local/page.tsx
@@ -11,7 +11,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useMemo } from "react";
 import NavigationLayout from "../nav-layout";
-import NewResourceButton from "../new-resource-button";
 import { ResourceItemList, ResourceItemProps } from "../resource-item-helper";
 import { deleteLocalBaseDialog } from "./dialog-base-delete";
 import { createLocalBoardDialog } from "./dialog-board-create";
@@ -86,11 +85,7 @@ export default function LocalConnectionPage() {
   return (
     <NavigationLayout>
       <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
-        <div className="flex gap-2">
-          <NewResourceButton onCreateBoard={onBoardCreate} />
-        </div>
-
-        <div className="my-4 flex gap-4">
+        <div className="mb-4 flex gap-4">
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
               <button className="bg-background dark:bg-secondary flex cursor-pointer items-center gap-2 rounded-lg border p-4">
@@ -175,6 +170,7 @@ export default function LocalConnectionPage() {
           onBaseEdit={(resource) => {
             router.push(`/local/edit-base/${resource.id}`);
           }}
+          onBoardCreate={onBoardCreate}
         />
       </div>
     </NavigationLayout>
diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
index 5302fde4..ad2d8d69 100644
--- a/src/app/(outerbase)/resource-item-helper.tsx
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -1,3 +1,5 @@
+import { Input } from "@/components/orbit/input";
+import { MenuBar } from "@/components/orbit/menu-bar";
 import ResourceCard from "@/components/resource-card";
 import {
   getDatabaseFriendlyName,
@@ -14,8 +16,19 @@ import {
   OuterbaseAPIDashboard,
   OuterbaseAPIWorkspace,
 } from "@/outerbase-cloud/api-type";
-import { Pencil, Trash } from "@phosphor-icons/react";
+import {
+  CalendarDots,
+  Eye,
+  MagnifyingGlass,
+  Pencil,
+  SortAscending,
+  SortDescending,
+  Trash,
+  Users,
+} from "@phosphor-icons/react";
 import { AnimatePresence, motion } from "framer-motion";
+import { useMemo, useState } from "react";
+import NewResourceButton from "./new-resource-button";
 import ResourceCardLoading from "./resource-card-loading";
 
 export interface ResourceItemProps {
@@ -62,6 +75,8 @@ export function ResourceItemList({
   onBoardRemove,
   onBaseRemove,
   onBaseEdit,
+  onBoardCreate,
+  workspaceId,
 }: {
   bases: ResourceItemProps[];
   boards: ResourceItemProps[];
@@ -69,10 +84,53 @@ export function ResourceItemList({
   onBoardRemove?: (item: ResourceItemProps) => void;
   onBaseRemove?: (item: ResourceItemProps) => void;
   onBaseEdit?: (item: ResourceItemProps) => void;
+  onBoardCreate?: () => void;
+  workspaceId?: string;
 }) {
+  const [search, setSearch] = useState("");
+
+  const baseMatchedCount = useMemo(() => {
+    return bases.filter((base) =>
+      base.name.toLowerCase().includes(search.toLowerCase())
+    ).length;
+  }, [bases, search]);
+
+  const boardMatchedCount = useMemo(() => {
+    return boards.filter((board) =>
+      board.name.toLowerCase().includes(search.toLowerCase())
+    ).length;
+  }, [boards, search]);
+
   return (
     <>
-      {boards.length > 0 && (
+      <div className="mb-4 flex gap-2">
+        <NewResourceButton
+          onCreateBoard={onBoardCreate}
+          workspaceId={workspaceId}
+        />
+
+        <MenuBar
+          size="lg"
+          items={[
+            { value: "all", content: <SortAscending size={16} /> },
+            { value: "recent", content: <SortDescending size={16} /> },
+            { value: "updated", content: <CalendarDots size={16} /> },
+            { value: "created", content: <Eye size={16} /> },
+            { value: "name", content: <Users size={16} /> },
+          ]}
+        />
+
+        <div className="flex-1"></div>
+
+        <Input
+          value={search}
+          onValueChange={setSearch}
+          preText={<MagnifyingGlass className="mr-2" />}
+          placeholder="Search"
+        />
+      </div>
+
+      {boardMatchedCount > 0 && (
         <>
           <h2 className="text-base font-bold">Boards</h2>
           <div className="flex grid grid-cols-1 flex-wrap gap-4 min-[700px]:grid-cols-2 min-[900px]:grid-cols-3 min-[1200px]:grid-cols-4 min-[1500px]:grid-cols-5 min-[1800px]:grid-cols-6 min-[2100px]:grid-cols-7">
@@ -87,6 +145,11 @@ export function ResourceItemList({
                     animate={{ opacity: 1, scale: 1 }}
                     exit={{ opacity: 0, scale: 0.5 }}
                     transition={{ duration: 0.3 }}
+                    className={
+                      resource.name.toLowerCase().includes(search.toLowerCase())
+                        ? ""
+                        : "hidden"
+                    }
                   >
                     <ResourceCard
                       className="w-full"
@@ -117,7 +180,9 @@ export function ResourceItemList({
         </>
       )}
 
-      {boards.length > 0 && <h2 className="text-base font-bold">Bases</h2>}
+      {boardMatchedCount > 0 && baseMatchedCount > 0 && (
+        <h2 className="text-base font-bold">Bases</h2>
+      )}
 
       <div className="flex grid grid-cols-1 flex-wrap gap-4 min-[700px]:grid-cols-2 min-[900px]:grid-cols-3 min-[1200px]:grid-cols-4 min-[1500px]:grid-cols-5 min-[1800px]:grid-cols-6 min-[2100px]:grid-cols-7">
         {loading && (
@@ -141,6 +206,11 @@ export function ResourceItemList({
                   animate={{ opacity: 1, scale: 1 }}
                   exit={{ opacity: 0, scale: 0.5 }}
                   transition={{ duration: 0.3 }}
+                  className={
+                    resource.name.toLowerCase().includes(search.toLowerCase())
+                      ? ""
+                      : "hidden"
+                  }
                 >
                   <ResourceCard
                     key={resource.id}
diff --git a/src/app/(outerbase)/w/[workspaceId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/page.tsx
index 295bcbbb..455c90ea 100644
--- a/src/app/(outerbase)/w/[workspaceId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/page.tsx
@@ -1,21 +1,10 @@
 "use client";
 
-import { Input } from "@/components/orbit/input";
-import { MenuBar } from "@/components/orbit/menu-bar";
 import { useOuterbaseDashboardList } from "@/outerbase-cloud/hook";
-import {
-  CalendarDots,
-  Eye,
-  MagnifyingGlass,
-  SortAscending,
-  SortDescending,
-  Users,
-} from "@phosphor-icons/react";
 import { useRouter } from "next/navigation";
 import { useCallback, useMemo } from "react";
 import NavigationHeader from "../../nav-header";
 import NavigationLayout from "../../nav-layout";
-import NewResourceButton from "../../new-resource-button";
 import {
   getResourceItemPropsFromBase,
   getResourceItemPropsFromBoard,
@@ -123,37 +112,14 @@ export default function WorkspaceListPage() {
         <NavigationHeader />
 
         <div className="flex flex-1 flex-col content-start gap-4 overflow-x-hidden overflow-y-auto p-4">
-          <div className="flex gap-2">
-            <NewResourceButton
-              onCreateBoard={onCreateBoardClicked}
-              workspaceId={currentWorkspace?.short_name}
-            />
-
-            <Input
-              preText={<MagnifyingGlass className="mr-2" />}
-              placeholder="Search"
-            />
-
-            <div className="flex-1"></div>
-
-            <MenuBar
-              size="lg"
-              items={[
-                { value: "all", content: <SortAscending size={16} /> },
-                { value: "recent", content: <SortDescending size={16} /> },
-                { value: "updated", content: <CalendarDots size={16} /> },
-                { value: "created", content: <Eye size={16} /> },
-                { value: "name", content: <Users size={16} /> },
-              ]}
-            />
-          </div>
-
           <ResourceItemList
             bases={bases}
             boards={dashboards}
             loading={workspaceLoading}
             onBoardRemove={onDeleteBoardClicked}
             onBaseRemove={onDeleteBaseClicked}
+            onBoardCreate={onCreateBoardClicked}
+            workspaceId={currentWorkspace?.short_name}
           />
         </div>
       </NavigationLayout>
diff --git a/src/app/(theme)/client/s/[[...driver]]/page-client.tsx b/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
index b9d5dac7..2fcb2a9e 100644
--- a/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
+++ b/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
@@ -1,14 +1,23 @@
 "use client";
-import { useLocalConnection } from "@/app/(outerbase)/local/hooks";
+import {
+  updateLocalConnectionUsed,
+  useLocalConnection,
+} from "@/app/(outerbase)/local/hooks";
 import MyStudio from "@/components/my-studio";
 import { createLocalDriver } from "@/drivers/helpers";
 import IndexdbSavedDoc from "@/drivers/saved-doc/indexdb-saved-doc";
 import { useSearchParams } from "next/navigation";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 
 export default function ClientPageBody() {
   const params = useSearchParams();
-  const { data: conn } = useLocalConnection(params.get("p") ?? "");
+  const baseId = params.get("p") ?? "";
+  const { data: conn } = useLocalConnection(baseId);
+
+  useEffect(() => {
+    if (!baseId) return;
+    updateLocalConnectionUsed(baseId).then().catch();
+  }, [baseId]);
 
   const driver = useMemo(() => {
     if (!conn) return null;

From 508bcd8c208174626249968a39aa355db2b5a1da Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 24 Feb 2025 19:18:42 +0700
Subject: [PATCH 083/106] properly redirect after verify

---
 src/app/(dark-only)/signin/page.tsx          | 31 ++++++--------------
 src/app/(dark-only)/verify/page.tsx          |  8 +++--
 src/app/(outerbase)/nav-layout.tsx           | 15 ++++++++--
 src/app/(outerbase)/page.tsx                 |  2 ++
 src/app/(outerbase)/resource-item-helper.tsx | 12 +++++---
 src/app/(outerbase)/session-provider.tsx     |  1 +
 src/app/(outerbase)/workspace-provider.tsx   |  7 ++++-
 7 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/src/app/(dark-only)/signin/page.tsx b/src/app/(dark-only)/signin/page.tsx
index 3557f5a1..c28659b0 100644
--- a/src/app/(dark-only)/signin/page.tsx
+++ b/src/app/(dark-only)/signin/page.tsx
@@ -5,13 +5,10 @@ import {
   getOuterbaseSession,
   loginOuterbaseByPassword,
 } from "@/outerbase-cloud/api";
-import {
-  OuterbaseAPIError,
-  OuterbaseAPISession,
-} from "@/outerbase-cloud/api-type";
+import { OuterbaseAPIError } from "@/outerbase-cloud/api-type";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { LoginBaseSpaceship } from "./starbase-portal";
 
 export default function SigninPage() {
@@ -20,7 +17,6 @@ export default function SigninPage() {
   const [error, setError] = useState("");
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const [session, setSession] = useState<OuterbaseAPISession>();
 
   const onLoginClicked = useCallback(() => {
     setLoading(true);
@@ -31,11 +27,14 @@ export default function SigninPage() {
         localStorage.setItem("session", JSON.stringify(session));
 
         const { user } = await getOuterbaseSession();
+
         if (user.has_otp) {
-          localStorage.setItem("continue-redirect", "/verify");
+          router.push("/verify");
+          return;
         }
 
-        setSession(session);
+        const redirect = localStorage.getItem("continue-redirect");
+        router.push(redirect ?? "/");
       })
       .catch((e) => {
         setLoading(false);
@@ -43,19 +42,7 @@ export default function SigninPage() {
           setError(e.description);
         }
       });
-  }, [email, password]);
-
-  useEffect(() => {
-    if (!session) return;
-
-    const redirect = localStorage.getItem("continue-redirect");
-    if (redirect) {
-      router.push(redirect);
-      return;
-    }
-
-    router.push("/");
-  }, [session, router]);
+  }, [email, password, router]);
 
   return (
     <>
@@ -104,7 +91,7 @@ export default function SigninPage() {
             onChange={(e) => setPassword(e.currentTarget.value)}
           />
 
-          {error && <div className="text-red-400">{error}</div>}
+          {error && <div className="text-base text-red-400">{error}</div>}
 
           <Button
             loading={loading}
diff --git a/src/app/(dark-only)/verify/page.tsx b/src/app/(dark-only)/verify/page.tsx
index 8bf9643d..97aa1270 100644
--- a/src/app/(dark-only)/verify/page.tsx
+++ b/src/app/(dark-only)/verify/page.tsx
@@ -18,8 +18,12 @@ export default function VerifyPage() {
     setLoading(true);
     verifyOuterbaseOTP(code)
       .then(() => {
-        localStorage.removeItem("continue-redirect");
-        router.push("/");
+        if (localStorage.getItem("continue-redirect")) {
+          router.push(localStorage.getItem("continue-redirect") ?? "/");
+          localStorage.removeItem("continue-redirect");
+        } else {
+          router.push("/");
+        }
       })
       .catch((err) => setError(err.message))
       .finally(() => {
diff --git a/src/app/(outerbase)/nav-layout.tsx b/src/app/(outerbase)/nav-layout.tsx
index de1a5318..2ff5b637 100644
--- a/src/app/(outerbase)/nav-layout.tsx
+++ b/src/app/(outerbase)/nav-layout.tsx
@@ -8,18 +8,20 @@ import { Database, Plus } from "@phosphor-icons/react";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { PropsWithChildren } from "react";
 import NavigationSigninBanner from "./nav-signin-banner";
+import { useSession } from "./session-provider";
 import SidebarProfile from "./sidebar-profile";
 import { useWorkspaces } from "./workspace-provider";
 
 export default function NavigationLayout({ children }: PropsWithChildren) {
   const router = useRouter();
+  const { session } = useSession();
   const { workspaces, loading: workspaceLoading } = useWorkspaces();
   const pathname = usePathname();
   const { workspaceId } = useParams<{ workspaceId?: string }>();
 
   return (
     <div className="flex h-screen w-screen">
-      <div className="w-[250px] shrink-0 border-r overflow-hidden flex flex-col">
+      <div className="flex w-[250px] shrink-0 flex-col overflow-hidden border-r">
         <div className="px-2 py-2">
           <SidebarProfile />
         </div>
@@ -33,7 +35,7 @@ export default function NavigationLayout({ children }: PropsWithChildren) {
           />
         </div> */}
 
-        <div className="flex flex-1 flex-col border-b pb-2 overflow-scroll">
+        <div className="flex flex-1 flex-col overflow-scroll border-b pb-2">
           <SidebarMenuHeader text="Workspace" />
           <SidebarMenuItem
             selected={pathname === "/local"}
@@ -76,7 +78,14 @@ export default function NavigationLayout({ children }: PropsWithChildren) {
           <SidebarMenuItem
             text={"New Workspace"}
             icon={Plus}
-            onClick={() => router.push("/new-workspace")}
+            onClick={() => {
+              if (session?.user) {
+                router.push("/new-workspace");
+              } else {
+                localStorage.setItem("continue-redirect", "/new-workspace");
+                router.push("/signin");
+              }
+            }}
           />
         </div>
 
diff --git a/src/app/(outerbase)/page.tsx b/src/app/(outerbase)/page.tsx
index 92d8fa29..fcb67f60 100644
--- a/src/app/(outerbase)/page.tsx
+++ b/src/app/(outerbase)/page.tsx
@@ -26,6 +26,8 @@ export default function OuterbaseMainPage() {
     // Redirect to the first workspace
     if (workspaces.length > 0) {
       router.push(`/w/${workspaces[0].short_name}`);
+    } else {
+      router.push("/local");
     }
   }, [session, sessionLoading, workspaceLoading, workspaces, router]);
 
diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
index ad2d8d69..d8d2afdf 100644
--- a/src/app/(outerbase)/resource-item-helper.tsx
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -91,13 +91,13 @@ export function ResourceItemList({
 
   const baseMatchedCount = useMemo(() => {
     return bases.filter((base) =>
-      base.name.toLowerCase().includes(search.toLowerCase())
+      (base.name ?? "").toLowerCase().includes(search.toLowerCase())
     ).length;
   }, [bases, search]);
 
   const boardMatchedCount = useMemo(() => {
     return boards.filter((board) =>
-      board.name.toLowerCase().includes(search.toLowerCase())
+      (board.name ?? "").toLowerCase().includes(search.toLowerCase())
     ).length;
   }, [boards, search]);
 
@@ -146,7 +146,9 @@ export function ResourceItemList({
                     exit={{ opacity: 0, scale: 0.5 }}
                     transition={{ duration: 0.3 }}
                     className={
-                      resource.name.toLowerCase().includes(search.toLowerCase())
+                      (resource.name ?? "")
+                        .toLowerCase()
+                        .includes(search.toLowerCase())
                         ? ""
                         : "hidden"
                     }
@@ -207,7 +209,9 @@ export function ResourceItemList({
                   exit={{ opacity: 0, scale: 0.5 }}
                   transition={{ duration: 0.3 }}
                   className={
-                    resource.name.toLowerCase().includes(search.toLowerCase())
+                    (resource.name ?? "")
+                      .toLowerCase()
+                      .includes(search.toLowerCase())
                       ? ""
                       : "hidden"
                   }
diff --git a/src/app/(outerbase)/session-provider.tsx b/src/app/(outerbase)/session-provider.tsx
index d34e5903..9b3b4380 100644
--- a/src/app/(outerbase)/session-provider.tsx
+++ b/src/app/(outerbase)/session-provider.tsx
@@ -59,6 +59,7 @@ export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
   const logout = useCallback(() => {
     localStorage.removeItem("session");
     localStorage.removeItem("ob-token");
+
     router.push("/signin");
   }, [router]);
 
diff --git a/src/app/(outerbase)/workspace-provider.tsx b/src/app/(outerbase)/workspace-provider.tsx
index 833e6755..4c93e9e0 100644
--- a/src/app/(outerbase)/workspace-provider.tsx
+++ b/src/app/(outerbase)/workspace-provider.tsx
@@ -44,7 +44,12 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
   const { token } = useSession();
 
   const { data, isLoading, mutate } = useSWR(
-    token ? "workspaces" : undefined,
+    // The workspace cache depends on the token.
+    // Including the token in the key ensures the cache is user-specific.
+    // Without this, the cache might be shared between different users,
+    // causing a brief period where the workspace data is incorrect
+    // when a user logs out and another logs in.
+    token ? `/workspaces?=${token}` : undefined,
     () => {
       return getOuterbaseWorkspace();
     },

From 7e8482d8b79a395c655f879c84a51ca97094dd84 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 24 Feb 2025 19:46:24 +0700
Subject: [PATCH 084/106] allow resource to be sortable

---
 src/app/(outerbase)/resource-item-helper.tsx | 42 +++++++++++++++-----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
index d8d2afdf..b075cb0c 100644
--- a/src/app/(outerbase)/resource-item-helper.tsx
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -18,13 +18,11 @@ import {
 } from "@/outerbase-cloud/api-type";
 import {
   CalendarDots,
-  Eye,
   MagnifyingGlass,
   Pencil,
   SortAscending,
   SortDescending,
   Trash,
-  Users,
 } from "@phosphor-icons/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useMemo, useState } from "react";
@@ -68,6 +66,21 @@ export function getResourceItemPropsFromBoard(
   };
 }
 
+type SortedType = "name_asc" | "name_desc" | "recent";
+
+function sortResources(resources: ResourceItemProps[], sorted: SortedType) {
+  return resources.sort((a, b) => {
+    if (sorted === "name_asc") {
+      return (a.name ?? "").localeCompare(b.name ?? "");
+    } else if (sorted === "name_desc") {
+      return (b.name ?? "").localeCompare(a.name ?? "");
+    } else if (sorted === "recent") {
+      return b.lastUsed - a.lastUsed;
+    }
+    return 0;
+  });
+}
+
 export function ResourceItemList({
   bases,
   boards,
@@ -88,6 +101,15 @@ export function ResourceItemList({
   workspaceId?: string;
 }) {
   const [search, setSearch] = useState("");
+  const [sorted, setSorted] = useState<SortedType>("name_asc");
+
+  const sortedBases = useMemo(() => {
+    return sortResources(bases, sorted);
+  }, [sorted, bases]);
+
+  const sortedBoards = useMemo(() => {
+    return sortResources(boards, sorted);
+  }, [sorted, boards]);
 
   const baseMatchedCount = useMemo(() => {
     return bases.filter((base) =>
@@ -111,12 +133,14 @@ export function ResourceItemList({
 
         <MenuBar
           size="lg"
+          value={sorted}
+          onChange={(newSortOrder: string) =>
+            setSorted(newSortOrder as SortedType)
+          }
           items={[
-            { value: "all", content: <SortAscending size={16} /> },
-            { value: "recent", content: <SortDescending size={16} /> },
-            { value: "updated", content: <CalendarDots size={16} /> },
-            { value: "created", content: <Eye size={16} /> },
-            { value: "name", content: <Users size={16} /> },
+            { value: "name_asc", content: <SortAscending size={16} /> },
+            { value: "name_desc", content: <SortDescending size={16} /> },
+            { value: "recent", content: <CalendarDots size={16} /> },
           ]}
         />
 
@@ -135,7 +159,7 @@ export function ResourceItemList({
           <h2 className="text-base font-bold">Boards</h2>
           <div className="flex grid grid-cols-1 flex-wrap gap-4 min-[700px]:grid-cols-2 min-[900px]:grid-cols-3 min-[1200px]:grid-cols-4 min-[1500px]:grid-cols-5 min-[1800px]:grid-cols-6 min-[2100px]:grid-cols-7">
             <AnimatePresence initial={false}>
-              {boards.map((resource: ResourceItemProps) => {
+              {sortedBoards.map((resource: ResourceItemProps) => {
                 const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
 
                 return (
@@ -198,7 +222,7 @@ export function ResourceItemList({
 
         {bases.length > 0 && (
           <AnimatePresence initial={false}>
-            {bases.map((resource: ResourceItemProps) => {
+            {sortedBases.map((resource: ResourceItemProps) => {
               const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
 
               return (

From bb7c48d78fcb15999a29f9036858ceb9dae2f3d7 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 24 Feb 2025 20:24:41 +0700
Subject: [PATCH 085/106] redesing mysql new page

---
 public/libsql-logo.png                        | Bin 7746 -> 0 bytes
 .../(outerbase)/local/new-base/mysql/page.tsx |  63 +++++++++++-------
 2 files changed, 39 insertions(+), 24 deletions(-)
 delete mode 100644 public/libsql-logo.png

diff --git a/public/libsql-logo.png b/public/libsql-logo.png
deleted file mode 100644
index eee4944c12c65c556797f94888248a68ddbac6e7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 7746
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

diff --git a/src/app/(outerbase)/local/new-base/mysql/page.tsx b/src/app/(outerbase)/local/new-base/mysql/page.tsx
index 3e45d7fa..8a3a65b5 100644
--- a/src/app/(outerbase)/local/new-base/mysql/page.tsx
+++ b/src/app/(outerbase)/local/new-base/mysql/page.tsx
@@ -3,7 +3,7 @@ import { useSession } from "@/app/(outerbase)/session-provider";
 import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
 import { Button } from "@/components/orbit/button";
 import { Loader } from "@/components/orbit/loader";
-import { ArrowLeft } from "@phosphor-icons/react";
+import { ArrowLeft, Folder } from "@phosphor-icons/react";
 import Link from "next/link";
 
 function LocalMySQLCloudSection() {
@@ -12,15 +12,15 @@ function LocalMySQLCloudSection() {
 
   if (isLoading || loading) {
     return (
-      <div className="flex w-1/2 flex-col gap-4 border-r p-4">
-        <Loader />
+      <div className="flex min-h-[300px] w-1/2 flex-col items-center justify-center gap-4 p-4">
+        <Loader size={40} />
       </div>
     );
   }
 
   if (!session?.user) {
     return (
-      <div className="flex w-1/2 flex-col gap-4 border-r p-4">
+      <div className="flex w-1/2 flex-col gap-4 p-4">
         <h1 className="text-lg font-bold">Outerbase Cloud</h1>
 
         <div>
@@ -49,15 +49,20 @@ function LocalMySQLCloudSection() {
   }
 
   return (
-    <div className="flex w-1/2 flex-col gap-4 border-r p-4">
-      <h1 className="text-lg font-bold">Outerbase Cloud</h1>
-      <p>Please select the workspace</p>
+    <div className="flex w-1/2 flex-col gap-2 p-4">
+      <div className="mb-4">
+        <h1 className="text-2xl font-bold">Outerbase Cloud</h1>
+        <p>Please select the workspace</p>
+      </div>
+
       {(workspaces ?? []).map((workspace) => {
         return (
           <Link
             key={workspace.id}
+            className="bg-secondary hover:border-primary flex cursor-pointer items-center gap-2 rounded border border-2 p-4 text-base"
             href={`/w/${workspace.short_name}/new-base/mysql`}
           >
+            <Folder weight="bold" size={20} />
             {workspace.name}
           </Link>
         );
@@ -76,30 +81,40 @@ export default function LocalMySQLNewBasePage() {
         </Button>
       </div>
 
-      <div className="mb-12 p-4">
-        It is not possible to run MySQL from browser.
-        <br /> Please use the desktop app or our cloud services.
+      <div className="mb-8 p-4 text-xl leading-8">
+        Running MySQL from a browser is not possible.
+        <br /> Please use the desktop app or our cloud services instead.
       </div>
 
-      <div className="flex">
+      <div className="mb-8 flex">
         <LocalMySQLCloudSection />
 
         <div className="flex w-1/2 flex-col gap-4 p-4">
-          <h1 className="text-lg font-bold">Desktop App</h1>
-
-          <div>Connect locally with our desktop app</div>
-
           <div>
-            <Button
-              variant="primary"
-              className="inline-flex"
-              size="lg"
-              href="https://github.com/outerbase/studio-desktop/releases"
-              as="link"
-            >
-              Download Desktop App
-            </Button>
+            <h1 className="text-2xl font-bold">Desktop App</h1>
+            <p>Connect locally with our desktop app</p>
           </div>
+
+          <Link
+            href="https://github.com/outerbase/studio-desktop/releases"
+            className="relative w-full"
+          >
+            <img
+              src="/outerbase-banner.jpg"
+              alt=""
+              className="w-full rounded-lg"
+            />
+
+            <div className="bg-opacity-50 absolute right-0 bottom-0 left-0 flex cursor-pointer flex-col gap-2 rounded-lg bg-black p-4 text-white">
+              <div className="text-2xl font-bold">Download the desktop app</div>
+              <p className="text-base">
+                Outerbase Studio Desktop is a lightweight Electron wrapper for
+                the Outerbase Studio web version. It enables support for drivers
+                that aren&apos;t feasible in a browser environment, such as
+                MySQL and PostgreSQL.
+              </p>
+            </div>
+          </Link>
         </div>
       </div>
     </div>

From 27852d5d61e4868b1997a84652c8d9ae97691e74 Mon Sep 17 00:00:00 2001
From: Sokphal Adam <31284849+sokphaladam@users.noreply.github.com>
Date: Mon, 24 Feb 2025 20:59:57 +0700
Subject: [PATCH 086/106] Sign up outerbase (#374)

* Sign up outerbase

* refactor: streamline session handling and verification flow in signup components
---
 src/app/(dark-only)/signin/page.tsx        |   9 ++
 src/app/(dark-only)/signup/page.tsx        |  19 +++
 src/app/(dark-only)/signup/signup-form.tsx | 147 +++++++++++++++++++++
 src/app/(dark-only)/signup/signup-otp.tsx  | 101 ++++++++++++++
 src/outerbase-cloud/api-type.ts            |   1 +
 src/outerbase-cloud/api.ts                 |  30 +++++
 6 files changed, 307 insertions(+)
 create mode 100644 src/app/(dark-only)/signup/page.tsx
 create mode 100644 src/app/(dark-only)/signup/signup-form.tsx
 create mode 100644 src/app/(dark-only)/signup/signup-otp.tsx

diff --git a/src/app/(dark-only)/signin/page.tsx b/src/app/(dark-only)/signin/page.tsx
index c28659b0..5661f39a 100644
--- a/src/app/(dark-only)/signin/page.tsx
+++ b/src/app/(dark-only)/signin/page.tsx
@@ -107,6 +107,15 @@ export default function SigninPage() {
         <Link href="/password_reset" className="text-sm">
           Forget password
         </Link>
+        <div className="mt-4 text-center text-sm text-neutral-400">
+          {`Don't have an account?`}{" "}
+          <Link
+            className="text-neutral-300 transition delay-75 ease-in-out hover:text-neutral-100"
+            href={"/signup"}
+          >
+            Sign Up
+          </Link>
+        </div>
       </div>
 
       <LoginBaseSpaceship />
diff --git a/src/app/(dark-only)/signup/page.tsx b/src/app/(dark-only)/signup/page.tsx
new file mode 100644
index 00000000..c1a9b88d
--- /dev/null
+++ b/src/app/(dark-only)/signup/page.tsx
@@ -0,0 +1,19 @@
+"use client";
+import { useSearchParams } from "next/navigation";
+import { LoginBaseSpaceship } from "../signin/starbase-portal";
+import { SignupForm } from "./signup-form";
+import { SignupOtp } from "./signup-otp";
+
+//https://app.outerbase.com/api/v1/auth/register
+export default function SignupPage() {
+  const searchParams = useSearchParams();
+
+  const verify = searchParams.get("verify") === "true";
+
+  return (
+    <>
+      {verify ? <SignupOtp /> : <SignupForm />}
+      <LoginBaseSpaceship />
+    </>
+  );
+}
diff --git a/src/app/(dark-only)/signup/signup-form.tsx b/src/app/(dark-only)/signup/signup-form.tsx
new file mode 100644
index 00000000..9b6ef272
--- /dev/null
+++ b/src/app/(dark-only)/signup/signup-form.tsx
@@ -0,0 +1,147 @@
+"use client";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import {
+  registerOuterbaseByPassword,
+  verifyOuterbaseRequestEmail,
+} from "@/outerbase-cloud/api";
+import {
+  OuterbaseAPIError,
+  OuterbaseAPISession,
+} from "@/outerbase-cloud/api-type";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+
+export function SignupForm() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [session, setSession] = useState<OuterbaseAPISession>();
+
+  const onRegisterClicked = useCallback(() => {
+    setLoading(true);
+
+    registerOuterbaseByPassword(email, password)
+      .then((session) => {
+        localStorage.setItem("ob-token", session.token);
+        localStorage.setItem("session", JSON.stringify({ ...session, email }));
+        //Alway error 403
+        verifyOuterbaseRequestEmail().then(() => {
+          setLoading(false);
+          localStorage.setItem("continue-redirect", "/signup?verify=true");
+          setSession(session);
+        });
+      })
+      .catch((e) => {
+        setLoading(false);
+        if (e instanceof OuterbaseAPIError) {
+          setError(e.description);
+        }
+      });
+  }, [email, password]);
+
+  useEffect(() => {
+    if (!session) return;
+
+    const redirect = localStorage.getItem("continue-redirect");
+    if (redirect) {
+      router.push(redirect);
+      return;
+    }
+
+    router.push("/");
+  }, [session, router]);
+
+  return (
+    <div
+      className="absolute left-[10%] z-2 w-[400px]"
+      style={{
+        top: "50%",
+        transform: "translateY(-50%)",
+      }}
+    >
+      <div className="flex flex-col gap-4 rounded-lg border-neutral-800 bg-neutral-900 p-8 md:m-0">
+        <div className="mb-8 flex flex-col items-center text-white">
+          <svg
+            fill="currentColor"
+            viewBox="75 75 350 350"
+            className="mb-2 h-14 w-14 text-black dark:text-white"
+          >
+            <path d="M249.51,146.58c-58.7,0-106.45,49.37-106.45,110.04c0,60.68,47.76,110.04,106.45,110.04 c58.7,0,106.46-49.37,106.46-110.04C355.97,195.95,308.21,146.58,249.51,146.58z M289.08,332.41l-0.02,0.04l-0.51,0.65 c-5.55,7.06-12.37,9.35-17.11,10.02c-1.23,0.17-2.5,0.26-3.78,0.26c-12.94,0-25.96-9.09-37.67-26.29 c-9.56-14.05-17.84-32.77-23.32-52.71c-9.78-35.61-8.67-68.08,2.83-82.74c5.56-7.07,12.37-9.35,17.11-10.02 c13.46-1.88,27.16,6.2,39.64,23.41c10.29,14.19,19.22,33.83,25.12,55.32C301,285.35,300.08,317.46,289.08,332.41z"></path>
+          </svg>
+
+          <h1 className="text-2xl font-bold">Create your Account</h1>
+          <p>Sign up to get started with Outerbase</p>
+        </div>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+          }}
+          className="flex flex-col gap-4"
+        >
+          <LabelInput
+            autoFocus
+            label="Work Email"
+            size="lg"
+            value={email}
+            placeholder="Enter your email address"
+            onChange={(e) => setEmail(e.currentTarget.value)}
+          />
+
+          <LabelInput
+            label="Password"
+            size="lg"
+            value={password}
+            type="password"
+            placeholder="Password"
+            onChange={(e) => setPassword(e.currentTarget.value)}
+          />
+
+          {error && <div className="text-red-400">{error}</div>}
+
+          <Button
+            loading={loading}
+            onClick={onRegisterClicked}
+            variant="primary"
+            size="lg"
+            className="justify-center"
+          >
+            Continue with email
+          </Button>
+        </form>
+        <div className="mt-4 text-center text-sm text-neutral-400">
+          Already have an account?{" "}
+          <Link
+            className="text-neutral-300 transition delay-75 ease-in-out hover:text-neutral-100"
+            href={"/signin"}
+          >
+            Sign In
+          </Link>
+        </div>
+      </div>
+      <div className="mt-4 w-[400px] text-center text-sm text-neutral-500">
+        By signing up, you agree to our
+        <br />
+        <Link
+          className="text-neutral-300 hover:text-white"
+          target="_blank"
+          href="https://outerbase.com/terms"
+        >
+          Terms of Service
+        </Link>{" "}
+        and{" "}
+        <Link
+          className="text-neutral-300 hover:text-white"
+          target="_blank"
+          href="https://outerbase.com/privacy"
+        >
+          Privacy Policy
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(dark-only)/signup/signup-otp.tsx b/src/app/(dark-only)/signup/signup-otp.tsx
new file mode 100644
index 00000000..3eee92d1
--- /dev/null
+++ b/src/app/(dark-only)/signup/signup-otp.tsx
@@ -0,0 +1,101 @@
+"use client";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import { verifyOuterbaseSubmitEmail } from "@/outerbase-cloud/api";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+
+export function SignupOtp() {
+  const [code, setCode] = useState("");
+  const [error, setError] = useState("");
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [email, setEmail] = useState<string>("");
+
+  const onVerifyOTP = useCallback(() => {
+    if (code.length < 6) return;
+    setLoading(true);
+    verifyOuterbaseSubmitEmail(code)
+      .then(() => {
+        localStorage.removeItem("continue-redirect");
+        router.push("/");
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [code, router]);
+
+  useEffect(() => {
+    const session = localStorage.getItem("session");
+    if (!session) return;
+    const user = JSON.parse(session);
+    setEmail(user.email);
+  }, []);
+
+  return (
+    <div
+      className="absolute left-[10%] z-2 flex w-[400px] flex-col gap-4 rounded-lg border-neutral-800 bg-neutral-900 p-8 md:m-0"
+      style={{
+        top: "50%",
+        transform: "translateY(-50%)",
+      }}
+    >
+      <div className="mb-8 flex flex-col items-center text-white">
+        <svg
+          fill="currentColor"
+          viewBox="75 75 350 350"
+          className="mb-2 h-14 w-14 text-black dark:text-white"
+        >
+          <path d="M249.51,146.58c-58.7,0-106.45,49.37-106.45,110.04c0,60.68,47.76,110.04,106.45,110.04 c58.7,0,106.46-49.37,106.46-110.04C355.97,195.95,308.21,146.58,249.51,146.58z M289.08,332.41l-0.02,0.04l-0.51,0.65 c-5.55,7.06-12.37,9.35-17.11,10.02c-1.23,0.17-2.5,0.26-3.78,0.26c-12.94,0-25.96-9.09-37.67-26.29 c-9.56-14.05-17.84-32.77-23.32-52.71c-9.78-35.61-8.67-68.08,2.83-82.74c5.56-7.07,12.37-9.35,17.11-10.02 c13.46-1.88,27.16,6.2,39.64,23.41c10.29,14.19,19.22,33.83,25.12,55.32C301,285.35,300.08,317.46,289.08,332.41z"></path>
+        </svg>
+
+        <h1 className="text-2xl font-bold">Check your email</h1>
+        <p className="text-center text-base text-neutral-300">
+          We&apos;ve sent a link to {email ?? ""}
+        </p>
+      </div>
+
+      <form
+        onSubmit={(e) => {
+          onVerifyOTP();
+          e.preventDefault();
+        }}
+        className="flex flex-col gap-4"
+      >
+        <LabelInput
+          required
+          label="Verification code"
+          size="lg"
+          value={code}
+          placeholder="XXXXXX"
+          onChange={(e) => setCode(e.currentTarget.value)}
+        />
+
+        {error && <div className="text-red-400">{error}</div>}
+
+        <Button
+          disabled={code.length < 6}
+          loading={loading}
+          onClick={onVerifyOTP}
+          variant="primary"
+          size="lg"
+          className="justify-center"
+        >
+          Verify
+        </Button>
+      </form>
+
+      <div className="text-center font-sans text-sm">
+        Still having trouble?{" "}
+        <Link
+          href="mailto:hello@outerbase.com"
+          className="text-primary border-b"
+        >
+          Contact support
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/outerbase-cloud/api-type.ts b/src/outerbase-cloud/api-type.ts
index 188ed288..7827ad11 100644
--- a/src/outerbase-cloud/api-type.ts
+++ b/src/outerbase-cloud/api-type.ts
@@ -133,6 +133,7 @@ export interface OuterbaseAPISession {
   oauth_verified_at: string | null;
   expires_at: string | null;
   token: string;
+  email_verified_at: string | null;
 }
 
 export interface OuterbaseAPIUser {
diff --git a/src/outerbase-cloud/api.ts b/src/outerbase-cloud/api.ts
index 5ad084b0..6c0dea4f 100644
--- a/src/outerbase-cloud/api.ts
+++ b/src/outerbase-cloud/api.ts
@@ -216,6 +216,36 @@ export async function loginOuterbaseByPassword(
   });
 }
 
+export async function registerOuterbaseByPassword(
+  email: string,
+  password: string
+) {
+  return requestOuterbase<OuterbaseAPISession>(
+    "/api/v1/auth/register",
+    "POST",
+    {
+      email,
+      password,
+    }
+  );
+}
+
+export async function verifyOuterbaseRequestEmail() {
+  return requestOuterbase("/api/v1/me/email/verify/request", "POST");
+}
+
+export async function verifyOuterbaseSubmitEmail(
+  email_confirmation_token: string
+) {
+  return requestOuterbase<{ response: unknown; success: boolean }>(
+    "/api/v1/me/email/verify/submit",
+    "POST",
+    {
+      email_confirmation_token,
+    }
+  );
+}
+
 export async function getOuterbaseEmbedChart(
   chartId: string,
   apiKey: string

From e39a9e63073cb90014b0205b2ee58fa9a9f9f564 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Mon, 24 Feb 2025 21:35:40 +0700
Subject: [PATCH 087/106] make logout from outerbase more smooth

---
 .../(outerbase)/account/account-footer.tsx    |  8 +++---
 src/app/(outerbase)/nav-profile.tsx           |  5 +---
 src/app/(outerbase)/session-provider.tsx      | 13 +++++-----
 src/app/(outerbase)/sidebar-profile.tsx       |  5 +---
 src/app/(outerbase)/signout/page.tsx          | 25 +++++++++++++++++++
 5 files changed, 39 insertions(+), 17 deletions(-)
 create mode 100644 src/app/(outerbase)/signout/page.tsx

diff --git a/src/app/(outerbase)/account/account-footer.tsx b/src/app/(outerbase)/account/account-footer.tsx
index 6a40b343..3fb1c359 100644
--- a/src/app/(outerbase)/account/account-footer.tsx
+++ b/src/app/(outerbase)/account/account-footer.tsx
@@ -12,11 +12,13 @@ import {
 import { isValidEmail } from "@/lib/validation";
 import { deleteOuterbaseUser } from "@/outerbase-cloud/api-account";
 import { Check, Copy } from "lucide-react";
+import { useRouter } from "next/router";
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 
 export default function AccountFooter() {
-  const { session, logout } = useSession();
+  const { session } = useSession();
+  const router = useRouter();
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [email, setEmail] = useState("");
@@ -44,13 +46,13 @@ export default function AccountFooter() {
     deleteOuterbaseUser()
       .then(() => {
         onClose();
-        logout();
+        router.push("/signout");
       })
       .catch((err) => {
         setLoading(false);
         toast.error(err.message);
       });
-  }, [logout]);
+  }, [router]);
 
   const fullName = useMemo(() => {
     if (!session) return;
diff --git a/src/app/(outerbase)/nav-profile.tsx b/src/app/(outerbase)/nav-profile.tsx
index deae9f9c..2c326d42 100644
--- a/src/app/(outerbase)/nav-profile.tsx
+++ b/src/app/(outerbase)/nav-profile.tsx
@@ -20,10 +20,7 @@ export default function NavigationProfile() {
   const theme = forcedTheme ?? resolvedTheme;
 
   const onLogoutClicked = useCallback(() => {
-    // Remove all the session data
-    localStorage.removeItem("session");
-    localStorage.removeItem("ob-token");
-    router.push("/signin");
+    router.push("/signout");
   }, [router]);
 
   const onThemeToggleClicked = useCallback(
diff --git a/src/app/(outerbase)/session-provider.tsx b/src/app/(outerbase)/session-provider.tsx
index 9b3b4380..58442ab1 100644
--- a/src/app/(outerbase)/session-provider.tsx
+++ b/src/app/(outerbase)/session-provider.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { useRouter } from "next/navigation";
 import {
   createContext,
   PropsWithChildren,
@@ -35,11 +34,14 @@ export function useSession() {
 }
 
 export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
-  const router = useRouter();
   const token =
     typeof window !== "undefined" ? localStorage.getItem("ob-token") || "" : "";
 
-  const { data, isLoading } = useSWR(
+  const {
+    data,
+    isLoading,
+    mutate: mutateSession,
+  } = useSWR(
     token ? "session-" + token : undefined,
     () => {
       return getOuterbaseSession();
@@ -59,9 +61,8 @@ export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
   const logout = useCallback(() => {
     localStorage.removeItem("session");
     localStorage.removeItem("ob-token");
-
-    router.push("/signin");
-  }, [router]);
+    mutateSession(undefined, false);
+  }, [mutateSession]);
 
   return (
     <OuterbaseSessionContext.Provider
diff --git a/src/app/(outerbase)/sidebar-profile.tsx b/src/app/(outerbase)/sidebar-profile.tsx
index 0aacd697..d82a5425 100644
--- a/src/app/(outerbase)/sidebar-profile.tsx
+++ b/src/app/(outerbase)/sidebar-profile.tsx
@@ -27,10 +27,7 @@ export default function SidebarProfile() {
   const theme = forcedTheme ?? resolvedTheme;
 
   const onLogoutClicked = useCallback(() => {
-    // Remove all the session data
-    localStorage.removeItem("session");
-    localStorage.removeItem("ob-token");
-    router.refresh();
+    router.push("/signout");
   }, [router]);
 
   const onThemeToggleClicked = useCallback(
diff --git a/src/app/(outerbase)/signout/page.tsx b/src/app/(outerbase)/signout/page.tsx
new file mode 100644
index 00000000..79c0aa7f
--- /dev/null
+++ b/src/app/(outerbase)/signout/page.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Loader } from "@/components/orbit/loader";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useSession } from "../session-provider";
+
+export default function SignoutPage() {
+  const { logout } = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    logout();
+    router.push("/");
+  }, [router, logout]);
+
+  return (
+    <div className="flex h-screen w-screen items-center justify-center">
+      <Loader size={40} />
+      <p>Signing out....</p>
+    </div>
+  );
+}

From c9de5ae4af118aeb8cc3f1d4f38a99568aca5b7c Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 09:06:00 +0700
Subject: [PATCH 088/106] remove unused library

---
 package-lock.json                             | 473 +-----------------
 package.json                                  |  10 +-
 .../playground/mysql-playground-button.tsx    |  36 --
 src/app/(public)/playground/page.tsx          |  95 ----
 4 files changed, 2 insertions(+), 612 deletions(-)
 delete mode 100644 src/app/(public)/playground/mysql-playground-button.tsx
 delete mode 100644 src/app/(public)/playground/page.tsx

diff --git a/package-lock.json b/package-lock.json
index 2ab360da..5e9da835 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,6 @@
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/modifiers": "^7.0.0",
         "@dnd-kit/sortable": "^8.0.0",
-        "@justmiracle/result": "^1.2.0",
         "@lezer/common": "^1.2.1",
         "@lezer/lr": "^1.4.0",
         "@libsql/client": "^0.5.3",
@@ -48,8 +47,6 @@
         "@radix-ui/react-tooltip": "^1.0.7",
         "@replit/codemirror-indentation-markers": "^6.5.3",
         "@t3-oss/env-nextjs": "^0.9.2",
-        "@tiptap/core": "^2.3.0",
-        "@tiptap/react": "^2.3.0",
         "@types/mdx": "^2.0.13",
         "@types/react-grid-layout": "^1.3.5",
         "@uiw/codemirror-extensions-langs": "^4.21.24",
@@ -61,7 +58,6 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "cmdk": "^1.0.4",
-        "cookies-next": "^4.3.0",
         "deep-equal": "^2.2.3",
         "dexie": "^4.0.8",
         "dotenv": "^16.4.5",
@@ -3214,12 +3210,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@justmiracle/result": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@justmiracle/result/-/result-1.2.0.tgz",
-      "integrity": "sha512-MyyfTSloRNvdB1EnzSDiOeyPtdXeK+gp1d2zxqcjq/XHoagsIzo7ImEJCKIUkOTlmuEInPfYZrcAU7sdeCWqkg==",
-      "license": "MIT"
-    },
     "node_modules/@lezer/common": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
@@ -4531,16 +4521,6 @@
         "react-dom": ">= 16.8"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
@@ -5662,13 +5642,6 @@
       "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
       "license": "MIT"
     },
-    "node_modules/@remirror/core-constants": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
-      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@replit/codemirror-indentation-markers": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.5.3.tgz",
@@ -6234,107 +6207,6 @@
         }
       }
     },
-    "node_modules/@tiptap/core": {
-      "version": "2.11.3",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.11.3.tgz",
-      "integrity": "sha512-ibfi6U1gMRLo319Re6olv8uAuxtUpK343ygcVoZrJ8O4sqRnU9CEqPAM+n7YAKlOks1+Di0sTheIxZRak7Pj4g==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/ueberdosis"
-      },
-      "peerDependencies": {
-        "@tiptap/pm": "^2.7.0"
-      }
-    },
-    "node_modules/@tiptap/extension-bubble-menu": {
-      "version": "2.11.3",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.11.3.tgz",
-      "integrity": "sha512-KOAy9zCzqssJO7cGIwZNgv2hFyxrZ2AHoWptICPA79nVZrHQQw2ZP1/FDTR8cDEZzLQMbpgGqQhUhjZcAs3/zQ==",
-      "license": "MIT",
-      "dependencies": {
-        "tippy.js": "^6.3.7"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/ueberdosis"
-      },
-      "peerDependencies": {
-        "@tiptap/core": "^2.7.0",
-        "@tiptap/pm": "^2.7.0"
-      }
-    },
-    "node_modules/@tiptap/extension-floating-menu": {
-      "version": "2.11.3",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.11.3.tgz",
-      "integrity": "sha512-Za1x475cvv+URegCsoDr8rZI5GIoC4N6rHg/xqmozY4bA326Ko1cMrUbwpVF6p17nerDGAMCIstZM7SSUQdNSA==",
-      "license": "MIT",
-      "dependencies": {
-        "tippy.js": "^6.3.7"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/ueberdosis"
-      },
-      "peerDependencies": {
-        "@tiptap/core": "^2.7.0",
-        "@tiptap/pm": "^2.7.0"
-      }
-    },
-    "node_modules/@tiptap/pm": {
-      "version": "2.11.3",
-      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.11.3.tgz",
-      "integrity": "sha512-AEpiWvYmXdELpuGGhX6lS2aU155ANwS7WbQ/+/SFqH3YIYHjgUzP8UnY6KSiEBI7a7kX4TWhG84mWrzPA3dPaw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-changeset": "^2.2.1",
-        "prosemirror-collab": "^1.3.1",
-        "prosemirror-commands": "^1.6.2",
-        "prosemirror-dropcursor": "^1.8.1",
-        "prosemirror-gapcursor": "^1.3.2",
-        "prosemirror-history": "^1.4.1",
-        "prosemirror-inputrules": "^1.4.0",
-        "prosemirror-keymap": "^1.2.2",
-        "prosemirror-markdown": "^1.13.1",
-        "prosemirror-menu": "^1.2.4",
-        "prosemirror-model": "^1.23.0",
-        "prosemirror-schema-basic": "^1.2.3",
-        "prosemirror-schema-list": "^1.4.1",
-        "prosemirror-state": "^1.4.3",
-        "prosemirror-tables": "^1.6.1",
-        "prosemirror-trailing-node": "^3.0.0",
-        "prosemirror-transform": "^1.10.2",
-        "prosemirror-view": "^1.37.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/ueberdosis"
-      }
-    },
-    "node_modules/@tiptap/react": {
-      "version": "2.11.3",
-      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.11.3.tgz",
-      "integrity": "sha512-tNY/xJ7swV1Ffc6W5CSEWJnBo3grDapkZnd2udSTJ7/zYMUe+vSN2bcdKga2Zo2rAC0WFuLUl27iUhrZ29FFuQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@tiptap/extension-bubble-menu": "^2.11.3",
-        "@tiptap/extension-floating-menu": "^2.11.3",
-        "@types/use-sync-external-store": "^0.0.6",
-        "fast-deep-equal": "^3",
-        "use-sync-external-store": "^1"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/ueberdosis"
-      },
-      "peerDependencies": {
-        "@tiptap/core": "^2.7.0",
-        "@tiptap/pm": "^2.7.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -6445,12 +6317,6 @@
         "@babel/types": "^7.20.7"
       }
     },
-    "node_modules/@types/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
-      "license": "MIT"
-    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
@@ -6662,13 +6528,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/linkify-it": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
-      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@types/lodash": {
       "version": "4.17.14",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz",
@@ -6676,17 +6535,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/markdown-it": {
-      "version": "14.1.2",
-      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
-      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/linkify-it": "^5",
-        "@types/mdurl": "^2"
-      }
-    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -6696,13 +6544,6 @@
         "@types/unist": "*"
       }
     },
-    "node_modules/@types/mdurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
-      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@types/mdx": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
@@ -6833,12 +6674,6 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
-    "node_modules/@types/use-sync-external-store": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
-      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
-      "license": "MIT"
-    },
     "node_modules/@types/wicg-file-system-access": {
       "version": "2023.10.5",
       "resolved": "https://registry.npmjs.org/@types/wicg-file-system-access/-/wicg-file-system-access-2023.10.5.tgz",
@@ -8361,25 +8196,6 @@
       "devOptional": true,
       "license": "MIT"
     },
-    "node_modules/cookie": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
-      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookies-next": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/cookies-next/-/cookies-next-4.3.0.tgz",
-      "integrity": "sha512-XxeCwLR30cWwRd94sa9X5lRCDLVujtx73tv+N0doQCFIDl83fuuYdxbu/WQUt9aSV7EJx7bkMvJldjvzuFqr4w==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/cookie": "^0.6.0",
-        "cookie": "^0.7.0"
-      }
-    },
     "node_modules/copy-anything": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
@@ -9263,6 +9079,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -13743,16 +13560,6 @@
       "devOptional": true,
       "license": "MIT"
     },
-    "node_modules/linkify-it": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
-      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "uc.micro": "^2.0.0"
-      }
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -13909,24 +13716,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/markdown-it": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
-      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "argparse": "^2.0.1",
-        "entities": "^4.4.0",
-        "linkify-it": "^5.0.0",
-        "mdurl": "^2.0.0",
-        "punycode.js": "^2.3.1",
-        "uc.micro": "^2.1.0"
-      },
-      "bin": {
-        "markdown-it": "bin/markdown-it.mjs"
-      }
-    },
     "node_modules/material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -14111,13 +13900,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
-      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/memfs": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
@@ -15328,13 +15110,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/orderedmap": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
-      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/oslo": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/oslo/-/oslo-1.2.1.tgz",
@@ -15826,219 +15601,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/prosemirror-changeset": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz",
-      "integrity": "sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-transform": "^1.0.0"
-      }
-    },
-    "node_modules/prosemirror-collab": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
-      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-state": "^1.0.0"
-      }
-    },
-    "node_modules/prosemirror-commands": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.6.2.tgz",
-      "integrity": "sha512-0nDHH++qcf/BuPLYvmqZTUUsPJUCPBUXt0J1ErTcDIS369CTp773itzLGIgIXG4LJXOlwYCr44+Mh4ii6MP1QA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-model": "^1.0.0",
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.10.2"
-      }
-    },
-    "node_modules/prosemirror-dropcursor": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz",
-      "integrity": "sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.1.0",
-        "prosemirror-view": "^1.1.0"
-      }
-    },
-    "node_modules/prosemirror-gapcursor": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
-      "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-keymap": "^1.0.0",
-        "prosemirror-model": "^1.0.0",
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-view": "^1.0.0"
-      }
-    },
-    "node_modules/prosemirror-history": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz",
-      "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-state": "^1.2.2",
-        "prosemirror-transform": "^1.0.0",
-        "prosemirror-view": "^1.31.0",
-        "rope-sequence": "^1.3.0"
-      }
-    },
-    "node_modules/prosemirror-inputrules": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz",
-      "integrity": "sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.0.0"
-      }
-    },
-    "node_modules/prosemirror-keymap": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz",
-      "integrity": "sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-state": "^1.0.0",
-        "w3c-keyname": "^2.2.0"
-      }
-    },
-    "node_modules/prosemirror-markdown": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.1.tgz",
-      "integrity": "sha512-Sl+oMfMtAjWtlcZoj/5L/Q39MpEnVZ840Xo330WJWUvgyhNmLBLN7MsHn07s53nG/KImevWHSE6fEj4q/GihHw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/markdown-it": "^14.0.0",
-        "markdown-it": "^14.0.0",
-        "prosemirror-model": "^1.20.0"
-      }
-    },
-    "node_modules/prosemirror-menu": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz",
-      "integrity": "sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "crelt": "^1.0.0",
-        "prosemirror-commands": "^1.0.0",
-        "prosemirror-history": "^1.0.0",
-        "prosemirror-state": "^1.0.0"
-      }
-    },
-    "node_modules/prosemirror-model": {
-      "version": "1.24.1",
-      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.24.1.tgz",
-      "integrity": "sha512-YM053N+vTThzlWJ/AtPtF1j0ebO36nvbmDy4U7qA2XQB8JVaQp1FmB9Jhrps8s+z+uxhhVTny4m20ptUvhk0Mg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "orderedmap": "^2.0.0"
-      }
-    },
-    "node_modules/prosemirror-schema-basic": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.3.tgz",
-      "integrity": "sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-model": "^1.19.0"
-      }
-    },
-    "node_modules/prosemirror-schema-list": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.0.tgz",
-      "integrity": "sha512-gg1tAfH1sqpECdhIHOA/aLg2VH3ROKBWQ4m8Qp9mBKrOxQRW61zc+gMCI8nh22gnBzd1t2u1/NPLmO3nAa3ssg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-model": "^1.0.0",
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.7.3"
-      }
-    },
-    "node_modules/prosemirror-state": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
-      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-model": "^1.0.0",
-        "prosemirror-transform": "^1.0.0",
-        "prosemirror-view": "^1.27.0"
-      }
-    },
-    "node_modules/prosemirror-tables": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.6.2.tgz",
-      "integrity": "sha512-97dKocVLrEVTQjZ4GBLdrrMw7Gv3no8H8yMwf5IRM9OoHrzbWpcH5jJxYgNQIRCtdIqwDctT1HdMHrGTiwp1dQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-keymap": "^1.2.2",
-        "prosemirror-model": "^1.24.1",
-        "prosemirror-state": "^1.4.3",
-        "prosemirror-transform": "^1.10.2",
-        "prosemirror-view": "^1.37.1"
-      }
-    },
-    "node_modules/prosemirror-trailing-node": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
-      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@remirror/core-constants": "3.0.0",
-        "escape-string-regexp": "^4.0.0"
-      },
-      "peerDependencies": {
-        "prosemirror-model": "^1.22.1",
-        "prosemirror-state": "^1.4.2",
-        "prosemirror-view": "^1.33.8"
-      }
-    },
-    "node_modules/prosemirror-transform": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.2.tgz",
-      "integrity": "sha512-2iUq0wv2iRoJO/zj5mv8uDUriOHWzXRnOTVgCzSXnktS/2iQRa3UUQwVlkBlYZFtygw6Nh1+X4mGqoYBINn5KQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-model": "^1.21.0"
-      }
-    },
-    "node_modules/prosemirror-view": {
-      "version": "1.37.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.37.2.tgz",
-      "integrity": "sha512-ApcyrfV/cRcaL65on7TQcfWElwLyOgIjnIynfAuV+fIdlpbSvSWRwfuPaH7T5mo4AbO/FID29qOtjiDIKGWyog==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "prosemirror-model": "^1.20.0",
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.1.0"
-      }
-    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
@@ -16061,16 +15623,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/punycode.js": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
-      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/pure-rand": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
@@ -16707,13 +16259,6 @@
         "node": "*"
       }
     },
-    "node_modules/rope-sequence": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
-      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -17673,15 +17218,6 @@
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
       "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
     },
-    "node_modules/tippy.js": {
-      "version": "6.3.7",
-      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
-      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@popperjs/core": "^2.9.0"
-      }
-    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -18453,13 +17989,6 @@
         "node": ">=14.17"
       }
     },
-    "node_modules/uc.micro": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
-      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
diff --git a/package.json b/package.json
index 0de4d469..bbbe7520 100644
--- a/package.json
+++ b/package.json
@@ -6,14 +6,11 @@
     "dev": "next dev -p 3008",
     "dev-https": "next dev --experimental-https",
     "build": "next build",
-    "build-with-migrate": "npm run db:migrate && next build",
     "start": "next start",
     "tsc": "tsc --noEmit --skipLibCheck",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
-    "db:generate": "drizzle-kit generate:sqlite",
-    "db:migrate": "tsx src/db/migrate.ts",
     "generate-random-key": "tsx src/cli/generate-aes-key.ts",
     "staged": "npm run typecheck && npm run lint && jest",
     "typecheck": "tsc --noEmit --skipLibCheck",
@@ -21,8 +18,7 @@
     "format:fix": "prettier --write .",
     "lint": "next lint",
     "lint:fix": "next lint --fix .",
-    "dialect": "node build-dialect.js",
-    "remove-branch": "npx git-removed-branches --prune -f"
+    "dialect": "node build-dialect.js"
   },
   "overrides": {
     "@libsql/client": "^0.5.3"
@@ -35,7 +31,6 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@justmiracle/result": "^1.2.0",
     "@lezer/common": "^1.2.1",
     "@lezer/lr": "^1.4.0",
     "@libsql/client": "^0.5.3",
@@ -68,8 +63,6 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@replit/codemirror-indentation-markers": "^6.5.3",
     "@t3-oss/env-nextjs": "^0.9.2",
-    "@tiptap/core": "^2.3.0",
-    "@tiptap/react": "^2.3.0",
     "@types/mdx": "^2.0.13",
     "@types/react-grid-layout": "^1.3.5",
     "@uiw/codemirror-extensions-langs": "^4.21.24",
@@ -81,7 +74,6 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.4",
-    "cookies-next": "^4.3.0",
     "deep-equal": "^2.2.3",
     "dexie": "^4.0.8",
     "dotenv": "^16.4.5",
diff --git a/src/app/(public)/playground/mysql-playground-button.tsx b/src/app/(public)/playground/mysql-playground-button.tsx
deleted file mode 100644
index 08b39e41..00000000
--- a/src/app/(public)/playground/mysql-playground-button.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-import { MySQLIcon } from "@/components/icons/outerbase-icon";
-import { useRouter } from "next/navigation";
-
-export default function MySQLPlaygroundButton() {
-  const router = useRouter();
-
-  return (
-    <button
-      className={
-        "text-left bg-primary text-primary-foreground p-3 px-4 rounded-lg text-sm gap-2 flex flex-col hover:bg-gray-300 w-[200px]"
-      }
-      onClick={() => {
-        // Random 8 character alphabeth string
-        const roomName = new Array(8)
-          .fill("a")
-          .map(
-            () => "abcdefghijklmnopqrstuvwxyz"[Math.floor(Math.random() * 26)]
-          )
-          .join("");
-
-        router.push(`/playground/mysql/${roomName}`);
-      }}
-    >
-      <div className="flex gap-2">
-        <MySQLIcon className="w-10 h-10" />
-        <div className="flex flex-col justify-center">
-          <div className="font-bold text-md">MySQL</div>
-          <div className="text-xs">Playground</div>
-        </div>
-      </div>
-
-      <p className="text-xs text-gray-500">Spin up a cloud MySQL sandbox.</p>
-    </button>
-  );
-}
diff --git a/src/app/(public)/playground/page.tsx b/src/app/(public)/playground/page.tsx
deleted file mode 100644
index ebf40259..00000000
--- a/src/app/(public)/playground/page.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { SQLiteIcon } from "@/components/icons/outerbase-icon";
-import { buttonVariants } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import WebsiteLayout from "@/components/website-layout";
-import { get_database } from "@/db";
-import { dbDataset } from "@/db/schema-dataset";
-import { Metadata } from "next";
-import Link from "next/link";
-import MySQLPlaygroundButton from "./mysql-playground-button";
-
-export const metadata: Metadata = {
-  title: "SQLite Online Editor",
-  description:
-    "A robust SQLite editor available directly in your browser. Explore and practice SQLite with ease. Begin with a blank database or choose from a selection of sample datasets.",
-};
-
-export default async function PlaygroundPage() {
-  let templateList: (typeof dbDataset.$inferSelect)[] = [];
-
-  try {
-    const db = get_database();
-    templateList = await db.select().from(dbDataset);
-  } catch {
-    templateList = [];
-  }
-
-  return (
-    <WebsiteLayout>
-      <div className="my-12 mx-auto container">
-        <h1 className="text-3xl font-bold">Playground</h1>
-        <p className="my-2 max-w-[600px] text-secondary-foreground">
-          A robust SQLite editor available directly in your browser. Explore and
-          practice SQLite with ease. Begin with a blank database or choose from
-          a selection of sample datasets.
-        </p>
-
-        <div className="flex gap-2 mt-8">
-          <Link
-            passHref
-            href="/playground/client"
-            className={
-              "bg-primary text-primary-foreground p-3 px-4 rounded-lg text-sm gap-2 flex flex-col hover:bg-gray-300 w-[200px]"
-            }
-            prefetch={false}
-          >
-            <div className="flex gap-2">
-              <SQLiteIcon className="w-10 h-10" />
-              <div className="flex flex-col justify-center">
-                <div className="font-bold text-md">SQLite</div>
-                <div className="text-xs">Playground</div>
-              </div>
-            </div>
-
-            <p className="text-xs text-gray-500">
-              Launch in-memory SQLite
-              <br />
-              inside the browser
-            </p>
-          </Link>
-
-          <MySQLPlaygroundButton />
-        </div>
-      </div>
-
-      <Separator />
-
-      <div className="py-4 mx-auto container">
-        <h2 className="text-2xl font-bold mb-2">Existing Dataset</h2>
-        <p className="mb-4">Preload the database with existing dataset.</p>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {templateList.map((t) => {
-            return (
-              <div className="border p-4 rounded-lg shadow-sm" key={t.id}>
-                <h2 className="font-bold mb-2">{t.name}</h2>
-                <p className="text-sm text-secondary-foreground">{t.summary}</p>
-                <div className="mt-2">
-                  <Link
-                    passHref
-                    href={`/playground/client?template=${t.id}`}
-                    rel="nofollow"
-                    className={buttonVariants({
-                      size: "sm",
-                    })}
-                  >
-                    Explore
-                  </Link>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </WebsiteLayout>
-  );
-}

From 4dac78e4308c82fd79442a713e9f81f782e9835f Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 09:19:07 +0700
Subject: [PATCH 089/106] fixing small text after we change style

---
 src/app/(outerbase)/nav-layout.tsx            |   4 +-
 src/app/(outerbase)/nav-profile.tsx           | 118 +++++++++++-----
 src/app/(outerbase)/sidebar-profile.tsx       | 132 ------------------
 src/components/board/board-canvas.tsx         |   2 +-
 src/components/board/board-filter-dialog.tsx  |  18 ++-
 src/components/board/board-filter.tsx         |   2 +-
 src/components/board/index.tsx                |  17 ++-
 .../erd-table-column.tsx                      |   2 +-
 src/components/ui/context-menu.tsx            |  32 ++---
 src/components/ui/menubar.tsx                 |  38 ++---
 src/components/ui/tooltip.tsx                 |   6 +-
 src/drivers/mysql/mysql-data-type.ts          |   4 +-
 src/drivers/postgres/postgres-data-type.ts    |   4 +-
 src/extensions/column-descriptor/index.tsx    |   4 +-
 src/extensions/dolt/dolt-sidebar.tsx          |  88 ++++++------
 .../trigger-editor/trigger-controller.tsx     |  27 ++--
 .../trigger-editor/trigger-editor.tsx         |  26 ++--
 .../view-editor/view-controller.tsx           |  11 +-
 18 files changed, 226 insertions(+), 309 deletions(-)
 delete mode 100644 src/app/(outerbase)/sidebar-profile.tsx

diff --git a/src/app/(outerbase)/nav-layout.tsx b/src/app/(outerbase)/nav-layout.tsx
index 2ff5b637..4fa8be7c 100644
--- a/src/app/(outerbase)/nav-layout.tsx
+++ b/src/app/(outerbase)/nav-layout.tsx
@@ -7,9 +7,9 @@ import {
 import { Database, Plus } from "@phosphor-icons/react";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { PropsWithChildren } from "react";
+import NavigationProfile from "./nav-profile";
 import NavigationSigninBanner from "./nav-signin-banner";
 import { useSession } from "./session-provider";
-import SidebarProfile from "./sidebar-profile";
 import { useWorkspaces } from "./workspace-provider";
 
 export default function NavigationLayout({ children }: PropsWithChildren) {
@@ -23,7 +23,7 @@ export default function NavigationLayout({ children }: PropsWithChildren) {
     <div className="flex h-screen w-screen">
       <div className="flex w-[250px] shrink-0 flex-col overflow-hidden border-r">
         <div className="px-2 py-2">
-          <SidebarProfile />
+          <NavigationProfile />
         </div>
 
         {/* <div className="px-2">
diff --git a/src/app/(outerbase)/nav-profile.tsx b/src/app/(outerbase)/nav-profile.tsx
index 2c326d42..aaa57b21 100644
--- a/src/app/(outerbase)/nav-profile.tsx
+++ b/src/app/(outerbase)/nav-profile.tsx
@@ -1,12 +1,19 @@
 import { Avatar } from "@/components/orbit/avatar";
+import { buttonVariants } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Gear, SignOut, ToggleLeft, ToggleRight } from "@phosphor-icons/react";
+import { cn } from "@/lib/utils";
+import {
+  CaretDown,
+  Gear,
+  SignOut,
+  ToggleLeft,
+  ToggleRight,
+} from "@phosphor-icons/react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
 import { useCallback } from "react";
@@ -14,7 +21,7 @@ import { useSession } from "./session-provider";
 
 export default function NavigationProfile() {
   const { resolvedTheme, forcedTheme, setTheme } = useTheme();
-  const { session } = useSession();
+  const { session, isLoading } = useSession();
   const router = useRouter();
 
   const theme = forcedTheme ?? resolvedTheme;
@@ -34,48 +41,91 @@ export default function NavigationProfile() {
     [theme, setTheme]
   );
 
-  if (!session?.user) return null;
-
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger>
-        <Avatar size="lg" username={session.user.initials} as="div" />
+        <div
+          className={cn(
+            buttonVariants({
+              size: "lg",
+              variant: "ghost",
+            }),
+            "flex items-center justify-start gap-2 p-1"
+          )}
+        >
+          <Avatar username="Guest" as="div" />
+          {!isLoading && (
+            <div className="flex-1 text-left text-sm">
+              {session
+                ? session.user.first_name + " " + session?.user.last_name
+                : "Guest"}
+            </div>
+          )}
+
+          {isLoading && (
+            <div className="bg-muted h-4 w-16 animate-pulse rounded-sm" />
+          )}
+          <div>
+            <CaretDown weight="bold" className="h-3 w-3" />
+          </div>
+        </div>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[200px]">
-        <div className="flex gap-2 p-2">
-          <Avatar size="lg" username={session.user.initials} />
+      <DropdownMenuContent align="start" className="w-[250px]">
+        <div className="flex gap-2 border-b p-2">
+          <Avatar size="lg" username={session?.user?.initials ?? "Guest"} />
 
           <div className="flex flex-col justify-center">
             <div className="text-sm font-semibold">
-              {session.user.first_name + " " + session.user.last_name}
+              {session
+                ? session.user.first_name + " " + session?.user.last_name
+                : "Guest"}
             </div>
-            <div className="text-sm">{session.user.email}</div>
+            {session && <div className="text-sm">{session.user.email}</div>}
           </div>
         </div>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          className="justify-between"
-          onClick={() => {
-            router.push(`/account`);
-          }}
-        >
-          Account Setting
-          <Gear size={20} />
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className="justify-between"
-          onClick={onThemeToggleClicked}
-        >
-          Theme
-          {theme === "dark" ? (
-            <ToggleRight weight="fill" size={20} />
-          ) : (
-            <ToggleLeft size={20} />
+
+        <div className="p-2">
+          {session && (
+            <DropdownMenuItem
+              className="justify-between"
+              onClick={() => {
+                router.push(`/account`);
+              }}
+            >
+              Account Setting
+              <Gear size={20} />
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem
+            className="justify-between"
+            onClick={onThemeToggleClicked}
+          >
+            Theme
+            {theme === "dark" ? (
+              <ToggleRight weight="fill" size={20} />
+            ) : (
+              <ToggleLeft size={20} />
+            )}
+          </DropdownMenuItem>
+          {session && (
+            <DropdownMenuItem
+              onClick={onLogoutClicked}
+              className="justify-between"
+            >
+              Log out <SignOut size={20} />
+            </DropdownMenuItem>
           )}
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={onLogoutClicked} className="justify-between">
-          Log out <SignOut size={20} />
-        </DropdownMenuItem>
+          {!session && (
+            <DropdownMenuItem
+              onClick={() => {
+                router.push("/signin");
+              }}
+              className="justify-between"
+            >
+              Log in
+            </DropdownMenuItem>
+          )}
+        </div>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/src/app/(outerbase)/sidebar-profile.tsx b/src/app/(outerbase)/sidebar-profile.tsx
deleted file mode 100644
index d82a5425..00000000
--- a/src/app/(outerbase)/sidebar-profile.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { Avatar } from "@/components/orbit/avatar";
-import { buttonVariants } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { cn } from "@/lib/utils";
-import {
-  CaretDown,
-  Gear,
-  SignOut,
-  ToggleLeft,
-  ToggleRight,
-} from "@phosphor-icons/react";
-import { useTheme } from "next-themes";
-import { useRouter } from "next/navigation";
-import { useCallback } from "react";
-import { useSession } from "./session-provider";
-
-export default function SidebarProfile() {
-  const { resolvedTheme, forcedTheme, setTheme } = useTheme();
-  const { session, isLoading } = useSession();
-  const router = useRouter();
-
-  const theme = forcedTheme ?? resolvedTheme;
-
-  const onLogoutClicked = useCallback(() => {
-    router.push("/signout");
-  }, [router]);
-
-  const onThemeToggleClicked = useCallback(
-    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      setTheme(theme === "dark" ? "light" : "dark");
-
-      // We don't want the dropdown to close
-      e.stopPropagation();
-      e.preventDefault();
-    },
-    [theme, setTheme]
-  );
-
-  return (
-    <DropdownMenu modal={false}>
-      <DropdownMenuTrigger>
-        <div
-          className={cn(
-            buttonVariants({
-              size: "lg",
-              variant: "ghost",
-            }),
-            "flex items-center justify-start gap-2 p-1"
-          )}
-        >
-          <Avatar username="Guest" as="div" />
-          {!isLoading && (
-            <div className="flex-1 text-left text-sm">
-              {session
-                ? session.user.first_name + " " + session?.user.last_name
-                : "Guest"}
-            </div>
-          )}
-
-          {isLoading && (
-            <div className="bg-muted h-4 w-16 animate-pulse rounded-sm" />
-          )}
-          <div>
-            <CaretDown weight="bold" className="h-3 w-3" />
-          </div>
-        </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-[250px]">
-        <div className="flex gap-2 border-b p-2">
-          <Avatar size="lg" username={session?.user?.initials ?? "Guest"} />
-
-          <div className="flex flex-col justify-center">
-            <div className="text-sm font-semibold">
-              {session
-                ? session.user.first_name + " " + session?.user.last_name
-                : "Guest"}
-            </div>
-            {session && <div className="text-sm">{session.user.email}</div>}
-          </div>
-        </div>
-
-        <div className="p-2">
-          {session && (
-            <DropdownMenuItem
-              className="justify-between"
-              onClick={() => {
-                router.push(`/account`);
-              }}
-            >
-              Account Setting
-              <Gear size={20} />
-            </DropdownMenuItem>
-          )}
-          <DropdownMenuItem
-            className="justify-between"
-            onClick={onThemeToggleClicked}
-          >
-            Theme
-            {theme === "dark" ? (
-              <ToggleRight weight="fill" size={20} />
-            ) : (
-              <ToggleLeft size={20} />
-            )}
-          </DropdownMenuItem>
-          {session && (
-            <DropdownMenuItem
-              onClick={onLogoutClicked}
-              className="justify-between"
-            >
-              Log out <SignOut size={20} />
-            </DropdownMenuItem>
-          )}
-          {!session && (
-            <DropdownMenuItem
-              onClick={() => {
-                router.push("/signin");
-              }}
-              className="justify-between"
-            >
-              Log in
-            </DropdownMenuItem>
-          )}
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/src/components/board/board-canvas.tsx b/src/components/board/board-canvas.tsx
index 36dbb1de..101ac73f 100644
--- a/src/components/board/board-canvas.tsx
+++ b/src/components/board/board-canvas.tsx
@@ -133,7 +133,7 @@ export function BoardCanvas({ value, onChange }: BoardProps) {
     return (
       <div
         key={_.i}
-        className="group bg-background relative flex items-center justify-center overflow-hidden rounded-xl bg-white shadow hover:bg-gray-50 dark:bg-neutral-900 dark:text-white"
+        className="group relative flex items-center justify-center overflow-hidden rounded-xl bg-white shadow hover:bg-gray-50 dark:bg-neutral-900 dark:text-white"
         data-grid={_}
       >
         <BoardChart
diff --git a/src/components/board/board-filter-dialog.tsx b/src/components/board/board-filter-dialog.tsx
index 2b8a1dcb..734c619c 100644
--- a/src/components/board/board-filter-dialog.tsx
+++ b/src/components/board/board-filter-dialog.tsx
@@ -76,7 +76,7 @@ export function BoardFilterDialog(props: Props) {
         </DialogHeader>
         <div className="flex flex-col gap-2">
           <div className="mb-2">
-            <div className="mb-1 text-xs font-medium">Select filter type</div>
+            <div className="mb-1 text-sm font-medium">Select filter type</div>
             <Select
               value={props.filter.type}
               onValueChange={(v) =>
@@ -94,7 +94,7 @@ export function BoardFilterDialog(props: Props) {
             </Select>
           </div>
           <div className="mb-2">
-            <div className="mb-1 text-xs font-medium">Filter name*</div>
+            <div className="mb-1 text-sm font-medium">Filter name*</div>
             <Input
               placeholder="Enter filter name"
               value={props.filter.name}
@@ -105,7 +105,7 @@ export function BoardFilterDialog(props: Props) {
           </div>
           {props.filter.type === "enum" && (
             <div className="mb-2">
-              <div className="mb-1 text-xs font-medium">
+              <div className="mb-1 text-sm font-medium">
                 Values*
                 <div>
                   <small className="text-muted-foreground">
@@ -123,14 +123,12 @@ export function BoardFilterDialog(props: Props) {
             </div>
           )}
           <div className="mb-2">
-            <div className="mb-1 text-xs font-medium">
+            <div className="mb-1 text-sm font-medium">
               Default value (optional)
-              <div>
-                <small className="text-muted-foreground">
-                  If this field is left empty, no filter will be applied by
-                  default
-                </small>
-              </div>
+              <p className="text-muted-foreground text-sm">
+                If this field is left empty, no filter will be applied by
+                default
+              </p>
             </div>
             {props.filter.type === "search" ? (
               <Input
diff --git a/src/components/board/board-filter.tsx b/src/components/board/board-filter.tsx
index 4c2a3866..935643e9 100644
--- a/src/components/board/board-filter.tsx
+++ b/src/components/board/board-filter.tsx
@@ -115,7 +115,7 @@ export function BoardFilter(props: Props) {
     return (
       <div
         key={i}
-        className="bg-secondary flex items-center rounded-md text-xs"
+        className="bg-secondary flex items-center rounded-md text-sm"
       >
         <div className="border-background flex items-center gap-1 border-r-[1px] border-solid px-2 py-1">
           {icon}
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index 2444a03f..2e9043ec 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -101,7 +101,7 @@ export default function Board({
       resolvedFilterValue={resolvedFilterValue}
       onFilterValueChange={onFilterValueChange}
     >
-      <div className="relative h-auto w-full">
+      <div className="relative h-auto min-h-screen w-full">
         <BoardFilter
           value={value}
           onChange={onChange}
@@ -136,12 +136,15 @@ export default function Board({
         )}
 
         {editMode?.mode === "ADD_CHART" && (
-          <div className="bg-background fixed top-14 bottom-0 left-0 z-50 flex w-screen">
-            <BoardChartEditor
-              onChange={onChange}
-              initialValue={editMode?.chart}
-            />
-          </div>
+          <>
+            <div className="fixed top-0 left-0 z-50 h-full w-full backdrop-blur-sm"></div>
+            <div className="bg-background fixed top-[5%] right-[5%] bottom-[5%] left-[5%] z-50 flex overflow-hidden rounded-lg border-2">
+              <BoardChartEditor
+                onChange={onChange}
+                initialValue={editMode?.chart}
+              />
+            </div>
+          </>
         )}
       </div>
       <BoardTool />
diff --git a/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx b/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx
index b747512a..8147bdd7 100644
--- a/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx
+++ b/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx
@@ -15,7 +15,7 @@ export default function ERDTableColumn({
   column: ERDSchemaNodeColumnProps;
 }) {
   return (
-    <TableRow className="group relative text-xs">
+    <TableRow className="group relative text-sm">
       <TableCell className="h-[30px] p-0 pr-6 pl-2 font-mono text-sm font-light">
         <BaseHandle
           id={column.title}
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
index 3880d5cf..72a5ebda 100644
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
 } from "@radix-ui/react-icons";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -31,7 +31,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
       inset && "pl-8",
       className
     )}
@@ -50,7 +50,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
       className
     )}
     {...props}
@@ -66,7 +66,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
         className
       )}
       {...props}
@@ -84,7 +84,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -100,7 +100,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     checked={checked}
@@ -124,7 +124,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
@@ -148,7 +148,7 @@ const ContextMenuLabel = React.forwardRef<
   <ContextMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      "text-foreground px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
       className
     )}
@@ -163,7 +163,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn("bg-border -mx-1 my-1 h-px", className)}
     {...props}
   />
 ));
@@ -176,7 +176,7 @@ const ContextMenuShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "text-muted-foreground ml-auto text-sm tracking-widest",
         className
       )}
       {...props}
@@ -187,18 +187,18 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
   ContextMenu,
-  ContextMenuTrigger,
+  ContextMenuCheckboxItem,
   ContextMenuContent,
+  ContextMenuGroup,
   ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
   ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
   ContextMenuSeparator,
   ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
+  ContextMenuTrigger,
 };
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index 87da5e72..ede00447 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import * as React from "react";
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
 } from "@radix-ui/react-icons";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -27,7 +27,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs",
+      "bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-xs",
       className
     )}
     {...props}
@@ -42,7 +42,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden select-none",
       className
     )}
     {...props}
@@ -59,7 +59,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
       inset && "pl-8",
       className
     )}
@@ -78,7 +78,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
       className
     )}
     {...props}
@@ -101,7 +101,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-md",
           className
         )}
         {...props}
@@ -120,7 +120,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -136,7 +136,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     checked={checked}
@@ -159,7 +159,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
@@ -198,7 +198,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ));
@@ -211,7 +211,7 @@ const MenubarShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "text-muted-foreground ml-auto text-sm tracking-widest",
         className
       )}
       {...props}
@@ -222,19 +222,19 @@ MenubarShortcut.displayname = "MenubarShortcut";
 
 export {
   Menubar,
-  MenubarMenu,
-  MenubarTrigger,
+  MenubarCheckboxItem,
   MenubarContent,
+  MenubarGroup,
   MenubarItem,
-  MenubarSeparator,
   MenubarLabel,
-  MenubarCheckboxItem,
+  MenubarMenu,
+  MenubarPortal,
   MenubarRadioGroup,
   MenubarRadioItem,
-  MenubarPortal,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
+  MenubarTrigger,
 };
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index e7bb9ba6..987fd833 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -27,7 +27,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md shadow-sm bg-white dark:bg-neutral-800 text-black dark:text-neutral-200 px-3 py-1.5 text-xs 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",
+      "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 z-50 overflow-hidden rounded-md bg-white px-3 py-1.5 text-sm text-black shadow-sm dark:bg-neutral-800 dark:text-neutral-200",
       className
     )}
     {...props}
@@ -35,4 +35,4 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
diff --git a/src/drivers/mysql/mysql-data-type.ts b/src/drivers/mysql/mysql-data-type.ts
index 78510a39..29e191c4 100644
--- a/src/drivers/mysql/mysql-data-type.ts
+++ b/src/drivers/mysql/mysql-data-type.ts
@@ -184,11 +184,11 @@ function decimalDescription(_: string, parameters?: string[]) {
     return `<div>
     <div class="mb-2">Fixed-point number</div>
     <div class='inline-block'>
-      <div class="text-xs">Precision</div>
+      <div class="text-sm">Precision</div>
       <div class="inline-block border-t-4 border-t-primary font-mono text-lg">
         <span>${exampleBeforeDot}</span><strong>.</strong><span class="inline-block border-b-4 border-b-primary">${exampleAfterDot}</span>
       </div>
-      <div class="text-xs text-right">Scale</div>
+      <div class="text-sm text-right">Scale</div>
     </div>
   </div>`;
   }
diff --git a/src/drivers/postgres/postgres-data-type.ts b/src/drivers/postgres/postgres-data-type.ts
index 1a25f230..31043fb2 100644
--- a/src/drivers/postgres/postgres-data-type.ts
+++ b/src/drivers/postgres/postgres-data-type.ts
@@ -137,11 +137,11 @@ function decimalDescription(_: string, parameters?: string[]) {
     return `<div>
     <div class="mb-2">Fixed-point number</div>
     <div class='inline-block'>
-      <div class="text-xs">Precision</div>
+      <div class="text-sm">Precision</div>
       <div class="inline-block border-t-4 border-t-primary font-mono text-lg">
         <span>${exampleBeforeDot}</span><strong>.</strong><span class="inline-block border-b-4 border-b-primary">${exampleAfterDot}</span>
       </div>
-      <div class="text-xs text-right">Scale</div>
+      <div class="text-sm text-right">Scale</div>
     </div>
   </div>`;
   }
diff --git a/src/extensions/column-descriptor/index.tsx b/src/extensions/column-descriptor/index.tsx
index 55fb3508..644e3e94 100644
--- a/src/extensions/column-descriptor/index.tsx
+++ b/src/extensions/column-descriptor/index.tsx
@@ -13,7 +13,7 @@ export default class ColumnDescriptorExtension extends StudioExtension {
         title: "",
         component: (
           <div className="p-2">
-            <div className="rounded bg-yellow-200 p-2 text-xs text-black">
+            <div className="rounded bg-yellow-200 p-2 text-sm text-black">
               <h2 className="font-semibold">Foreign Key</h2>
               <p className="mt-1 font-mono">
                 {header.metadata.referenceTo.table}.
@@ -33,7 +33,7 @@ export default class ColumnDescriptorExtension extends StudioExtension {
 
       const generatedInfo = generatedExpression ? (
         <div className="p-2">
-          <div className="rounded bg-blue-200 p-2 text-xs text-black">
+          <div className="rounded bg-blue-200 p-2 text-sm text-black">
             <h2 className="font-semibold">Generated Expression</h2>
             <pre className="text-sm">
               <code>{generatedExpression}</code>
diff --git a/src/extensions/dolt/dolt-sidebar.tsx b/src/extensions/dolt/dolt-sidebar.tsx
index 97c5f810..95d3605b 100644
--- a/src/extensions/dolt/dolt-sidebar.tsx
+++ b/src/extensions/dolt/dolt-sidebar.tsx
@@ -1,10 +1,10 @@
-import { useDatabaseDriver } from "@/context/driver-provider";
-import { useSchema } from "@/context/schema-provider";
-import { useCallback, useEffect, useState } from "react";
-import { ChevronDown, Loader, MoreHorizontal, RefreshCcw } from "lucide-react";
-import { GitBranch, Minus, Plus, Table } from "@phosphor-icons/react";
-import { cn } from "@/lib/utils";
-import { Input } from "@/components/ui/input";
+import { useCommonDialog } from "@/components/common-dialog";
+import {
+  Toolbar,
+  ToolbarButton,
+  ToolbarSeparator,
+} from "@/components/gui/toolbar";
+import { DoltIcon } from "@/components/icons/outerbase-icon";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -13,20 +13,20 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
-import useDoltCreateBranchModal from "./dolt-create-branch";
+import { useDatabaseDriver } from "@/context/driver-provider";
+import { useSchema } from "@/context/schema-provider";
+import { cn } from "@/lib/utils";
+import { GitBranch, Minus, Plus, Table } from "@phosphor-icons/react";
+import { ChevronDown, Loader, MoreHorizontal, RefreshCcw } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
-import { useCommonDialog } from "@/components/common-dialog";
-import { DoltIcon } from "@/components/icons/outerbase-icon";
-import {
-  Toolbar,
-  ToolbarSeparator,
-  ToolbarButton,
-} from "@/components/gui/toolbar";
+import useDoltCreateBranchModal from "./dolt-create-branch";
 
 interface DoltStatusResultItem {
   table_name: string;
@@ -61,7 +61,7 @@ function DoltCommitLog({
         content: (
           <div className="flex flex-col gap-2">
             <p>Are you sure you want to reset to this commit?</p>
-            <div className="p-4 border shadow-sm rounded text-sm flex flex-col gap-1">
+            <div className="flex flex-col gap-1 rounded border p-4 text-sm shadow-sm">
               <div className="font-semibold">{commit.message}</div>
               <div className="font-mono">{commit.commit_hash}</div>
             </div>
@@ -87,31 +87,31 @@ function DoltCommitLog({
   );
 
   return (
-    <div className="w-full overflow-y-auto overflow-x-hidden">
+    <div className="w-full overflow-x-hidden overflow-y-auto">
       {createBranchModal}
 
-      <div className="pl-4 flex flex-col w-full py-4">
+      <div className="flex w-full flex-col py-4 pl-4">
         {commitList.map((commit) => (
           <div
             key={commit.commit_hash}
-            className="relative flex fgap-1 border-l-2 border-blue-500 p-2 pl-4 ml-2"
+            className="fgap-1 relative ml-2 flex border-l-2 border-blue-500 p-2 pl-4"
           >
-            <div className="w-4 h-4 bg-background border-4 border-blue-500 rounded-full absolute -left-[9px] top-[10px]"></div>
+            <div className="bg-background absolute top-[10px] -left-[9px] h-4 w-4 rounded-full border-4 border-blue-500"></div>
 
             <div className="flex-1 overflow-hidden">
-              <span className="flex-1 text-xs line-clamp-1 font-semibold">
+              <span className="line-clamp-1 flex-1 text-sm font-semibold">
                 {commit.message}
               </span>
 
-              <span className="flex-1 text-xs font-mono line-clamp-1">
+              <span className="line-clamp-1 flex-1 font-mono text-sm">
                 {commit.commit_hash}
               </span>
 
-              <div className="text-xs mt-1 flex gap-2 overflow-hidden">
+              <div className="mt-1 flex gap-2 overflow-hidden text-sm">
                 <div className="text-muted-foreground line-clamp-1">
                   {commit.date}
                 </div>
-                <div className="text-blue-700 dark:text-blue-400 line-clamp-1">
+                <div className="line-clamp-1 text-blue-700 dark:text-blue-400">
                   {commit.committer}
                 </div>
               </div>
@@ -121,7 +121,7 @@ function DoltCommitLog({
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button size="sm" variant="ghost">
-                    <MoreHorizontal className="w-4 h-4" />
+                    <MoreHorizontal className="h-4 w-4" />
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent side="bottom" align="end">
@@ -137,7 +137,7 @@ function DoltCommitLog({
                   <DropdownMenuItem
                     onClick={() => openCreateBranch(commit.commit_hash)}
                   >
-                    <GitBranch className="w-4 h-4 mr-2" />
+                    <GitBranch className="mr-2 h-4 w-4" />
                     Create Branch
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
@@ -208,18 +208,18 @@ function DoltChangeItem({
   }
 
   if (loading) {
-    action = <Loader className="w-4 h-4 animate-spin cursor-pointer" />;
+    action = <Loader className="h-4 w-4 animate-spin cursor-pointer" />;
   } else if (status.staged > 0) {
     action = (
       <Minus
-        className="w-4 h-4 cursor-pointer"
+        className="h-4 w-4 cursor-pointer"
         onClick={() => onResetClicked(status.table_name)}
       />
     );
   } else {
     action = (
       <Plus
-        className="w-4 h-4 cursor-pointer"
+        className="h-4 w-4 cursor-pointer"
         onClick={() => onStageClicked(status.table_name)}
       />
     );
@@ -286,7 +286,7 @@ function DoltChanges({
 
   return (
     <div>
-      <div className="p-4 flex flex-col gap-2">
+      <div className="flex flex-col gap-2 p-4">
         <Input
           placeholder="Commit message"
           value={commitMessage}
@@ -300,15 +300,15 @@ function DoltChanges({
           size={"sm"}
           onClick={onCommitClicked}
         >
-          {loading && <Loader className="w-4 h-4 animate-spin mr-2" />}
+          {loading && <Loader className="mr-2 h-4 w-4 animate-spin" />}
           Commit
         </Button>
       </div>
 
       {stagedItems.length > 0 && (
         <>
-          <div className="p-4 py-0 text-xs font-semibold mb-1">STAGES</div>
-          <div className="px-4 pb-2 flex flex-col">
+          <div className="mb-1 p-4 py-0 text-sm font-semibold">STAGES</div>
+          <div className="flex flex-col px-4 pb-2">
             {stagedItems.map((status) => {
               return (
                 <DoltChangeItem
@@ -324,8 +324,8 @@ function DoltChanges({
 
       {changedItems.length > 0 && (
         <>
-          <div className="p-4 py-0 text-xs font-semibold mb-1">CHANGES</div>
-          <div className="px-4 flex flex-col">
+          <div className="mb-1 p-4 py-0 text-sm font-semibold">CHANGES</div>
+          <div className="flex flex-col px-4">
             {changedItems.map((status) => {
               return (
                 <DoltChangeItem
@@ -396,7 +396,7 @@ export default function DoltSidebar() {
 
   if (!currentSchemaName) {
     return (
-      <div className="flex flex-col w-full p-4 justify-center items-center text-muted-foreground text-sm gap-4">
+      <div className="text-muted-foreground flex w-full flex-col items-center justify-center gap-4 p-4 text-sm">
         <DoltIcon className="text-green-500" />
 
         <p className="text-center">
@@ -410,16 +410,16 @@ export default function DoltSidebar() {
   }
 
   return (
-    <div className="flex flex-col overflow-hidden w-full">
+    <div className="flex w-full flex-col overflow-hidden">
       {createBranchModal}
-      <div className="p-1 border-b">
+      <div className="border-b p-1">
         <Toolbar>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button size="sm" variant={"outline"}>
-                <GitBranch className="w-4 h-4 mr-2" />
+                <GitBranch className="mr-2 h-4 w-4" />
                 {selectedBranch}
-                <ChevronDown className="w-3 h-3 ml-2" />
+                <ChevronDown className="ml-2 h-3 w-3" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent side="bottom" align="start">
@@ -428,7 +428,7 @@ export default function DoltSidebar() {
                   openCreateBranchModal();
                 }}
               >
-                <Plus className="w-4 h-4 mr-2" />
+                <Plus className="mr-2 h-4 w-4" />
                 New Branch
               </DropdownMenuItem>
               <DropdownMenuSeparator />
@@ -437,10 +437,10 @@ export default function DoltSidebar() {
                   key={branch}
                   onClick={() => onCheckoutBranch(branch)}
                 >
-                  <GitBranch className="w-4 h-4 mr-2" />
+                  <GitBranch className="mr-2 h-4 w-4" />
                   {branch}
                   {branch === selectedBranch && (
-                    <span className="text-yellow-500 font-mono ml-2 text-sm">
+                    <span className="ml-2 font-mono text-sm text-yellow-500">
                       Current
                     </span>
                   )}
@@ -452,7 +452,7 @@ export default function DoltSidebar() {
           <ToolbarButton
             onClick={refreshDoltSchema}
             text="Refresh"
-            icon={<RefreshCcw className="w-4 h-4" />}
+            icon={<RefreshCcw className="h-4 w-4" />}
           />
         </Toolbar>
       </div>
diff --git a/src/extensions/trigger-editor/trigger-controller.tsx b/src/extensions/trigger-editor/trigger-controller.tsx
index c68e902a..b625b24d 100644
--- a/src/extensions/trigger-editor/trigger-controller.tsx
+++ b/src/extensions/trigger-editor/trigger-controller.tsx
@@ -1,6 +1,10 @@
 import CodePreview from "@/components/gui/code-preview";
 import { Button, buttonVariants } from "@/components/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { LucideCode, LucideLoader, LucideSave } from "lucide-react";
 
@@ -15,17 +19,12 @@ interface Props {
 export function TriggerController(props: Props) {
   const { onSave, onDiscard, isExecuting, disabled, previewScript } = props;
   return (
-    <div className="p-1 flex gap-2">
-      <Button
-        variant="ghost"
-        onClick={onSave}
-        disabled={disabled}
-        size={"sm"}
-      >
+    <div className="flex gap-2 p-1">
+      <Button variant="ghost" onClick={onSave} disabled={disabled} size={"sm"}>
         {isExecuting ? (
-          <LucideLoader className="w-4 h-4 mr-2 animate-spin" />
+          <LucideLoader className="mr-2 h-4 w-4 animate-spin" />
         ) : (
-          <LucideSave className="w-4 h-4 mr-2" />
+          <LucideSave className="mr-2 h-4 w-4" />
         )}
         Save
       </Button>
@@ -46,17 +45,17 @@ export function TriggerController(props: Props) {
       <Popover>
         <PopoverTrigger>
           <div className={buttonVariants({ size: "sm", variant: "ghost" })}>
-            <LucideCode className="w-4 h-4 mr-1" />
+            <LucideCode className="mr-1 h-4 w-4" />
             SQL Preview
           </div>
         </PopoverTrigger>
         <PopoverContent style={{ width: 500 }}>
-          <div className="text-xs font-semibold mb-1">SQL Preview</div>
+          <div className="mb-1 text-sm font-semibold">SQL Preview</div>
           <div style={{ maxHeight: 400 }} className="overflow-y-auto">
             <CodePreview code={previewScript} />
           </div>
         </PopoverContent>
       </Popover>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/extensions/trigger-editor/trigger-editor.tsx b/src/extensions/trigger-editor/trigger-editor.tsx
index d464416a..e7a0bc2b 100644
--- a/src/extensions/trigger-editor/trigger-editor.tsx
+++ b/src/extensions/trigger-editor/trigger-editor.tsx
@@ -1,9 +1,6 @@
-import { useDatabaseDriver } from "@/context/driver-provider";
-import {
-  DatabaseTriggerSchema,
-  TriggerOperation,
-  TriggerWhen,
-} from "@/drivers/base-driver";
+import SchemaNameSelect from "@/components/gui/schema-editor/schema-name-select";
+import SqlEditor from "@/components/gui/sql-editor";
+import TableCombobox from "@/components/gui/table-combobox/TableCombobox";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -12,12 +9,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { produce } from "immer";
+import { useDatabaseDriver } from "@/context/driver-provider";
 import { useSchema } from "@/context/schema-provider";
+import {
+  DatabaseTriggerSchema,
+  TriggerOperation,
+  TriggerWhen,
+} from "@/drivers/base-driver";
+import { produce } from "immer";
 import { useMemo } from "react";
-import SchemaNameSelect from "@/components/gui/schema-editor/schema-name-select";
-import TableCombobox from "@/components/gui/table-combobox/TableCombobox";
-import SqlEditor from "@/components/gui/sql-editor";
 
 export interface TriggerEditorProps {
   onChange: (value: DatabaseTriggerSchema) => void;
@@ -49,7 +49,7 @@ export default function TriggerEditor({ value, onChange }: TriggerEditorProps) {
 
   return (
     <>
-      <div className="px-4 py-2 flex flex-row gap-2">
+      <div className="flex flex-row gap-2 px-4 py-2">
         <Input
           value={value.name}
           placeholder="Trigger Name"
@@ -62,7 +62,7 @@ export default function TriggerEditor({ value, onChange }: TriggerEditorProps) {
           }
         />
       </div>
-      <div className="px-4 py-2 flex flex-col gap-2">
+      <div className="flex flex-col gap-2 px-4 py-2">
         <div className="flex gap-2">
           <div className="w-[200px]">
             <Select
@@ -138,7 +138,7 @@ export default function TriggerEditor({ value, onChange }: TriggerEditorProps) {
 
       <div className="grow overflow-hidden">
         <div className="h-full">
-          <div className="text-xs my-2 mx-4">
+          <div className="mx-4 my-2 text-sm">
             Trigger statement: (eg: &quot;SET NEW.columnA =
             TRIM(OLD.columnA)&quot;)
           </div>
diff --git a/src/extensions/view-editor/view-controller.tsx b/src/extensions/view-editor/view-controller.tsx
index 0051cb82..9432ffb5 100644
--- a/src/extensions/view-editor/view-controller.tsx
+++ b/src/extensions/view-editor/view-controller.tsx
@@ -6,7 +6,6 @@ import {
 } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { LucideCode, LucideLoader, LucideSave } from "lucide-react";
-import React from "react";
 import CodePreview from "../../components/gui/code-preview";
 
 interface Props {
@@ -20,12 +19,12 @@ interface Props {
 export function ViewController(props: Props) {
   const { onSave, onDiscard, isExecuting, disabled, previewScript } = props;
   return (
-    <div className="p-1 flex gap-2">
+    <div className="flex gap-2 p-1">
       <Button variant="ghost" onClick={onSave} disabled={disabled} size={"sm"}>
         {isExecuting ? (
-          <LucideLoader className="w-4 h-4 mr-2 animate-spin" />
+          <LucideLoader className="mr-2 h-4 w-4 animate-spin" />
         ) : (
-          <LucideSave className="w-4 h-4 mr-2" />
+          <LucideSave className="mr-2 h-4 w-4" />
         )}
         Save
       </Button>
@@ -46,12 +45,12 @@ export function ViewController(props: Props) {
       <Popover>
         <PopoverTrigger>
           <div className={buttonVariants({ size: "sm", variant: "ghost" })}>
-            <LucideCode className="w-4 h-4 mr-1" />
+            <LucideCode className="mr-1 h-4 w-4" />
             SQL Preview
           </div>
         </PopoverTrigger>
         <PopoverContent style={{ width: 500 }}>
-          <div className="text-xs font-semibold mb-1">SQL Preview</div>
+          <div className="mb-1 text-sm font-semibold">SQL Preview</div>
           <div style={{ maxHeight: 400 }} className="overflow-y-auto">
             <CodePreview code={previewScript} />
           </div>

From 2921d51dc9fbf70cb4f1f22ade942cd8b797a3c2 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 09:22:30 +0700
Subject: [PATCH 090/106] deprecate the remote api

---
 src/app/(theme)/client/r/page-client.tsx      |  43 ---
 src/app/(theme)/client/r/page.tsx             |  45 ---
 .../connect/saved-connection-storage.ts.txt   | 315 ------------------
 src/app/api/cleanup/route.ts                  |  16 -
 .../[database_id]/ops/handle-assign-user.ts   | 113 -------
 .../[database_id]/ops/handle-delete-user.ts   |  79 -----
 .../[database_id]/ops/handle-role-list.ts     |  22 --
 .../[database_id]/ops/handle-users-list.ts    |  41 ---
 .../api/database/[database_id]/ops/route.ts   |  27 --
 src/app/api/database/[database_id]/route.ts   | 106 ------
 src/app/api/database/route.ts                 | 117 -------
 src/app/api/databases/route.ts                |  44 ---
 src/app/api/ops/[database_id]/handle-batch.ts |  29 --
 src/app/api/ops/[database_id]/handle-query.ts |  29 --
 src/app/api/ops/[database_id]/handler.ts      |  19 --
 src/app/api/ops/[database_id]/route.ts        |   9 -
 .../ops/[database_id]/turso-edge-client.ts    |  36 --
 src/controllers/auth.ts                       |  72 ----
 18 files changed, 1162 deletions(-)
 delete mode 100644 src/app/(theme)/client/r/page-client.tsx
 delete mode 100644 src/app/(theme)/client/r/page.tsx
 delete mode 100644 src/app/(theme)/connect/saved-connection-storage.ts.txt
 delete mode 100644 src/app/api/cleanup/route.ts
 delete mode 100644 src/app/api/database/[database_id]/ops/handle-assign-user.ts
 delete mode 100644 src/app/api/database/[database_id]/ops/handle-delete-user.ts
 delete mode 100644 src/app/api/database/[database_id]/ops/handle-role-list.ts
 delete mode 100644 src/app/api/database/[database_id]/ops/handle-users-list.ts
 delete mode 100644 src/app/api/database/[database_id]/ops/route.ts
 delete mode 100644 src/app/api/database/[database_id]/route.ts
 delete mode 100644 src/app/api/database/route.ts
 delete mode 100644 src/app/api/databases/route.ts
 delete mode 100644 src/app/api/ops/[database_id]/handle-batch.ts
 delete mode 100644 src/app/api/ops/[database_id]/handle-query.ts
 delete mode 100644 src/app/api/ops/[database_id]/handler.ts
 delete mode 100644 src/app/api/ops/[database_id]/route.ts
 delete mode 100644 src/app/api/ops/[database_id]/turso-edge-client.ts
 delete mode 100644 src/controllers/auth.ts

diff --git a/src/app/(theme)/client/r/page-client.tsx b/src/app/(theme)/client/r/page-client.tsx
deleted file mode 100644
index 7507278a..00000000
--- a/src/app/(theme)/client/r/page-client.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-import { SavedConnectionItem } from "@/app/(theme)/connect/saved-connection-storage";
-import CollaborationDriver from "@/drivers/collaboration-driver";
-import RemoteDriver from "@/drivers/remote-driver";
-import { useSearchParams } from "next/navigation";
-import { useMemo } from "react";
-import MyStudio from "@/components/my-studio";
-import RemoteSavedDocDriver from "@/drivers/saved-doc/remote-saved-doc";
-
-export default function ClientPageBody({
-  token,
-  config,
-}: Readonly<{
-  token: string;
-  config: SavedConnectionItem;
-}>) {
-  const params = useSearchParams();
-
-  const { driver, collaborator, docDriver } = useMemo(() => {
-    const databaseId = params.get("p");
-    if (!databaseId) return { driver: null };
-
-    return {
-      driver: new RemoteDriver("remote", databaseId, token),
-      collaborator: new CollaborationDriver(databaseId, token),
-      docDriver: new RemoteSavedDocDriver(databaseId),
-    };
-  }, [params, token]);
-
-  if (!driver) {
-    return <div>Something wrong</div>;
-  }
-
-  return (
-    <MyStudio
-      driver={driver}
-      name={config.name}
-      color={config.label ?? "blue"}
-      collabarator={collaborator}
-      docDriver={docDriver}
-    />
-  );
-}
diff --git a/src/app/(theme)/client/r/page.tsx b/src/app/(theme)/client/r/page.tsx
deleted file mode 100644
index 920a13f6..00000000
--- a/src/app/(theme)/client/r/page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { SavedConnectionLabel } from "@/app/(theme)/connect/saved-connection-storage";
-import { get_database } from "@/db";
-import { database } from "@/db/schema";
-import { getSessionFromCookie } from "@/lib/auth";
-import { and, eq, isNotNull } from "drizzle-orm";
-import ClientPageBody from "./page-client";
-import ClientOnly from "@/components/client-only";
-
-interface RemoteSessionPageProps {
-  searchParams: Promise<{ p: string }>;
-}
-
-export default async function RemoteSessionPage(props: RemoteSessionPageProps) {
-  const searchParams = await props.searchParams;
-  const { session } = await getSessionFromCookie();
-
-  if (!session) {
-    return <div>Something wrong</div>;
-  }
-
-  const db = get_database();
-  const databaseId = searchParams?.p;
-  const databaseInfo = await db.query.database.findFirst({
-    where: and(eq(database.id, databaseId), isNotNull(database.id)),
-  });
-
-  if (!databaseInfo) {
-    return <div>Not found</div>;
-  }
-
-  return (
-    <ClientOnly>
-      <ClientPageBody
-        token={session.id}
-        config={{
-          id: databaseId,
-          name: databaseInfo.name ?? "",
-          storage: "remote",
-          description: databaseInfo.description ?? "",
-          label: (databaseInfo.color ?? "blue") as SavedConnectionLabel,
-        }}
-      />
-    </ClientOnly>
-  );
-}
diff --git a/src/app/(theme)/connect/saved-connection-storage.ts.txt b/src/app/(theme)/connect/saved-connection-storage.ts.txt
deleted file mode 100644
index 1cf1d186..00000000
--- a/src/app/(theme)/connect/saved-connection-storage.ts.txt
+++ /dev/null
@@ -1,315 +0,0 @@
-import {
-  CloudflareIcon,
-  RqliteIcon,
-  SQLiteIcon,
-  StarbaseIcon,
-  TursoIcon,
-  ValtownIcon,
-} from "@/components/icons/outerbase-icon";
-import { ApiUser } from "@/lib/api/api-database-response";
-import { FunctionComponent } from "react";
-
-export interface DriverDetailField {
-  name: keyof SavedConnectionItemConfigConfig;
-  type: "text" | "textarea" | "password" | "filehandler";
-  secret?: boolean;
-  required?: boolean;
-  title?: string;
-  placeholder?: string;
-  description?: string;
-  prefill?: string;
-  invalidate?: (value: string) => string | null;
-}
-
-export interface DriverDetail {
-  displayName: string;
-  name: string;
-  icon: FunctionComponent<{ className: string }>;
-  disableRemote?: boolean;
-  fields: DriverDetailField[];
-}
-
-export const DRIVER_DETAIL: Record<SupportedDriver, DriverDetail> =
-  Object.freeze({
-    "sqlite-filehandler": {
-      displayName: "SQLite",
-      name: "sqlite-filehandler",
-      icon: SQLiteIcon,
-      disableRemote: true,
-      fields: [
-        {
-          name: "filehandler",
-          required: true,
-          type: "filehandler",
-          title: "File",
-          description: "",
-        },
-      ],
-    },
-    turso: {
-      name: "turso",
-      displayName: "Turso",
-      icon: TursoIcon,
-      fields: [
-        {
-          name: "url",
-          required: true,
-          type: "text",
-          title: "URL",
-          description: "Example: libsql://example.turso.io",
-          invalidate: (url: string): null | string => {
-            const trimmedUrl = url.trim();
-            const valid =
-              trimmedUrl.startsWith("https://") ||
-              trimmedUrl.startsWith("http://") ||
-              trimmedUrl.startsWith("ws://") ||
-              trimmedUrl.startsWith("wss://") ||
-              trimmedUrl.startsWith("libsql://");
-
-            if (!valid) {
-              return "Endpoint must start with libsql://, https://, http://, wss:// or ws://";
-            }
-
-            return null;
-          },
-        },
-        { name: "token", title: "Token", type: "textarea", secret: true },
-      ],
-    },
-    valtown: {
-      name: "valtown",
-      displayName: "Valtown",
-      icon: ValtownIcon,
-      prefill: "",
-      fields: [
-        {
-          name: "token",
-          title: "API Token",
-          required: true,
-          type: "text",
-          secret: true,
-        },
-      ],
-    },
-    starbase: {
-      name: "starbase",
-      displayName: "StarbaseDB",
-      icon: StarbaseIcon,
-      disableRemote: true,
-      prefill: "",
-      fields: [
-        {
-          name: "url",
-          title: "Endpoint",
-          required: true,
-          type: "text",
-          secret: false,
-          invalidate: (url: string): null | string => {
-            const trimmedUrl = url.trim();
-            const valid =
-              trimmedUrl.startsWith("https://") ||
-              trimmedUrl.startsWith("http://");
-
-            if (!valid) {
-              return "Endpoint must start with https:// or http://";
-            }
-
-            return null;
-          },
-        },
-        {
-          name: "token",
-          title: "API Token",
-          required: true,
-          type: "text",
-          secret: true,
-        },
-      ],
-    },
-    "cloudflare-d1": {
-      name: "cloudflare-d1",
-      displayName: "Cloudflare D1",
-      icon: CloudflareIcon,
-      fields: [
-        {
-          name: "username",
-          type: "text",
-          title: "Account ID",
-          required: true,
-          placeholder: "Account ID",
-        },
-        {
-          name: "database",
-          type: "text",
-          title: "Database ID",
-          required: true,
-          placeholder: "Database ID",
-        },
-        {
-          name: "token",
-          title: "API Token",
-          required: true,
-          type: "text",
-          secret: true,
-        },
-      ],
-    },
-    rqlite: {
-      name: "rqlite",
-      displayName: "rqlite",
-      icon: RqliteIcon,
-      fields: [
-        {
-          name: "url",
-          required: true,
-          type: "text",
-          title: "URL",
-          prefill: "http://localhost:4001",
-          description: "Example: http://localhost:4001",
-          invalidate: (url: string): null | string => {
-            const trimmedUrl = url.trim();
-            const valid =
-              trimmedUrl.startsWith("https://") ||
-              trimmedUrl.startsWith("http://");
-
-            if (!valid) {
-              return "Endpoint must start with https://, http://";
-            }
-
-            return null;
-          },
-        },
-        {
-          name: "username",
-          type: "text",
-          title: "Username",
-          placeholder: "Username",
-        },
-        {
-          name: "password",
-          type: "password",
-          title: "Password",
-          secret: true,
-          placeholder: "Password",
-        },
-      ],
-    },
-  });
-
-export function validateConnectionString(
-  driver: DriverDetail,
-  connectionString?: SavedConnectionItemConfigConfig
-) {
-  if (!connectionString) return false;
-
-  for (const field of driver.fields) {
-    if (
-      field.invalidate &&
-      field.invalidate(connectionString[field.name] ?? "")
-    ) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-export function prefillConnectionString(
-  driver: DriverDetail,
-  defaultValue?: SavedConnectionItemConfigConfig
-): SavedConnectionItemConfigConfig {
-  return {
-    url:
-      defaultValue?.url ??
-      driver.fields.find((f) => f.name === "url")?.prefill ??
-      "",
-    token:
-      defaultValue?.token ??
-      driver.fields.find((f) => f.name === "token")?.prefill ??
-      "",
-    database:
-      defaultValue?.database ??
-      driver.fields.find((f) => f.name === "database")?.prefill ??
-      "",
-    username:
-      defaultValue?.username ??
-      driver.fields.find((f) => f.name === "username")?.prefill ??
-      "",
-    password:
-      defaultValue?.token ??
-      driver.fields.find((f) => f.name === "password")?.prefill ??
-      "",
-  };
-}
-
-export type SupportedDriver =
-  | "turso"
-  | "rqlite"
-  | "valtown"
-  | "starbase"
-  | "cloudflare-d1"
-  | "sqlite-filehandler";
-
-export type SavedConnectionStorage = "remote" | "local";
-export type SavedConnectionLabel = "gray" | "red" | "yellow" | "green" | "blue";
-
-export const CONNECTION_LABEL_COLORS: Record<SavedConnectionLabel, string> = {
-  gray: "bg-gray-200 dark:bg-gray-500",
-  red: "bg-red-500",
-  yellow: "bg-yellow-500",
-  green: "bg-green-800",
-  blue: "bg-blue-800",
-};
-
-export interface SavedConnectionItem {
-  id: string;
-  driver?: SupportedDriver;
-  storage: SavedConnectionStorage;
-  name: string;
-  description?: string;
-  label?: SavedConnectionLabel;
-  lastUsed?: number;
-  shared?: {
-    sharedBy: ApiUser;
-  };
-}
-
-export interface SavedConnectionItemConfigConfig {
-  token?: string;
-  url?: string;
-  username?: string;
-  password?: string;
-  database?: string;
-  filehandler?: string;
-}
-
-export interface SavedConnectionItemConfig {
-  name: string;
-  driver?: SupportedDriver;
-  label?: SavedConnectionLabel;
-  description?: string;
-  config: SavedConnectionItemConfigConfig;
-}
-
-export type SavedConnectionItemWithoutId = {
-  storage: SavedConnectionStorage;
-} & SavedConnectionItemConfig;
-
-export type SavedConnectionItemDetail = {
-  id: string;
-} & SavedConnectionItemWithoutId;
-
-export interface SavedConnectionRawLocalStorage {
-  id?: string;
-  name: string;
-  url?: string;
-  token?: string;
-  username?: string;
-  password?: string;
-  database?: string;
-  driver?: SupportedDriver;
-  label?: SavedConnectionLabel;
-  file_handler?: string;
-  description?: string;
-  last_used?: number;
-}
diff --git a/src/app/api/cleanup/route.ts b/src/app/api/cleanup/route.ts
deleted file mode 100644
index 8b011644..00000000
--- a/src/app/api/cleanup/route.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { get_database } from "@/db";
-import { dbTempSession } from "@/db/schema";
-import { lt } from "drizzle-orm";
-import { NextResponse } from "next/server";
-
-export const runtime = "edge";
-
-export const GET = async () => {
-  const db = get_database();
-  const now = Math.floor(Date.now() / 1000);
-  await db.delete(dbTempSession).where(lt(dbTempSession.expiredAt, now));
-
-  return NextResponse.json({
-    success: true,
-  });
-};
diff --git a/src/app/api/database/[database_id]/ops/handle-assign-user.ts b/src/app/api/database/[database_id]/ops/handle-assign-user.ts
deleted file mode 100644
index 7d364e62..00000000
--- a/src/app/api/database/[database_id]/ops/handle-assign-user.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { HttpStatus } from "@/constants/http-status";
-import { get_database } from "@/db";
-import { database_role, database_user_role } from "@/db/schema-database";
-import { user as userTable } from "@/db/schema-user";
-import { ApiError } from "@/lib/api-error";
-import { RequestDatabaseAssignUser } from "@/lib/api/api-database-request";
-import { DatabaseOperationHandler } from "@/lib/with-database-ops";
-import { and, eq } from "drizzle-orm";
-import { NextResponse } from "next/server";
-
-const handleAssignUser: DatabaseOperationHandler<
-  RequestDatabaseAssignUser
-> = async ({ database: databaseInfo, body, user, permission }) => {
-  const { roleId, userId } = body;
-  const db = get_database();
-
-  // Validate if user input all fields
-  if (!userId || !roleId)
-    throw new ApiError({
-      message: "Please provide user and role",
-      status: HttpStatus.BAD_REQUEST,
-    });
-
-  if (!permission.isOwner) {
-    throw new ApiError({
-      message: "Only owner can assign other user access",
-      status: HttpStatus.FORBIDDEN,
-    });
-  }
-
-  if (user.id === userId) {
-    throw new ApiError({
-      message: "Cannot reassign yourself",
-      status: HttpStatus.FORBIDDEN,
-    });
-  }
-
-  // Check if role and user are valid
-  const assignedRole = await db.query.database_role.findFirst({
-    where: eq(database_role.id, roleId),
-  });
-
-  const assignedUser = await db.query.user.findFirst({
-    where: eq(userTable.id, userId),
-  });
-
-  if (!assignedRole || assignedRole.databaseId !== databaseInfo.id) {
-    throw new ApiError({
-      message: "Role does not exist in this database",
-      status: HttpStatus.BAD_REQUEST,
-    });
-  }
-
-  if (!assignedUser) {
-    throw new ApiError({
-      message: "User does not exist",
-      status: HttpStatus.BAD_REQUEST,
-    });
-  }
-
-  const isOriginalOwner = user.id === databaseInfo.userId;
-  if (assignedRole.isOwner && !isOriginalOwner) {
-    throw new ApiError({
-      message: "Only original owner can assign other owner",
-      status: HttpStatus.FORBIDDEN,
-    });
-  }
-
-  // Check if user already have previous role
-  const existingRole = (
-    await db
-      .select()
-      .from(database_user_role)
-      .innerJoin(database_role, eq(database_role.id, database_user_role.roleId))
-      .where(
-        and(
-          eq(database_user_role.databaseId, databaseInfo.id),
-          eq(database_user_role.userId, userId)
-        )
-      )
-  )[0];
-
-  if (!existingRole) {
-    await db.insert(database_user_role).values({
-      userId,
-      databaseId: databaseInfo.id,
-      roleId,
-      createdBy: user.id,
-      createdAt: Date.now(),
-    });
-  } else {
-    if (existingRole.database_role.isOwner && !isOriginalOwner) {
-      throw new ApiError({
-        message: "Only original owner can reassign other owner",
-        status: HttpStatus.FORBIDDEN,
-      });
-    }
-
-    await db
-      .update(database_user_role)
-      .set({ roleId, createdAt: Date.now(), createdBy: user.id })
-      .where(
-        and(
-          eq(database_user_role.databaseId, databaseInfo.id),
-          eq(database_user_role.userId, userId)
-        )
-      );
-  }
-
-  return NextResponse.json({ success: true });
-};
-
-export default handleAssignUser;
diff --git a/src/app/api/database/[database_id]/ops/handle-delete-user.ts b/src/app/api/database/[database_id]/ops/handle-delete-user.ts
deleted file mode 100644
index c0d4f261..00000000
--- a/src/app/api/database/[database_id]/ops/handle-delete-user.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { HttpStatus } from "@/constants/http-status";
-import { get_database } from "@/db";
-import { database_role, database_user_role } from "@/db/schema-database";
-import { ApiError } from "@/lib/api-error";
-import { RequestDatabaseDeleteUser } from "@/lib/api/api-database-request";
-import { DatabaseOperationHandler } from "@/lib/with-database-ops";
-import { and, eq } from "drizzle-orm";
-import { NextResponse } from "next/server";
-
-const handleDeleteUser: DatabaseOperationHandler<
-  RequestDatabaseDeleteUser
-> = async ({ database: databaseInfo, body, user, permission }) => {
-  const { userId } = body;
-  const db = get_database();
-
-  // Validate if user input all fields
-  if (!userId)
-    throw new ApiError({
-      message: "Please provide user and role",
-      status: HttpStatus.BAD_REQUEST,
-    });
-
-  if (!permission.isOwner) {
-    throw new ApiError({
-      message: "Only owner can delete other user access",
-      status: HttpStatus.FORBIDDEN,
-    });
-  }
-
-  if (user.id === userId) {
-    throw new ApiError({
-      message: "Cannot delete yourself",
-      status: HttpStatus.FORBIDDEN,
-    });
-  }
-
-  const isOriginalOwner = user.id === databaseInfo.userId;
-
-  // Check if user already have previous role
-  const existingRole = (
-    await db
-      .select()
-      .from(database_user_role)
-      .innerJoin(database_role, eq(database_role.id, database_user_role.roleId))
-      .where(
-        and(
-          eq(database_user_role.databaseId, databaseInfo.id),
-          eq(database_user_role.userId, userId)
-        )
-      )
-  )[0];
-
-  if (!existingRole) {
-    throw new ApiError({
-      message: "User does not belong to this database",
-      status: HttpStatus.BAD_REQUEST,
-    });
-  }
-
-  if (existingRole.database_role.isOwner && !isOriginalOwner) {
-    throw new ApiError({
-      message: "Only original owner can delete other owner",
-      status: HttpStatus.FORBIDDEN,
-    });
-  }
-
-  await db
-    .delete(database_user_role)
-    .where(
-      and(
-        eq(database_user_role.databaseId, databaseInfo.id),
-        eq(database_user_role.userId, userId)
-      )
-    );
-
-  return NextResponse.json({ success: true });
-};
-
-export default handleDeleteUser;
diff --git a/src/app/api/database/[database_id]/ops/handle-role-list.ts b/src/app/api/database/[database_id]/ops/handle-role-list.ts
deleted file mode 100644
index 3cc932e7..00000000
--- a/src/app/api/database/[database_id]/ops/handle-role-list.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { get_database } from "@/db";
-import { database_role } from "@/db/schema-database";
-import { DatabaseOperationHandler } from "@/lib/with-database-ops";
-import { eq } from "drizzle-orm";
-import { NextResponse } from "next/server";
-
-const handleRoleList: DatabaseOperationHandler = async ({ database }) => {
-  const db = get_database();
-
-  const roles = await db.query.database_role.findMany({
-    where: eq(database_role.databaseId, database.id),
-  });
-
-  return NextResponse.json({
-    roles: roles.map((role) => ({
-      id: role.id,
-      name: role.name,
-    })),
-  });
-};
-
-export default handleRoleList;
diff --git a/src/app/api/database/[database_id]/ops/handle-users-list.ts b/src/app/api/database/[database_id]/ops/handle-users-list.ts
deleted file mode 100644
index 449916ec..00000000
--- a/src/app/api/database/[database_id]/ops/handle-users-list.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { get_database } from "@/db";
-import { user } from "@/db/schema";
-import { database_role, database_user_role } from "@/db/schema-database";
-import { DatabaseOperationHandler } from "@/lib/with-database-ops";
-import { eq } from "drizzle-orm";
-import { alias } from "drizzle-orm/sqlite-core";
-import { NextResponse } from "next/server";
-
-const handleUserList: DatabaseOperationHandler = async ({
-  database: databaseInfo,
-}) => {
-  const assigned_user = alias(user, "assigned_user");
-
-  const db = get_database();
-  const users = await db
-    .select({
-      id: user.id,
-      name: user.name,
-      role: {
-        id: database_role.id,
-        name: database_role.name,
-      },
-      createdAt: database_user_role.createdAt,
-      assignedBy: {
-        id: assigned_user.id,
-        name: assigned_user.name,
-      },
-    })
-    .from(database_user_role)
-    .innerJoin(user, eq(database_user_role.userId, user.id))
-    .innerJoin(
-      assigned_user,
-      eq(database_user_role.createdBy, assigned_user.id)
-    )
-    .innerJoin(database_role, eq(database_user_role.roleId, database_role.id))
-    .where(eq(database_user_role.databaseId, databaseInfo.id));
-
-  return NextResponse.json({ users });
-};
-
-export default handleUserList;
diff --git a/src/app/api/database/[database_id]/ops/route.ts b/src/app/api/database/[database_id]/ops/route.ts
deleted file mode 100644
index 5763702d..00000000
--- a/src/app/api/database/[database_id]/ops/route.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { NextResponse } from "next/server";
-import withDatabaseOperation from "@/lib/with-database-ops";
-import { RequestDatabaseBody } from "@/lib/api/api-database-request";
-import handleRoleList from "./handle-role-list";
-import handleUserList from "./handle-users-list";
-import handleAssignUser from "./handle-assign-user";
-import handleDeleteUser from "./handle-delete-user";
-
-export const runtime = "edge";
-
-export const POST = withDatabaseOperation<RequestDatabaseBody>(
-  async function (props) {
-    const body = props.body;
-
-    if (body.type === "roles") {
-      return await handleRoleList(props);
-    } else if (body.type === "users") {
-      return await handleUserList(props);
-    } else if (body.type === "assign-user") {
-      return await handleAssignUser({ ...props, body });
-    } else if (body.type === "delete-user") {
-      return await handleDeleteUser({ ...props, body });
-    }
-
-    return NextResponse.json({ error: "Unknown command" }, { status: 500 });
-  }
-);
diff --git a/src/app/api/database/[database_id]/route.ts b/src/app/api/database/[database_id]/route.ts
deleted file mode 100644
index 36ef0488..00000000
--- a/src/app/api/database/[database_id]/route.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import zod from "zod";
-import withDatabaseOperation from "@/lib/with-database-ops";
-import { NextResponse } from "next/server";
-import { database } from "@/db/schema";
-import { eq } from "drizzle-orm";
-import { encrypt } from "@/lib/encryption-edge";
-import { env } from "@/env";
-import { SavedConnectionItemConfig } from "@/app/(theme)/connect/saved-connection-storage";
-import { get_database } from "@/db";
-
-export const runtime = "edge";
-
-const databaseSchema = zod.object({
-  name: zod.string().min(3).max(50),
-  description: zod.string(),
-  label: zod.enum(["gray", "red", "yellow", "green", "blue"]),
-  config: zod.object({
-    url: zod.string().optional(),
-    token: zod.string().optional(),
-    username: zod.string().optional(),
-    password: zod.string().optional(),
-    database: zod.string().optional(),
-  }),
-});
-
-export const GET = withDatabaseOperation(async ({ database: databaseInfo }) => {
-  return NextResponse.json({
-    id: databaseInfo.id,
-    driver: databaseInfo.driver ?? "turso",
-    name: databaseInfo.name,
-    storage: databaseInfo.driver,
-    description: databaseInfo.description,
-    label: databaseInfo.color,
-    config: {
-      url: databaseInfo.host,
-      username: databaseInfo.username,
-      database: databaseInfo.databaseName,
-      token: "",
-    },
-  } as SavedConnectionItemConfig);
-});
-
-export const DELETE = withDatabaseOperation(
-  async ({ database: databaseInfo, user }) => {
-    const isOriginalOwner = databaseInfo.userId === user.id;
-    const db = get_database();
-
-    if (!isOriginalOwner) {
-      return NextResponse.json({ error: "Unauthorization" }, { status: 500 });
-    }
-
-    await db
-      .update(database)
-      .set({
-        deletedAt: Date.now(),
-      })
-      .where(eq(database.id, databaseInfo.id));
-
-    return NextResponse.json({ success: true });
-  }
-);
-
-export const PUT = withDatabaseOperation(
-  async ({ database: databaseInfo, body, user }) => {
-    const parsed = databaseSchema.safeParse(body);
-    const db = get_database();
-
-    if (!parsed.success) {
-      return NextResponse.json(
-        {
-          error: parsed.error.formErrors,
-        },
-        { status: 500 }
-      );
-    }
-
-    const data = parsed.data;
-
-    const isOriginalOwner = databaseInfo.userId === user.id;
-    if (!isOriginalOwner) {
-      return NextResponse.json({ error: "Unauthorization" }, { status: 500 });
-    }
-
-    await db
-      .update(database)
-      .set({
-        color: data.label,
-        description: data.description,
-        name: data.name,
-        host: data.config.url,
-        token: data.config.token
-          ? await encrypt(env.ENCRYPTION_KEY, data.config.token)
-          : undefined,
-        username: data.config.username,
-        databaseName: data.config.database,
-        password: data.config.password
-          ? await encrypt(env.ENCRYPTION_KEY, data.config.password)
-          : undefined,
-      })
-      .where(eq(database.id, databaseInfo.id));
-
-    return NextResponse.json({
-      success: true,
-    });
-  }
-);
diff --git a/src/app/api/database/route.ts b/src/app/api/database/route.ts
deleted file mode 100644
index a09848f2..00000000
--- a/src/app/api/database/route.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import zod from "zod";
-import withUser from "@/lib/with-user";
-import { generateId } from "lucia";
-import { database, database_role, database_user_role } from "@/db/schema";
-import { NextResponse } from "next/server";
-import { env } from "@/env";
-import { encrypt } from "@/lib/encryption-edge";
-import { SavedConnectionItem } from "@/app/(theme)/connect/saved-connection-storage";
-import { get_database } from "@/db";
-
-export const runtime = "edge";
-
-const databaseSchema = zod.object({
-  name: zod.string().min(3).max(50),
-  description: zod.string(),
-  label: zod.enum(["gray", "red", "yellow", "green", "blue"]),
-  driver: zod.enum(["turso", "rqlite", "valtown", "cloudflare-d1"]),
-  config: zod.object({
-    url: zod.string().optional(),
-    token: zod.string().optional(),
-    username: zod.string().optional(),
-    password: zod.string().optional(),
-    database: zod.string().optional(),
-  }),
-});
-
-export const POST = withUser(async ({ user, req }) => {
-  const body = await req.json();
-  const parsed = databaseSchema.safeParse(body);
-
-  if (!parsed.success) {
-    return NextResponse.json(
-      {
-        error: parsed.error.formErrors,
-      },
-      { status: 500 }
-    );
-  }
-
-  const data = parsed.data;
-  const databaseId = generateId(15);
-  const ownerRoleId = generateId(15);
-  const editorRole = generateId(15);
-  const now = Date.now();
-
-  try {
-    const db = get_database();
-    await db.batch([
-      db.insert(database).values({
-        id: databaseId,
-        userId: user.id,
-        color: data.label,
-        createdAt: now,
-        description: data.description,
-        driver: data.driver,
-        name: data.name,
-        host: data.config.url,
-        databaseName: data.config.database,
-        token: data.config.token
-          ? await encrypt(env.ENCRYPTION_KEY, data.config.token)
-          : undefined,
-        username: data.config.username,
-        password: data.config.password
-          ? await encrypt(env.ENCRYPTION_KEY, data.config.password)
-          : undefined,
-      }),
-
-      db.insert(database_role).values({
-        id: ownerRoleId,
-        databaseId,
-        name: "Owner",
-        canExecuteQuery: 1,
-        isOwner: 1,
-        createdAt: now,
-        createdBy: user.id,
-        updatedAt: now,
-        updatedBy: user.id,
-      }),
-
-      db.insert(database_role).values({
-        id: editorRole,
-        databaseId,
-        name: "Editor",
-        canExecuteQuery: 1,
-        isOwner: 0,
-        createdAt: Date.now(),
-        createdBy: user.id,
-        updatedAt: Date.now(),
-        updatedBy: user.id,
-      }),
-
-      db.insert(database_user_role).values({
-        databaseId,
-        roleId: ownerRoleId,
-        createdAt: Date.now(),
-        createdBy: user.id,
-        userId: user.id,
-      }),
-    ]);
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        id: databaseId,
-        driver: data.driver,
-        name: data.name,
-        label: data.label,
-        description: data.description,
-        storage: "remote",
-      } as SavedConnectionItem,
-    });
-  } catch (e) {
-    return NextResponse.json({
-      success: false,
-    });
-  }
-});
diff --git a/src/app/api/databases/route.ts b/src/app/api/databases/route.ts
deleted file mode 100644
index c7a4de0c..00000000
--- a/src/app/api/databases/route.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { SavedConnectionItem } from "@/app/(theme)/connect/saved-connection-storage";
-import { get_database } from "@/db";
-import { database, database_user_role, user as userTable } from "@/db/schema";
-import withUser from "@/lib/with-user";
-import { and, desc, eq, isNull } from "drizzle-orm";
-import { NextResponse } from "next/server";
-
-export const runtime = "edge";
-
-export const GET = withUser(async ({ user }) => {
-  const db = get_database();
-  const dbs = await db
-    .select()
-    .from(database_user_role)
-    .innerJoin(database, eq(database.id, database_user_role.databaseId))
-    .innerJoin(userTable, eq(userTable.id, database.userId))
-    .where(
-      and(eq(database_user_role.userId, user.id), isNull(database.deletedAt))
-    )
-    .orderBy(desc(database.createdAt));
-
-  return NextResponse.json({
-    databases: dbs.map(
-      (d) =>
-        ({
-          id: d.database.id,
-          name: d.database.name,
-          driver: d.database.driver,
-          description: d.database.description,
-          storage: "remote",
-          label: d.database.color,
-          shared:
-            d.database.userId === d.database_user_role.userId
-              ? undefined
-              : {
-                  sharedBy: {
-                    id: d.user.id,
-                    name: d.user.name,
-                  },
-                },
-        }) as SavedConnectionItem
-    ),
-  });
-});
diff --git a/src/app/api/ops/[database_id]/handle-batch.ts b/src/app/api/ops/[database_id]/handle-batch.ts
deleted file mode 100644
index 858afec0..00000000
--- a/src/app/api/ops/[database_id]/handle-batch.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { DatabaseOperationHandler } from "@/lib/with-database-ops";
-import { NextResponse } from "next/server";
-import { createTursoEdgeDriver } from "./turso-edge-client";
-import { RequestOperationBatch } from "@/lib/api/api-request-types";
-
-const handleBatchRequest: DatabaseOperationHandler<
-  RequestOperationBatch
-> = async ({ permission, database, body }) => {
-  if (!permission.canExecuteQuery) {
-    return NextResponse.json(
-      {
-        error: "No permission to execute query",
-      },
-      { status: 500 }
-    );
-  }
-
-  const client = await createTursoEdgeDriver(database);
-
-  try {
-    return NextResponse.json({
-      data: await client.transaction(body.statements),
-    });
-  } catch (e) {
-    return NextResponse.json({ error: (e as Error).message });
-  }
-};
-
-export default handleBatchRequest;
diff --git a/src/app/api/ops/[database_id]/handle-query.ts b/src/app/api/ops/[database_id]/handle-query.ts
deleted file mode 100644
index 804cb4a8..00000000
--- a/src/app/api/ops/[database_id]/handle-query.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { DatabaseOperationHandler } from "@/lib/with-database-ops";
-import { NextResponse } from "next/server";
-import { createTursoEdgeDriver } from "./turso-edge-client";
-import { RequestOperationQuery } from "@/lib/api/api-request-types";
-
-const handleQueryRequest: DatabaseOperationHandler<
-  RequestOperationQuery
-> = async ({ permission, database, body }) => {
-  if (!permission.canExecuteQuery) {
-    return NextResponse.json(
-      {
-        error: "No permission to execute query",
-      },
-      { status: 500 }
-    );
-  }
-
-  const client = await createTursoEdgeDriver(database);
-
-  try {
-    return NextResponse.json({
-      data: await client.query(body.statement),
-    });
-  } catch (e) {
-    return NextResponse.json({ error: (e as Error).message });
-  }
-};
-
-export default handleQueryRequest;
diff --git a/src/app/api/ops/[database_id]/handler.ts b/src/app/api/ops/[database_id]/handler.ts
deleted file mode 100644
index 29ceaf9b..00000000
--- a/src/app/api/ops/[database_id]/handler.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { RequestOperationBody } from "@/lib/api/api-request-types";
-import { DatabaseOperationHandler } from "@/lib/with-database-ops";
-import handleBatchRequest from "./handle-batch";
-import handleQueryRequest from "./handle-query";
-import { NextResponse } from "next/server";
-
-export const databaseOperationHandler: DatabaseOperationHandler<
-  RequestOperationBody
-> = async (props) => {
-  const body = props.body;
-
-  if (body.type === "batch") {
-    return await handleBatchRequest({ ...props, body });
-  } else if (body.type === "query") {
-    return await handleQueryRequest({ ...props, body });
-  }
-
-  return NextResponse.json({ error: "Unknown command" }, { status: 500 });
-};
diff --git a/src/app/api/ops/[database_id]/route.ts b/src/app/api/ops/[database_id]/route.ts
deleted file mode 100644
index b6babe68..00000000
--- a/src/app/api/ops/[database_id]/route.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import withDatabaseOperation from "@/lib/with-database-ops";
-import { RequestOperationBody } from "@/lib/api/api-request-types";
-import { databaseOperationHandler } from "./handler";
-
-export const runtime = "edge";
-
-export const POST = withDatabaseOperation<RequestOperationBody>(
-  databaseOperationHandler
-);
diff --git a/src/app/api/ops/[database_id]/turso-edge-client.ts b/src/app/api/ops/[database_id]/turso-edge-client.ts
deleted file mode 100644
index 2387ed80..00000000
--- a/src/app/api/ops/[database_id]/turso-edge-client.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { database } from "@/db/schema";
-import CloudflareD1Driver from "@/drivers/cloudflare-d1-driver";
-import RqliteDriver from "@/drivers/rqlite-driver";
-import TursoDriver from "@/drivers/turso-driver";
-import ValtownDriver from "@/drivers/valtown-driver";
-import { env } from "@/env";
-import { decrypt } from "@/lib/encryption-edge";
-
-export async function createTursoEdgeDriver(db: typeof database.$inferSelect) {
-  const url = db.host ?? "";
-
-  if (db.driver === "rqlite") {
-    return new RqliteDriver(
-      url,
-      db.username ?? "",
-      db.password ? await decrypt(env.ENCRYPTION_KEY, db.password) : ""
-    );
-  } else if (db.driver === "valtown") {
-    return new ValtownDriver(
-      db.token ? await decrypt(env.ENCRYPTION_KEY, db.token) : ""
-    );
-  } else if (db.driver === "cloudflare-d1") {
-    return new CloudflareD1Driver(
-      `https://api.cloudflare.com/client/v4/accounts/${db.username}/d1/database/${db.databaseName}/raw`,
-      {
-        Authorization:
-          "Bearer " + (await decrypt(env.ENCRYPTION_KEY, db.token ?? "")),
-      }
-    );
-  }
-
-  const token = db.token
-    ? await decrypt(env.ENCRYPTION_KEY, db.token ?? "")
-    : "";
-  return new TursoDriver(url, token);
-}
diff --git a/src/controllers/auth.ts b/src/controllers/auth.ts
deleted file mode 100644
index b93400ee..00000000
--- a/src/controllers/auth.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { get_database } from "@/db";
-import { user, user_oauth } from "@/db/schema";
-import { Provider, LuciaAuth } from "@/lib/auth";
-import { generateId } from "lucia";
-import { cookies, headers } from "next/headers";
-
-interface UserAuth {
-  id: string;
-  name: string;
-  email: string;
-}
-
-export const save = async (data: UserAuth, provider: Provider) => {
-  const lucia = LuciaAuth.get();
-  if (!lucia) return;
-
-  const { id, name, email } = data;
-  const headerStore = await headers();
-  const cookieStore = await cookies();
-  const db = get_database();
-
-  const existingUser = await db.query.user_oauth.findFirst({
-    where: (field, op) =>
-      op.and(op.eq(field.provider, provider), op.eq(field.providerId, id)),
-  });
-
-  if (existingUser?.userId) {
-    const session = await lucia.createSession(existingUser.userId, {
-      auth_id: existingUser.id,
-      user_agent: headerStore.get("user-agent"),
-    });
-
-    const sessionCookie = lucia.createSessionCookie(session.id);
-
-    cookieStore.set(
-      sessionCookie.name,
-      sessionCookie.value,
-      sessionCookie.attributes
-    );
-
-    return new Response(null, {
-      status: 302,
-      headers: {
-        Location: "/connect",
-      },
-    });
-  }
-
-  const userId = generateId(15);
-  const authId = generateId(15);
-
-  await db.insert(user).values({ id: userId, name, email });
-  await db.insert(user_oauth).values({
-    id: authId,
-    provider: provider,
-    providerId: id,
-    userId: userId,
-  });
-
-  const session = await lucia.createSession(userId, {
-    auth_id: userId,
-    user_agent: headerStore.get("user-agent"),
-  });
-
-  const sessionCookie = lucia.createSessionCookie(session.id);
-
-  cookieStore.set(
-    sessionCookie.name,
-    sessionCookie.value,
-    sessionCookie.attributes
-  );
-};

From a098366cc2ad06f08eb462235aec8764beef386b Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 13:31:08 +0700
Subject: [PATCH 091/106] remove all drizzle and remote connection code

---
 drizzle.config.ts                             |   12 -
 package-lock.json                             | 4772 +++++------------
 package.json                                  |    7 -
 .../(public)/learn/sqlite/indexing/page.mdx   |    5 -
 .../learn/sqlite/introduction/page.mdx        |    5 -
 src/app/(public)/learn/sqlite/layout.tsx      |   34 -
 .../(public)/login/github/callback/route.ts   |   81 -
 src/app/(public)/login/github/route.ts        |   21 -
 .../(public)/login/google/callback/route.ts   |   83 -
 src/app/(public)/login/google/route.ts        |   32 -
 src/app/(public)/login/page.tsx               |   87 -
 src/app/(public)/logout/route.tsx             |   31 -
 src/app/(theme)/playground/client/page.tsx    |   29 +-
 src/components/logout.tsx                     |   29 -
 src/db/index.ts                               |   19 -
 src/db/migrate.ts                             |   15 -
 src/db/schema-database.ts                     |   77 -
 src/db/schema-dataset.ts                      |   13 -
 src/db/schema-doc.ts                          |   42 -
 src/db/schema-temp-session.ts                 |   10 -
 src/db/schema-user.ts                         |   71 -
 src/db/schema.ts                              |    5 -
 src/drivers/saved-doc/remote-saved-doc.ts     |  168 -
 src/drivers/saved-doc/saved-doc-actions.ts    |  277 -
 src/env.ts                                    |    6 -
 src/lib/auth.ts                               |  195 -
 src/lib/test-helper.ts                        |  177 -
 src/lib/with-database-ops.ts                  |  108 -
 src/lib/with-user.ts                          |   51 -
 29 files changed, 1318 insertions(+), 5144 deletions(-)
 delete mode 100644 drizzle.config.ts
 delete mode 100644 src/app/(public)/learn/sqlite/indexing/page.mdx
 delete mode 100644 src/app/(public)/learn/sqlite/introduction/page.mdx
 delete mode 100644 src/app/(public)/learn/sqlite/layout.tsx
 delete mode 100644 src/app/(public)/login/github/callback/route.ts
 delete mode 100644 src/app/(public)/login/github/route.ts
 delete mode 100644 src/app/(public)/login/google/callback/route.ts
 delete mode 100644 src/app/(public)/login/google/route.ts
 delete mode 100644 src/app/(public)/login/page.tsx
 delete mode 100644 src/app/(public)/logout/route.tsx
 delete mode 100644 src/components/logout.tsx
 delete mode 100644 src/db/index.ts
 delete mode 100644 src/db/migrate.ts
 delete mode 100644 src/db/schema-database.ts
 delete mode 100644 src/db/schema-dataset.ts
 delete mode 100644 src/db/schema-doc.ts
 delete mode 100644 src/db/schema-temp-session.ts
 delete mode 100644 src/db/schema-user.ts
 delete mode 100644 src/db/schema.ts
 delete mode 100644 src/drivers/saved-doc/remote-saved-doc.ts
 delete mode 100644 src/drivers/saved-doc/saved-doc-actions.ts
 delete mode 100644 src/lib/auth.ts
 delete mode 100644 src/lib/test-helper.ts
 delete mode 100644 src/lib/with-database-ops.ts
 delete mode 100644 src/lib/with-user.ts

diff --git a/drizzle.config.ts b/drizzle.config.ts
deleted file mode 100644
index 459cd212..00000000
--- a/drizzle.config.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { env } from "@/env";
-import type { Config } from "drizzle-kit";
-
-export default {
-  schema: "./src/db/schema.ts",
-  out: "./drizzle",
-  driver: "turso",
-  dbCredentials: {
-    url: env.DATABASE_URL ?? "",
-    authToken: env.DATABASE_AUTH_TOKEN,
-  },
-} satisfies Config;
diff --git a/package-lock.json b/package-lock.json
index 5e9da835..7b22bef8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,6 @@
         "@lezer/common": "^1.2.1",
         "@lezer/lr": "^1.4.0",
         "@libsql/client": "^0.5.3",
-        "@lucia-auth/adapter-sqlite": "^3.0.1",
         "@mdx-js/loader": "^3.0.1",
         "@mdx-js/react": "^3.0.1",
         "@next/mdx": "^14.2.4",
@@ -54,14 +53,12 @@
         "@uiw/react-codemirror": "^4.21.21",
         "@vercel/analytics": "^1.3.1",
         "@xyflow/react": "^12.3.6",
-        "arctic": "^1.2.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "cmdk": "^1.0.4",
         "deep-equal": "^2.2.3",
         "dexie": "^4.0.8",
         "dotenv": "^16.4.5",
-        "drizzle-orm": "^0.30.1",
         "echarts": "^5.6.0",
         "eslint-plugin-jest": "^27.6.3",
         "file-saver": "^2.0.5",
@@ -69,12 +66,10 @@
         "immer": "^10.1.1",
         "libsql-stateless-easy": "^1.6.11",
         "lodash": "^4.17.21",
-        "lucia": "^3.2.0",
         "lucide-react": "^0.474.0",
         "motion": "^12.4.3",
         "next": "15.1.4",
         "next-themes": "^0.4.4",
-        "oslo": "^1.1.3",
         "react": "19.0.0",
         "react-color": "^2.19.3",
         "react-dom": "19.0.0",
@@ -106,10 +101,8 @@
         "@types/wicg-file-system-access": "^2023.10.5",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
-        "drizzle-kit": "^0.20.14",
         "eslint": "^8",
         "eslint-config-next": "14.0.4",
-        "gui": "^0.15.3",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "postcss": "^8.4.38",
@@ -1214,934 +1207,965 @@
         "react": ">=16.8.0"
       }
     },
-    "node_modules/@emnapi/core": {
-      "version": "0.45.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-0.45.0.tgz",
-      "integrity": "sha512-DPWjcUDQkCeEM4VnljEOEcXdAD7pp8zSZsgOujk/LGIwCXWbXJngin+MO4zbH429lzeC3WbYLGjE2MaUOwzpyw==",
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz",
+      "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
+      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.4.0"
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
-    "node_modules/@emnapi/runtime": {
-      "version": "0.45.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-0.45.0.tgz",
-      "integrity": "sha512-Txumi3td7J4A/xTTwlssKieHKTGl3j4A1tglBx72auZ49YK7ePY6XZricgIg9mnZT4xPfA+UPCUdnhRuEFDL+w==",
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "tslib": "^2.4.0"
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@esbuild-kit/core-utils": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@esbuild-kit/core-utils/-/core-utils-3.3.2.tgz",
-      "integrity": "sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==",
-      "deprecated": "Merged into tsx: https://tsx.is",
-      "dev": true,
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "license": "MIT",
       "dependencies": {
-        "esbuild": "~0.18.20",
-        "source-map-support": "^0.5.21"
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/android-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
       "engines": {
-        "node": ">=12"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/android-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
-      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=10.10.0"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/android-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
-      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "*"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
+      "peerDependencies": {
+        "react": "*"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
-      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
         "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.4"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/darwin-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
-      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
         "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.4"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
-      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
-        "freebsd"
+        "darwin"
       ],
-      "engines": {
-        "node": ">=12"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
-      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
-        "freebsd"
+        "darwin"
       ],
-      "engines": {
-        "node": ">=12"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
-      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
       "cpu": [
         "arm"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
         "linux"
       ],
-      "engines": {
-        "node": ">=12"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
-      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
         "linux"
       ],
-      "engines": {
-        "node": ">=12"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
-      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
+      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
       "cpu": [
-        "ia32"
+        "s390x"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
         "linux"
       ],
-      "engines": {
-        "node": ">=12"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-loong64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
+      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
       "cpu": [
-        "loong64"
+        "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
         "linux"
       ],
-      "engines": {
-        "node": ">=12"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
-      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
       "cpu": [
-        "mips64el"
+        "arm64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
         "linux"
       ],
-      "engines": {
-        "node": ">=12"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
-      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
       "cpu": [
-        "ppc64"
+        "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
         "linux"
       ],
-      "engines": {
-        "node": ">=12"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
-      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
       "cpu": [
-        "riscv64"
+        "arm"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.5"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-s390x": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
-      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
       "cpu": [
-        "s390x"
+        "arm64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.4"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
-      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
+      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
       "cpu": [
-        "x64"
+        "s390x"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.4"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
+      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
-        "netbsd"
+        "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.4"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
       "cpu": [
-        "x64"
+        "arm64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
-        "openbsd"
+        "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/sunos-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
-      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
-        "sunos"
+        "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/win32-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
-      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
+      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
       "cpu": [
-        "arm64"
+        "wasm32"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "dependencies": {
+        "@emnapi/runtime": "^1.2.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-wasm32/node_modules/@emnapi/runtime": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
+      "integrity": "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/win32-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
-      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
+      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
       "cpu": [
         "ia32"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
       "optional": true,
       "os": [
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/win32-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
-      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
       "optional": true,
       "os": [
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild-kit/core-utils/node_modules/esbuild": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
-      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.20",
-        "@esbuild/android-arm64": "0.18.20",
-        "@esbuild/android-x64": "0.18.20",
-        "@esbuild/darwin-arm64": "0.18.20",
-        "@esbuild/darwin-x64": "0.18.20",
-        "@esbuild/freebsd-arm64": "0.18.20",
-        "@esbuild/freebsd-x64": "0.18.20",
-        "@esbuild/linux-arm": "0.18.20",
-        "@esbuild/linux-arm64": "0.18.20",
-        "@esbuild/linux-ia32": "0.18.20",
-        "@esbuild/linux-loong64": "0.18.20",
-        "@esbuild/linux-mips64el": "0.18.20",
-        "@esbuild/linux-ppc64": "0.18.20",
-        "@esbuild/linux-riscv64": "0.18.20",
-        "@esbuild/linux-s390x": "0.18.20",
-        "@esbuild/linux-x64": "0.18.20",
-        "@esbuild/netbsd-x64": "0.18.20",
-        "@esbuild/openbsd-x64": "0.18.20",
-        "@esbuild/sunos-x64": "0.18.20",
-        "@esbuild/win32-arm64": "0.18.20",
-        "@esbuild/win32-ia32": "0.18.20",
-        "@esbuild/win32-x64": "0.18.20"
-      }
-    },
-    "node_modules/@esbuild-kit/esm-loader": {
-      "version": "2.6.5",
-      "resolved": "https://registry.npmjs.org/@esbuild-kit/esm-loader/-/esm-loader-2.6.5.tgz",
-      "integrity": "sha512-FxEMIkJKnodyA1OaCUoEvbYRkoZlLZ4d/eXFu9Fh8CbBBgP5EmZxrfTRyN0qpXZ4vOvqnE5YdRdcrmUUXuU+dA==",
-      "deprecated": "Merged into tsx: https://tsx.is",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@esbuild-kit/core-utils": "^3.3.2",
-        "get-tsconfig": "^4.7.0"
-      }
-    },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
-      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
+    "node_modules/@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "devOptional": true,
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
       }
     },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
-      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
       }
     },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
-      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
       }
     },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
-      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
       }
     },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
-      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
-      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
       }
     },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
-      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
-      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
       }
     },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
-      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
       }
     },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
-      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
       }
     },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
-      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
+    "node_modules/@jest/console": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-29.7.0.tgz",
+      "integrity": "sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "slash": "^3.0.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
-      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
+    "node_modules/@jest/core": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-29.7.0.tgz",
+      "integrity": "sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "@jest/console": "^29.7.0",
+        "@jest/reporters": "^29.7.0",
+        "@jest/test-result": "^29.7.0",
+        "@jest/transform": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "jest-changed-files": "^29.7.0",
+        "jest-config": "^29.7.0",
+        "jest-haste-map": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-regex-util": "^29.6.3",
+        "jest-resolve": "^29.7.0",
+        "jest-resolve-dependencies": "^29.7.0",
+        "jest-runner": "^29.7.0",
+        "jest-runtime": "^29.7.0",
+        "jest-snapshot": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "jest-validate": "^29.7.0",
+        "jest-watcher": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^29.7.0",
+        "slash": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
-      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
+    "node_modules/@jest/core/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">=12"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
-      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
+    "node_modules/@jest/core/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
-      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
+    "node_modules/@jest/core/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "devOptional": true,
+      "license": "MIT"
     },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
-      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
+    "node_modules/@jest/environment": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz",
+      "integrity": "sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "@jest/fake-timers": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-mock": "^29.7.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
-      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@jest/expect": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.7.0.tgz",
+      "integrity": "sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "expect": "^29.7.0",
+        "jest-snapshot": "^29.7.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@jest/expect-utils": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz",
+      "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
+      "dependencies": {
+        "jest-get-type": "^29.6.3"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz",
-      "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@jest/fake-timers": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.7.0.tgz",
+      "integrity": "sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@sinonjs/fake-timers": "^10.0.2",
+        "@types/node": "*",
+        "jest-message-util": "^29.7.0",
+        "jest-mock": "^29.7.0",
+        "jest-util": "^29.7.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@jest/globals": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-29.7.0.tgz",
+      "integrity": "sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
+      "dependencies": {
+        "@jest/environment": "^29.7.0",
+        "@jest/expect": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "jest-mock": "^29.7.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
-      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@jest/reporters": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-29.7.0.tgz",
+      "integrity": "sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
+      "dependencies": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "^29.7.0",
+        "@jest/test-result": "^29.7.0",
+        "@jest/transform": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^6.0.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.1.3",
+        "jest-message-util": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "jest-worker": "^29.7.0",
+        "slash": "^3.0.0",
+        "string-length": "^4.0.1",
+        "strip-ansi": "^6.0.0",
+        "v8-to-istanbul": "^9.0.1"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
-      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@jest/reporters/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
-      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+    "node_modules/@jest/reporters/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "devOptional": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
-      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
-      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
-      "license": "MIT",
-      "dependencies": {
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
-      }
-    },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
-      "license": "MIT",
-      "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+    "node_modules/@jest/reporters/node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -2150,2190 +2174,745 @@
         "node": "*"
       }
     },
-    "node_modules/@eslint/js": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+    "node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "devOptional": true,
       "license": "MIT",
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
+      },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
-      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+    "node_modules/@jest/source-map": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-29.6.3.tgz",
+      "integrity": "sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.9"
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "callsites": "^3.0.0",
+        "graceful-fs": "^4.2.9"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.6.13",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
-      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+    "node_modules/@jest/test-result": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-29.7.0.tgz",
+      "integrity": "sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.9"
+        "@jest/console": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "collect-v8-coverage": "^1.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
-      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+    "node_modules/@jest/test-sequencer": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-29.7.0.tgz",
+      "integrity": "sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
+        "@jest/test-result": "^29.7.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.7.0",
+        "slash": "^3.0.0"
       },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
-      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
-      "license": "MIT"
-    },
-    "node_modules/@hono/node-server": {
-      "version": "1.13.7",
-      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.13.7.tgz",
-      "integrity": "sha512-kTfUMsoloVKtRA2fLiGSd9qBddmru9KadNyhJCwgKBxTiNkaAJEwkVN9KV/rS4HtmmNRtUh6P+YpmjRMl0d9vQ==",
-      "dev": true,
+    "node_modules/@jest/transform": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.7.0.tgz",
+      "integrity": "sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==",
+      "devOptional": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=18.14.1"
+      "dependencies": {
+        "@babel/core": "^7.11.6",
+        "@jest/types": "^29.6.3",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "babel-plugin-istanbul": "^6.1.1",
+        "chalk": "^4.0.0",
+        "convert-source-map": "^2.0.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.7.0",
+        "jest-regex-util": "^29.6.3",
+        "jest-util": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "pirates": "^4.0.4",
+        "slash": "^3.0.0",
+        "write-file-atomic": "^4.0.2"
       },
-      "peerDependencies": {
-        "hono": "^4"
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@hono/zod-validator": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@hono/zod-validator/-/zod-validator-0.2.2.tgz",
-      "integrity": "sha512-dSDxaPV70Py8wuIU2QNpoVEIOSzSXZ/6/B/h4xA7eOMz7+AarKTSGV8E6QwrdcCbBLkpqfJ4Q2TmBO0eP1tCBQ==",
-      "dev": true,
+    "node_modules/@jest/types": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
+      "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
+      "devOptional": true,
       "license": "MIT",
-      "peerDependencies": {
-        "hono": ">=3.9.0",
-        "zod": "^3.19.1"
-      }
-    },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
-      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
-      "deprecated": "Use @eslint/config-array instead",
-      "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.3",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
+        "@jest/schemas": "^29.6.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.8",
+        "chalk": "^4.0.0"
       },
       "engines": {
-        "node": ">=10.10.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
+    "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "devOptional": true,
+      "license": "MIT",
       "engines": {
-        "node": "*"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-      "license": "Apache-2.0",
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "devOptional": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=12.22"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "deprecated": "Use @eslint/object-schema instead",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@icons/material": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
-      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
-    "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
-      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
-      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
-      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
-      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
-      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
-      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
-      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
-      "cpu": [
-        "s390x"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
-      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
-      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
-      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-linux-arm": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
-      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.0.5"
-      }
-    },
-    "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
-      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
-      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
-      "cpu": [
-        "s390x"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
-      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
-      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
-      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
-      }
-    },
-    "node_modules/@img/sharp-wasm32": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
-      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
-      "cpu": [
-        "wasm32"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/runtime": "^1.2.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-wasm32/node_modules/@emnapi/runtime": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
-      "integrity": "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
-      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-win32-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
-      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
-      "devOptional": true,
-      "license": "ISC",
-      "dependencies": {
-        "camelcase": "^5.3.1",
-        "find-up": "^4.1.0",
-        "get-package-type": "^0.1.0",
-        "js-yaml": "^3.13.1",
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "devOptional": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-      "devOptional": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@istanbuljs/schema": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
-      "devOptional": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@jest/console": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-29.7.0.tgz",
-      "integrity": "sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "jest-message-util": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/core": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-29.7.0.tgz",
-      "integrity": "sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/console": "^29.7.0",
-        "@jest/reporters": "^29.7.0",
-        "@jest/test-result": "^29.7.0",
-        "@jest/transform": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.9",
-        "jest-changed-files": "^29.7.0",
-        "jest-config": "^29.7.0",
-        "jest-haste-map": "^29.7.0",
-        "jest-message-util": "^29.7.0",
-        "jest-regex-util": "^29.6.3",
-        "jest-resolve": "^29.7.0",
-        "jest-resolve-dependencies": "^29.7.0",
-        "jest-runner": "^29.7.0",
-        "jest-runtime": "^29.7.0",
-        "jest-snapshot": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "jest-validate": "^29.7.0",
-        "jest-watcher": "^29.7.0",
-        "micromatch": "^4.0.4",
-        "pretty-format": "^29.7.0",
-        "slash": "^3.0.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@jest/core/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "devOptional": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@jest/core/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/core/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "devOptional": true,
-      "license": "MIT"
-    },
-    "node_modules/@jest/environment": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz",
-      "integrity": "sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/fake-timers": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "jest-mock": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/expect": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.7.0.tgz",
-      "integrity": "sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "expect": "^29.7.0",
-        "jest-snapshot": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/expect-utils": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz",
-      "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "jest-get-type": "^29.6.3"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/fake-timers": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.7.0.tgz",
-      "integrity": "sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "@sinonjs/fake-timers": "^10.0.2",
-        "@types/node": "*",
-        "jest-message-util": "^29.7.0",
-        "jest-mock": "^29.7.0",
-        "jest-util": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/globals": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-29.7.0.tgz",
-      "integrity": "sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/environment": "^29.7.0",
-        "@jest/expect": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "jest-mock": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/reporters": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-29.7.0.tgz",
-      "integrity": "sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@jest/console": "^29.7.0",
-        "@jest/test-result": "^29.7.0",
-        "@jest/transform": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@jridgewell/trace-mapping": "^0.3.18",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "collect-v8-coverage": "^1.0.0",
-        "exit": "^0.1.2",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.2.9",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-instrument": "^6.0.0",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^4.0.0",
-        "istanbul-reports": "^3.1.3",
-        "jest-message-util": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "jest-worker": "^29.7.0",
-        "slash": "^3.0.0",
-        "string-length": "^4.0.1",
-        "strip-ansi": "^6.0.0",
-        "v8-to-istanbul": "^9.0.1"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@jest/reporters/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@jest/reporters/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "devOptional": true,
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@jest/reporters/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "devOptional": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/@jest/schemas": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@sinclair/typebox": "^0.27.8"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/source-map": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-29.6.3.tgz",
-      "integrity": "sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.18",
-        "callsites": "^3.0.0",
-        "graceful-fs": "^4.2.9"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/test-result": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-29.7.0.tgz",
-      "integrity": "sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/console": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "collect-v8-coverage": "^1.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/test-sequencer": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-29.7.0.tgz",
-      "integrity": "sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/test-result": "^29.7.0",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^29.7.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/transform": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.7.0.tgz",
-      "integrity": "sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.11.6",
-        "@jest/types": "^29.6.3",
-        "@jridgewell/trace-mapping": "^0.3.18",
-        "babel-plugin-istanbul": "^6.1.1",
-        "chalk": "^4.0.0",
-        "convert-source-map": "^2.0.0",
-        "fast-json-stable-stringify": "^2.1.0",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^29.7.0",
-        "jest-regex-util": "^29.6.3",
-        "jest-util": "^29.7.0",
-        "micromatch": "^4.0.4",
-        "pirates": "^4.0.4",
-        "slash": "^3.0.0",
-        "write-file-atomic": "^4.0.2"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/types": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
-      "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^17.0.8",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
-      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "devOptional": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "devOptional": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "devOptional": true,
-      "license": "MIT"
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@lezer/common": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
-      "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==",
-      "license": "MIT"
-    },
-    "node_modules/@lezer/cpp": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.1.2.tgz",
-      "integrity": "sha512-macwKtyeUO0EW86r3xWQCzOV9/CF8imJLpJlPv3sDY57cPGeUZ8gXWOWNlJr52TVByMV3PayFQCA5SHEERDmVQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/css": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.10.tgz",
-      "integrity": "sha512-V5/89eDapjeAkWPBpWEfQjZ1Hag3aYUUJOL8213X0dFRuXJ4BXa5NKl9USzOnaLod4AOpmVCkduir2oKwZYZtg==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/go": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@lezer/go/-/go-1.0.0.tgz",
-      "integrity": "sha512-co9JfT3QqX1YkrMmourYw2Z8meGC50Ko4d54QEcQbEYpvdUvN4yb0NBZdn/9ertgvjsySxHsKzH3lbm3vqJ4Jw==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/highlight": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
-      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/html": {
-      "version": "1.3.10",
-      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
-      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/java": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.1.3.tgz",
-      "integrity": "sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/javascript": {
-      "version": "1.4.21",
-      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.21.tgz",
-      "integrity": "sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.1.3",
-        "@lezer/lr": "^1.3.0"
-      }
-    },
-    "node_modules/@lezer/json": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
-      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/lezer": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@lezer/lezer/-/lezer-1.1.2.tgz",
-      "integrity": "sha512-O8yw3CxPhzYHB1hvwbdozjnAslhhR8A5BH7vfEMof0xk3p+/DFDfZkA9Tde6J+88WgtwaHy4Sy6ThZSkaI0Evw==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/lr": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
-      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/markdown": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.4.0.tgz",
-      "integrity": "sha512-mk4MYeq6ZQdxgsgRAe0G7kqPRV6Desajfa14TcHoGGXIqqj1/2ARN31VFpmrXDgvXiGBWpA7RXtv0he+UdTkGw==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.0.0",
-        "@lezer/highlight": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/php": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.2.tgz",
-      "integrity": "sha512-GN7BnqtGRpFyeoKSEqxvGvhJQiI4zkgmYnDk/JIyc7H7Ifc1tkPnUn/R2R8meH3h/aBf5rzjvU8ZQoyiNDtDrA==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.1.0"
-      }
-    },
-    "node_modules/@lezer/python": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.15.tgz",
-      "integrity": "sha512-aVQ43m2zk4FZYedCqL0KHPEUsqZOrmAvRhkhHlVPnDD1HODDyyQv5BRIuod4DadkgBEZd53vQOtXTonNbEgjrQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/rust": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.2.tgz",
-      "integrity": "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/sass": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@lezer/sass/-/sass-1.0.7.tgz",
-      "integrity": "sha512-8HLlOkuX/SMHOggI2DAsXUw38TuURe+3eQ5hiuk9QmYOUyC55B1dYEIMkav5A4IELVaW4e1T4P9WRiI5ka4mdw==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/xml": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.6.tgz",
-      "integrity": "sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/yaml": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@lezer/yaml/-/yaml-1.0.3.tgz",
-      "integrity": "sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.4.0"
-      }
-    },
-    "node_modules/@libsql/client": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/@libsql/client/-/client-0.5.6.tgz",
-      "integrity": "sha512-UBjmDoxz75Z2sHdP+ETCROpeLA/77VMesiff8R4UWK1rnaWbh6/YoCLDILMJL3Rh0udQeKxjL8MjXthqohax+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@libsql/core": "^0.5.6",
-        "@libsql/hrana-client": "^0.5.6",
-        "js-base64": "^3.7.5",
-        "libsql": "^0.3.10"
-      }
-    },
-    "node_modules/@libsql/core": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/@libsql/core/-/core-0.5.6.tgz",
-      "integrity": "sha512-3vicUAydq6jPth410n4AsHHm1n2psTwvkSf94nfJlSXutGSZsl0updn2N/mJBgqUHkbuFoWZtlMifF0SwBj1xQ==",
-      "license": "MIT",
-      "dependencies": {
-        "js-base64": "^3.7.5"
-      }
-    },
-    "node_modules/@libsql/darwin-arm64": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@libsql/darwin-arm64/-/darwin-arm64-0.3.19.tgz",
-      "integrity": "sha512-rmOqsLcDI65zzxlUOoEiPJLhqmbFsZF6p4UJQ2kMqB+Kc0Rt5/A1OAdOZ/Wo8fQfJWjR1IbkbpEINFioyKf+nQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@libsql/darwin-x64": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@libsql/darwin-x64/-/darwin-x64-0.3.19.tgz",
-      "integrity": "sha512-q9O55B646zU+644SMmOQL3FIfpmEvdWpRpzubwFc2trsa+zoBlSkHuzU9v/C+UNoPHQVRMP7KQctJ455I/h/xw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@libsql/hrana-client": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/@libsql/hrana-client/-/hrana-client-0.5.6.tgz",
-      "integrity": "sha512-mjQoAmejZ1atG+M3YR2ZW+rg6ceBByH/S/h17ZoYZkqbWrvohFhXyz2LFxj++ARMoY9m6w3RJJIRdJdmnEUlFg==",
-      "license": "MIT",
-      "dependencies": {
-        "@libsql/isomorphic-fetch": "^0.1.12",
-        "@libsql/isomorphic-ws": "^0.1.5",
-        "js-base64": "^3.7.5",
-        "node-fetch": "^3.3.2"
-      }
-    },
-    "node_modules/@libsql/isomorphic-fetch": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/@libsql/isomorphic-fetch/-/isomorphic-fetch-0.1.12.tgz",
-      "integrity": "sha512-MRo4UcmjAGAa3ac56LoD5OE13m2p0lu0VEtZC2NZMcogM/jc5fU9YtMQ3qbPjFJ+u2BBjFZgMPkQaLS1dlMhpg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node-fetch": "^2.6.11",
-        "node-fetch": "^2.7.0"
-      }
-    },
-    "node_modules/@libsql/isomorphic-fetch/node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "license": "MIT",
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@libsql/isomorphic-fetch/node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "license": "MIT"
-    },
-    "node_modules/@libsql/isomorphic-fetch/node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "license": "BSD-2-Clause"
-    },
-    "node_modules/@libsql/isomorphic-fetch/node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "license": "MIT",
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
-    "node_modules/@libsql/isomorphic-ws": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@libsql/isomorphic-ws/-/isomorphic-ws-0.1.5.tgz",
-      "integrity": "sha512-DtLWIH29onUYR00i0GlQ3UdcTRC6EP4u9w/h9LxpUZJWRMARk6dQwZ6Jkd+QdwVpuAOrdxt18v0K2uIYR3fwFg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/ws": "^8.5.4",
-        "ws": "^8.13.0"
-      }
-    },
-    "node_modules/@libsql/linux-arm64-gnu": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@libsql/linux-arm64-gnu/-/linux-arm64-gnu-0.3.19.tgz",
-      "integrity": "sha512-mgeAUU1oqqh57k7I3cQyU6Trpdsdt607eFyEmH5QO7dv303ti+LjUvh1pp21QWV6WX7wZyjeJV1/VzEImB+jRg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@libsql/linux-arm64-musl": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@libsql/linux-arm64-musl/-/linux-arm64-musl-0.3.19.tgz",
-      "integrity": "sha512-VEZtxghyK6zwGzU9PHohvNxthruSxBEnRrX7BSL5jQ62tN4n2JNepJ6SdzXp70pdzTfwroOj/eMwiPt94gkVRg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@libsql/linux-x64-gnu": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@libsql/linux-x64-gnu/-/linux-x64-gnu-0.3.19.tgz",
-      "integrity": "sha512-2t/J7LD5w2f63wGihEO+0GxfTyYIyLGEvTFEsMO16XI5o7IS9vcSHrxsvAJs4w2Pf907uDjmc7fUfMg6L82BrQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@libsql/linux-x64-musl": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@libsql/linux-x64-musl/-/linux-x64-musl-0.3.19.tgz",
-      "integrity": "sha512-BLsXyJaL8gZD8+3W2LU08lDEd9MIgGds0yPy5iNPp8tfhXx3pV/Fge2GErN0FC+nzt4DYQtjL+A9GUMglQefXQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@libsql/win32-x64-msvc": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@libsql/win32-x64-msvc/-/win32-x64-msvc-0.3.19.tgz",
-      "integrity": "sha512-ay1X9AobE4BpzG0XPw1gplyLZPGHIgJOovvW23gUrukRegiUP62uzhpRbKNogLlUOynyXeq//prHgPXiebUfWg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@lucia-auth/adapter-sqlite": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@lucia-auth/adapter-sqlite/-/adapter-sqlite-3.0.2.tgz",
-      "integrity": "sha512-UlXpF+2UoFEdm1AsriJii5BOARwqko6SX29rQ8T8Za7rnjj9KLXLaRVQUgBhGmggAyvzCtguJ2+XOZDsfWm6Sw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@libsql/client": "^0.3.0",
-        "better-sqlite3": "8.x - 11.x",
-        "lucia": "3.x"
-      },
-      "peerDependenciesMeta": {
-        "@libsql/client": {
-          "optional": true
-        },
-        "better-sqlite3": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@marijn/find-cluster-break": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
-      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
-      "license": "MIT"
-    },
-    "node_modules/@mdx-js/loader": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-3.1.0.tgz",
-      "integrity": "sha512-xU/lwKdOyfXtQGqn3VnJjlDrmKXEvMi1mgYxVmukEUtVycIz1nh7oQ40bKTd4cA7rLStqu0740pnhGYxGoqsCg==",
-      "license": "MIT",
-      "dependencies": {
-        "@mdx-js/mdx": "^3.0.0",
-        "source-map": "^0.7.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      },
-      "peerDependencies": {
-        "webpack": ">=5"
-      },
-      "peerDependenciesMeta": {
-        "webpack": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mdx-js/mdx": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.0.tgz",
-      "integrity": "sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "@types/estree-jsx": "^1.0.0",
-        "@types/hast": "^3.0.0",
-        "@types/mdx": "^2.0.0",
-        "collapse-white-space": "^2.0.0",
-        "devlop": "^1.0.0",
-        "estree-util-is-identifier-name": "^3.0.0",
-        "estree-util-scope": "^1.0.0",
-        "estree-walker": "^3.0.0",
-        "hast-util-to-jsx-runtime": "^2.0.0",
-        "markdown-extensions": "^2.0.0",
-        "recma-build-jsx": "^1.0.0",
-        "recma-jsx": "^1.0.0",
-        "recma-stringify": "^1.0.0",
-        "rehype-recma": "^1.0.0",
-        "remark-mdx": "^3.0.0",
-        "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.0.0",
-        "source-map": "^0.7.0",
-        "unified": "^11.0.0",
-        "unist-util-position-from-estree": "^2.0.0",
-        "unist-util-stringify-position": "^4.0.0",
-        "unist-util-visit": "^5.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/@mdx-js/react": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz",
-      "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/mdx": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16",
-        "react": ">=16"
-      }
-    },
-    "node_modules/@neon-rs/load": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@neon-rs/load/-/load-0.0.4.tgz",
-      "integrity": "sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw==",
-      "license": "MIT"
-    },
-    "node_modules/@next/env": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.4.tgz",
-      "integrity": "sha512-2fZ5YZjedi5AGaeoaC0B20zGntEHRhi2SdWcu61i48BllODcAmmtj8n7YarSPt4DaTsJaBFdxQAVEVzgmx2Zpw==",
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "devOptional": true,
       "license": "MIT"
     },
-    "node_modules/@next/eslint-plugin-next": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.0.4.tgz",
-      "integrity": "sha512-U3qMNHmEZoVmHA0j/57nRfi3AscXNvkOnxDmle/69Jz/G0o/gWjXTDdlgILZdrxQ0Lw/jv2mPW8PGy0EGIHXhQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "glob": "7.1.7"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@next/eslint-plugin-next/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
+    "node_modules/@lezer/common": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
+      "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/cpp": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.1.2.tgz",
+      "integrity": "sha512-macwKtyeUO0EW86r3xWQCzOV9/CF8imJLpJlPv3sDY57cPGeUZ8gXWOWNlJr52TVByMV3PayFQCA5SHEERDmVQ==",
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@next/mdx": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/mdx/-/mdx-14.2.23.tgz",
-      "integrity": "sha512-4JVc67Gaj4Tr8w0WO+F5TAjS1JszagcqT06NLQ7CE6lNCyxfYRavo4LRYSdc3enp06aPiZLW6kklE3Xqf3p5rg==",
+    "node_modules/@lezer/css": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.10.tgz",
+      "integrity": "sha512-V5/89eDapjeAkWPBpWEfQjZ1Hag3aYUUJOL8213X0dFRuXJ4BXa5NKl9USzOnaLod4AOpmVCkduir2oKwZYZtg==",
       "license": "MIT",
       "dependencies": {
-        "source-map": "^0.7.0"
-      },
-      "peerDependencies": {
-        "@mdx-js/loader": ">=0.15.0",
-        "@mdx-js/react": ">=0.15.0"
-      },
-      "peerDependenciesMeta": {
-        "@mdx-js/loader": {
-          "optional": true
-        },
-        "@mdx-js/react": {
-          "optional": true
-        }
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.4.tgz",
-      "integrity": "sha512-wBEMBs+np+R5ozN1F8Y8d/Dycns2COhRnkxRc+rvnbXke5uZBHkUGFgWxfTXn5rx7OLijuUhyfB+gC/ap58dDw==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@lezer/go": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/go/-/go-1.0.0.tgz",
+      "integrity": "sha512-co9JfT3QqX1YkrMmourYw2Z8meGC50Ko4d54QEcQbEYpvdUvN4yb0NBZdn/9ertgvjsySxHsKzH3lbm3vqJ4Jw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.4.tgz",
-      "integrity": "sha512-7sgf5rM7Z81V9w48F02Zz6DgEJulavC0jadab4ZsJ+K2sxMNK0/BtF8J8J3CxnsJN3DGcIdC260wEKssKTukUw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
       }
     },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.4.tgz",
-      "integrity": "sha512-JaZlIMNaJenfd55kjaLWMfok+vWBlcRxqnRoZrhFQrhM1uAehP3R0+Aoe+bZOogqlZvAz53nY/k3ZyuKDtT2zQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@lezer/html": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
+      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.4.tgz",
-      "integrity": "sha512-7EBBjNoyTO2ipMDgCiORpwwOf5tIueFntKjcN3NK+GAQD7OzFJe84p7a2eQUeWdpzZvhVXuAtIen8QcH71ZCOQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@lezer/java": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.1.3.tgz",
+      "integrity": "sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.4.tgz",
-      "integrity": "sha512-9TGEgOycqZFuADyFqwmK/9g6S0FYZ3tphR4ebcmCwhL8Y12FW8pIBKJvSwV+UBjMkokstGNH+9F8F031JZKpHw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@lezer/javascript": {
+      "version": "1.4.21",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.21.tgz",
+      "integrity": "sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
       }
     },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.4.tgz",
-      "integrity": "sha512-0578bLRVDJOh+LdIoKvgNDz77+Bd85c5JrFgnlbI1SM3WmEQvsjxTA8ATu9Z9FCiIS/AliVAW2DV/BDwpXbtiQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.4.tgz",
-      "integrity": "sha512-JgFCiV4libQavwII+kncMCl30st0JVxpPOtzWcAI2jtum4HjYaclobKhj+JsRu5tFqMtA5CJIa0MvYyuu9xjjQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@lezer/lezer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lezer/-/lezer-1.1.2.tgz",
+      "integrity": "sha512-O8yw3CxPhzYHB1hvwbdozjnAslhhR8A5BH7vfEMof0xk3p+/DFDfZkA9Tde6J+88WgtwaHy4Sy6ThZSkaI0Evw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.4.tgz",
-      "integrity": "sha512-xxsJy9wzq7FR5SqPCUqdgSXiNXrMuidgckBa8nH9HtjjxsilgcN6VgXF6tZ3uEWuVEadotQJI8/9EQ6guTC4Yw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@lezer/lr": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
       }
     },
-    "node_modules/@nextjournal/lang-clojure": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@nextjournal/lang-clojure/-/lang-clojure-1.0.0.tgz",
-      "integrity": "sha512-gOCV71XrYD0DhwGoPMWZmZ0r92/lIHsqQu9QWdpZYYBwiChNwMO4sbVMP7eTuAqffFB2BTtCSC+1skSH9d3bNg==",
-      "license": "ISC",
+    "node_modules/@lezer/markdown": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.4.0.tgz",
+      "integrity": "sha512-mk4MYeq6ZQdxgsgRAe0G7kqPRV6Desajfa14TcHoGGXIqqj1/2ARN31VFpmrXDgvXiGBWpA7RXtv0he+UdTkGw==",
+      "license": "MIT",
       "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@nextjournal/lezer-clojure": "1.0.0"
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0"
       }
     },
-    "node_modules/@nextjournal/lezer-clojure": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@nextjournal/lezer-clojure/-/lezer-clojure-1.0.0.tgz",
-      "integrity": "sha512-VZyuGu4zw5mkTOwQBTaGVNWmsOZAPw5ZRxu1/Knk/Xfs7EDBIogwIs5UXTYkuECX5ZQB8eOB+wKA2pc7VyqaZQ==",
-      "license": "ISC",
+    "node_modules/@lezer/php": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.2.tgz",
+      "integrity": "sha512-GN7BnqtGRpFyeoKSEqxvGvhJQiI4zkgmYnDk/JIyc7H7Ifc1tkPnUn/R2R8meH3h/aBf5rzjvU8ZQoyiNDtDrA==",
+      "license": "MIT",
       "dependencies": {
-        "@lezer/lr": "^1.0.0"
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.1.0"
       }
     },
-    "node_modules/@node-rs/argon2": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2/-/argon2-1.7.0.tgz",
-      "integrity": "sha512-zfULc+/tmcWcxn+nHkbyY8vP3+MpEqKORbszt4UkpqZgBgDAAIYvuDN/zukfTgdmo6tmJKKVfzigZOPk4LlIog==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      },
-      "optionalDependencies": {
-        "@node-rs/argon2-android-arm-eabi": "1.7.0",
-        "@node-rs/argon2-android-arm64": "1.7.0",
-        "@node-rs/argon2-darwin-arm64": "1.7.0",
-        "@node-rs/argon2-darwin-x64": "1.7.0",
-        "@node-rs/argon2-freebsd-x64": "1.7.0",
-        "@node-rs/argon2-linux-arm-gnueabihf": "1.7.0",
-        "@node-rs/argon2-linux-arm64-gnu": "1.7.0",
-        "@node-rs/argon2-linux-arm64-musl": "1.7.0",
-        "@node-rs/argon2-linux-x64-gnu": "1.7.0",
-        "@node-rs/argon2-linux-x64-musl": "1.7.0",
-        "@node-rs/argon2-wasm32-wasi": "1.7.0",
-        "@node-rs/argon2-win32-arm64-msvc": "1.7.0",
-        "@node-rs/argon2-win32-ia32-msvc": "1.7.0",
-        "@node-rs/argon2-win32-x64-msvc": "1.7.0"
-      }
-    },
-    "node_modules/@node-rs/argon2-android-arm-eabi": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-android-arm-eabi/-/argon2-android-arm-eabi-1.7.0.tgz",
-      "integrity": "sha512-udDqkr5P9E+wYX1SZwAVPdyfYvaF4ry9Tm+R9LkfSHbzWH0uhU6zjIwNRp7m+n4gx691rk+lqqDAIP8RLKwbhg==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
+    "node_modules/@lezer/python": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.15.tgz",
+      "integrity": "sha512-aVQ43m2zk4FZYedCqL0KHPEUsqZOrmAvRhkhHlVPnDD1HODDyyQv5BRIuod4DadkgBEZd53vQOtXTonNbEgjrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@node-rs/argon2-android-arm64": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-android-arm64/-/argon2-android-arm64-1.7.0.tgz",
-      "integrity": "sha512-s9j/G30xKUx8WU50WIhF0fIl1EdhBGq0RQ06lEhZ0Gi0ap8lhqbE2Bn5h3/G2D1k0Dx+yjeVVNmt/xOQIRG38A==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@lezer/rust": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.2.tgz",
+      "integrity": "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@node-rs/argon2-darwin-arm64": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-darwin-arm64/-/argon2-darwin-arm64-1.7.0.tgz",
-      "integrity": "sha512-ZIz4L6HGOB9U1kW23g+m7anGNuTZ0RuTw0vNp3o+2DWpb8u8rODq6A8tH4JRL79S+Co/Nq608m9uackN2pe0Rw==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@lezer/sass": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@lezer/sass/-/sass-1.0.7.tgz",
+      "integrity": "sha512-8HLlOkuX/SMHOggI2DAsXUw38TuURe+3eQ5hiuk9QmYOUyC55B1dYEIMkav5A4IELVaW4e1T4P9WRiI5ka4mdw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@node-rs/argon2-darwin-x64": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-darwin-x64/-/argon2-darwin-x64-1.7.0.tgz",
-      "integrity": "sha512-5oi/pxqVhODW/pj1+3zElMTn/YukQeywPHHYDbcAW3KsojFjKySfhcJMd1DjKTc+CHQI+4lOxZzSUzK7mI14Hw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@lezer/xml": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.6.tgz",
+      "integrity": "sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@node-rs/argon2-freebsd-x64": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-freebsd-x64/-/argon2-freebsd-x64-1.7.0.tgz",
-      "integrity": "sha512-Ify08683hA4QVXYoIm5SUWOY5DPIT/CMB0CQT+IdxQAg/F+qp342+lUkeAtD5bvStQuCx/dFO3bnnzoe2clMhA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@lezer/yaml": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/yaml/-/yaml-1.0.3.tgz",
+      "integrity": "sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.4.0"
       }
     },
-    "node_modules/@node-rs/argon2-linux-arm-gnueabihf": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-linux-arm-gnueabihf/-/argon2-linux-arm-gnueabihf-1.7.0.tgz",
-      "integrity": "sha512-7DjDZ1h5AUHAtRNjD19RnQatbhL+uuxBASuuXIBu4/w6Dx8n7YPxwTP4MXfsvuRgKuMWiOb/Ub/HJ3kXVCXRkg==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/@libsql/client": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@libsql/client/-/client-0.5.6.tgz",
+      "integrity": "sha512-UBjmDoxz75Z2sHdP+ETCROpeLA/77VMesiff8R4UWK1rnaWbh6/YoCLDILMJL3Rh0udQeKxjL8MjXthqohax+g==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@libsql/core": "^0.5.6",
+        "@libsql/hrana-client": "^0.5.6",
+        "js-base64": "^3.7.5",
+        "libsql": "^0.3.10"
       }
     },
-    "node_modules/@node-rs/argon2-linux-arm64-gnu": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-linux-arm64-gnu/-/argon2-linux-arm64-gnu-1.7.0.tgz",
-      "integrity": "sha512-nJDoMP4Y3YcqGswE4DvP080w6O24RmnFEDnL0emdI8Nou17kNYBzP2546Nasx9GCyLzRcYQwZOUjrtUuQ+od2g==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@libsql/core": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@libsql/core/-/core-0.5.6.tgz",
+      "integrity": "sha512-3vicUAydq6jPth410n4AsHHm1n2psTwvkSf94nfJlSXutGSZsl0updn2N/mJBgqUHkbuFoWZtlMifF0SwBj1xQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "js-base64": "^3.7.5"
       }
     },
-    "node_modules/@node-rs/argon2-linux-arm64-musl": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-linux-arm64-musl/-/argon2-linux-arm64-musl-1.7.0.tgz",
-      "integrity": "sha512-BKWS8iVconhE3jrb9mj6t1J9vwUqQPpzCbUKxfTGJfc+kNL58F1SXHBoe2cDYGnHrFEHTY0YochzXoAfm4Dm/A==",
+    "node_modules/@libsql/darwin-arm64": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@libsql/darwin-arm64/-/darwin-arm64-0.3.19.tgz",
+      "integrity": "sha512-rmOqsLcDI65zzxlUOoEiPJLhqmbFsZF6p4UJQ2kMqB+Kc0Rt5/A1OAdOZ/Wo8fQfJWjR1IbkbpEINFioyKf+nQ==",
       "cpu": [
         "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+        "darwin"
+      ]
     },
-    "node_modules/@node-rs/argon2-linux-x64-gnu": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-linux-x64-gnu/-/argon2-linux-x64-gnu-1.7.0.tgz",
-      "integrity": "sha512-EmgqZOlf4Jurk/szW1iTsVISx25bKksVC5uttJDUloTgsAgIGReCpUUO1R24pBhu9ESJa47iv8NSf3yAfGv6jQ==",
+    "node_modules/@libsql/darwin-x64": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@libsql/darwin-x64/-/darwin-x64-0.3.19.tgz",
+      "integrity": "sha512-q9O55B646zU+644SMmOQL3FIfpmEvdWpRpzubwFc2trsa+zoBlSkHuzU9v/C+UNoPHQVRMP7KQctJ455I/h/xw==",
       "cpu": [
         "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+        "darwin"
+      ]
     },
-    "node_modules/@node-rs/argon2-linux-x64-musl": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-linux-x64-musl/-/argon2-linux-x64-musl-1.7.0.tgz",
-      "integrity": "sha512-/o1efYCYIxjfuoRYyBTi2Iy+1iFfhqHCvvVsnjNSgO1xWiWrX0Rrt/xXW5Zsl7vS2Y+yu8PL8KFWRzZhaVxfKA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@libsql/hrana-client": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@libsql/hrana-client/-/hrana-client-0.5.6.tgz",
+      "integrity": "sha512-mjQoAmejZ1atG+M3YR2ZW+rg6ceBByH/S/h17ZoYZkqbWrvohFhXyz2LFxj++ARMoY9m6w3RJJIRdJdmnEUlFg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@libsql/isomorphic-fetch": "^0.1.12",
+        "@libsql/isomorphic-ws": "^0.1.5",
+        "js-base64": "^3.7.5",
+        "node-fetch": "^3.3.2"
       }
     },
-    "node_modules/@node-rs/argon2-wasm32-wasi": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-wasm32-wasi/-/argon2-wasm32-wasi-1.7.0.tgz",
-      "integrity": "sha512-Evmk9VcxqnuwQftfAfYEr6YZYSPLzmKUsbFIMep5nTt9PT4XYRFAERj7wNYp+rOcBenF3X4xoB+LhwcOMTNE5w==",
-      "cpu": [
-        "wasm32"
-      ],
+    "node_modules/@libsql/isomorphic-fetch": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@libsql/isomorphic-fetch/-/isomorphic-fetch-0.1.12.tgz",
+      "integrity": "sha512-MRo4UcmjAGAa3ac56LoD5OE13m2p0lu0VEtZC2NZMcogM/jc5fU9YtMQ3qbPjFJ+u2BBjFZgMPkQaLS1dlMhpg==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "@emnapi/core": "^0.45.0",
-        "@emnapi/runtime": "^0.45.0",
-        "@tybys/wasm-util": "^0.8.1",
-        "memfs-browser": "^3.4.13000"
-      },
-      "engines": {
-        "node": ">=14.0.0"
+        "@types/node-fetch": "^2.6.11",
+        "node-fetch": "^2.7.0"
       }
     },
-    "node_modules/@node-rs/argon2-win32-arm64-msvc": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-win32-arm64-msvc/-/argon2-win32-arm64-msvc-1.7.0.tgz",
-      "integrity": "sha512-qgsU7T004COWWpSA0tppDqDxbPLgg8FaU09krIJ7FBl71Sz8SFO40h7fDIjfbTT5w7u6mcaINMQ5bSHu75PCaA==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@libsql/isomorphic-fetch/node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@node-rs/argon2-win32-ia32-msvc": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-win32-ia32-msvc/-/argon2-win32-ia32-msvc-1.7.0.tgz",
-      "integrity": "sha512-JGafwWYQ/HpZ3XSwP4adQ6W41pRvhcdXvpzIWtKvX+17+xEXAe2nmGWM6s27pVkg1iV2ZtoYLRDkOUoGqZkCcg==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/@libsql/isomorphic-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
+    "node_modules/@libsql/isomorphic-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@libsql/isomorphic-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
       }
     },
-    "node_modules/@node-rs/argon2-win32-x64-msvc": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/argon2-win32-x64-msvc/-/argon2-win32-x64-msvc-1.7.0.tgz",
-      "integrity": "sha512-9oq4ShyFakw8AG3mRls0AoCpxBFcimYx7+jvXeAf2OqKNO+mSA6eZ9z7KQeVCi0+SOEUYxMGf5UiGiDb9R6+9Q==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@libsql/isomorphic-ws": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@libsql/isomorphic-ws/-/isomorphic-ws-0.1.5.tgz",
+      "integrity": "sha512-DtLWIH29onUYR00i0GlQ3UdcTRC6EP4u9w/h9LxpUZJWRMARk6dQwZ6Jkd+QdwVpuAOrdxt18v0K2uIYR3fwFg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@types/ws": "^8.5.4",
+        "ws": "^8.13.0"
       }
     },
-    "node_modules/@node-rs/bcrypt": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt/-/bcrypt-1.9.0.tgz",
-      "integrity": "sha512-u2OlIxW264bFUfvbFqDz9HZKFjwe8FHFtn7T/U8mYjPZ7DWYpbUB+/dkW/QgYfMSfR0ejkyuWaBBe0coW7/7ig==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/Brooooooklyn"
-      },
-      "optionalDependencies": {
-        "@node-rs/bcrypt-android-arm-eabi": "1.9.0",
-        "@node-rs/bcrypt-android-arm64": "1.9.0",
-        "@node-rs/bcrypt-darwin-arm64": "1.9.0",
-        "@node-rs/bcrypt-darwin-x64": "1.9.0",
-        "@node-rs/bcrypt-freebsd-x64": "1.9.0",
-        "@node-rs/bcrypt-linux-arm-gnueabihf": "1.9.0",
-        "@node-rs/bcrypt-linux-arm64-gnu": "1.9.0",
-        "@node-rs/bcrypt-linux-arm64-musl": "1.9.0",
-        "@node-rs/bcrypt-linux-x64-gnu": "1.9.0",
-        "@node-rs/bcrypt-linux-x64-musl": "1.9.0",
-        "@node-rs/bcrypt-wasm32-wasi": "1.9.0",
-        "@node-rs/bcrypt-win32-arm64-msvc": "1.9.0",
-        "@node-rs/bcrypt-win32-ia32-msvc": "1.9.0",
-        "@node-rs/bcrypt-win32-x64-msvc": "1.9.0"
-      }
-    },
-    "node_modules/@node-rs/bcrypt-android-arm-eabi": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-android-arm-eabi/-/bcrypt-android-arm-eabi-1.9.0.tgz",
-      "integrity": "sha512-nOCFISGtnodGHNiLrG0WYLWr81qQzZKYfmwHc7muUeq+KY0sQXyHOwZk9OuNQAWv/lnntmtbwkwT0QNEmOyLvA==",
+    "node_modules/@libsql/linux-arm64-gnu": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@libsql/linux-arm64-gnu/-/linux-arm64-gnu-0.3.19.tgz",
+      "integrity": "sha512-mgeAUU1oqqh57k7I3cQyU6Trpdsdt607eFyEmH5QO7dv303ti+LjUvh1pp21QWV6WX7wZyjeJV1/VzEImB+jRg==",
       "cpu": [
-        "arm"
+        "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+        "linux"
+      ]
     },
-    "node_modules/@node-rs/bcrypt-android-arm64": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-android-arm64/-/bcrypt-android-arm64-1.9.0.tgz",
-      "integrity": "sha512-+ZrIAtigVmjYkqZQTThHVlz0+TG6D+GDHWhVKvR2DifjtqJ0i+mb9gjo++hN+fWEQdWNGxKCiBBjwgT4EcXd6A==",
+    "node_modules/@libsql/linux-arm64-musl": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@libsql/linux-arm64-musl/-/linux-arm64-musl-0.3.19.tgz",
+      "integrity": "sha512-VEZtxghyK6zwGzU9PHohvNxthruSxBEnRrX7BSL5jQ62tN4n2JNepJ6SdzXp70pdzTfwroOj/eMwiPt94gkVRg==",
       "cpu": [
         "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+        "linux"
+      ]
     },
-    "node_modules/@node-rs/bcrypt-darwin-arm64": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-darwin-arm64/-/bcrypt-darwin-arm64-1.9.0.tgz",
-      "integrity": "sha512-CQiS+F9Pa0XozvkXR1g7uXE9QvBOPOplDg0iCCPRYTN9PqA5qYxhwe48G3o+v2UeQceNRrbnEtWuANm7JRqIhw==",
+    "node_modules/@libsql/linux-x64-gnu": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@libsql/linux-x64-gnu/-/linux-x64-gnu-0.3.19.tgz",
+      "integrity": "sha512-2t/J7LD5w2f63wGihEO+0GxfTyYIyLGEvTFEsMO16XI5o7IS9vcSHrxsvAJs4w2Pf907uDjmc7fUfMg6L82BrQ==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+        "linux"
+      ]
     },
-    "node_modules/@node-rs/bcrypt-darwin-x64": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-darwin-x64/-/bcrypt-darwin-x64-1.9.0.tgz",
-      "integrity": "sha512-4pTKGawYd7sNEjdJ7R/R67uwQH1VvwPZ0SSUMmeNHbxD5QlwAPXdDH11q22uzVXsvNFZ6nGQBg8No5OUGpx6Ug==",
+    "node_modules/@libsql/linux-x64-musl": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@libsql/linux-x64-musl/-/linux-x64-musl-0.3.19.tgz",
+      "integrity": "sha512-BLsXyJaL8gZD8+3W2LU08lDEd9MIgGds0yPy5iNPp8tfhXx3pV/Fge2GErN0FC+nzt4DYQtjL+A9GUMglQefXQ==",
       "cpu": [
         "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
+        "linux"
+      ]
     },
-    "node_modules/@node-rs/bcrypt-freebsd-x64": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-freebsd-x64/-/bcrypt-freebsd-x64-1.9.0.tgz",
-      "integrity": "sha512-UmWzySX4BJhT/B8xmTru6iFif3h0Rpx3TqxRLCcbgmH43r7k5/9QuhpiyzpvKGpKHJCFNm4F3rC2wghvw5FCIg==",
+    "node_modules/@libsql/win32-x64-msvc": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@libsql/win32-x64-msvc/-/win32-x64-msvc-0.3.19.tgz",
+      "integrity": "sha512-ay1X9AobE4BpzG0XPw1gplyLZPGHIgJOovvW23gUrukRegiUP62uzhpRbKNogLlUOynyXeq//prHgPXiebUfWg==",
       "cpu": [
         "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
+        "win32"
+      ]
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
+    "node_modules/@mdx-js/loader": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-3.1.0.tgz",
+      "integrity": "sha512-xU/lwKdOyfXtQGqn3VnJjlDrmKXEvMi1mgYxVmukEUtVycIz1nh7oQ40bKTd4cA7rLStqu0740pnhGYxGoqsCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@mdx-js/mdx": "^3.0.0",
+        "source-map": "^0.7.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "webpack": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@node-rs/bcrypt-linux-arm-gnueabihf": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-linux-arm-gnueabihf/-/bcrypt-linux-arm-gnueabihf-1.9.0.tgz",
-      "integrity": "sha512-8qoX4PgBND2cVwsbajoAWo3NwdfJPEXgpCsZQZURz42oMjbGyhhSYbovBCskGU3EBLoC8RA2B1jFWooeYVn5BA==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/@mdx-js/mdx": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.0.tgz",
+      "integrity": "sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdx": "^2.0.0",
+        "collapse-white-space": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "estree-util-scope": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "markdown-extensions": "^2.0.0",
+        "recma-build-jsx": "^1.0.0",
+        "recma-jsx": "^1.0.0",
+        "recma-stringify": "^1.0.0",
+        "rehype-recma": "^1.0.0",
+        "remark-mdx": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "source-map": "^0.7.0",
+        "unified": "^11.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz",
+      "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdx": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16",
+        "react": ">=16"
+      }
+    },
+    "node_modules/@neon-rs/load": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@neon-rs/load/-/load-0.0.4.tgz",
+      "integrity": "sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw==",
+      "license": "MIT"
+    },
+    "node_modules/@next/env": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.4.tgz",
+      "integrity": "sha512-2fZ5YZjedi5AGaeoaC0B20zGntEHRhi2SdWcu61i48BllODcAmmtj8n7YarSPt4DaTsJaBFdxQAVEVzgmx2Zpw==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.0.4.tgz",
+      "integrity": "sha512-U3qMNHmEZoVmHA0j/57nRfi3AscXNvkOnxDmle/69Jz/G0o/gWjXTDdlgILZdrxQ0Lw/jv2mPW8PGy0EGIHXhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob": "7.1.7"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@node-rs/bcrypt-linux-arm64-gnu": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-linux-arm64-gnu/-/bcrypt-linux-arm64-gnu-1.9.0.tgz",
-      "integrity": "sha512-TuAC6kx0SbcIA4mSEWPi+OCcDjTQUMl213v5gMNlttF+D4ieIZx6pPDGTaMO6M2PDHTeCG0CBzZl0Lu+9b0c7Q==",
+    "node_modules/@next/eslint-plugin-next/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@next/mdx": {
+      "version": "14.2.23",
+      "resolved": "https://registry.npmjs.org/@next/mdx/-/mdx-14.2.23.tgz",
+      "integrity": "sha512-4JVc67Gaj4Tr8w0WO+F5TAjS1JszagcqT06NLQ7CE6lNCyxfYRavo4LRYSdc3enp06aPiZLW6kklE3Xqf3p5rg==",
+      "license": "MIT",
+      "dependencies": {
+        "source-map": "^0.7.0"
+      },
+      "peerDependencies": {
+        "@mdx-js/loader": ">=0.15.0",
+        "@mdx-js/react": ">=0.15.0"
+      },
+      "peerDependenciesMeta": {
+        "@mdx-js/loader": {
+          "optional": true
+        },
+        "@mdx-js/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.4.tgz",
+      "integrity": "sha512-wBEMBs+np+R5ozN1F8Y8d/Dycns2COhRnkxRc+rvnbXke5uZBHkUGFgWxfTXn5rx7OLijuUhyfB+gC/ap58dDw==",
       "cpu": [
         "arm64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "darwin"
       ],
       "engines": {
         "node": ">= 10"
       }
     },
-    "node_modules/@node-rs/bcrypt-linux-arm64-musl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-linux-arm64-musl/-/bcrypt-linux-arm64-musl-1.9.0.tgz",
-      "integrity": "sha512-/sIvKDABOI8QOEnLD7hIj02BVaNOuCIWBKvxcJOt8+TuwJ6zmY1UI5kSv9d99WbiHjTp97wtAUbZQwauU4b9ew==",
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.4.tgz",
+      "integrity": "sha512-7sgf5rM7Z81V9w48F02Zz6DgEJulavC0jadab4ZsJ+K2sxMNK0/BtF8J8J3CxnsJN3DGcIdC260wEKssKTukUw==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "darwin"
       ],
       "engines": {
         "node": ">= 10"
       }
     },
-    "node_modules/@node-rs/bcrypt-linux-x64-gnu": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-linux-x64-gnu/-/bcrypt-linux-x64-gnu-1.9.0.tgz",
-      "integrity": "sha512-DyyhDHDsLBsCKz1tZ1hLvUZSc1DK0FU0v52jK6IBQxrj24WscSU9zZe7ie/V9kdmA4Ep57BfpWX8Dsa2JxGdgQ==",
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.4.tgz",
+      "integrity": "sha512-JaZlIMNaJenfd55kjaLWMfok+vWBlcRxqnRoZrhFQrhM1uAehP3R0+Aoe+bZOogqlZvAz53nY/k3ZyuKDtT2zQ==",
       "cpu": [
-        "x64"
+        "arm64"
       ],
       "license": "MIT",
       "optional": true,
@@ -4344,12 +2923,12 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@node-rs/bcrypt-linux-x64-musl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-linux-x64-musl/-/bcrypt-linux-x64-musl-1.9.0.tgz",
-      "integrity": "sha512-duIiuqQ+Lew8ASSAYm6ZRqcmfBGWwsi81XLUwz86a2HR7Qv6V4yc3ZAUQovAikhjCsIqe8C11JlAZSK6+PlXYg==",
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.4.tgz",
+      "integrity": "sha512-7EBBjNoyTO2ipMDgCiORpwwOf5tIueFntKjcN3NK+GAQD7OzFJe84p7a2eQUeWdpzZvhVXuAtIen8QcH71ZCOQ==",
       "cpu": [
-        "x64"
+        "arm64"
       ],
       "license": "MIT",
       "optional": true,
@@ -4360,47 +2939,44 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@node-rs/bcrypt-wasm32-wasi": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-wasm32-wasi/-/bcrypt-wasm32-wasi-1.9.0.tgz",
-      "integrity": "sha512-ylaGmn9Wjwv/D5lxtawttx3H6Uu2WTTR7lWlRHGT6Ga/MB1Vj4OjSGUW8G8zIVnKuXpGbZ92pgHlt4HUpSLctw==",
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.4.tgz",
+      "integrity": "sha512-9TGEgOycqZFuADyFqwmK/9g6S0FYZ3tphR4ebcmCwhL8Y12FW8pIBKJvSwV+UBjMkokstGNH+9F8F031JZKpHw==",
       "cpu": [
-        "wasm32"
+        "x64"
       ],
       "license": "MIT",
       "optional": true,
-      "dependencies": {
-        "@emnapi/core": "^0.45.0",
-        "@emnapi/runtime": "^0.45.0",
-        "@tybys/wasm-util": "^0.8.1",
-        "memfs-browser": "^3.4.13000"
-      },
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">= 10"
       }
     },
-    "node_modules/@node-rs/bcrypt-win32-arm64-msvc": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-win32-arm64-msvc/-/bcrypt-win32-arm64-msvc-1.9.0.tgz",
-      "integrity": "sha512-2h86gF7QFyEzODuDFml/Dp1MSJoZjxJ4yyT2Erf4NkwsiA5MqowUhUsorRwZhX6+2CtlGa7orbwi13AKMsYndw==",
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.4.tgz",
+      "integrity": "sha512-0578bLRVDJOh+LdIoKvgNDz77+Bd85c5JrFgnlbI1SM3WmEQvsjxTA8ATu9Z9FCiIS/AliVAW2DV/BDwpXbtiQ==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
       "license": "MIT",
       "optional": true,
       "os": [
-        "win32"
+        "linux"
       ],
       "engines": {
         "node": ">= 10"
       }
     },
-    "node_modules/@node-rs/bcrypt-win32-ia32-msvc": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-win32-ia32-msvc/-/bcrypt-win32-ia32-msvc-1.9.0.tgz",
-      "integrity": "sha512-kqxalCvhs4FkN0+gWWfa4Bdy2NQAkfiqq/CEf6mNXC13RSV673Ev9V8sRlQyNpCHCNkeXfOT9pgoBdJmMs9muA==",
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.4.tgz",
+      "integrity": "sha512-JgFCiV4libQavwII+kncMCl30st0JVxpPOtzWcAI2jtum4HjYaclobKhj+JsRu5tFqMtA5CJIa0MvYyuu9xjjQ==",
       "cpu": [
-        "ia32"
+        "arm64"
       ],
       "license": "MIT",
       "optional": true,
@@ -4411,10 +2987,10 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@node-rs/bcrypt-win32-x64-msvc": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@node-rs/bcrypt-win32-x64-msvc/-/bcrypt-win32-x64-msvc-1.9.0.tgz",
-      "integrity": "sha512-2y0Tuo6ZAT2Cz8V7DHulSlv1Bip3zbzeXyeur+uR25IRNYXKvI/P99Zl85Fbuu/zzYAZRLLlGTRe6/9IHofe/w==",
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.4.tgz",
+      "integrity": "sha512-xxsJy9wzq7FR5SqPCUqdgSXiNXrMuidgckBa8nH9HtjjxsilgcN6VgXF6tZ3uEWuVEadotQJI8/9EQ6guTC4Yw==",
       "cpu": [
         "x64"
       ],
@@ -4427,6 +3003,25 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@nextjournal/lang-clojure": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@nextjournal/lang-clojure/-/lang-clojure-1.0.0.tgz",
+      "integrity": "sha512-gOCV71XrYD0DhwGoPMWZmZ0r92/lIHsqQu9QWdpZYYBwiChNwMO4sbVMP7eTuAqffFB2BTtCSC+1skSH9d3bNg==",
+      "license": "ISC",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@nextjournal/lezer-clojure": "1.0.0"
+      }
+    },
+    "node_modules/@nextjournal/lezer-clojure": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@nextjournal/lezer-clojure/-/lezer-clojure-1.0.0.tgz",
+      "integrity": "sha512-VZyuGu4zw5mkTOwQBTaGVNWmsOZAPw5ZRxu1/Knk/Xfs7EDBIogwIs5UXTYkuECX5ZQB8eOB+wKA2pc7VyqaZQ==",
+      "license": "ISC",
+      "dependencies": {
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4472,37 +3067,6 @@
         "node": ">=12.4.0"
       }
     },
-    "node_modules/@oslojs/asn1": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@oslojs/asn1/-/asn1-1.0.0.tgz",
-      "integrity": "sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA==",
-      "license": "MIT",
-      "dependencies": {
-        "@oslojs/binary": "1.0.0"
-      }
-    },
-    "node_modules/@oslojs/binary": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@oslojs/binary/-/binary-1.0.0.tgz",
-      "integrity": "sha512-9RCU6OwXU6p67H4NODbuxv2S3eenuQ4/WFLrsq+K/k682xrznH5EVWA7N4VFk9VYVcbFtKqur5YQQZc0ySGhsQ==",
-      "license": "MIT"
-    },
-    "node_modules/@oslojs/crypto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@oslojs/crypto/-/crypto-1.0.1.tgz",
-      "integrity": "sha512-7n08G8nWjAr/Yu3vu9zzrd0L9XnrJfpMioQcvCMxBIiF5orECHe5/3J0jmXRVvgfqMm/+4oxlQ+Sq39COYLcNQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@oslojs/asn1": "1.0.0",
-        "@oslojs/binary": "1.0.0"
-      }
-    },
-    "node_modules/@oslojs/encoding": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@oslojs/encoding/-/encoding-1.1.0.tgz",
-      "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==",
-      "license": "MIT"
-    },
     "node_modules/@outerbase/sdk-transform": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@outerbase/sdk-transform/-/sdk-transform-1.0.5.tgz",
@@ -6245,16 +4809,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@tybys/wasm-util": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.8.3.tgz",
-      "integrity": "sha512-Z96T/L6dUFFxgFJ+pQtkPpne9q7i6kIPYCFnQBHSgSPV9idTsKfIhCss0h5iM9irweZCatkrdeP8yi5uM1eX6Q==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -6386,7 +4940,7 @@
       "version": "1.40.0",
       "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.40.0.tgz",
       "integrity": "sha512-MD2JJ25S4tnjnhjWyalMS6K6p0h+zQV6+Ylm+aGbiS8tSn/aHLSGNzBgduj6FB4zH0ax2GRMGYi/8G1uOxhXWA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/estree": {
@@ -6647,7 +5201,7 @@
       "version": "1.4.9",
       "resolved": "https://registry.npmjs.org/@types/sql.js/-/sql.js-1.4.9.tgz",
       "integrity": "sha512-ep8b36RKHlgWPqjNG9ToUrPiwkhwh0AEzy883mO5Xnd+cL6VBH1EvSjBAAuxLUFF2Vn/moE3Me6v9E1Lo+48GQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/emscripten": "*",
@@ -7251,26 +5805,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/arctic": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/arctic/-/arctic-1.9.2.tgz",
-      "integrity": "sha512-VTnGpYx+ypboJdNrWnK17WeD7zN/xSCHnpecd5QYsBfVZde/5i+7DJ1wrf/ioSDMiEjagXmyNWAE3V2C9f1hNg==",
-      "license": "MIT",
-      "dependencies": {
-        "oslo": "1.2.0"
-      }
-    },
-    "node_modules/arctic/node_modules/oslo": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/oslo/-/oslo-1.2.0.tgz",
-      "integrity": "sha512-OoFX6rDsNcOQVAD2gQD/z03u4vEjWZLzJtwkmgfRF+KpQUXwdgEXErD7zNhyowmHwHefP+PM9Pw13pgpHMRlzw==",
-      "deprecated": "Package is no longer supported. Please see https://oslojs.dev for the successor project.",
-      "license": "MIT",
-      "dependencies": {
-        "@node-rs/argon2": "1.7.0",
-        "@node-rs/bcrypt": "1.9.0"
-      }
-    },
     "node_modules/arg": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@@ -7819,19 +6353,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz",
-      "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001695",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz",
@@ -7982,23 +6503,6 @@
       "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
       "license": "MIT"
     },
-    "node_modules/cli-color": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/cli-color/-/cli-color-2.0.4.tgz",
-      "integrity": "sha512-zlnpg0jNcibNrO7GG9IeHH7maWFeCz+Ja1wx/7tZNU5ASSSSZ+/qZciM0/LHCYxSdqv5h2sdbQ/PXYdOuetXvA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "d": "^1.0.1",
-        "es5-ext": "^0.10.64",
-        "es6-iterator": "^2.0.3",
-        "memoizee": "^0.4.15",
-        "timers-ext": "^0.1.7"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -8196,22 +6700,6 @@
       "devOptional": true,
       "license": "MIT"
     },
-    "node_modules/copy-anything": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
-      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-what": "^4.1.8"
-      },
-      "engines": {
-        "node": ">=12.13"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
     "node_modules/crc-32": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@@ -8313,20 +6801,6 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
-    "node_modules/d": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
-      "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "es5-ext": "^0.10.64",
-        "type": "^2.7.2"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
     "node_modules/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
@@ -8733,18 +7207,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/difflib": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/difflib/-/difflib-0.2.4.tgz",
-      "integrity": "sha512-9YVwmMb0wQHQNr5J9m6BSj6fk4pfGITGQOOs+D9Fl+INODWFOfvhIU1hNv6GgR1RBoC/9NJcwu77zShxV0kT7w==",
-      "dev": true,
-      "dependencies": {
-        "heap": ">= 0.2.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -8777,226 +7239,36 @@
     },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/domexception": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/dotenv": {
-      "version": "16.4.7",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
-      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
-    "node_modules/download-yue": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/download-yue/-/download-yue-2.1.0.tgz",
-      "integrity": "sha512-ECsv6WVYCBCFrCnBcpHTCgFsRM/h7C/AtrzXuTc8+xaW5lXj+Jw6c5S7Eq/ncix41h05JerSxan5p7p80H35qQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "download-yue": "download-yue.js"
-      }
-    },
-    "node_modules/dreamopt": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/dreamopt/-/dreamopt-0.8.0.tgz",
-      "integrity": "sha512-vyJTp8+mC+G+5dfgsY+r3ckxlz+QMX40VjPQsZc5gxVAxLmi64TBoVkP54A/pRAXMXsbu2GMMBrZPxNv23waMg==",
-      "dev": true,
-      "dependencies": {
-        "wordwrap": ">=0.0.2"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/drizzle-kit": {
-      "version": "0.20.18",
-      "resolved": "https://registry.npmjs.org/drizzle-kit/-/drizzle-kit-0.20.18.tgz",
-      "integrity": "sha512-fLTwcnLqtBxGd+51H/dEm9TC0FW6+cIX/RVPyNcitBO77X9+nkogEfMAJebpd/8Yl4KucmePHRYRWWvUlW0rqg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@esbuild-kit/esm-loader": "^2.5.5",
-        "@hono/node-server": "^1.9.0",
-        "@hono/zod-validator": "^0.2.0",
-        "camelcase": "^7.0.1",
-        "chalk": "^5.2.0",
-        "commander": "^9.4.1",
-        "env-paths": "^3.0.0",
-        "esbuild": "^0.19.7",
-        "esbuild-register": "^3.5.0",
-        "glob": "^8.1.0",
-        "hanji": "^0.0.5",
-        "hono": "^4.1.4",
-        "json-diff": "0.9.0",
-        "minimatch": "^7.4.3",
-        "semver": "^7.5.4",
-        "superjson": "^2.2.1",
-        "zod": "^3.20.2"
-      },
-      "bin": {
-        "drizzle-kit": "bin.cjs"
-      }
-    },
-    "node_modules/drizzle-kit/node_modules/chalk": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
-      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/drizzle-kit/node_modules/minimatch": {
-      "version": "7.4.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
-      "integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/drizzle-orm": {
-      "version": "0.30.10",
-      "resolved": "https://registry.npmjs.org/drizzle-orm/-/drizzle-orm-0.30.10.tgz",
-      "integrity": "sha512-IRy/QmMWw9lAQHpwbUh1b8fcn27S/a9zMIzqea1WNOxK9/4EB8gIo+FZWLiPXzl2n9ixGSv8BhsLZiOppWEwBw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "@aws-sdk/client-rds-data": ">=3",
-        "@cloudflare/workers-types": ">=3",
-        "@electric-sql/pglite": ">=0.1.1",
-        "@libsql/client": "*",
-        "@neondatabase/serverless": ">=0.1",
-        "@op-engineering/op-sqlite": ">=2",
-        "@opentelemetry/api": "^1.4.1",
-        "@planetscale/database": ">=1",
-        "@types/better-sqlite3": "*",
-        "@types/pg": "*",
-        "@types/react": ">=18",
-        "@types/sql.js": "*",
-        "@vercel/postgres": ">=0.8.0",
-        "@xata.io/client": "*",
-        "better-sqlite3": ">=7",
-        "bun-types": "*",
-        "expo-sqlite": ">=13.2.0",
-        "knex": "*",
-        "kysely": "*",
-        "mysql2": ">=2",
-        "pg": ">=8",
-        "postgres": ">=3",
-        "react": ">=18",
-        "sql.js": ">=1",
-        "sqlite3": ">=5"
-      },
-      "peerDependenciesMeta": {
-        "@aws-sdk/client-rds-data": {
-          "optional": true
-        },
-        "@cloudflare/workers-types": {
-          "optional": true
-        },
-        "@electric-sql/pglite": {
-          "optional": true
-        },
-        "@libsql/client": {
-          "optional": true
-        },
-        "@neondatabase/serverless": {
-          "optional": true
-        },
-        "@op-engineering/op-sqlite": {
-          "optional": true
-        },
-        "@opentelemetry/api": {
-          "optional": true
-        },
-        "@planetscale/database": {
-          "optional": true
-        },
-        "@types/better-sqlite3": {
-          "optional": true
-        },
-        "@types/pg": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        },
-        "@types/sql.js": {
-          "optional": true
-        },
-        "@vercel/postgres": {
-          "optional": true
-        },
-        "@xata.io/client": {
-          "optional": true
-        },
-        "better-sqlite3": {
-          "optional": true
-        },
-        "bun-types": {
-          "optional": true
-        },
-        "expo-sqlite": {
-          "optional": true
-        },
-        "knex": {
-          "optional": true
-        },
-        "kysely": {
-          "optional": true
-        },
-        "mysql2": {
-          "optional": true
-        },
-        "pg": {
-          "optional": true
-        },
-        "postgres": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "sql.js": {
-          "optional": true
-        },
-        "sqlite3": {
-          "optional": true
-        }
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/domexception": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
       }
     },
     "node_modules/dunder-proto": {
@@ -9088,19 +7360,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/env-paths": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz",
-      "integrity": "sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -9299,62 +7558,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/es5-ext": {
-      "version": "0.10.64",
-      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
-      "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "ISC",
-      "dependencies": {
-        "es6-iterator": "^2.0.3",
-        "es6-symbol": "^3.1.3",
-        "esniff": "^2.0.1",
-        "next-tick": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/es6-iterator": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
-      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "d": "1",
-        "es5-ext": "^0.10.35",
-        "es6-symbol": "^3.1.1"
-      }
-    },
-    "node_modules/es6-symbol": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
-      "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "d": "^1.0.2",
-        "ext": "^1.7.0"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
-    "node_modules/es6-weak-map": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
-      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "d": "1",
-        "es5-ext": "^0.10.46",
-        "es6-iterator": "^2.0.3",
-        "es6-symbol": "^3.1.1"
-      }
-    },
     "node_modules/esast-util-from-estree": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/esast-util-from-estree/-/esast-util-from-estree-2.0.0.tgz",
@@ -9387,58 +7590,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/esbuild": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
-      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.19.12",
-        "@esbuild/android-arm": "0.19.12",
-        "@esbuild/android-arm64": "0.19.12",
-        "@esbuild/android-x64": "0.19.12",
-        "@esbuild/darwin-arm64": "0.19.12",
-        "@esbuild/darwin-x64": "0.19.12",
-        "@esbuild/freebsd-arm64": "0.19.12",
-        "@esbuild/freebsd-x64": "0.19.12",
-        "@esbuild/linux-arm": "0.19.12",
-        "@esbuild/linux-arm64": "0.19.12",
-        "@esbuild/linux-ia32": "0.19.12",
-        "@esbuild/linux-loong64": "0.19.12",
-        "@esbuild/linux-mips64el": "0.19.12",
-        "@esbuild/linux-ppc64": "0.19.12",
-        "@esbuild/linux-riscv64": "0.19.12",
-        "@esbuild/linux-s390x": "0.19.12",
-        "@esbuild/linux-x64": "0.19.12",
-        "@esbuild/netbsd-x64": "0.19.12",
-        "@esbuild/openbsd-x64": "0.19.12",
-        "@esbuild/sunos-x64": "0.19.12",
-        "@esbuild/win32-arm64": "0.19.12",
-        "@esbuild/win32-ia32": "0.19.12",
-        "@esbuild/win32-x64": "0.19.12"
-      }
-    },
-    "node_modules/esbuild-register": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz",
-      "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.3.4"
-      },
-      "peerDependencies": {
-        "esbuild": ">=0.12 <1"
-      }
-    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -10126,22 +8277,6 @@
         "node": "*"
       }
     },
-    "node_modules/esniff": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
-      "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "d": "^1.0.1",
-        "es5-ext": "^0.10.62",
-        "event-emitter": "^0.3.5",
-        "type": "^2.7.2"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/espree": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
@@ -10306,17 +8441,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/event-emitter": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
-      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "d": "1",
-        "es5-ext": "~0.10.14"
-      }
-    },
     "node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -10367,16 +8491,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/ext": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
-      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "type": "^2.7.2"
-      }
-    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -10619,13 +8733,6 @@
         }
       }
     },
-    "node_modules/fs-monkey": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.6.tgz",
-      "integrity": "sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==",
-      "license": "Unlicense",
-      "optional": true
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -10818,27 +8925,6 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
-    "node_modules/glob": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^5.0.1",
-        "once": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -10851,19 +8937,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/globals": {
       "version": "13.24.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
@@ -10941,28 +9014,6 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "license": "MIT"
     },
-    "node_modules/gui": {
-      "version": "0.15.6",
-      "resolved": "https://registry.npmjs.org/gui/-/gui-0.15.6.tgz",
-      "integrity": "sha512-IYKRiCY1ys9cBVxn38yqwlDM6XOehoreTu8R8JcmQ4IDsTrYWlJxHeAa1RGZ75QP9tQG185vMTW1c5ulEBRmkg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "download-yue": "2.1.x"
-      }
-    },
-    "node_modules/hanji": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/hanji/-/hanji-0.0.5.tgz",
-      "integrity": "sha512-Abxw1Lq+TnYiL4BueXqMau222fPSPMFtya8HdpWsz/xVAhifXou71mPh/kY2+08RgFcVccjG3uZHs6K5HAe3zw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "lodash.throttle": "^4.1.1",
-        "sisteransi": "^1.0.5"
-      }
-    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -11143,23 +9194,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/heap": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz",
-      "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/hono": {
-      "version": "4.6.18",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.6.18.tgz",
-      "integrity": "sha512-Fu7hEPvdwtPG8LqSAiPn8p8HjD+PDxrP/HVnwRBnwtVKOn5zDDKsw0ma2Xt58oq97Rlp3t/mRNADEV/Ym6cDng==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=16.9.0"
-      }
-    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -11708,13 +9742,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/is-promise": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -11866,19 +9893,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-what": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
-      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.13"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
     "node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
@@ -13128,24 +11142,6 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "license": "MIT"
     },
-    "node_modules/json-diff": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/json-diff/-/json-diff-0.9.0.tgz",
-      "integrity": "sha512-cVnggDrVkAAA3OvFfHpFEhOnmcsUpleEKq4d4O8sQWWSH40MBrWstKigVB1kGrgLWzuom+7rRdaCsnBD6VyObQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cli-color": "^2.0.0",
-        "difflib": "~0.2.1",
-        "dreamopt": "~0.8.0"
-      },
-      "bin": {
-        "json-diff": "bin/json-diff.js"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -13592,13 +11588,6 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "license": "MIT"
     },
-    "node_modules/lodash.throttle": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -13631,26 +11620,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lru-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
-      "integrity": "sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "es5-ext": "~0.10.2"
-      }
-    },
-    "node_modules/lucia": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/lucia/-/lucia-3.2.2.tgz",
-      "integrity": "sha512-P1FlFBGCMPMXu+EGdVD9W4Mjm0DqsusmKgO7Xc33mI5X1bklmsQb0hfzPhXomQr9waWIBDsiOjvr1e6BTaUqpA==",
-      "license": "MIT",
-      "dependencies": {
-        "@oslojs/crypto": "^1.0.1",
-        "@oslojs/encoding": "^1.1.0"
-      }
-    },
     "node_modules/lucide-react": {
       "version": "0.474.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.474.0.tgz",
@@ -13900,49 +11869,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/memfs": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
-      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
-      "license": "Unlicense",
-      "optional": true,
-      "dependencies": {
-        "fs-monkey": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/memfs-browser": {
-      "version": "3.5.10302",
-      "resolved": "https://registry.npmjs.org/memfs-browser/-/memfs-browser-3.5.10302.tgz",
-      "integrity": "sha512-JJTc/nh3ig05O0gBBGZjTCPOyydaTxNF0uHYBrcc1gHNnO+KIHIvo0Y1FKCJsaei6FCl8C6xfQomXqu+cuzkIw==",
-      "license": "Unlicense",
-      "optional": true,
-      "dependencies": {
-        "memfs": "3.5.3"
-      }
-    },
-    "node_modules/memoizee": {
-      "version": "0.4.17",
-      "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.17.tgz",
-      "integrity": "sha512-DGqD7Hjpi/1or4F/aYAspXKNm5Yili0QDAFAY4QYvpqpgiY6+1jOfqpmByzjxbWd/T9mChbCArXAbDAsTm5oXA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "d": "^1.0.2",
-        "es5-ext": "^0.10.64",
-        "es6-weak-map": "^2.0.3",
-        "event-emitter": "^0.3.5",
-        "is-promise": "^2.2.2",
-        "lru-queue": "^0.1.0",
-        "next-tick": "^1.1.0",
-        "timers-ext": "^0.1.7"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -14806,13 +12732,6 @@
         "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
       }
     },
-    "node_modules/next-tick": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
-      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -15110,17 +13029,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/oslo": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/oslo/-/oslo-1.2.1.tgz",
-      "integrity": "sha512-HfIhB5ruTdQv0XX2XlncWQiJ5SIHZ7NHZhVyHth0CSZ/xzge00etRyYy/3wp/Dsu+PkxMC+6+B2lS/GcKoewkA==",
-      "deprecated": "Package is no longer supported. Please see https://oslojs.dev for the successor project.",
-      "license": "MIT",
-      "dependencies": {
-        "@node-rs/argon2": "1.7.0",
-        "@node-rs/bcrypt": "1.9.0"
-      }
-    },
     "node_modules/own-keys": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
@@ -16666,27 +14574,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/source-map-support/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/space-separated-tokens": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
@@ -17039,19 +14926,6 @@
         }
       }
     },
-    "node_modules/superjson": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
-      "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "copy-anything": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -17199,20 +15073,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "license": "MIT"
     },
-    "node_modules/timers-ext": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.8.tgz",
-      "integrity": "sha512-wFH7+SEAcKfJpfLPkrgMPvvwnEtj8W4IurvEyrKsDleXnKLCDw71w8jltvfLa8Rm4qQxxT4jmDBYbJG/z7qoww==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "es5-ext": "^0.10.64",
-        "next-tick": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
     "node_modules/tinycolor2": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
@@ -17857,13 +15717,6 @@
         "@esbuild/win32-x64": "0.23.1"
       }
     },
-    "node_modules/type": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
-      "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -18499,13 +16352,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wordwrap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
diff --git a/package.json b/package.json
index bbbe7520..77fcc8e8 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
     "@lezer/common": "^1.2.1",
     "@lezer/lr": "^1.4.0",
     "@libsql/client": "^0.5.3",
-    "@lucia-auth/adapter-sqlite": "^3.0.1",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.4",
@@ -70,14 +69,12 @@
     "@uiw/react-codemirror": "^4.21.21",
     "@vercel/analytics": "^1.3.1",
     "@xyflow/react": "^12.3.6",
-    "arctic": "^1.2.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.4",
     "deep-equal": "^2.2.3",
     "dexie": "^4.0.8",
     "dotenv": "^16.4.5",
-    "drizzle-orm": "^0.30.1",
     "echarts": "^5.6.0",
     "eslint-plugin-jest": "^27.6.3",
     "file-saver": "^2.0.5",
@@ -85,12 +82,10 @@
     "immer": "^10.1.1",
     "libsql-stateless-easy": "^1.6.11",
     "lodash": "^4.17.21",
-    "lucia": "^3.2.0",
     "lucide-react": "^0.474.0",
     "motion": "^12.4.3",
     "next": "15.1.4",
     "next-themes": "^0.4.4",
-    "oslo": "^1.1.3",
     "react": "19.0.0",
     "react-color": "^2.19.3",
     "react-dom": "19.0.0",
@@ -122,10 +117,8 @@
     "@types/wicg-file-system-access": "^2023.10.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "drizzle-kit": "^0.20.14",
     "eslint": "^8",
     "eslint-config-next": "14.0.4",
-    "gui": "^0.15.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.38",
diff --git a/src/app/(public)/learn/sqlite/indexing/page.mdx b/src/app/(public)/learn/sqlite/indexing/page.mdx
deleted file mode 100644
index ce7ce9bf..00000000
--- a/src/app/(public)/learn/sqlite/indexing/page.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { DocContent } from "@/components/mdx/docs";
-
-<DocContent title="Indexing">
-Blank Content
-</DocContent>
diff --git a/src/app/(public)/learn/sqlite/introduction/page.mdx b/src/app/(public)/learn/sqlite/introduction/page.mdx
deleted file mode 100644
index 70685157..00000000
--- a/src/app/(public)/learn/sqlite/introduction/page.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { DocContent } from "@/components/mdx/docs";
-
-<DocContent title="Introduction">
-Blank Content
-</DocContent>
diff --git a/src/app/(public)/learn/sqlite/layout.tsx b/src/app/(public)/learn/sqlite/layout.tsx
deleted file mode 100644
index 2bf507af..00000000
--- a/src/app/(public)/learn/sqlite/layout.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DocLayout } from "@/components/mdx/docs";
-
-const TableContent = [
-  {
-    title: "Introduction",
-    sub: [
-      {
-        title: "Introduction to this course",
-        href: "/learn/sqlite/introduction",
-      },
-    ],
-  },
-  {
-    title: "Indexing",
-    sub: [
-      {
-        title: "Indexing",
-        href: "/learn/sqlite/indexing",
-      },
-      {
-        title: "Index Hinting",
-        href: "/learn/sqlite/indexing",
-      },
-      {
-        title: "Composite Index",
-        href: "/learn/sqlite/indexing",
-      },
-    ],
-  },
-];
-
-export default function MdxLayout({ children }: { children: React.ReactNode }) {
-  return <DocLayout content={TableContent}>{children}</DocLayout>;
-}
diff --git a/src/app/(public)/login/github/callback/route.ts b/src/app/(public)/login/github/callback/route.ts
deleted file mode 100644
index a27e4210..00000000
--- a/src/app/(public)/login/github/callback/route.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { PROVIDER, github } from "@/lib/auth";
-import { cookies } from "next/headers";
-import { OAuth2RequestError } from "arctic";
-import * as AuthController from "@/controllers/auth";
-import { NextRequest } from "next/server";
-
-export const GET = async (request: NextRequest) => {
-  const url = new URL(request.url!);
-  const code = url.searchParams.get("code");
-  const state = url.searchParams.get("state");
-  const GITHUB_API_URL = "https://api.github.com";
-
-  const storedState =
-    (await cookies()).get("github_oauth_state")?.value ?? null;
-  if (!code || !state || !storedState || state !== storedState) {
-    return new Response(null, {
-      status: 400,
-    });
-  }
-
-  try {
-    const token = await github(request).validateAuthorizationCode(code);
-    const githubUserResponse = await fetch(`${GITHUB_API_URL}/user`, {
-      headers: {
-        Authorization: `Bearer ${token.accessToken}`,
-      },
-    });
-    const githubUser: GitHubUser = await githubUserResponse.json();
-
-    if (githubUser.email === null) {
-      const resp = await fetch(`${GITHUB_API_URL}/user/emails`, {
-        headers: {
-          Authorization: `Bearer ${token.accessToken}`,
-        },
-      });
-      const githubEmails: GitHubEmail[] = await resp.json();
-      githubUser.email =
-        githubEmails.find((email) => email.primary)?.email || null;
-    }
-
-    await AuthController.save(
-      {
-        id: githubUser.id,
-        name: githubUser.login,
-        email: githubUser.email || "",
-      },
-      PROVIDER.GITHUB
-    );
-
-    return new Response(null, {
-      status: 302,
-      headers: {
-        Location: "/",
-      },
-    });
-  } catch (e) {
-    // the specific error message depends on the provider
-    if (e instanceof OAuth2RequestError) {
-      // invalid code
-      return new Response(null, {
-        status: 400,
-      });
-    }
-    return new Response(null, {
-      status: 500,
-    });
-  }
-};
-
-interface GitHubUser {
-  id: string;
-  login: string;
-  email: string | null;
-}
-
-interface GitHubEmail {
-  email: string;
-  primary: boolean;
-  verified: boolean;
-  visibility: "public" | "private";
-}
diff --git a/src/app/(public)/login/github/route.ts b/src/app/(public)/login/github/route.ts
deleted file mode 100644
index 302a3f35..00000000
--- a/src/app/(public)/login/github/route.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { github } from "@/lib/auth";
-import { generateState } from "arctic";
-import { cookies } from "next/headers";
-import { NextRequest } from "next/server";
-
-export const GET = async (req: NextRequest) => {
-  const state = generateState();
-  const url = await github(req).createAuthorizationURL(state, {
-    scopes: ["user:email"],
-  });
-
-  (await cookies()).set("github_oauth_state", state, {
-    path: "/",
-    secure: process.env.NODE_ENV === "production",
-    httpOnly: true,
-    maxAge: 60 * 10,
-    sameSite: "lax",
-  });
-
-  return Response.redirect(url);
-};
diff --git a/src/app/(public)/login/google/callback/route.ts b/src/app/(public)/login/google/callback/route.ts
deleted file mode 100644
index a4b5ada9..00000000
--- a/src/app/(public)/login/google/callback/route.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { PROVIDER, google } from "@/lib/auth";
-import { cookies } from "next/headers";
-import { OAuth2RequestError } from "arctic";
-import * as AuthController from "@/controllers/auth";
-import { NextRequest } from "next/server";
-
-export const GET = async (request: NextRequest) => {
-  const url = new URL(request.url!);
-  const code = url.searchParams.get("code");
-  const state = url.searchParams.get("state");
-
-  const cookieStore = await cookies();
-
-  const storedState = cookieStore.get("google_oauth_state")?.value ?? null;
-  const storedCodeVerifier =
-    cookieStore.get("google_oauth_code_verifier")?.value ?? null;
-  if (
-    !code ||
-    !state ||
-    !storedState ||
-    !storedCodeVerifier ||
-    state !== storedState
-  ) {
-    return new Response(null, {
-      status: 400,
-    });
-  }
-
-  try {
-    const token = await google(request).validateAuthorizationCode(
-      code,
-      storedCodeVerifier
-    );
-
-    const resp = await fetch(
-      "https://openidconnect.googleapis.com/v1/userinfo",
-      {
-        headers: {
-          Authorization: `Bearer ${token.accessToken}`,
-        },
-      }
-    );
-    const googleUser: GoogleUser = await resp.json();
-
-    await AuthController.save(
-      {
-        id: googleUser.sub,
-        name: googleUser.name,
-        email: googleUser.email,
-      },
-      PROVIDER.GOOGLE
-    );
-
-    return new Response(null, {
-      status: 302,
-      headers: {
-        Location: "/",
-      },
-    });
-  } catch (e) {
-    console.error(e);
-    // the specific error message depends on the provider
-    if (e instanceof OAuth2RequestError) {
-      // invalid code
-      return new Response(null, {
-        status: 400,
-      });
-    }
-    return new Response(null, {
-      status: 500,
-    });
-  }
-};
-
-interface GoogleUser {
-  sub: string;
-  name: string;
-  given_name: string;
-  picture: string;
-  email: string;
-  email_verified: boolean;
-  locale: string;
-}
diff --git a/src/app/(public)/login/google/route.ts b/src/app/(public)/login/google/route.ts
deleted file mode 100644
index dc4465a7..00000000
--- a/src/app/(public)/login/google/route.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { google } from "@/lib/auth";
-import { generateCodeVerifier, generateState } from "arctic";
-import { cookies } from "next/headers";
-import { NextRequest } from "next/server";
-
-export const GET = async (req: NextRequest) => {
-  const state = generateState();
-  const codeVerifier = generateCodeVerifier();
-  const url = await google(req).createAuthorizationURL(state, codeVerifier, {
-    scopes: ["profile", "email"],
-  });
-
-  const cookieStore = await cookies();
-
-  cookieStore.set("google_oauth_state", state, {
-    path: "/",
-    secure: process.env.NODE_ENV === "production",
-    httpOnly: true,
-    maxAge: 60 * 10,
-    sameSite: "lax",
-  });
-
-  cookieStore.set("google_oauth_code_verifier", codeVerifier, {
-    path: "/",
-    secure: process.env.NODE_ENV === "production",
-    httpOnly: true,
-    maxAge: 60 * 10,
-    sameSite: "lax",
-  });
-
-  return Response.redirect(url);
-};
diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx
deleted file mode 100644
index e2bd2da2..00000000
--- a/src/app/(public)/login/page.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use server";
-import LogoLoading from "@/components/gui/logo-loading";
-import { WEBSITE_NAME } from "@/const";
-import { env } from "@/env";
-import Link from "next/link";
-
-export default async function LoginPage() {
-  const GOOGLE_LOGIN_SUPPORT = env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET;
-  const GITHUB_LOGIN_SUPPORT = env.GITHUB_CLIENT_ID && env.GITHUB_CLIENT_SECRET;
-
-  return (
-    <div className="flex h-screen w-screen dark flex-col lg:flex-row">
-      <div className="lg:w-1/2 h-full flex justify-center items-center order-2">
-        <div className="text-white max-w-[500px] flex flex-col gap-4 text-lg">
-          <LogoLoading />
-
-          <p className="text-xl italic text-yellow-500 font-semibold">
-            Unlock the full potential
-          </p>
-
-          <p>
-            {WEBSITE_NAME} is free and doesn&apos;t require login. However,
-            logged-in users get extra features:
-          </p>
-
-          <ul className="list-disc ml-8 leading-8">
-            <li>
-              Remote storage and{" "}
-              <span className="border-b-2 border-yellow-500">
-                syncing of connections
-              </span>{" "}
-              and saved queries across devices
-            </li>
-            <li>
-              Database connection{" "}
-              <span className="border-b-2 border-yellow-500">
-                sharing and collaboration
-              </span>
-            </li>
-            <li>Attachment uploads</li>
-            <li>More features coming soon</li>
-          </ul>
-        </div>
-      </div>
-      <div className="lg:w-1/2 h-full flex justify-center items-center order-1 bg-zinc-900">
-        <div className="w-[300px] flex flex-col gap-4 text-lg">
-          <p className="font-mono">Login to your account</p>
-
-          {GITHUB_LOGIN_SUPPORT && (
-            <Link
-              prefetch={false}
-              href="/login/github"
-              className="border-2 border-white rounded-lg p-4 flex gap-4 items-center font-bold hover:bg-gray-800 text-white"
-            >
-              <svg
-                width="98"
-                height="96"
-                viewBox="0 0 98 96"
-                xmlns="http://www.w3.org/2000/svg"
-                className="w-6 h-6"
-              >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                  fill="currentColor"
-                />
-              </svg>
-              Continue with Github
-            </Link>
-          )}
-
-          {GOOGLE_LOGIN_SUPPORT && (
-            <Link
-              prefetch={false}
-              href="/login/google"
-              className="border-2 border-white rounded-lg p-4 flex gap-4 items-center font-bold hover:bg-gray-800 text-white"
-            >
-              <img src="/google.png" className="w-6 h-6" alt="Google" />
-              Continue with Google
-            </Link>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/(public)/logout/route.tsx b/src/app/(public)/logout/route.tsx
deleted file mode 100644
index 4a36350e..00000000
--- a/src/app/(public)/logout/route.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { cookies } from "next/headers";
-import { getSessionFromCookie, LuciaAuth } from "@/lib/auth";
-
-export async function GET() {
-  const { session } = await getSessionFromCookie();
-
-  if (!session) {
-    return Response.json({});
-  }
-
-  const lucia = LuciaAuth.get();
-  if (!lucia) {
-    return Response.json({});
-  }
-
-  await lucia.invalidateSession(session.id);
-
-  const sessionCookie = lucia.createBlankSessionCookie();
-  (await cookies()).set(
-    sessionCookie.name,
-    sessionCookie.value,
-    sessionCookie.attributes
-  );
-
-  return new Response(null, {
-    status: 302,
-    headers: {
-      Location: "/login",
-    },
-  });
-}
diff --git a/src/app/(theme)/playground/client/page.tsx b/src/app/(theme)/playground/client/page.tsx
index 0d2deac7..987ddf5a 100644
--- a/src/app/(theme)/playground/client/page.tsx
+++ b/src/app/(theme)/playground/client/page.tsx
@@ -1,10 +1,7 @@
-import { get_database } from "@/db";
-import PlaygroundEditorBody from "./page-client";
-import { eq, sql } from "drizzle-orm";
-import { dbDataset } from "@/db/schema-dataset";
+import ClientOnly from "@/components/client-only";
 import { Metadata } from "next";
 import ThemeLayout from "../../theme_layout";
-import ClientOnly from "@/components/client-only";
+import PlaygroundEditorBody from "./page-client";
 
 export const metadata: Metadata = {
   title:
@@ -37,22 +34,14 @@ export default async function PlaygroundEditor(props: PlaygroundEditorProps) {
   const templateName = searchParams.template;
   let templateFile: string | null = null;
 
-  if (templateName) {
-    const db = get_database();
-    const templateInfo = await db.query.dbDataset.findFirst({
-      where: eq(dbDataset.id, templateName),
-    });
-
-    if (templateInfo) {
-      templateFile = templateInfo.source;
+  // We will hardcode the template given that we already removed the database
+  // but we want to keep the template working.
 
-      // Update the template used
-      await db
-        .update(dbDataset)
-        .set({
-          used: sql`${dbDataset.used} + 1`,
-        })
-        .where(eq(dbDataset.id, templateName));
+  if (templateName) {
+    if (templateName === "chinook") {
+      templateFile = "https://r2.invisal.com/sample/chinook.db";
+    } else if (templateName === "northwind") {
+      templateFile = "https://r2.invisal.com/sample/northwind.db";
     }
   } else if (searchParams.url) {
     templateFile = searchParams.url;
diff --git a/src/components/logout.tsx b/src/components/logout.tsx
deleted file mode 100644
index 43e7c13a..00000000
--- a/src/components/logout.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use server";
-import { cookies } from "next/headers";
-import { redirect } from "next/navigation";
-import { getSessionFromCookie, LuciaAuth } from "@/lib/auth";
-
-export default async function logout() {
-  const { session } = await getSessionFromCookie();
-
-  if (!session) {
-    return {};
-  }
-
-  const lucia = LuciaAuth.get();
-
-  if (!lucia) {
-    return {};
-  }
-
-  await lucia.invalidateSession(session.id);
-
-  const sessionCookie = lucia.createBlankSessionCookie();
-  (await cookies()).set(
-    sessionCookie.name,
-    sessionCookie.value,
-    sessionCookie.attributes
-  );
-
-  return redirect("/");
-}
diff --git a/src/db/index.ts b/src/db/index.ts
deleted file mode 100644
index 08df4f72..00000000
--- a/src/db/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { drizzle } from "drizzle-orm/libsql";
-import * as schema from "./schema";
-import { createClient } from "@libsql/client/web";
-import { env } from "@/env";
-
-export function get_connection() {
-  if (env.DATABASE_URL) {
-    return createClient({
-      url: env.DATABASE_URL,
-      authToken: env.DATABASE_AUTH_TOKEN,
-    });
-  }
-
-  throw new Error("Database is not setup");
-}
-
-export function get_database() {
-  return drizzle(get_connection(), { schema });
-}
diff --git a/src/db/migrate.ts b/src/db/migrate.ts
deleted file mode 100644
index bba829d8..00000000
--- a/src/db/migrate.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import "dotenv/config";
-
-import { migrate } from "drizzle-orm/libsql/migrator";
-import { get_database } from ".";
-
-(async function () {
-  const db = get_database();
-
-  // This will run migrations on the database, skipping the ones already applied
-  await migrate(db, { migrationsFolder: "./drizzle" });
-})()
-  .catch(console.error)
-  .finally(() => {
-    process.exit();
-  });
diff --git a/src/db/schema-database.ts b/src/db/schema-database.ts
deleted file mode 100644
index ddfff519..00000000
--- a/src/db/schema-database.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-  index,
-  int,
-  primaryKey,
-  sqliteTable,
-  text,
-} from "drizzle-orm/sqlite-core";
-import { user } from "./schema-user";
-
-export type DatabaseRoleType = "table";
-export type DatabaseRoleAccess =
-  | "write"
-  | "read"
-  | "delete"
-  | "write-delete"
-  | "column-read"
-  | "column-denied";
-
-export const database = sqliteTable(
-  "database",
-  {
-    id: text("id").primaryKey(),
-    userId: text("user_id")
-      .notNull()
-      .references(() => user.id),
-    name: text("name"),
-    description: text("description"),
-    color: text("color").default("gray"),
-    driver: text("driver").default("turso"),
-    host: text("host"),
-    token: text("token"),
-    username: text("username"),
-    password: text("password"),
-    databaseName: text("database_name"),
-    createdAt: int("created_at"),
-    deletedAt: int("deleted_at"),
-  },
-  (table) => {
-    return { databaseUserIdx: index("database_user_idx").on(table.userId) };
-  }
-);
-
-export const database_role = sqliteTable(
-  "database_role",
-  {
-    id: text("id").primaryKey(),
-    databaseId: text("database_id")
-      .notNull()
-      .references(() => database.id),
-    name: text("name"),
-    canExecuteQuery: int("can_execute_query").default(0),
-    isOwner: int("is_owner").default(0),
-    createdBy: text("created_by").references(() => user.id),
-    createdAt: int("created_at"),
-    updatedBy: text("updated_by").references(() => user.id),
-    updatedAt: int("updated_at"),
-  },
-  (table) => {
-    return {
-      databaseRoleIdx: index("database_role_idx").on(table.databaseId),
-    };
-  }
-);
-
-export const database_user_role = sqliteTable(
-  "database_user_role",
-  {
-    userId: text("user_id").references(() => user.id),
-    databaseId: text("database_id").references(() => database.id),
-    roleId: text("role_id").references(() => database_role.id),
-    createdAt: int("created_at"),
-    createdBy: text("created_by").references(() => user.id),
-  },
-  (table) => {
-    return { pk: primaryKey({ columns: [table.databaseId, table.userId] }) };
-  }
-);
diff --git a/src/db/schema-dataset.ts b/src/db/schema-dataset.ts
deleted file mode 100644
index ae922821..00000000
--- a/src/db/schema-dataset.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";
-import { user } from "./schema-user";
-
-export const dbDataset = sqliteTable("dataset", {
-  id: text("id").primaryKey(),
-  userId: text("user_id").references(() => user.id),
-  name: text("name"),
-  source: text("source"),
-  summary: text("summary"),
-  description: text("description"),
-  used: int("used").default(0),
-  createdAt: int("created_at"),
-});
diff --git a/src/db/schema-doc.ts b/src/db/schema-doc.ts
deleted file mode 100644
index b277bbe0..00000000
--- a/src/db/schema-doc.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { index, int, sqliteTable, text } from "drizzle-orm/sqlite-core";
-import { database } from "./schema-database";
-import { user } from "./schema-user";
-
-export const dbDocNamespace = sqliteTable(
-  "doc_namespace",
-  {
-    id: text("id").primaryKey(),
-    databaseId: text("database_id").references(() => database.id),
-    userId: text("user_id").references(() => user.id),
-    name: text("name"),
-    updatedAt: int("updated_at"),
-    createdAt: int("created_at"),
-  },
-  (table) => {
-    return {
-      docNamespaceDatabaseIndex: index("doc_namespace_database_idx").on(
-        table.databaseId
-      ),
-    };
-  }
-);
-
-export const dbDoc = sqliteTable(
-  "doc",
-  {
-    id: text("id").primaryKey(),
-    namespaceId: text("namespace_id").references(() => dbDocNamespace.id),
-    userId: text("user_id").references(() => user.id),
-    name: text("name"),
-    type: text("type"),
-    content: text("content"),
-    lastUsedAt: int("last_used_at"),
-    updatedAt: int("updated_at"),
-    createdAt: int("created_at"),
-  },
-  (table) => {
-    return {
-      docNamespaceIndex: index("doc_namespace_idx").on(table.namespaceId),
-    };
-  }
-);
diff --git a/src/db/schema-temp-session.ts b/src/db/schema-temp-session.ts
deleted file mode 100644
index f3dc3b66..00000000
--- a/src/db/schema-temp-session.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";
-
-export const dbTempSession = sqliteTable("temp_session", {
-  id: text("id").primaryKey(),
-  driver: text("driver"),
-  name: text("name"),
-  credential: text("credential"),
-  expiredAt: int("exired_at"),
-  createdAt: int("created_at"),
-});
diff --git a/src/db/schema-user.ts b/src/db/schema-user.ts
deleted file mode 100644
index b4d96308..00000000
--- a/src/db/schema-user.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { sql } from "drizzle-orm";
-import {
-  blob,
-  index,
-  int,
-  sqliteTable,
-  text,
-  unique,
-} from "drizzle-orm/sqlite-core";
-
-export const user = sqliteTable("user", {
-  id: text("id").primaryKey(),
-  name: text("name"),
-  picture: text("picture"),
-  createdAt: text("created_at")
-    .notNull()
-    .default(sql`CURRENT_TIMESTAMP`),
-  email: text("email"),
-  storageUsage: int("storage_usage").default(0),
-});
-
-export const user_session = sqliteTable(
-  "user_session",
-  {
-    id: text("id").primaryKey(),
-    userId: text("user_id")
-      .notNull()
-      .references(() => user.id),
-    authId: text("auth_id"),
-    userAgent: text("user_agent"),
-    expiresAt: blob("expires_at", { mode: "bigint" }).notNull(),
-  },
-  (table) => ({
-    expireIdx: index("user_session_expire_idx").on(table.expiresAt),
-    authIdx: index("user_session_auth_id_idx").on(table.authId),
-  })
-);
-
-export const user_oauth = sqliteTable(
-  "user_auth",
-  {
-    id: text("id").primaryKey(),
-    userId: text("user_id"),
-    provider: text("provider"),
-    providerId: text("provider_id"),
-    createdAt: text("created_at")
-      .notNull()
-      .default(sql`CURRENT_TIMESTAMP`),
-  },
-  (table) => ({
-    providerUniqueId: unique().on(table.provider, table.providerId),
-  })
-);
-
-export const user_file = sqliteTable(
-  "user_file",
-  {
-    id: text("id").primaryKey(),
-    user_id: text("user_id"),
-    hashed: text("hashed"),
-    path: text("path"),
-    filename: text("filename"),
-    size_in_byte: int("size_in_byte"),
-    created_at: int("created_at"),
-  },
-  (table) => {
-    return {
-      userFileIdx: index("user_file_index").on(table.user_id, table.created_at),
-    };
-  }
-);
diff --git a/src/db/schema.ts b/src/db/schema.ts
deleted file mode 100644
index 2e0a8c45..00000000
--- a/src/db/schema.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from "./schema-user";
-export * from "./schema-database";
-export * from "./schema-dataset";
-export * from "./schema-temp-session";
-export * from "./schema-doc";
diff --git a/src/drivers/saved-doc/remote-saved-doc.ts b/src/drivers/saved-doc/remote-saved-doc.ts
deleted file mode 100644
index ec61e9c9..00000000
--- a/src/drivers/saved-doc/remote-saved-doc.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import {
-  createDocNamespace,
-  getDocNamespaceList,
-  removeDocNamespace,
-  updateDocNamespace,
-  getSavedDocList,
-  createSavedDoc,
-  removeSavedDoc,
-  updateSavedDoc,
-} from "./saved-doc-actions";
-import {
-  SavedDocData,
-  SavedDocDriver,
-  SavedDocGroupByNamespace,
-  SavedDocInput,
-  SavedDocNamespace,
-  SavedDocType,
-} from "./saved-doc-driver";
-
-export default class RemoteSavedDocDriver implements SavedDocDriver {
-  protected databaseId: string;
-  protected cb: (() => void)[] = [];
-  protected cacheNamespaceList: SavedDocNamespace[] | null = null;
-  protected cacheDocs: Record<string, SavedDocData[]> = {};
-
-  constructor(databaseId: string) {
-    this.databaseId = databaseId;
-  }
-
-  async getNamespaces(): Promise<SavedDocNamespace[]> {
-    if (this.cacheNamespaceList) {
-      return this.cacheNamespaceList;
-    }
-
-    const t = await getDocNamespaceList(this.databaseId);
-    const d = await getSavedDocList(this.databaseId);
-
-    this.cacheDocs = d.reduce(
-      (a, b) => {
-        if (!a[b.namespace.id]) a[b.namespace.id] = [b];
-        else a[b.namespace.id].push(b);
-        return a;
-      },
-      t.reduce(
-        (a, b) => {
-          a[b.id] = [];
-          return a;
-        },
-        {} as Record<string, SavedDocData[]>
-      )
-    );
-
-    this.cacheNamespaceList = t;
-    return t;
-  }
-
-  async createNamespace(name: string): Promise<SavedDocNamespace> {
-    await this.getNamespaces();
-    const t = await createDocNamespace(this.databaseId, name);
-
-    if (this.cacheNamespaceList) {
-      this.cacheNamespaceList.push(t);
-    }
-
-    return t;
-  }
-
-  async updateNamespace(id: string, name: string): Promise<SavedDocNamespace> {
-    await this.getNamespaces();
-    const t = await updateDocNamespace(this.databaseId, id, name);
-
-    if (this.cacheNamespaceList) {
-      this.cacheNamespaceList = this.cacheNamespaceList.map((n) => {
-        if (n.id === t.id) {
-          return t;
-        }
-        return n;
-      });
-    }
-
-    return t;
-  }
-
-  async removeNamespace(id: string): Promise<void> {
-    await this.getNamespaces();
-    await removeDocNamespace(this.databaseId, id);
-
-    if (this.cacheNamespaceList) {
-      this.cacheNamespaceList = this.cacheNamespaceList.filter(
-        (n) => n.id !== id
-      );
-
-      if (this.cacheNamespaceList.length === 0) {
-        this.cacheNamespaceList = null;
-      }
-    }
-  }
-
-  async createDoc(
-    type: SavedDocType,
-    namespace: string,
-    data: SavedDocInput
-  ): Promise<SavedDocData> {
-    await this.getNamespaces();
-    const r = await createSavedDoc(this.databaseId, namespace, type, data);
-
-    if (this.cacheDocs[r.namespace.id]) {
-      this.cacheDocs[r.namespace.id].unshift(r);
-    }
-
-    this.triggerChange();
-    return r;
-  }
-
-  async getDocs(): Promise<SavedDocGroupByNamespace[]> {
-    const ns = await this.getNamespaces();
-
-    return ns.map((n) => {
-      return {
-        namespace: n,
-        docs: this.cacheDocs[n.id] ?? [],
-      };
-    });
-  }
-
-  async updateDoc(id: string, data: SavedDocInput): Promise<SavedDocData> {
-    await this.getNamespaces();
-    const r = await updateSavedDoc(this.databaseId, id, data);
-
-    if (this.cacheDocs[r.namespace.id]) {
-      this.cacheDocs[r.namespace.id] = this.cacheDocs[r.namespace.id].map(
-        (d) => {
-          if (d.id === r.id) return r;
-          return d;
-        }
-      );
-    }
-
-    this.triggerChange();
-    return r;
-  }
-
-  async removeDoc(id: string): Promise<void> {
-    await this.getNamespaces();
-    const r = await removeSavedDoc(this.databaseId, id);
-
-    for (const namespaceId of Object.keys(this.cacheDocs)) {
-      this.cacheDocs[namespaceId] = this.cacheDocs[namespaceId].filter(
-        (d) => d.id !== id
-      );
-    }
-
-    this.triggerChange();
-    return r;
-  }
-
-  addChangeListener(cb: () => void): void {
-    this.cb.push(cb);
-  }
-
-  removeChangeListener(cb: () => void): void {
-    this.cb = this.cb.filter((c) => c !== cb);
-  }
-
-  protected triggerChange() {
-    this.cb.forEach((c) => c());
-  }
-}
diff --git a/src/drivers/saved-doc/saved-doc-actions.ts b/src/drivers/saved-doc/saved-doc-actions.ts
deleted file mode 100644
index dbcca555..00000000
--- a/src/drivers/saved-doc/saved-doc-actions.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-"use server";
-import { get_database } from "@/db";
-import {
-  SavedDocData,
-  SavedDocInput,
-  SavedDocNamespace,
-  SavedDocType,
-} from "./saved-doc-driver";
-import { getDatabaseWithAuth } from "@/lib/with-database-ops";
-import { desc, eq, inArray } from "drizzle-orm";
-import { dbDoc, dbDocNamespace } from "@/db/schema-doc";
-import { generateId } from "lucia";
-import { ApiError } from "@/lib/api-error";
-
-async function getNamespaceWithAuth(databaseId: string, namespaceId: string) {
-  const props = await getDatabaseWithAuth(databaseId);
-  const { db } = props;
-
-  const namespaceData = await db.query.dbDocNamespace.findFirst({
-    where: eq(dbDocNamespace.id, namespaceId),
-  });
-
-  if (!namespaceData) {
-    throw new ApiError({ message: "Namespace does not exist", status: 500 });
-  }
-
-  if (namespaceData.databaseId !== databaseId) {
-    throw new ApiError({
-      message: "You do not have permission to this namespace",
-      status: 500,
-    });
-  }
-
-  return { ...props, namespaceData };
-}
-
-async function getDocWithAuth(databaseId: string, docId: string) {
-  const props = await getDatabaseWithAuth(databaseId);
-  const { db } = props;
-
-  const docData = await db.query.dbDoc.findFirst({
-    where: eq(dbDoc.id, docId),
-  });
-
-  const namespaceId = docData?.namespaceId;
-  if (!docData || !namespaceId) {
-    throw new ApiError({ message: "Document does not exist", status: 500 });
-  }
-
-  const namespaceData = await db.query.dbDocNamespace.findFirst({
-    where: eq(dbDocNamespace.id, namespaceId),
-  });
-
-  if (namespaceData?.databaseId !== databaseId) {
-    throw new ApiError({
-      message: "You do not have permission to this namespace",
-      status: 500,
-    });
-  }
-
-  return { ...props, namespaceData, docData };
-}
-
-export async function getDocNamespaceList(
-  databaseId: string
-): Promise<SavedDocNamespace[]> {
-  const { info } = await getDatabaseWithAuth(databaseId);
-
-  const db = get_database();
-  const ns = await db.query.dbDocNamespace.findMany({
-    where: eq(dbDocNamespace.databaseId, info.id),
-  });
-
-  if (ns.length === 0) {
-    // Create one default namespace if it does not exist
-    return [await createDocNamespace(databaseId, "Workplace")];
-  }
-
-  return ns.map((n) => {
-    return {
-      createdAt: n.createdAt ?? 0,
-      updatedAt: n.updatedAt ?? 0,
-      id: n.id,
-      name: n.name ?? "Unnamed",
-      databaseId: n.databaseId,
-      userId: n.userId,
-    };
-  });
-}
-
-export async function createDocNamespace(
-  databaseId: string,
-  name: string
-): Promise<SavedDocNamespace> {
-  const { user } = await getDatabaseWithAuth(databaseId);
-
-  const db = get_database();
-  const id = generateId(15);
-  const now = Math.floor(Date.now() / 1000);
-  const data = {
-    id,
-    databaseId,
-    name,
-    userId: user.id,
-    createdAt: now,
-    updatedAt: now,
-  };
-
-  await db.insert(dbDocNamespace).values(data);
-  return data;
-}
-
-export async function removeDocNamespace(
-  databaseId: string,
-  namespaceId: string
-): Promise<void> {
-  await getDatabaseWithAuth(databaseId);
-  const db = get_database();
-
-  const namespace = await db.query.dbDocNamespace.findFirst({
-    where: eq(dbDocNamespace.id, namespaceId),
-  });
-
-  if (namespace?.databaseId !== databaseId) {
-    throw new ApiError({
-      message: "You do not have permission to remove this namespace",
-      status: 500,
-    });
-  }
-
-  await db.batch([
-    db.delete(dbDoc).where(eq(dbDoc.namespaceId, namespaceId)),
-    db.delete(dbDocNamespace).where(eq(dbDocNamespace.id, namespaceId)),
-  ]);
-}
-
-export async function updateDocNamespace(
-  databaseId: string,
-  namespaceId: string,
-  name: string
-): Promise<SavedDocNamespace> {
-  await getDatabaseWithAuth(databaseId);
-  const { db, namespaceData } = await getNamespaceWithAuth(
-    databaseId,
-    namespaceId
-  );
-
-  const now = Math.floor(Date.now() / 1000);
-  await db
-    .update(dbDocNamespace)
-    .set({
-      name,
-      updatedAt: now,
-    })
-    .where(eq(dbDocNamespace.id, namespaceId));
-
-  return {
-    createdAt: namespaceData.createdAt ?? now,
-    id: namespaceData.id ?? "",
-    updatedAt: now,
-    name,
-  };
-}
-
-export async function getSavedDocList(
-  databaseId: string
-): Promise<SavedDocData[]> {
-  const { db } = await getDatabaseWithAuth(databaseId);
-  const ns = await getDocNamespaceList(databaseId);
-
-  const docList = await db.query.dbDoc.findMany({
-    where: inArray(
-      dbDoc.namespaceId,
-      ns.map((n) => n.id)
-    ),
-    orderBy: desc(dbDoc.createdAt),
-  });
-
-  return docList.map((item) => {
-    const found = ns.find((n) => n.id === item.namespaceId);
-
-    return {
-      content: item.content ?? "",
-      createdAt: item.createdAt ?? 0,
-      updatedAt: item.updatedAt ?? 0,
-      id: item.id ?? "",
-      name: item.name ?? "",
-      type: (item.type ?? "sql") as SavedDocType,
-      namespace: {
-        id: found?.id ?? "",
-        name: found?.name ?? "",
-      },
-    };
-  });
-}
-
-export async function createSavedDoc(
-  databaseId: string,
-  namespaceId: string,
-  type: SavedDocType,
-  input: SavedDocInput
-): Promise<SavedDocData> {
-  const { db, namespaceData, user } = await getNamespaceWithAuth(
-    databaseId,
-    namespaceId
-  );
-
-  const now = Math.floor(Date.now() / 1000);
-  const id = generateId(15);
-
-  await db.insert(dbDoc).values({
-    content: input.content,
-    type: type,
-    createdAt: now,
-    updatedAt: now,
-    id,
-    lastUsedAt: now,
-    name: input.name,
-    namespaceId: namespaceData.id,
-    userId: user.id,
-  });
-
-  return {
-    id,
-    content: input.content,
-    createdAt: now,
-    updatedAt: now,
-    name: input.name,
-    type: type,
-    namespace: {
-      id: namespaceData.id,
-      name: namespaceData.name ?? "",
-    },
-  };
-}
-
-export async function removeSavedDoc(
-  databaseId: string,
-  docId: string
-): Promise<void> {
-  const { db } = await getDocWithAuth(databaseId, docId);
-  await db.delete(dbDoc).where(eq(dbDoc.id, docId));
-}
-
-export async function updateSavedDoc(
-  databaseId: string,
-  docId: string,
-  input: SavedDocInput
-): Promise<SavedDocData> {
-  const { db, docData, namespaceData } = await getDocWithAuth(
-    databaseId,
-    docId
-  );
-  const now = Math.floor(Date.now() / 1000);
-
-  await db
-    .update(dbDoc)
-    .set({
-      content: input.content,
-      name: input.name,
-      updatedAt: now,
-    })
-    .where(eq(dbDoc.id, docId));
-
-  return {
-    id: docId,
-    content: input.content,
-    createdAt: docData.createdAt ?? 0,
-    updatedAt: now,
-    name: input.name,
-    type: (docData.type ?? "sql") as SavedDocType,
-    namespace: {
-      id: namespaceData.id,
-      name: namespaceData.name ?? "",
-    },
-  };
-}
diff --git a/src/env.ts b/src/env.ts
index f69d0995..c46eaf30 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -15,12 +15,6 @@ export const env = createEnv({
     DATABASE_ANALYTIC_URL: z.string().optional(),
     DATABASE_ANALYTIC_AUTH_TOKEN: z.string().optional(),
 
-    GITHUB_CLIENT_ID: z.string().optional(),
-    GITHUB_CLIENT_SECRET: z.string().optional(),
-
-    GOOGLE_CLIENT_ID: z.string().optional(),
-    GOOGLE_CLIENT_SECRET: z.string().optional(),
-
     ENCRYPTION_KEY: z.string().min(30).optional(),
   },
 
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
deleted file mode 100644
index d0a93490..00000000
--- a/src/lib/auth.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import { Lucia } from "lucia";
-import { GitHub, Google } from "arctic";
-import { LibSQLAdapter } from "@lucia-auth/adapter-sqlite";
-import { get_connection } from "@/db";
-import { env } from "@/env";
-import { cache } from "react";
-import { cookies, headers } from "next/headers";
-import { NextRequest } from "next/server";
-
-export const PROVIDER = {
-  GITHUB: "GITHUB",
-  GOOGLE: "GOOGLE",
-} as const;
-
-type ObjectValues<T> = T[keyof T];
-
-export type Provider = ObjectValues<typeof PROVIDER>;
-
-export const github = (req: NextRequest) => {
-  const proto = (req.headers.get("x-forwarded-proto") as string) ?? "http";
-  const baseUrl = `${proto}://${req.headers.get("host")}`;
-
-  return new GitHub(
-    env.GITHUB_CLIENT_ID ?? "",
-    env.GITHUB_CLIENT_SECRET ?? "",
-    {
-      redirectURI: `${baseUrl}/login/github/callback`,
-    }
-  );
-};
-
-export const google = (req: NextRequest) => {
-  const proto = (req.headers.get("x-forwarded-proto") as string) ?? "http";
-  const baseUrl = `${proto}://${req.headers.get("host")}`;
-
-  return new Google(
-    env.GOOGLE_CLIENT_ID ?? "",
-    env.GOOGLE_CLIENT_SECRET ?? "",
-    `${baseUrl}/login/google/callback`
-  );
-};
-
-export class LuciaAuth {
-  static app?: Lucia<
-    Record<never, never>,
-    {
-      name: string;
-      picture: string;
-      storageUsage: number;
-    }
-  >;
-
-  static get() {
-    if (!env.DATABASE_URL) return null;
-    if (LuciaAuth.app) return LuciaAuth.app;
-
-    const adapter = new LibSQLAdapter(get_connection(), {
-      user: "user",
-      session: "user_session",
-    });
-
-    const lucia = new Lucia(adapter, {
-      sessionCookie: {
-        expires: false,
-        attributes: {
-          // set to `true` when using HTTPS
-          secure: process.env.NODE_ENV === "production",
-        },
-      },
-
-      getUserAttributes(attr) {
-        return {
-          name: attr.name,
-          picture: attr.picture,
-          storageUsage: attr.storage_usage,
-        };
-      },
-    });
-
-    LuciaAuth.app = lucia;
-    return lucia;
-  }
-}
-
-export const getSession = cache(async function () {
-  const lucia = LuciaAuth.get();
-  if (!lucia) {
-    return {
-      user: null,
-      session: null,
-    };
-  }
-
-  const authorizationHeader = (await headers()).get("authorization");
-  let sessionId = lucia.readBearerToken(authorizationHeader ?? "");
-
-  if (!sessionId) {
-    sessionId = (await cookies()).get(lucia.sessionCookieName)?.value ?? null;
-  }
-
-  if (!sessionId) {
-    return {
-      user: null,
-      session: null,
-    };
-  }
-
-  return await lucia.validateSession(sessionId);
-});
-
-export const getSessionFromBearer = cache(async function () {
-  const lucia = LuciaAuth.get();
-  if (!lucia) {
-    return {
-      user: null,
-      session: null,
-    };
-  }
-
-  const authorizationHeader = (await headers()).get("authorization");
-  const sessionId = lucia.readBearerToken(authorizationHeader ?? "");
-
-  if (!sessionId) {
-    return {
-      user: null,
-      session: null,
-    };
-  }
-
-  return await lucia.validateSession(sessionId);
-});
-
-export const getSessionFromCookie = cache(async function () {
-  const lucia = LuciaAuth.get();
-
-  if (!lucia) {
-    return {
-      user: null,
-      session: null,
-    };
-  }
-
-  const cookieStore = await cookies();
-
-  const sessionId = cookieStore.get(lucia.sessionCookieName)?.value ?? null;
-  if (!sessionId) {
-    return {
-      user: null,
-      session: null,
-    };
-  }
-
-  const result = await lucia.validateSession(sessionId);
-
-  try {
-    if (result.session && result.session.fresh) {
-      const sessionCookie = lucia.createSessionCookie(result.session.id);
-      cookieStore.set(
-        sessionCookie.name,
-        sessionCookie.value,
-        sessionCookie.attributes
-      );
-    }
-    if (!result.session) {
-      const sessionCookie = lucia.createBlankSessionCookie();
-      cookieStore.set(
-        sessionCookie.name,
-        sessionCookie.value,
-        sessionCookie.attributes
-      );
-    }
-    // eslint-disable-next-line no-empty
-  } catch {}
-  return result;
-});
-
-declare module "lucia" {
-  interface Register {
-    Lucia: Lucia<
-      Record<never, never>,
-      {
-        name: string;
-        picture: string;
-        storageUsage: number;
-      }
-    >;
-    DatabaseUserAttributes: DatabaseUserAttributes;
-  }
-}
-
-interface DatabaseUserAttributes {
-  name: string;
-  picture: string;
-  storage_usage: number;
-}
diff --git a/src/lib/test-helper.ts b/src/lib/test-helper.ts
deleted file mode 100644
index a3379fa7..00000000
--- a/src/lib/test-helper.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-import { createClient } from "@libsql/client/node";
-import { drizzle } from "drizzle-orm/libsql";
-import * as schema from "./../db/schema";
-import { migrate } from "drizzle-orm/libsql/migrator";
-import { sql } from "drizzle-orm";
-import { generateId } from "lucia";
-
-let TOKEN_CURRENT: string | undefined = undefined;
-
-const conn = createClient({
-  url: ":memory:",
-});
-
-const db = drizzle(conn, { schema });
-
-jest.mock("next/headers", () => ({
-  cookies: jest.fn(() => ({
-    get: (name: string) => {
-      if (name === "auth_session") {
-        return { value: TOKEN_CURRENT };
-      }
-      return;
-    },
-  })),
-  headers: jest.fn(() => ({
-    get: () => undefined,
-  })),
-}));
-
-jest.mock("./../db", () => {
-  return {
-    get_connection: () => {
-      return conn;
-    },
-    get_database: () => {
-      return db;
-    },
-  };
-});
-
-jest.mock("./../env", () => {
-  return { env: { DATABASE_URL: ":memory:" } };
-});
-
-jest.mock("react", () => {
-  const originalModule = jest.requireActual("react");
-  return {
-    ...originalModule,
-    cache: (v: any) => v,
-  };
-});
-
-export async function setupTestDatabase() {
-  await migrate(db, { migrationsFolder: "./drizzle" });
-}
-
-export async function makeTestUser({
-  id,
-  sessionToken,
-}: {
-  id: string;
-  sessionToken?: string;
-}): Promise<typeof schema.user.$inferSelect> {
-  const data = {
-    id,
-    createdAt: "2024-03-10 05:39:45",
-    email: "testing@gmail.com",
-    name: "test",
-    picture: "",
-    storageUsage: 0,
-  };
-
-  const oauthId = generateId(15);
-  const oauthData = {
-    id: oauthId,
-    createdAt: "2024-03-10 05:39:45",
-    provider: "github",
-    providerId: oauthId,
-    userId: id,
-  };
-
-  await db.batch([
-    db.insert(schema.user).values(data),
-    db.insert(schema.user_oauth).values(oauthData),
-  ]);
-
-  if (sessionToken) {
-    const now = Math.floor(Date.now() / 1000);
-    const sessionData = {
-      expiresAt: sql`${now + 100000}`,
-      id: sessionToken,
-      userId: id,
-      authId: oauthId,
-      userAgent: "",
-    };
-
-    await db.insert(schema.user_session).values(sessionData);
-  }
-
-  return data;
-}
-
-export async function makeTestDatabase(
-  user: typeof schema.user.$inferSelect,
-  { id }: { id: string }
-): Promise<typeof schema.database.$inferSelect> {
-  const now = Math.floor(Date.now() / 1000);
-
-  const data: typeof schema.database.$inferSelect = {
-    color: "gray",
-    createdAt: now,
-    description: "",
-    driver: "turso",
-    databaseName: "",
-    host: "http://localhost:8080",
-    name: "hello",
-    id: id,
-    userId: user.id,
-    deletedAt: null,
-    password: null,
-    token: null,
-    username: null,
-  };
-
-  const roleId = generateId(15);
-  const role = {
-    databaseId: id,
-    id: roleId,
-    canExecuteQuery: 1,
-    createdAt: now,
-    updatedAt: now,
-    createdBy: user.id,
-    updatedBy: user.id,
-    isOwner: 1,
-    name: "Owner",
-  };
-
-  const userRole = {
-    createdAt: now,
-    createdBy: user.id,
-    databaseId: id,
-    roleId: roleId,
-    userId: user.id,
-  };
-
-  await db.batch([
-    db.insert(schema.database).values(data),
-    db.insert(schema.database_role).values(role),
-    db.insert(schema.database_user_role).values(userRole),
-  ]);
-
-  return data;
-}
-
-export async function makeTestNamespace(
-  user: typeof schema.user.$inferSelect,
-  databaseData: typeof schema.database.$inferSelect,
-  input: { id: string; name: string }
-): Promise<typeof schema.dbDocNamespace.$inferSelect> {
-  const now = Math.floor(Date.now() / 1000);
-
-  const data: typeof schema.dbDocNamespace.$inferSelect = {
-    createdAt: now,
-    updatedAt: now,
-    databaseId: databaseData.id,
-    id: input.id,
-    name: input.name,
-    userId: user.id,
-  };
-
-  await db.insert(schema.dbDocNamespace).values(data);
-  return data;
-}
-
-export function mockToken(token: string) {
-  TOKEN_CURRENT = token;
-}
diff --git a/src/lib/with-database-ops.ts b/src/lib/with-database-ops.ts
deleted file mode 100644
index 3aaad6e9..00000000
--- a/src/lib/with-database-ops.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-  DatabaseRoleAccess,
-  DatabaseRoleType,
-  database,
-  database_role,
-  database_user_role,
-} from "@/db/schema";
-import { User } from "lucia";
-import withUser from "./with-user";
-import { NextResponse } from "next/server";
-import { and, eq } from "drizzle-orm";
-import { headers } from "next/headers";
-import { get_database } from "@/db";
-import { getSession } from "./auth";
-import { ApiError } from "./api-error";
-
-export interface DatabasePermission {
-  isOwner: boolean;
-  canExecuteQuery: boolean;
-  roles: {
-    type: DatabaseRoleType;
-    access: DatabaseRoleAccess;
-    tableName: string | null;
-    columnName: string | null;
-  }[];
-}
-
-export async function getDatabaseWithAuth(databaseId: string) {
-  const db = get_database();
-  const { user } = await getSession();
-
-  if (!user)
-    throw new ApiError({ message: "You do not have permission", status: 500 });
-
-  const [info, role] = await db.batch([
-    db.query.database.findFirst({ where: eq(database.id, databaseId) }),
-    db.query.database_user_role.findFirst({
-      where: and(
-        eq(database_user_role.databaseId, databaseId),
-        eq(database_user_role.userId, user.id)
-      ),
-    }),
-  ]);
-
-  if (!info || info.deletedAt !== null) {
-    throw new ApiError({ message: "Database does not exist", status: 500 });
-  }
-
-  if (!role) {
-    throw new ApiError({ message: "You do not have permission", status: 500 });
-  }
-
-  return { info, role, user, db };
-}
-
-export type DatabaseOperationHandler<BodyType = unknown> = (props: {
-  user: User;
-  body: BodyType;
-  database: typeof database.$inferSelect;
-  permission: DatabasePermission;
-}) => Promise<NextResponse>;
-
-export default function withDatabaseOperation<T = unknown>(
-  handler: DatabaseOperationHandler<T>
-) {
-  return withUser<{ params: Promise<{ database_id: string }> }>(
-    async ({ user, req, params }) => {
-      const databaseId = (await params.params).database_id;
-      const db = get_database();
-
-      if (!databaseId) {
-        return NextResponse.json(
-          { error: "Database is not provided" },
-          { status: 500 }
-        );
-      }
-
-      const { info: databaseInfo, role: databaseRole } =
-        await getDatabaseWithAuth(databaseId);
-
-      const roleId = databaseRole.roleId ?? "";
-      const permission = await db.query.database_role.findFirst({
-        where: eq(database_role.id, roleId),
-      });
-
-      if (!permission) {
-        return NextResponse.json(
-          { error: "You do not have permission" },
-          { status: 500 }
-        );
-      }
-
-      return await handler({
-        user,
-        body:
-          (await headers()).get("Content-Type") === "application/json"
-            ? await req.json()
-            : {},
-        database: databaseInfo,
-        permission: {
-          isOwner: !!permission.isOwner,
-          canExecuteQuery: !!permission.canExecuteQuery,
-          roles: [],
-        },
-      });
-    }
-  );
-}
diff --git a/src/lib/with-user.ts b/src/lib/with-user.ts
deleted file mode 100644
index 39b4033b..00000000
--- a/src/lib/with-user.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { getSession } from "./auth";
-import { Session, User } from "lucia";
-import { ApiError } from "./api-error";
-import { HttpStatus } from "@/constants/http-status";
-
-type WithUserHandler<T = unknown> = (props: {
-  req: NextRequest;
-  user: User;
-  session: Session;
-  params: T;
-}) => Promise<NextResponse>;
-
-export default function withUser<ParamsType = unknown>(
-  handler: WithUserHandler<ParamsType>
-) {
-  return async function (req: NextRequest, params: ParamsType) {
-    try {
-      const { session, user } = await getSession();
-
-      if (!session || !user) {
-        throw new ApiError({
-          message: "You are not authenticated. Please login to continue.",
-          detailedMessage: "Unauthorized",
-          status: HttpStatus.UNAUTHORIZED,
-        });
-      }
-
-      return await handler({ req, user, session, params });
-    } catch (e) {
-      // TODO: can extract this to a separate function
-      if (e instanceof ApiError) {
-        return new Response(
-          JSON.stringify({
-            message: e.message,
-            detailedMessage: e.detailedMessage,
-          }),
-          { status: e.status }
-        );
-      }
-
-      return new Response(
-        JSON.stringify({
-          message: "Something went wrong",
-          detailedMessage: e instanceof Error ? e.message : "Unknown Error",
-        }),
-        { status: HttpStatus.INTERNAL_SERVER_ERROR }
-      );
-    }
-  };
-}

From 098041f032aa1ff1804853572475b96484902693 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 19:59:29 +0700
Subject: [PATCH 092/106] add instruction for each connection

---
 src/app/(outerbase)/base-template.tsx         | 214 ++---------------
 .../local/edit-base/[baseId]/page.tsx         |  15 +-
 .../local/new-base/[driver]/page.tsx          |  31 +--
 src/app/(outerbase)/new-resource-list.tsx     |  12 +
 .../[workspaceId]/new-base/[driver]/page.tsx  |  35 ++-
 .../connection-config-editor/index.tsx        | 217 +++++++++---------
 .../{cloudflare.ts => cloudflare.tsx}         |  25 +-
 .../template/{generic.ts => generic.tsx}      |   0
 .../template/index.ts                         |  26 +++
 .../template/mysql.tsx                        |  29 +++
 .../template/postgres.tsx                     |  29 +++
 .../template/rqlite.ts                        |  32 ---
 .../template/rqlite.tsx                       |  68 ++++++
 .../template/sqlite.ts                        |  15 --
 .../template/sqlite.tsx                       |  33 +++
 .../template/starbase.tsx                     |  90 ++++++++
 .../template/turso.ts                         |  26 ---
 .../template/turso.tsx                        |  87 +++++++
 .../template/valtown.tsx                      |  60 +++++
 19 files changed, 631 insertions(+), 413 deletions(-)
 rename src/components/connection-config-editor/template/{cloudflare.ts => cloudflare.tsx} (50%)
 rename src/components/connection-config-editor/template/{generic.ts => generic.tsx} (100%)
 create mode 100644 src/components/connection-config-editor/template/index.ts
 create mode 100644 src/components/connection-config-editor/template/mysql.tsx
 create mode 100644 src/components/connection-config-editor/template/postgres.tsx
 delete mode 100644 src/components/connection-config-editor/template/rqlite.ts
 create mode 100644 src/components/connection-config-editor/template/rqlite.tsx
 delete mode 100644 src/components/connection-config-editor/template/sqlite.ts
 create mode 100644 src/components/connection-config-editor/template/sqlite.tsx
 create mode 100644 src/components/connection-config-editor/template/starbase.tsx
 delete mode 100644 src/components/connection-config-editor/template/turso.ts
 create mode 100644 src/components/connection-config-editor/template/turso.tsx
 create mode 100644 src/components/connection-config-editor/template/valtown.tsx

diff --git a/src/app/(outerbase)/base-template.tsx b/src/app/(outerbase)/base-template.tsx
index 41e25706..921e4e89 100644
--- a/src/app/(outerbase)/base-template.tsx
+++ b/src/app/(outerbase)/base-template.tsx
@@ -2,199 +2,33 @@ import {
   CommonConnectionConfig,
   CommonConnectionConfigTemplate,
 } from "@/components/connection-config-editor";
-import { CLOUDFLARE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/cloudflare";
-import { GENERIC_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/generic";
-import { RQLITE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/rqlite";
-import { SQLITE_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/sqlite";
-import { TURSO_CONNECTION_TEMPLATE } from "@/components/connection-config-editor/template/turso";
 import { OuterbaseAPISourceInput } from "@/outerbase-cloud/api-type";
+import { ReactElement } from "react";
 import { SavedConnectionRawLocalStorage } from "../(theme)/connect/saved-connection-storage";
 
-export interface ConnectionTemplateList<T = any> {
+export interface ConnectionTemplateList {
   template: CommonConnectionConfigTemplate;
-  from: (value: T) => CommonConnectionConfig;
-  to: (value: CommonConnectionConfig) => T;
-}
-
-export const LOCAL_CONNECTION_TEMPLATES: Record<
-  string,
-  ConnectionTemplateList<SavedConnectionRawLocalStorage>
-> = {
-  "cloudflare-d1": {
-    template: CLOUDFLARE_CONNECTION_TEMPLATE,
-    from: (value) => {
-      return {
-        name: value.name,
-        database: value.database,
-        token: value.token,
-        username: value.username,
-      };
-    },
-    to: (value) => {
-      return {
-        name: value.name,
-        driver: "cloudflare-d1",
-        database: value.database,
-        token: value.token,
-        username: value.username,
-      };
-    },
-  },
-  turso: {
-    template: TURSO_CONNECTION_TEMPLATE,
-    from: (value) => {
-      return {
-        name: value.name,
-        host: value.url,
-        token: value.token,
-      };
-    },
-    to: (value) => {
-      return {
-        name: value.name,
-        driver: "turso",
-        url: value.host,
-        token: value.token,
-      };
-    },
-  },
-  starbase: {
-    template: TURSO_CONNECTION_TEMPLATE,
-    from: (value) => {
-      return {
-        name: value.name,
-        host: value.url,
-        token: value.token,
-      };
-    },
-    to: (value) => {
-      return {
-        driver: "starbase",
-        name: value.name,
-        url: value.host,
-        token: value.token,
-      };
-    },
-  },
-  rqlite: {
-    template: RQLITE_CONNECTION_TEMPLATE,
-    from: (value) => {
-      return {
-        name: value.name,
-        host: value.url,
-        username: value.username,
-        password: value.password,
-      };
-    },
-    to: (value) => {
-      return {
-        name: value.name,
-        driver: "rqlite",
-        url: value.host,
-        username: value.username,
-        password: value.password,
-      };
-    },
-  },
-  "sqlite-filehandler": {
-    template: SQLITE_CONNECTION_TEMPLATE,
-    from: (value) => {
-      return {
-        name: value.name,
-        filehandler: value.file_handler,
-      };
-    },
-    to: (value) => {
-      return {
-        name: value.name,
-        driver: "sqlite-filehandler",
-        file_handler: value.filehandler,
-      };
-    },
-  },
-};
+  localFrom?: (value: SavedConnectionRawLocalStorage) => CommonConnectionConfig;
+  localTo?: (value: CommonConnectionConfig) => SavedConnectionRawLocalStorage;
 
-export const REMOTE_CONNECTION_TEMPLATES: Record<
-  string,
-  ConnectionTemplateList<{ source: OuterbaseAPISourceInput; name: string }>
-> = {
-  mysql: {
-    template: GENERIC_CONNECTION_TEMPLATE,
-    from: (value) => {
-      return {
-        name: value.name,
-        host: value.source.host,
-        username: value.source.user,
-        database: value.source.database,
-        port: value.source.port,
-      };
-    },
-    to: (value) => {
-      return {
-        name: value.name,
-        source: {
-          host: value.host,
-          user: value.username,
-          password: value.password,
-          database: value.database,
-          port: value.port,
-          type: "mysql",
-          base_id: "",
-        },
-      };
-    },
-  },
-  postgres: {
-    template: GENERIC_CONNECTION_TEMPLATE,
-    from: (value) => {
-      return {
-        name: value.name,
-        host: value.source.host,
-        username: value.source.user,
-        database: value.source.database,
-        port: value.source.port,
-      };
-    },
-    to: (value) => {
-      return {
-        name: value.name,
-        source: {
-          host: value.host,
-          user: value.username,
-          password: value.password,
-          database: value.database,
-          port: value.port,
-          type: "postgres",
-          base_id: "",
-        },
-      };
-    },
-  },
+  /**
+   * Convert the remote source config to common connecting config
+   * @param value
+   * @returns
+   */
+  remoteFrom?: (value: {
+    source: OuterbaseAPISourceInput;
+    name: string;
+  }) => CommonConnectionConfig;
 
-  starbasedb: {
-    template: TURSO_CONNECTION_TEMPLATE,
-    from: (value) => {
-      return {
-        name: value.name,
-        host: value.source.host,
-        username: value.source.user,
-        database: value.source.database,
-        port: value.source.port,
-      };
-    },
-    to: (value) => {
-      return {
-        name: value.name,
-        source: {
-          host: value.host,
-          user: value.username,
-          password: value.password,
-          database: value.database,
-          port: value.port,
-          type: "starbasedb",
-          base_id: "",
-        },
-      };
-    },
-  },
-};
+  /**
+   * Convert the common connecting config to remote source config
+   * @param value
+   * @returns
+   */
+  remoteTo?: (value: CommonConnectionConfig) => {
+    source: OuterbaseAPISourceInput;
+    name: string;
+  };
+  instruction?: ReactElement;
+}
diff --git a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
index 9e4b36fc..30561f92 100644
--- a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
+++ b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
@@ -76,16 +76,11 @@ export default function LocalEditBasePage() {
           </div>
         </div>
 
-        <div>
-          <div className="w-1/2">
-            <ConnectionConfigEditor
-              template={template.template}
-              value={value}
-              onChange={setValue}
-            />
-          </div>
-          <div></div>
-        </div>
+        <ConnectionConfigEditor
+          template={template}
+          value={value}
+          onChange={setValue}
+        />
       </div>
 
       <div className="bg-background sticky bottom-0 mt-12 border-t px-2 py-6">
diff --git a/src/app/(outerbase)/local/new-base/[driver]/page.tsx b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
index 2e98246e..08e67f40 100644
--- a/src/app/(outerbase)/local/new-base/[driver]/page.tsx
+++ b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { LOCAL_CONNECTION_TEMPLATES } from "@/app/(outerbase)/base-template";
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
 } from "@/components/connection-config-editor";
+import { ConnectionTemplateDictionary } from "@/components/connection-config-editor/template";
 import { Button } from "@/components/orbit/button";
 import { getDatabaseFriendlyName } from "@/components/resource-card/utils";
 import { ArrowLeft, ArrowRight, FloppyDisk } from "@phosphor-icons/react";
@@ -20,18 +20,24 @@ export default function LocalNewBasePage() {
   const [loading, setLoading] = useState(false);
 
   const template = useMemo(() => {
-    return LOCAL_CONNECTION_TEMPLATES[driver];
+    return ConnectionTemplateDictionary[driver];
   }, [driver]);
 
   const onSave = useCallback(async () => {
+    if (!template?.localTo) return;
+
     setLoading(true);
-    await createLocalConnection(template.to(value));
+    await createLocalConnection(template.localTo(value));
     router.push("/local");
   }, [template, value, router]);
 
   const onConnect = useCallback(async () => {
+    if (!template?.localFrom) return;
+
     setLoading(true);
-    const newConnection = await createLocalConnection(template.to(value));
+    const newConnection = await createLocalConnection(
+      template.localFrom(value)
+    );
 
     // Redirect to the connection page
     mutate("/local/bases");
@@ -42,7 +48,7 @@ export default function LocalNewBasePage() {
     );
   }, [template, value, router]);
 
-  if (!template) {
+  if (!template?.localTo || !template?.localFrom) {
     return <div>Invalid driver</div>;
   }
 
@@ -62,16 +68,11 @@ export default function LocalNewBasePage() {
           <div>Connect to {getDatabaseFriendlyName(driver)} database</div>
         </div>
 
-        <div>
-          <div className="w-1/2">
-            <ConnectionConfigEditor
-              template={template.template}
-              value={value}
-              onChange={setValue}
-            />
-          </div>
-          <div></div>
-        </div>
+        <ConnectionConfigEditor
+          template={template}
+          value={value}
+          onChange={setValue}
+        />
       </div>
 
       <div className="bg-background sticky bottom-0 mt-12 border-t px-2 py-6">
diff --git a/src/app/(outerbase)/new-resource-list.tsx b/src/app/(outerbase)/new-resource-list.tsx
index 0244af21..4857cb7d 100644
--- a/src/app/(outerbase)/new-resource-list.tsx
+++ b/src/app/(outerbase)/new-resource-list.tsx
@@ -7,9 +7,11 @@ import {
   CloudflareIcon,
   DigitalOceanIcon,
   NeonIcon,
+  RQLiteIcon,
   StarbaseIcon,
   SupabaseIcon,
   TursoIcon,
+  ValTownIcon,
 } from "@/components/resource-card/icon";
 import { NewResourceType } from "./new-resource-button";
 
@@ -90,5 +92,15 @@ export function getCreateResourceTypeList(
       icon: SQLiteIcon,
       href: workspaceId ? "" : "/local/new-base/sqlite-filehandler",
     },
+    {
+      name: "val.town",
+      icon: ValTownIcon,
+      href: workspaceId ? "" : "/local/new-base/valtown",
+    },
+    {
+      name: "rqlite",
+      icon: RQLiteIcon,
+      href: workspaceId ? "" : "/local/new-base/rqlite",
+    },
   ].filter((resource) => resource.href || resource.comingSoon);
 }
diff --git a/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
index be391c01..f1480f0c 100644
--- a/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
@@ -1,9 +1,9 @@
 "use client";
-import { REMOTE_CONNECTION_TEMPLATES } from "@/app/(outerbase)/base-template";
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
 } from "@/components/connection-config-editor";
+import { ConnectionTemplateDictionary } from "@/components/connection-config-editor/template";
 import { Button } from "@/components/orbit/button";
 import { getDatabaseFriendlyName } from "@/components/resource-card/utils";
 import {
@@ -27,15 +27,17 @@ export default function WorkspaceNewBasePage() {
   const [error, setError] = useState("");
 
   const template = useMemo(() => {
-    return REMOTE_CONNECTION_TEMPLATES[driver];
+    return ConnectionTemplateDictionary[driver];
   }, [driver]);
 
   const onSave = useCallback(
     (overrideRedirect?: string) => {
+      if (!template.remoteFrom || !template.remoteTo) return;
+
       setLoading(true);
       setError("");
 
-      const { name: baseName, source } = template.to(value);
+      const { name: baseName, source } = template.remoteTo(value);
 
       const runSave = async () => {
         await testOuterbaseSource(workspaceId, source);
@@ -71,7 +73,7 @@ export default function WorkspaceNewBasePage() {
     [workspaceId, template, value, router]
   );
 
-  if (!template) {
+  if (!template.remoteFrom || !template.remoteTo) {
     return <div>Invalid driver</div>;
   }
 
@@ -91,22 +93,17 @@ export default function WorkspaceNewBasePage() {
           <div>Connect to {getDatabaseFriendlyName(driver)} database</div>
         </div>
 
-        <div>
-          <div className="w-1/2">
-            {error && (
-              <div className="mb-4 rounded border border-red-500 bg-red-100 p-2 text-base dark:bg-red-500 dark:text-white">
-                {error}
-              </div>
-            )}
-
-            <ConnectionConfigEditor
-              template={template.template}
-              value={value}
-              onChange={setValue}
-            />
+        {error && (
+          <div className="mb-4 rounded border border-red-500 bg-red-100 p-2 text-base lg:w-1/2 dark:bg-red-500 dark:text-white">
+            {error}
           </div>
-          <div></div>
-        </div>
+        )}
+
+        <ConnectionConfigEditor
+          template={template}
+          value={value}
+          onChange={setValue}
+        />
       </div>
 
       <div className="bg-background sticky bottom-0 mt-12 border-t px-2 py-6">
diff --git a/src/components/connection-config-editor/index.tsx b/src/components/connection-config-editor/index.tsx
index cd3c9b79..706734b3 100644
--- a/src/components/connection-config-editor/index.tsx
+++ b/src/components/connection-config-editor/index.tsx
@@ -9,6 +9,7 @@
  * Users can customize the templates to suit their specific requirements.
  */
 
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
 import { cn } from "@/lib/utils";
 import { produce } from "immer";
 import { CommonDialogProvider } from "../common-dialog";
@@ -23,113 +24,119 @@ export function ConnectionConfigEditor({
   onChange,
   value,
 }: ConnectionConfigEditorProps) {
+  const templateRow = template.template;
+
   return (
-    <div className="flex w-full flex-col gap-4">
-      <Label title="Name">
-        <Input
-          autoFocus
-          size="lg"
-          placeholder="Connection name"
-          value={value.name}
-          onChange={(e) => {
-            onChange(
-              produce(value, (draft) => {
-                draft.name = e.target.value as never;
-              })
-            );
-          }}
-        />
-      </Label>
-
-      {template.map((row, index) => {
-        return (
-          <div key={index} className={"flex flex-row gap-4"}>
-            {row.columns.map((column, index) => {
-              let content = <div />;
-
-              if (column.type === "text" || column.type === "password") {
-                content = (
-                  <Label title={column.label} required={column.required}>
-                    <Input
-                      size="lg"
-                      placeholder={column.placeholder}
-                      value={(value[column.name] as string) ?? ""}
-                      onChange={(e) => {
-                        onChange(
-                          produce(value, (draft) => {
-                            draft[column.name] = e.target.value as never;
-                          })
-                        );
-                      }}
-                    />
-                  </Label>
-                );
-              } else if (column.type === "textarea") {
-                content = (
-                  <Label title={column.label} required={column.required}>
-                    <Textarea
-                      rows={4}
-                      className="resize-none"
-                      placeholder={column.placeholder}
-                      value={(value[column.name] as string) ?? ""}
-                      onChange={(e) => {
-                        onChange(
-                          produce(value, (draft) => {
-                            draft[column.name] = e.target.value as never;
-                          })
-                        );
-                      }}
-                    />
-                  </Label>
-                );
-              } else if (column.type === "checkbox") {
-                content = (
-                  <label className="mx-1 flex flex-1 items-center justify-start gap-2 text-base select-none">
-                    <Toggle
-                      size="sm"
-                      onChange={(checked) => {
-                        onChange(
-                          produce(value, (draft) => {
-                            draft[column.name] = checked as never;
-                          })
-                        );
-                      }}
-                      toggled={!!value[column.name]}
-                    />
-
-                    {column.label}
-                  </label>
-                );
-              } else if (column.type === "file") {
-                content = (
-                  <Label title={column.label} required={column.required}>
-                    <div>
-                      <CommonDialogProvider>
-                        <FileHandlerPicker
-                          value={value[column.name] as string}
-                          onChange={(fileId) => {
-                            onChange(
-                              produce(value, (draft) => {
-                                draft[column.name] = fileId as never;
-                              })
-                            );
-                          }}
-                        />
-                      </CommonDialogProvider>
-                    </div>
-                  </Label>
+    <div className="flex w-full gap-4">
+      <div className="flex w-1/2 grow-0 flex-col gap-4">
+        <Label title="Name">
+          <Input
+            autoFocus
+            size="lg"
+            placeholder="Connection name"
+            value={value.name}
+            onChange={(e) => {
+              onChange(
+                produce(value, (draft) => {
+                  draft.name = e.target.value as never;
+                })
+              );
+            }}
+          />
+        </Label>
+
+        {templateRow.map((row, index) => {
+          return (
+            <div key={index} className={"flex flex-row gap-4"}>
+              {row.columns.map((column, index) => {
+                let content = <div />;
+
+                if (column.type === "text" || column.type === "password") {
+                  content = (
+                    <Label title={column.label} required={column.required}>
+                      <Input
+                        size="lg"
+                        placeholder={column.placeholder}
+                        value={(value[column.name] as string) ?? ""}
+                        onChange={(e) => {
+                          onChange(
+                            produce(value, (draft) => {
+                              draft[column.name] = e.target.value as never;
+                            })
+                          );
+                        }}
+                      />
+                    </Label>
+                  );
+                } else if (column.type === "textarea") {
+                  content = (
+                    <Label title={column.label} required={column.required}>
+                      <Textarea
+                        rows={4}
+                        className="resize-none"
+                        placeholder={column.placeholder}
+                        value={(value[column.name] as string) ?? ""}
+                        onChange={(e) => {
+                          onChange(
+                            produce(value, (draft) => {
+                              draft[column.name] = e.target.value as never;
+                            })
+                          );
+                        }}
+                      />
+                    </Label>
+                  );
+                } else if (column.type === "checkbox") {
+                  content = (
+                    <label className="mx-1 flex flex-1 items-center justify-start gap-2 text-base select-none">
+                      <Toggle
+                        size="sm"
+                        onChange={(checked) => {
+                          onChange(
+                            produce(value, (draft) => {
+                              draft[column.name] = checked as never;
+                            })
+                          );
+                        }}
+                        toggled={!!value[column.name]}
+                      />
+
+                      {column.label}
+                    </label>
+                  );
+                } else if (column.type === "file") {
+                  content = (
+                    <Label title={column.label} required={column.required}>
+                      <div>
+                        <CommonDialogProvider>
+                          <FileHandlerPicker
+                            value={value[column.name] as string}
+                            onChange={(fileId) => {
+                              onChange(
+                                produce(value, (draft) => {
+                                  draft[column.name] = fileId as never;
+                                })
+                              );
+                            }}
+                          />
+                        </CommonDialogProvider>
+                      </div>
+                    </Label>
+                  );
+                }
+
+                return (
+                  <div key={index} className={cn("flex-1", column.size)}>
+                    {content}
+                  </div>
                 );
-              }
+              })}
+            </div>
+          );
+        })}
+      </div>
 
-              return (
-                <div key={index} className={cn("flex-1", column.size)}>
-                  {content}
-                </div>
-              );
-            })}
-          </div>
-        );
-      })}
+      <div className="w-1/2 grow-0">{template.instruction}</div>
     </div>
   );
 }
@@ -168,7 +175,7 @@ export type CommonConnectionConfigTemplate =
   CommonConnectionConfigTemplateRow[];
 
 interface ConnectionConfigEditorProps {
-  template: CommonConnectionConfigTemplate;
+  template: ConnectionTemplateList;
   value: CommonConnectionConfig;
   onChange: (value: CommonConnectionConfig) => void;
 }
diff --git a/src/components/connection-config-editor/template/cloudflare.ts b/src/components/connection-config-editor/template/cloudflare.tsx
similarity index 50%
rename from src/components/connection-config-editor/template/cloudflare.ts
rename to src/components/connection-config-editor/template/cloudflare.tsx
index 7f718b2d..d2af62b9 100644
--- a/src/components/connection-config-editor/template/cloudflare.ts
+++ b/src/components/connection-config-editor/template/cloudflare.tsx
@@ -1,6 +1,7 @@
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
 import { CommonConnectionConfigTemplate } from "..";
 
-export const CLOUDFLARE_CONNECTION_TEMPLATE: CommonConnectionConfigTemplate = [
+const template: CommonConnectionConfigTemplate = [
   {
     columns: [
       {
@@ -35,3 +36,25 @@ export const CLOUDFLARE_CONNECTION_TEMPLATE: CommonConnectionConfigTemplate = [
     ],
   },
 ];
+
+export const CloudflareConnectionTemplate: ConnectionTemplateList = {
+  localFrom: (value) => {
+    return {
+      name: value.name,
+      database: value.database,
+      token: value.token,
+      username: value.username,
+    };
+  },
+  localTo: (value) => {
+    return {
+      name: value.name,
+      driver: "cloudflare-d1",
+      database: value.database,
+      token: value.token,
+      username: value.username,
+    };
+  },
+  template,
+  instruction: <div></div>,
+};
diff --git a/src/components/connection-config-editor/template/generic.ts b/src/components/connection-config-editor/template/generic.tsx
similarity index 100%
rename from src/components/connection-config-editor/template/generic.ts
rename to src/components/connection-config-editor/template/generic.tsx
diff --git a/src/components/connection-config-editor/template/index.ts b/src/components/connection-config-editor/template/index.ts
new file mode 100644
index 00000000..c41be828
--- /dev/null
+++ b/src/components/connection-config-editor/template/index.ts
@@ -0,0 +1,26 @@
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
+import { CloudflareConnectionTemplate } from "./cloudflare";
+import { MySQLConnectionTemplate } from "./mysql";
+import { PostgresConnectionTemplate } from "./postgres";
+import { RqliteConnectionTemplate } from "./rqlite";
+import { SqliteConnectionTemplate } from "./sqlite";
+import { StarbaseConnectionTemplate } from "./starbase";
+import { TursoConnectionTemplate } from "./turso";
+import { ValtownConnectionTemplate } from "./valtown";
+
+export const ConnectionTemplateDictionary: Record<
+  string,
+  ConnectionTemplateList
+> = {
+  "cloudflare-d1": CloudflareConnectionTemplate,
+  rqlite: RqliteConnectionTemplate,
+  "sqlite-filehandler": SqliteConnectionTemplate,
+  turso: TursoConnectionTemplate,
+  valtown: ValtownConnectionTemplate,
+
+  starbase: StarbaseConnectionTemplate,
+  starbasedb: StarbaseConnectionTemplate,
+
+  mysql: MySQLConnectionTemplate,
+  postgres: PostgresConnectionTemplate,
+};
diff --git a/src/components/connection-config-editor/template/mysql.tsx b/src/components/connection-config-editor/template/mysql.tsx
new file mode 100644
index 00000000..cb5dec4c
--- /dev/null
+++ b/src/components/connection-config-editor/template/mysql.tsx
@@ -0,0 +1,29 @@
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
+import { GENERIC_CONNECTION_TEMPLATE } from "./generic";
+
+export const MySQLConnectionTemplate: ConnectionTemplateList = {
+  template: GENERIC_CONNECTION_TEMPLATE,
+  remoteFrom: (value) => {
+    return {
+      name: value.name,
+      host: value.source.host,
+      username: value.source.user,
+      database: value.source.database,
+      port: value.source.port,
+    };
+  },
+  remoteTo: (value) => {
+    return {
+      name: value.name,
+      source: {
+        host: value.host,
+        user: value.username,
+        password: value.password,
+        database: value.database,
+        port: value.port,
+        type: "mysql",
+        base_id: "",
+      },
+    };
+  },
+};
diff --git a/src/components/connection-config-editor/template/postgres.tsx b/src/components/connection-config-editor/template/postgres.tsx
new file mode 100644
index 00000000..7e2facec
--- /dev/null
+++ b/src/components/connection-config-editor/template/postgres.tsx
@@ -0,0 +1,29 @@
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
+import { GENERIC_CONNECTION_TEMPLATE } from "./generic";
+
+export const PostgresConnectionTemplate: ConnectionTemplateList = {
+  template: GENERIC_CONNECTION_TEMPLATE,
+  remoteFrom: (value) => {
+    return {
+      name: value.name,
+      host: value.source.host,
+      username: value.source.user,
+      database: value.source.database,
+      port: value.source.port,
+    };
+  },
+  remoteTo: (value) => {
+    return {
+      name: value.name,
+      source: {
+        host: value.host,
+        user: value.username,
+        password: value.password,
+        database: value.database,
+        port: value.port,
+        type: "postgres",
+        base_id: "",
+      },
+    };
+  },
+};
diff --git a/src/components/connection-config-editor/template/rqlite.ts b/src/components/connection-config-editor/template/rqlite.ts
deleted file mode 100644
index 9d8773cd..00000000
--- a/src/components/connection-config-editor/template/rqlite.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { CommonConnectionConfigTemplate } from "..";
-
-export const RQLITE_CONNECTION_TEMPLATE: CommonConnectionConfigTemplate = [
-  {
-    columns: [
-      {
-        name: "host",
-        label: "Host",
-        type: "text",
-        required: true,
-        placeholder: "Hostname or IP address",
-      },
-    ],
-  },
-  {
-    columns: [
-      {
-        name: "username",
-        label: "Username",
-        type: "text",
-        required: true,
-        placeholder: "Database username",
-      },
-      {
-        name: "password",
-        label: "Password",
-        type: "password",
-        placeholder: "Database password",
-      },
-    ],
-  },
-];
diff --git a/src/components/connection-config-editor/template/rqlite.tsx b/src/components/connection-config-editor/template/rqlite.tsx
new file mode 100644
index 00000000..e7f2132f
--- /dev/null
+++ b/src/components/connection-config-editor/template/rqlite.tsx
@@ -0,0 +1,68 @@
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
+import { CommonConnectionConfigTemplate } from "..";
+
+const template: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "host",
+        label: "Host",
+        type: "text",
+        required: true,
+        placeholder: "Hostname or IP address",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "username",
+        label: "Username",
+        type: "text",
+        required: true,
+        placeholder: "Database username",
+      },
+      {
+        name: "password",
+        label: "Password",
+        type: "password",
+        placeholder: "Database password",
+      },
+    ],
+  },
+];
+
+const instruction = (
+  <div className="bg-secondary m-4 flex flex-col gap-4 rounded-lg border p-4 text-base leading-7 shadow">
+    <h2 className="text-lg font-bold">How to</h2>
+    <p>
+      You should include Outerbase Studio in the list of allowed origins for{" "}
+      <strong>CORS (Cross-Origin Resource Sharing)</strong>
+    </p>
+    <pre className="bg-background p-2">
+      rqlited --http-allow-origin=&quot;https://studio.outerbase.com&quot;
+    </pre>
+  </div>
+);
+
+export const RqliteConnectionTemplate: ConnectionTemplateList = {
+  template,
+  instruction,
+  localFrom: (value) => {
+    return {
+      name: value.name,
+      host: value.url,
+      username: value.username,
+      password: value.password,
+    };
+  },
+  localTo: (value) => {
+    return {
+      name: value.name,
+      driver: "rqlite",
+      url: value.host,
+      username: value.username,
+      password: value.password,
+    };
+  },
+};
diff --git a/src/components/connection-config-editor/template/sqlite.ts b/src/components/connection-config-editor/template/sqlite.ts
deleted file mode 100644
index 0904dd48..00000000
--- a/src/components/connection-config-editor/template/sqlite.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { CommonConnectionConfigTemplate } from "..";
-
-export const SQLITE_CONNECTION_TEMPLATE: CommonConnectionConfigTemplate = [
-  {
-    columns: [
-      {
-        name: "filehandler",
-        label: "File",
-        type: "file",
-        required: true,
-        placeholder: "Please select file",
-      },
-    ],
-  },
-];
diff --git a/src/components/connection-config-editor/template/sqlite.tsx b/src/components/connection-config-editor/template/sqlite.tsx
new file mode 100644
index 00000000..e09c6ce0
--- /dev/null
+++ b/src/components/connection-config-editor/template/sqlite.tsx
@@ -0,0 +1,33 @@
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
+import { CommonConnectionConfigTemplate } from "..";
+
+const template: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "filehandler",
+        label: "File",
+        type: "file",
+        required: true,
+        placeholder: "Please select file",
+      },
+    ],
+  },
+];
+
+export const SqliteConnectionTemplate: ConnectionTemplateList = {
+  template,
+  localFrom: (value) => {
+    return {
+      name: value.name,
+      filehandler: value.file_handler,
+    };
+  },
+  localTo: (value) => {
+    return {
+      name: value.name,
+      driver: "sqlite-filehandler",
+      file_handler: value.filehandler,
+    };
+  },
+};
diff --git a/src/components/connection-config-editor/template/starbase.tsx b/src/components/connection-config-editor/template/starbase.tsx
new file mode 100644
index 00000000..066297e4
--- /dev/null
+++ b/src/components/connection-config-editor/template/starbase.tsx
@@ -0,0 +1,90 @@
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
+import { CommonConnectionConfigTemplate } from "..";
+
+const template: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "host",
+        label: "URL",
+        type: "text",
+        required: true,
+        placeholder: "URL",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "token",
+        label: "Access Token",
+        type: "textarea",
+        required: false,
+        placeholder: "Access Token",
+      },
+    ],
+  },
+];
+
+const instruction = (
+  <div className="bg-secondary m-4 flex flex-col gap-4 rounded-lg border p-4 text-base leading-7 shadow">
+    <h2 className="text-lg font-bold">How to</h2>
+
+    <p>
+      You can get your access token from{" "}
+      <span className="bg-background p-1 px-2 font-mono">wrangler.toml</span>{" "}
+      inside your <strong>StarbaseDb</strong> project
+    </p>
+
+    <div className="bg-background flex flex-col p-2 font-mono">
+      <span>[vars]</span>
+      <span>
+        ADMIN_AUTHORIZATION_TOKEN ={" "}
+        <strong className="text-red-500">&quot;xxxxxxxxxxxxxxxxxx&quot;</strong>
+      </span>
+    </div>
+  </div>
+);
+
+export const StarbaseConnectionTemplate: ConnectionTemplateList = {
+  template,
+  instruction,
+  localFrom: (value) => {
+    return {
+      name: value.name,
+      host: value.url,
+      token: value.token,
+    };
+  },
+  localTo: (value) => {
+    return {
+      name: value.name,
+      driver: "starbase",
+      url: value.host,
+      token: value.token,
+    };
+  },
+  remoteFrom: (value) => {
+    return {
+      name: value.name,
+      host: value.source.host,
+      username: value.source.user,
+      database: value.source.database,
+      port: value.source.port,
+    };
+  },
+  remoteTo: (value) => {
+    return {
+      name: value.name,
+      source: {
+        host: value.host,
+        user: value.username,
+        password: value.password,
+        database: value.database,
+        port: value.port,
+        type: "starbasedb",
+        base_id: "",
+      },
+    };
+  },
+};
diff --git a/src/components/connection-config-editor/template/turso.ts b/src/components/connection-config-editor/template/turso.ts
deleted file mode 100644
index 4541eee8..00000000
--- a/src/components/connection-config-editor/template/turso.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { CommonConnectionConfigTemplate } from "..";
-
-export const TURSO_CONNECTION_TEMPLATE: CommonConnectionConfigTemplate = [
-  {
-    columns: [
-      {
-        name: "host",
-        label: "URL",
-        type: "text",
-        required: true,
-        placeholder: "URL",
-      },
-    ],
-  },
-  {
-    columns: [
-      {
-        name: "token",
-        label: "Access Token",
-        type: "textarea",
-        required: false,
-        placeholder: "Access Token",
-      },
-    ],
-  },
-];
diff --git a/src/components/connection-config-editor/template/turso.tsx b/src/components/connection-config-editor/template/turso.tsx
new file mode 100644
index 00000000..2034ef48
--- /dev/null
+++ b/src/components/connection-config-editor/template/turso.tsx
@@ -0,0 +1,87 @@
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
+import { CommonConnectionConfigTemplate } from "..";
+
+const template: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "host",
+        label: "URL",
+        type: "text",
+        required: true,
+        placeholder: "URL",
+      },
+    ],
+  },
+  {
+    columns: [
+      {
+        name: "token",
+        label: "Access Token",
+        type: "textarea",
+        required: false,
+        placeholder: "Access Token",
+      },
+    ],
+  },
+];
+
+const instruction = (
+  <div className="bg-secondary m-4 flex flex-col gap-4 rounded-lg border p-4 text-base leading-7 shadow">
+    <h2 className="text-lg font-bold">Connect to Turso</h2>
+    <p>
+      To connect to the Turso database, you need to generate a database token.
+      Follow these steps via the Turso dashboard
+    </p>
+
+    <ul className="ml-8 list-disc">
+      <li>Go to the Turso Database section.</li>
+      <li>Navigate to the Database menu.</li>
+      <li>
+        Click on &quot;Get Token&quot; on the right side of the database you
+        want to connect.
+      </li>
+
+      <li>
+        Click <strong>&quot;Generate Token&quot;</strong> and then copy the
+        token.
+      </li>
+    </ul>
+    <h2 className="text-lg font-bold">Connect to Local LibSQL</h2>
+    <ul className="ml-8 list-disc">
+      <li>
+        Running{" "}
+        <span className="bg-background p-1 px-2 font-mono">turso dev</span>
+      </li>
+
+      <li>
+        Fill URL{" "}
+        <span className="bg-background p-1 px-2 font-mono">
+          http://127.0.0.1:8080
+        </span>
+      </li>
+
+      <li>Leave the access token blank</li>
+    </ul>
+  </div>
+);
+
+export const TursoConnectionTemplate: ConnectionTemplateList = {
+  template,
+  instruction,
+  localFrom: (value) => {
+    return {
+      name: value.name,
+      host: value.url,
+      token: value.token,
+    };
+  },
+  localTo: (value) => {
+    return {
+      name: value.name,
+      driver: "turso",
+      url: value.host,
+      token: value.token,
+    };
+  },
+};
diff --git a/src/components/connection-config-editor/template/valtown.tsx b/src/components/connection-config-editor/template/valtown.tsx
new file mode 100644
index 00000000..c4c590f3
--- /dev/null
+++ b/src/components/connection-config-editor/template/valtown.tsx
@@ -0,0 +1,60 @@
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
+import Link from "next/link";
+import { CommonConnectionConfigTemplate } from "..";
+
+const template: CommonConnectionConfigTemplate = [
+  {
+    columns: [
+      {
+        name: "token",
+        label: "Access Token",
+        type: "textarea",
+        required: false,
+        placeholder: "Access Token",
+      },
+    ],
+  },
+];
+
+const instruction = (
+  <div className="bg-secondary m-4 flex flex-col gap-4 rounded-lg border p-4 text-base leading-6 shadow">
+    <h2 className="font-bold">How to</h2>
+    <p>
+      Outerbase Studio is a powerful SQLite GUI, perfect for managing
+      Val.town&apos;s database. Connecting is easy—just follow these steps:
+    </p>
+
+    <ul className="ml-8 list-disc">
+      <li>
+        Goto{" "}
+        <Link
+          className="text-blue-600 underline"
+          href="https://www.val.town/settings/api"
+          target="_blank"
+        >
+          API Token Setting
+        </Link>
+      </li>
+      <li>Click &quot;New&quot; if you haven&apos;t generated token before</li>
+      <li>Copy the token</li>
+    </ul>
+  </div>
+);
+
+export const ValtownConnectionTemplate: ConnectionTemplateList = {
+  template,
+  instruction,
+  localFrom: (value) => {
+    return {
+      name: value.name,
+      token: value.token,
+    };
+  },
+  localTo: (value) => {
+    return {
+      driver: "valtown",
+      name: value.name,
+      token: value.token,
+    };
+  },
+};

From 0313a1a21ff3e33076491d58179c605bf9009600 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 21:25:11 +0700
Subject: [PATCH 093/106] show new workspace page when first signup

---
 src/app/(dark-only)/new-workspace/page.tsx    |   2 +-
 src/app/(dark-only)/signup-workspace/page.tsx | 164 ++++++++++++++++++
 src/app/(dark-only)/spaceship-container.tsx   |  15 ++
 src/app/storybook/select/page.tsx             |  19 +-
 src/components/label-input.tsx                |   2 +-
 src/components/orbit/select.tsx               |  11 +-
 src/outerbase-cloud/api-account.ts            |   8 +-
 7 files changed, 203 insertions(+), 18 deletions(-)
 create mode 100644 src/app/(dark-only)/signup-workspace/page.tsx
 create mode 100644 src/app/(dark-only)/spaceship-container.tsx

diff --git a/src/app/(dark-only)/new-workspace/page.tsx b/src/app/(dark-only)/new-workspace/page.tsx
index 38b0fd68..3bd14842 100644
--- a/src/app/(dark-only)/new-workspace/page.tsx
+++ b/src/app/(dark-only)/new-workspace/page.tsx
@@ -9,7 +9,7 @@ import useOuterbaseMutation from "@/outerbase-cloud/hook";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 
-function strippedWorkspaceName(value: string) {
+export function strippedWorkspaceName(value: string) {
   return value
     .replace(
       /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
diff --git a/src/app/(dark-only)/signup-workspace/page.tsx b/src/app/(dark-only)/signup-workspace/page.tsx
new file mode 100644
index 00000000..6ff8a8a6
--- /dev/null
+++ b/src/app/(dark-only)/signup-workspace/page.tsx
@@ -0,0 +1,164 @@
+"use client";
+import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
+import { OuterbaseIcon } from "@/components/icons/outerbase";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import { Label } from "@/components/orbit/label";
+import { Select } from "@/components/orbit/select";
+import { updateOuterbaseUserProfile } from "@/outerbase-cloud/api-account";
+import { createOuterbaseWorkspace } from "@/outerbase-cloud/api-workspace";
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+import { strippedWorkspaceName } from "../new-workspace/page";
+import { LoginBaseSpaceship } from "../signin/starbase-portal";
+import { SpaceshipContentContainer } from "../spaceship-container";
+
+function generateRandomString(length: number) {
+  const characters = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length);
+    result += characters[randomIndex];
+  }
+  return result;
+}
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [role, setRole] = useState("");
+  const [companySize, setCompanySize] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [workspaceName, setWorkspaceName] = useState("");
+  const [loading, setLoading] = useState(false);
+  const { refreshPartial } = useWorkspaces();
+
+  const createWorkspaceWithProfile = useCallback(async () => {
+    const random = generateRandomString(4);
+    const workspaceShortName = `${strippedWorkspaceName(workspaceName)}-${random}`;
+
+    await updateOuterbaseUserProfile({
+      first_name: firstName,
+      last_name: lastName,
+    }).then(() => {});
+
+    const createdWorkspace = await createOuterbaseWorkspace({
+      name: workspaceName,
+      short_name: workspaceShortName,
+    });
+
+    refreshPartial(createdWorkspace);
+    router.push(`/w/${createdWorkspace.short_name}`);
+  }, [workspaceName, firstName, lastName, router, refreshPartial]);
+
+  return (
+    <>
+      <SpaceshipContentContainer>
+        <div className="mb-8 flex flex-col items-center text-base text-white">
+          <OuterbaseIcon className="mb-2 h-14 w-14" />
+
+          <h1 className="text-2xl font-bold">Create Workspace</h1>
+          <p>Workspaces are a home for your databases.</p>
+        </div>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+
+            setLoading(true);
+            createWorkspaceWithProfile()
+              .then()
+              .catch()
+              .finally(() => {
+                setLoading(false);
+              });
+          }}
+          className="flex flex-col gap-4"
+        >
+          <LabelInput
+            label="First name"
+            size="lg"
+            placeholder="First name"
+            value={firstName}
+            onChange={(e) => setFirstName(e.currentTarget.value)}
+            required
+          />
+
+          <LabelInput
+            label="Last name"
+            size="lg"
+            placeholder="Last name"
+            value={lastName}
+            onChange={(e) => setLastName(e.currentTarget.value)}
+            required
+          />
+
+          <LabelInput
+            required
+            label="Workspace name"
+            size="lg"
+            placeholder="Workspace name"
+            value={workspaceName}
+            onChange={(e) => setWorkspaceName(e.currentTarget.value)}
+          />
+
+          <Label title="Company size">
+            <Select
+              className="w-full"
+              value={companySize}
+              placeholder="Company size"
+              size="lg"
+              setValue={setCompanySize}
+              options={[
+                { value: "Just me", label: "Just me" },
+                { value: "2-10", label: "2-10" },
+                { value: "11-50", label: "11-50" },
+                { value: "51-200", label: "51-200" },
+                { value: "201-500", label: "201-500" },
+                { value: "501-1000", label: "501-1000" },
+                { value: "1000+", label: "1000+" },
+              ]}
+            />
+          </Label>
+
+          <Label title="Your role">
+            <Select
+              className="w-full"
+              value={role}
+              size="lg"
+              setValue={setRole}
+              placeholder="Your role"
+              options={[
+                { value: "Data Science", label: "Data Science" },
+                { value: "Marketing", label: "Marketing" },
+                { value: "Design", label: "Design" },
+                { value: "Product", label: "Product" },
+                { value: "Engineering", label: "Engineering" },
+                {
+                  value: "Customer Service",
+                  label: "Customer Service",
+                },
+                { value: "Operations", label: "Operations" },
+                { value: "IT & Support", label: "IT & Support" },
+                { value: "Finance", label: "Finance" },
+                { value: "Sales", label: "Sales" },
+                { value: "Founder", label: "Founder" },
+                { value: "Other/Personal", label: "Other/Personal" },
+              ]}
+            />
+          </Label>
+
+          <Button
+            loading={loading}
+            variant="primary"
+            size="lg"
+            className="mt-8 w-full justify-center"
+          >
+            Create workspace
+          </Button>
+        </form>
+      </SpaceshipContentContainer>
+      <LoginBaseSpaceship />
+    </>
+  );
+}
diff --git a/src/app/(dark-only)/spaceship-container.tsx b/src/app/(dark-only)/spaceship-container.tsx
new file mode 100644
index 00000000..d177e24c
--- /dev/null
+++ b/src/app/(dark-only)/spaceship-container.tsx
@@ -0,0 +1,15 @@
+import { PropsWithChildren } from "react";
+
+export function SpaceshipContentContainer({ children }: PropsWithChildren) {
+  return (
+    <div
+      className="absolute left-[10%] z-2 flex w-[400px] flex-col gap-4 rounded-lg border border-neutral-800 bg-neutral-900 p-8 md:m-0"
+      style={{
+        top: "50%",
+        transform: "translateY(-50%)",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/storybook/select/page.tsx b/src/app/storybook/select/page.tsx
index 3649b912..a509beb2 100644
--- a/src/app/storybook/select/page.tsx
+++ b/src/app/storybook/select/page.tsx
@@ -7,20 +7,17 @@ import { Select } from "@/components/orbit/select";
 import { useState } from "react";
 
 const dbs = [
-  "SQLite",
-  "MySQL",
-  "Postgres",
-  "LibSQL",
-  "MongoDB",
-  "Clickhouse",
-  "BigQuery",
-  "Snowflake",
-  "MSSql",
-  "Redshift",
+  { value: "SQLite", label: "SQLite" },
+  { value: "MySQL", label: "MySQL" },
+  { value: "Postgres", label: "Postgres" },
+  { value: "LibSQL", label: "LibSQL" },
+  { value: "MongoDB", label: "MongoDB" },
+  { value: "Clickhouse", label: "Clickhouse" },
+  { value: "BigQuery", label: "BigQuery" },
 ];
 
 export default function SelectStorybook() {
-  const [value, setValue] = useState(dbs[0]);
+  const [value, setValue] = useState(dbs[0].value);
 
   return (
     <Section>
diff --git a/src/components/label-input.tsx b/src/components/label-input.tsx
index 4fad2687..bded7b85 100644
--- a/src/components/label-input.tsx
+++ b/src/components/label-input.tsx
@@ -4,7 +4,7 @@ import { Label } from "./orbit/label";
 export default function LabelInput(props: InputProps & { label: string }) {
   return (
     <div className="flex flex-col gap-2">
-      <Label title={props.label}>
+      <Label title={props.label} required={props.required}>
         <Input {...props} />
       </Label>
     </div>
diff --git a/src/components/orbit/select.tsx b/src/components/orbit/select.tsx
index a56f61fa..40bdd860 100644
--- a/src/components/orbit/select.tsx
+++ b/src/components/orbit/select.tsx
@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
 
 export type SelectProps = {
   className?: string;
-  options: string[];
+  options: { value: string; label: string }[];
   placeholder?: string;
   setValue: (value: string) => void;
   size?: "sm" | "base" | "lg";
@@ -26,6 +26,9 @@ export const Select = ({
           "ob-size-base !pr-8": size === "base",
           "ob-size-lg !pr-9": size === "lg",
         },
+        {
+          "!text-muted-foreground": !value,
+        },
         className
       )}
       style={{
@@ -40,10 +43,10 @@ export const Select = ({
       }}
       value={value}
     >
-      {placeholder && <option value={undefined}>{placeholder}</option>}
+      {placeholder && <option value={""}>{placeholder}</option>}
       {options.map((option, index) => (
-        <option value={option} key={index}>
-          {option}
+        <option value={option.value} key={index}>
+          {option.label}
         </option>
       ))}
     </select>
diff --git a/src/outerbase-cloud/api-account.ts b/src/outerbase-cloud/api-account.ts
index 0aa9002d..75ba2b15 100644
--- a/src/outerbase-cloud/api-account.ts
+++ b/src/outerbase-cloud/api-account.ts
@@ -1,3 +1,4 @@
+import { mutate } from "swr";
 import { requestOuterbase } from "./api";
 import { OuterbaseAPIResponse } from "./api-type";
 
@@ -9,7 +10,12 @@ export interface OuterbaseUserProfileInput {
 export async function updateOuterbaseUserProfile(
   data: OuterbaseUserProfileInput
 ) {
-  return await requestOuterbase(`/api/v1/me/profile`, "POST", data);
+  const result = await requestOuterbase(`/api/v1/me/profile`, "POST", data);
+
+  mutate("session-" + localStorage.getItem("ob-token"));
+  localStorage.setItem("session", JSON.stringify(result));
+
+  return result;
 }
 
 export async function updateOuterbaseUserPassword(data: {

From c76be5a67dc4109fcf5b3095d01089486a8b659b Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 21:28:49 +0700
Subject: [PATCH 094/106] hide free badge if workspace is not free

---
 src/app/(outerbase)/nav-layout.tsx   | 9 ++++++---
 src/app/(outerbase)/signout/page.tsx | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/(outerbase)/nav-layout.tsx b/src/app/(outerbase)/nav-layout.tsx
index 4fa8be7c..f581536e 100644
--- a/src/app/(outerbase)/nav-layout.tsx
+++ b/src/app/(outerbase)/nav-layout.tsx
@@ -59,9 +59,12 @@ export default function NavigationLayout({ children }: PropsWithChildren) {
                 }
                 selected={workspace.short_name === workspaceId}
                 badge={
-                  <span className="mr-2 rounded border border-neutral-200 bg-white px-1.5 py-0.5 text-sm font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200">
-                    Free
-                  </span>
+                  !workspace.is_enterprise &&
+                  workspace.subscription.plan === "starter" ? (
+                    <span className="mr-2 rounded border border-neutral-200 bg-white px-1.5 py-0.5 text-sm font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200">
+                      Free
+                    </span>
+                  ) : undefined
                 }
               />
             );
diff --git a/src/app/(outerbase)/signout/page.tsx b/src/app/(outerbase)/signout/page.tsx
index 79c0aa7f..1c15335a 100644
--- a/src/app/(outerbase)/signout/page.tsx
+++ b/src/app/(outerbase)/signout/page.tsx
@@ -17,7 +17,7 @@ export default function SignoutPage() {
   }, [router, logout]);
 
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
+    <div className="flex h-screen w-screen flex-col items-center justify-center gap-4">
       <Loader size={40} />
       <p>Signing out....</p>
     </div>

From 3ee6d86f85081ff4707a61a301cabff2beb18086 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 21:33:37 +0700
Subject: [PATCH 095/106] use password field for password in connection editor

---
 src/components/connection-config-editor/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/connection-config-editor/index.tsx b/src/components/connection-config-editor/index.tsx
index 706734b3..1f426586 100644
--- a/src/components/connection-config-editor/index.tsx
+++ b/src/components/connection-config-editor/index.tsx
@@ -56,6 +56,7 @@ export function ConnectionConfigEditor({
                     <Label title={column.label} required={column.required}>
                       <Input
                         size="lg"
+                        type={column.type}
                         placeholder={column.placeholder}
                         value={(value[column.name] as string) ?? ""}
                         onChange={(e) => {

From b8a1ef7842ea404b06ffc8868c7c2af3d4e34252 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 21:49:07 +0700
Subject: [PATCH 096/106] fixing button inside button warning

---
 .../gui/export/export-result-button.tsx       |  32 +--
 src/components/gui/tabs/table-data-tab.tsx    | 202 ++++++++++--------
 2 files changed, 125 insertions(+), 109 deletions(-)

diff --git a/src/components/gui/export/export-result-button.tsx b/src/components/gui/export/export-result-button.tsx
index 7920ebfe..7ec4bccf 100644
--- a/src/components/gui/export/export-result-button.tsx
+++ b/src/components/gui/export/export-result-button.tsx
@@ -230,15 +230,15 @@ export default function ExportResultButton({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger>
+      <PopoverTrigger asChild>
         <Button variant={"secondary"} onClick={() => setOpen(!open)}>
           <div className="text-sm">Export</div>
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="p-0 min-w[550px] w-[550px]">
+      <PopoverContent className="min-w[550px] w-[550px] p-0">
         <div>
-          <div className="border-b p-4 flex flex-col gap-2">
-            <h1 className="font-bold text-lg">Export</h1>
+          <div className="flex flex-col gap-2 border-b p-4">
+            <h1 className="text-lg font-bold">Export</h1>
 
             <small>Export target</small>
 
@@ -260,8 +260,8 @@ export default function ExportResultButton({
             </RadioGroup>
           </div>
 
-          <div className="flex grow border-b mb-2">
-            <div className="flex flex-col px-4 p-2 border-r">
+          <div className="mb-2 flex grow border-b">
+            <div className="flex flex-col border-r p-2 px-4">
               <small>Output format</small>
               <RadioGroup
                 className="mt-2 flex flex-col gap-3"
@@ -330,7 +330,7 @@ export default function ExportResultButton({
               </RadioGroup>
             </div>
             <div className="grow">
-              <div className="flex grow px-4 p-2 flex-col border-b">
+              <div className="flex grow flex-col border-b p-2 px-4">
                 <small>Selection</small>
                 <div>
                   <RadioGroup
@@ -408,16 +408,16 @@ export default function ExportResultButton({
                   </RadioGroup>
                 </div>
               </div>
-              <div className="flex grow ml-2 p-2 flex-col">
+              <div className="ml-2 flex grow flex-col p-2">
                 <small>Options</small>
-                <div className="flex flex-col space-y-2 mt-2">
+                <div className="mt-2 flex flex-col space-y-2">
                   <div className="flex items-center space-x-4">
                     <span className="w-[120px] text-sm">Field separator:</span>
-                    <div className="flex items-center rounded-md bg-white px-3 py-2.5 text-base text-neutral-900 outline outline-1 outline-neutral-200 focus:outline-neutral-400/70 dark:bg-neutral-900 dark:text-white dark:outline-neutral-800 dark:focus:outline-neutral-600 h-[28px] w-[120px]">
+                    <div className="flex h-[28px] w-[120px] items-center rounded-md bg-white px-3 py-2.5 text-base text-neutral-900 outline outline-1 outline-neutral-200 focus:outline-neutral-400/70 dark:bg-neutral-900 dark:text-white dark:outline-neutral-800 dark:focus:outline-neutral-600">
                       <input
                         disabled={format !== "delimited"}
                         type="text"
-                        className="bg-transparent flex-1 outline-hidden text-sm font-light"
+                        className="flex-1 bg-transparent text-sm font-light outline-hidden"
                         value={exportOptions?.fieldSeparator || ""}
                         onChange={(e) => {
                           setExportOptions({
@@ -430,11 +430,11 @@ export default function ExportResultButton({
                   </div>
                   <div className="flex items-center space-x-4">
                     <span className="w-[120px] text-sm">Line terminator:</span>
-                    <div className="flex items-center rounded-md bg-white px-3 py-2.5 text-base text-neutral-900 outline outline-1 outline-neutral-200 focus:outline-neutral-400/70 dark:bg-neutral-900 dark:text-white dark:outline-neutral-800 dark:focus:outline-neutral-600 h-[28px] w-[120px]">
+                    <div className="flex h-[28px] w-[120px] items-center rounded-md bg-white px-3 py-2.5 text-base text-neutral-900 outline outline-1 outline-neutral-200 focus:outline-neutral-400/70 dark:bg-neutral-900 dark:text-white dark:outline-neutral-800 dark:focus:outline-neutral-600">
                       <input
                         disabled={format !== "delimited"}
                         type="text"
-                        className="bg-transparent flex-1 outline-hidden text-sm font-light"
+                        className="flex-1 bg-transparent text-sm font-light outline-hidden"
                         value={exportOptions?.lineTerminator || ""}
                         onChange={(e) => {
                           setExportOptions({
@@ -448,11 +448,11 @@ export default function ExportResultButton({
 
                   <div className="flex items-center space-x-4">
                     <span className="w-[120px] text-sm">Encloser:</span>
-                    <div className="flex items-center rounded-md bg-white px-3 py-2.5 text-base text-neutral-900 outline outline-1 outline-neutral-200 focus:outline-neutral-400/70 dark:bg-neutral-900 dark:text-white dark:outline-neutral-800 dark:focus:outline-neutral-600 h-[28px] w-[120px]">
+                    <div className="flex h-[28px] w-[120px] items-center rounded-md bg-white px-3 py-2.5 text-base text-neutral-900 outline outline-1 outline-neutral-200 focus:outline-neutral-400/70 dark:bg-neutral-900 dark:text-white dark:outline-neutral-800 dark:focus:outline-neutral-600">
                       <input
                         disabled={format !== "delimited"}
                         type="text"
-                        className="bg-transparent flex-1 outline-hidden text-sm font-light"
+                        className="flex-1 bg-transparent text-sm font-light outline-hidden"
                         value={exportOptions?.encloser || ""}
                         onChange={(e) => {
                           setExportOptions({
@@ -468,7 +468,7 @@ export default function ExportResultButton({
             </div>
           </div>
         </div>
-        <div className="p-2 pt-0 px-4">
+        <div className="p-2 px-4 pt-0">
           <Button size="sm" onClick={onExportClicked}>
             Export
           </Button>
diff --git a/src/components/gui/tabs/table-data-tab.tsx b/src/components/gui/tabs/table-data-tab.tsx
index 7be96ed5..e47bba6b 100644
--- a/src/components/gui/tabs/table-data-tab.tsx
+++ b/src/components/gui/tabs/table-data-tab.tsx
@@ -27,7 +27,7 @@ import { AlertDialogTitle } from "@radix-ui/react-alert-dialog";
 import {
   LucideArrowLeft,
   LucideArrowRight,
-  LucideRefreshCcw
+  LucideRefreshCcw,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import AggregateResultButton from "../aggregate-result/aggregate-result-button";
@@ -218,7 +218,7 @@ export default function TableDataWindow({
       )}
       <div className="shrink-0 grow-0 border-b border-neutral-200 py-2 dark:border-neutral-800">
         <Toolbar>
-          <div className="flex flex-1 items-center gap-2 ml-2">
+          <div className="ml-2 flex flex-1 items-center gap-2">
             <Button
               variant={"secondary"}
               onClick={() => setRevision((prev) => prev + 1)}
@@ -227,7 +227,11 @@ export default function TableDataWindow({
               <LucideRefreshCcw className="h-4 w-4" />
             </Button>
 
-            <Button variant={"secondary"} onClick={onNewRow} className="flex items-center gap-1">
+            <Button
+              variant={"secondary"}
+              onClick={onNewRow}
+              className="flex items-center gap-1"
+            >
               <div className="text-sm">Add row</div>
             </Button>
 
@@ -236,8 +240,8 @@ export default function TableDataWindow({
             </Button>
           </div>
 
-          <div className="mx-2 flex grow max-w-1/3">
-            <div className="flex w-full items-center overflow-hidden rounded bg-neutral-50 dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800">
+          <div className="mx-2 flex max-w-1/3 grow">
+            <div className="flex w-full items-center overflow-hidden rounded border border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-950">
               {filterColumnButton}
               <input
                 type="text"
@@ -249,12 +253,12 @@ export default function TableDataWindow({
                     setWhere(e.currentTarget.value);
                   }
                 }}
-                className="h-full grow p-2 pl-3 pr-2 font-mono text-sm outline-hidden"
+                className="h-full grow p-2 pr-2 pl-3 font-mono text-sm outline-hidden"
               />
             </div>
           </div>
 
-          <div className="flex-1 flex flex-row-reverse items-center gap-2 mr-2">
+          <div className="mr-2 flex flex-1 flex-row-reverse items-center gap-2">
             {/* <ToolbarButton
               text="Save"
               // icon={<LucideSaveAll className="h-4 w-4" />}
@@ -272,20 +276,27 @@ export default function TableDataWindow({
               disabled={!changeNumber}
               onClick={onDiscard}
             /> */}
-            
-
-              { changeNumber ?
-                <>
-                  <Button variant={"primary"} onClick={onCommit} loading={isExecuting} disabled={!changeNumber || isExecuting}>
-                    <div className="text-sm">Save {changeNumber ? changeNumber.toString() : ""} changes</div>
-                  </Button>
-                  
-                  <Button variant={"destructive"} onClick={onDiscard}>
-                    <div className="text-sm">Discard</div>
-                  </Button>
-                </>
-                : <></>
-              }
+
+            {changeNumber ? (
+              <>
+                <Button
+                  variant={"primary"}
+                  onClick={onCommit}
+                  loading={isExecuting}
+                  disabled={!changeNumber || isExecuting}
+                >
+                  <div className="text-sm">
+                    Save {changeNumber ? changeNumber.toString() : ""} changes
+                  </div>
+                </Button>
+
+                <Button variant={"destructive"} onClick={onDiscard}>
+                  <div className="text-sm">Discard</div>
+                </Button>
+              </>
+            ) : (
+              <></>
+            )}
           </div>
         </Toolbar>
       </div>
@@ -308,8 +319,8 @@ export default function TableDataWindow({
         ) : null}
       </div>
       {stat && data && (
-        <div className="flex shrink-0 h-12 justify-between border-t">
-          <div className="flex p-1 px-2 items-center">
+        <div className="flex h-12 shrink-0 justify-between border-t">
+          <div className="flex items-center p-1 px-2">
             <div>
               <ExportResultButton data={data} />
             </div>
@@ -318,79 +329,84 @@ export default function TableDataWindow({
           <div className="p-1 pr-3">
             <AggregateResultButton data={data} />
           </div>
-          
-            <div className="flex items-center gap-2 mr-3">
-              <Button
-                variant={"secondary"}
-                size={"sm"}
-                disabled={finalOffset === 0 || loading}
-                onClick={() => {
-                  setFinalOffset(finalOffset - finalLimit);
-                  setOffset((finalOffset - finalLimit).toString());
-                }}
-                style={{ width: 32, height: 32 }}
-              >
-                <LucideArrowLeft className="h-4 w-4" />
-              </Button>
-
-              <div className="flex gap-2">
-                <Tooltip>
-                  <TooltipTrigger>
-                    <input
-                      value={limit}
-                      onChange={(e) => setLimit(e.currentTarget.value)}
-                      onBlur={(e) => {
-                        try {
-                          const finalValue = parseInt(e.currentTarget.value);
-                          if (finalValue !== finalLimit) {
-                            setFinalLimit(finalValue);
-                          }
-                        } catch (e) {
-                          setLimit(finalLimit.toString());
+
+          <div className="mr-3 flex items-center gap-2">
+            <Button
+              variant={"secondary"}
+              size={"sm"}
+              disabled={finalOffset === 0 || loading}
+              onClick={() => {
+                setFinalOffset(finalOffset - finalLimit);
+                setOffset((finalOffset - finalLimit).toString());
+              }}
+              style={{ width: 32, height: 32 }}
+            >
+              <LucideArrowLeft className="h-4 w-4" />
+            </Button>
+
+            <div className="flex gap-2">
+              <Tooltip>
+                <TooltipTrigger>
+                  <input
+                    value={limit}
+                    onChange={(e) => setLimit(e.currentTarget.value)}
+                    onBlur={(e) => {
+                      try {
+                        const finalValue = parseInt(e.currentTarget.value);
+                        if (finalValue !== finalLimit) {
+                          setFinalLimit(finalValue);
                         }
-                      }}
-                      style={{ width: 50 }}
-                      className="h-8 rounded bg-neutral-200 p-1 pl-2 pr-2 text-xs dark:bg-neutral-900"
-                      alt="Limit"
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>Limit</TooltipContent>
-                </Tooltip>
-
-                <Tooltip>
-                  <TooltipTrigger>
-                    <input
-                      value={offset}
-                      onChange={(e) => setOffset(e.currentTarget.value)}
-                      onBlur={(e) => {
-                        try {
-                          const finalValue = parseInt(e.currentTarget.value);
-                          if (finalValue !== finalOffset) {
-                            setFinalOffset(finalValue);
-                          }
-                        } catch (e) {
-                          setOffset(finalOffset.toString());
+                      } catch (e) {
+                        setLimit(finalLimit.toString());
+                      }
+                    }}
+                    style={{ width: 50 }}
+                    className="h-8 rounded bg-neutral-200 p-1 pr-2 pl-2 text-xs dark:bg-neutral-900"
+                    alt="Limit"
+                  />
+                </TooltipTrigger>
+                <TooltipContent>Limit</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger>
+                  <input
+                    value={offset}
+                    onChange={(e) => setOffset(e.currentTarget.value)}
+                    onBlur={(e) => {
+                      try {
+                        const finalValue = parseInt(e.currentTarget.value);
+                        if (finalValue !== finalOffset) {
+                          setFinalOffset(finalValue);
                         }
-                      }}
-                      style={{ width: 50 }}
-                      className="h-full rounded bg-neutral-200 p-1 pl-2 pr-2 text-xs dark:bg-neutral-900"
-                      alt="Offset"
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>Offset</TooltipContent>
-                </Tooltip>
-              </div>
-
-              <Button variant={"secondary"} size={"sm"} disabled={loading} style={{ width: 32, height: 32 }}>
-                <LucideArrowRight
-                  className="h-4 w-4"
-                  onClick={() => {
-                    setFinalOffset(finalOffset + finalLimit);
-                    setOffset((finalOffset + finalLimit).toString());
-                  }}
-                />
-              </Button>
+                      } catch (e) {
+                        setOffset(finalOffset.toString());
+                      }
+                    }}
+                    style={{ width: 50 }}
+                    className="h-full rounded bg-neutral-200 p-1 pr-2 pl-2 text-xs dark:bg-neutral-900"
+                    alt="Offset"
+                  />
+                </TooltipTrigger>
+                <TooltipContent>Offset</TooltipContent>
+              </Tooltip>
             </div>
+
+            <Button
+              variant={"secondary"}
+              size={"sm"}
+              disabled={loading}
+              style={{ width: 32, height: 32 }}
+            >
+              <LucideArrowRight
+                className="h-4 w-4"
+                onClick={() => {
+                  setFinalOffset(finalOffset + finalLimit);
+                  setOffset((finalOffset + finalLimit).toString());
+                }}
+              />
+            </Button>
+          </div>
         </div>
       )}
     </div>

From a36ab251c91470dc92a22118715f3bc25cd93997 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 21:50:59 +0700
Subject: [PATCH 097/106] add dockerfile to support self hosting via container
 image

---
 Dockerfile  | 21 +++++++++++++++++++++
 vercel.json |  8 --------
 2 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 Dockerfile
 delete mode 100644 vercel.json

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 00000000..404644f5
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,21 @@
+FROM node:20-alpine AS builder
+
+# Setting working directory. All the path will be relative to WORKDIR
+WORKDIR /app
+# Installing dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copying source files
+COPY . .
+
+# Building app
+RUN npm run build
+
+# Copy only standalone server to new image
+FROM node:20-alpine
+WORKDIR /app
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/static ./.next/static
+CMD ["node", "server.js"]
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
deleted file mode 100644
index 5b5d310b..00000000
--- a/vercel.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "crons": [
-    {
-      "path": "/api/cleanup",
-      "schedule": "0 0 * * *"
-    }
-  ]
-}

From 652102094b28bcadc776e53c2cded27cb8b7017a Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 22:00:47 +0700
Subject: [PATCH 098/106] move strippedWorkspaceName outside from page

---
 src/app/(dark-only)/new-workspace/page.tsx    | 12 +-----------
 src/app/(dark-only)/signup-workspace/page.tsx |  2 +-
 src/lib/utils.ts                              | 11 +++++++++++
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/app/(dark-only)/new-workspace/page.tsx b/src/app/(dark-only)/new-workspace/page.tsx
index 3bd14842..cb104ac0 100644
--- a/src/app/(dark-only)/new-workspace/page.tsx
+++ b/src/app/(dark-only)/new-workspace/page.tsx
@@ -4,22 +4,12 @@ import OuterbaseLogo from "@/components/icons/outerbase";
 import { Button } from "@/components/orbit/button";
 import { Input } from "@/components/orbit/input";
 import { Label } from "@/components/orbit/label";
+import { strippedWorkspaceName } from "@/lib/utils";
 import { createOuterbaseWorkspace } from "@/outerbase-cloud/api-workspace";
 import useOuterbaseMutation from "@/outerbase-cloud/hook";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 
-export function strippedWorkspaceName(value: string) {
-  return value
-    .replace(
-      /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-      ""
-    )
-    .replace(/[^a-zA-Z 0-9]/g, "")
-    .replace(/[^A-Z0-9]/gi, "-")
-    ?.toLowerCase();
-}
-
 const FRIENDLY_ERROR_NAME: Record<string, string> = {
   SHORT_NAME_TAKEN: "Workspace URL is unavailable.",
 };
diff --git a/src/app/(dark-only)/signup-workspace/page.tsx b/src/app/(dark-only)/signup-workspace/page.tsx
index 6ff8a8a6..fb12b9bf 100644
--- a/src/app/(dark-only)/signup-workspace/page.tsx
+++ b/src/app/(dark-only)/signup-workspace/page.tsx
@@ -5,11 +5,11 @@ import LabelInput from "@/components/label-input";
 import { Button } from "@/components/orbit/button";
 import { Label } from "@/components/orbit/label";
 import { Select } from "@/components/orbit/select";
+import { strippedWorkspaceName } from "@/lib/utils";
 import { updateOuterbaseUserProfile } from "@/outerbase-cloud/api-account";
 import { createOuterbaseWorkspace } from "@/outerbase-cloud/api-workspace";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
-import { strippedWorkspaceName } from "../new-workspace/page";
 import { LoginBaseSpaceship } from "../signin/starbase-portal";
 import { SpaceshipContentContainer } from "../spaceship-container";
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index c2b3c47d..e66db744 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -81,3 +81,14 @@ export async function safeFetch<Success>(
     };
   }
 }
+
+export function strippedWorkspaceName(value: string) {
+  return value
+    .replace(
+      /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+      ""
+    )
+    .replace(/[^a-zA-Z 0-9]/g, "")
+    .replace(/[^A-Z0-9]/gi, "-")
+    ?.toLowerCase();
+}

From 1a6defcd2536b2fad98fa6732dfd789e43f4e308 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 22:12:04 +0700
Subject: [PATCH 099/106] fixing select to use new value property type

---
 .../local/edit-base/[baseId]/page.tsx         | 26 +++---
 src/app/storybook/connection-editor/page.tsx  | 86 -------------------
 src/components/chart/chart-y-axis-section.tsx | 15 +++-
 src/components/chart/edit-chart-menu.tsx      | 31 ++++---
 4 files changed, 45 insertions(+), 113 deletions(-)
 delete mode 100644 src/app/storybook/connection-editor/page.tsx

diff --git a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
index 30561f92..48fac9fa 100644
--- a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
+++ b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
@@ -1,13 +1,10 @@
 "use client";
-import {
-  ConnectionTemplateList,
-  LOCAL_CONNECTION_TEMPLATES,
-} from "@/app/(outerbase)/base-template";
-import { SavedConnectionRawLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
+import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
 } from "@/components/connection-config-editor";
+import { ConnectionTemplateDictionary } from "@/components/connection-config-editor/template";
 import { Button } from "@/components/orbit/button";
 import { ArrowLeft, ArrowRight, FloppyDisk } from "@phosphor-icons/react";
 import { useParams, useRouter } from "next/navigation";
@@ -20,19 +17,19 @@ export default function LocalEditBasePage() {
   const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
   const [loading, setLoading] = useState(true);
   const [databaseName, setDatabaseName] = useState("");
-  const [template, setTemplate] =
-    useState<ConnectionTemplateList<SavedConnectionRawLocalStorage>>();
+  const [template, setTemplate] = useState<ConnectionTemplateList>();
 
   const onSave = useCallback(async () => {
-    if (!template) return;
-    await updateLocalConnection(baseId, template.to(value));
+    if (!template?.localTo) return;
+    await updateLocalConnection(baseId, template.localTo(value));
     router.push("/local");
   }, [template, value, router, baseId]);
 
   const onConnect = useCallback(async () => {
-    if (!template) return;
+    if (!template?.localTo) return;
+
     setLoading(true);
-    const tmp = await updateLocalConnection(baseId, template.to(value));
+    const tmp = await updateLocalConnection(baseId, template.localTo(value));
     router.push(
       tmp?.content.driver === "sqlite-filehandler"
         ? `/playground/client?s=${tmp?.content.id}`
@@ -46,12 +43,13 @@ export default function LocalEditBasePage() {
       if (!config) return;
 
       // Check for the template
-      const template = LOCAL_CONNECTION_TEMPLATES[config.content.driver ?? ""];
-      if (!template) return;
+      const template =
+        ConnectionTemplateDictionary[config.content.driver ?? ""];
+      if (!template?.localFrom) return;
 
       setDatabaseName(config.content.name ?? "");
       setTemplate(template);
-      setValue(template.from(config.content));
+      setValue(template.localFrom(config.content));
       setLoading(false);
     });
   }, [baseId]);
diff --git a/src/app/storybook/connection-editor/page.tsx b/src/app/storybook/connection-editor/page.tsx
deleted file mode 100644
index 4c890bfd..00000000
--- a/src/app/storybook/connection-editor/page.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client";
-import {
-  CommonConnectionConfig,
-  CommonConnectionConfigTemplate,
-  ConnectionConfigEditor,
-} from "@/components/connection-config-editor";
-import { useState } from "react";
-
-const TESTING_TEMPLATE: CommonConnectionConfigTemplate = [
-  {
-    columns: [
-      {
-        name: "host",
-        label: "Host",
-        type: "text",
-        required: true,
-        placeholder: "Hostname or IP address",
-      },
-      {
-        name: "port",
-        label: "Port",
-        type: "text",
-        required: true,
-        placeholder: "Port",
-        size: "max-w-[100px]",
-      },
-    ],
-  },
-  {
-    columns: [
-      {
-        name: "username",
-        label: "Username",
-        type: "text",
-        required: true,
-        placeholder: "Database username",
-      },
-      {
-        name: "password",
-        label: "Password",
-        type: "password",
-        placeholder: "Database password",
-      },
-    ],
-  },
-  {
-    columns: [
-      {
-        name: "database",
-        label: "Database",
-        type: "text",
-        placeholder: "Database name",
-      },
-    ],
-  },
-  {
-    columns: [
-      {
-        name: "token",
-        label: "Access Token",
-        type: "textarea",
-      },
-    ],
-  },
-  {
-    columns: [
-      {
-        name: "ssl",
-        label: "Use SSL",
-        type: "checkbox",
-      },
-    ],
-  },
-];
-
-export default function StorybookConnectionEditor() {
-  const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
-
-  return (
-    <ConnectionConfigEditor
-      template={TESTING_TEMPLATE}
-      value={value}
-      onChange={setValue}
-    />
-  );
-}
diff --git a/src/components/chart/chart-y-axis-section.tsx b/src/components/chart/chart-y-axis-section.tsx
index 250ef4e9..1a6548fb 100644
--- a/src/components/chart/chart-y-axis-section.tsx
+++ b/src/components/chart/chart-y-axis-section.tsx
@@ -28,7 +28,20 @@ export default function ChartYAxisSection({
       <div>
         <Select
           size="lg"
-          options={["Left", "Right", "Hidden"]}
+          options={[
+            {
+              value: "Left",
+              label: "Left",
+            },
+            {
+              value: "Right",
+              label: "Right",
+            },
+            {
+              value: "Hidden",
+              label: "Hidden",
+            },
+          ]}
           setValue={function (value: string): void {
             onChange((prev) => {
               return produce(prev, (draft) => {
diff --git a/src/components/chart/edit-chart-menu.tsx b/src/components/chart/edit-chart-menu.tsx
index dda1dbb3..d7430cf5 100644
--- a/src/components/chart/edit-chart-menu.tsx
+++ b/src/components/chart/edit-chart-menu.tsx
@@ -98,7 +98,10 @@ export default function EditChartMenu({
         <Select
           size="lg"
           className="w-full"
-          options={columns}
+          options={columns.map((col) => ({
+            value: col,
+            label: col,
+          }))}
           value={value.params.options?.xAxisKey ?? ""}
           setValue={function (value: string): void {
             onChange((prev) => {
@@ -172,16 +175,16 @@ export default function EditChartMenu({
           className="w-full"
           size="lg"
           options={[
-            "None",
-            "Percent",
-            "Number",
-            "Decimal",
-            "Date",
-            "Time",
-            "Dollar",
-            "Euro",
-            "Pound",
-            "Yen",
+            { value: "None", label: "None" },
+            { value: "Percent", label: "Percent" },
+            { value: "Number", label: "Number" },
+            { value: "Decimal", label: "Decimal" },
+            { value: "Date", label: "Date" },
+            { value: "Time", label: "Time" },
+            { value: "Dollar", label: "Dollar" },
+            { value: "Euro", label: "Euro" },
+            { value: "Pound", label: "Pound" },
+            { value: "Yen", label: "Yen" },
           ]}
           setValue={function (value: string): void {
             onChange((prev) => {
@@ -224,7 +227,11 @@ export default function EditChartMenu({
         <Select
           className="w-full"
           size="lg"
-          options={["Automatic", "White", "Black"]}
+          options={[
+            { value: "Automatic", label: "Automatic" },
+            { value: "White", label: "White" },
+            { value: "Black", label: "Black" },
+          ]}
           setValue={function (value: string): void {
             onChange((prev) => {
               return produce(prev, (draft) => {

From 5ec488a63f8330342f05fd54f79e52e26980059b Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 22:56:00 +0700
Subject: [PATCH 100/106] fixing add new local connection

---
 .dockerignore                                        | 2 ++
 src/app/(outerbase)/local/new-base/[driver]/page.tsx | 6 ++----
 2 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 .dockerignore

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 00000000..1380c2e7
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+.next
\ No newline at end of file
diff --git a/src/app/(outerbase)/local/new-base/[driver]/page.tsx b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
index 08e67f40..7f57649d 100644
--- a/src/app/(outerbase)/local/new-base/[driver]/page.tsx
+++ b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
@@ -32,12 +32,10 @@ export default function LocalNewBasePage() {
   }, [template, value, router]);
 
   const onConnect = useCallback(async () => {
-    if (!template?.localFrom) return;
+    if (!template?.localTo) return;
 
     setLoading(true);
-    const newConnection = await createLocalConnection(
-      template.localFrom(value)
-    );
+    const newConnection = await createLocalConnection(template.localTo(value));
 
     // Redirect to the connection page
     mutate("/local/bases");

From 8271884db3e0a62ace7d9ac8db02045d06662238 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 25 Feb 2025 23:19:22 +0700
Subject: [PATCH 101/106] add standalone next setting

---
 next.config.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/next.config.js b/next.config.js
index 6bc6fc24..8edd8f9a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -4,6 +4,7 @@ const pkg = require("./package.json");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: "standalone",
   reactStrictMode: false,
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   env: {
@@ -19,4 +20,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withMDX(nextConfig);
+module.exports = { ...withMDX(nextConfig), output: "standalone" };

From 8504c816d84872e17a4cf7658c73a91e5f5af4fc Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Wed, 26 Feb 2025 14:55:56 +0700
Subject: [PATCH 102/106] ask user to use cloud or desktop when try to creeate
 local mysql and postgres

---
 .../local/new-base/cloud-support-only.tsx     | 163 ++++++++++++++++++
 .../(outerbase)/local/new-base/mysql/page.tsx | 120 +------------
 .../local/new-base/postgres/page.tsx          |   6 +
 src/app/(outerbase)/session-provider.tsx      |   1 +
 src/app/(outerbase)/workspace-provider.tsx    |   1 +
 5 files changed, 173 insertions(+), 118 deletions(-)
 create mode 100644 src/app/(outerbase)/local/new-base/cloud-support-only.tsx
 create mode 100644 src/app/(outerbase)/local/new-base/postgres/page.tsx

diff --git a/src/app/(outerbase)/local/new-base/cloud-support-only.tsx b/src/app/(outerbase)/local/new-base/cloud-support-only.tsx
new file mode 100644
index 00000000..97a9c0ac
--- /dev/null
+++ b/src/app/(outerbase)/local/new-base/cloud-support-only.tsx
@@ -0,0 +1,163 @@
+"use client";
+import { useSession } from "@/app/(outerbase)/session-provider";
+import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
+import { Button } from "@/components/orbit/button";
+import { Loader } from "@/components/orbit/loader";
+import { getDatabaseFriendlyName } from "@/components/resource-card/utils";
+import {
+  ArrowLeft,
+  ChartBar,
+  Folder,
+  Icon,
+  MagicWand,
+  ShieldCheck,
+  UsersThree,
+} from "@phosphor-icons/react";
+import Link from "next/link";
+
+function OuterbaseHighlightCard({
+  title,
+  description,
+  icon: Icon,
+}: {
+  title: string;
+  description: string;
+  icon: Icon;
+}) {
+  return (
+    <div className="flex flex-col gap-2 py-4">
+      <div className="mb-4">
+        <div className="bg-muted inline-flex rounded p-4">
+          <Icon className="h-6 w-6" />
+        </div>
+      </div>
+      <h2 className="font-bold">{title}</h2>
+      <p className="text-base">{description}</p>
+    </div>
+  );
+}
+
+function SignupPromotion({ type }: { type: string }) {
+  const { isLoading, session } = useSession();
+  const { workspaces, loading } = useWorkspaces();
+
+  if (isLoading || loading) {
+    return (
+      <div className="flex min-h-[300px] w-1/2 flex-col items-center justify-center gap-4 p-4">
+        <Loader size={40} />
+      </div>
+    );
+  }
+
+  if (!session?.user) {
+    return (
+      <div className="flex w-1/2 flex-col p-4">
+        <h1 className="text-2xl font-bold">Outerbase Cloud</h1>
+
+        <Link
+          href="/signin"
+          className="text-primary-foreground bg-primary my-4 rounded-lg p-4 px-4 text-center text-xl font-semibold"
+        >
+          Sign In To Our Cloud
+        </Link>
+
+        <div className="grid grid-cols-2 gap-2">
+          <OuterbaseHighlightCard
+            icon={UsersThree}
+            title="Collaboration"
+            description="Collaborate with your team to explore and analyze the data, and share insights from the database."
+          />
+
+          <OuterbaseHighlightCard
+            icon={MagicWand}
+            title="AI-powered"
+            description="Integrate AI to assist with querying, chart generation, and more."
+          />
+
+          <OuterbaseHighlightCard
+            icon={ChartBar}
+            title="Visual Charts"
+            description="Create visually appealing charts from multiple data sources in minutes."
+          />
+
+          <OuterbaseHighlightCard
+            icon={ShieldCheck}
+            title="HIPAA Compliant"
+            description="We protect patient health details, keeping them safe and confidential."
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-1/2 flex-col gap-2 p-4">
+      <div className="mb-4">
+        <h1 className="text-2xl font-bold">Outerbase Cloud</h1>
+        <p>Please select the workspace</p>
+      </div>
+
+      {(workspaces ?? []).map((workspace) => {
+        return (
+          <Link
+            key={workspace.id}
+            className="bg-secondary hover:border-primary flex cursor-pointer items-center gap-2 rounded border border-2 p-4 text-base"
+            href={`/w/${workspace.short_name}/new-base/${type}`}
+          >
+            <Folder weight="bold" size={20} />
+            {workspace.name}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+export function CloudDriverSupportOnly({ type }: { type: string }) {
+  return (
+    <div className="container">
+      <div className="my-8 flex">
+        <Button variant="secondary" size="lg" href="/local" as="link">
+          <ArrowLeft />
+          Back
+        </Button>
+      </div>
+
+      <div className="mb-8 p-4 text-xl leading-8">
+        Running {getDatabaseFriendlyName(type)} from a browser is not possible.
+        <br /> Please use the desktop app or our cloud services instead.
+      </div>
+
+      <div className="mb-8 flex">
+        <SignupPromotion type={type} />
+
+        <div className="flex w-1/2 flex-col gap-4 p-4">
+          <div>
+            <h1 className="text-2xl font-bold">Desktop App</h1>
+          </div>
+
+          <Link
+            href="https://github.com/outerbase/studio-desktop/releases"
+            className="relative w-full"
+          >
+            <img
+              src="/outerbase-banner.jpg"
+              alt=""
+              className="w-full rounded-lg"
+            />
+
+            <div className="bg-opacity-50 absolute right-0 bottom-0 left-0 flex cursor-pointer flex-col gap-2 rounded-lg bg-black p-4 text-white">
+              <div className="text-2xl font-bold">Download the desktop app</div>
+              <p className="text-base">
+                Outerbase Studio Desktop is a lightweight Electron wrapper for
+                the Outerbase Studio web version. It enables support for drivers
+                that aren&apos;t feasible in a browser environment, such as
+                MySQL and PostgreSQL.
+              </p>
+            </div>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(outerbase)/local/new-base/mysql/page.tsx b/src/app/(outerbase)/local/new-base/mysql/page.tsx
index 8a3a65b5..1d6eb05d 100644
--- a/src/app/(outerbase)/local/new-base/mysql/page.tsx
+++ b/src/app/(outerbase)/local/new-base/mysql/page.tsx
@@ -1,122 +1,6 @@
 "use client";
-import { useSession } from "@/app/(outerbase)/session-provider";
-import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
-import { Button } from "@/components/orbit/button";
-import { Loader } from "@/components/orbit/loader";
-import { ArrowLeft, Folder } from "@phosphor-icons/react";
-import Link from "next/link";
-
-function LocalMySQLCloudSection() {
-  const { isLoading, session } = useSession();
-  const { workspaces, loading } = useWorkspaces();
-
-  if (isLoading || loading) {
-    return (
-      <div className="flex min-h-[300px] w-1/2 flex-col items-center justify-center gap-4 p-4">
-        <Loader size={40} />
-      </div>
-    );
-  }
-
-  if (!session?.user) {
-    return (
-      <div className="flex w-1/2 flex-col gap-4 p-4">
-        <h1 className="text-lg font-bold">Outerbase Cloud</h1>
-
-        <div>
-          <p>Connect to our cloud services</p>
-          <ul className="">
-            <li>Benefit 1</li>
-            <li>Benefit 2</li>
-            <li>Benefit 3</li>
-            <li>Benefit 4</li>
-          </ul>
-        </div>
-
-        <div>
-          <Button
-            variant="primary"
-            className="inline-flex"
-            size="lg"
-            href="/signin"
-            as="link"
-          >
-            Sign In
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex w-1/2 flex-col gap-2 p-4">
-      <div className="mb-4">
-        <h1 className="text-2xl font-bold">Outerbase Cloud</h1>
-        <p>Please select the workspace</p>
-      </div>
-
-      {(workspaces ?? []).map((workspace) => {
-        return (
-          <Link
-            key={workspace.id}
-            className="bg-secondary hover:border-primary flex cursor-pointer items-center gap-2 rounded border border-2 p-4 text-base"
-            href={`/w/${workspace.short_name}/new-base/mysql`}
-          >
-            <Folder weight="bold" size={20} />
-            {workspace.name}
-          </Link>
-        );
-      })}
-    </div>
-  );
-}
+import { CloudDriverSupportOnly } from "../cloud-support-only";
 
 export default function LocalMySQLNewBasePage() {
-  return (
-    <div className="container">
-      <div className="my-8 flex">
-        <Button variant="secondary" size="lg" href="/local" as="link">
-          <ArrowLeft />
-          Back
-        </Button>
-      </div>
-
-      <div className="mb-8 p-4 text-xl leading-8">
-        Running MySQL from a browser is not possible.
-        <br /> Please use the desktop app or our cloud services instead.
-      </div>
-
-      <div className="mb-8 flex">
-        <LocalMySQLCloudSection />
-
-        <div className="flex w-1/2 flex-col gap-4 p-4">
-          <div>
-            <h1 className="text-2xl font-bold">Desktop App</h1>
-            <p>Connect locally with our desktop app</p>
-          </div>
-
-          <Link
-            href="https://github.com/outerbase/studio-desktop/releases"
-            className="relative w-full"
-          >
-            <img
-              src="/outerbase-banner.jpg"
-              alt=""
-              className="w-full rounded-lg"
-            />
-
-            <div className="bg-opacity-50 absolute right-0 bottom-0 left-0 flex cursor-pointer flex-col gap-2 rounded-lg bg-black p-4 text-white">
-              <div className="text-2xl font-bold">Download the desktop app</div>
-              <p className="text-base">
-                Outerbase Studio Desktop is a lightweight Electron wrapper for
-                the Outerbase Studio web version. It enables support for drivers
-                that aren&apos;t feasible in a browser environment, such as
-                MySQL and PostgreSQL.
-              </p>
-            </div>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+  return <CloudDriverSupportOnly type="mysql" />;
 }
diff --git a/src/app/(outerbase)/local/new-base/postgres/page.tsx b/src/app/(outerbase)/local/new-base/postgres/page.tsx
new file mode 100644
index 00000000..fa4b7333
--- /dev/null
+++ b/src/app/(outerbase)/local/new-base/postgres/page.tsx
@@ -0,0 +1,6 @@
+"use client";
+import { CloudDriverSupportOnly } from "../cloud-support-only";
+
+export default function LocalMySQLNewBasePage() {
+  return <CloudDriverSupportOnly type="postgres" />;
+}
diff --git a/src/app/(outerbase)/session-provider.tsx b/src/app/(outerbase)/session-provider.tsx
index 58442ab1..21e2fae6 100644
--- a/src/app/(outerbase)/session-provider.tsx
+++ b/src/app/(outerbase)/session-provider.tsx
@@ -50,6 +50,7 @@ export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
       revalidateIfStale: false,
       revalidateOnFocus: false,
       revalidateOnReconnect: false,
+      errorRetryCount: 0,
     }
   );
 
diff --git a/src/app/(outerbase)/workspace-provider.tsx b/src/app/(outerbase)/workspace-provider.tsx
index 4c93e9e0..6b568daa 100644
--- a/src/app/(outerbase)/workspace-provider.tsx
+++ b/src/app/(outerbase)/workspace-provider.tsx
@@ -57,6 +57,7 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
       revalidateIfStale: false,
       revalidateOnFocus: false,
       revalidateOnReconnect: false,
+      errorRetryCount: 0,
     }
   );
 

From aab9cf3fb557de700dcfcf521b3f5b5d796c8998 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Wed, 26 Feb 2025 21:06:41 +0700
Subject: [PATCH 103/106] chord: basic validate new base

---
 .../local/edit-base/[baseId]/page.tsx         | 14 ++++++
 .../local/new-base/[driver]/page.tsx          | 13 ++++++
 .../[workspaceId]/new-base/[driver]/page.tsx  |  9 ++++
 .../connection-config-editor/index.tsx        | 45 +++++++++++++++++--
 src/components/label-input.tsx                | 10 ++++-
 5 files changed, 85 insertions(+), 6 deletions(-)

diff --git a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
index 48fac9fa..faaa144e 100644
--- a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
+++ b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
@@ -3,6 +3,7 @@ import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
+  validateTemplate,
 } from "@/components/connection-config-editor";
 import { ConnectionTemplateDictionary } from "@/components/connection-config-editor/template";
 import { Button } from "@/components/orbit/button";
@@ -18,9 +19,17 @@ export default function LocalEditBasePage() {
   const [loading, setLoading] = useState(true);
   const [databaseName, setDatabaseName] = useState("");
   const [template, setTemplate] = useState<ConnectionTemplateList>();
+  const [validateErrors, setValidateErrors] = useState<Record<string, string>>(
+    {}
+  );
 
   const onSave = useCallback(async () => {
     if (!template?.localTo) return;
+
+    const errors = validateTemplate(value, template);
+    setValidateErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
     await updateLocalConnection(baseId, template.localTo(value));
     router.push("/local");
   }, [template, value, router, baseId]);
@@ -28,6 +37,10 @@ export default function LocalEditBasePage() {
   const onConnect = useCallback(async () => {
     if (!template?.localTo) return;
 
+    const errors = validateTemplate(value, template);
+    setValidateErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
     setLoading(true);
     const tmp = await updateLocalConnection(baseId, template.localTo(value));
     router.push(
@@ -78,6 +91,7 @@ export default function LocalEditBasePage() {
           template={template}
           value={value}
           onChange={setValue}
+          errors={validateErrors}
         />
       </div>
 
diff --git a/src/app/(outerbase)/local/new-base/[driver]/page.tsx b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
index 7f57649d..13803018 100644
--- a/src/app/(outerbase)/local/new-base/[driver]/page.tsx
+++ b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
@@ -3,6 +3,7 @@
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
+  validateTemplate,
 } from "@/components/connection-config-editor";
 import { ConnectionTemplateDictionary } from "@/components/connection-config-editor/template";
 import { Button } from "@/components/orbit/button";
@@ -18,6 +19,9 @@ export default function LocalNewBasePage() {
   const router = useRouter();
   const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
   const [loading, setLoading] = useState(false);
+  const [validateErrors, setValidateErrors] = useState<Record<string, string>>(
+    {}
+  );
 
   const template = useMemo(() => {
     return ConnectionTemplateDictionary[driver];
@@ -26,6 +30,10 @@ export default function LocalNewBasePage() {
   const onSave = useCallback(async () => {
     if (!template?.localTo) return;
 
+    const errors = validateTemplate(value, template);
+    setValidateErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
     setLoading(true);
     await createLocalConnection(template.localTo(value));
     router.push("/local");
@@ -34,6 +42,10 @@ export default function LocalNewBasePage() {
   const onConnect = useCallback(async () => {
     if (!template?.localTo) return;
 
+    const errors = validateTemplate(value, template);
+    setValidateErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
     setLoading(true);
     const newConnection = await createLocalConnection(template.localTo(value));
 
@@ -70,6 +82,7 @@ export default function LocalNewBasePage() {
           template={template}
           value={value}
           onChange={setValue}
+          errors={validateErrors}
         />
       </div>
 
diff --git a/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
index f1480f0c..67f28f61 100644
--- a/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
@@ -2,6 +2,7 @@
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
+  validateTemplate,
 } from "@/components/connection-config-editor";
 import { ConnectionTemplateDictionary } from "@/components/connection-config-editor/template";
 import { Button } from "@/components/orbit/button";
@@ -25,6 +26,9 @@ export default function WorkspaceNewBasePage() {
   const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [validateErrors, setValidateErrors] = useState<Record<string, string>>(
+    {}
+  );
 
   const template = useMemo(() => {
     return ConnectionTemplateDictionary[driver];
@@ -34,6 +38,10 @@ export default function WorkspaceNewBasePage() {
     (overrideRedirect?: string) => {
       if (!template.remoteFrom || !template.remoteTo) return;
 
+      const errors = validateTemplate(value, template);
+      setValidateErrors(errors);
+      if (Object.keys(errors).length > 0) return;
+
       setLoading(true);
       setError("");
 
@@ -103,6 +111,7 @@ export default function WorkspaceNewBasePage() {
           template={template}
           value={value}
           onChange={setValue}
+          errors={validateErrors}
         />
       </div>
 
diff --git a/src/components/connection-config-editor/index.tsx b/src/components/connection-config-editor/index.tsx
index 1f426586..de14fe3b 100644
--- a/src/components/connection-config-editor/index.tsx
+++ b/src/components/connection-config-editor/index.tsx
@@ -19,17 +19,41 @@ import { Label } from "../orbit/label";
 import { Toggle } from "../orbit/toggle";
 import { Textarea } from "../ui/textarea";
 
+export function validateTemplate(
+  value: CommonConnectionConfig,
+  template: ConnectionTemplateList
+): Record<string, string> {
+  const templateRow = template.template;
+
+  const validationErrors: Record<string, string> = {};
+
+  if (!value.name) {
+    validationErrors["name"] = "Name is required";
+  }
+
+  for (const row of templateRow) {
+    for (const column of row.columns) {
+      if (column.required && !value[column.name]) {
+        validationErrors[column.name] = `${column.label} is required`;
+      }
+    }
+  }
+
+  return validationErrors;
+}
+
 export function ConnectionConfigEditor({
   template,
   onChange,
   value,
+  errors,
 }: ConnectionConfigEditorProps) {
   const templateRow = template.template;
 
   return (
     <div className="flex w-full gap-4">
       <div className="flex w-1/2 grow-0 flex-col gap-4">
-        <Label title="Name">
+        <Label title="Name" requiredDescription={errors?.["name"]} required>
           <Input
             autoFocus
             size="lg"
@@ -53,7 +77,11 @@ export function ConnectionConfigEditor({
 
                 if (column.type === "text" || column.type === "password") {
                   content = (
-                    <Label title={column.label} required={column.required}>
+                    <Label
+                      title={column.label}
+                      required={column.required}
+                      requiredDescription={errors?.[column.name]}
+                    >
                       <Input
                         size="lg"
                         type={column.type}
@@ -71,7 +99,11 @@ export function ConnectionConfigEditor({
                   );
                 } else if (column.type === "textarea") {
                   content = (
-                    <Label title={column.label} required={column.required}>
+                    <Label
+                      title={column.label}
+                      required={column.required}
+                      requiredDescription={errors?.[column.name]}
+                    >
                       <Textarea
                         rows={4}
                         className="resize-none"
@@ -107,7 +139,11 @@ export function ConnectionConfigEditor({
                   );
                 } else if (column.type === "file") {
                   content = (
-                    <Label title={column.label} required={column.required}>
+                    <Label
+                      title={column.label}
+                      required={column.required}
+                      requiredDescription={errors?.[column.name]}
+                    >
                       <div>
                         <CommonDialogProvider>
                           <FileHandlerPicker
@@ -179,4 +215,5 @@ interface ConnectionConfigEditorProps {
   template: ConnectionTemplateList;
   value: CommonConnectionConfig;
   onChange: (value: CommonConnectionConfig) => void;
+  errors?: Record<string, string>;
 }
diff --git a/src/components/label-input.tsx b/src/components/label-input.tsx
index bded7b85..cde07cc9 100644
--- a/src/components/label-input.tsx
+++ b/src/components/label-input.tsx
@@ -1,10 +1,16 @@
 import { Input, InputProps } from "./orbit/input";
 import { Label } from "./orbit/label";
 
-export default function LabelInput(props: InputProps & { label: string }) {
+export default function LabelInput(
+  props: InputProps & { label: string; requiredDescription?: string }
+) {
   return (
     <div className="flex flex-col gap-2">
-      <Label title={props.label} required={props.required}>
+      <Label
+        title={props.label}
+        required={props.required}
+        requiredDescription="required"
+      >
         <Input {...props} />
       </Label>
     </div>

From 7a9099434631e1aa9fc86bd9dfe3376d008fae20 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Wed, 26 Feb 2025 21:16:22 +0700
Subject: [PATCH 104/106] feat: color resource card based on remote connection
 type

---
 src/app/(outerbase)/local/page.tsx           |  1 +
 src/app/(outerbase)/resource-item-helper.tsx |  5 ++++-
 src/components/resource-card/utils.tsx       | 11 ++++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app/(outerbase)/local/page.tsx b/src/app/(outerbase)/local/page.tsx
index 63759e15..44ca3efa 100644
--- a/src/app/(outerbase)/local/page.tsx
+++ b/src/app/(outerbase)/local/page.tsx
@@ -38,6 +38,7 @@ export default function LocalConnectionPage() {
         id: conn.id,
         type: conn.content.driver,
         status: "",
+        color: conn.content.label || "default",
       } as ResourceItemProps;
     });
   }, [localBases]);
diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
index b075cb0c..071564d4 100644
--- a/src/app/(outerbase)/resource-item-helper.tsx
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -2,6 +2,7 @@ import { Input } from "@/components/orbit/input";
 import { MenuBar } from "@/components/orbit/menu-bar";
 import ResourceCard from "@/components/resource-card";
 import {
+  getDatabaseColor,
   getDatabaseFriendlyName,
   getDatabaseIcon,
   getDatabaseVisual,
@@ -36,6 +37,7 @@ export interface ResourceItemProps {
   href: string;
   status?: string;
   lastUsed: number;
+  color?: string;
 }
 
 export function getResourceItemPropsFromBase(
@@ -46,6 +48,7 @@ export function getResourceItemPropsFromBase(
     id: base.id,
     type: base.sources[0]?.type ?? "database",
     name: base.name,
+    color: getDatabaseColor(base.sources[0]?.type ?? "database"),
     href: `/w/${workspace.short_name}/${base.short_name}`,
     lastUsed: base.last_analytics_event?.created_at
       ? new Date(base.last_analytics_event?.created_at).getTime()
@@ -243,7 +246,7 @@ export function ResourceItemList({
                   <ResourceCard
                     key={resource.id}
                     className="w-full"
-                    color="default"
+                    color={resource.color ?? "default"}
                     icon={getDatabaseIcon(resource.type)}
                     href={resource.href}
                     title={resource.name}
diff --git a/src/components/resource-card/utils.tsx b/src/components/resource-card/utils.tsx
index 15e064b7..5b66c1ef 100644
--- a/src/components/resource-card/utils.tsx
+++ b/src/components/resource-card/utils.tsx
@@ -4,6 +4,7 @@ import {
   PostgreIcon,
   RqliteIcon,
   SQLiteIcon,
+  TursoIcon,
 } from "../icons/outerbase-icon";
 import { CloudflareIcon, StarbaseIcon, ValTownIcon } from "./icon";
 import {
@@ -41,8 +42,9 @@ export function getDatabaseIcon(type: string) {
   if (type === "cloudflare" || type === "cloudflare-d1") return CloudflareIcon;
   if (type === "valtown") return ValTownIcon;
   if (type === "starbasedb" || type === "starbase") return StarbaseIcon;
-  if (type === "libsql" || type === "turso") return SQLiteIcon;
+  if (type === "libsql" || type === "turso") return TursoIcon;
   if (type === "rqlite") return RqliteIcon;
+  if (type === "sqlite") return SQLiteIcon;
   if (type === "board") return ChartBar;
 
   return Database;
@@ -56,3 +58,10 @@ export function getDatabaseVisual(type: string) {
 
   return GeneralVisual;
 }
+
+export function getDatabaseColor(type: string) {
+  if (type === "cloudflare" || type === "cloudflare-d1") return "yellow";
+  if (type === "starbasedb" || type === "starbase") return "rainbow";
+  if (type === "libsql" || type === "turso") return "green";
+  return "default";
+}

From bd98dd419df1963621811b53ca816ed6f2707f41 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Wed, 26 Feb 2025 21:17:44 +0700
Subject: [PATCH 105/106] chord: remove redirect to connect

---
 src/components/my-studio.tsx | 2 +-
 tsconfig.json                | 8 +-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/my-studio.tsx b/src/components/my-studio.tsx
index d36e2f1b..991451f8 100644
--- a/src/components/my-studio.tsx
+++ b/src/components/my-studio.tsx
@@ -32,7 +32,7 @@ function MyStudioInternal({
   const dialet = driver.getFlags().dialect;
 
   const goBack = useCallback(() => {
-    router.push("/connect");
+    router.push("/");
   }, [router]);
 
   const extensions = useMemo(() => {
diff --git a/tsconfig.json b/tsconfig.json
index 59e78d2f..97a8b2c6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,12 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "src/app/(theme)/connect/saved-connection-storage.ts.back"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }

From 286bf014f1e2b94dfc0aafd4759439a0c8e6ee9b Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Thu, 27 Feb 2025 07:50:59 +0700
Subject: [PATCH 106/106] bump version to 0.10.0

---
 package-lock.json | 8 ++++----
 package.json      | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7b22bef8..91cc6e27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "@libsqlstudio/studio",
-  "version": "0.9.2",
+  "name": "@outerbase/studio",
+  "version": "0.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "@libsqlstudio/studio",
-      "version": "0.9.2",
+      "name": "@outerbase/studio",
+      "version": "0.10",
       "dependencies": {
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-sql": "^6.5.5",
diff --git a/package.json b/package.json
index 77fcc8e8..bf0951ce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@libsqlstudio/studio",
-  "version": "0.9.2",
+  "name": "@outerbase/studio",
+  "version": "0.10",
   "private": false,
   "scripts": {
     "dev": "next dev -p 3008",