feat(desktop): clarify key browser search states

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/desktop/src/App.tsx

@@ -64,6 +64,12 @@ import {
   resolveSelectedWorkspaceKey,
   resolveSelectedWorkspaceKeyId,
 } from "./lib/key-workspace-state";
+import {
+  buildInspectorEmptyStateMessage,
+  buildKeyBrowserEmptyStateMessage,
+  buildKeyBrowserStatusMessage,
+  resolveKeyBrowserSearchState,
+} from "./lib/key-browser-search";
 import {
   parseDemoTtlToSeconds,
   persistDemoKeyTtl,
@@ -444,7 +450,9 @@ function App() {
     connections.find((connection) => connection.id === activeConnectionId) ??
     connections[0];
 
-  const filteredDemoKeys = filterWorkspaceKeys(demoKeys, deferredSearch);
+  const searchState = resolveKeyBrowserSearchState(search);
+  const deferredSearchState = resolveKeyBrowserSearchState(deferredSearch);
+  const filteredDemoKeys = filterWorkspaceKeys(demoKeys, deferredSearchState.trimmedQuery);
   const filteredKeys = tauriAvailable ? liveKeys : filteredDemoKeys;
   const draftErrors = validateConnectionDraft(connectionDraft, connections);
   const draftErrorList = Object.values(draftErrors);
@@ -492,6 +500,22 @@ function App() {
       ? selectedValueRecord?.metadata.ttl.kind !== "persistent"
       : selectedKey?.ttl !== "persistent");
   const latestConsoleEntry = consoleHistory[0] ?? null;
+  const keyBrowserStatusMessage = buildKeyBrowserStatusMessage({
+    databaseLabel: activeDb,
+    visibleCount: filteredKeys.length,
+    hasMore: tauriAvailable && liveHasMore,
+    isLoading: isBrowseLoading,
+    search: deferredSearchState,
+  });
+  const keyBrowserEmptyStateMessage = buildKeyBrowserEmptyStateMessage({
+    databaseLabel: activeDb,
+    isLoading: isBrowseLoading,
+    search: deferredSearchState,
+  });
+  const inspectorEmptyStateMessage = buildInspectorEmptyStateMessage(
+    activeDb,
+    deferredSearchState,
+  );
   const qaSnapshot = buildQaSnapshot({
     appName: bootstrap.app_name,
     appVersion,
@@ -564,7 +588,7 @@ function App() {
     const request: RedisKeyBrowseRequest = {
       connection: toRedisConnectionRequest(activeConnection, activeDb),
       cursor: "0",
-      pattern: toRedisSearchPattern(deferredSearch),
+      pattern: deferredSearchState.requestPattern,
       page_size: browsePageSize,
     };
 
@@ -618,7 +642,7 @@ function App() {
     return () => {
       active = false;
     };
-  }, [activeConnectionId, activeDb, deferredSearch, tauriAvailable]);
+  }, [activeConnectionId, activeDb, deferredSearchState.requestPattern, tauriAvailable]);
 
   useEffect(() => {
     if (!tauriAvailable) {
@@ -1129,7 +1153,7 @@ function App() {
         request: {
           connection: toRedisConnectionRequest(activeConnection, activeDb),
           cursor: liveNextCursor,
-          pattern: toRedisSearchPattern(deferredSearch),
+          pattern: deferredSearchState.requestPattern,
           page_size: browsePageSize,
         } satisfies RedisKeyBrowseRequest,
       });
@@ -1732,7 +1756,25 @@ function App() {
                   className="w-full bg-transparent text-sm text-[var(--ink-0)] outline-none placeholder:text-[var(--ink-muted)]"
                   placeholder="Search key name or pattern"
                 />
+                {searchState.mode === "all" ? null : (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setSearch("")}
+                    className="shrink-0 px-2 py-1 text-xs"
+                  >
+                    Clear
+                  </Button>
+                )}
               </label>
+              <div className="flex items-center justify-between gap-3 text-xs text-[var(--ink-muted)]">
+                <div className="flex items-center gap-2">
+                  <Badge variant="neutral" className="normal-case tracking-normal">
+                    {deferredSearchState.mode === "all" ? "all keys" : deferredSearchState.mode === "pattern" ? "pattern" : "contains"}
+                  </Badge>
+                  <p>{keyBrowserStatusMessage}</p>
+                </div>
+              </div>
             </div>
 
             <div className="mt-4 min-h-0 flex-1 space-y-2 overflow-auto pr-1">
@@ -1770,9 +1812,7 @@ function App() {
 
               {filteredKeys.length === 0 ? (
                 <div className="rounded-[24px] border border-dashed border-[var(--line-strong)] bg-[var(--surface-base)] px-4 py-8 text-center text-sm text-[var(--ink-soft)]">
-                  {isBrowseLoading
-                    ? `Loading keys from ${activeDb}...`
-                    : `No keys match the current pattern in ${activeDb}.`}
+                  {keyBrowserEmptyStateMessage}
                 </div>
               ) : null}
 
@@ -1839,7 +1879,7 @@ function App() {
                     )
                   ) : (
                     <div className="mt-3 flex h-64 items-center justify-center rounded-[22px] border border-dashed border-[var(--line-strong)] bg-[var(--surface-muted)] px-6 text-center text-sm text-[var(--ink-soft)]">
-                      No key matches the current pattern in {activeDb}. Clear or adjust the search to restore an inspector target.
+                      {inspectorEmptyStateMessage}
                     </div>
                   )}