@upstash/react-redis-browser 0.1.2-canary-5 → 0.1.2-canary-7

package/dist/index.css

@@ -971,6 +971,10 @@
 .ups-db .p-6 {
   padding: 1.5rem;
 }
+.ups-db .px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 .ups-db .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;

package/dist/index.js

@@ -2891,6 +2891,12 @@ function Toaster() {
 
 
 
+
+
+
+
+
+
 // src/components/databrowser/hooks/use-fetch-keys.ts
 
 
@@ -2908,35 +2914,28 @@ var DATA_TYPE_NAMES = {
 
 // src/components/databrowser/hooks/use-fetch-keys.ts
 var PAGE_SIZE = 30;
-var INITIAL_FETCH_COUNT = 100;
-var MAX_FETCH_COUNT = 1e3;
+var FETCH_COUNTS = [100, 200, 400, 800];
 var useFetchKeys = (search) => {
   const { redis } = useDatabrowser();
   const cache = _react.useRef.call(void 0, );
   const lastKey = _react.useRef.call(void 0, );
-  const getPage = _react.useCallback.call(void 0, 
-    (page) => {
-      const newKey = JSON.stringify(search);
-      if (!cache.current || lastKey.current !== newKey) {
-        cache.current = new PaginationCache(redis, search.key, search.type);
-        lastKey.current = newKey;
-      }
-      return cache.current.getPage(page);
-    },
-    [search]
-  );
+  const fetchKeys = _react.useCallback.call(void 0, () => {
+    const newKey = JSON.stringify(search);
+    if (!cache.current || lastKey.current !== newKey) {
+      cache.current = new PaginationCache(redis, search.key, search.type);
+      lastKey.current = newKey;
+    }
+    return cache.current.fetchNewKeys();
+  }, [search]);
   const resetCache = _react.useCallback.call(void 0, () => {
     cache.current = void 0;
     lastKey.current = void 0;
   }, []);
   return {
-    getPage,
+    fetchKeys,
     resetCache
   };
 };
-function slicePage(keys, page) {
-  return keys.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
-}
 var PaginationCache = (_class = class {
   constructor(redis, searchTerm, typeFilter) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);
     this.redis = redis;
@@ -2952,8 +2951,9 @@ var PaginationCache = (_class = class {
   )}
   __init2() {this.targetCount = 0}
   __init3() {this.isFetching = false}
-  async getPage(page) {
-    this.targetCount = (page + 1) * PAGE_SIZE + 1;
+  async fetchNewKeys() {
+    const initialKeys = new Set(this.getKeys().map(([key]) => key));
+    this.targetCount = this.getKeys().length + PAGE_SIZE;
     void this.startFetch();
     await new Promise((resolve) => {
       const interval = setInterval(() => {
@@ -2963,10 +2963,9 @@ var PaginationCache = (_class = class {
         }
       }, 100);
     });
-    const hasEnoughForNextPage = this.getLength() > (page + 1) * PAGE_SIZE;
-    const hasNextPage = !this.isAllEnded() || hasEnoughForNextPage;
+    const hasNextPage = !this.isAllEnded();
     return {
-      keys: slicePage(this.getKeys(), page),
+      keys: this.getKeys().filter(([key]) => !initialKeys.has(key)),
       hasNextPage
     };
   }
@@ -2992,33 +2991,29 @@ var PaginationCache = (_class = class {
     }
   }
   __init4() {this.fetchForType = async (type) => {
-    let fetchCount = INITIAL_FETCH_COUNT;
+    let i = 0;
     while (true) {
       const cursor = this.cache[type].cursor;
       if (cursor === "-1" || this.getLength() >= this.targetCount) {
         break;
       }
+      const fetchCount = FETCH_COUNTS[Math.min(i, FETCH_COUNTS.length - 1)];
       const [nextCursor, newKeys] = await this.redis.scan(cursor, {
         count: fetchCount,
         match: this.searchTerm,
         type
       });
-      fetchCount = Math.min(fetchCount * 2, MAX_FETCH_COUNT);
-      const dedupedSet = /* @__PURE__ */ new Set([...this.cache[type].keys, ...newKeys]);
-      this.cache[type].keys = [...dedupedSet];
+      this.cache[type].keys = [...this.cache[type].keys, ...newKeys];
       this.cache[type].cursor = nextCursor === "0" ? "-1" : nextCursor;
+      i++;
     }
   }}
   async fetch() {
     const types = this.typeFilter ? [this.typeFilter] : DATA_TYPES;
     await Promise.all(types.map(this.fetchForType));
   }
-  // TODO: Yusuf, implement this function
   isAllEnded() {
     const types = this.typeFilter ? [this.typeFilter] : DATA_TYPES;
-    if (!Array.isArray(types)) {
-      throw new TypeError("types is not an array");
-    }
     return types.every((type) => this.cache[type] && this.cache[type].cursor === "-1");
   }
 }, _class);
@@ -3036,17 +3031,21 @@ var KeysProvider = ({ children }) => {
     }),
     [searchState]
   );
-  const { getPage, resetCache } = useFetchKeys(search);
+  const { fetchKeys, resetCache } = useFetchKeys(search);
+  const pageRef = _react.useRef.call(void 0, 0);
   const query = _reactquery.useInfiniteQuery.call(void 0, {
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
     initialPageParam: 0,
-    queryFn: async ({ pageParam: pageIndex }) => {
-      return getPage(pageIndex);
+    queryFn: async ({ pageParam: page }) => {
+      if (pageRef.current >= page) resetCache();
+      pageRef.current = page;
+      return await fetchKeys();
     },
     select: (data) => data,
     getNextPageParam: (lastPage, __, lastPageIndex) => {
       return lastPage.hasNextPage ? lastPageIndex + 1 : void 0;
-    }
+    },
+    refetchOnMount: false
   });
   const refetch = _react.useCallback.call(void 0, () => {
     resetCache();
@@ -3054,8 +3053,14 @@ var KeysProvider = ({ children }) => {
   }, [query, resetCache]);
   const keys = _react.useMemo.call(void 0, () => {
     const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _10 => _10.data, 'optionalAccess', _11 => _11.pages, 'access', _12 => _12.flatMap, 'call', _13 => _13((page) => page.keys)]), () => ( []));
-    const keysSet = new Set(keys2.map(([key, _]) => key));
-    return keys2.filter(([key, _]) => keysSet.has(key));
+    const keysSet = /* @__PURE__ */ new Set();
+    const dedupedKeys = [];
+    for (const key of keys2) {
+      if (keysSet.has(key[0])) continue;
+      keysSet.add(key[0]);
+      dedupedKeys.push(key);
+    }
+    return dedupedKeys;
   }, [query.data]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     KeysContext.Provider,
