@upstash/react-redis-browser 0.2.4 → 0.2.6

package/dist/index.mjs

@@ -1,12 +1,12 @@
 // src/components/databrowser/index.tsx
-import { useEffect as useEffect14, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef6 } from "react";
 
 // src/redis-context.tsx
 import { createContext, useContext, useMemo } from "react";
 
 // src/lib/clients.ts
 import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
-import { Redis } from "@upstash/redis";
+import { Redis } from "@upstash/redis/cloudflare";
 
 // src/components/ui/use-toast.ts
 import * as React from "react";
@@ -219,7 +219,8 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var DatabrowserContext = createContext2(void 0);
 var DatabrowserProvider = ({
   children,
-  storage
+  storage,
+  rootRef
 }) => {
   const store = useMemo2(() => {
     if (!storage) return create(storeCreator);
@@ -241,18 +242,29 @@ var DatabrowserProvider = ({
           removeItem: () => {
           }
         },
-        version: 1,
+        version: 2,
         // @ts-expect-error Reset the store for < v1
-        migrate: (state, version) => {
+        migrate: (originalState, version) => {
+          const state = originalState;
           if (version === 0) {
             return;
           }
+          if (version === 1) {
+            return {
+              ...state,
+              tabs: state.tabs.map(([id, data]) => [id, { ...data, id }])
+            };
+          }
           return state;
         }
       })
     );
   }, []);
