@upstash/react-redis-browser 0.2.5 → 0.2.6

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // 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";
@@ -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);
@@ -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] = 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),
@@ -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" })
     }
   );
 }
@@ -5418,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" })
                     }
                   )
                 }
@@ -5696,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 }) => {
@@ -5735,7 +5832,7 @@ var SidebarContextMenu = ({ children }) => {
         }
       ),
       /* @__PURE__ */ jsxs26(ContextMenuContent, { children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs26(
           ContextMenuItem,
           {
             onClick: () => {
@@ -5744,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: () => {
@@ -5756,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"
+        ] })
       ] })
     ] })
   ] });
@@ -6037,7 +6145,7 @@ var DatabrowserInstance = ({ hidden }) => {
 };
 
 // src/components/databrowser/components/databrowser-tabs.tsx
-import { useCallback as useCallback3, 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,
@@ -6049,7 +6157,7 @@ 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, IconSearch as IconSearch2 } 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";
@@ -6152,7 +6260,14 @@ var CommandShortcut = ({
 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 jsx49 } from "react/jsx-runtime";
@@ -6191,24 +6306,45 @@ var useOverflow = () => {
 
 // src/components/databrowser/components/tab.tsx
 import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
-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__ */ 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__ */ jsx50("span", { ref, className: "max-w-32 truncate whitespace-nowrap", children: label || "New Tab" }),
-        tabs.length > 1 && /* @__PURE__ */ jsx50(
+        /* @__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) => {
@@ -6222,7 +6358,48 @@ var Tab = ({ id }) => {
       ]
     }
   );
-  return /* @__PURE__ */ jsx50(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
@@ -6230,8 +6407,12 @@ 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
     }
@@ -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__ */ jsx51(TabIdProvider, { value: id, children: /* @__PURE__ */ jsx51(Tab, { id }) })
     }
   );
 };
 var DatabrowserTabs = () => {
-  const { tabs, addTab, reorderTabs, selectedTab, selectTab } = 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);
@@ -6404,115 +6592,103 @@ var DatabrowserTabs = () => {
                   children: /* @__PURE__ */ jsx51(
                     SortableContext,
                     {
-                      items: tabs.map(([id]) => id),
+                      items: sortedTabs.map(([id]) => id),
                       strategy: horizontalListSortingStrategy,
-                      children: selectedTab && tabs.map(([id]) => /* @__PURE__ */ jsx51(SortableTab, { id }, id))
+                      children: selectedTab && sortedTabs.map(([id]) => /* @__PURE__ */ jsx51(SortableTab, { id }, id))
                     }
                   )
                 }
               ),
-              !isOverflow && /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1 pr-1", children: [
-                tabs.length > 4 && /* @__PURE__ */ jsx51(TabSearch, { tabs, onSelectTab: selectTab }),
-                /* @__PURE__ */ jsx51(
-                  Button,
-                  {
-                    variant: "secondary",
-                    size: "icon-sm",
-                    onClick: addTab,
-                    className: "flex-shrink-0",
-                    title: "Add new tab",
-                    children: /* @__PURE__ */ jsx51(IconPlus2, { className: "text-zinc-500", size: 16 })
-                  }
-                )
-              ] })
+              !isOverflow && /* @__PURE__ */ jsx51("div", { className: "flex items-center gap-1 pl-1 pr-1", children: /* @__PURE__ */ jsx51(AddTabButton, {}) })
             ]
           }
         )
       ] }),
-      isOverflow && /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 pl-1", children: [
-        tabs.length > 4 && /* @__PURE__ */ jsx51(TabSearch, { tabs, onSelectTab: selectTab }),
-        /* @__PURE__ */ jsx51(
-          Button,
-          {
-            variant: "secondary",
-            size: "icon-sm",
-            onClick: addTab,
-            className: "mr-1 flex-shrink-0",
-            title: "Add new tab",
-            children: /* @__PURE__ */ jsx51(IconPlus2, { className: "text-zinc-500", size: 16 })
-          }
-        )
+      /* @__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 TabSearch({
+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 [query, setQuery] = useState13("");
-  const items = tabs.map(([id, data]) => ({
-    id,
-    label: data.search.key || data.selectedKey || "New Tab",
-    searchKey: data.search.key,
-    selectedKey: data.selectedKey,
-    selectedItemKey: data.selectedListItem?.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__ */ jsxs35(
-    Popover,
-    {
-      open,
-      onOpenChange: (v) => {
-        setOpen(v);
-        if (!v) setQuery("");
-      },
-      children: [
-        /* @__PURE__ */ jsxs35(Tooltip, { delayDuration: 400, children: [
-          /* @__PURE__ */ jsx51(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { variant: "secondary", size: "icon-sm", "aria-label": "Search in tabs", children: /* @__PURE__ */ jsx51(IconSearch2, { className: "text-zinc-500", size: 16 }) }) }) }),
-          /* @__PURE__ */ jsx51(TooltipContent, { side: "top", children: "Search in tabs" })
-        ] }),
-        /* @__PURE__ */ jsx51(PopoverContent, { className: "w-72 p-0", align: "end", children: /* @__PURE__ */ jsxs35(Command, { children: [
-          /* @__PURE__ */ jsx51(
-            CommandInput,
-            {
-              placeholder: "Search tabs...",
-              value: query,
-              onValueChange: (v) => setQuery(v),
-              className: "h-9"
-            }
-          ),
-          /* @__PURE__ */ jsxs35(CommandList, { children: [
-            /* @__PURE__ */ jsx51(CommandEmpty, { children: "No tabs" }),
-            /* @__PURE__ */ jsx51(CommandGroup, { children: filtered.map((item) => /* @__PURE__ */ jsxs35(
-              CommandItem,
-              {
-                value: buildDisplayLabel(item),
-                onSelect: () => {
-                  onSelectTab(item.id);
-                  setOpen(false);
-                },
-                children: [
-                  item.searchKey ? /* @__PURE__ */ jsx51(IconSearch2, { size: 15 }) : /* @__PURE__ */ jsx51(TabTypeIcon, { selectedKey: item.selectedKey }),
-                  /* @__PURE__ */ jsx51("span", { className: "truncate", children: buildDisplayLabel(item) })
-                ]
-              },
-              item.id
-            )) })
-          ] })
-        ] }) })
-      ]
-    }
-  );
+  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
@@ -6523,15 +6699,17 @@ var RedisBrowser = ({
   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__ */ jsx52(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx52(RedisProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx52(DatabrowserProvider, { storage, children: /* @__PURE__ */ jsx52(TooltipProvider, { children: /* @__PURE__ */ jsxs36(
+  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__ */ jsx52(DatabrowserTabs, {}),
         /* @__PURE__ */ jsx52(DatabrowserInstances, {})