From a4432b6827261b685c5d61b59d8f751afd7b7983 Mon Sep 17 00:00:00 2001
From: ytkimirti <yusuftaha9@gmail.com>
Date: Mon, 5 May 2025 17:36:04 +0200
Subject: [PATCH 1/4] fix: search input not clearing when pressing "X" button

---
 src/components/databrowser/components/sidebar/search-input.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/databrowser/components/sidebar/search-input.tsx b/src/components/databrowser/components/sidebar/search-input.tsx
index 2a9e168..79d82e0 100644
--- a/src/components/databrowser/components/sidebar/search-input.tsx
+++ b/src/components/databrowser/components/sidebar/search-input.tsx
@@ -29,7 +29,7 @@ export const SearchInput = () => {
         }}
         value={state}
       />
-      {search.key && (
+      {state && (
         <Button
           type="button"
           variant="link"
@@ -37,6 +37,7 @@ export const SearchInput = () => {
           className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
           onClick={() => {
             setSearchKey("")
+            setState("")
           }}
         >
           <IconX size={16} />

From 8b16afba9be1ce8e141c51a00466ae729cf7c95e Mon Sep 17 00:00:00 2001
From: ytkimirti <yusuftaha9@gmail.com>
Date: Mon, 5 May 2025 17:36:43 +0200
Subject: [PATCH 2/4] feat: add use-fetch-key-type

---
 .../databrowser/components/sidebar/index.tsx    |  4 ++++
 .../databrowser/hooks/use-delete-key-cache.ts   |  8 ++++++++
 .../databrowser/hooks/use-fetch-key-type.tsx    | 17 +++++++++++++++++
 3 files changed, 29 insertions(+)
 create mode 100644 src/components/databrowser/hooks/use-fetch-key-type.tsx

diff --git a/src/components/databrowser/components/sidebar/index.tsx b/src/components/databrowser/components/sidebar/index.tsx
index bc24ee0..4fba5f5 100644
--- a/src/components/databrowser/components/sidebar/index.tsx
+++ b/src/components/databrowser/components/sidebar/index.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button"
 import { Spinner } from "@/components/ui/spinner"
 
 import { FETCH_LIST_ITEMS_QUERY_KEY, FETCH_SIMPLE_KEY_QUERY_KEY } from "../../hooks"
+import { FETCH_KEY_TYPE_QUERY_KEY } from "../../hooks/use-fetch-key-type"
 import { useKeys } from "../../hooks/use-keys"
 import { AddKeyModal } from "../add-key-modal"
 import { DisplayDbSize, FETCH_DB_SIZE_QUERY_KEY } from "./db-size"
@@ -38,6 +39,9 @@ export function Sidebar() {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_DB_SIZE_QUERY_KEY],
                 })
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_KEY_TYPE_QUERY_KEY],
+                })
               }}
             >
               <Spinner isLoading={query.isFetching}>
diff --git a/src/components/databrowser/hooks/use-delete-key-cache.ts b/src/components/databrowser/hooks/use-delete-key-cache.ts
index aca2ba9..4d2cfec 100644
--- a/src/components/databrowser/hooks/use-delete-key-cache.ts
+++ b/src/components/databrowser/hooks/use-delete-key-cache.ts
@@ -3,6 +3,8 @@ import { useDatabrowserStore } from "@/store"
 
 import { queryClient } from "@/lib/clients"
 
+import { FETCH_KEY_TYPE_QUERY_KEY } from "./use-fetch-key-type"
+import { FETCH_LIST_ITEMS_QUERY_KEY } from "./use-fetch-list-items"
 import { FETCH_SIMPLE_KEY_QUERY_KEY } from "./use-fetch-simple-key"
 import { FETCH_KEYS_QUERY_KEY, useKeys } from "./use-keys"
 
@@ -19,6 +21,12 @@ export const useDeleteKeyCache = () => {
       queryClient.invalidateQueries({
         queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, key],
       })
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, key],
+      })
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key],
+      })
       refetch()
     },
     [setSelectedKey, refetch]
diff --git a/src/components/databrowser/hooks/use-fetch-key-type.tsx b/src/components/databrowser/hooks/use-fetch-key-type.tsx
new file mode 100644
index 0000000..499cd27
--- /dev/null
+++ b/src/components/databrowser/hooks/use-fetch-key-type.tsx
@@ -0,0 +1,17 @@
+import { useDatabrowser } from "@/store"
+import { useQuery } from "@tanstack/react-query"
+
+export const FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type"
+
+export const useFetchKeyType = (key: string | undefined) => {
+  const { redisNoPipeline: redis } = useDatabrowser()
+
+  return useQuery({
+    queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key],
+    queryFn: async () => {
+      if (!key) return "none"
+
+      return await redis.type(key)
+    },
+  })
+}

