Change search bind

Author: xPaw

src/components/DeclarationsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { styled } from "@linaria/react";
 import { DeclarationsContext, DeclarationsContextType } from "./schema/DeclarationsContext";
 import { DeclarationsSidebar } from "./DeclarationsSidebar";
@@ -13,6 +13,30 @@ export default function DeclarationsPage({ context }: { context: DeclarationsCon
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const search = useHashParam("search") ?? "";
 
+  useEffect(() => {
+    const listener = (e: KeyboardEvent) => {
+      if (e.key !== "/" || e.ctrlKey || e.metaKey || e.altKey) return;
+      const active = document.activeElement;
+      const mainSearch = document.getElementById("main-search");
+      const sidebarFilter = document.getElementById("sidebar-filter");
+
+      if (active === mainSearch) {
+        e.preventDefault();
+        sidebarFilter?.focus();
+      } else if (active === sidebarFilter) {
+        // Explicit check before the HTMLInputElement guard below,
+        // otherwise "/" would just type into the filter input.
+        e.preventDefault();
+        mainSearch?.focus();
+      } else if (!(active instanceof HTMLInputElement)) {
+        e.preventDefault();
+        mainSearch?.focus();
+      }
+    };
+    document.addEventListener("keydown", listener);
+    return () => document.removeEventListener("keydown", listener);
+  }, []);
+
   const searchCtx = useMemo(() => ({ search }), [search]);
   const filterCtx = useMemo(() => ({ filter, setFilter }), [filter]);
 

src/components/DeclarationsSidebar.tsx

@@ -207,6 +207,7 @@ export const DeclarationsSidebar = ({ onNavigate }: { onNavigate?: () => void })
           <GameSwitcher currentGame={game} />
         </SidebarBrandRow>
         <SidebarSearchInput
+          id="sidebar-filter"
           type="search"
           placeholder="Filter…"
           value={filter}

src/components/search/SearchBox.tsx

@@ -3,25 +3,7 @@ import { useLocation, useNavigate, href } from "react-router";
 import { styled } from "@linaria/react";
 import { SearchContext } from "./SearchContext";
 import { DeclarationsContext } from "../schema/DeclarationsContext";
-import { KindIcon, IconKind } from "../kind-icon/KindIcon";
-
-export function useCtrlFHook<T extends HTMLElement>() {
-  const ref = useRef<T | null>(null);
-  useEffect(() => {
-    const listener = (event: KeyboardEvent) => {
-      if (ref.current && (event.ctrlKey || event.metaKey) && event.key === "f") {
-        // Use default CTRL+F only when element already has focus
-        if (document.activeElement !== ref.current) event.preventDefault();
-        ref.current.focus();
-      }
-    };
-
-    document.addEventListener("keydown", listener);
-    return () => document.removeEventListener("keydown", listener);
-  }, []);
-
-  return ref;
-}
+import { KindIcon, IconKind, ICONS_URL } from "../kind-icon/KindIcon";
 
 export const SearchInput = styled.input`
   width: 100%;
@@ -130,6 +112,43 @@ const SearchBoxWrapper = styled.div`
   width: 100%;
 `;
 
+const SearchIcon = styled.svg`
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  translate: 0 -50%;
+  pointer-events: none;
+  color: var(--searchbox-placeholder);
+`;
+
+const MainSearchInput = styled(SearchInput)`
+  padding-left: 36px;
+`;
+
+const SearchPlaceholder = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 14px 0 36px;
+  pointer-events: none;
+  color: var(--searchbox-placeholder);
+  font-size: 14px;
+  font-family: inherit;
+
+  kbd {
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 1px 6px;
+    border-radius: 4px;
+    border: 1px solid var(--searchbox-placeholder);
+    opacity: 0.6;
+    line-height: 1.4;
+  }
+`;
+
 const TagPopup = styled.div`
   position: absolute;
   top: calc(100% + 4px);
@@ -414,13 +433,21 @@ export function SearchBox({ className }: { className?: string }) {
     }
   };
 
-  const ref = useCtrlFHook<HTMLInputElement>();
+  const ref = useRef<HTMLInputElement>(null);
 
   return (
     <SearchBoxWrapper className={className}>
-      <SearchInput
+      <SearchIcon width="16" height="16">
+        <use href={`${ICONS_URL}#search`} />
+      </SearchIcon>
+      {!inputValue && !isFocused && (
+        <SearchPlaceholder>
+          Type <kbd>/</kbd> to search
+        </SearchPlaceholder>
+      )}
+      <MainSearchInput
+        id="main-search"
         type="search"
-        placeholder="Search…"
         ref={ref}
         value={inputValue}
         onChange={onChange}