@upstash/react-redis-browser 0.2.5 → 0.2.6

package/dist/index.js

@@ -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);
@@ -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] = _nullishCoalesce(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),
@@ -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"
+            ]
+          }
+        )
       ] })
     ] })
   ] });
@@ -5698,6 +5794,7 @@ var Empty = () => {
 
 
 
+
 var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
   const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
@@ -5735,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: () => {
@@ -5744,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: () => {
@@ -5756,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"
+        ] })
       ] })
     ] })
   ] });
@@ -6154,6 +6262,13 @@ CommandShortcut.displayName = "CommandShortcut";
 // src/components/databrowser/components/tab.tsx
 
 
+
+
+
+
+
+
+
 // src/components/databrowser/components/tab-type-icon.tsx
 
 function TabTypeIcon({ selectedKey }) {
@@ -6191,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) => {
@@ -6222,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
@@ -6230,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
     }
@@ -6295,15 +6476,22 @@ 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, selectTab } = 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);
@@ -6404,115 +6592,103 @@ var DatabrowserTabs = () => {
                   children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     _sortable.SortableContext,
                     {
-                      items: tabs.map(([id]) => id),
+                      items: sortedTabs.map(([id]) => id),
                       strategy: _sortable.horizontalListSortingStrategy,
-                      children: selectedTab && tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id))
+                      children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortableTab, { id }, id))
                     }
                   )
                 }
               ),
-              !isOverflow && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1 pr-1", children: [
-                tabs.length > 4 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabSearch, { tabs, onSelectTab: selectTab }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  Button,
-                  {
-                    variant: "secondary",
-                    size: "icon-sm",
-                    onClick: addTab,
-                    className: "flex-shrink-0",
-                    title: "Add new tab",
-                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500", size: 16 })
-                  }
-                )
-              ] })
+              !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, {}) })
             ]
           }
         )
       ] }),
-      isOverflow && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 pl-1", children: [
-        tabs.length > 4 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabSearch, { tabs, onSelectTab: selectTab }),
-        /* @__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 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 TabSearch({
+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 [query, setQuery] = _react.useState.call(void 0, "");
-  const items = tabs.map(([id, data]) => ({
-    id,
-    label: data.search.key || data.selectedKey || "New Tab",
-    searchKey: data.search.key,
-    selectedKey: data.selectedKey,
-    selectedItemKey: _optionalChain([data, 'access', _68 => _68.selectedListItem, 'optionalAccess', _69 => _69.key])
-  }));
-  const buildDisplayLabel = (it) => it.selectedItemKey ? `${it.label} > ${it.selectedItemKey}` : it.label;
-  const dedupedMap = /* @__PURE__ */ new Map();
-  for (const it of items) {
-    const display = buildDisplayLabel(it);
-    const key = display.toLowerCase();
-    if (!dedupedMap.has(key)) dedupedMap.set(key, it);
-  }
-  const deduped = [...dedupedMap.values()];
-  const filtered = (query ? deduped.filter((i) => buildDisplayLabel(i).toLowerCase().includes(query.toLowerCase())) : deduped).sort((a, b) => buildDisplayLabel(a).localeCompare(buildDisplayLabel(b)));
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    Popover,
-    {
-      open,
-      onOpenChange: (v) => {
-        setOpen(v);
-        if (!v) setQuery("");
-      },
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tooltip, { delayDuration: 400, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", size: "icon-sm", "aria-label": "Search in tabs", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { className: "text-zinc-500", size: 16 }) }) }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipContent, { side: "top", children: "Search in tabs" })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContent, { className: "w-72 p-0", align: "end", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Command, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            CommandInput,
-            {
-              placeholder: "Search tabs...",
-              value: query,
-              onValueChange: (v) => setQuery(v),
-              className: "h-9"
-            }
-          ),
-          /* @__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: filtered.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              CommandItem,
-              {
-                value: buildDisplayLabel(item),
-                onSelect: () => {
-                  onSelectTab(item.id);
-                  setOpen(false);
-                },
-                children: [
-                  item.searchKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 15 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabTypeIcon, { selectedKey: item.selectedKey }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: buildDisplayLabel(item) })
-                ]
-              },
-              item.id
-            )) })
-          ] })
-        ] }) })
-      ]
-    }
-  );
+  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
@@ -6524,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, {})