Terminal search (#1654)

This adds support for searching the terminal buffer using the
`@xterm/addon-search` library. It also adds three options for searching:
regex, case-sensitive, and whole-word. These can be included or excluded
from the search options for `useSearch` depending on whether the search
backend supports it.


![image](https://github.com/user-attachments/assets/e0b7e2ed-641b-463f-94a2-f24969fb3b06)

I didn't like any of the Font Awesome icons for these toggles so until
we have time to make some of our own icons that better match the Font
Awesome style, I've appropriated VSCode's icons from their [codicons
font](https://github.com/microsoft/vscode-codicons).

To implement the toggle-able buttons for these options, I've introduced
a new HeaderElem component, `ToggleIconButton`. This is styled similarly
to `IconButton`, but when you hover over it, it also shows a highlighted
background and when active, it shows as fully-opaque and with an
accented border.

Also removes the `useDismiss` behavior for the search box to better
match behavior in other apps.

Also fixes the scrollbar observer from my previous PR so it's wider.

Author: esimkowitz

frontend/app/block/blockframe.tsx

@@ -30,7 +30,7 @@ import {
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { ErrorBoundary } from "@/element/errorboundary";
-import { IconButton } from "@/element/iconbutton";
+import { IconButton, ToggleIconButton } from "@/element/iconbutton";
 import { MagnifyIcon } from "@/element/magnify";
 import { MenuButton } from "@/element/menubutton";
 import { NodeModel } from "@/layout/index";
@@ -278,6 +278,8 @@ const BlockFrame_Header = ({
 const HeaderTextElem = React.memo(({ elem, preview }: { elem: HeaderElem; preview: boolean }) => {
     if (elem.elemtype == "iconbutton") {
         return <IconButton decl={elem} className={clsx("block-frame-header-iconbutton", elem.className)} />;
+    } else if (elem.elemtype == "toggleiconbutton") {
+        return <ToggleIconButton decl={elem} className={clsx("block-frame-header-iconbutton", elem.className)} />;
     } else if (elem.elemtype == "input") {
         return <Input decl={elem} className={clsx("block-frame-input", elem.className)} preview={preview} />;
     } else if (elem.elemtype == "text") {

frontend/app/element/iconbutton.scss

@@ -32,4 +32,17 @@
         cursor: default;
         opacity: 0.45 !important;
     }
+
+    &.toggle {
+        border-radius: 3px;
+        padding: 1px;
+        &.active {
+            opacity: 1;
+            border: 1px solid var(--accent-color);
+            padding: 0;
+        }
+        &:hover {
+            background: var(--highlight-bg-color);
+        }
+    }
 }

frontend/app/element/iconbutton.tsx

@@ -4,7 +4,8 @@
 import { useLongClick } from "@/app/hook/useLongClick";
 import { makeIconClass } from "@/util/util";
 import clsx from "clsx";
-import { forwardRef, memo, useRef } from "react";
+import { atom, useAtom } from "jotai";
+import { forwardRef, memo, useMemo, useRef } from "react";
 import "./iconbutton.scss";
 
 type IconButtonProps = { decl: IconButtonDecl; className?: string };
@@ -13,15 +14,48 @@ export const IconButton = memo(
         ref = ref ?? useRef<HTMLButtonElement>(null);
         const spin = decl.iconSpin ?? false;
         useLongClick(ref, decl.click, decl.longClick, decl.disabled);
+        const disabled = decl.disabled ?? false;
         return (
             <button
                 ref={ref}
                 className={clsx("wave-iconbutton", className, decl.className, {
-                    disabled: decl.disabled,
+                    disabled,
                     "no-action": decl.noAction,
                 })}
                 title={decl.title}
+                aria-label={decl.title}
                 style={{ color: decl.iconColor ?? "inherit" }}
+                disabled={disabled}
+            >
+                {typeof decl.icon === "string" ? <i className={makeIconClass(decl.icon, true, { spin })} /> : decl.icon}
+            </button>
+        );
+    })
+);
+
+type ToggleIconButtonProps = { decl: ToggleIconButtonDecl; className?: string };
+
+export const ToggleIconButton = memo(
+    forwardRef<HTMLButtonElement, ToggleIconButtonProps>(({ decl, className }, ref) => {
+        const activeAtom = useMemo(() => decl.active ?? atom(false), [decl.active]);
+        const [active, setActive] = useAtom(activeAtom);
+        ref = ref ?? useRef<HTMLButtonElement>(null);
+        const spin = decl.iconSpin ?? false;
+        const title = `${decl.title}${active ? " (Active)" : ""}`;
+        const disabled = decl.disabled ?? false;
+        return (
+            <button
+                ref={ref}
+                className={clsx("wave-iconbutton", "toggle", className, decl.className, {
+                    active,
+                    disabled,
+                    "no-action": decl.noAction,
+                })}
+                title={title}
+                aria-label={title}
+                style={{ color: decl.iconColor ?? "inherit" }}
+                onClick={() => setActive(!active)}
+                disabled={disabled}
             >
                 {typeof decl.icon === "string" ? <i className={makeIconClass(decl.icon, true, { spin })} /> : decl.icon}
             </button>

frontend/app/element/search.scss

@@ -1,3 +1,6 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 .search-container {
     display: flex;
     flex-direction: row;
@@ -31,13 +34,25 @@
         }
     }
 
-    .right-buttons {
+    .right-buttons,
+    .additional-buttons {
         display: flex;
-        gap: 5px;
-        padding-left: 5px;
         border-left: 1px solid var(--modal-border-color);
+    }
+
+    .right-buttons {
+        gap: 5px;
+        padding-left: 4px;
         button {
             font-size: 12px;
         }
     }
+
+    .additional-buttons {
+        gap: 1px;
+        padding-left: 5px;
+        button {
+            font-size: 14px;
+        }
+    }
 }

frontend/app/element/search.stories.tsx

@@ -16,10 +16,35 @@ const meta: Meta<typeof Search> = {
 export default meta;
 type Story = StoryObj<typeof Popover>;
 
-export const DefaultSearch: Story = {
+export const Default: Story = {
     render: (args) => {
         const props = useSearch();
-        const setIsOpen = useSetAtom(props.isOpenAtom);
+        const setIsOpen = useSetAtom<boolean, [boolean], void>(props.isOpen);
+        useEffect(() => {
+            setIsOpen(true);
+        }, []);
+        return (
+            <div
+                className="viewbox"
+                ref={props.anchorRef as React.RefObject<HTMLDivElement>}
+                style={{
+                    border: "2px solid black",
+                    width: "100%",
+                    height: "200px",
+                    background: "var(--main-bg-color)",
+                }}
+            >
+                <Search {...args} {...props} />
+            </div>
+        );
+    },
+    args: {},
+};
+
+export const AdditionalButtons: Story = {
+    render: (args) => {
+        const props = useSearch({ regex: true, caseSensitive: true, wholeWord: true });
+        const setIsOpen = useSetAtom<boolean, [boolean], void>(props.isOpen);
         useEffect(() => {
             setIsOpen(true);
         }, []);
@@ -44,8 +69,8 @@ export const DefaultSearch: Story = {
 export const Results10: Story = {
     render: (args) => {
         const props = useSearch();
-        const setIsOpen = useSetAtom(props.isOpenAtom);
-        const setNumResults = useSetAtom(props.numResultsAtom);
+        const setIsOpen = useSetAtom<boolean, [boolean], void>(props.isOpen);
+        const setNumResults = useSetAtom<number, [number], void>(props.resultsCount);
         useEffect(() => {
             setIsOpen(true);
             setNumResults(10);
@@ -71,13 +96,13 @@ export const Results10: Story = {
 export const InputAndResults10: Story = {
     render: (args) => {
         const props = useSearch();
-        const setIsOpen = useSetAtom(props.isOpenAtom);
-        const setNumResults = useSetAtom(props.numResultsAtom);
-        const setSearch = useSetAtom(props.searchAtom);
+        const setIsOpen = useSetAtom<boolean, [boolean], void>(props.isOpen);
+        const setNumResults = useSetAtom<number, [number], void>(props.resultsCount);
+        const setSearch = useSetAtom<string, [string], void>(props.searchValue);
         useEffect(() => {
             setIsOpen(true);
-            setNumResults(10);
             setSearch("search term");
+            setTimeout(() => setNumResults(10), 10);
         }, []);
         return (
             <div
@@ -100,13 +125,13 @@ export const InputAndResults10: Story = {
 export const LongInputAndResults10: Story = {
     render: (args) => {
         const props = useSearch();
-        const setIsOpen = useSetAtom(props.isOpenAtom);
-        const setNumResults = useSetAtom(props.numResultsAtom);
-        const setSearch = useSetAtom(props.searchAtom);
+        const setIsOpen = useSetAtom<boolean, [boolean], void>(props.isOpen);
+        const setNumResults = useSetAtom<number, [number], void>(props.resultsCount);
+        const setSearch = useSetAtom<string, [string], void>(props.searchValue);
         useEffect(() => {
             setIsOpen(true);
-            setNumResults(10);
             setSearch("search term ".repeat(10).trimEnd());
+            setTimeout(() => setNumResults(10), 10);
         }, []);
         return (
             <div

frontend/app/element/search.tsx

@@ -1,8 +1,11 @@
-import { autoUpdate, FloatingPortal, Middleware, offset, useDismiss, useFloating } from "@floating-ui/react";
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { autoUpdate, FloatingPortal, Middleware, offset, useFloating } from "@floating-ui/react";
 import clsx from "clsx";
-import { atom, useAtom } from "jotai";
+import { atom, useAtom, WritableAtom } from "jotai";
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { IconButton } from "./iconbutton";
+import { IconButton, ToggleIconButton } from "./iconbutton";
 import { Input } from "./input";
 import "./search.scss";
 
@@ -16,10 +19,13 @@ type SearchProps = SearchAtoms & {
 };
 
 const SearchComponent = ({
-    searchAtom,
-    indexAtom,
-    numResultsAtom,
-    isOpenAtom,
+    searchValue: searchAtom,
+    resultsIndex: indexAtom,
+    resultsCount: numResultsAtom,
+    regex: regexAtom,
+    caseSensitive: caseSensitiveAtom,
+    wholeWord: wholeWordAtom,
+    isOpen: isOpenAtom,
     anchorRef,
     offsetX = 10,
     offsetY = 10,
@@ -37,9 +43,11 @@ const SearchComponent = ({
     }, []);
 
     useEffect(() => {
-        setSearch("");
-        setIndex(0);
-        setNumResults(0);
+        if (!isOpen) {
+            setSearch("");
+            setIndex(0);
+            setNumResults(0);
+        }
     }, [isOpen]);
 
     useEffect(() => {
@@ -62,7 +70,6 @@ const SearchComponent = ({
             if (floatingLeft < 5) {
                 xOffsetCalc += 5 - floatingLeft;
             }
-            console.log("offsetCalc", yOffsetCalc, xOffsetCalc);
             return {
                 mainAxis: yOffsetCalc,
                 crossAxis: xOffsetCalc,
@@ -72,7 +79,7 @@ const SearchComponent = ({
     );
     middleware.push(offset(offsetCallback));
 
-    const { refs, floatingStyles, context } = useFloating({
+    const { refs, floatingStyles } = useFloating({
         placement: "top-end",
         open: isOpen,
         onOpenChange: handleOpenChange,
@@ -83,8 +90,6 @@ const SearchComponent = ({
         },
     });
 
-    const dismiss = useDismiss(context);
-
     const onPrevWrapper = useCallback(
         () => (onPrev ? onPrev() : setIndex((index - 1) % numResults)),
         [onPrev, index, numResults]
@@ -112,13 +117,15 @@ const SearchComponent = ({
         elemtype: "iconbutton",
         icon: "chevron-up",
         title: "Previous Result (Shift+Enter)",
+        disabled: numResults === 0,
         click: onPrevWrapper,
     };
 
     const nextDecl: IconButtonDecl = {
         elemtype: "iconbutton",
         icon: "chevron-down",
         title: "Next Result (Enter)",
+        disabled: numResults === 0,
         click: onNextWrapper,
     };
 
@@ -129,11 +136,15 @@ const SearchComponent = ({
         click: () => setIsOpen(false),
     };
 
+    const regexDecl = createToggleButtonDecl(regexAtom, "custom@regex", "Regular Expression");
+    const wholeWordDecl = createToggleButtonDecl(wholeWordAtom, "custom@whole-word", "Whole Word");
+    const caseSensitiveDecl = createToggleButtonDecl(caseSensitiveAtom, "custom@case-sensitive", "Case Sensitive");
+
     return (
         <>
             {isOpen && (
                 <FloatingPortal>
-                    <div className="search-container" style={{ ...floatingStyles }} {...dismiss} ref={refs.setFloating}>
+                    <div className="search-container" style={{ ...floatingStyles }} ref={refs.setFloating}>
                         <Input
                             placeholder="Search"
                             value={search}
@@ -148,6 +159,15 @@ const SearchComponent = ({
                         >
                             {index + 1}/{numResults}
                         </div>
+
+                        {(caseSensitiveDecl || wholeWordDecl || regexDecl) && (
+                            <div className="additional-buttons">
+                                {caseSensitiveDecl && <ToggleIconButton decl={caseSensitiveDecl} />}
+                                {wholeWordDecl && <ToggleIconButton decl={wholeWordDecl} />}
+                                {regexDecl && <ToggleIconButton decl={regexDecl} />}
+                            </div>
+                        )}
+
                         <div className="right-buttons">
                             <IconButton decl={prevDecl} />
                             <IconButton decl={nextDecl} />
@@ -162,16 +182,49 @@ const SearchComponent = ({
 
 export const Search = memo(SearchComponent) as typeof SearchComponent;
 
-export function useSearch(anchorRef?: React.RefObject<HTMLElement>, viewModel?: ViewModel): SearchProps {
+type SearchOptions = {
+    anchorRef?: React.RefObject<HTMLElement>;
+    viewModel?: ViewModel;
+    regex?: boolean;
+    caseSensitive?: boolean;
+    wholeWord?: boolean;
+};
+
+export function useSearch(options?: SearchOptions): SearchProps {
     const searchAtoms: SearchAtoms = useMemo(
-        () => ({ searchAtom: atom(""), indexAtom: atom(0), numResultsAtom: atom(0), isOpenAtom: atom(false) }),
+        () => ({
+            searchValue: atom(""),
+            resultsIndex: atom(0),
+            resultsCount: atom(0),
+            isOpen: atom(false),
+            regex: options?.regex !== undefined ? atom(options.regex) : undefined,
+            caseSensitive: options?.caseSensitive !== undefined ? atom(options.caseSensitive) : undefined,
+            wholeWord: options?.wholeWord !== undefined ? atom(options.wholeWord) : undefined,
+        }),
         []
     );
-    anchorRef ??= useRef(null);
+    const anchorRef = options?.anchorRef ?? useRef(null);
     useEffect(() => {
-        if (viewModel) {
-            viewModel.searchAtoms = searchAtoms;
+        if (options?.viewModel) {
+            options.viewModel.searchAtoms = searchAtoms;
+            return () => {
+                options.viewModel.searchAtoms = undefined;
+            };
         }
-    }, [viewModel]);
+    }, [options?.viewModel]);
     return { ...searchAtoms, anchorRef };
 }
+
+const createToggleButtonDecl = (
+    atom: WritableAtom<boolean, [boolean], void> | undefined,
+    icon: string,
+    title: string
+): ToggleIconButtonDecl =>
+    atom
+        ? {
+              elemtype: "toggleiconbutton",
+              icon,
+              title,
+              active: atom,
+          }
+        : null;