upstash · ytkimirti · May 20, 2025 · May 20, 2025 · May 21, 2025 · May 21, 2025
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="/src/playground.tsx" type="module"></script>
+    <script src="/src/playground/index.tsx" type="module"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -33,8 +33,9 @@
     "@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-dropdown-menu": "^2.1.15",
     "@radix-ui/react-icons": "1.3.0",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-portal": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.0.3",

diff --git a/src/components/databrowser/components/add-key-modal.tsx b/src/components/databrowser/components/add-key-modal.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react"
-import { useDatabrowserStore } from "@/store"
 import { DATA_TYPES, type DataType } from "@/types"
 import { DialogDescription } from "@radix-ui/react-dialog"
 import { PlusIcon } from "@radix-ui/react-icons"
@@ -25,9 +24,10 @@ import {
 import { Spinner } from "@/components/ui/spinner"
 import { TypeTag } from "@/components/databrowser/components/type-tag"
 import { useAddKey } from "@/components/databrowser/hooks/use-add-key"
+import { useTab } from "@/tab-provider"
 
 export function AddKeyModal() {
-  const { setSelectedKey } = useDatabrowserStore()
+  const { setSelectedKey } = useTab()
   const [open, setOpen] = useState(false)
 
   const { mutateAsync: addKey, isPending } = useAddKey()

diff --git a/src/components/databrowser/components/databrowser-instance.tsx b/src/components/databrowser/components/databrowser-instance.tsx
@@ -0,0 +1,32 @@
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+import { Toaster } from "@/components/ui/toaster"
+import { DataDisplay } from "./display"
+import { Sidebar } from "./sidebar"
+import { KeysProvider } from "../hooks/use-keys"
+
+export const DatabrowserInstance = ({ hidden }: { hidden?: boolean }) => {
+  return (
+    <KeysProvider>
+      <div className={cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden")}>
+        <PanelGroup
+          autoSaveId="persistence"
+          direction="horizontal"
+          className="h-full w-full gap-0.5 text-sm antialiased"
+        >
+          <Panel defaultSize={30} minSize={30}>
+            <Sidebar />
+          </Panel>
+          <PanelResizeHandle className="group flex h-full w-3 justify-center">
+            <div className="h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-500" />
+          </PanelResizeHandle>
+          <Panel minSize={40}>
+            <DataDisplay />
+          </Panel>
+        </PanelGroup>
+        <Toaster />
+      </div>
+    </KeysProvider>
+  )
+}
diff --git a/src/components/databrowser/components/databrowser-tabs.tsx b/src/components/databrowser/components/databrowser-tabs.tsx
@@ -0,0 +1,33 @@
+import { IconPlus } from "@tabler/icons-react"
+import { Button } from "@/components/ui/button"
+import type { TabId } from "@/store"
+import { useDatabrowserStore } from "@/store"
+import { TabIdProvider } from "@/tab-provider"
+import { Tab } from "./tab"
+
+export const DatabrowserTabs = () => {
+  const { tabs, addTab } = useDatabrowserStore()
+
+  return (
+    <div className="relative mb-2 shrink-0">
+      <div className="absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" />
+
+      <div className="scrollbar-hide flex translate-y-[1px] items-center gap-1 overflow-x-scroll pb-[1px] [&::-webkit-scrollbar]:hidden">
+        {tabs.map(([id]) => (
+          <TabIdProvider key={id} value={id as TabId}>
+            <Tab id={id} />
+          </TabIdProvider>
+        ))}
+        <Button
+          variant="secondary"
+          size="icon-sm"
+          onClick={addTab}
+          className="mr-1 flex-shrink-0"
+          title="Add new tab"
+        >
+          <IconPlus className="text-zinc-500" size={16} />
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/databrowser/components/display/display-header.tsx b/src/components/databrowser/components/display/display-header.tsx
@@ -1,4 +1,3 @@
-import { useDatabrowserStore } from "@/store"
 import { type DataType } from "@/types"
 import { IconPlus } from "@tabler/icons-react"
 
@@ -7,6 +6,7 @@ import { Button } from "@/components/ui/button"
 import { TypeTag } from "../type-tag"
 import { HeaderTTLBadge, LengthBadge, SizeBadge } from "./header-badges"
 import { KeyActions } from "./key-actions"
+import { useTab } from "@/tab-provider"
 
 export const DisplayHeader = ({
   dataKey,
@@ -17,14 +17,14 @@ export const DisplayHeader = ({
   dataKey: string
   type: DataType
 }) => {
-  const { setSelectedListItem } = useDatabrowserStore()
+  const { setSelectedListItem } = useTab()
 
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true })
   }
 
   return (
-    <div className="rounded-lg bg-zinc-100 px-3 py-2">
+    <div className="rounded-lg bg-zinc-100">
       <div className="flex min-h-10 items-center justify-between gap-4">
         <h2 className="grow truncate text-base">
           {dataKey.trim() === "" ? (

diff --git a/src/components/databrowser/components/display/display-list-edit.tsx b/src/components/databrowser/components/display/display-list-edit.tsx
@@ -1,5 +1,4 @@
 import type { SelectedItem } from "@/store"
-import { useDatabrowserStore } from "@/store"
 import type { ListDataType } from "@/types"
 import { Controller, FormProvider, useForm, useFormContext } from "react-hook-form"
 
@@ -13,6 +12,7 @@ import { useEditListItem } from "../../hooks/use-edit-list-item"
 import { headerLabels } from "./display-list"
 import { HashFieldTTLBadge } from "./hash/hash-field-ttl-badge"
 import { useField } from "./input/use-field"
+import { useTab } from "@/tab-provider"
 
 export const ListEditDisplay = ({
   dataKey,
@@ -24,7 +24,7 @@ export const ListEditDisplay = ({
   item: SelectedItem
 }) => {
   return (
-    <div className="grow rounded-md bg-zinc-100 p-3">
+    <div className="grow rounded-md bg-zinc-100">
       <ListEditForm key={item.key} item={item} type={type} dataKey={dataKey} />
     </div>
   )
@@ -62,7 +62,7 @@ const ListEditForm = ({
   })
 
   const { mutateAsync: editItem, isPending } = useEditListItem()
-  const { setSelectedListItem } = useDatabrowserStore()
+  const { setSelectedListItem } = useTab()
 
   const [keyLabel, valueLabel] = headerLabels[type]
 

diff --git a/src/components/databrowser/components/display/display-list.tsx b/src/components/databrowser/components/display/display-list.tsx
@@ -1,5 +1,4 @@
 import { useMemo } from "react"
-import { useDatabrowserStore } from "@/store"
 import type { ListDataType } from "@/types"
 import { IconTrash } from "@tabler/icons-react"
 import type { InfiniteData, UseInfiniteQueryResult } from "@tanstack/react-query"
@@ -15,6 +14,7 @@ import { DeleteAlertDialog } from "./delete-alert-dialog"
 import { DisplayHeader } from "./display-header"
 import { ListEditDisplay } from "./display-list-edit"
 import { HashFieldTTLInfo } from "./hash/hash-field-ttl-info"
+import { useTab } from "@/tab-provider"
 
 export const headerLabels = {
   list: ["Index", "Content"],
@@ -25,7 +25,7 @@ export const headerLabels = {
 } as const
 
 export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListDataType }) => {
-  const { selectedListItem } = useDatabrowserStore()
+  const { selectedListItem } = useTab()
   const query = useFetchListItems({ dataKey, type })
 
   return (
@@ -38,15 +38,13 @@ export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListData
 
       <div className={cn("min-h-0 grow", selectedListItem && "hidden")}>
         <InfiniteScroll query={query}>
-          <div className="pr-3">
-            <table className="w-full">
-              <ItemContextMenu dataKey={dataKey} type={type}>
-                <tbody>
-                  <ListItems dataKey={dataKey} type={type} query={query} />
-                </tbody>
-              </ItemContextMenu>
-            </table>
-          </div>
+          <table className="w-full">
+            <ItemContextMenu dataKey={dataKey} type={type}>
+              <tbody>
+                <ListItems dataKey={dataKey} type={type} query={query} />
+              </tbody>
+            </ItemContextMenu>
+          </table>
         </InfiniteScroll>
       </div>
     </div>
@@ -71,7 +69,7 @@ export const ListItems = ({
   type: ListDataType
   dataKey: string
 }) => {
-  const { setSelectedListItem } = useDatabrowserStore()
+  const { setSelectedListItem } = useTab()
   const keys = useMemo(() => query.data?.pages.flatMap((page) => page.keys) ?? [], [query.data])
   const fields = useMemo(() => keys.map((key) => key.key), [keys])
   const { mutate: editItem } = useEditListItem()
@@ -86,7 +84,7 @@ export const ListItems = ({
           onClick={() => {
             setSelectedListItem({ key })
           }}
-          className={cn("h-10 border-b border-b-zinc-100 hover:bg-zinc-100 ")}
+          className={cn("h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100")}
         >
           <td
             className={cn(

diff --git a/src/components/databrowser/components/display/display-simple.tsx b/src/components/databrowser/components/display/display-simple.tsx
@@ -17,10 +17,7 @@ export const EditorDisplay = ({ dataKey, type }: { dataKey: string; type: Simple
     <div className="flex h-full w-full flex-col gap-2">
       <DisplayHeader dataKey={dataKey} type={type} content={data ?? undefined} />
 
-      <div
-        className="flex h-full grow flex-col gap-2
-      rounded-md bg-zinc-100 p-3"
-      >
+      <div className="flex h-full grow flex-col gap-2 rounded-md bg-zinc-100">
         {data === undefined ? (
           <Spinner isLoadingText={""} isLoading={true} />
         ) : data === null ? (

diff --git a/src/components/databrowser/components/display/header-badges.tsx b/src/components/databrowser/components/display/header-badges.tsx
@@ -3,7 +3,7 @@ import bytes from "bytes"
 
 import { Skeleton } from "@/components/ui/skeleton"
 
-import { useFetchKeyExpire, useSetTTL } from "../../hooks"
+import { useFetchTTL, useSetTTL } from "../../hooks"
 import { useFetchKeyLength } from "../../hooks/use-fetch-key-length"
 import { useFetchKeySize } from "../../hooks/use-fetch-key-size"
 import { TTLBadge } from "./ttl-badge"
@@ -46,7 +46,7 @@ export const SizeBadge = ({ dataKey }: { dataKey: string }) => {
 }
 
 export const HeaderTTLBadge = ({ dataKey }: { dataKey: string }) => {
-  const { data: expireAt } = useFetchKeyExpire(dataKey)
+  const { data: expireAt } = useFetchTTL(dataKey)
   const { mutate: setTTL, isPending } = useSetTTL()
 
   return (

diff --git a/src/components/databrowser/components/display/index.tsx b/src/components/databrowser/components/display/index.tsx
@@ -1,17 +1,18 @@
 /* eslint-disable unicorn/no-negated-condition */
-import { useDatabrowserStore } from "@/store"
 
 import { useKeys, useKeyType } from "../../hooks/use-keys"
 import { ListDisplay } from "./display-list"
 import { EditorDisplay } from "./display-simple"
+import { useTab } from "@/tab-provider"
 
 export const DataDisplay = () => {
-  const { selectedKey } = useDatabrowserStore()
+  const { selectedKey } = useTab()
+
   const { query } = useKeys()
   const type = useKeyType(selectedKey)
 
   return (
-    <div className="h-full rounded-xl border bg-white p-1">
+    <div className="h-full p-4">
       {!selectedKey ? (
         <div />
       ) : !type ? (

diff --git a/src/components/databrowser/components/display/input/custom-editor.tsx b/src/components/databrowser/components/display/input/custom-editor.tsx
@@ -3,6 +3,7 @@ import { Editor, useMonaco } from "@monaco-editor/react"
 
 import { cn } from "@/lib/utils"
 import { CopyButton } from "@/components/databrowser/copy-button"
+import { useTab } from "@/tab-provider"
 
 export const CustomEditor = ({
   language,
@@ -19,17 +20,18 @@ export const CustomEditor = ({
   showCopyButton?: boolean
   readOnly?: boolean
 }) => {
+  const { active } = useTab()
   const monaco = useMonaco()
   const editorRef = useRef()
 
   useEffect(() => {
-    if (!monaco || !editorRef.current) {
+    if (!active || !monaco || !editorRef.current) {
       return
     }
 
     // @ts-expect-error not typing the editor type
     monaco?.editor.setModelLanguage(editorRef.current.getModel(), language)
-  }, [monaco, language])
+  }, [monaco, language, active])
 
   return (
     <div

diff --git a/src/components/databrowser/components/display/key-actions.tsx b/src/components/databrowser/components/display/key-actions.tsx
@@ -16,7 +16,7 @@ export function KeyActions({ dataKey, content }: { dataKey: string; content?: st
   const { mutateAsync: deleteKey } = useDeleteKey()
 
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
         <Button size="icon-sm">
           <IconDotsVertical className="size-4 text-zinc-500" />
@@ -36,11 +36,23 @@ export function KeyActions({ dataKey, content }: { dataKey: string; content?: st
             Copy content
           </DropdownMenuItem>
         )}
+        <DropdownMenuItem
+          onClick={() => {
+            navigator.clipboard.writeText(dataKey)
+          }}
+        >
+          Copy key
+        </DropdownMenuItem>
         <DeleteAlertDialog
           deletionType="key"
           onDeleteConfirm={async () => await deleteKey(dataKey)}
         >
-          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Delete key</DropdownMenuItem>
+          <DropdownMenuItem
+            className="text-red-500 focus:bg-red-500 focus:text-white"
+            onSelect={(e) => e.preventDefault()}
+          >
+            Delete key
+          </DropdownMenuItem>
         </DeleteAlertDialog>
       </DropdownMenuContent>
     </DropdownMenu>

diff --git a/src/components/databrowser/components/sidebar/db-size.tsx b/src/components/databrowser/components/sidebar/db-size.tsx
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import { useQuery } from "@tanstack/react-query"
 
 import { formatNumber } from "@/lib/utils"
@@ -7,7 +7,8 @@ import { Skeleton } from "@/components/ui/skeleton"
 export const FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size"
 
 export const DisplayDbSize = () => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
+
   const { data: keyCount } = useQuery({
     queryKey: [FETCH_DB_SIZE_QUERY_KEY],
     queryFn: async () => {

diff --git a/src/components/databrowser/components/sidebar/empty.tsx b/src/components/databrowser/components/sidebar/empty.tsx
@@ -1,6 +1,6 @@
 export const Empty = () => {
   return (
-    <div className="flex h-full w-full items-center justify-center rounded-md border border-dashed px-4 py-6 text-center">
+    <div className="flex h-full w-full items-center justify-center rounded-md border bg-white px-4 py-6 text-center">
       <div className="space-y-5">
         <p className="text-md font-medium">Data on a break</p>
         <p className="text-balance text-center">"Quick, lure it back with some CLI magic!"</p>

diff --git a/src/components/databrowser/components/sidebar/index.tsx b/src/components/databrowser/components/sidebar/index.tsx
@@ -20,8 +20,8 @@ export function Sidebar() {
   const { keys, query } = useKeys()
 
   return (
-    <div className="flex h-full flex-col gap-2 rounded-xl border bg-white p-1">
-      <div className="rounded-lg bg-zinc-100 px-3 py-2">
+    <div className="flex h-full flex-col gap-2 p-4">
+      <div className="rounded-lg bg-zinc-100">
         {/* Meta */}
         <div className="flex h-10 items-center justify-between pl-1">
           <DisplayDbSize />
@@ -68,7 +68,7 @@ export function Sidebar() {
         <LoadingSkeleton />
       ) : keys.length > 0 ? (
         // Infinite scroll already has a loader at the bottom
-        <InfiniteScroll query={query}>
+        <InfiniteScroll query={query} disableRoundedInherit className="min-h-0">
           <KeysList />
         </InfiniteScroll>
       ) : (