@upstash/react-redis-browser 0.2.8 → 0.2.10

package/dist/index.js

@@ -260,18 +260,20 @@ var DatabrowserProvider = ({
           removeItem: () => {
           }
         },
-        version: 2,
-        // @ts-expect-error Reset the store for < v1
+        version: 4,
         migrate: (originalState, version) => {
           const state = originalState;
-          if (version === 0) {
-            return;
+          if (version <= 1) {
+            state.tabs = state.tabs.map(([id, data]) => [id, { ...data, id }]);
           }
-          if (version === 1) {
-            return {
-              ...state,
-              tabs: state.tabs.map(([id, data]) => [id, { ...data, id }])
-            };
+          if (version <= 2) {
+            state.tabs = state.tabs.map(([id, data]) => {
+              const oldData = data;
+              return [
+                id,
+                { ...data, selectedKeys: oldData.selectedKey ? [oldData.selectedKey] : [] }
+              ];
+            });
           }
           return state;
         }
@@ -302,7 +304,7 @@ var storeCreator = (set, get) => ({
     const id = crypto.randomUUID();
     const newTabData = {
       id,
-      selectedKey: void 0,
+      selectedKeys: [],
       search: { key: "", type: void 0 },
       pinned: false
     };
@@ -395,16 +397,19 @@ var storeCreator = (set, get) => ({
   selectTab: (id) => {
     set({ selectedTab: id });
   },
-  getSelectedKey: (tabId) => {
-    return _optionalChain([get, 'call', _4 => _4(), 'access', _5 => _5.tabs, 'access', _6 => _6.find, 'call', _7 => _7(([id]) => id === tabId), 'optionalAccess', _8 => _8[1], 'optionalAccess', _9 => _9.selectedKey]);
+  getSelectedKeys: (tabId) => {
+    return _nullishCoalesce(_optionalChain([get, 'call', _4 => _4(), 'access', _5 => _5.tabs, 'access', _6 => _6.find, 'call', _7 => _7(([id]) => id === tabId), 'optionalAccess', _8 => _8[1], 'optionalAccess', _9 => _9.selectedKeys]), () => ( []));
   },
   setSelectedKey: (tabId, key) => {
+    get().setSelectedKeys(tabId, key ? [key] : []);
+  },
+  setSelectedKeys: (tabId, keys) => {
     set((old) => {
       const tabIndex = old.tabs.findIndex(([id]) => id === tabId);
       if (tabIndex === -1) return old;
       const newTabs = [...old.tabs];
       const [, tabData] = newTabs[tabIndex];
-      newTabs[tabIndex] = [tabId, { ...tabData, selectedKey: key, selectedListItem: void 0 }];
+      newTabs[tabIndex] = [tabId, { ...tabData, selectedKeys: keys, selectedListItem: void 0 }];
       return { ...old, tabs: newTabs };
     });
   },
@@ -485,6 +490,7 @@ var useTab = () => {
     selectedTab,
     tabs,
     setSelectedKey,
+    setSelectedKeys,
     setSelectedListItem,
     setSearch,
     setSearchKey,
@@ -497,11 +503,14 @@ var useTab = () => {
   return _react.useMemo.call(void 0, 
     () => ({
       active: selectedTab === tabId,
-      selectedKey: tabData.selectedKey,
+      selectedKey: tabData.selectedKeys[0],
+      // Backwards compatibility - first selected key
+      selectedKeys: tabData.selectedKeys,
       selectedListItem: tabData.selectedListItem,
       search: tabData.search,
       pinned: tabData.pinned,
       setSelectedKey: (key) => setSelectedKey(tabId, key),
+      setSelectedKeys: (keys) => setSelectedKeys(tabId, keys),
       setSelectedListItem: (item) => setSelectedListItem(tabId, item),
       setSearch: (search) => setSearch(tabId, search),
       setSearchKey: (key) => setSearchKey(tabId, key),
@@ -3836,8 +3845,8 @@ var HeaderTTLBadge = ({ dataKey }) => {
     }
   );
 };
-var Badge = ({ children, label }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700", children: [
-  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: label }),
+var Badge = ({ children, label }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-6 items-center gap-0.5 rounded-md bg-white px-2 text-xs text-zinc-700 dark:bg-zinc-200", children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500 dark:text-zinc-600", children: label }),
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", children })
 ] });
 
@@ -4441,16 +4450,20 @@ function DeleteAlertDialog({
   onDeleteConfirm,
   open,
   onOpenChange,
-  deletionType
+  deletionType,
+  count: count2 = 1
 }) {
+  const isPlural = count2 > 1;
+  const itemLabel = deletionType === "item" ? "Item" : "Key";
+  const itemsLabel = deletionType === "item" ? "Items" : "Keys";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialog, { open, onOpenChange, children: [
     children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTrigger, { asChild: true, children }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogContent, { children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogHeader, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTitle, { children: isPlural ? `Delete ${count2} ${itemsLabel}` : `Delete ${itemLabel}` }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogDescription, { className: "mt-5", children: [
-          "Are you sure you want to delete this ",
-          deletionType,
+          "Are you sure you want to delete ",
+          isPlural ? `these ${count2} ${deletionType}s` : `this ${deletionType}`,
           "?",
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
           "This action cannot be undone."
@@ -4696,6 +4709,36 @@ var InfiniteScroll = ({
 // src/components/databrowser/components/display/display-header.tsx
 
 
+// src/components/ui/tooltip.tsx
+
+
+
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var SimpleTooltip = ({
+  content,
+  children
+}) => {
+  if (!content) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
+  return /* @__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, "div", { children }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipContent, { side: "top", children: content })
+  ] });
+};
+
 // src/types/index.ts
 var DATA_TYPES = ["string", "list", "hash", "set", "zset", "json", "stream"];
 var DATA_TYPE_NAMES = {
@@ -4762,7 +4805,7 @@ var _reactdropdownmenu = require('@radix-ui/react-dropdown-menu'); var DropdownM
 
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -4779,7 +4822,7 @@ var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -4791,7 +4834,7 @@ var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -4805,12 +4848,12 @@ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+var DropdownMenuItem = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   DropdownMenuPrimitive.Item,
   {
     ref,
     className: cn(
-      "data-[disabled]:opacity-50[&>svg]:size-4 relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none [&>svg]:shrink-0",
+      "data-[disabled]:opacity-50[&>svg]:size-4 relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none [&>svg]:shrink-0",
       inset && "pl-8",
       className
     ),
@@ -4818,7 +4861,7 @@ var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -4835,7 +4878,7 @@ var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -4851,7 +4894,7 @@ var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -4860,7 +4903,7 @@ var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -4879,7 +4922,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 function KeyActions({ dataKey, content }) {
   const { mutateAsync: deleteKey } = useDeleteKey();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenu, { modal: false, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDotsVertical, { className: "size-4 text-zinc-500" }) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", "aria-label": "Key actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDotsVertical, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DropdownMenuContent, { className: "", align: "end", children: [
       content && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         DropdownMenuItem,
@@ -4936,7 +4979,7 @@ var DisplayHeader = ({
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "grow truncate text-base", children: dataKey.trim() === "" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-1 text-zinc-500", children: "(Empty Key)" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-semibold", children: dataKey }) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
-        type !== "string" && type !== "json" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4 text-zinc-500" }) }),
+        type !== "string" && type !== "json" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: handleAddItem, size: "icon-sm", "aria-label": "Add item", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "size-4 text-zinc-500 dark:text-zinc-600" }) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyActions, { dataKey, content })
       ] })
     ] }),
@@ -4952,36 +4995,6 @@ var DisplayHeader = ({
 // src/components/databrowser/components/display/display-list-edit.tsx
 
 
-// src/components/ui/tooltip.tsx
-
-
-
-var Tooltip = TooltipPrimitive.Root;
-var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipPrimitive.Portal, { container: portalRoot, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-) }));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-var SimpleTooltip = ({
-  content,
-  children
-}) => {
-  if (!content) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
-  return /* @__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, "div", { children }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipContent, { side: "top", children: content })
-  ] });
-};
-
 // src/components/databrowser/hooks/use-fetch-hash-ttl.ts
 
 var FETCH_HASH_FIELD_TTLS_QUERY_KEY = "fetch-hash-field-ttls";
@@ -5473,7 +5486,9 @@ var ListItems = ({
       onClick: () => {
         setSelectedListItem({ key });
       },
-      className: cn("h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100"),
+      className: cn(
+        "h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100 dark:border-b-zinc-200 dark:hover:bg-zinc-200"
+      ),
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "td",
@@ -5495,7 +5510,7 @@ var ListItems = ({
         type !== "stream" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "td",
           {
-            className: "w-0 min-w-0 p-0",
+            className: "w-0 min-w-0 p-0 pr-2",
             onClick: (e) => {
               e.stopPropagation();
             },
@@ -5594,9 +5609,6 @@ var DataDisplay = () => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full p-4", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
-// src/components/databrowser/components/sidebar/index.tsx
-
-
 // src/components/databrowser/components/add-key-modal.tsx
 
 var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
@@ -5737,7 +5749,7 @@ function AddKeyModal() {
         setOpen(open2);
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", size: "icon-sm", "aria-label": "Add key", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.PlusIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Add key", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", size: "icon-sm", "data-testid": "add-key-button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacticons.PlusIcon, { className: "size-4" }) }) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogContent, { className: "max-w-[400px]", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { children: "Create new key" }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sr-only", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactdialog.DialogDescription, { children: "Create new key" }) }),
@@ -5798,6 +5810,9 @@ var Empty = () => {
   ] }) });
 };
 
+// src/components/databrowser/components/sidebar/keys-list.tsx
+
+
 // src/components/databrowser/components/sidebar-context-menu.tsx
 
 
@@ -5806,19 +5821,22 @@ var Empty = () => {
 var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
   const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
-  const [dataKey, setDataKey] = _react.useState.call(void 0, "");
-  const { addTab, setSelectedKey, selectTab, setSearch } = useDatabrowserStore();
-  const { search: currentSearch } = useTab();
+  const [contextKeys, setContextKeys] = _react.useState.call(void 0, []);
+  const { addTab, setSelectedKey: setSelectedKeyGlobal, selectTab, setSearch } = useDatabrowserStore();
+  const { search: currentSearch, selectedKeys, setSelectedKey } = useTab();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DeleteAlertDialog,
       {
         deletionType: "key",
+        count: contextKeys.length,
         open: isAlertOpen,
         onOpenChange: setAlertOpen,
         onDeleteConfirm: (e) => {
           e.stopPropagation();
-          deleteKey(dataKey);
+          for (const key of contextKeys) {
+            deleteKey(key);
+          }
           setAlertOpen(false);
         }
       }
@@ -5831,7 +5849,13 @@ var SidebarContextMenu = ({ children }) => {
             const el = e.target;
             const key = el.closest("[data-key]");
             if (key && key instanceof HTMLElement && key.dataset.key !== void 0) {
-              setDataKey(key.dataset.key);
+              const clickedKey = key.dataset.key;
+              if (selectedKeys.includes(clickedKey)) {
+                setContextKeys(selectedKeys);
+              } else {
+                setSelectedKey(clickedKey);
+                setContextKeys([clickedKey]);
+              }
             } else {
               throw new Error("Key not found");
             }
@@ -5844,12 +5868,13 @@ var SidebarContextMenu = ({ children }) => {
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(dataKey);
+              navigator.clipboard.writeText(contextKeys[0]);
               toast({
                 description: "Key copied to clipboard"
               });
             },
             className: "gap-2",
+            disabled: contextKeys.length !== 1,
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCopy, { size: 16 }),
               "Copy key"
@@ -5861,11 +5886,12 @@ var SidebarContextMenu = ({ children }) => {
           {
             onClick: () => {
               const newTabId = addTab();
-              setSelectedKey(newTabId, dataKey);
+              setSelectedKeyGlobal(newTabId, contextKeys[0]);
               setSearch(newTabId, currentSearch);
               selectTab(newTabId);
             },
             className: "gap-2",
+            disabled: contextKeys.length !== 1,
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 16 }),
               "Open in new tab"
@@ -5875,7 +5901,7 @@ var SidebarContextMenu = ({ children }) => {
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactcontextmenu.ContextMenuSeparator, {}),
         /* @__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"
+          contextKeys.length > 1 ? `Delete ${contextKeys.length} keys` : "Delete key"
         ] })
       ] })
     ] })
@@ -5886,7 +5912,23 @@ var SidebarContextMenu = ({ children }) => {
 
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _53 => _53.at, 'call', _54 => _54(i + 1), 'optionalAccess', _55 => _55[0]]), () => ( "")), data }, data[0])) }) });
+  const lastClickedIndexRef = _react.useRef.call(void 0, null);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-px" }),
+    keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        KeyItem,
+        {
+          index: i,
+          data,
+          allKeys: keys,
+          lastClickedIndexRef
+        },
+        data[0]
+      ),
+      i !== keys.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "-z-10 mx-2 h-px bg-zinc-100 dark:bg-zinc-200" })
+    ] }))
+  ] }) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5897,11 +5939,33 @@ var keyStyles = {
   list: "border-orange-400 !bg-orange-50 text-orange-900",
   stream: "border-green-400 !bg-green-50 text-green-900"
 };
-var KeyItem = ({ data, nextKey }) => {
-  const { selectedKey, setSelectedKey } = useTab();
+var KeyItem = ({
+  data,
+  index,
+  allKeys,
+  lastClickedIndexRef
+}) => {
+  const { selectedKeys, setSelectedKeys, setSelectedKey } = useTab();
   const [dataKey, dataType] = data;
-  const isKeySelected = selectedKey === dataKey;
-  const isNextKeySelected = selectedKey === nextKey;
+  const isKeySelected = selectedKeys.includes(dataKey);
+  const handleClick = (e) => {
+    if (e.shiftKey && lastClickedIndexRef.current !== null) {
+      const start = Math.min(lastClickedIndexRef.current, index);
+      const end = Math.max(lastClickedIndexRef.current, index);
+      const rangeKeys = allKeys.slice(start, end + 1).map(([key]) => key);
+      setSelectedKeys(rangeKeys);
+    } else if (e.metaKey || e.ctrlKey) {
+      if (isKeySelected) {
+        setSelectedKeys(selectedKeys.filter((k) => k !== dataKey));
+      } else {
+        setSelectedKeys([...selectedKeys, dataKey]);
+      }
+      lastClickedIndexRef.current = index;
+    } else {
+      setSelectedKey(dataKey);
+      lastClickedIndexRef.current = index;
+    }
+  };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     Button,
     {
@@ -5909,20 +5973,47 @@ var KeyItem = ({ data, nextKey }) => {
       variant: isKeySelected ? "default" : "ghost",
       className: cn(
         "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 !ring-0 focus-visible:bg-zinc-50",
-        "select-none border border-transparent text-left",
+        "-my-px select-none border border-transparent text-left",
         isKeySelected && "shadow-sm",
         isKeySelected && keyStyles[dataType]
       ),
-      onClick: () => setSelectedKey(dataKey),
+      onClick: handleClick,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TypeTag, { variant: dataType, type: "icon" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate whitespace-nowrap", children: dataKey }),
-        !isKeySelected && !isNextKeySelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute -bottom-px left-3 right-3 h-px bg-zinc-100" })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate whitespace-nowrap", children: dataKey })
       ]
     }
   );
 };
 
+// src/components/databrowser/components/sidebar/reload-button.tsx
+
+
+
+var ReloadButton = ({
+  onClick,
+  isLoading: isLoadingProp
+}) => {
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
+  const handleClick = () => {
+    setIsLoading(true);
+    onClick();
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 350);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SimpleTooltip, { content: "Refresh", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Button,
+    {
+      variant: "outline",
+      size: "icon-sm",
+      onClick: handleClick,
+      disabled: isLoading || isLoadingProp,
+      children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconLoader2, { className: "animate-spin text-zinc-500", size: 16 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
+    }
+  ) }) });
+};
+
 // src/components/databrowser/components/sidebar/search-input.tsx
 
 
@@ -5962,7 +6053,7 @@ var SearchInput = () => {
     } else if (e.key === "Escape") {
       setState("");
       setFocusedIndex(-1);
-      _optionalChain([inputRef, 'access', _56 => _56.current, 'optionalAccess', _57 => _57.blur, 'call', _58 => _58()]);
+      _optionalChain([inputRef, 'access', _53 => _53.current, 'optionalAccess', _54 => _54.blur, 'call', _55 => _55()]);
     } else if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey) {
       e.preventDefault();
       if (focusedIndex < filteredHistory.length - 1) {
@@ -5976,7 +6067,7 @@ var SearchInput = () => {
         setFocusedIndex(focusedIndex - 1);
       } else if (filteredHistory.length > 0 && focusedIndex === 0) {
         setFocusedIndex(-1);
-        _optionalChain([inputRef, 'access', _59 => _59.current, 'optionalAccess', _60 => _60.focus, 'call', _61 => _61()]);
+        _optionalChain([inputRef, 'access', _56 => _56.current, 'optionalAccess', _57 => _57.focus, 'call', _58 => _58()]);
       } else if (filteredHistory.length > 0) {
         setFocusedIndex(filteredHistory.length - 1);
       }
@@ -5984,12 +6075,12 @@ var SearchInput = () => {
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative grow", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open: isFocus && filteredHistory.length > 0, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-8 rounded-md rounded-l-none border border-zinc-300 font-normal", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Input,
         {
           ref: inputRef,
           placeholder: "Search",
-          className: "rounded-l-none border-zinc-300 font-normal",
+          className: "h-full rounded-l-none border-none pr-6",
           onKeyDown: handleKeyDown,
           onChange: (e) => {
             setState(e.currentTarget.value);
@@ -6092,10 +6183,8 @@ function Sidebar() {
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayDbSize, {}),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-1", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Button,
+            ReloadButton,
             {
-              "aria-label": "Refresh",
-              className: "h-7 w-7 px-0 text-zinc-500",
               onClick: () => {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_KEYS_QUERY_KEY]
@@ -6113,7 +6202,7 @@ function Sidebar() {
                   queryKey: [FETCH_KEY_TYPE_QUERY_KEY]
                 });
               },
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { size: 16 }) })
+              isLoading: query.isFetching
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {})
@@ -6279,7 +6368,7 @@ var useOverflow = () => {
     }
     if (!node) return;
     observerRef.current = new ResizeObserver((entries) => {
-      const el = _optionalChain([entries, 'access', _62 => _62.at, 'call', _63 => _63(0), 'optionalAccess', _64 => _64.target]);
+      const el = _optionalChain([entries, 'access', _59 => _59.at, 'call', _60 => _60(0), 'optionalAccess', _61 => _61.target]);
       if (!el) return;
       setIsOverflow(el.scrollWidth > el.clientWidth);
     });
@@ -6287,7 +6376,7 @@ var useOverflow = () => {
   }, []);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([observerRef, 'access', _65 => _65.current, 'optionalAccess', _66 => _66.disconnect, 'call', _67 => _67()]);
+      _optionalChain([observerRef, 'access', _62 => _62.current, 'optionalAccess', _63 => _63.disconnect, 'call', _64 => _64()]);
     };
   }, []);
   return { ref, isOverflow };
@@ -6340,7 +6429,7 @@ var Tab = ({ id, isList }) => {
               e.stopPropagation();
               removeTab(id);
             },
-            className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500",
+            className: "p-1 text-zinc-300 transition-colors hover:text-zinc-500 dark:text-zinc-400",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconX, { size: 16 })
           }
         )
@@ -6397,8 +6486,8 @@ 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 tabData = _optionalChain([tabs, 'access', _65 => _65.find, 'call', _66 => _66(([tabId]) => tabId === id), 'optionalAccess', _67 => _67[1]]);
+  const isPinned = _optionalChain([tabData, 'optionalAccess', _68 => _68.pinned]);
   const { attributes, listeners: listeners2, setNodeRef, transform, transition, isDragging } = _sortable.useSortable.call(void 0, {
     id,
     disabled: isPinned,
@@ -6618,7 +6707,7 @@ function AddTabButton() {
     const tabsId = addTab();
     selectTab(tabsId);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _72 => _72.current, 'optionalAccess', _73 => _73.querySelector, 'call', _74 => _74(`#tab-${tabsId}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _69 => _69.current, 'optionalAccess', _70 => _70.querySelector, 'call', _71 => _71(`#tab-${tabsId}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);
@@ -6630,8 +6719,8 @@ function AddTabButton() {
       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 })
+      className: "flex-shrink-0 dark:bg-zinc-200",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { className: "text-zinc-500 dark:text-zinc-600", size: 16 })
     }
   );
 }
@@ -6652,7 +6741,7 @@ function TabsListButton({
     onSelectTab(id);
     setOpen(false);
     setTimeout(() => {
-      const tab = _optionalChain([rootRef, 'optionalAccess', _75 => _75.current, 'optionalAccess', _76 => _76.querySelector, 'call', _77 => _77(`#tab-${id}`)]);
+      const tab = _optionalChain([rootRef, 'optionalAccess', _72 => _72.current, 'optionalAccess', _73 => _73.querySelector, 'call', _74 => _74(`#tab-${id}`)]);
       if (!tab) return;
       tab.scrollIntoView({ behavior: "smooth" });
     }, 20);