diff --git a/src/components/gui/sidebar-tab.tsx b/src/components/gui/sidebar-tab.tsx index 834ab13..53674b4 100644 --- a/src/components/gui/sidebar-tab.tsx +++ b/src/components/gui/sidebar-tab.tsx @@ -1,7 +1,7 @@ import { useConfig } from "@/context/config-provider"; import { useTheme } from "@/context/theme-provider"; import { cn } from "@/lib/utils"; -import { ReactElement, useState } from "react"; +import { ReactElement, useMemo, useState } from "react"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import Link from "next/link"; import { @@ -35,8 +35,38 @@ export default function SidebarTab({ tabs }: Readonly) { 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 ( -
+