@upstash/react-redis-browser 0.2.4 → 0.2.6

package/dist/index.js

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/databrowser/index.tsx
-var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React5 = _interopRequireWildcard(_react); var React6 = _interopRequireWildcard(_react); var React7 = _interopRequireWildcard(_react); var React8 = _interopRequireWildcard(_react); var React9 = _interopRequireWildcard(_react); var React10 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react);
+var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React5 = _interopRequireWildcard(_react); var React6 = _interopRequireWildcard(_react); var React7 = _interopRequireWildcard(_react); var React8 = _interopRequireWildcard(_react); var React9 = _interopRequireWildcard(_react); var React10 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react); var React13 = _interopRequireWildcard(_react);
 
 // src/redis-context.tsx
 
 
 // src/lib/clients.ts
 var _reactquery = require('@tanstack/react-query');
-var _redis = require('@upstash/redis');
+var _cloudflare = require('@upstash/redis/cloudflare');
 
 // src/components/ui/use-toast.ts
 
@@ -144,7 +144,7 @@ var redisClient = ({
   if (!token) {
     throw new Error("Redis TOKEN is missing!");
   }
-  const redis = new (0, _redis.Redis)({
+  const redis = new (0, _cloudflare.Redis)({
     url,
     token,
     enableAutoPipelining: pipelining,
@@ -219,7 +219,8 @@ var _middleware = require('zustand/middleware');
 var DatabrowserContext = _react.createContext.call(void 0, void 0);
 var DatabrowserProvider = ({
   children,
-  storage
+  storage,
+  rootRef
 }) => {
   const store = _react.useMemo.call(void 0, () => {
     if (!storage) return _zustand.create.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, DatabrowserContext.Provider, { value: { store }, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserContext.Provider, { value: { store, rootRef }, children });
+};
+var useDatabrowserRootRef = () => {
+  const { rootRef } = useDatabrowser();
+  return rootRef;
 };
 var useDatabrowser = () => {
   const context = _react.useContext.call(void 0, 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);
@@ -292,6 +309,8 @@ var storeCreator = (set, get) => ({
     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;
@@ -302,6 +321,59 @@ var storeCreator = (set, get) => ({
       return { tabs: newTabs, selectedTab };
     });
   },
+  forceRemoveTab: (id) => {
+    set((old) => {
+      const tabIndex = old.tabs.findIndex(([tabId]) => tabId === id);
+      if (tabIndex === -1) return old;
+      const newTabs = [...old.tabs];
+      newTabs.splice(tabIndex, 1);
+      let selectedTab = old.selectedTab;
+      if (selectedTab === id) {
+        const [newId] = _nullishCoalesce(newTabs[tabIndex - 1], () => ( newTabs[tabIndex]));
+        selectedTab = newTabs.length > 0 ? newId : void 0;
+      }
+      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),
@@ -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
 
+
 var _reactcontextmenu = require('@radix-ui/react-context-menu'); var ContextMenuPrimitive = _interopRequireWildcard(_reactcontextmenu);
 
 // src/components/ui/context-menu.tsx
@@ -4448,7 +4521,7 @@ var ItemContextMenu = ({
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
@@ -4458,10 +4531,14 @@ var ItemContextMenu = ({
                 description: "Key copied to clipboard"
               });
             },
-            children: "Copy key"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
+              "Copy key"
+            ]
           }
         ),
-        _optionalChain([data, 'optionalAccess', _32 => _32.value]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _optionalChain([data, 'optionalAccess', _32 => _32.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
@@ -4470,10 +4547,14 @@ var ItemContextMenu = ({
                 description: "Value copied to clipboard"
               });
             },
-            children: "Copy value"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
+              "Copy value"
+            ]
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
@@ -4485,11 +4566,26 @@ var ItemContextMenu = ({
                 key: data.key
               });
             },
-            children: "Open in new tab"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 16 }),
+              "Open in new tab"
+            ]
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuItem, { disabled: type === "stream", onClick: () => setAlertOpen(true), children: "Delete item" })
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          ContextMenuItem,
+          {
+            disabled: type === "stream",
+            onClick: () => setAlertOpen(true),
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { size: 16 }),
+              "Delete item"
+            ]
+          }
+        )
       ] })
     ] })
   ] });
@@ -5067,7 +5163,8 @@ var CustomEditor = ({
         lineDecorationsWidth: 0,
         automaticLayout: true,
         scrollBeyondLastLine: false,
-        renderLineHighlight: "none"
+        renderLineHighlight: "none",
+        unusualLineTerminators: "auto"
       }
     }
   );
@@ -5697,6 +5794,7 @@ var Empty = () => {
 
 
 
+
 var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
   const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
@@ -5734,7 +5832,7 @@ var SidebarContextMenu = ({ children }) => {
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
@@ -5743,10 +5841,14 @@ var SidebarContextMenu = ({ children }) => {
                 description: "Key copied to clipboard"
               });
             },
-            children: "Copy key"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
+              "Copy key"
+            ]
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
@@ -5755,11 +5857,18 @@ var SidebarContextMenu = ({ children }) => {
               setSearch(newTabId, currentSearch);
               selectTab(newTabId);
             },
