feat: add "open in new tab" to the keys right click menu (#24)

* feat: add "open in new tab" to the keys right click menu

* fix: open in new tab for items list

Author: ytkimirti

src/components/databrowser/components/item-context-menu.tsx

@@ -1,4 +1,5 @@
 import { useState, type PropsWithChildren } from "react"
+import { useDatabrowserStore } from "@/store"
 import { type ListDataType } from "@/types"
 import { ContextMenuSeparator } from "@radix-ui/react-context-menu"
 
@@ -25,6 +26,7 @@ export const ItemContextMenu = ({
   const { mutate: editItem } = useEditListItem()
   const [isAlertOpen, setAlertOpen] = useState(false)
   const [data, setData] = useState<ItemData | undefined>()
+  const { addTab, setSelectedKey, selectTab, setSelectedListItem } = useDatabrowserStore()
 
   return (
     <>
@@ -90,6 +92,19 @@ export const ItemContextMenu = ({
               Copy value
             </ContextMenuItem>
           )}
+          <ContextMenuItem
+            onClick={() => {
+              if (!data) return
+              const newTabId = addTab()
+              selectTab(newTabId)
+              setSelectedKey(newTabId, dataKey)
+              setSelectedListItem(newTabId, {
+                key: data.key,
+              })
+            }}
+          >
+            Open in new tab
+          </ContextMenuItem>
           <ContextMenuSeparator />
           <ContextMenuItem disabled={type === "stream"} onClick={() => setAlertOpen(true)}>
             Delete item

src/components/databrowser/components/sidebar-context-menu.tsx

@@ -1,4 +1,6 @@
 import { useState, type PropsWithChildren } from "react"
+import { useDatabrowserStore } from "@/store"
+import { useTab } from "@/tab-provider"
 import { ContextMenuSeparator } from "@radix-ui/react-context-menu"
 
 import {
@@ -16,6 +18,8 @@ export const SidebarContextMenu = ({ children }: PropsWithChildren) => {
   const { mutate: deleteKey } = useDeleteKey()
   const [isAlertOpen, setAlertOpen] = useState(false)
   const [dataKey, setDataKey] = useState("")
+  const { addTab, setSelectedKey, selectTab, setSearch } = useDatabrowserStore()
+  const { search: currentSearch } = useTab()
 
   return (
     <>
@@ -56,6 +60,16 @@ export const SidebarContextMenu = ({ children }: PropsWithChildren) => {
           >
             Copy key
           </ContextMenuItem>
+          <ContextMenuItem
+            onClick={() => {
+              const newTabId = addTab()
+              setSelectedKey(newTabId, dataKey)
+              setSearch(newTabId, currentSearch)
+              selectTab(newTabId)
+            }}
+          >
+            Open in new tab
+          </ContextMenuItem>
           <ContextMenuSeparator />
           <ContextMenuItem onClick={() => setAlertOpen(true)}>Delete key</ContextMenuItem>
         </ContextMenuContent>

src/store.tsx

@@ -1,10 +1,10 @@
 import { createContext, useContext, useMemo, type PropsWithChildren } from "react"
 import type { StoreApi, UseBoundStore } from "zustand"
 import { create, useStore, type StateCreator } from "zustand"
-
-import type { DataType } from "./types"
 import { persist } from "zustand/middleware"
+
 import type { RedisBrowserStorage } from "./components/databrowser"
+import type { DataType } from "./types"
 
 // Re-export for backward compatibility
 export type { RedisCredentials } from "./redis-context"
@@ -95,7 +95,7 @@ type DatabrowserStore = {
   selectedTab: TabId | undefined
   tabs: [TabId, TabData][]
 
-  addTab: () => void
+  addTab: () => TabId
   removeTab: (id: TabId) => void
   selectTab: (id: TabId) => void
 
@@ -129,6 +129,8 @@ const storeCreator: StateCreator<DatabrowserStore> = (set, get) => ({
       tabs: [...old.tabs, [id, newTabData]],
       selectedTab: id,
     }))
+
+    return id
   },
 
   removeTab: (id) => {