fix(web): make Escape return from PRs and Usage pages

apps/web/src/components/pullRequest/PullRequestListFilters.tsx

@@ -126,6 +126,17 @@ export function PullRequestSearchInput({
         type="search"
         value={value}
         onChange={(event) => onChange(event.currentTarget.value)}
+        onKeyDown={(event) => {
+          if (event.key !== "Escape") return;
+          if (event.nativeEvent.isComposing || event.keyCode === 229) {
+            event.stopPropagation();
+            return;
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          event.currentTarget.blur();
+          if (value) onChange("");
+        }}
         placeholder="Search pull requests, or label:bug"
         aria-label="Search pull requests"
       />

apps/web/src/hooks/useEscapeToGoBack.ts

@@ -0,0 +1,38 @@
+import { useCanGoBack, useNavigate } from "@tanstack/react-router";
+import { useCallback, useEffect } from "react";
+
+export function useEscapeToGoBack() {
+  const navigate = useNavigate();
+  const canGoBack = useCanGoBack();
+  const navigateBack = useCallback(() => {
+    if (canGoBack) {
+      window.history.back();
+      return;
+    }
+    void navigate({ to: "/" });
+  }, [canGoBack, navigate]);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.defaultPrevented ||
+        event.isComposing ||
+        event.keyCode === 229 ||
+        event.key !== "Escape" ||
+        event.repeat
+      )
+        return;
+      event.preventDefault();
+
+      const activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement) {
+        activeElement.blur();
+      }
+
+      navigateBack();
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [navigateBack]);
+}

apps/web/src/routes/_chat.pull-requests.tsx

@@ -119,6 +119,7 @@ import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "../
 import { SidebarInset } from "../components/ui/sidebar";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../components/ui/tooltip";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
+import { useEscapeToGoBack } from "../hooks/useEscapeToGoBack";
 import { useOpenPanelPullRequestUrl } from "../hooks/useOpenPanelPullRequestUrl";
 import { writeTextToClipboard } from "../hooks/useCopyToClipboard";
 import { toastManager } from "../components/ui/toast";
@@ -1880,6 +1881,7 @@ function PullRequestsRouteView() {
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [keybindings]);
+  useEscapeToGoBack();
 
   return (
     <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">

apps/web/src/routes/settings.tsx

@@ -1,14 +1,8 @@
 import { RotateCcwIcon } from "lucide-react";
-import {
-  Outlet,
-  createFileRoute,
-  redirect,
-  useCanGoBack,
-  useLocation,
-  useNavigate,
-} from "@tanstack/react-router";
-import { useCallback, useEffect, useState } from "react";
+import { Outlet, createFileRoute, redirect, useLocation } from "@tanstack/react-router";
+import { useState } from "react";
 
+import { useEscapeToGoBack } from "../hooks/useEscapeToGoBack";
 import { useSettingsRestore } from "../components/settings/SettingsPanels";
 import { SettingsBreadcrumb } from "../components/settings/SettingsBreadcrumb";
 import { Button } from "../components/ui/button";
@@ -34,39 +28,10 @@ function RestoreDefaultsButton({ onRestored }: { onRestored: () => void }) {
 
 function SettingsContentLayout() {
   const location = useLocation();
-  const navigate = useNavigate();
-  const canGoBack = useCanGoBack();
   const [restoreSignal, setRestoreSignal] = useState(0);
   const showRestoreDefaults = location.pathname === "/settings/general";
   const handleRestored = () => setRestoreSignal((value) => value + 1);
-  const navigateBackWithinApp = useCallback(() => {
-    if (canGoBack) {
-      window.history.back();
-      return;
-    }
-    void navigate({ to: "/" });
-  }, [canGoBack, navigate]);
-
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.defaultPrevented) return;
-      if (event.key === "Escape") {
-        event.preventDefault();
-
-        const activeElement = document.activeElement;
-        if (activeElement instanceof HTMLElement) {
-          activeElement.blur();
-        }
-
-        navigateBackWithinApp();
-      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-    return () => {
-      window.removeEventListener("keydown", onKeyDown);
-    };
-  }, [navigateBackWithinApp]);
+  useEscapeToGoBack();
 
   return (
     <SidebarInset

apps/web/src/routes/usage.tsx

@@ -1,7 +1,13 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 import { UsagePage } from "../components/usage/UsagePage";
+import { useEscapeToGoBack } from "../hooks/useEscapeToGoBack";
+
+function UsageRouteView() {
+  useEscapeToGoBack();
+  return <UsagePage />;
+}
 
 export const Route = createFileRoute("/usage")({
-  component: UsagePage,
+  component: UsageRouteView,
 });