-            children: "Open in new tab"
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 16 }),
+              "Open in new tab"
+            ]
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuItem, { onClick: () => setAlertOpen(true), children: "Delete key" })
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onClick: () => setAlertOpen(true), className: "gap-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { 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);
   _react.useEffect.call(void 0, () => {
     setFocusedIndex(-1);
@@ -6050,9 +6159,116 @@ var _sortable = require('@dnd-kit/sortable');
 var _utilities = require('@dnd-kit/utilities');
 
 
+// src/components/ui/command.tsx
+
+var _cmdk = require('cmdk');
+
+
+var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command,
+  {
+    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 = _cmdk.Command.displayName;
+var CommandInput = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _cmdk.Command.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 = _cmdk.Command.Input.displayName;
+var CommandList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = _cmdk.Command.List.displayName;
+var CommandEmpty = React13.forwardRef((props, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = _cmdk.Command.Empty.displayName;
+var CommandGroup = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command.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 = _cmdk.Command.Group.displayName;
+var CommandSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-neutral-200 dark:bg-neutral-800", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = _cmdk.Command.Separator.displayName;
+var CommandItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _cmdk.Command.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 = _cmdk.Command.Item.displayName;
+var CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "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
 
 
+
+
+
+
+
+
+
 // src/components/databrowser/components/tab-type-icon.tsx
 
 function TabTypeIcon({ selectedKey }) {
@@ -6090,24 +6306,45 @@ var useOverflow = () => {
 
 // src/components/databrowser/components/tab.tsx
 
-var Tab = ({ id }) => {
-  const { active, search, selectedKey } = useTab();
-  const { selectTab, removeTab, tabs } = useDatabrowserStore();
+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__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15 }) : selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey }) : void 0;
   const tabNode = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "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__ */ _jsxruntime.jsx.call(void 0, "span", { ref, className: "max-w-32 truncate whitespace-nowrap", children: label || "New Tab" }),
-        tabs.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            ref,
+            className: cn("min-w-0 grow truncate whitespace-nowrap", !isList && "max-w-32"),
+            children: label || "New Tab"
+          }
+        ),
+        pinned && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPin, { size: 14, className: "text-zinc-500" }),
+        tabs.length > 1 && !pinned && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
           {
             onClick: (e) => {
@@ -6121,7 +6358,48 @@ var Tab = ({ id }) => {
       ]
     }
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: isOverflow ? label : void 0, children: tabNode });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenu, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: isOverflow ? label : void 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuTrigger, { asChild: true, children: tabNode }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      ContextMenuContent,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onSelect: () => togglePinTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPin, { size: 16 }),
+            pinned ? "Unpin Tab" : "Pin Tab"
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onSelect: () => duplicateTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopyPlus, { size: 16 }),
+            "Duplicate Tab"
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuSeparator, {}),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onSelect: () => forceRemoveTab(id), className: "gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 }),
+            "Close Tab"
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuItem, { onSelect: () => closeOtherTabs(id), className: "gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSquareX, { size: 16 }),
+            "Close Other Tabs"
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            ContextMenuItem,
+            {
+              onSelect: () => closeAllButPinned(),
+              className: "gap-2",
+              disabled: !hasPinnedTabs,
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconArrowsMinimize, { size: 16 }),
+                "Close All But Pinned"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
@@ -6129,8 +6407,12 @@ var Tab = ({ id }) => {
 var SortableTab = ({ id }) => {
   const [originalWidth, setOriginalWidth] = _react.useState.call(void 0, null);
   const textRef = _react.useRef.call(void 0, null);
+  const { tabs } = useDatabrowserStore();
+  const tabData = _optionalChain([tabs, 'access', _68 => _68.find, 'call', _69 => _69(([tabId]) => tabId === id), 'optionalAccess', _70 => _70[1]]);
+  const isPinned = _optionalChain([tabData, 'optionalAccess', _71 => _71.pinned]);
   const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = _sortable.useSortable.call(void 0, {
     id,
+    disabled: isPinned,
     resizeObserverConfig: {
       disabled: true
     }
@@ -6194,15 +6476,69 @@ var SortableTab = ({ id }) => {
     {
       ref: measureRef,
       style,
-      className: isDragging ? "cursor-grabbing" : "cursor-grab",
+      className: isDragging ? "cursor-grabbing" : isPinned ? "cursor-default" : "cursor-grab",
       ...attributes,
-      ...listeners2,
+      ...isPinned ? {} : listeners2,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tab, { id }) })
     }
   );
 };
 var DatabrowserTabs = () => {
-  const { tabs, addTab, reorderTabs, selectedTab } = useDatabrowserStore();
+  const { tabs, reorderTabs, selectedTab, selectTab } = useDatabrowserStore();
+  const sortedTabs = _react.useMemo.call(void 0, () => {
+    return [...tabs].sort(([, a], [, b]) => {
+      if (a.pinned && !b.pinned) return -1;
+      if (!a.pinned && b.pinned) return 1;
+      return 0;
+    });
+  }, [tabs]);
+  const scrollRef = _react.useRef.call(void 0, null);
+  const [hasLeftShadow, setHasLeftShadow] = _react.useState.call(void 0, false);
+  const [hasRightShadow, setHasRightShadow] = _react.useState.call(void 0, false);
+  const [isOverflow, setIsOverflow] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    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 = _react.useCallback.call(void 0, () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setHasLeftShadow(scrollLeft > 0);
+    setHasRightShadow(scrollLeft + clientWidth < scrollWidth - 1);
+    setIsOverflow(scrollWidth > clientWidth + 1);
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    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 = _core.useSensors.call(void 0, 
     _core.useSensor.call(void 0, _core.PointerSensor, {
       activationConstraint: {
@@ -6220,36 +6556,140 @@ var DatabrowserTabs = () => {
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative mb-2 shrink-0", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "scrollbar-hide flex translate-y-[1px] items-center gap-1 overflow-x-scroll pb-[1px] [&::-webkit-scrollbar]:hidden", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _core.DndContext,
-        {
-          sensors,
-          collisionDetection: _core.closestCenter,
-          onDragEnd: handleDragEnd,
-          modifiers: [_modifiers.restrictToHorizontalAxis],
-          measuring: {
-            droppable: {
-              strategy: _core.MeasuringStrategy.Always
-            }
-          },
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _sortable.SortableContext, { items: tabs.map(([id]) => id), strategy: _sortable.horizontalListSortingStrategy, children: selectedTab && tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id)) })
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Button,
-        {
-          variant: "secondary",
-          size: "icon-sm",
-          onClick: addTab,
-          className: "mr-1 flex-shrink-0",
-          title: "Add new tab",
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500", size: 16 })
-        }
-      )
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex translate-y-[1px] items-center gap-1", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative min-w-0 flex-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "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__ */ _jsxruntime.jsx.call(void 0, 
+          "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__ */ _jsxruntime.jsxs.call(void 0, 
+          "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__ */ _jsxruntime.jsx.call(void 0, 
+                _core.DndContext,
+                {
+                  sensors,
+                  collisionDetection: _core.closestCenter,
+                  onDragEnd: handleDragEnd,
+                  modifiers: [_modifiers.restrictToHorizontalAxis],
+                  measuring: {
+                    droppable: {
+                      strategy: _core.MeasuringStrategy.Always
+                    }
+                  },
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _sortable.SortableContext,
+                    {
+                      items: sortedTabs.map(([id]) => id),
+                      strategy: _sortable.horizontalListSortingStrategy,
+                      children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id))
+                    }
+                  )
+                }
+              ),
+              !isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1", children: [
+        isOverflow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddTabButton, {}),
+        tabs.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsListButton, { tabs, onSelectTab: selectTab })
+      ] })
     ] })
   ] });
 };