From 4023e971de067c9f8527221a2c1b539a6b8ac5e6 Mon Sep 17 00:00:00 2001
From: ytkimirti <yusuftaha9@gmail.com>
Date: Mon, 5 May 2025 17:37:06 +0200
Subject: [PATCH 3/4] feat: add fetching for exact match on search for quicker
 results

---
 .../databrowser/components/sidebar/index.tsx     |  3 ++-
 src/components/databrowser/hooks/use-keys.tsx    | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/databrowser/components/sidebar/index.tsx b/src/components/databrowser/components/sidebar/index.tsx
index 4fba5f5..fba767f 100644
--- a/src/components/databrowser/components/sidebar/index.tsx
+++ b/src/components/databrowser/components/sidebar/index.tsx
@@ -62,9 +62,10 @@ export function Sidebar() {
         </div>
       </div>
 
-      {query.isLoading ? (
+      {query.isLoading && keys.length === 0 ? (
         <LoadingSkeleton />
       ) : keys.length > 0 ? (
+        // Infinite scroll already has a loader at the bottom
         <InfiniteScroll query={query}>
           <KeysList />
         </InfiniteScroll>
diff --git a/src/components/databrowser/hooks/use-keys.tsx b/src/components/databrowser/hooks/use-keys.tsx
index f439b6b..1775880 100644
--- a/src/components/databrowser/hooks/use-keys.tsx
+++ b/src/components/databrowser/hooks/use-keys.tsx
@@ -9,6 +9,7 @@ import {
 import { useDatabrowserStore } from "@/store"
 import { useInfiniteQuery, type UseInfiniteQueryResult } from "@tanstack/react-query"
 
+import { useFetchKeyType } from "./use-fetch-key-type"
 import { useFetchKeys, type RedisKey } from "./use-fetch-keys"
 
 const KeysContext = createContext<
@@ -51,9 +52,22 @@ export const KeysProvider = ({ children }: PropsWithChildren) => {
     query.refetch()
   }, [query, resetCache])
 
+  const cleanSearchKey = search.key.replace("*", "")
+
+  const { data: exactMatchType } = useFetchKeyType(cleanSearchKey)
+
   const keys = useMemo(() => {
     const keys = query.data?.pages.flatMap((page) => page.keys) ?? []
 
+    // Include the exact match if it exists before SCAN returns
+    if (
+      exactMatchType &&
+      exactMatchType !== "none" &&
+      (search.type === undefined || search.type === exactMatchType)
+    ) {
+      keys.push([cleanSearchKey, exactMatchType])
+    }
+
     // deduplication
     const keysSet = new Set<string>()
     const dedupedKeys: RedisKey[] = []
@@ -65,7 +79,7 @@ export const KeysProvider = ({ children }: PropsWithChildren) => {
       dedupedKeys.push(key)
     }
     return dedupedKeys
-  }, [query.data])
+  }, [query.data, cleanSearchKey, exactMatchType])
 
   return (
     <KeysContext.Provider

From 9dd2fe1a3e6d241c8d3663de95cd4f0047c68980 Mon Sep 17 00:00:00 2001
From: ytkimirti <yusuftaha9@gmail.com>
Date: Mon, 5 May 2025 18:04:31 +0200
Subject: [PATCH 4/4] fix: send exact match request before other requests

---
 src/components/databrowser/hooks/use-keys.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/databrowser/hooks/use-keys.tsx b/src/components/databrowser/hooks/use-keys.tsx
index 1775880..63e82a1 100644
--- a/src/components/databrowser/hooks/use-keys.tsx
+++ b/src/components/databrowser/hooks/use-keys.tsx
@@ -25,6 +25,9 @@ export const FETCH_KEYS_QUERY_KEY = "use-fetch-keys"
 
 export const KeysProvider = ({ children }: PropsWithChildren) => {
   const { search } = useDatabrowserStore()
+  const cleanSearchKey = search.key.replace("*", "")
+
+  const { data: exactMatchType } = useFetchKeyType(cleanSearchKey)
 
   const { fetchKeys, resetCache } = useFetchKeys(search)
   const pageRef = useRef(0)
@@ -52,10 +55,6 @@ export const KeysProvider = ({ children }: PropsWithChildren) => {
     query.refetch()
   }, [query, resetCache])
 
-  const cleanSearchKey = search.key.replace("*", "")
-
-  const { data: exactMatchType } = useFetchKeyType(cleanSearchKey)
-
   const keys = useMemo(() => {
     const keys = query.data?.pages.flatMap((page) => page.keys) ?? []