@@ -3171,39 +3176,39 @@ var useAddKey = () => {
     mutationFn: async ({ key, type }) => {
       switch (type) {
         case "set": {
-          redis.sadd(key, "value");
+          await redis.sadd(key, "value");
           break;
         }
         case "zset": {
-          redis.zadd(key, {
+          await redis.zadd(key, {
             member: "value",
             score: 0
           });
           break;
         }
         case "hash": {
-          redis.hset(key, {
+          await redis.hset(key, {
             field: "field",
             value: "value"
           });
           break;
         }
         case "list": {
-          redis.lpush(key, "value");
+          await redis.lpush(key, "value");
           break;
         }
         case "stream": {
-          redis.xadd(key, "*", {
+          await redis.xadd(key, "*", {
             foo: "bar"
           });
           break;
         }
         case "string": {
-          redis.set(key, "value");
+          await redis.set(key, "value");
           break;
         }
         case "json": {
-          redis.json.set(key, "$", {
+          await redis.json.set(key, "$", {
             foo: "bar"
           });
           break;
@@ -3802,7 +3807,9 @@ function DeleteAlertDialog({
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogDescription, { className: "mt-5", children: [
           "Are you sure you want to delete this ",
           deletionType,
-          "? This action cannot be undone."
+          "?",
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
+          "This action cannot be undone."
         ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogFooter, { children: [
@@ -3825,12 +3832,11 @@ function DeleteAlertDialog({
 var ItemContextMenu = ({
   children,
   dataKey,
-  itemKey,
-  itemValue,
   type
 }) => {
   const { mutate: editItem } = useEditListItem();
   const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
+  const [data, setData] = _react.useState.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DeleteAlertDialog,
@@ -3840,25 +3846,46 @@ var ItemContextMenu = ({
         onOpenChange: setAlertOpen,
         onDeleteConfirm: (e) => {
           e.stopPropagation();
-          editItem({
-            type,
-            dataKey,
-            itemKey,
-            // For deletion
-            newKey: void 0
-          });
+          if (data) {
+            editItem({
+              type,
+              dataKey,
+              itemKey: _optionalChain([data, 'optionalAccess', _20 => _20.key]),
+              // For deletion
+              newKey: void 0
+            });
+          }
           setAlertOpen(false);
         }
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenu, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuTrigger, { asChild: true, children }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ContextMenuTrigger,
+        {
+          asChild: true,
+          onContextMenu: (e) => {
+            const el = e.target;
+            const item = el.closest("[data-item-key]");
+            if (item && item instanceof HTMLElement && item.dataset.itemKey !== void 0) {
+              setData({
+                key: item.dataset.itemKey,
+                value: item.dataset.itemValue
+              });
+            } else {
+              throw new Error("Key not found");
+            }
+          },
+          children
+        }
+      ),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(itemKey);
+              if (!data) return;
+              navigator.clipboard.writeText(_optionalChain([data, 'optionalAccess', _21 => _21.key]));
               toast({
                 description: "Key copied to clipboard"
               });
@@ -3866,11 +3893,11 @@ var ItemContextMenu = ({
             children: "Copy key"
           }
         ),
-        itemValue !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _optionalChain([data, 'optionalAccess', _22 => _22.value]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(itemValue);
+              navigator.clipboard.writeText(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _23 => _23.value]), () => ( "")));
               toast({
                 description: "Value copied to clipboard"
               });
@@ -4243,7 +4270,7 @@ var Spinner = ({
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round",
-        className: "ml-2 h-4 w-4 animate-spin",
+        className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
       }
     )
@@ -4362,7 +4389,7 @@ var LengthBadge = ({
   content
 }) => {
   const { data, isLoading } = useFetchKeyLength({ dataKey, type });
-  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _20 => _20.length]), () => ( data));
+  const length = _nullishCoalesce(_optionalChain([content, 'optionalAccess', _24 => _24.length]), () => ( data));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Badge, { label: "Length:", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { className: "ml-1 h-3 w-10 rounded-md opacity-50" }) : length });
 };
 var SizeBadge = ({ dataKey }) => {
@@ -4540,7 +4567,14 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DeleteAlertDialog, { deletionType: "key", onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        DeleteAlertDialog,
+        {
+          deletionType: "key",
+          onDeleteConfirm: async () => await deleteKey(dataKey),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" })
+        }
+      )
     ] })
   ] });
 }
@@ -4588,7 +4622,7 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "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 z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900",
+      "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 dark:bg-zinc-50 dark:text-zinc-900",
       className
     ),
     ...props
@@ -4682,7 +4716,7 @@ var CustomEditor = ({
     if (!monaco || !editorRef.current) {
       return;
     }
-    _optionalChain([monaco, 'optionalAccess', _21 => _21.editor, 'access', _22 => _22.setModelLanguage, 'call', _23 => _23(editorRef.current.getModel(), language)]);
+    _optionalChain([monaco, 'optionalAccess', _25 => _25.editor, 'access', _26 => _26.setModelLanguage, 'call', _27 => _27(editorRef.current.getModel(), language)]);
   }, [monaco, language]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
@@ -4928,7 +4962,7 @@ var ListDisplay = ({ dataKey, type }) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayHeader, { dataKey, type }),
     selectedListItem && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListEditDisplay, { dataKey, type, item: selectedListItem }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "table", { className: "w-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListItems, { dataKey, type, query }) }) }) }) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfiniteScroll, { query, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "table", { className: "w-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListItems, { dataKey, type, query }) }) }) }) }) }) })
   ] });
 };
 var ListItems = ({
@@ -4937,70 +4971,63 @@ var ListItems = ({
   dataKey
 }) => {
   const { setSelectedListItem } = useDatabrowserStore();
-  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _24 => _24.data, 'optionalAccess', _25 => _25.pages, 'access', _26 => _26.flatMap, 'call', _27 => _27((page) => page.keys)]), () => ( [])), [query.data]);
+  const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _28 => _28.data, 'optionalAccess', _29 => _29.pages, 'access', _30 => _30.flatMap, 'call', _31 => _31((page) => page.keys)]), () => ( [])), [query.data]);
   const { mutate: editItem } = useEditListItem();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    ItemContextMenu,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "tr",
     {
-      dataKey,
-      type,
-      itemKey: key,
-      itemValue: value,
-      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        "tr",
-        {
-          onClick: () => {
-            setSelectedListItem({ key, value });
-          },
-          className: "h-10 border-b border-b-zinc-100 hover:bg-zinc-50",
-          children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "td",
-              {
-                className: cn(
-                  "cursor-pointer truncate px-3",
-                  type === "list" || type === "stream" ? "w-32 min-w-24" : "max-w-0"
-                ),
-                children: key
-              }
-            ),
-            value !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "td",
-              {
-                className: cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0"),
-                children: value
-              }
+      "data-item-key": key,
+      "data-item-value": value,
+      onClick: () => {
+        setSelectedListItem({ key, value });
+      },
+      className: "h-10 border-b border-b-zinc-100 hover:bg-zinc-50",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "td",
+          {
+            className: cn(
+              "cursor-pointer truncate px-3",
+              type === "list" || type === "stream" ? "w-32 min-w-24" : "max-w-0"
             ),
-            type !== "stream" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "td",
+            children: key
+          }
+        ),
+        value !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "td",
+          {
+            className: cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0"),
+            children: value
+          }
+        ),
+        type !== "stream" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "td",
+          {
+            width: 20,
+            className: "px-3",
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              DeleteAlertDialog,
               {
-                width: 20,
-                className: "px-3",
-                onClick: (e) => {
+                deletionType: "item",
+                onDeleteConfirm: (e) => {
                   e.stopPropagation();
+                  editItem({
+                    type,
+                    dataKey,
+                    itemKey: key,
+                    // For deletion
+                    newKey: void 0
+                  });
                 },
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  DeleteAlertDialog,
-                  {
-                    deletionType: "item",
-                    onDeleteConfirm: (e) => {
-                      e.stopPropagation();
-                      editItem({
-                        type,
-                        dataKey,
-                        itemKey: key,
-                        // For deletion
-                        newKey: void 0
-                      });
-                    },
-                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", variant: "secondary", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { className: "size-4 text-zinc-500" }) })
-                  }
-                )
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "icon-sm", variant: "secondary", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconTrash, { className: "size-4 text-zinc-500" }) })
               }
             )