+function AddTabButton() {
+  const { addTab, selectTab } = useDatabrowserStore();
+  const rootRef = useDatabrowserRootRef();
+  const handleAddTab = () => {
+    const tabsId = addTab();
+    selectTab(tabsId);
+    setTimeout(() => {
+      const tab = _optionalChain([rootRef, 'optionalAccess', _72 => _72.current, 'optionalAccess', _73 => _73.querySelector, 'call', _74 => _74(`#tab-${tabsId}`)]);
+      if (!tab) return;
+      tab.scrollIntoView({ behavior: "smooth" });
+    }, 20);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Button,
+    {
+      "aria-label": "Add new tab",
+      variant: "secondary",
+      size: "icon-sm",
+      onClick: handleAddTab,
+      className: "flex-shrink-0",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500", size: 16 })
+    }
+  );
+}
+function TabsListButton({
+  tabs,
+  onSelectTab
+}) {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const sorted = _react.useMemo.call(void 0, () => {
+    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 = _optionalChain([rootRef, 'optionalAccess', _75 => _75.current, 'optionalAccess', _76 => _76.querySelector, 'call', _77 => _77(`#tab-${id}`)]);
+      if (!tab) return;
+      tab.scrollIntoView({ behavior: "smooth" });
+    }, 20);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        className: "h-7 gap-1 px-2",
+        "aria-label": "Search in tabs",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs text-zinc-600", children: tabs.length }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconChevronDown, { className: "text-zinc-500", size: 16 })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContent, { className: "w-96 p-0", align: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Command, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CommandList, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CommandEmpty, { children: "No tabs" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CommandGroup, { children: sorted.map(([_id, item]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        CommandItem,
+        {
+          style: {
+            padding: 0
+          },
+          value: item.id,
+          onSelect: () => {
+            handleSelectTab(item.id);
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: _id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tab, { id: _id, isList: true }) })
+        },
+        item.id
+      )) })
+    ] }) }) })
+  ] });
+}
 
 // src/components/databrowser/index.tsx
 
@@ -6260,14 +6700,16 @@ var RedisBrowser = ({
   storage
 }) => {
   const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
+  const rootRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     queryClient.resetQueries();
   }, [credentials.url]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
       className: "ups-db",
       style: { height: "100%", display: "flex", flexDirection: "column" },
+      ref: rootRef,
       children: [
         !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, {})