standardize db icons for sql

frontend/src/components/databases/namespace-icons.ts

@@ -0,0 +1,11 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+export {
+  BookMarkedIcon as IndexIcon,
+  ColumnsIcon as ColumnIcon,
+  DatabaseIcon,
+  EyeIcon as ViewIcon,
+  KeyIcon as PrimaryKeyIcon,
+  LayersIcon as SchemaIcon,
+  Table2Icon as TableIcon,
+} from "lucide-react";

frontend/src/components/datasources/datasources.tsx

@@ -3,16 +3,7 @@
 import { CommandList } from "cmdk";
 import { atom, useAtomValue, useSetAtom } from "jotai";
 import { sortBy } from "lodash-es";
-import {
-  DatabaseIcon,
-  EyeIcon,
-  PaintRollerIcon,
-  PlusIcon,
-  PlusSquareIcon,
-  RefreshCwIcon,
-  Table2Icon,
-  XIcon,
-} from "lucide-react";
+import { PlusIcon, PlusSquareIcon, RefreshCwIcon, XIcon } from "lucide-react";
 import React from "react";
 import { dbDisplayName } from "@/components/databases/display";
 import { EngineVariable } from "@/components/databases/engine-variable";
@@ -59,6 +50,12 @@ import { useAsyncData } from "@/hooks/useAsyncData";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
+import {
+  DatabaseIcon,
+  SchemaIcon,
+  TableIcon,
+  ViewIcon,
+} from "../databases/namespace-icons";
 import { ErrorBoundary } from "../editor/boundary/ErrorBoundary";
 import { PythonIcon } from "../editor/cell/code/icons";
 import { useAddCodeToNewCell } from "../editor/cell/useAddCell";
@@ -420,7 +417,7 @@ const SchemaItem: React.FC<{
         value={uniqueValue}
       >
         <RotatingChevron isExpanded={isExpanded} />
-        <PaintRollerIcon
+        <SchemaIcon
           className={cn(
             "h-4 w-4 text-muted-foreground",
             isSelected && isExpanded && "text-foreground",
@@ -634,7 +631,7 @@ const DatasetTableItem: React.FC<{
       return;
     }
 
-    const TableTypeIcon = table.type === "table" ? Table2Icon : EyeIcon;
+    const TableTypeIcon = table.type === "table" ? TableIcon : ViewIcon;
     return (
       <TableTypeIcon
         className="h-3 w-3"

frontend/src/core/codemirror/language/languages/sql/renderers.tsx

@@ -1,16 +1,16 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import { HashIcon, InfoIcon } from "lucide-react";
+import type React from "react";
 import {
-  ColumnsIcon,
+  ColumnIcon,
   DatabaseIcon,
-  EyeIcon,
-  HashIcon,
-  InfoIcon,
-  KeyIcon,
-  LayersIcon,
+  IndexIcon,
+  PrimaryKeyIcon,
+  SchemaIcon,
   TableIcon,
-} from "lucide-react";
-import type React from "react";
+  ViewIcon,
+} from "@/components/databases/namespace-icons";
 import { DATA_TYPE_ICON } from "@/components/datasets/icons";
 import { Badge } from "@/components/ui/badge";
 import type {
@@ -114,7 +114,7 @@ const getDataTypeColorClass = (dataType: DataType): string => {
 export const renderTableInfo = (table: DataTable): React.ReactNode => {
   const tableIcon =
     table.type === "view" ? (
-      <EyeIcon className="w-4 h-4 text-[var(--blue-9)]" />
+      <ViewIcon className="w-4 h-4 text-[var(--blue-9)]" />
     ) : (
       <TableIcon className="w-4 h-4 text-[var(--green-9)]" />
     );
@@ -202,7 +202,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
         <div className="grid grid-cols-2 gap-2 py-2">
           {table.num_columns != null && (
             <StatisticItem
-              icon={<ColumnsIcon className="w-3 h-3 text-[var(--slate-9)]" />}
+              icon={<ColumnIcon className="w-3 h-3 text-[var(--slate-9)]" />}
               text={`${table.num_columns} columns`}
             />
           )}
@@ -224,7 +224,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
           {hasPrimaryKeys && (
             <div className="flex flex-row gap-1">
               <div className="flex items-center gap-1">
-                <KeyIcon className="w-3 h-3 text-[var(--amber-9)]" />
+                <PrimaryKeyIcon className="w-3 h-3 text-[var(--amber-9)]" />
                 <span className="text-xs font-medium text-[var(--slate-11)]">
                   Primary Keys:
                 </span>
@@ -244,7 +244,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
           {hasIndexes && (
             <div className="flex flex-row gap-1">
               <div className="flex items-center gap-1 mb-1">
-                <LayersIcon className="w-3 h-3 text-[var(--purple-9)]" />
+                <IndexIcon className="w-3 h-3 text-[var(--purple-9)]" />
                 <span className="text-xs font-medium text-[var(--slate-11)]">
                   Indexes:
                 </span>
@@ -345,7 +345,7 @@ export const renderDatabaseInfo = (database: Database): React.ReactNode => {
       className="flex items-center justify-between text-xs rounded hover:bg-[var(--slate-3)]"
     >
       <div className="flex items-center gap-2">
-        <LayersIcon className="w-3 h-3 text-[var(--slate-9)]" />
+        <SchemaIcon className="w-3 h-3 text-[var(--slate-9)]" />
         <span>{schema.name}</span>
       </div>
       <Badge variant="outline" className="text-xs">
@@ -382,7 +382,7 @@ export const renderDatabaseInfo = (database: Database): React.ReactNode => {
       {/* Schema Statistics */}
       <div className="py-2">
         <StatisticItem
-          icon={<LayersIcon className="w-3 h-3 text-[var(--slate-9)]" />}
+          icon={<SchemaIcon className="w-3 h-3 text-[var(--slate-9)]" />}
           text={`${database.schemas.length} schema${database.schemas.length === 1 ? "" : "s"}`}
         />
       </div>
@@ -418,7 +418,7 @@ export const renderSchemaInfo = (schema: DatabaseSchema): React.ReactNode => {
     >
       <div className="flex items-center gap-2">
         {table.type === "view" ? (
-          <EyeIcon className="w-3 h-3 text-[var(--blue-9)]" />
+          <ViewIcon className="w-3 h-3 text-[var(--blue-9)]" />
         ) : (
           <TableIcon className="w-3 h-3 text-[var(--green-9)]" />
         )}
@@ -440,7 +440,7 @@ export const renderSchemaInfo = (schema: DatabaseSchema): React.ReactNode => {
   return (
     <div className={CONTAINER_STYLES}>
       <SectionHeader
-        icon={<LayersIcon className="w-4 h-4 text-[var(--green-9)]" />}
+        icon={<SchemaIcon className="w-4 h-4 text-[var(--green-9)]" />}
         title={schema.name}
         badge={schemaBadge}
       />