feat(search): add responsive search with manual expansion (#2336)

* feat(search): add responsive search with manual expansion

* refactor

---------

Co-authored-by: Yujong Lee <[email protected]>

Author: ComputelessComputer

apps/desktop/package.json

@@ -113,6 +113,7 @@
     "tinybase": "^6.7.5",
     "tinytick": "^1.2.8",
     "unified": "^11.0.5",
+    "usehooks-ts": "^3.1.1",
     "vfile": "^6.0.3",
     "wavesurfer.js": "^7.12.1",
     "xstate": "^5.25.0",

apps/desktop/src/components/main/body/index.tsx

@@ -8,6 +8,7 @@ import {
 import { Reorder } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
+import { useResizeObserver } from "usehooks-ts";
 import { useShallow } from "zustand/shallow";
 
 import { Button } from "@hypr/ui/components/ui/button";
@@ -100,35 +101,11 @@ function Header({ tabs }: { tabs: Tab[] }) {
   );
   const tabsScrollContainerRef = useRef<HTMLDivElement>(null);
   const handleNewEmptyTab = useNewEmptyTab();
-  const [scrollState, setScrollState] = useState({
-    atStart: true,
-    atEnd: true,
-  });
-
-  const updateScrollState = useCallback(() => {
-    const container = tabsScrollContainerRef.current;
-    if (!container) return;
-
-    const { scrollLeft, scrollWidth, clientWidth } = container;
-    const atStart = scrollLeft <= 1;
-    const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
-    setScrollState({ atStart, atEnd });
-  }, []);
-
-  useEffect(() => {
-    const container = tabsScrollContainerRef.current;
-    if (!container) return;
-
-    updateScrollState();
-    container.addEventListener("scroll", updateScrollState);
-    const resizeObserver = new ResizeObserver(updateScrollState);
-    resizeObserver.observe(container);
-
-    return () => {
-      container.removeEventListener("scroll", updateScrollState);
-      resizeObserver.disconnect();
-    };
-  }, [updateScrollState, tabs]);
+  const [isSearchManuallyExpanded, setIsSearchManuallyExpanded] =
+    useState(false);
+  const { ref: rightContainerRef, hasSpace: hasSpaceForSearch } =
+    useHasSpaceForSearch();
+  const scrollState = useScrollState(tabsScrollContainerRef, [tabs]);
 
   const setTabRef = useScrollActiveTabIntoView(tabs);
   useTabsShortcuts();
@@ -146,6 +123,7 @@ function Header({ tabs }: { tabs: Tab[] }) {
         <Button
           size="icon"
           variant="ghost"
+          className="shrink-0"
           onClick={() => leftsidebar.setExpanded(true)}
         >
           <PanelLeftOpenIcon size={16} className="text-neutral-600" />
@@ -225,21 +203,27 @@ function Header({ tabs }: { tabs: Tab[] }) {
       </div>
 
       <div
+        ref={rightContainerRef}
         data-tauri-drag-region
         className="flex-1 flex h-full items-center justify-between"
       >
-        <Button
-          onClick={handleNewEmptyTab}
-          variant="ghost"
-          size="icon"
-          className="text-neutral-600"
-        >
-          <PlusIcon size={16} />
-        </Button>
+        {!(isSearchManuallyExpanded && !hasSpaceForSearch) && (
+          <Button
+            onClick={handleNewEmptyTab}
+            variant="ghost"
+            size="icon"
+            className="text-neutral-600"
+          >
+            <PlusIcon size={16} />
+          </Button>
+        )}
 
-        <div className="flex items-center gap-1 h-full">
+        <div className="flex items-center gap-1 h-full ml-auto">
           <Update />
-          <Search />
+          <Search
+            hasSpace={hasSpaceForSearch}
+            onManualExpandChange={setIsSearchManuallyExpanded}
+          />
         </div>
       </div>
     </div>
@@ -552,6 +536,52 @@ export function StandardTabWrapper({
   );
 }
 
+function useHasSpaceForSearch() {
+  const ref = useRef<HTMLDivElement>(null);
+  const { width = 0 } = useResizeObserver({
+    ref: ref as React.RefObject<HTMLDivElement>,
+  });
+  return { ref, hasSpace: width >= 220 };
+}
+
+function useScrollState(
+  ref: React.RefObject<HTMLDivElement | null>,
+  deps: unknown[] = [],
+) {
+  const [scrollState, setScrollState] = useState({
+    atStart: true,
+    atEnd: true,
+  });
+
+  const updateScrollState = useCallback(() => {
+    const container = ref.current;
+    if (!container) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = container;
+    setScrollState({
+      atStart: scrollLeft <= 1,
+      atEnd: scrollLeft + clientWidth >= scrollWidth - 1,
+    });
+  }, [ref]);
+
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) return;
+
+    updateScrollState();
+    container.addEventListener("scroll", updateScrollState);
+    const resizeObserver = new ResizeObserver(updateScrollState);
+    resizeObserver.observe(container);
+
+    return () => {
+      container.removeEventListener("scroll", updateScrollState);
+      resizeObserver.disconnect();
+    };
+  }, [updateScrollState, ...deps]);
+
+  return scrollState;
+}
+
 function useScrollActiveTabIntoView(tabs: Tab[]) {
   const tabRefsMap = useRef<Map<string, HTMLDivElement>>(new Map());
 

apps/desktop/src/components/main/body/search.tsx

@@ -1,4 +1,3 @@
-import { useMediaQuery } from "@uidotdev/usehooks";
 import { Loader2Icon, SearchIcon, XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
@@ -9,14 +8,22 @@ import { cn } from "@hypr/utils";
 import { useSearch } from "../../../contexts/search/ui";
 import { useCmdKeyPressed } from "../../../hooks/useCmdKeyPressed";
 
-export function Search() {
-  const hasSpace = useMediaQuery("(min-width: 900px)");
-
+export function Search({
+  hasSpace,
+  onManualExpandChange,
+}: {
+  hasSpace: boolean;
+  onManualExpandChange?: (isManuallyExpanded: boolean) => void;
+}) {
   const { focus, setFocusImpl, inputRef } = useSearch();
   const [isManuallyExpanded, setIsManuallyExpanded] = useState(false);
 
   const shouldShowExpanded = hasSpace || isManuallyExpanded;
 
+  useEffect(() => {
+    onManualExpandChange?.(isManuallyExpanded);
+  }, [isManuallyExpanded, onManualExpandChange]);
+
   useEffect(() => {
     if (!shouldShowExpanded) {
       setFocusImpl(() => {
@@ -49,6 +56,7 @@ export function Search() {
   if (shouldShowExpanded) {
     return (
       <ExpandedSearch
+        hasSpace={hasSpace}
         onFocus={handleExpandedFocus}
         onBlur={handleExpandedBlur}
       />
@@ -79,26 +87,26 @@ function CollapsedSearch({ onClick }: { onClick: () => void }) {
 }
 
 function ExpandedSearch({
+  hasSpace,
   onFocus,
   onBlur,
 }: {
+  hasSpace: boolean;
   onFocus?: () => void;
   onBlur?: () => void;
 }) {
   const { query, setQuery, isSearching, isIndexing, inputRef } = useSearch();
   const [isFocused, setIsFocused] = useState(false);
   const isCmdPressed = useCmdKeyPressed();
-  const hasSpace = useMediaQuery("(min-width: 900px)");
 
   const showLoading = isSearching || isIndexing;
   const showShortcut = isCmdPressed && !query;
 
-  // On narrow screens, always show the focused width when expanded
   const width = hasSpace
     ? isFocused
       ? "w-[250px]"
       : "w-[180px]"
-    : "w-[250px]";
+    : "w-[180px]";
 
   return (
     <div

eslint.config.js

@@ -4,7 +4,7 @@ import tseslint from "typescript-eslint";
 
 export default defineConfig(
   {
-    ignores: ["**/target/**", "**/dist/**", "**/node_modules/**"],
+    ignores: ["**/target/**", "**/dist/**", "**/node_modules/**", "**/*.gen.*"],
   },
   {
     files: ["apps/web/**/*.{ts,tsx}", "apps/desktop/**/*.{ts,tsx}"],