refactor(launcher): clean code

src/apps/seelen_rofi/modules/launcher/infra/CommandInput.tsx

@@ -0,0 +1,43 @@
+import { AutoComplete, Tooltip } from 'antd';
+import { KeyboardEventHandler, RefObject } from 'react';
+
+interface CommandInputProps {
+  command: string;
+  setCommand: (value: string) => void;
+  showHistory: boolean;
+  setShowHistory: (value: boolean) => void;
+  matchingHistory: Array<{ value: string }>;
+  onInputKeyDown: KeyboardEventHandler<HTMLInputElement>;
+  inputRef: RefObject<HTMLInputElement>;
+  showHelp: boolean;
+}
+
+export const CommandInput = ({
+  command,
+  setCommand,
+  showHistory,
+  setShowHistory,
+  matchingHistory,
+  onInputKeyDown,
+  inputRef,
+  showHelp,
+}: CommandInputProps) => (
+  <Tooltip open={showHelp} title="Ctrl + F" placement="top">
+    <Tooltip open={showHelp} title="Enter" placement="right">
+      <AutoComplete
+        ref={inputRef as any}
+        className="launcher-header-command-input"
+        placeholder="App, Command or Path..."
+        options={matchingHistory}
+        filterOption
+        value={command}
+        onChange={setCommand}
+        open={showHistory}
+        onDropdownVisibleChange={setShowHistory}
+        onInputKeyDown={onInputKeyDown}
+        autoFocus
+        allowClear
+      />
+    </Tooltip>
+  </Tooltip>
+);

src/apps/seelen_rofi/modules/launcher/infra/Item.tsx

@@ -1,12 +1,13 @@
 import { convertFileSrc, invoke } from '@tauri-apps/api/core';
 import { getCurrentWindow } from '@tauri-apps/api/window';
 import { Dropdown, Menu } from 'antd';
+import { memo } from 'react';
 
 import { OverflowTooltip } from 'src/apps/shared/components/OverflowTooltip';
 
 import { StartMenuApp } from '../../shared/store/domain';
 
-export const Item = ({ item, hidden }: { item: StartMenuApp; hidden: boolean }) => {
+export const Item = memo(({ item, hidden }: { item: StartMenuApp; hidden: boolean }) => {
   const { label, icon, executionPath, path } = item;
 
   function onClick() {
@@ -44,4 +45,4 @@ export const Item = ({ item, hidden }: { item: StartMenuApp; hidden: boolean })
       </button>
     </Dropdown>
   );
-};
+});

src/apps/seelen_rofi/modules/launcher/infra/Runner.tsx → src/apps/seelen_rofi/modules/launcher/infra/RunnerSelector.tsx

@@ -1,5 +1,5 @@
 import { Select, Tooltip } from 'antd';
