feat: add search history

Author: ytkimirti

bun.lockb

@@ -33,7 +33,7 @@
     "@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-popover": "^1.0.7",
     "@radix-ui/react-portal": "^1.1.2",

package.json

@@ -15,6 +15,11 @@ import { KeysList } from "./keys-list"
 import { SearchInput } from "./search-input"
 import { LoadingSkeleton } from "./skeleton-buttons"
 import { DataTypeSelector } from "./type-selector"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 
 export function Sidebar() {
   const { keys, query } = useKeys()

src/components/databrowser/components/sidebar/index.tsx

@@ -44,7 +44,7 @@ const KeyItem = ({ data, nextKey }: { data: RedisKey; nextKey: string }) => {
       data-key={dataKey}
       variant={isKeySelected ? "default" : "ghost"}
       className={cn(
-        "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0",
+        "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 !ring-0 focus-visible:bg-zinc-50",
         "select-none border border-transparent text-left",
         isKeySelected && "shadow-sm",
         isKeySelected && keyStyles[dataType]

src/components/databrowser/components/sidebar/keys-list.tsx

@@ -4,31 +4,84 @@ import { IconX } from "@tabler/icons-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { useTab } from "@/tab-provider"
+import { useDatabrowserStore } from "@/store"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+
+const dedupeSearchHistory = (history: string[]) => {
+  const seen = new Set()
+  return history.filter((item) => {
+    if (!item || seen.has(item)) return false
+    seen.add(item)
+    return true
+  })
+}
 
 export const SearchInput = () => {
   const { setSearchKey, search } = useTab()
+  const { searchHistory, addSearchHistory } = useDatabrowserStore()
   const [state, setState] = useState(search.key)
+  const [isFocus, setIsFocus] = useState(false)
 
-  const submit = (value: string) => {
+  const handleSubmit = (value: string) => {
     if (value.trim() !== "" && !value.includes("*")) value = `${value}*`
+    addSearchHistory(value)
+    setSearchKey(value)
+    setState(value)
+  }
+
+  const handleItemSelect = (value: string) => {
+    addSearchHistory(value)
     setSearchKey(value)
     setState(value)
   }
 
+  const filteredHistory = dedupeSearchHistory(
+    searchHistory.filter((item) => item.includes(state) && item !== state)
+  ).slice(0, 5)
+
   return (
     <div className="relative grow">
-      <Input
-        placeholder="Search"
-        className={"rounded-l-none border-zinc-300 font-normal"}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") submit(e.currentTarget.value)
-        }}
-        onChange={(e) => {
-          setState(e.currentTarget.value)
-          if (e.currentTarget.value.trim() === "") submit("")
-        }}
-        value={state}
-      />
+      <Popover open={isFocus && filteredHistory.length > 0}>
+        <PopoverTrigger asChild>
+          <div>
+            <Input
+              placeholder="Search"
+              className={"rounded-l-none border-zinc-300 font-normal"}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleSubmit(e.currentTarget.value)
+                else if (e.key === "Escape") setState("")
+              }}
+              onChange={(e) => {
+                setState(e.currentTarget.value)
+                if (e.currentTarget.value.trim() === "") handleSubmit("")
+              }}
+              value={state}
+              onFocus={() => setIsFocus(true)}
+              onBlur={() => setIsFocus(false)}
+            />
+          </div>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className="w-[200px] divide-y px-3 py-2 text-[13px] text-zinc-900"
+          autoFocus={false}
+          onOpenAutoFocus={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+          }}
+        >
+          {filteredHistory.map((item) => (
+            <div key={item} className="w-full py-[2px]">
+              <button
+                onClick={() => handleItemSelect(item)}
+                className="block w-full rounded-sm p-1 text-left transition-colors hover:bg-zinc-100"
+              >
+                {item}
+              </button>
+            </div>
+          ))}
+        </PopoverContent>
+      </Popover>
       {state && (
         <Button
           type="button"
@@ -43,7 +96,7 @@ export const SearchInput = () => {
           <IconX size={16} />
           <span className="sr-only">Clear</span>
         </Button>
-      )}
+      )}{" "}
     </div>
   )
 }

src/components/databrowser/components/sidebar/search-input.tsx

@@ -7,7 +7,8 @@ import { cn } from "@/lib/utils"
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm " +
     "ring-offset-white transition-colors " +
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 " +
+    // Disabled ring
+    "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 " +
     "disabled:pointer-events-none disabled:opacity-50 " +
     "dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
   {

src/components/ui/button.tsx

@@ -1,9 +1,8 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "@/lib/utils"
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
-
 import { portalRoot } from "@/lib/portal-root"
-import { cn } from "@/lib/utils"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -26,14 +25,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 data-[state=open]:bg-zinc-100 dark:focus:bg-zinc-800 dark:data-[state=open]:bg-zinc-800",
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto size-4" />
+    <ChevronRightIcon className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
@@ -45,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
       className
     )}
     {...props}
@@ -62,8 +61,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        "origin-[--radix-dropdown-menu-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -105,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="size-4" />
+        <CheckIcon className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -127,7 +126,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="size-4 fill-current" />
+        <DotFilledIcon className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

src/components/ui/dropdown-menu.tsx

@@ -66,6 +66,9 @@ type DatabrowserStore = {
   setSearch: (tabId: TabId, search: SearchFilter) => void
   setSearchKey: (tabId: TabId, key: string) => void
   setSearchType: (tabId: TabId, type: DataType | undefined) => void
+
+  searchHistory: string[]
+  addSearchHistory: (key: string) => void
 }
 
 export type DatabrowserStoreObject = ReturnType<typeof createDatabrowserStore>
@@ -148,4 +151,9 @@ export const createDatabrowserStore = () =>
           [tabId]: { ...old.tabs[tabId], search: { ...old.tabs[tabId].search, type } },
         },
       })),
+
+    searchHistory: [],
+    addSearchHistory: (key) => {
+      set((old) => ({ ...old, searchHistory: [key, ...old.searchHistory] }))
+    },
   }))