-          ]
-        }
-      )
+          }
+        )
+      ]
     },
     `${dataKey}-${key}-${i}`
   )) });
@@ -5070,10 +5097,14 @@ var EditorDisplayForm = ({
 
 var DataDisplay = () => {
   const { selectedKey } = useDatabrowserStore();
+  const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl border p-1 bg-white", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? /* @__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-gray-500", children: "Loading..." }) }) : /* @__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 }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl border bg-white p-1", 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-gray-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);
@@ -5199,7 +5230,7 @@ function AddKeyModal() {
       setSelectedKey(key);
       setOpen(false);
       setTimeout(() => {
-        _optionalChain([window, 'access', _28 => _28.document, 'access', _29 => _29.querySelector, 'call', _30 => _30(`[data-key="${key}"]`), 'optionalAccess', _31 => _31.scrollIntoView, 'call', _32 => _32({
+        _optionalChain([window, 'access', _32 => _32.document, 'access', _33 => _33.querySelector, 'call', _34 => _34(`[data-key="${key}"]`), 'optionalAccess', _35 => _35.scrollIntoView, 'call', _36 => _36({
           behavior: "smooth",
           block: "start",
           inline: "nearest"
@@ -5250,7 +5281,7 @@ function AddKeyModal() {
                 }
               )
             ] }),
-            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _33 => _33.errors, 'access', _34 => _34.key, 'optionalAccess', _35 => _35.message]) }),
+            formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _37 => _37.errors, 'access', _38 => _38.key, 'optionalAccess', _39 => _39.message]) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-6 flex justify-end gap-2", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5286,12 +5317,10 @@ var Empty = () => {
 
 
 
-var SidebarContextMenu = ({
-  children,
-  dataKey
-}) => {
+var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
   const [isAlertOpen, setAlertOpen] = _react.useState.call(void 0, false);
+  const [dataKey, setDataKey] = _react.useState.call(void 0, "");
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DeleteAlertDialog,
@@ -5307,7 +5336,21 @@ var SidebarContextMenu = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenu, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextMenuTrigger, { asChild: true, children }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ContextMenuTrigger,
+        {
+          onContextMenu: (e) => {
+            const el = e.target;
+            const key = el.closest("[data-key]");
+            if (key && key instanceof HTMLElement && key.dataset.key !== void 0) {
+              setDataKey(key.dataset.key);
+            } else {
+              throw new Error("Key not found");
+            }
+          },
+          children
+        }
+      ),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ContextMenuContent, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           ContextMenuItem,
@@ -5332,7 +5375,7 @@ var SidebarContextMenu = ({
 
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _36 => _36.at, 'call', _37 => _37(i + 1), 'optionalAccess', _38 => _38[0]]), () => ( "")), data }, data[0])) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__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', _40 => _40.at, 'call', _41 => _41(i + 1), 'optionalAccess', _42 => _42[0]]), () => ( "")), data }, data[0])) }) }) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5348,7 +5391,7 @@ var KeyItem = ({ data, nextKey }) => {
   const [dataKey, dataType] = data;
   const isKeySelected = selectedKey === dataKey;
   const isNextKeySelected = selectedKey === nextKey;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { dataKey, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     Button,
     {
       "data-key": dataKey,
@@ -5366,7 +5409,7 @@ var KeyItem = ({ data, nextKey }) => {
         !isKeySelected && !isNextKeySelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute -bottom-px left-3 right-3 h-px bg-zinc-100" })
       ]
     }
-  ) }, dataKey);
+  );
 };
 
 // src/components/databrowser/components/sidebar/search-input.tsx
@@ -5440,12 +5483,15 @@ function DataTypeSelector() {
 // src/components/databrowser/components/sidebar/index.tsx
 
 function Sidebar() {
-  const { keys, query } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1 bg-white", children: [
+  const { keys, query, refetch } = useKeys();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center justify-between pl-1", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayDbSize, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {}) })
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { className: "h-7 w-7 px-0", onClick: refetch, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { size: 16 }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {})
+        ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, {}),

package/dist/index.mjs

@@ -2888,7 +2888,13 @@ function Toaster() {
 }
 
 // src/components/databrowser/hooks/use-keys.tsx
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import {
+  createContext as createContext2,
+  useCallback as useCallback2,
+  useContext as useContext2,
+  useMemo as useMemo2,
+  useRef as useRef2
+} from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 
 // src/components/databrowser/hooks/use-fetch-keys.ts
@@ -2908,35 +2914,28 @@ var DATA_TYPE_NAMES = {
 
 // src/components/databrowser/hooks/use-fetch-keys.ts
 var PAGE_SIZE = 30;
-var INITIAL_FETCH_COUNT = 100;
-var MAX_FETCH_COUNT = 1e3;
+var FETCH_COUNTS = [100, 200, 400, 800];
 var useFetchKeys = (search) => {
   const { redis } = useDatabrowser();
   const cache = useRef();
   const lastKey = useRef();
-  const getPage = useCallback(
-    (page) => {
-      const newKey = JSON.stringify(search);
-      if (!cache.current || lastKey.current !== newKey) {
-        cache.current = new PaginationCache(redis, search.key, search.type);
-        lastKey.current = newKey;
-      }
-      return cache.current.getPage(page);
-    },
-    [search]
-  );
+  const fetchKeys = useCallback(() => {
+    const newKey = JSON.stringify(search);
+    if (!cache.current || lastKey.current !== newKey) {
+      cache.current = new PaginationCache(redis, search.key, search.type);
+      lastKey.current = newKey;
+    }
+    return cache.current.fetchNewKeys();
+  }, [search]);
   const resetCache = useCallback(() => {
     cache.current = void 0;
     lastKey.current = void 0;
   }, []);
   return {
-    getPage,
+    fetchKeys,
     resetCache
   };
 };
-function slicePage(keys, page) {
-  return keys.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
-}
 var PaginationCache = class {
   constructor(redis, searchTerm, typeFilter) {
     this.redis = redis;
@@ -2952,8 +2951,9 @@ var PaginationCache = class {
   );
   targetCount = 0;
   isFetching = false;
-  async getPage(page) {
-    this.targetCount = (page + 1) * PAGE_SIZE + 1;
+  async fetchNewKeys() {
+    const initialKeys = new Set(this.getKeys().map(([key]) => key));
+    this.targetCount = this.getKeys().length + PAGE_SIZE;
     void this.startFetch();
     await new Promise((resolve) => {
       const interval = setInterval(() => {
@@ -2963,10 +2963,9 @@ var PaginationCache = class {
         }
       }, 100);
     });
-    const hasEnoughForNextPage = this.getLength() > (page + 1) * PAGE_SIZE;
-    const hasNextPage = !this.isAllEnded() || hasEnoughForNextPage;
+    const hasNextPage = !this.isAllEnded();
     return {
-      keys: slicePage(this.getKeys(), page),
+      keys: this.getKeys().filter(([key]) => !initialKeys.has(key)),
       hasNextPage
     };
   }
@@ -2992,33 +2991,29 @@ var PaginationCache = class {
     }
   }
   fetchForType = async (type) => {
-    let fetchCount = INITIAL_FETCH_COUNT;
+    let i = 0;
     while (true) {
       const cursor = this.cache[type].cursor;
       if (cursor === "-1" || this.getLength() >= this.targetCount) {
         break;
       }
+      const fetchCount = FETCH_COUNTS[Math.min(i, FETCH_COUNTS.length - 1)];
       const [nextCursor, newKeys] = await this.redis.scan(cursor, {
         count: fetchCount,
         match: this.searchTerm,
         type
       });
-      fetchCount = Math.min(fetchCount * 2, MAX_FETCH_COUNT);
-      const dedupedSet = /* @__PURE__ */ new Set([...this.cache[type].keys, ...newKeys]);
-      this.cache[type].keys = [...dedupedSet];
+      this.cache[type].keys = [...this.cache[type].keys, ...newKeys];
       this.cache[type].cursor = nextCursor === "0" ? "-1" : nextCursor;
