initial design

src/extensions/data-catalog/components/data-catalog-entry-modal.tsx

@@ -0,0 +1,137 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useCallback, useState } from "react";
+import DataCatalogDriver, { DataCatalogTermDefinition } from "../driver";
+
+interface Props {
+  schemaName: string;
+  driver?: DataCatalogDriver;
+  open: boolean;
+  onClose: (open: boolean) => void;
+  selectedTermDefinition: string;
+}
+
+export function DataCatalogEntryModal({
+  open,
+  onClose,
+  schemaName,
+  driver,
+  selectedTermDefinition,
+}: Props) {
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState<
+    Exclude<DataCatalogTermDefinition, "id">
+  >({
+    id: "",
+    name: "",
+    otherName: "",
+    definition: "",
+  });
+
+  const updateTermDefinition = useCallback(() => {
+    setLoading(true);
+    let data = {
+      ...formData,
+      id: String(Date.now() * 1000),
+    };
+    if (selectedTermDefinition) {
+      data = formData;
+    }
+    driver
+      ?.updateTermDefinition(schemaName, data)
+      .then((r) => {
+        console.log(r);
+      })
+      .catch(() => {
+        setLoading(false);
+      })
+      .finally(() => {
+        setLoading(false);
+        onClose(false);
+      });
+  }, [formData, driver, onClose, selectedTermDefinition, schemaName]);
+
+  const onChangeValue = useCallback(
+    (value: string, key: keyof DataCatalogTermDefinition) => {
+      setFormData(() => ({
+        ...formData,
+        [key]: value,
+      }));
+    },
+    [formData]
+  );
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button size="sm">Add Entry</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Add Term</DialogTitle>
+          <DialogDescription>
+            Add terms to your Data Dictionary to help your team and AI
+            understand important business terminology. For example Customer
+            Acquisition Cost, Churn, Activation Rate.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="items-center gap-4">
+            <Label className="text-right text-xs">
+              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.otherName}
+              className="col-span-3"
+              placeholder="Add other names"
+              onChange={(e) => {
+                onChangeValue(e.currentTarget.value, "otherName");
+              }}
+            />
+          </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 d definition"
+              onChange={(e) => {
+                onChangeValue(e.currentTarget.value, "definition");
+              }}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button onClick={updateTermDefinition} type="submit">
+            Add Entry
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/extensions/data-catalog/components/empty-definition.tsx

@@ -0,0 +1,60 @@
+import { useTheme } from "@/context/theme-provider";
+import Image from "next/image";
+import { useMemo } from "react";
+
+export default function EmptyTermDefinition() {
+  const { theme } = useTheme();
+
+  const EmptyTerm = useMemo(() => {
+    return [
+      {
+        src: `/extension/term-${theme}.png`,
+        title: "Create a term",
+        describtion:
+          "Start by adding a term or acronym your organization regularly uses.",
+      },
+      {
+        src: `/extension/definition-${theme}.png`,
+        title: "Add a definition",
+        describtion:
+          "Give your term context and define it using plaintext or SQL.",
+      },
+      {
+        src: `/extension/chart-${theme}.png`,
+        title: "Reference your entry",
+        describtion:
+          "Now, your entry can be referenced while chatting with EZQL.",
+      },
+    ];
+  }, [theme]);
+
+  return (
+    <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
+      {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="relative h-full w-full overflow-hidden rounded-md">
+                <Image
+                  src={item.src}
+                  alt={item.title}
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </div>
+            </div>
+            <div className="flex gap-2 text-xl font-semibold">
+              <div className="bg-accent h-[32px] w-[32px] rounded text-center dark:bg-neutral-900">
+                {index + 1}
+              </div>
+              {item.title}
+            </div>
+            <div className="mt-1 ml-10 text-sm font-normal">
+              {item.describtion}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/extensions/data-catalog/data-catalog-tab.tsx

@@ -0,0 +1,55 @@
+import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
+import { Button } from "@/components/ui/button";
+import { useConfig } from "@/context/config-provider";
+import { useSchema } from "@/context/schema-provider";
+import { useMemo, useState } from "react";
+import DataCatalogExtension from ".";
+import { DataCatalogEntryModal } from "./components/data-catalog-entry-modal";
+import EmptyTermDefinition from "./components/empty-definition";
+
+export default function DataCatalogTab() {
+  const { currentSchemaName } = useSchema();
+  const { extensions } = useConfig();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [selectedTermDefinition, setSeletedTermDefinition] = useState("");
+  const dataCatalogExtension =
+    extensions.getExtension<DataCatalogExtension>("data-catalog");
+
+  const driver = dataCatalogExtension?.driver;
+  const currentTermDefinition = useMemo(() => {
+    const definitions = driver?.getTermDefinitions(currentSchemaName);
+    return definitions;
+  }, [driver, currentSchemaName]);
+
+  return (
+    <div className="flex h-full flex-1 flex-col">
+      <div className="border-b p-1">
+        <Toolbar>
+          <div>Data Catalog</div>
+          <ToolbarFiller />
+          <DataCatalogEntryModal
+            selectedTermDefinition={selectedTermDefinition}
+            open={open}
+            onClose={() => setOpen(false)}
+            driver={driver}
+            schemaName={currentSchemaName}
+          />
+        </Toolbar>
+      </div>
+      <div className="flex-1 gap-5 overflow-scroll p-10">
+        <div className="w-[450px]">
+          <div className="text-3xl font-bold">
+            Get started with Data Catalog
+          </div>
+          <div className="text-sm">
+            Provide explanations for terminology in your schema. EZQL will use
+            this to make running queries more efficient and accurate.
+          </div>
+        </div>
+        <EmptyTermDefinition />
+        <Button className="mt-10 mb-10">Create your first entry</Button>
+      </div>
+    </div>
+  );
+}

src/extensions/data-catalog/sidebar.tsx

@@ -1,11 +1,16 @@
 import { SidebarMenuHeader, SidebarMenuItem } from "@/components/sidebar-menu";
 import { Database } from "@phosphor-icons/react";
-import { dataCatalogModelTab } from ".";
+import { dataCatalogModelTab, dataCatalogTab } from ".";
 
 export default function DataCatalogSidebar() {
   return (
     <div className="flex flex-1 flex-col">
       <SidebarMenuHeader text="Data Catalog" />
+      <SidebarMenuItem
+        text="Data Catalog"
+        onClick={() => dataCatalogTab.open({})}
+        icon={Database}
+      />
       <SidebarMenuItem
         text="Data Model"
         onClick={() => dataCatalogModelTab.open({})}