Allow users to cancel out of theme selector (#310)

packages/cli/src/ui/App.tsx

@@ -202,6 +202,7 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
             onSelect={handleThemeSelect}
             onHighlight={handleThemeHighlight}
             settings={settings}
+            setQuery={setQuery}
           />
         </Box>
       ) : (

packages/cli/src/ui/components/ThemeDialog.tsx

@@ -21,12 +21,15 @@ interface ThemeDialogProps {
   onHighlight: (themeName: string | undefined) => void;
   /** The settings object */
   settings: LoadedSettings;
+  /** Callback to set the query */
+  setQuery: (query: string) => void;
 }
 
 export function ThemeDialog({
   onSelect,
   onHighlight,
   settings,
+  setQuery,
 }: ThemeDialogProps): React.JSX.Element {
   const [selectedScope, setSelectedScope] = useState<SettingScope>(
     SettingScope.User,
@@ -56,6 +59,7 @@ export function ThemeDialog({
   ];
 
   const handleThemeSelect = (themeName: string) => {
+    setQuery(''); // Clear the query when user selects a theme
     onSelect(themeName, selectedScope);
   };
 
@@ -77,6 +81,10 @@ export function ThemeDialog({
     if (key.tab) {
       setFocusedSection((prev) => (prev === 'theme' ? 'scope' : 'theme'));
     }
+    if (key.escape) {
+      setQuery(''); // Clear the query when user hits escape
+      onSelect(undefined, selectedScope);
+    }
   });
 
   let otherScopeModifiedMessage = '';