-  return /* @__PURE__ */ jsx2(DatabrowserContext.Provider, { value: { store }, children });
+  return /* @__PURE__ */ jsx2(DatabrowserContext.Provider, { value: { store, rootRef }, children });
+};
+var useDatabrowserRootRef = () => {
+  const { rootRef } = useDatabrowser();
+  return rootRef;
 };
 var useDatabrowser = () => {
   const context = useContext2(DatabrowserContext);
@@ -271,8 +283,10 @@ var storeCreator = (set, get) => ({
   addTab: () => {
     const id = crypto.randomUUID();
     const newTabData = {
+      id,
       selectedKey: void 0,
-      search: { key: "", type: void 0 }
+      search: { key: "", type: void 0 },
+      pinned: false
     };
     set((old) => ({
       tabs: [...old.tabs, [id, newTabData]],
@@ -282,6 +296,9 @@ var storeCreator = (set, get) => ({
   },
   reorderTabs: (oldIndex, newIndex) => {
     set((old) => {
+      const [, oldTabData] = old.tabs[oldIndex];
+      const [, newTabData] = old.tabs[newIndex];
+      if (oldTabData.pinned || newTabData.pinned) return old;
       const newTabs = [...old.tabs];
       const [movedTab] = newTabs.splice(oldIndex, 1);
       newTabs.splice(newIndex, 0, movedTab);
@@ -289,6 +306,22 @@ var storeCreator = (set, get) => ({
     });
   },
   removeTab: (id) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
+      if (tabIndex === -1) return old;
+      const [, tabData] = old.tabs[tabIndex];
+      if (tabData.pinned) return old;
+      const newTabs = [...old.tabs];
+      newTabs.splice(tabIndex, 1);
+      let selectedTab = old.selectedTab;
+      if (selectedTab === id) {
+        const [newId] = newTabs[tabIndex - 1] ?? newTabs[tabIndex];
+        selectedTab = newTabs.length > 0 ? newId : void 0;
+      }
+      return { tabs: newTabs, selectedTab };
+    });
+  },
+  forceRemoveTab: (id) => {
     set((old) => {
       const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
       if (tabIndex === -1) return old;
@@ -302,6 +335,45 @@ var storeCreator = (set, get) => ({
       return { tabs: newTabs, selectedTab };
     });
   },
+  togglePinTab: (id) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([tabId2]) => tabId2 === id);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      const [tabId, tabData] = newTabs[tabIndex];
+      newTabs[tabIndex] = [tabId, { ...tabData, pinned: !tabData.pinned }];
+      return { ...old, tabs: newTabs };
+    });
+  },
+  duplicateTab: (id) => {
+    let newId;
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      const [, tabData] = newTabs[tabIndex];
+      newId = crypto.randomUUID();
+      const duplicated = [newId, { ...tabData, id: newId }];
+      newTabs.splice(tabIndex + 1, 0, duplicated);
+      return { ...old, tabs: newTabs, selectedTab: newId };
+    });
+    return newId;
+  },
+  closeOtherTabs: (id) => {
+    set((old) => {
+      const exists = old.tabs.some(([tabId]) => tabId === id);
+      if (!exists) return old;
+      const newTabs = old.tabs.filter(([tabId]) => tabId === id);
+      return { ...old, tabs: newTabs, selectedTab: id };
+    });
+  },
+  closeAllButPinned: () => {
+    set((old) => {
+      const newTabs = old.tabs.filter(([, data]) => data.pinned);
+      const newSelected = newTabs.length > 0 ? newTabs[0][0] : void 0;
+      return { ...old, tabs: newTabs, selectedTab: newSelected };
+    });
+  },
   selectTab: (id) => {
     set({ selectedTab: id });
   },
@@ -410,6 +482,7 @@ var useTab = () => {
       selectedKey: tabData.selectedKey,
       selectedListItem: tabData.selectedListItem,
       search: tabData.search,
+      pinned: tabData.pinned,
       setSelectedKey: (key) => setSelectedKey(tabId, key),
       setSelectedListItem: (item) => setSelectedListItem(tabId, item),
       setSearch: (search) => setSearch(tabId, search),
@@ -3234,7 +3307,7 @@ var useKeyType = (key) => {
 
 // src/components/databrowser/components/display/display-list.tsx
 import { useMemo as useMemo7 } from "react";
-import { IconTrash } from "@tabler/icons-react";
+import { IconTrash as IconTrash2 } from "@tabler/icons-react";
 
 // src/components/ui/button.tsx
 import * as React3 from "react";
@@ -3334,8 +3407,7 @@ var useAddKey = () => {
         }
         case "hash": {
           await redis.hset(key, {
-            field: "field",
-            value: "value"
+            field: "value"
           });
           break;
         }
@@ -4150,6 +4222,7 @@ var useSetTTL = () => {
 
 // src/components/databrowser/components/item-context-menu.tsx
 import { useState as useState5 } from "react";
+import { IconCopy, IconExternalLink, IconTrash } from "@tabler/icons-react";
 import { ContextMenuSeparator as ContextMenuSeparator2 } from "@radix-ui/react-context-menu";
 
 // src/components/ui/context-menu.tsx
@@ -4448,7 +4521,7 @@ var ItemContextMenu = ({
         }
       ),
       /* @__PURE__ */ jsxs11(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs11(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4458,10 +4531,14 @@ var ItemContextMenu = ({
                 description: "Key copied to clipboard"
               });
             },
-            children: "Copy key"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx20(IconCopy, { size: 16 }),
+              "Copy key"
+            ]
           }
         ),
-        data?.value && /* @__PURE__ */ jsx20(
+        data?.value && /* @__PURE__ */ jsxs11(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4470,10 +4547,14 @@ var ItemContextMenu = ({
                 description: "Value copied to clipboard"
               });
             },
-            children: "Copy value"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx20(IconCopy, { size: 16 }),
+              "Copy value"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs11(
           ContextMenuItem,
           {
             onClick: () => {
@@ -4485,11 +4566,26 @@ var ItemContextMenu = ({
                 key: data.key
               });
             },
-            children: "Open in new tab"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx20(IconExternalLink, { size: 16 }),
+              "Open in new tab"
+            ]
           }
         ),
         /* @__PURE__ */ jsx20(ContextMenuSeparator2, {}),
-        /* @__PURE__ */ jsx20(ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
+        /* @__PURE__ */ jsxs11(
+          ContextMenuItem,
+          {
+            disabled: type === "stream",
+            onClick: () => setAlertOpen(true),
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx20(IconTrash, { size: 16 }),
+              "Delete item"
+            ]
+          }
+        )
       ] })
     ] })
   ] });
@@ -4982,7 +5078,7 @@ import { Editor, useMonaco } from "@monaco-editor/react";
 
 // src/components/databrowser/copy-button.tsx
 import { useState as useState6 } from "react";
