@upstash/react-redis-browser 0.1.2-canary-4 → 0.1.2-canary-6

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,
@@ -3320,7 +3325,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         count: LIST_DISPLAY_PAGE_SIZE
       });
       return {
-        cursor: nextCursor,
+        cursor: nextCursor === "0" ? void 0 : nextCursor,
         keys: keys.map((key) => ({ key }))
       };
     },
@@ -3336,7 +3341,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         rev: true
       });
       return {
-        cursor: lastIndex + LIST_DISPLAY_PAGE_SIZE,
+        cursor: res.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastIndex + LIST_DISPLAY_PAGE_SIZE,
         keys: transformArray(res)
       };
     },
@@ -3351,7 +3356,7 @@ var useFetchListItems = ({ dataKey, type }) => {
         count: LIST_DISPLAY_PAGE_SIZE
       });
       return {
-        cursor: res[0],
+        cursor: res[0] === "0" ? void 0 : res[0],
         keys: transformArray(res[1])
       };
     },
@@ -3365,7 +3370,7 @@ var useFetchListItems = ({ dataKey, type }) => {
       const lastIndex = Number(pageParam);
       const values = await redis.lrange(dataKey, lastIndex, lastIndex + LIST_DISPLAY_PAGE_SIZE);
       return {
-        cursor: lastIndex + LIST_DISPLAY_PAGE_SIZE,
+        cursor: values.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastIndex + LIST_DISPLAY_PAGE_SIZE,
         keys: values.map((value, i) => ({
           key: (lastIndex + i).toString(),
           value
@@ -3377,17 +3382,18 @@ var useFetchListItems = ({ dataKey, type }) => {
   const streamQuery = _reactquery.useInfiniteQuery.call(void 0, {
     enabled: type === "stream",
     queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, dataKey, "stream"],
-    initialPageParam: "0",
+    initialPageParam: "-",
     queryFn: async ({ pageParam: lastId }) => {
       const messages = await redis.xrange(
         dataKey,
-        lastId,
+        lastId === "-" ? "-" : `(${lastId}`,
         "+",
-        LIST_DISPLAY_PAGE_SIZE
+        // +1 since first message is the last one
+        LIST_DISPLAY_PAGE_SIZE + 1
       );
       const lastMessageId = messages.length > 0 ? _optionalChain([messages, 'access', _15 => _15.at, 'call', _16 => _16(-1), 'optionalAccess', _17 => _17[0]]) : void 0;
       return {
-        cursor: lastMessageId,
+        cursor: messages.length < LIST_DISPLAY_PAGE_SIZE ? void 0 : lastMessageId,
         keys: messages.map(([id, fields]) => ({
           key: id,
           value: fields.join("\n")
@@ -3790,30 +3796,30 @@ function DeleteAlertDialog({
   children,
   onDeleteConfirm,
   open,
-  onOpenChange
+  onOpenChange,
+  deletionType
 }) {
   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: "Irreversible Action!" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogTitle, { children: deletionType === "item" ? "Delete Item" : "Delete Key" }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogDescription, { className: "mt-5", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-bold", children: "This action CANNOT BE UNDONE." }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
+          "Are you sure you want to delete this ",
+          deletionType,
+          "?",
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
-          "By proceeding, you will ",
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-bold", children: "PERMANENTLY REMOVE" }),
-          " your data from our servers, resulting in complete and irreversible loss of your information."
+          "This action cannot be undone."
         ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogFooter, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogCancel, { type: "button", children: "Cancel" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           AlertDialogAction,
           {
             className: "bg-red-500 text-gray-50 hover:bg-red-600",
             onClick: onDeleteConfirm,
-            children: "Delete"
+            children: "Yes, Delete"
           }
         )
       ] })
@@ -3826,39 +3832,60 @@ 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,
       {
+        deletionType: "item",
         open: isAlertOpen,
         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"
               });
@@ -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,7 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DeleteAlertDialog, { 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" }) })
     ] })
   ] });
 }
@@ -4673,7 +4700,7 @@ var CustomEditor = ({
   language,
   value,
   onChange,
-  maxDynamicHeight,
+  height,
   showCopyButton
 }) => {
   const monaco = _react2.useMonaco.call(void 0, );
@@ -4682,14 +4709,14 @@ 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",
     {
-      className: cn("group/editor relative", maxDynamicHeight === void 0 && "h-full p-2"),
+      className: cn("group/editor relative", height === void 0 && "h-full p-2"),
       style: {
-        height: maxDynamicHeight
+        height
       },
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -4749,7 +4776,7 @@ var CustomEditor = ({
 var useField = ({
   name,
   form,
-  isEditorDynamic = false,
+  height,
   showCopyButton
 }) => {
   const { field, fieldState } = _reacthookform.useController.call(void 0, {
@@ -4787,7 +4814,7 @@ var useField = ({
         language: contentType === "JSON" ? "json" : "plaintext",
         value: field.value,
         onChange: field.onChange,
-        maxDynamicHeight: isEditorDynamic ? 100 : void 0,
+        height,
         showCopyButton
       }
     ) })
@@ -4839,13 +4866,14 @@ var ListEditForm = ({
   });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacthookform.FormProvider, { ...form, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit, className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow flex-col gap-2", children: [
-      type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "key", label: keyLabel }),
-      type === "zset" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "value", label: valueLabel })
+      type !== "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "key", height: type === "set" ? 250 : 100, label: keyLabel }),
+      type === "zset" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormItem, { name: "value", height: type === "list" ? 250 : 100, label: valueLabel })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-end gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Button,
         {
+          type: "button",
           onClick: () => {
             setSelectedListItem(void 0);
           },
@@ -4889,12 +4917,16 @@ var NumberFormItem = ({ name, label }) => {
     )
   ] });
 };
-var FormItem = ({ name, label }) => {
+var FormItem = ({
+  name,
+  label,
+  height
+}) => {
   const form = _reacthookform.useFormContext.call(void 0, );
   const { editor, selector } = useField({
     name,
     form,
-    isEditorDynamic: true,
+    height,
     showCopyButton: true
   });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1", children: [
@@ -4923,7 +4955,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 = ({
@@ -4932,43 +4964,47 @@ 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", { width: 20, className: "px-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 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
+          }
+        ),
+        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,
               {
+                deletionType: "item",
                 onDeleteConfirm: (e) => {
                   e.stopPropagation();
                   editItem({
@@ -4981,10 +5017,10 @@ var ListItems = ({
                 },
                 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}`
   )) });
@@ -5060,12 +5096,13 @@ var DataDisplay = () => {
 
 // src/components/databrowser/components/add-key-modal.tsx
 
+var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
 
 
 
 // src/components/ui/dialog.tsx
 
-var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
+
 
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
@@ -5182,7 +5219,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"
@@ -5207,6 +5244,7 @@ function AddKeyModal() {
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "primary", size: "icon-sm", 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" }) }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "mt-4", onSubmit, children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-1", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5232,7 +5270,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, 
@@ -5268,16 +5306,15 @@ 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,
       {
+        deletionType: "key",
         open: isAlertOpen,
         onOpenChange: setAlertOpen,
         onDeleteConfirm: (e) => {
@@ -5288,7 +5325,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,
@@ -5313,7 +5364,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",
@@ -5329,7 +5380,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,
@@ -5347,7 +5398,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
@@ -5441,8 +5492,8 @@ function Sidebar() {
 
 var RedisBrowser = ({ token, url }) => {
   const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, KeysProvider, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ups-db", style: { height: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ups-db", style: { height: "100%" }, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       _reactresizablepanels.PanelGroup,
       {
         autoSaveId: "persistence",
@@ -5461,9 +5512,9 @@ var RedisBrowser = ({ token, url }) => {
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactresizablepanels.Panel, { minSize: 40, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataDisplay, {}) })
         ]
       }
-    ) }),
+    ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Toaster, {})
-  ] }) }) }) });
+  ] }) }) }) }) });
 };