🤖 refactor: extract duplicated mode switch code

Extracted MODE_OPTIONS constant and ModeHelpTooltip component to
eliminate duplication between full and compact mode switch sections.

_Generated with `cmux`_

Author: ammar-agent

src/components/ChatInput.tsx

@@ -27,7 +27,7 @@ import {
   prepareCompactionMessage,
   type CommandHandlerContext,
 } from "@/utils/chatCommands";
-import { ToggleGroup } from "./ToggleGroup";
+import { ToggleGroup, type ToggleOption } from "./ToggleGroup";
 import { CUSTOM_EVENTS } from "@/constants/events";
 import type { UIMode } from "@/types/mode";
 import {
@@ -88,6 +88,26 @@ export interface ChatInputAPI {
   appendText: (text: string) => void;
 }
 
+
+const MODE_OPTIONS: Array<ToggleOption<UIMode>> = [
+  { value: "exec", label: "Exec", activeClassName: "bg-exec-mode text-white" },
+  { value: "plan", label: "Plan", activeClassName: "bg-plan-mode text-white" },
+];
+
+const ModeHelpTooltip: React.FC = () => (
+  <TooltipWrapper inline>
+    <HelpIndicator>?</HelpIndicator>
+    <Tooltip className="tooltip" align="center" width="wide">
+      <strong>Exec Mode:</strong> AI edits files and execute commands
+      <br />
+      <br />
+      <strong>Plan Mode:</strong> AI proposes plans but does not edit files
+      <br />
+      <br />
+      Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
+    </Tooltip>
+  </TooltipWrapper>
+);
 export interface ChatInputProps {
   workspaceId: string;
   onMessageSent?: () => void; // Optional callback after successful send
@@ -890,51 +910,23 @@ export const ChatInput: React.FC<ChatInputProps> = ({
               )}
             >
               <ToggleGroup<UIMode>
-                options={[
-                  { value: "exec", label: "Exec", activeClassName: "bg-exec-mode text-white" },
-                  { value: "plan", label: "Plan", activeClassName: "bg-plan-mode text-white" },
-                ]}
+                options={MODE_OPTIONS}
                 value={mode}
                 onChange={setMode}
               />
             </div>
-            <TooltipWrapper inline>
-              <HelpIndicator>?</HelpIndicator>
-              <Tooltip className="tooltip" align="center" width="wide">
-                <strong>Exec Mode:</strong> AI edits files and execute commands
-                <br />
-                <br />
-                <strong>Plan Mode:</strong> AI proposes plans but does not edit files
-                <br />
-                <br />
-                Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
-              </Tooltip>
-            </TooltipWrapper>
+            <ModeHelpTooltip />
           </div>
 
           {/* Mode Switch - compact version for narrow viewports */}
           <div className="ml-auto hidden items-center gap-1.5 max-[550px]:flex">
             <ToggleGroup<UIMode>
-              options={[
-                { value: "exec", label: "Exec", activeClassName: "bg-exec-mode text-white" },
-                { value: "plan", label: "Plan", activeClassName: "bg-plan-mode text-white" },
-              ]}
+              options={MODE_OPTIONS}
               value={mode}
               onChange={setMode}
               compact
             />
-            <TooltipWrapper inline>
-              <HelpIndicator>?</HelpIndicator>
-              <Tooltip className="tooltip" align="center" width="wide">
-                <strong>Exec Mode:</strong> AI edits files and execute commands
-                <br />
-                <br />
-                <strong>Plan Mode:</strong> AI proposes plans but does not edit files
-                <br />
-                <br />
-                Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
-              </Tooltip>
-            </TooltipWrapper>
+            <ModeHelpTooltip />
           </div>
         </div>
       </div>