🤖 refactor: extract createEditKeyHandler for inline edit inputs

DRY helper for Enter-to-save, Escape-to-cancel pattern with stopPropagation.

Author: ammar-agent

src/browser/components/Settings/sections/ModelRow.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Check, Pencil, Star, Trash2, X } from "lucide-react";
+import { createEditKeyHandler } from "@/browser/utils/ui/keybinds";
 import { GatewayIcon } from "@/browser/components/icons/GatewayIcon";
 import { cn } from "@/common/lib/utils";
 import { TooltipWrapper, Tooltip } from "@/browser/components/Tooltip";
@@ -45,13 +46,10 @@ export function ModelRow(props: ModelRowProps) {
               type="text"
               value={props.editValue ?? props.modelId}
               onChange={(e) => props.onEditChange?.(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") props.onSaveEdit?.();
-                if (e.key === "Escape") {
-                  e.stopPropagation();
-                  props.onCancelEdit?.();
-                }
-              }}
+              onKeyDown={createEditKeyHandler({
+                onSave: () => props.onSaveEdit?.(),
+                onCancel: () => props.onCancelEdit?.(),
+              })}
               className="bg-modal-bg border-border-medium focus:border-accent min-w-0 flex-1 rounded border px-2 py-0.5 font-mono text-xs focus:outline-none"
               autoFocus
             />

src/browser/components/Settings/sections/ProjectSettingsSection.tsx

@@ -14,6 +14,7 @@ import {
   Check,
   X,
 } from "lucide-react";
+import { createEditKeyHandler } from "@/browser/utils/ui/keybinds";
 
 type TestResult = { success: true; tools: string[] } | { success: false; error: string };
 
@@ -296,14 +297,10 @@ export const ProjectSettingsSection: React.FC = () => {
                         className="border-border-medium bg-secondary/30 text-foreground placeholder:text-muted-foreground focus:ring-accent mt-1 w-full rounded-md border px-2 py-1 text-xs focus:ring-1 focus:outline-none"
                         autoFocus
                         spellCheck={false}
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") {
-                            void handleSaveEdit();
-                          } else if (e.key === "Escape") {
-                            e.stopPropagation();
-                            handleCancelEdit();
-                          }
-                        }}
+                        onKeyDown={createEditKeyHandler({
+                          onSave: () => void handleSaveEdit(),
+                          onCancel: handleCancelEdit,
+                        })}
                       />
                     ) : (
                       <p className="text-muted-foreground mt-0.5 text-xs break-all">{command}</p>

src/browser/components/Settings/sections/ProvidersSection.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from "react";
 import { ChevronDown, ChevronRight, Check, X } from "lucide-react";
+import { createEditKeyHandler } from "@/browser/utils/ui/keybinds";
 import { SUPPORTED_PROVIDERS } from "@/common/constants/providers";
 import type { ProviderName } from "@/common/constants/providers";
 import { ProviderWithIcon } from "@/browser/components/ProviderIcon";
@@ -262,13 +263,10 @@ export function ProvidersSection() {
                             placeholder={fieldConfig.placeholder}
                             className="bg-modal-bg border-border-medium focus:border-accent flex-1 rounded border px-2 py-1.5 font-mono text-xs focus:outline-none"
                             autoFocus
-                            onKeyDown={(e) => {
-                              if (e.key === "Enter") handleSaveEdit();
-                              if (e.key === "Escape") {
-                                e.stopPropagation();
-                                handleCancelEdit();
-                              }
-                            }}
+                            onKeyDown={createEditKeyHandler({
+                              onSave: handleSaveEdit,
+                              onCancel: handleCancelEdit,
+                            })}
                           />
                           <Button
                             variant="ghost"

src/browser/utils/ui/keybinds.ts

@@ -296,3 +296,21 @@ export const KEYBINDS = {
   // "D" for Dictate - intuitive and available
   TOGGLE_VOICE_INPUT: { key: "d", ctrl: true },
 } as const;
+
+/**
+ * Create a keyboard event handler for inline edit inputs.
+ * Handles Enter to save and Escape to cancel (with stopPropagation to prevent modal close).
+ */
+export function createEditKeyHandler(options: {
+  onSave: () => void;
+  onCancel: () => void;
+}): (e: React.KeyboardEvent) => void {
+  return (e) => {
+    if (e.key === "Enter") {
+      options.onSave();
+    } else if (e.key === "Escape") {
+      e.stopPropagation();
+      options.onCancel();
+    }
+  };
+}