feat: add hideTabs option and fix styles

Author: ytkimirti

src/components/databrowser/components/databrowser-instance.tsx

@@ -9,7 +9,7 @@ import { KeysProvider } from "../hooks/use-keys"
 export const DatabrowserInstance = ({ hidden }: { hidden?: boolean }) => {
   return (
     <KeysProvider>
-      <div className={cn("h-full rounded-md bg-zinc-100", hidden && "hidden")}>
+      <div className={cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden")}>
         <PanelGroup
           autoSaveId="persistence"
           direction="horizontal"

src/components/databrowser/components/databrowser-tabs.tsx

@@ -13,7 +13,7 @@ const Tab = ({ id }: { id: TabId }) => {
     <div
       onClick={() => selectTab(id)}
       className={cn(
-        "flex h-9 translate-y-[1px] cursor-pointer items-center gap-2 rounded-t-lg border border-zinc-200 px-3 text-[13px] transition-colors",
+        "flex h-9 cursor-pointer items-center gap-2 rounded-t-lg border border-zinc-200 px-3 text-[13px] transition-colors",
         id === selectedTab
           ? "border-b-white bg-white text-zinc-900"
           : "bg-zinc-100 hover:bg-zinc-50"
@@ -22,10 +22,10 @@ const Tab = ({ id }: { id: TabId }) => {
       {tabs[id].selectedKey ? (
         <>
           <TabTypeIcon selectedKey={tabs[id].selectedKey} />
-          <span className="max-w-32 truncate">{tabs[id].selectedKey}</span>
+          <span className="max-w-32 truncate whitespace-nowrap">{tabs[id].selectedKey}</span>
         </>
       ) : (
-        "New Tab"
+        <span className="whitespace-nowrap">New Tab</span>
       )}
       {/* Only show close button if there's more than one tab */}
       {Object.keys(tabs).length > 1 && (
@@ -47,19 +47,23 @@ export const DatabrowserTabs = () => {
   const { tabs, addTab } = useDatabrowserStore()
 
   return (
-    <div className="mb-2 flex items-center gap-1 border-b border-zinc-200">
-      {Object.keys(tabs).map((id) => (
-        <Tab id={id as TabId} key={id} />
-      ))}
-      <Button
-        variant="secondary"
-        size="icon-sm"
-        onClick={addTab}
-        className="mr-1 flex-shrink-0"
-        title="Add new tab"
-      >
-        <IconPlus className="text-zinc-500" size={16} />
-      </Button>
+    <div className="relative mb-2 shrink-0">
+      <div className="absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" />
+
+      <div className="scrollbar-hide flex translate-y-[1px] items-center gap-1 overflow-x-scroll pb-[1px] [&::-webkit-scrollbar]:hidden">
+        {Object.keys(tabs).map((id) => (
+          <Tab id={id as TabId} key={id} />
+        ))}
+        <Button
+          variant="secondary"
+          size="icon-sm"
+          onClick={addTab}
+          className="mr-1 flex-shrink-0"
+          title="Add new tab"
+        >
+          <IconPlus className="text-zinc-500" size={16} />
+        </Button>
+      </div>
     </div>
   )
 }

src/components/databrowser/components/sidebar/index.tsx

@@ -68,7 +68,7 @@ export function Sidebar() {
         <LoadingSkeleton />
       ) : keys.length > 0 ? (
         // Infinite scroll already has a loader at the bottom
-        <InfiniteScroll query={query} disableRoundedInherit>
+        <InfiniteScroll query={query} disableRoundedInherit className="min-h-0">
           <KeysList />
         </InfiniteScroll>
       ) : (

src/components/databrowser/components/sidebar/infinite-scroll.tsx

@@ -3,6 +3,7 @@ import { IconLoader2 } from "@tabler/icons-react"
 import type { UseInfiniteQueryResult } from "@tanstack/react-query"
 
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { cn } from "@/lib/utils"
 
 export const InfiniteScroll = ({
   query,
@@ -25,9 +26,12 @@ export const InfiniteScroll = ({
   return (
     <ScrollArea
       type="always"
-      className="block h-full w-full overflow-visible rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all"
       onScroll={handleScroll}
       {...props}
+      className={cn(
+        "block h-full w-full overflow-visible rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all",
+        props.className
+      )}
     >
       {children}
 

src/components/databrowser/index.tsx

@@ -13,7 +13,11 @@ import { DatabrowserInstance } from "./components/databrowser-instance"
 import { DatabrowserTabs } from "./components/databrowser-tabs"
 import { TabIdProvider } from "@/tab-provider"
 
-export const RedisBrowser = ({ token, url }: RedisCredentials) => {
+export const RedisBrowser = ({
+  token,
+  url,
+  hideTabs,
+}: RedisCredentials & { hideTabs?: boolean }) => {
   const credentials = useMemo(() => ({ token, url }), [token, url])
 
   useEffect(() => {
@@ -26,8 +30,11 @@ export const RedisBrowser = ({ token, url }: RedisCredentials) => {
         <DatabrowserProvider>
           <TooltipProvider>
             {/* ups-db is the custom class used to prefix every style in the css bundle */}
-            <div className="ups-db" style={{ height: "100%" }}>
-              <DatabrowserTabs />
+            <div
+              className="ups-db"
+              style={{ height: "100%", display: "flex", flexDirection: "column" }}
+            >
+              {!hideTabs && <DatabrowserTabs />}
               <DatabrowserInstances />
             </div>
           </TooltipProvider>