-import { RefObject } from 'react';
+import { forwardRef, RefObject } from 'react';
 
 interface RunnerSelectorProps {
   selectedRunner: number;
@@ -9,16 +9,13 @@ interface RunnerSelectorProps {
   showHelp: boolean;
 }
 
-export const RunnerSelector = ({
-  selectedRunner,
-  runners,
-  setSelectedRunner,
-  helpRef,
-  showHelp,
-}: RunnerSelectorProps) => {
+export const RunnerSelector = forwardRef((props: RunnerSelectorProps, ref) => {
+  const { selectedRunner, runners, setSelectedRunner, helpRef, showHelp } = props;
+
   return (
     <Tooltip open={showHelp} title="Ctrl + Tab" placement="left">
       <Select
+        ref={ref as any}
         className="launcher-header-runner-selector"
         value={selectedRunner}
         onChange={setSelectedRunner}
@@ -36,4 +33,4 @@ export const RunnerSelector = ({
       />
     </Tooltip>
   );
-};
+});

src/apps/seelen_rofi/modules/launcher/infra/index.tsx

@@ -1,6 +1,6 @@
 import { invoke } from '@tauri-apps/api/core';
 import { getCurrentWindow } from '@tauri-apps/api/window';
-import { AutoComplete, Checkbox, Select, Tooltip } from 'antd';
+import { Checkbox, Tooltip } from 'antd';
 import { motion } from 'framer-motion';
 import { KeyboardEventHandler, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -9,13 +9,15 @@ import { useWindowFocusChange } from 'seelen-core';
 import { Selectors } from '../../shared/store/app';
 import { SaveHistory } from '../app';
 
+import { CommandInput } from './CommandInput';
 import { Item } from './Item';
+import { RunnerSelector } from './RunnerSelector';
 
 export function Launcher() {
   const [showHelp, setShowHelp] = useState(true);
   const [showHistory, setShowHistory] = useState(false);
   const [_command, _setCommand] = useState('');
-  const [selectedRunner, setSelectedRunner] = useState(0);
+  const [usingRunnerIdx, setUsingRunnerIdx] = useState(0);
 
   const history = useSelector(Selectors.history);
   const runners = useSelector(Selectors.settings.runners);
@@ -34,23 +36,32 @@ export function Launcher() {
     }
   });
 
+  const command = _command.trim().toLowerCase();
+  const selectedRunner = runners[usingRunnerIdx];
+  const selectedHistory = selectedRunner ? history[selectedRunner.id] || [] : [];
+  const matchingHistory = selectedHistory
+    .filter((value) => value.toLowerCase().includes(command))
+    .map((value) => ({ value }));
+
   const onInputKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
     if (!showHistory || matchingHistory.length === 0) {
       if (e.key === 'Enter') {
         invoke('open_file', { path: command });
         getCurrentWindow().hide();
-        SaveHistory({
-          ...history,
-          [selectedRunner]: [...new Set([command, ...(history[selectedRunner] || [])])],
-        });
+        if (selectedRunner) {
+          SaveHistory({
+            ...history,
+            [selectedRunner.id]: [...new Set([command, ...(history[selectedRunner.id] || [])])],
+          });
+        }
         return;
       }
     }
   };
 
   const onDocumentKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
     if (e.ctrlKey && e.key === 'Tab') {
-      setSelectedRunner(
+      setUsingRunnerIdx(
         (current) => (e.shiftKey ? current + runners.length - 1 : current + 1) % runners.length,
       );
       return;
@@ -67,60 +78,35 @@ export function Launcher() {
     }
   };
 
-  const command = _command.trim().toLowerCase();
-  const selectedHistory = history[selectedRunner] || [];
-  const matchingHistory = selectedHistory
-    .filter((value) => value.toLowerCase().includes(command))
-    .map((value) => ({ value }));
-
   return (
     <motion.div className="launcher" onKeyDown={onDocumentKeyDown}>
       <div className="launcher-header">
-        <Tooltip open={showHelp} title="Ctrl + Tab" placement="left">
-          <Select
-            ref={selectorRef as any}
-            className="launcher-header-runner-selector"
-            value={selectedRunner}
-            onChange={setSelectedRunner}
-            options={runners.map((runner, idx) => ({
-              key: runner.id,
-              label: runner.label,
-              value: idx,
-            }))}
-            onKeyDown={(e) => {
-              if (e.shiftKey && e.key === 'Tab') {
-                helpRef.current?.focus();
-                e.preventDefault();
-              }
-            }}
-          />
-        </Tooltip>
-        <Tooltip open={showHelp} title="Ctrl + F" placement="top">
-          <Tooltip open={showHelp} title="Enter" placement="right">
-            <AutoComplete
-              ref={inputRef as any}
-              className="launcher-header-command-input"
-              placeholder="App, Command or Path..."
-              options={matchingHistory}
-              filterOption
-              value={_command}
-              onChange={_setCommand}
-              open={showHistory}
-              onDropdownVisibleChange={setShowHistory}
-              onInputKeyDown={onInputKeyDown}
-              autoFocus
-              allowClear
-            />
-          </Tooltip>
-        </Tooltip>
+        <RunnerSelector
+          ref={selectorRef}
+          selectedRunner={usingRunnerIdx}
+          runners={runners}
+          setSelectedRunner={setUsingRunnerIdx}
+          helpRef={helpRef}
+          showHelp={showHelp}
+        />
+        <CommandInput
+          command={_command}
+          setCommand={_setCommand}
+          showHistory={showHistory}
+          setShowHistory={setShowHistory}
+          matchingHistory={matchingHistory}
+          onInputKeyDown={onInputKeyDown}
+          inputRef={inputRef}
+          showHelp={showHelp}
+        />
       </div>
       <Tooltip open={showHelp} title="Tab / Shift + Tab" placement="left">
         <div className="launcher-body">
           {apps.map((item) => (
             <Item
               key={item.executionPath}
               item={item}
-              hidden={item.label.toLowerCase().includes(command)}
+              hidden={!item.label.toLowerCase().includes(command)}
             />
           ))}
         </div>