-import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { IconCheck, IconCopy as IconCopy2 } from "@tabler/icons-react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 function CopyButton({ value, ...props }) {
   const [copied, setCopied] = useState6(false);
@@ -5003,7 +5099,7 @@ function CopyButton({ value, ...props }) {
       variant: "secondary",
       size: "icon-sm",
       ...props,
-      children: copied ? /* @__PURE__ */ jsx30(IconCheck, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx30(IconCopy, { className: "size-4 text-zinc-500" })
+      children: copied ? /* @__PURE__ */ jsx30(IconCheck, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsx30(IconCopy2, { className: "size-4 text-zinc-500" })
     }
   );
 }
@@ -5067,7 +5163,8 @@ var CustomEditor = ({
         lineDecorationsWidth: 0,
         automaticLayout: true,
         scrollBeyondLastLine: false,
-        renderLineHighlight: "none"
+        renderLineHighlight: "none",
+        unusualLineTerminators: "auto"
       }
     }
   );
@@ -5417,7 +5514,7 @@ var ListItems = ({
                       size: "icon-sm",
                       variant: "secondary",
                       onClick: (e) => e.stopPropagation(),
-                      children: /* @__PURE__ */ jsx35(IconTrash, { className: "size-4 text-zinc-500" })
+                      children: /* @__PURE__ */ jsx35(IconTrash2, { className: "size-4 text-zinc-500" })
                     }
                   )
                 }
@@ -5695,6 +5792,7 @@ var Empty = () => {
 
 // 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";
 import { ContextMenuSeparator as ContextMenuSeparator3 } from "@radix-ui/react-context-menu";
 import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 var SidebarContextMenu = ({ children }) => {
@@ -5734,7 +5832,7 @@ var SidebarContextMenu = ({ children }) => {
         }
       ),
       /* @__PURE__ */ jsxs26(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs26(
           ContextMenuItem,
           {
             onClick: () => {
@@ -5743,10 +5841,14 @@ var SidebarContextMenu = ({ children }) => {
                 description: "Key copied to clipboard"
               });
             },
-            children: "Copy key"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx41(IconCopy3, { size: 16 }),
+              "Copy key"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs26(
           ContextMenuItem,
           {
             onClick: () => {
@@ -5755,11 +5857,18 @@ var SidebarContextMenu = ({ children }) => {
               setSearch(newTabId, currentSearch);
               selectTab(newTabId);
             },
-            children: "Open in new tab"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx41(IconExternalLink2, { size: 16 }),
+              "Open in new tab"
+            ]
           }
         ),
         /* @__PURE__ */ jsx41(ContextMenuSeparator3, {}),
-        /* @__PURE__ */ jsx41(ContextMenuItem, { onClick: () => setAlertOpen(true), children: "Delete key" })
+        /* @__PURE__ */ jsxs26(ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
+          /* @__PURE__ */ jsx41(IconTrash3, { size: 16 }),
+          "Delete key"
+        ] })
       ] })
     ] })
   ] });
