feat(editor): expand Replace from the Find bar with a chevron (#378)

The in-editor Find bar gains a chevron at its left that expands and collapses the Replace row (Replace, Replace All, Exclude), replacing the separate Replace icon button. Cmd/Ctrl+F opens the bar collapsed and Cmd/Ctrl+R expanded; the search text, options and focus are kept when toggling. The chevron reports aria-expanded.

Fixes #362

src/editor/core/view/EditorArea.module.css

@@ -117,6 +117,16 @@
   background: var(--bg-editor-inline, var(--bg-elev));
   border-bottom: 1px solid var(--border-editor-tabs, var(--border));
 }
+.findExpandable {
+  grid-template-columns: auto minmax(220px, 420px) auto 1fr;
+}
+.findExpand {
+  grid-column: 1;
+  grid-row: 1;
+}
+.findExpandable .findField {
+  grid-column: 2;
+}
 .findField {
   min-width: 0;
 }

src/editor/core/view/FindBar.tsx

@@ -390,7 +390,25 @@ export function FindPanel({ target, version, replace, seq, onReplaceShown, onClo
   const canReplace = !!opts.search && !invalid;
 
   return (
-    <div className={styles.find} role="search" aria-label={replace ? "Replace in file" : "Find in file"}>
+    <div
+      className={clsx(styles.find, onReplaceShown && styles.findExpandable)}
+      role="search"
+      aria-label={replace ? "Replace in file" : "Find in file"}
+    >
+      {onReplaceShown && (
+        <IconButton
+          icon={replace ? "chevron-down" : "chevron-right"}
+          title={replace ? "Hide Replace" : "Show Replace"}
+          size="small"
+          className={styles.findExpand}
+          aria-expanded={replace}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => {
+            if (replaceBoxRef.current?.contains(document.activeElement)) inputRef.current?.focus();
+            onReplaceShown(!replace);
+          }}
+        />
+      )}
       <div ref={findBoxRef} className={styles.findField}>
         <SearchField
           ref={inputRef}
@@ -450,15 +468,6 @@ export function FindPanel({ target, version, replace, seq, onReplaceShown, onClo
           pressed={scoped || opts.context !== "any"}
           onClick={() => setFilterMenu(true)}
         />
-        {onReplaceShown && (
-          <IconButton
-            icon="replace"
-            title={replace ? "Hide Replace" : "Show Replace"}
-            size="small"
-            pressed={replace}
-            onClick={() => onReplaceShown(!replace)}
-          />
-        )}
       </div>
       <IconButton icon="close" title="Close" shortcut="⎋" size="small" className={styles.findClose} onClick={close} />
       {replace && (