@upstash/react-redis-browser 0.2.7 → 0.2.9

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/databrowser/index.tsx
-import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef6 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef7 } from "react";
 
 // src/dark-mode-context.tsx
 import { createContext, useContext } from "react";
@@ -260,7 +260,7 @@ var DatabrowserProvider = ({
           removeItem: () => {
           }
         },
-        version: 2,
+        version: 3,
         // @ts-expect-error Reset the store for < v1
         migrate: (originalState, version) => {
           const state = originalState;
@@ -273,6 +273,21 @@ var DatabrowserProvider = ({
               tabs: state.tabs.map(([id, data]) => [id, { ...data, id }])
             };
           }
+          if (version === 2) {
+            return {
+              ...state,
+              tabs: state.tabs.map(([id, data]) => {
+                const oldData = data;
+                return [
+                  id,
+                  {
+                    ...data,
+                    selectedKeys: oldData.selectedKey ? [oldData.selectedKey] : []
+                  }
+                ];
+              })
+            };
+          }
           return state;
         }
       })
@@ -302,7 +317,7 @@ var storeCreator = (set, get) => ({
     const id = crypto.randomUUID();
     const newTabData = {
       id,
-      selectedKey: void 0,
+      selectedKeys: [],
       search: { key: "", type: void 0 },
       pinned: false
     };
@@ -395,16 +410,19 @@ var storeCreator = (set, get) => ({
   selectTab: (id) => {
     set({ selectedTab: id });
   },
-  getSelectedKey: (tabId) => {
-    return get().tabs.find(([id]) => id === tabId)?.[1]?.selectedKey;
+  getSelectedKeys: (tabId) => {
+    return get().tabs.find(([id]) => id === tabId)?.[1]?.selectedKeys ?? [];
   },
   setSelectedKey: (tabId, key) => {
+    get().setSelectedKeys(tabId, key ? [key] : []);
+  },
+  setSelectedKeys: (tabId, keys) => {
     set((old) => {
       const tabIndex = old.tabs.findIndex(([id]) => id === tabId);
       if (tabIndex === -1) return old;
       const newTabs = [...old.tabs];
       const [, tabData] = newTabs[tabIndex];
-      newTabs[tabIndex] = [tabId, { ...tabData, selectedKey: key, selectedListItem: void 0 }];
+      newTabs[tabIndex] = [tabId, { ...tabData, selectedKeys: keys, selectedListItem: void 0 }];
       return { ...old, tabs: newTabs };
     });
   },
@@ -485,6 +503,7 @@ var useTab = () => {
     selectedTab,
     tabs,
     setSelectedKey,
+    setSelectedKeys,
     setSelectedListItem,
     setSearch,
     setSearchKey,
@@ -497,11 +516,14 @@ var useTab = () => {
   return useMemo3(
     () => ({
       active: selectedTab === tabId,
-      selectedKey: tabData.selectedKey,
+      selectedKey: tabData.selectedKeys[0],
+      // Backwards compatibility - first selected key
+      selectedKeys: tabData.selectedKeys,
       selectedListItem: tabData.selectedListItem,
       search: tabData.search,
       pinned: tabData.pinned,
       setSelectedKey: (key) => setSelectedKey(tabId, key),
+      setSelectedKeys: (keys) => setSelectedKeys(tabId, keys),
       setSelectedListItem: (item) => setSelectedListItem(tabId, item),
       setSearch: (search) => setSearch(tabId, search),
       setSearchKey: (key) => setSearchKey(tabId, key),
@@ -3836,8 +3858,8 @@ var HeaderTTLBadge = ({ dataKey }) => {
     }
   );
 };
-var Badge = ({ children, label }) => /* @__PURE__ */ jsxs3("div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700", children: [
-  /* @__PURE__ */ jsx11("span", { className: "text-zinc-500", children: label }),
+var Badge = ({ children, label }) => /* @__PURE__ */ jsxs3("div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700 dark:bg-zinc-200", children: [
+  /* @__PURE__ */ jsx11("span", { className: "text-zinc-500 dark:text-zinc-600", children: label }),
   /* @__PURE__ */ jsx11("span", { className: "font-medium", children })
 ] });
 
@@ -4441,16 +4463,20 @@ function DeleteAlertDialog({
   onDeleteConfirm,
   open,
   onOpenChange,
-  deletionType
+  deletionType,
+  count: count2 = 1
 }) {
+  const isPlural = count2 > 1;
+  const itemLabel = deletionType === "item" ? "Item" : "Key";
+  const itemsLabel = deletionType === "item" ? "Items" : "Keys";
   return /* @__PURE__ */ jsxs10(AlertDialog, { open, onOpenChange, children: [
     children && /* @__PURE__ */ jsx20(AlertDialogTrigger, { asChild: true, children }),
     /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
       /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx20(AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
+        /* @__PURE__ */ jsx20(AlertDialogTitle, { children: isPlural ? `Delete ${count2} ${itemsLabel}` : `Delete ${itemLabel}` }),
         /* @__PURE__ */ jsxs10(AlertDialogDescription, { className: "mt-5", children: [
-          "Are you sure you want to delete this ",
-          deletionType,
+          "Are you sure you want to delete ",
+          isPlural ? `these ${count2} ${deletionType}s` : `this ${deletionType}`,
           "?",
           /* @__PURE__ */ jsx20("br", {}),
           "This action cannot be undone."
@@ -4696,6 +4722,36 @@ var InfiniteScroll = ({
 // src/components/databrowser/components/display/display-header.tsx
 import { IconPlus } from "@tabler/icons-react";
 
+// src/components/ui/tooltip.tsx
+import * as React10 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx24(TooltipPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx24(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 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",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var SimpleTooltip = ({
+  content,
+  children
+}) => {
+  if (!content) return /* @__PURE__ */ jsx24(Fragment3, { children });
+  return /* @__PURE__ */ jsxs14(Tooltip, { delayDuration: 400, children: [
+    /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx24("div", { children }) }),
+    /* @__PURE__ */ jsx24(TooltipContent, { side: "top", children: content })
+  ] });
+};
+
 // src/types/index.ts
 var DATA_TYPES = ["string", "list", "hash", "set", "zset", "json", "stream"];
 var DATA_TYPE_NAMES = {
@@ -4717,15 +4773,15 @@ import {
   IconList,
   IconQuote
 } from "@tabler/icons-react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var iconsMap = {
-  string: /* @__PURE__ */ jsx24(IconQuote, { size: 15, stroke: 1.2 }),
-  set: /* @__PURE__ */ jsx24(IconLayersIntersect, { size: 15, stroke: 1.2 }),
-  hash: /* @__PURE__ */ jsx24(IconHash, { size: 15, stroke: 1.2 }),
-  json: /* @__PURE__ */ jsx24(IconCodeDots, { size: 15, stroke: 1.2 }),
-  zset: /* @__PURE__ */ jsx24(IconArrowsSort, { size: 15, stroke: 1.2 }),
-  list: /* @__PURE__ */ jsx24(IconList, { size: 15, stroke: 1.2 }),
-  stream: /* @__PURE__ */ jsx24(IconList, { size: 15, stroke: 1.2 })
+  string: /* @__PURE__ */ jsx25(IconQuote, { size: 15, stroke: 1.2 }),
+  set: /* @__PURE__ */ jsx25(IconLayersIntersect, { size: 15, stroke: 1.2 }),
+  hash: /* @__PURE__ */ jsx25(IconHash, { size: 15, stroke: 1.2 }),
+  json: /* @__PURE__ */ jsx25(IconCodeDots, { size: 15, stroke: 1.2 }),
+  zset: /* @__PURE__ */ jsx25(IconArrowsSort, { size: 15, stroke: 1.2 }),
+  list: /* @__PURE__ */ jsx25(IconList, { size: 15, stroke: 1.2 }),
+  stream: /* @__PURE__ */ jsx25(IconList, { size: 15, stroke: 1.2 })
 };
 var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
   variants: {
@@ -4749,20 +4805,20 @@ var tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-cent
   }
 });
 function TypeTag({ className, variant, type }) {
-  return /* @__PURE__ */ jsx24("span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
+  return /* @__PURE__ */ jsx25("span", { className: cn(tagVariants({ variant, type, className })), children: type === "icon" ? iconsMap[variant] : DATA_TYPE_NAMES[variant] });
 }
 
 // src/components/databrowser/components/display/key-actions.tsx
 import { IconDotsVertical } from "@tabler/icons-react";
 
 // src/components/ui/dropdown-menu.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2, DotFilledIcon as DotFilledIcon2 } from "@radix-ui/react-icons";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -4774,12 +4830,12 @@ var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx25(ChevronRightIcon2, { className: "ml-auto" })
+      /* @__PURE__ */ jsx26(ChevronRightIcon2, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -4791,7 +4847,7 @@ var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx25(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx25(
+var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx26(DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -4805,12 +4861,12 @@ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DropdownMenuItem = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Item,
   {
     ref,
     className: cn(
-      "data-[disabled]:opacity-50[&>svg]:size-4 relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none [&>svg]:shrink-0",
+      "data-[disabled]:opacity-50[&>svg]:size-4 relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none [&>svg]:shrink-0",
       inset && "pl-8",
       className
     ),
@@ -4818,7 +4874,7 @@ var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -4829,13 +4885,13 @@ var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checke
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx25("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx25(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx25(CheckIcon2, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx26("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx26(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx26(CheckIcon2, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -4845,13 +4901,13 @@ var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx25("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx25(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx25(DotFilledIcon2, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx26("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx26(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx26(DotFilledIcon2, { className: "h-2 w-2 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -4860,7 +4916,7 @@ var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -4870,18 +4926,18 @@ var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) =>
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx25("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+  return /* @__PURE__ */ jsx26("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/databrowser/components/display/key-actions.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function KeyActions({ dataKey, content }) {
   const { mutateAsync: deleteKey } = useDeleteKey();
-  return /* @__PURE__ */ jsxs15(DropdownMenu, { modal: false, children: [
-    /* @__PURE__ */ jsx26(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ jsx26(IconDotsVertical, { className: "size-4 text-zinc-500" }) }) }),
-    /* @__PURE__ */ jsxs15(DropdownMenuContent, { className: "", align: "end", children: [
-      content && /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs16(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ jsx27(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx27(Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ jsx27(IconDotsVertical, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
+    /* @__PURE__ */ jsxs16(DropdownMenuContent, { className: "", align: "end", children: [
+      content && /* @__PURE__ */ jsx27(
         DropdownMenuItem,
         {
           onClick: () => {
@@ -4893,7 +4949,7 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx27(
         DropdownMenuItem,
         {
           onClick: () => {
@@ -4902,12 +4958,12 @@ function KeyActions({ dataKey, content }) {
           children: "Copy key"
         }
       ),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx27(
         DeleteAlertDialog,
         {
           deletionType: "key",
           onDeleteConfirm: async () => await deleteKey(dataKey),
-          children: /* @__PURE__ */ jsx26(
+          children: /* @__PURE__ */ jsx27(
             DropdownMenuItem,
             {
               className: "text-red-500 focus:bg-red-500 focus:text-white",
@@ -4922,7 +4978,7 @@ function KeyActions({ dataKey, content }) {
 }
 
 // src/components/databrowser/components/display/display-header.tsx
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var DisplayHeader = ({
   dataKey,
   type,
@@ -4932,19 +4988,19 @@ var DisplayHeader = ({
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
   };
-  return /* @__PURE__ */ jsxs16("div", { className: "rounded-lg bg-zinc-100", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx27("h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx27("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx27("span", { className: "font-semibold", children: dataKey }) }),
-      /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
-        type !== "string" && type !== "json" && /* @__PURE__ */ jsx27(Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ jsx27(IconPlus, { className: "size-4 text-zinc-500" }) }),
-        /* @__PURE__ */ jsx27(KeyActions, { dataKey, content })
+  return /* @__PURE__ */ jsxs17("div", { className: "rounded-lg bg-zinc-100", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx28("h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ jsx28("span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ jsx28("span", { className: "font-semibold", children: dataKey }) }),
+      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1", children: [
+        type !== "string" && type !== "json" && /* @__PURE__ */ jsx28(SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ jsx28(Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ jsx28(IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
+        /* @__PURE__ */ jsx28(KeyActions, { dataKey, content })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "flex h-10 flex-wrap items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx27(TypeTag, { variant: type, type: "badge" }),
-      /* @__PURE__ */ jsx27(SizeBadge, { dataKey }),
-      /* @__PURE__ */ jsx27(LengthBadge, { dataKey, type, content }),
-      /* @__PURE__ */ jsx27(HeaderTTLBadge, { dataKey })
+    /* @__PURE__ */ jsxs17("div", { className: "flex h-10 flex-wrap items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx28(TypeTag, { variant: type, type: "badge" }),
+      /* @__PURE__ */ jsx28(SizeBadge, { dataKey }),
+      /* @__PURE__ */ jsx28(LengthBadge, { dataKey, type, content }),
+      /* @__PURE__ */ jsx28(HeaderTTLBadge, { dataKey })
     ] })
   ] });
 };
@@ -4952,36 +5008,6 @@ var DisplayHeader = ({
 // src/components/databrowser/components/display/display-list-edit.tsx
 import { Controller as Controller2, FormProvider, useForm as useForm2, useFormContext } from "react-hook-form";
 
-// src/components/ui/tooltip.tsx
-import * as React11 from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
-var Tooltip = TooltipPrimitive.Root;
-var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx28(TooltipPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ jsx28(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 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",
-      className
-    ),
-    ...props
-  }
-) }));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-var SimpleTooltip = ({
-  content,
-  children
-}) => {
-  if (!content) return /* @__PURE__ */ jsx28(Fragment3, { children });
-  return /* @__PURE__ */ jsxs17(Tooltip, { delayDuration: 400, children: [
-    /* @__PURE__ */ jsx28(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx28("div", { children }) }),
-    /* @__PURE__ */ jsx28(TooltipContent, { side: "top", children: content })
-  ] });
-};
-
 // src/components/databrowser/hooks/use-fetch-hash-ttl.ts
 import { useQuery as useQuery7 } from "@tanstack/react-query";
 var FETCH_HASH_FIELD_TTLS_QUERY_KEY = "fetch-hash-field-ttls";
@@ -5179,7 +5205,7 @@ var CustomEditor = ({
   return /* @__PURE__ */ jsxs19(
     "div",
     {
-      className: cn("group/editor relative", height === void 0 && "h-full p-2"),
+      className: cn("group/editor relative", height === void 0 && "h-full"),
       style: { height },
       children: [
         isTest ? /* @__PURE__ */ jsx32("input", { "aria-label": "editor", value, onChange: (e) => onChange(e.target.value) }) : editor,
@@ -5306,24 +5332,15 @@ var ListEditForm = ({
     });
     setSelectedListItem(void 0);
   });
-  return /* @__PURE__ */ jsx34(FormProvider, { ...form, children: /* @__PURE__ */ jsxs20("form", { onSubmit, className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsx34(FormProvider, { ...form, children: /* @__PURE__ */ jsxs20("form", { onSubmit, className: "flex h-full flex-col gap-2", children: [
     /* @__PURE__ */ jsxs20("div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ jsx34(
-        FormItem,
-        {
-          readOnly: type === "stream",
-          name: "key",
-          height: type === "set" ? 250 : 100,
-          label: keyLabel,
-          data: itemKey
-        }
-      ),
-      type === "zset" ? /* @__PURE__ */ jsx34(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx34(
+      type === "zset" && /* @__PURE__ */ jsx34(NumberFormItem, { name: "value", label: valueLabel }),
+      type !== "list" && /* @__PURE__ */ jsx34(FormItem, { readOnly: type === "stream", name: "key", label: keyLabel, data: itemKey }),
+      type !== "set" && type !== "zset" && /* @__PURE__ */ jsx34(
         FormItem,
         {
           readOnly: type === "stream",
           name: "value",
-          height: type === "list" ? 250 : 100,
           label: valueLabel,
           data: itemValue ?? ""
         }
@@ -5405,14 +5422,23 @@ var FormItem = ({
     readOnly,
     data
   });
-  return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
+  return /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col gap-1", !height && "h-full"), children: [
     /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 text-xs", children: [
       /* @__PURE__ */ jsx34("span", { className: "font-medium text-zinc-700", children: label }),
       " ",
       /* @__PURE__ */ jsx34("span", { className: "text-zinc-300", children: "/" }),
       selector
     ] }),
-    /* @__PURE__ */ jsx34("div", { className: "overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm", children: editor })
+    /* @__PURE__ */ jsx34(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden rounded-md border border-zinc-300 bg-white p-2 shadow-sm",
+          !height && "h-full"
+        ),
+        children: editor
+      }
+    )
   ] });
 };
 
@@ -5473,7 +5499,9 @@ var ListItems = ({
       onClick: () => {
         setSelectedListItem({ key });
       },
-      className: cn("h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100"),
+      className: cn(
+        "h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100 dark:border-b-zinc-200 dark:hover:bg-zinc-200"
+      ),
       children: [
         /* @__PURE__ */ jsx36(
           "td",
@@ -5495,7 +5523,7 @@ var ListItems = ({
         type !== "stream" && /* @__PURE__ */ jsx36(
           "td",
           {
-            className: "w-0 min-w-0 p-0",
+            className: "w-0 min-w-0 p-0 pr-2",
             onClick: (e) => {
               e.stopPropagation();
             },
@@ -5566,7 +5594,7 @@ var EditorDisplayForm = ({
   return /* @__PURE__ */ jsxs22(Fragment6, { children: [
     /* @__PURE__ */ jsxs22("div", { className: "flex grow flex-col gap-1", children: [
       /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center gap-2", children: type === "json" ? /* @__PURE__ */ jsx37("div", {}) : selector }),
-      /* @__PURE__ */ jsx37("div", { className: "grow rounded-md border border-zinc-300 bg-white p-1 dark:!bg-[#192321]", children: editor })
+      /* @__PURE__ */ jsx37("div", { className: "grow rounded-md border border-zinc-300 bg-white p-2", children: editor })
     ] }),
     /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsxs22("div", { className: "ml-auto flex gap-2", children: [
       form.formState.isDirty && /* @__PURE__ */ jsx37(Button, { onClick: handleCancel, children: "Cancel" }),
@@ -5594,9 +5622,6 @@ var DataDisplay = () => {
   return /* @__PURE__ */ jsx38("div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ jsx38("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx38("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx38("span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx38("div", {}) : /* @__PURE__ */ jsx38(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx38(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx38(ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
-// src/components/databrowser/components/sidebar/index.tsx
-import { IconRefresh } from "@tabler/icons-react";
-
 // src/components/databrowser/components/add-key-modal.tsx
 import { useState as useState9 } from "react";
 import { DialogDescription as DialogDescription2 } from "@radix-ui/react-dialog";
@@ -5737,7 +5762,7 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ jsx40(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx40(Button, { variant: "primary", size: "icon-sm", "aria-label": "Add key", children: /* @__PURE__ */ jsx40(PlusIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx40(DialogTrigger, { children: /* @__PURE__ */ jsx40(SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ jsx40(Button, { variant: "primary", size: "icon-sm", "data-testid": "add-key-button", children: /* @__PURE__ */ jsx40(PlusIcon, { className: "size-4" }) }) }) }),
         /* @__PURE__ */ jsxs24(DialogContent, { className: "max-w-[400px]", children: [
           /* @__PURE__ */ jsx40(DialogHeader, { children: /* @__PURE__ */ jsx40(DialogTitle, { children: "Create new key" }) }),
           /* @__PURE__ */ jsx40("div", { className: "sr-only", children: /* @__PURE__ */ jsx40(DialogDescription2, { children: "Create new key" }) }),
@@ -5798,6 +5823,9 @@ var Empty = () => {
   ] }) });
 };
 
+// src/components/databrowser/components/sidebar/keys-list.tsx
+import { useRef as useRef3 } from "react";
+
 // src/components/databrowser/components/sidebar-context-menu.tsx
 import { useState as useState10 } from "react";
 import { IconCopy as IconCopy3, IconExternalLink as IconExternalLink2, IconTrash as IconTrash3 } from "@tabler/icons-react";
@@ -5806,19 +5834,22 @@ import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs26 } from "react/jsx-r
 var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
   const [isAlertOpen, setAlertOpen] = useState10(false);
-  const [dataKey, setDataKey] = useState10("");
-  const { addTab, setSelectedKey, selectTab, setSearch } = useDatabrowserStore();
-  const { search: currentSearch } = useTab();
+  const [contextKeys, setContextKeys] = useState10([]);
+  const { addTab, setSelectedKey: setSelectedKeyGlobal, selectTab, setSearch } = useDatabrowserStore();
+  const { search: currentSearch, selectedKeys, setSelectedKey } = useTab();
   return /* @__PURE__ */ jsxs26(Fragment8, { children: [
     /* @__PURE__ */ jsx42(
       DeleteAlertDialog,
       {
         deletionType: "key",
+        count: contextKeys.length,
         open: isAlertOpen,
         onOpenChange: setAlertOpen,
         onDeleteConfirm: (e) => {
           e.stopPropagation();
-          deleteKey(dataKey);
+          for (const key of contextKeys) {
+            deleteKey(key);
+          }
           setAlertOpen(false);
         }
       }
@@ -5831,7 +5862,13 @@ var SidebarContextMenu = ({ children }) => {
             const el = e.target;
             const key = el.closest("[data-key]");
             if (key && key instanceof HTMLElement && key.dataset.key !== void 0) {
-              setDataKey(key.dataset.key);
+              const clickedKey = key.dataset.key;
+              if (selectedKeys.includes(clickedKey)) {
+                setContextKeys(selectedKeys);
+              } else {
+                setSelectedKey(clickedKey);
+                setContextKeys([clickedKey]);
+              }
             } else {
               throw new Error("Key not found");
             }
@@ -5844,12 +5881,13 @@ var SidebarContextMenu = ({ children }) => {
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(dataKey);
+              navigator.clipboard.writeText(contextKeys[0]);
               toast({
                 description: "Key copied to clipboard"
               });
             },
             className: "gap-2",
+            disabled: contextKeys.length !== 1,
             children: [
               /* @__PURE__ */ jsx42(IconCopy3, { size: 16 }),
               "Copy key"
@@ -5861,11 +5899,12 @@ var SidebarContextMenu = ({ children }) => {
           {
             onClick: () => {
               const newTabId = addTab();
-              setSelectedKey(newTabId, dataKey);
+              setSelectedKeyGlobal(newTabId, contextKeys[0]);
               setSearch(newTabId, currentSearch);
               selectTab(newTabId);
             },
             className: "gap-2",
+            disabled: contextKeys.length !== 1,
             children: [
               /* @__PURE__ */ jsx42(IconExternalLink2, { size: 16 }),
               "Open in new tab"
@@ -5875,7 +5914,7 @@ var SidebarContextMenu = ({ children }) => {
         /* @__PURE__ */ jsx42(ContextMenuSeparator3, {}),
         /* @__PURE__ */ jsxs26(ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
           /* @__PURE__ */ jsx42(IconTrash3, { size: 16 }),
-          "Delete key"
+          contextKeys.length > 1 ? `Delete ${contextKeys.length} keys` : "Delete key"
         ] })
       ] })
     ] })
@@ -5886,7 +5925,23 @@ var SidebarContextMenu = ({ children }) => {
 import { Fragment as Fragment9, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ jsx43(SidebarContextMenu, { children: /* @__PURE__ */ jsx43(Fragment9, { children: keys.map((data, i) => /* @__PURE__ */ jsx43(KeyItem, { nextKey: keys.at(i + 1)?.[0] ?? "", data }, data[0])) }) });
+  const lastClickedIndexRef = useRef3(null);
+  return /* @__PURE__ */ jsx43(SidebarContextMenu, { children: /* @__PURE__ */ jsxs27(Fragment9, { children: [
+    /* @__PURE__ */ jsx43("div", { className: "h-px" }),
+    keys.map((data, i) => /* @__PURE__ */ jsxs27(Fragment9, { children: [
+      /* @__PURE__ */ jsx43(
+        KeyItem,
+        {
+          index: i,
+          data,
+          allKeys: keys,
+          lastClickedIndexRef
+        },
+        data[0]
+      ),
+      i !== keys.length - 1 && /* @__PURE__ */ jsx43("div", { className: "-z-10 mx-2 h-px bg-zinc-100 dark:bg-zinc-200" })
+    ] }))
+  ] }) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5897,11 +5952,33 @@ var keyStyles = {
   list: "border-orange-400 !bg-orange-50 text-orange-900",
   stream: "border-green-400 !bg-green-50 text-green-900"
 };
-var KeyItem = ({ data, nextKey }) => {
-  const { selectedKey, setSelectedKey } = useTab();
+var KeyItem = ({
+  data,
+  index,
+  allKeys,
+  lastClickedIndexRef
+}) => {
+  const { selectedKeys, setSelectedKeys, setSelectedKey } = useTab();
   const [dataKey, dataType] = data;
-  const isKeySelected = selectedKey === dataKey;
-  const isNextKeySelected = selectedKey === nextKey;
+  const isKeySelected = selectedKeys.includes(dataKey);
+  const handleClick = (e) => {
+    if (e.shiftKey && lastClickedIndexRef.current !== null) {
+      const start = Math.min(lastClickedIndexRef.current, index);
+      const end = Math.max(lastClickedIndexRef.current, index);
+      const rangeKeys = allKeys.slice(start, end + 1).map(([key]) => key);
+      setSelectedKeys(rangeKeys);
+    } else if (e.metaKey || e.ctrlKey) {
+      if (isKeySelected) {
+        setSelectedKeys(selectedKeys.filter((k) => k !== dataKey));
+      } else {
+        setSelectedKeys([...selectedKeys, dataKey]);
+      }
+      lastClickedIndexRef.current = index;
+    } else {
+      setSelectedKey(dataKey);
+      lastClickedIndexRef.current = index;
+    }
+  };
   return /* @__PURE__ */ jsxs27(
     Button,
     {
@@ -5909,24 +5986,51 @@ var KeyItem = ({ data, nextKey }) => {
       variant: isKeySelected ? "default" : "ghost",
       className: cn(
         "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 !ring-0 focus-visible:bg-zinc-50",
-        "select-none border border-transparent text-left",
+        "-my-px select-none border border-transparent text-left",
         isKeySelected && "shadow-sm",
         isKeySelected && keyStyles[dataType]
       ),
-      onClick: () => setSelectedKey(dataKey),
+      onClick: handleClick,
       children: [
         /* @__PURE__ */ jsx43(TypeTag, { variant: dataType, type: "icon" }),
-        /* @__PURE__ */ jsx43("p", { className: "truncate whitespace-nowrap", children: dataKey }),
-        !isKeySelected && !isNextKeySelected && /* @__PURE__ */ jsx43("span", { className: "absolute -bottom-px left-3 right-3 h-px bg-zinc-100" })
+        /* @__PURE__ */ jsx43("p", { className: "truncate whitespace-nowrap", children: dataKey })
       ]
     }
   );
 };
 
+// src/components/databrowser/components/sidebar/reload-button.tsx
+import { useState as useState11 } from "react";
+import { IconLoader2 as IconLoader22, IconRefresh } from "@tabler/icons-react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var ReloadButton = ({
+  onClick,
+  isLoading: isLoadingProp
+}) => {
+  const [isLoading, setIsLoading] = useState11(false);
+  const handleClick = () => {
+    setIsLoading(true);
+    onClick();
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 350);
+  };
+  return /* @__PURE__ */ jsx44("div", { children: /* @__PURE__ */ jsx44(SimpleTooltip, { content: "Refresh", children: /* @__PURE__ */ jsx44(
+    Button,
+    {
+      variant: "outline",
+      size: "icon-sm",
+      onClick: handleClick,
+      disabled: isLoading || isLoadingProp,
+      children: isLoading ? /* @__PURE__ */ jsx44(IconLoader22, { className: "animate-spin text-zinc-500", size: 16 }) : /* @__PURE__ */ jsx44(IconRefresh, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
+    }
+  ) }) });
+};
+
 // src/components/databrowser/components/sidebar/search-input.tsx
-import { useEffect as useEffect11, useRef as useRef3, useState as useState11 } from "react";
+import { useEffect as useEffect11, useRef as useRef4, useState as useState12 } from "react";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 var dedupeSearchHistory = (history) => {
   const seen = /* @__PURE__ */ new Set();
   return history.filter((item) => {
@@ -5938,11 +6042,11 @@ var dedupeSearchHistory = (history) => {
 var SearchInput = () => {
   const { setSearchKey, search } = useTab();
   const { searchHistory, addSearchHistory } = useDatabrowserStore();
-  const [state, setState] = useState11(search.key);
-  const [isFocus, setIsFocus] = useState11(false);
-  const [focusedIndex, setFocusedIndex] = useState11(-1);
-  const inputRef = useRef3(null);
-  const historyItemRefs = useRef3([]);
+  const [state, setState] = useState12(search.key);
+  const [isFocus, setIsFocus] = useState12(false);
+  const [focusedIndex, setFocusedIndex] = useState12(-1);
+  const inputRef = useRef4(null);
+  const historyItemRefs = useRef4([]);
   const handleSubmit = (value) => {
     if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
     addSearchHistory(value);
@@ -5984,12 +6088,12 @@ var SearchInput = () => {
   };
   return /* @__PURE__ */ jsxs28("div", { className: "relative grow", children: [
     /* @__PURE__ */ jsxs28(Popover, { open: isFocus && filteredHistory.length > 0, children: [
-      /* @__PURE__ */ jsx44(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx44("div", { children: /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx45(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx45("div", { className: "h-8 rounded-md rounded-l-none border border-zinc-300 font-normal", children: /* @__PURE__ */ jsx45(
         Input,
         {
           ref: inputRef,
           placeholder: "Search",
-          className: "rounded-l-none border-zinc-300 font-normal",
+          className: "h-full rounded-l-none border-none pr-6",
           onKeyDown: handleKeyDown,
           onChange: (e) => {
             setState(e.currentTarget.value);
@@ -6003,7 +6107,7 @@ var SearchInput = () => {
           onBlur: () => setIsFocus(false)
         }
       ) }) }),
-      /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx45(
         PopoverContent,
         {
           className: "w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900",
@@ -6012,7 +6116,7 @@ var SearchInput = () => {
             e.preventDefault();
             e.stopPropagation();
           },
-          children: filteredHistory.map((item, index) => /* @__PURE__ */ jsx44("div", { className: "w-full py-[3px]", children: /* @__PURE__ */ jsx44(
+          children: filteredHistory.map((item, index) => /* @__PURE__ */ jsx45("div", { className: "w-full py-[3px]", children: /* @__PURE__ */ jsx45(
             "button",
             {
               ref: (el) => {
@@ -6039,8 +6143,8 @@ var SearchInput = () => {
           setState("");
         },
         children: [
-          /* @__PURE__ */ jsx44(IconX, { size: 16 }),
-          /* @__PURE__ */ jsx44("span", { className: "sr-only", children: "Clear" })
+          /* @__PURE__ */ jsx45(IconX, { size: 16 }),
+          /* @__PURE__ */ jsx45("span", { className: "sr-only", children: "Clear" })
         ]
       }
     ),
@@ -6049,15 +6153,15 @@ var SearchInput = () => {
 };
 
 // src/components/databrowser/components/sidebar/skeleton-buttons.tsx
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULT_SKELETON_COUNT = 6;
-var LoadingSkeleton = () => /* @__PURE__ */ jsx45("div", { className: "block h-full w-full rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ jsxs29("div", { className: "flex h-10 items-center gap-2 px-3", children: [
-  /* @__PURE__ */ jsx45(Skeleton, { className: "size-5 shrink-0 rounded" }),
-  /* @__PURE__ */ jsx45(Skeleton, { className: "h-4 grow rounded" })
+var LoadingSkeleton = () => /* @__PURE__ */ jsx46("div", { className: "block h-full w-full rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all", children: Array.from({ length: DEFAULT_SKELETON_COUNT }).fill(0).map((_, idx) => /* @__PURE__ */ jsxs29("div", { className: "flex h-10 items-center gap-2 px-3", children: [
+  /* @__PURE__ */ jsx46(Skeleton, { className: "size-5 shrink-0 rounded" }),
+  /* @__PURE__ */ jsx46(Skeleton, { className: "h-4 grow rounded" })
 ] }, idx)) });
 
 // src/components/databrowser/components/sidebar/type-selector.tsx
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 var ALL_TYPES_KEY = "all";
 function DataTypeSelector() {
   const { search, setSearchType } = useTab();
@@ -6073,9 +6177,9 @@ function DataTypeSelector() {
       },
       value: search.type === void 0 ? ALL_TYPES_KEY : search.type,
       children: [
-        /* @__PURE__ */ jsx46(SelectTrigger, { className: "!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8", children: /* @__PURE__ */ jsx46(SelectValue, {}) }),
-        /* @__PURE__ */ jsx46(SelectContent, { children: /* @__PURE__ */ jsx46(SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
-          ([key, value]) => /* @__PURE__ */ jsx46(SelectItem, { value: key, children: value }, key)
+        /* @__PURE__ */ jsx47(SelectTrigger, { className: "!w-auto select-none whitespace-nowrap rounded-r-none border-r-0 border-zinc-300 pr-8", children: /* @__PURE__ */ jsx47(SelectValue, {}) }),
+        /* @__PURE__ */ jsx47(SelectContent, { children: /* @__PURE__ */ jsx47(SelectGroup, { children: [[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
+          ([key, value]) => /* @__PURE__ */ jsx47(SelectItem, { value: key, children: value }, key)
         ) }) })
       ]
     }
@@ -6083,19 +6187,17 @@ function DataTypeSelector() {
 }
 
 // src/components/databrowser/components/sidebar/index.tsx
-import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 function Sidebar() {
   const { keys, query } = useKeys();
   return /* @__PURE__ */ jsxs31("div", { className: "flex h-full flex-col gap-2 p-4", children: [
     /* @__PURE__ */ jsxs31("div", { className: "rounded-lg bg-zinc-100", children: [
       /* @__PURE__ */ jsxs31("div", { className: "flex h-10 items-center justify-between pl-1", children: [
-        /* @__PURE__ */ jsx47(DisplayDbSize, {}),
+        /* @__PURE__ */ jsx48(DisplayDbSize, {}),
         /* @__PURE__ */ jsxs31("div", { className: "flex gap-1", children: [
-          /* @__PURE__ */ jsx47(
-            Button,
+          /* @__PURE__ */ jsx48(
+            ReloadButton,
             {
-              "aria-label": "Refresh",
-              className: "h-7 w-7 px-0 text-zinc-500",
               onClick: () => {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_KEYS_QUERY_KEY]
@@ -6113,28 +6215,28 @@ function Sidebar() {
                   queryKey: [FETCH_KEY_TYPE_QUERY_KEY]
                 });
               },
-              children: /* @__PURE__ */ jsx47(Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ jsx47(IconRefresh, { size: 16 }) })
+              isLoading: query.isFetching
             }
           ),
-          /* @__PURE__ */ jsx47(AddKeyModal, {})
+          /* @__PURE__ */ jsx48(AddKeyModal, {})
         ] })
       ] }),
       /* @__PURE__ */ jsxs31("div", { className: "flex h-10 items-center", children: [
-        /* @__PURE__ */ jsx47(DataTypeSelector, {}),
-        /* @__PURE__ */ jsx47(SearchInput, {})
+        /* @__PURE__ */ jsx48(DataTypeSelector, {}),
+        /* @__PURE__ */ jsx48(SearchInput, {})
       ] })
     ] }),
-    query.isLoading && keys.length === 0 ? /* @__PURE__ */ jsx47(LoadingSkeleton, {}) : keys.length > 0 ? (
+    query.isLoading && keys.length === 0 ? /* @__PURE__ */ jsx48(LoadingSkeleton, {}) : keys.length > 0 ? (
       // Infinite scroll already has a loader at the bottom
-      /* @__PURE__ */ jsx47(InfiniteScroll, { query, disableRoundedInherit: true, className: "min-h-0", children: /* @__PURE__ */ jsx47(KeysList, {}) })
-    ) : /* @__PURE__ */ jsx47(Empty, {})
+      /* @__PURE__ */ jsx48(InfiniteScroll, { query, disableRoundedInherit: true, className: "min-h-0", children: /* @__PURE__ */ jsx48(KeysList, {}) })
+    ) : /* @__PURE__ */ jsx48(Empty, {})
   ] });
 }
 
 // src/components/databrowser/components/databrowser-instance.tsx
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
 var DatabrowserInstance = ({ hidden }) => {
-  return /* @__PURE__ */ jsx48(KeysProvider, { children: /* @__PURE__ */ jsxs32("div", { className: cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden"), children: [
+  return /* @__PURE__ */ jsx49(KeysProvider, { children: /* @__PURE__ */ jsxs32("div", { className: cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden"), children: [
     /* @__PURE__ */ jsxs32(
       PanelGroup,
       {
@@ -6142,18 +6244,18 @@ var DatabrowserInstance = ({ hidden }) => {
         direction: "horizontal",
         className: "h-full w-full gap-0.5 text-sm antialiased",
         children: [
-          /* @__PURE__ */ jsx48(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx48(Sidebar, {}) }),
-          /* @__PURE__ */ jsx48(PanelResizeHandle, { className: "group flex h-full w-3 justify-center", children: /* @__PURE__ */ jsx48("div", { className: "h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-500" }) }),
-          /* @__PURE__ */ jsx48(Panel, { minSize: 40, children: /* @__PURE__ */ jsx48(DataDisplay, {}) })
+          /* @__PURE__ */ jsx49(Panel, { defaultSize: 30, minSize: 30, children: /* @__PURE__ */ jsx49(Sidebar, {}) }),
+          /* @__PURE__ */ jsx49(PanelResizeHandle, { className: "group flex h-full w-3 justify-center", children: /* @__PURE__ */ jsx49("div", { className: "h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-500" }) }),
+          /* @__PURE__ */ jsx49(Panel, { minSize: 40, children: /* @__PURE__ */ jsx49(DataDisplay, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx48(Toaster, {})
+    /* @__PURE__ */ jsx49(Toaster, {})
   ] }) });
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { useCallback as useCallback3, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef5, useState as useState13 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef6, useState as useState14 } from "react";
 import {
   closestCenter,
   DndContext,
@@ -6171,8 +6273,8 @@ import { IconChevronDown as IconChevronDown2, IconMaximize, IconPlus as IconPlus
 import * as React13 from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
-var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive,
   {
     ref,
@@ -6185,8 +6287,8 @@ var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = CommandPrimitive.displayName;
 var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs33("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx49(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx49(
+  /* @__PURE__ */ jsx50(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx50(
     CommandPrimitive.Input,
     {
       ref,
@@ -6199,7 +6301,7 @@ var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive.List,
   {
     ref,
@@ -6208,9 +6310,9 @@ var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ jsx49(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ jsx50(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive.Group,
   {
     ref,
@@ -6222,7 +6324,7 @@ var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive.Separator,
   {
     ref,
@@ -6231,7 +6333,7 @@ var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   CommandPrimitive.Item,
   {
     ref,
@@ -6244,7 +6346,7 @@ var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx49("span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
+  return /* @__PURE__ */ jsx50("span", { className: cn("ml-auto text-xs tracking-widest text-zinc-500", className), ...props });
 };
 CommandShortcut.displayName = "CommandShortcut";
 
@@ -6259,19 +6361,19 @@ import {
 } from "@tabler/icons-react";
 
 // src/components/databrowser/components/tab-type-icon.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function TabTypeIcon({ selectedKey }) {
   const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
-  if (isLoading) return /* @__PURE__ */ jsx50(Skeleton, { className: "h-5 w-5 rounded" });
+  if (isLoading) return /* @__PURE__ */ jsx51(Skeleton, { className: "h-5 w-5 rounded" });
   if (!keyType || keyType === "none") return;
-  return /* @__PURE__ */ jsx50(TypeTag, { variant: keyType, type: "icon" });
+  return /* @__PURE__ */ jsx51(TypeTag, { variant: keyType, type: "icon" });
 }
 
 // src/hooks/use-overflow.ts
-import { useCallback as useCallback2, useEffect as useEffect12, useRef as useRef4, useState as useState12 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect12, useRef as useRef5, useState as useState13 } from "react";
 var useOverflow = () => {
-  const [isOverflow, setIsOverflow] = useState12(false);
-  const observerRef = useRef4(null);
+  const [isOverflow, setIsOverflow] = useState13(false);
+  const observerRef = useRef5(null);
   const ref = useCallback2((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
@@ -6294,7 +6396,7 @@ var useOverflow = () => {
 };
 
 // src/components/databrowser/components/tab.tsx
-import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
 var Tab = ({ id, isList }) => {
   const { active, search, selectedKey, pinned } = useTab();
   const {
@@ -6310,7 +6412,7 @@ var Tab = ({ id, isList }) => {
   const hasPinnedTabs = tabs.some(([, data]) => data.pinned);
   const { ref, isOverflow } = useOverflow();
   const label = search.key || selectedKey;
-  const iconNode = search.key ? /* @__PURE__ */ jsx51(IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx51(TabTypeIcon, { selectedKey }) : void 0;
+  const iconNode = search.key ? /* @__PURE__ */ jsx52(IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx52(TabTypeIcon, { selectedKey }) : void 0;
   const tabNode = /* @__PURE__ */ jsxs34(
     "div",
     {
@@ -6324,7 +6426,7 @@ var Tab = ({ id, isList }) => {
       ),
       children: [
         iconNode,
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           "span",
           {
             ref,
@@ -6332,23 +6434,23 @@ var Tab = ({ id, isList }) => {
             children: label || "New Tab"
           }
         ),
-        pinned && /* @__PURE__ */ jsx51(IconPin, { size: 14, className: "text-zinc-500" }),
-        tabs.length > 1 && !pinned && /* @__PURE__ */ jsx51(
+        pinned && /* @__PURE__ */ jsx52(IconPin, { size: 14, className: "text-zinc-500" }),
+        tabs.length > 1 && !pinned && /* @__PURE__ */ jsx52(
           "button",
           {
             onClick: (e) => {
               e.stopPropagation();
               removeTab(id);
             },
-            className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500",
-            children: /* @__PURE__ */ jsx51(IconX2, { size: 16 })
+            className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500 dark:text-zinc-400",
+            children: /* @__PURE__ */ jsx52(IconX2, { size: 16 })
           }
         )
       ]
     }
   );
   return /* @__PURE__ */ jsxs34(ContextMenu, { children: [
-    /* @__PURE__ */ jsx51(SimpleTooltip, { content: isOverflow ? label : void 0, children: /* @__PURE__ */ jsx51(ContextMenuTrigger, { asChild: true, children: tabNode }) }),
+    /* @__PURE__ */ jsx52(SimpleTooltip, { content: isOverflow ? label : void 0, children: /* @__PURE__ */ jsx52(ContextMenuTrigger, { asChild: true, children: tabNode }) }),
     /* @__PURE__ */ jsxs34(
       ContextMenuContent,
       {
@@ -6357,20 +6459,20 @@ var Tab = ({ id, isList }) => {
         },
         children: [
           /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => togglePinTab(id), className: "gap-2", children: [
-            /* @__PURE__ */ jsx51(IconPin, { size: 16 }),
+            /* @__PURE__ */ jsx52(IconPin, { size: 16 }),
             pinned ? "Unpin Tab" : "Pin Tab"
           ] }),
           /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => duplicateTab(id), className: "gap-2", children: [
-            /* @__PURE__ */ jsx51(IconCopyPlus, { size: 16 }),
+            /* @__PURE__ */ jsx52(IconCopyPlus, { size: 16 }),
             "Duplicate Tab"
           ] }),
-          /* @__PURE__ */ jsx51(ContextMenuSeparator, {}),
+          /* @__PURE__ */ jsx52(ContextMenuSeparator, {}),
           /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => forceRemoveTab(id), className: "gap-2", children: [
-            /* @__PURE__ */ jsx51(IconX2, { size: 16 }),
+            /* @__PURE__ */ jsx52(IconX2, { size: 16 }),
             "Close Tab"
           ] }),
           /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => closeOtherTabs(id), className: "gap-2", children: [
-            /* @__PURE__ */ jsx51(IconSquareX, { size: 16 }),
+            /* @__PURE__ */ jsx52(IconSquareX, { size: 16 }),
             "Close Other Tabs"
           ] }),
           /* @__PURE__ */ jsxs34(
@@ -6380,7 +6482,7 @@ var Tab = ({ id, isList }) => {
               className: "gap-2",
               disabled: !hasPinnedTabs,
               children: [
-                /* @__PURE__ */ jsx51(IconArrowsMinimize, { size: 16 }),
+                /* @__PURE__ */ jsx52(IconArrowsMinimize, { size: 16 }),
                 "Close All But Pinned"
               ]
             }
@@ -6392,10 +6494,10 @@ var Tab = ({ id, isList }) => {
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs35 } from "react/jsx-runtime";
 var SortableTab = ({ id }) => {
-  const [originalWidth, setOriginalWidth] = useState13(null);
-  const textRef = useRef5(null);
+  const [originalWidth, setOriginalWidth] = useState14(null);
+  const textRef = useRef6(null);
   const { tabs } = useDatabrowserStore();
   const tabData = tabs.find(([tabId]) => tabId === id)?.[1];
   const isPinned = tabData?.pinned;
@@ -6460,7 +6562,7 @@ var SortableTab = ({ id }) => {
       minWidth: originalWidth ? `${originalWidth}px` : void 0
     } : {}
   };
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     "div",
     {
       ref: measureRef,
@@ -6468,7 +6570,7 @@ var SortableTab = ({ id }) => {
       className: isDragging ? "cursor-grabbing" : isPinned ? "cursor-default" : "cursor-grab",
       ...attributes,
       ...isPinned ? {} : listeners2,
-      children: /* @__PURE__ */ jsx52(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx52(Tab, { id }) })
+      children: /* @__PURE__ */ jsx53(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx53(Tab, { id }) })
     }
   );
 };
@@ -6481,10 +6583,10 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
       return 0;
     });
   }, [tabs]);
-  const scrollRef = useRef5(null);
-  const [hasLeftShadow, setHasLeftShadow] = useState13(false);
-  const [hasRightShadow, setHasRightShadow] = useState13(false);
-  const [isOverflow, setIsOverflow] = useState13(false);
+  const scrollRef = useRef6(null);
+  const [hasLeftShadow, setHasLeftShadow] = useState14(false);
+  const [hasRightShadow, setHasRightShadow] = useState14(false);
+  const [isOverflow, setIsOverflow] = useState14(false);
   useEffect13(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -6544,16 +6646,16 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
     }
   };
   return /* @__PURE__ */ jsxs35("div", { className: "relative mb-2 shrink-0", children: [
-    /* @__PURE__ */ jsx52("div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
+    /* @__PURE__ */ jsx53("div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
     /* @__PURE__ */ jsxs35("div", { className: "flex translate-y-[1px] items-center gap-1", children: [
       /* @__PURE__ */ jsxs35("div", { className: "relative min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           "div",
           {
             className: `tabs-shadow-left pointer-events-none absolute left-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasLeftShadow ? "opacity-100" : "opacity-0"}`
           }
         ),
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           "div",
           {
             className: `tabs-shadow-right pointer-events-none absolute right-0 top-0 z-10 h-full w-6 transition-opacity duration-200 ${hasRightShadow ? "opacity-100" : "opacity-0"}`
@@ -6566,7 +6668,7 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
             onScroll: recomputeShadows,
             className: "scrollbar-hide flex min-w-0 flex-1 items-center gap-1 overflow-x-auto pb-[1px] [&::-webkit-scrollbar]:hidden",
             children: [
-              /* @__PURE__ */ jsx52(
+              /* @__PURE__ */ jsx53(
                 DndContext,
                 {
                   sensors,
@@ -6578,25 +6680,25 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
                       strategy: MeasuringStrategy.Always
                     }
                   },
-                  children: /* @__PURE__ */ jsx52(
+                  children: /* @__PURE__ */ jsx53(
                     SortableContext,
                     {
                       items: sortedTabs.map(([id]) => id),
                       strategy: horizontalListSortingStrategy,
-                      children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ jsx52(SortableTab, { id }, id))
+                      children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ jsx53(SortableTab, { id }, id))
                     }
                   )
                 }
               ),
-              !isOverflow && /* @__PURE__ */ jsx52("div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ jsx52(AddTabButton, {}) })
+              !isOverflow && /* @__PURE__ */ jsx53("div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ jsx53(AddTabButton, {}) })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1", children: [
-        isOverflow && /* @__PURE__ */ jsx52(AddTabButton, {}),
-        tabs.length > 1 && /* @__PURE__ */ jsx52(TabsListButton, { tabs, onSelectTab: selectTab }),
-        onFullScreenClick && /* @__PURE__ */ jsx52(
+        isOverflow && /* @__PURE__ */ jsx53(AddTabButton, {}),
+        tabs.length > 1 && /* @__PURE__ */ jsx53(TabsListButton, { tabs, onSelectTab: selectTab }),
+        onFullScreenClick && /* @__PURE__ */ jsx53(
           Button,
           {
             "aria-label": "Toggle fullscreen",
@@ -6604,7 +6706,7 @@ var DatabrowserTabs = ({ onFullScreenClick }) => {
             size: "icon-sm",
             onClick: onFullScreenClick,
             className: "flex-shrink-0 bg-blue-100 hover:bg-blue-600 hover:text-white",
-            children: /* @__PURE__ */ jsx52(IconMaximize, { size: 16 })
+            children: /* @__PURE__ */ jsx53(IconMaximize, { size: 16 })
           }
         )
       ] })
@@ -6623,15 +6725,15 @@ function AddTabButton() {
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
   };
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     Button,
     {
       "aria-label": "Add new tab",
       variant: "secondary",
       size: "icon-sm",
       onClick: handleAddTab,
-      className: "flex-shrink-0",
-      children: /* @__PURE__ */ jsx52(IconPlus2, { className: "text-zinc-500", size: 16 })
+      className: "flex-shrink-0 dark:bg-zinc-200",
+      children: /* @__PURE__ */ jsx53(IconPlus2, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
     }
   );
 }
@@ -6639,7 +6741,7 @@ function TabsListButton({
   tabs,
   onSelectTab
 }) {
-  const [open, setOpen] = useState13(false);
+  const [open, setOpen] = useState14(false);
   const sorted = useMemo8(() => {
     return [...tabs].sort(([, a], [, b]) => {
       if (a.pinned && !b.pinned) return -1;
@@ -6658,7 +6760,7 @@ function TabsListButton({
     }, 20);
   };
   return /* @__PURE__ */ jsxs35(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx52(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35(
+    /* @__PURE__ */ jsx53(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35(
       Button,
       {
         variant: "secondary",
@@ -6666,14 +6768,14 @@ function TabsListButton({
         className: "h-7 gap-1 px-2",
         "aria-label": "Search in tabs",
         children: [
-          /* @__PURE__ */ jsx52("span", { className: "text-xs text-zinc-600", children: tabs.length }),
-          /* @__PURE__ */ jsx52(IconChevronDown2, { className: "text-zinc-500", size: 16 })
+          /* @__PURE__ */ jsx53("span", { className: "text-xs text-zinc-600", children: tabs.length }),
+          /* @__PURE__ */ jsx53(IconChevronDown2, { className: "text-zinc-500", size: 16 })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx52(PopoverContent, { className: "w-96 p-0", align: "end", children: /* @__PURE__ */ jsx52(Command, { children: /* @__PURE__ */ jsxs35(CommandList, { children: [
-      /* @__PURE__ */ jsx52(CommandEmpty, { children: "No tabs" }),
-      /* @__PURE__ */ jsx52(CommandGroup, { children: sorted.map(([_id, item]) => /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx53(PopoverContent, { className: "w-96 p-0", align: "end", children: /* @__PURE__ */ jsx53(Command, { children: /* @__PURE__ */ jsxs35(CommandList, { children: [
+      /* @__PURE__ */ jsx53(CommandEmpty, { children: "No tabs" }),
+      /* @__PURE__ */ jsx53(CommandGroup, { children: sorted.map(([_id, item]) => /* @__PURE__ */ jsx53(
         CommandItem,
         {
           style: {
@@ -6683,7 +6785,7 @@ function TabsListButton({
           onSelect: () => {
             handleSelectTab(item.id);
           },
-          children: /* @__PURE__ */ jsx52(TabIdProvider, { value: _id, children: /* @__PURE__ */ jsx52(Tab, { id: _id, isList: true }) })
+          children: /* @__PURE__ */ jsx53(TabIdProvider, { value: _id, children: /* @__PURE__ */ jsx53(Tab, { id: _id, isList: true }) })
         },
         item.id
       )) })
@@ -6692,7 +6794,7 @@ function TabsListButton({
 }
 
 // src/components/databrowser/index.tsx
-import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs36 } from "react/jsx-runtime";
 var RedisBrowser = ({
   token,
   url,
@@ -6702,11 +6804,11 @@ var RedisBrowser = ({
   theme = "light"
 }) => {
   const credentials = useMemo9(() => ({ token, url }), [token, url]);
-  const rootRef = useRef6(null);
+  const rootRef = useRef7(null);
   useEffect14(() => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ jsx53(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx53(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx53(DarkModeProvider, { theme, children: /* @__PURE__ */ jsx53(DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ jsx53(TooltipProvider, { children: /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx54(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx54(DarkModeProvider, { theme, children: /* @__PURE__ */ jsx54(DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ jsx54(TooltipProvider, { children: /* @__PURE__ */ jsx54(
     RedisBrowserRoot,
     {
       hideTabs,
@@ -6727,15 +6829,15 @@ var RedisBrowserRoot = ({
   }, [theme]);
   return (
     /* ups-db is the custom class used to prefix every style in the css bundle */
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx54(
       "div",
       {
         className: `ups-db ${theme === "dark" ? "dark" : ""}`,
         style: { height: "100%" },
         ref: rootRef,
         children: /* @__PURE__ */ jsxs36("div", { className: "flex h-full flex-col text-zinc-700", children: [
-          !hideTabs && /* @__PURE__ */ jsx53(DatabrowserTabs, { onFullScreenClick }),
-          /* @__PURE__ */ jsx53(DatabrowserInstances, {})
+          !hideTabs && /* @__PURE__ */ jsx54(DatabrowserTabs, { onFullScreenClick }),
+          /* @__PURE__ */ jsx54(DatabrowserInstances, {})
         ] })
       }
     )
@@ -6748,7 +6850,7 @@ var DatabrowserInstances = () => {
     else if (!selectedTab) selectTab(tabs[0][0]);
   }, [tabs, selectedTab, addTab, selectTab]);
   if (!selectedTab) return;
-  return tabs.map(([id]) => /* @__PURE__ */ jsx53(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx53(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
+  return tabs.map(([id]) => /* @__PURE__ */ jsx54(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx54(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
 };
 export {
   RedisBrowser