Double tap search button to start search (aeharding#123)

src/TabbedRoutes.tsx

@@ -29,7 +29,7 @@ import SettingsPage from "./pages/settings/SettingsPage";
 import { useContext, useRef } from "react";
 import { AppContext } from "./features/auth/AppContext";
 import InstallAppPage from "./pages/settings/InstallAppPage";
-import SearchPage from "./pages/search/SearchPage";
+import SearchPage, { focusSearchBar } from "./pages/search/SearchPage";
 import SearchPostsResultsPage from "./pages/search/results/SearchFeedResultsPage";
 import ProfileFeedItemsPage from "./pages/profile/ProfileFeedItemsPage";
 import SearchCommunitiesPage from "./pages/search/results/SearchCommunitiesPage";
@@ -128,6 +128,9 @@ export default function TabbedRoutes() {
   async function onSearchClick() {
     if (!isSearchButtonDisabled) return;
 
+    // if the search page is already open, focus the search bar
+    focusSearchBar();
+
     if (await scrollUpIfNeeded()) return;
 
     router.push(`/search`, "back");

src/pages/search/SearchPage.tsx

@@ -1,10 +1,18 @@
 import { IonHeader, IonPage, IonSearchbar, IonToolbar } from "@ionic/react";
 import AppContent from "../../features/shared/AppContent";
-import { useState } from "react";
+import { createRef, useState } from "react";
 import { css } from "@emotion/react";
 import TrendingCommunities from "../../features/search/TrendingCommunities";
 import SearchOptions from "../../features/search/SearchOptions";
 
+// eslint-disable-next-line no-undef -- I can't work out where to import this type from
+const searchBarRef = createRef<HTMLIonSearchbarElement>();
+
+/**
+ * Focuses on the search bar input element.
+ */
+export const focusSearchBar = () => searchBarRef.current?.setFocus();
+
 export default function SearchPage() {
   const [search, setSearch] = useState("");
 
@@ -13,6 +21,7 @@ export default function SearchPage() {
       <IonHeader>
         <IonToolbar>
           <IonSearchbar
+            ref={searchBarRef}
             placeholder="Search posts, communities, users"
             showCancelButton={search ? "always" : "never"}
             showClearButton="never"