+      i++;
     }
   };
   async fetch() {
     const types = this.typeFilter ? [this.typeFilter] : DATA_TYPES;
     await Promise.all(types.map(this.fetchForType));
   }
-  // TODO: Yusuf, implement this function
   isAllEnded() {
     const types = this.typeFilter ? [this.typeFilter] : DATA_TYPES;
-    if (!Array.isArray(types)) {
-      throw new TypeError("types is not an array");
-    }
     return types.every((type) => this.cache[type] && this.cache[type].cursor === "-1");
   }
 };
@@ -3036,17 +3031,21 @@ var KeysProvider = ({ children }) => {
     }),
     [searchState]
   );
-  const { getPage, resetCache } = useFetchKeys(search);
+  const { fetchKeys, resetCache } = useFetchKeys(search);
+  const pageRef = useRef2(0);
   const query = useInfiniteQuery({
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
     initialPageParam: 0,
-    queryFn: async ({ pageParam: pageIndex }) => {
-      return getPage(pageIndex);
+    queryFn: async ({ pageParam: page }) => {
+      if (pageRef.current >= page) resetCache();
+      pageRef.current = page;
+      return await fetchKeys();
     },
     select: (data) => data,
     getNextPageParam: (lastPage, __, lastPageIndex) => {
       return lastPage.hasNextPage ? lastPageIndex + 1 : void 0;
-    }
+    },
+    refetchOnMount: false
   });
   const refetch = useCallback2(() => {
     resetCache();
@@ -3054,8 +3053,14 @@ var KeysProvider = ({ children }) => {
   }, [query, resetCache]);
   const keys = useMemo2(() => {
     const keys2 = query.data?.pages.flatMap((page) => page.keys) ?? [];
-    const keysSet = new Set(keys2.map(([key, _]) => key));
-    return keys2.filter(([key, _]) => keysSet.has(key));
+    const keysSet = /* @__PURE__ */ new Set();
+    const dedupedKeys = [];
+    for (const key of keys2) {
+      if (keysSet.has(key[0])) continue;
+      keysSet.add(key[0]);
+      dedupedKeys.push(key);
+    }
+    return dedupedKeys;
   }, [query.data]);
   return /* @__PURE__ */ jsx4(
     KeysContext.Provider,
@@ -3171,39 +3176,39 @@ var useAddKey = () => {
     mutationFn: async ({ key, type }) => {
       switch (type) {
         case "set": {
-          redis.sadd(key, "value");
+          await redis.sadd(key, "value");
           break;
         }
         case "zset": {
-          redis.zadd(key, {
+          await redis.zadd(key, {
             member: "value",
             score: 0
           });
           break;
         }
         case "hash": {
-          redis.hset(key, {
+          await redis.hset(key, {
             field: "field",
             value: "value"
           });
           break;
         }
         case "list": {
-          redis.lpush(key, "value");
+          await redis.lpush(key, "value");
           break;
         }
         case "stream": {
-          redis.xadd(key, "*", {
+          await redis.xadd(key, "*", {
             foo: "bar"
           });
           break;
         }
         case "string": {
-          redis.set(key, "value");
+          await redis.set(key, "value");
           break;
         }
         case "json": {
-          redis.json.set(key, "$", {
+          await redis.json.set(key, "$", {
             foo: "bar"
           });
           break;
@@ -3802,7 +3807,9 @@ function DeleteAlertDialog({
         /* @__PURE__ */ jsxs5(AlertDialogDescription, { className: "mt-5", children: [
           "Are you sure you want to delete this ",
           deletionType,
-          "? This action cannot be undone."
+          "?",
+          /* @__PURE__ */ jsx10("br", {}),
+          "This action cannot be undone."
         ] })
       ] }),
       /* @__PURE__ */ jsxs5(AlertDialogFooter, { children: [
@@ -3825,12 +3832,11 @@ import { Fragment, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var ItemContextMenu = ({
   children,
   dataKey,
-  itemKey,
-  itemValue,
   type
 }) => {
   const { mutate: editItem } = useEditListItem();
   const [isAlertOpen, setAlertOpen] = useState4(false);
+  const [data, setData] = useState4();
   return /* @__PURE__ */ jsxs6(Fragment, { children: [
     /* @__PURE__ */ jsx11(
       DeleteAlertDialog,
@@ -3840,25 +3846,46 @@ var ItemContextMenu = ({
         onOpenChange: setAlertOpen,
         onDeleteConfirm: (e) => {
           e.stopPropagation();
-          editItem({
-            type,
-            dataKey,
-            itemKey,
-            // For deletion
-            newKey: void 0
-          });
+          if (data) {
+            editItem({
+              type,
+              dataKey,
+              itemKey: data?.key,
+              // For deletion
+              newKey: void 0
+            });
+          }
           setAlertOpen(false);
         }
       }
     ),
     /* @__PURE__ */ jsxs6(ContextMenu, { children: [
-      /* @__PURE__ */ jsx11(ContextMenuTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx11(
+        ContextMenuTrigger,
+        {
+          asChild: true,
+          onContextMenu: (e) => {
+            const el = e.target;
+            const item = el.closest("[data-item-key]");
+            if (item && item instanceof HTMLElement && item.dataset.itemKey !== void 0) {
+              setData({
+                key: item.dataset.itemKey,
+                value: item.dataset.itemValue
+              });
+            } else {
+              throw new Error("Key not found");
+            }
+          },
+          children
+        }
+      ),
       /* @__PURE__ */ jsxs6(ContextMenuContent, { children: [
         /* @__PURE__ */ jsx11(
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(itemKey);
+              if (!data) return;
+              navigator.clipboard.writeText(data?.key);
               toast({
                 description: "Key copied to clipboard"
               });
@@ -3866,11 +3893,11 @@ var ItemContextMenu = ({
             children: "Copy key"
           }
         ),
-        itemValue !== void 0 && /* @__PURE__ */ jsx11(
+        data?.value && /* @__PURE__ */ jsx11(
           ContextMenuItem,
           {
             onClick: () => {
-              navigator.clipboard.writeText(itemValue);
+              navigator.clipboard.writeText(data?.value ?? "");
               toast({
                 description: "Value copied to clipboard"
               });
@@ -4243,7 +4270,7 @@ var Spinner = ({
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round",
-        className: "ml-2 h-4 w-4 animate-spin",
+        className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
         children: /* @__PURE__ */ jsx18("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
       }
     )
@@ -4540,7 +4567,14 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ jsx22(DeleteAlertDialog, { deletionType: "key", onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ jsx22(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" }) })
+      /* @__PURE__ */ jsx22(
+        DeleteAlertDialog,
+        {
+          deletionType: "key",
+          onDeleteConfirm: async () => await deleteKey(dataKey),
+          children: /* @__PURE__ */ jsx22(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" })
+        }
+      )
     ] })
   ] });
 }
@@ -4588,7 +4622,7 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "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 z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900",
+      "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 dark:bg-zinc-50 dark:text-zinc-900",
       className
     ),
     ...props
@@ -4629,7 +4663,7 @@ var ContentTypeSelect = ({
 };
 
 // src/components/databrowser/components/display/input/custom-editor.tsx
-import { useEffect as useEffect6, useRef as useRef2 } from "react";
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
 import { Editor, useMonaco } from "@monaco-editor/react";
 
 // src/components/databrowser/copy-button.tsx
@@ -4677,7 +4711,7 @@ var CustomEditor = ({
   showCopyButton
 }) => {
   const monaco = useMonaco();
-  const editorRef = useRef2();
+  const editorRef = useRef3();
   useEffect6(() => {
     if (!monaco || !editorRef.current) {
       return;
@@ -4928,7 +4962,7 @@ var ListDisplay = ({ dataKey, type }) => {
   return /* @__PURE__ */ jsxs20("div", { className: "flex h-full flex-col gap-2", children: [
     /* @__PURE__ */ jsx30(DisplayHeader, { dataKey, type }),
     selectedListItem && /* @__PURE__ */ jsx30(ListEditDisplay, { dataKey, type, item: selectedListItem }),
-    /* @__PURE__ */ jsx30("div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ jsx30(InfiniteScroll, { query, children: /* @__PURE__ */ jsx30("div", { className: "pr-3", children: /* @__PURE__ */ jsx30("table", { className: "w-full", children: /* @__PURE__ */ jsx30("tbody", { children: /* @__PURE__ */ jsx30(ListItems, { dataKey, type, query }) }) }) }) }) })
+    /* @__PURE__ */ jsx30("div", { className: cn("min-h-0 grow", selectedListItem && "hidden"), children: /* @__PURE__ */ jsx30(InfiniteScroll, { query, children: /* @__PURE__ */ jsx30("div", { className: "pr-3", children: /* @__PURE__ */ jsx30("table", { className: "w-full", children: /* @__PURE__ */ jsx30(ItemContextMenu, { dataKey, type, children: /* @__PURE__ */ jsx30("tbody", { children: /* @__PURE__ */ jsx30(ListItems, { dataKey, type, query }) }) }) }) }) }) })
   ] });
 };
 var ListItems = ({
@@ -4939,68 +4973,61 @@ var ListItems = ({
   const { setSelectedListItem } = useDatabrowserStore();
   const keys = useMemo5(() => query.data?.pages.flatMap((page) => page.keys) ?? [], [query.data]);
   const { mutate: editItem } = useEditListItem();
-  return /* @__PURE__ */ jsx30(Fragment5, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ jsx30(
-    ItemContextMenu,
+  return /* @__PURE__ */ jsx30(Fragment5, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ jsxs20(
+    "tr",
     {
-      dataKey,
-      type,
-      itemKey: key,
-      itemValue: value,
-      children: /* @__PURE__ */ jsxs20(
-        "tr",
-        {
-          onClick: () => {
-            setSelectedListItem({ key, value });
-          },
-          className: "h-10 border-b border-b-zinc-100 hover:bg-zinc-50",
-          children: [
-            /* @__PURE__ */ jsx30(
-              "td",
-              {
-                className: cn(
-                  "cursor-pointer truncate px-3",
-                  type === "list" || type === "stream" ? "w-32 min-w-24" : "max-w-0"
-                ),
-                children: key
-              }
-            ),
-            value !== void 0 && /* @__PURE__ */ jsx30(
-              "td",
-              {
-                className: cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0"),
-                children: value
-              }
+      "data-item-key": key,
+      "data-item-value": value,
+      onClick: () => {
+        setSelectedListItem({ key, value });
+      },
+      className: "h-10 border-b border-b-zinc-100 hover:bg-zinc-50",
+      children: [
+        /* @__PURE__ */ jsx30(
+          "td",
+          {
+            className: cn(
+              "cursor-pointer truncate px-3",
+              type === "list" || type === "stream" ? "w-32 min-w-24" : "max-w-0"
             ),
-            type !== "stream" && /* @__PURE__ */ jsx30(
-              "td",
+            children: key
+          }
+        ),
+        value !== void 0 && /* @__PURE__ */ jsx30(
+          "td",
+          {
+            className: cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0"),
+            children: value
+          }
+        ),
+        type !== "stream" && /* @__PURE__ */ jsx30(
+          "td",
+          {
+            width: 20,
+            className: "px-3",
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            children: /* @__PURE__ */ jsx30(
+              DeleteAlertDialog,
               {
-                width: 20,
-                className: "px-3",
-                onClick: (e) => {
+                deletionType: "item",
+                onDeleteConfirm: (e) => {
                   e.stopPropagation();
+                  editItem({
+                    type,
+                    dataKey,
+                    itemKey: key,
+                    // For deletion
+                    newKey: void 0
+                  });
                 },
-                children: /* @__PURE__ */ jsx30(
-                  DeleteAlertDialog,
-                  {
-                    deletionType: "item",
-                    onDeleteConfirm: (e) => {
-                      e.stopPropagation();
-                      editItem({
-                        type,
-                        dataKey,
-                        itemKey: key,
-                        // For deletion
-                        newKey: void 0
-                      });
-                    },
-                    children: /* @__PURE__ */ jsx30(Button, { size: "icon-sm", variant: "secondary", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx30(IconTrash, { className: "size-4 text-zinc-500" }) })
-                  }
-                )
+                children: /* @__PURE__ */ jsx30(Button, { size: "icon-sm", variant: "secondary", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx30(IconTrash, { className: "size-4 text-zinc-500" }) })
               }
             )
-          ]
-        }
-      )
+          }
+        )
+      ]
     },
     `${dataKey}-${key}-${i}`
   )) });
@@ -5070,10 +5097,14 @@ var EditorDisplayForm = ({
 import { Fragment as Fragment7, jsx as jsx32 } from "react/jsx-runtime";
 var DataDisplay = () => {
   const { selectedKey } = useDatabrowserStore();
+  const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ jsx32("div", { className: "h-full rounded-xl border p-1 bg-white", children: !selectedKey ? /* @__PURE__ */ jsx32("div", {}) : !type ? /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx32(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx32(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx32(ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ jsx32("div", { className: "h-full rounded-xl border bg-white p-1", children: !selectedKey ? /* @__PURE__ */ jsx32("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx32("div", {}) : /* @__PURE__ */ jsx32(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx32(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx32(ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
+// src/components/databrowser/components/sidebar/index.tsx
+import { IconRefresh } from "@tabler/icons-react";
+
 // src/components/databrowser/components/add-key-modal.tsx
 import { useState as useState8 } from "react";
 import { DialogDescription as DialogDescription2 } from "@radix-ui/react-dialog";
@@ -5286,12 +5317,10 @@ var Empty = () => {
 import { useState as useState9 } from "react";
 import { ContextMenuSeparator as ContextMenuSeparator3 } from "@radix-ui/react-context-menu";
 import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
-var SidebarContextMenu = ({
-  children,
-  dataKey
-}) => {
+var SidebarContextMenu = ({ children }) => {
   const { mutate: deleteKey } = useDeleteKey();
   const [isAlertOpen, setAlertOpen] = useState9(false);
+  const [dataKey, setDataKey] = useState9("");
   return /* @__PURE__ */ jsxs25(Fragment8, { children: [
     /* @__PURE__ */ jsx36(
       DeleteAlertDialog,
@@ -5307,7 +5336,21 @@ var SidebarContextMenu = ({
       }
     ),
     /* @__PURE__ */ jsxs25(ContextMenu, { children: [
-      /* @__PURE__ */ jsx36(ContextMenuTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx36(
+        ContextMenuTrigger,
+        {
+          onContextMenu: (e) => {
+            const el = e.target;
+            const key = el.closest("[data-key]");
+            if (key && key instanceof HTMLElement && key.dataset.key !== void 0) {
+              setDataKey(key.dataset.key);
+            } else {
+              throw new Error("Key not found");
+            }
+          },
+          children
+        }
+      ),
       /* @__PURE__ */ jsxs25(ContextMenuContent, { children: [
         /* @__PURE__ */ jsx36(
           ContextMenuItem,
@@ -5329,10 +5372,10 @@ var SidebarContextMenu = ({
 };
 
 // src/components/databrowser/components/sidebar/keys-list.tsx
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var KeysList = () => {
   const { keys } = useKeys();
-  return /* @__PURE__ */ jsx37("div", { className: "pr-3", children: keys.map((data, i) => /* @__PURE__ */ jsx37(KeyItem, { nextKey: keys.at(i + 1)?.[0] ?? "", data }, data[0])) });
+  return /* @__PURE__ */ jsx37("div", { className: "pr-3", children: /* @__PURE__ */ jsx37(SidebarContextMenu, { children: /* @__PURE__ */ jsx37(Fragment9, { children: keys.map((data, i) => /* @__PURE__ */ jsx37(KeyItem, { nextKey: keys.at(i + 1)?.[0] ?? "", data }, data[0])) }) }) });
 };
 var keyStyles = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5348,7 +5391,7 @@ var KeyItem = ({ data, nextKey }) => {
   const [dataKey, dataType] = data;
   const isKeySelected = selectedKey === dataKey;
   const isNextKeySelected = selectedKey === nextKey;
-  return /* @__PURE__ */ jsx37(SidebarContextMenu, { dataKey, children: /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs26(
     Button,
     {
       "data-key": dataKey,
@@ -5366,7 +5409,7 @@ var KeyItem = ({ data, nextKey }) => {
         !isKeySelected && !isNextKeySelected && /* @__PURE__ */ jsx37("span", { className: "absolute -bottom-px left-3 right-3 h-px bg-zinc-100" })
       ]
     }
-  ) }, dataKey);
+  );
 };
 
 // src/components/databrowser/components/sidebar/search-input.tsx
@@ -5440,12 +5483,15 @@ function DataTypeSelector() {
 // src/components/databrowser/components/sidebar/index.tsx
 import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 function Sidebar() {
-  const { keys, query } = useKeys();
-  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1 bg-white", children: [
+  const { keys, query, refetch } = useKeys();
+  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
     /* @__PURE__ */ jsxs30("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
       /* @__PURE__ */ jsxs30("div", { className: "flex h-10 items-center justify-between pl-1", children: [
         /* @__PURE__ */ jsx41(DisplayDbSize, {}),
-        /* @__PURE__ */ jsx41("div", { className: "flex gap-1", children: /* @__PURE__ */ jsx41(AddKeyModal, {}) })
+        /* @__PURE__ */ jsxs30("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx41(Button, { className: "h-7 w-7 px-0", onClick: refetch, children: /* @__PURE__ */ jsx41(Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ jsx41(IconRefresh, { size: 16 }) }) }),
+          /* @__PURE__ */ jsx41(AddKeyModal, {})
+        ] })
       ] }),
       /* @__PURE__ */ jsxs30("div", { className: "flex h-10 items-center", children: [
         /* @__PURE__ */ jsx41(DataTypeSelector, {}),

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary-5", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ." }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.31.6", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }
+{ "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary-7", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.34.3", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }