feat: Relocate the 'plan mode' toggle from AccessModePopover to Composer as a checkbox.

Author: milisp

src/components/codex/Composer.tsx

@@ -15,7 +15,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Monitor, Settings, Split } from 'lucide-react';
+import { Checkbox } from '@/components/ui/checkbox';
+import { ListChecks, Monitor, Settings, Split } from 'lucide-react';
 import { useLayoutStore } from '@/stores';
 import { useConfigStore, type ThreadCwdMode } from '@/stores/codex';
 
@@ -38,7 +39,8 @@ export function Composer({
 }: ComposerProps) {
   const [images, setImages] = useState<string[]>([]);
   const { isConfigLess, setIsConfigLess } = useLayoutStore();
-  const { threadCwdMode, setThreadCwdMode } = useConfigStore();
+  const { threadCwdMode, setThreadCwdMode, collaborationMode, setCollaborationMode } =
+    useConfigStore();
 
   const handleSend = async (message: string) => {
     await onSend(message, images);
@@ -75,7 +77,6 @@ export function Composer({
             <SkillsPopover />
           </>
         )}
-        <AccessModePopover />
         <ModelReasonSelector />
       </InputArea>
 
@@ -102,6 +103,17 @@ export function Composer({
             </SelectItem>
           </SelectContent>
         </Select>
+        <label className="mr-1 inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-xs hover:bg-accent/60">
+          <Checkbox
+            checked={collaborationMode === 'plan'}
+            onCheckedChange={(checked) =>
+              setCollaborationMode(checked === true ? 'plan' : 'default')
+            }
+          />
+          <ListChecks className="h-3.5 w-3.5 text-muted-foreground" />
+          <span>Plan</span>
+        </label>
+        <AccessModePopover />
       </div>
     </div>
   );

src/components/codex/selector/AccessModePopover.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import type { SandboxMode } from '@/bindings/v2';
 import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Switch } from '@/components/ui/switch';
 import { useConfigStore } from '@/stores/codex';
 import { cn } from '@/lib/utils';
 
@@ -19,7 +18,7 @@ const ACCESS_MODE_OPTIONS: Array<{
 
 export function AccessModePopover() {
   const [open, setOpen] = useState(false);
-  const { sandbox, setAccessMode, collaborationMode, setCollaborationMode } = useConfigStore();
+  const { sandbox, setAccessMode } = useConfigStore();
   const selected =
     ACCESS_MODE_OPTIONS.find((item) => item.sandbox === sandbox) ?? ACCESS_MODE_OPTIONS[0];
 
@@ -33,15 +32,6 @@ export function AccessModePopover() {
       </PopoverTrigger>
       <PopoverContent className="w-72 p-1" align="start">
         <div className="space-y-1">
-          <div className="flex items-center justify-between rounded-md px-2 py-1.5">
-            <span className="text-xs font-medium">plan mode</span>
-            <Switch
-              checked={collaborationMode === 'plan'}
-              onCheckedChange={(checked) => {
-                setCollaborationMode(checked ? 'plan' : 'default');
-              }}
-            />
-          </div>
           {ACCESS_MODE_OPTIONS.map((item) => {
             const Icon = item.icon;
             const isActive = item.sandbox === sandbox;