@@ -5833,7 +5942,7 @@ var SearchInput = () => {
     setState(value);
   };
   const filteredHistory = dedupeSearchHistory(
-    searchHistory.filter((item) => item.includes(state) && item !== state)
+    searchHistory.filter((item) => item.trim() !== "" && item.trim() !== "*").filter((item) => item.includes(state) && item !== state)
   ).slice(0, 5).map((item) => item.endsWith("*") ? item.slice(0, -1) : item);
   useEffect11(() => {
     setFocusedIndex(-1);
@@ -6036,7 +6145,7 @@ var DatabrowserInstance = ({ hidden }) => {
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { useEffect as useEffect13, useRef as useRef5, useState as useState13 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef5, useState as useState13 } from "react";
 import {
   closestCenter,
   DndContext,
@@ -6048,18 +6157,125 @@ import {
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { IconPlus as IconPlus2 } from "@tabler/icons-react";
+import { IconChevronDown as IconChevronDown2, IconPlus as IconPlus2 } from "@tabler/icons-react";
+
+// src/components/ui/command.tsx
+import * as React13 from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+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__ */ jsx48(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx48(
+    CommandPrimitive.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-neutral-400",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:text-neutral-50 dark:[&_[cmdk-group-heading]]:text-neutral-400",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  CommandPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:data-[selected=true]:bg-neutral-800 dark:data-[selected=true]:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+var CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx48(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/databrowser/components/tab.tsx
-import { IconSearch, IconX as IconX2 } from "@tabler/icons-react";
+import {
+  IconArrowsMinimize,
+  IconCopyPlus,
+  IconPin,
+  IconSearch,
+  IconSquareX,
+  IconX as IconX2
+} from "@tabler/icons-react";
 
 // src/components/databrowser/components/tab-type-icon.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function TabTypeIcon({ selectedKey }) {
   const { data: keyType, isLoading } = useFetchKeyType(selectedKey);
-  if (isLoading) return /* @__PURE__ */ jsx48(Skeleton, { className: "h-5 w-5 rounded" });
+  if (isLoading) return /* @__PURE__ */ jsx49(Skeleton, { className: "h-5 w-5 rounded" });
   if (!keyType || keyType === "none") return;
-  return /* @__PURE__ */ jsx48(TypeTag, { variant: keyType, type: "icon" });
+  return /* @__PURE__ */ jsx49(TypeTag, { variant: keyType, type: "icon" });
 }
 
 // src/hooks/use-overflow.ts
@@ -6089,25 +6305,46 @@ var useOverflow = () => {
 };
 
 // src/components/databrowser/components/tab.tsx
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
-var Tab = ({ id }) => {
-  const { active, search, selectedKey } = useTab();
-  const { selectTab, removeTab, tabs } = useDatabrowserStore();
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+var Tab = ({ id, isList }) => {
+  const { active, search, selectedKey, pinned } = useTab();
+  const {
+    selectTab,
+    removeTab,
+    forceRemoveTab,
+    tabs,
+    togglePinTab,
+    duplicateTab,
+    closeOtherTabs,
+    closeAllButPinned
+  } = useDatabrowserStore();
+  const hasPinnedTabs = tabs.some(([, data]) => data.pinned);
   const { ref, isOverflow } = useOverflow();
   const label = search.key || selectedKey;
-  const iconNode = search.key ? /* @__PURE__ */ jsx49(IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx49(TabTypeIcon, { selectedKey }) : void 0;
-  const tabNode = /* @__PURE__ */ jsxs33(
+  const iconNode = search.key ? /* @__PURE__ */ jsx50(IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ jsx50(TabTypeIcon, { selectedKey }) : void 0;
+  const tabNode = /* @__PURE__ */ jsxs34(
     "div",
     {
+      id: isList ? `list-tab-${id}` : `tab-${id}`,
       onClick: () => selectTab(id),
       className: cn(
-        "flex h-9 cursor-pointer items-center gap-2 rounded-t-lg border border-zinc-200 px-3 text-[13px] transition-colors",
-        active ? "border-b-white bg-white text-zinc-900" : "bg-zinc-100 hover:bg-zinc-50"
+        "flex h-9 w-full cursor-pointer items-center gap-2 px-3 text-[13px] transition-colors",
+        isList && "max-w-[370px]",
+        !isList && "rounded-t-lg border border-zinc-200",
+        !isList && (active ? "border-b-white bg-white text-zinc-900" : "bg-zinc-100 hover:bg-zinc-50")
       ),
       children: [
         iconNode,
-        /* @__PURE__ */ jsx49("span", { ref, className: "max-w-32 truncate whitespace-nowrap", children: label || "New Tab" }),
-        tabs.length > 1 && /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(
+          "span",
+          {
+            ref,
+            className: cn("min-w-0 grow truncate whitespace-nowrap", !isList && "max-w-32"),
+            children: label || "New Tab"
+          }
+        ),
+        pinned && /* @__PURE__ */ jsx50(IconPin, { size: 14, className: "text-zinc-500" }),
+        tabs.length > 1 && !pinned && /* @__PURE__ */ jsx50(
           "button",
           {
             onClick: (e) => {
@@ -6115,22 +6352,67 @@ var Tab = ({ id }) => {
               removeTab(id);
             },
             className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500",
-            children: /* @__PURE__ */ jsx49(IconX2, { size: 16 })
+            children: /* @__PURE__ */ jsx50(IconX2, { size: 16 })
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ jsx49(SimpleTooltip, { content: isOverflow ? label : void 0, children: tabNode });
+  return /* @__PURE__ */ jsxs34(ContextMenu, { children: [
+    /* @__PURE__ */ jsx50(SimpleTooltip, { content: isOverflow ? label : void 0, children: /* @__PURE__ */ jsx50(ContextMenuTrigger, { asChild: true, children: tabNode }) }),
+    /* @__PURE__ */ jsxs34(
+      ContextMenuContent,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+        },
+        children: [
+          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => togglePinTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx50(IconPin, { size: 16 }),
+            pinned ? "Unpin Tab" : "Pin Tab"
+          ] }),
+          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => duplicateTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx50(IconCopyPlus, { size: 16 }),
+            "Duplicate Tab"
+          ] }),
+          /* @__PURE__ */ jsx50(ContextMenuSeparator, {}),
+          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => forceRemoveTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx50(IconX2, { size: 16 }),
+            "Close Tab"
+          ] }),
+          /* @__PURE__ */ jsxs34(ContextMenuItem, { onSelect: () => closeOtherTabs(id), className: "gap-2", children: [
+            /* @__PURE__ */ jsx50(IconSquareX, { size: 16 }),
+            "Close Other Tabs"
+          ] }),
+          /* @__PURE__ */ jsxs34(
+            ContextMenuItem,
+            {
+              onSelect: () => closeAllButPinned(),
+              className: "gap-2",
+              disabled: !hasPinnedTabs,
+              children: [
+                /* @__PURE__ */ jsx50(IconArrowsMinimize, { size: 16 }),
+                "Close All But Pinned"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
 var SortableTab = ({ id }) => {
   const [originalWidth, setOriginalWidth] = useState13(null);
   const textRef = useRef5(null);
+  const { tabs } = useDatabrowserStore();
+  const tabData = tabs.find(([tabId]) => tabId === id)?.[1];
+  const isPinned = tabData?.pinned;
   const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = useSortable({
     id,
+    disabled: isPinned,
     resizeObserverConfig: {
       disabled: true
     }
@@ -6189,20 +6471,74 @@ var SortableTab = ({ id }) => {
       minWidth: originalWidth ? `${originalWidth}px` : void 0
     } : {}
   };
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       ref: measureRef,
       style,
-      className: isDragging ? "cursor-grabbing" : "cursor-grab",
+      className: isDragging ? "cursor-grabbing" : isPinned ? "cursor-default" : "cursor-grab",
       ...attributes,
-      ...listeners2,
-      children: /* @__PURE__ */ jsx50(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx50(Tab, { id }) })
+      ...isPinned ? {} : listeners2,
+      children: /* @__PURE__ */ jsx51(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx51(Tab, { id }) })
     }
   );
 };
 var DatabrowserTabs = () => {
-  const { tabs, addTab, reorderTabs, selectedTab } = useDatabrowserStore();
+  const { tabs, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
+  const sortedTabs = useMemo8(() => {
+    return [...tabs].sort(([, a], [, b]) => {
+      if (a.pinned && !b.pinned) return -1;
+      if (!a.pinned && b.pinned) return 1;
+      return 0;
+    });
+  }, [tabs]);
+  const scrollRef = useRef5(null);
+  const [hasLeftShadow, setHasLeftShadow] = useState13(false);
+  const [hasRightShadow, setHasRightShadow] = useState13(false);
+  const [isOverflow, setIsOverflow] = useState13(false);
+  useEffect13(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onWheel = (event) => {
+      if (el.scrollWidth <= el.clientWidth) return;
+      const primaryDelta = Math.abs(event.deltaY) > Math.abs(event.deltaX) ? event.deltaY : event.deltaX;
+      if (primaryDelta !== 0) {
+        el.scrollLeft += primaryDelta;
+        event.preventDefault();
+        requestAnimationFrame(() => {
+          const { scrollLeft, scrollWidth, clientWidth } = el;
+          setHasLeftShadow(scrollLeft > 0);
+          setHasRightShadow(scrollLeft + clientWidth < scrollWidth - 1);
+          setIsOverflow(scrollWidth > clientWidth + 1);
+        });
+      }
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+    };
+  }, []);
+  const recomputeShadows = useCallback3(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setHasLeftShadow(scrollLeft > 0);
+    setHasRightShadow(scrollLeft + clientWidth < scrollWidth - 1);
+    setIsOverflow(scrollWidth > clientWidth + 1);
+  }, []);
+  useEffect13(() => {
+    recomputeShadows();
+    const el = scrollRef.current;
+    if (!el) return;
+    const onResize = () => recomputeShadows();
+    window.addEventListener("resize", onResize);
+    const obs = new ResizeObserver(onResize);
+    obs.observe(el);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      obs.disconnect();
+    };
+  }, [recomputeShadows]);
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -6218,59 +6554,165 @@ var DatabrowserTabs = () => {
       reorderTabs(oldIndex, newIndex);
     }
   };
-  return /* @__PURE__ */ jsxs34("div", { className: "relative mb-2 shrink-0", children: [
-    /* @__PURE__ */ jsx50("div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
-    /* @__PURE__ */ jsxs34("div", { className: "scrollbar-hide flex translate-y-[1px] items-center gap-1 overflow-x-scroll pb-[1px] [&::-webkit-scrollbar]:hidden", children: [
-      /* @__PURE__ */ jsx50(
-        DndContext,
-        {
-          sensors,
-          collisionDetection: closestCenter,
-          onDragEnd: handleDragEnd,
-          modifiers: [restrictToHorizontalAxis],
-          measuring: {
-            droppable: {
-              strategy: MeasuringStrategy.Always
-            }
-          },
-          children: /* @__PURE__ */ jsx50(SortableContext, { items: tabs.map(([id]) => id), strategy: horizontalListSortingStrategy, children: selectedTab && tabs.map(([id]) => /* @__PURE__ */ jsx50(SortableTab, { id }, id)) })
-        }
-      ),
-      /* @__PURE__ */ jsx50(
-        Button,
-        {
-          variant: "secondary",
-          size: "icon-sm",
-          onClick: addTab,
-          className: "mr-1 flex-shrink-0",
-          title: "Add new tab",
-          children: /* @__PURE__ */ jsx50(IconPlus2, { className: "text-zinc-500", size: 16 })
-        }
-      )
+  return /* @__PURE__ */ jsxs35("div", { className: "relative mb-2 shrink-0", children: [
+    /* @__PURE__ */ jsx51("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__ */ jsx51(
+          "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__ */ jsx51(
+          "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"}`
+          }
+        ),
+        /* @__PURE__ */ jsxs35(
+          "div",
+          {
+            ref: scrollRef,
+            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__ */ jsx51(
+                DndContext,
+                {
+                  sensors,
+                  collisionDetection: closestCenter,
+                  onDragEnd: handleDragEnd,
+                  modifiers: [restrictToHorizontalAxis],
+                  measuring: {
+                    droppable: {
+                      strategy: MeasuringStrategy.Always
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx51(
+                    SortableContext,
+                    {
+                      items: sortedTabs.map(([id]) => id),
+                      strategy: horizontalListSortingStrategy,
+                      children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ jsx51(SortableTab, { id }, id))
+                    }
+                  )
+                }
+              ),
+              !isOverflow && /* @__PURE__ */ jsx51("div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ jsx51(AddTabButton, {}) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1", children: [
+        isOverflow && /* @__PURE__ */ jsx51(AddTabButton, {}),
+        tabs.length > 1 && /* @__PURE__ */ jsx51(TabsListButton, { tabs, onSelectTab: selectTab })
+      ] })
     ] })
   ] });
 };
+function AddTabButton() {
+  const { addTab, selectTab } = useDatabrowserStore();
+  const rootRef = useDatabrowserRootRef();
+  const handleAddTab = () => {
+    const tabsId = addTab();
+    selectTab(tabsId);
+    setTimeout(() => {
+      const tab = rootRef?.current?.querySelector(`#tab-${tabsId}`);
+      if (!tab) return;
+      tab.scrollIntoView({ behavior: "smooth" });
+    }, 20);
+  };
+  return /* @__PURE__ */ jsx51(
+    Button,
+    {
+      "aria-label": "Add new tab",
+      variant: "secondary",
+      size: "icon-sm",
+      onClick: handleAddTab,
+      className: "flex-shrink-0",
+      children: /* @__PURE__ */ jsx51(IconPlus2, { className: "text-zinc-500", size: 16 })
+    }
+  );
+}
+function TabsListButton({
+  tabs,
+  onSelectTab
+}) {
+  const [open, setOpen] = useState13(false);
+  const sorted = useMemo8(() => {
+    return [...tabs].sort(([, a], [, b]) => {
+      if (a.pinned && !b.pinned) return -1;
+      if (!a.pinned && b.pinned) return 1;
+      return 0;
+    });
+  }, [tabs]);
+  const rootRef = useDatabrowserRootRef();
+  const handleSelectTab = (id) => {
+    onSelectTab(id);
+    setOpen(false);
+    setTimeout(() => {
+      const tab = rootRef?.current?.querySelector(`#tab-${id}`);
+      if (!tab) return;
+      tab.scrollIntoView({ behavior: "smooth" });
+    }, 20);
+  };
+  return /* @__PURE__ */ jsxs35(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        className: "h-7 gap-1 px-2",
+        "aria-label": "Search in tabs",
+        children: [
+          /* @__PURE__ */ jsx51("span", { className: "text-xs text-zinc-600", children: tabs.length }),
+          /* @__PURE__ */ jsx51(IconChevronDown2, { className: "text-zinc-500", size: 16 })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx51(PopoverContent, { className: "w-96 p-0", align: "end", children: /* @__PURE__ */ jsx51(Command, { children: /* @__PURE__ */ jsxs35(CommandList, { children: [
+      /* @__PURE__ */ jsx51(CommandEmpty, { children: "No tabs" }),
+      /* @__PURE__ */ jsx51(CommandGroup, { children: sorted.map(([_id, item]) => /* @__PURE__ */ jsx51(
+        CommandItem,
+        {
+          style: {
+            padding: 0
+          },
+          value: item.id,
+          onSelect: () => {
+            handleSelectTab(item.id);
+          },
+          children: /* @__PURE__ */ jsx51(TabIdProvider, { value: _id, children: /* @__PURE__ */ jsx51(Tab, { id: _id, isList: true }) })
+        },
+        item.id
+      )) })
+    ] }) }) })
+  ] });
+}
 
 // src/components/databrowser/index.tsx
-import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
 var RedisBrowser = ({
   token,
   url,
   hideTabs,
   storage
 }) => {
-  const credentials = useMemo8(() => ({ token, url }), [token, url]);
+  const credentials = useMemo9(() => ({ token, url }), [token, url]);
+  const rootRef = useRef6(null);
   useEffect14(() => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ jsx51(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx51(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx51(DatabrowserProvider, { storage, children: /* @__PURE__ */ jsx51(TooltipProvider, { children: /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsx52(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx52(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx52(DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ jsx52(TooltipProvider, { children: /* @__PURE__ */ jsxs36(
     "div",
     {
       className: "ups-db",
       style: { height: "100%", display: "flex", flexDirection: "column" },
+      ref: rootRef,
       children: [
-        !hideTabs && /* @__PURE__ */ jsx51(DatabrowserTabs, {}),
-        /* @__PURE__ */ jsx51(DatabrowserInstances, {})
+        !hideTabs && /* @__PURE__ */ jsx52(DatabrowserTabs, {}),
+        /* @__PURE__ */ jsx52(DatabrowserInstances, {})
       ]
     }
   ) }) }) }) });
@@ -6282,7 +6724,7 @@ var DatabrowserInstances = () => {
     else if (!selectedTab) selectTab(tabs[0][0]);
   }, [tabs, selectedTab, addTab, selectTab]);
   if (!selectedTab) return;
-  return tabs.map(([id]) => /* @__PURE__ */ jsx51(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx51(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
+  return tabs.map(([id]) => /* @__PURE__ */ jsx52(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx52(DatabrowserInstance, { hidden: id !== selectedTab }) }, id));
 };
 export {
   RedisBrowser