Enhance AppStatusBar with new stop generation button and update shortcuts settings

Author: ooboqoo

src/renderer/src/coder/AppStatusBar.tsx

@@ -1,4 +1,4 @@
-import { Pointer, PointerOff, Square } from 'lucide-react'
+import { Pointer, PointerOff, OctagonX } from 'lucide-react'
 import { useSolutionStore } from '@/lib/store/solution'
 import { useShortcutsStore } from '@/lib/store/shortcuts'
 import { useAppStore } from '@/lib/store/app'
@@ -22,15 +22,20 @@ export function AppStatusBar() {
           <div className="flex items-center space-x-2">
             <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-r-2 border-[currentColor]"></div>
             <span className="text-sm">正在生成...</span>
-            <Button
-              variant="secondary"
-              size="sm"
-              className="h-6 px-2 text-xs"
-              onClick={handleStop}
-            >
-              <Square className="w-3 h-3 mr-1" />
-              停止生成
-            </Button>
+            <div className="fixed bottom-4 left-1/2 -translate-x-1/2 flex justify-center z-50 pointer-events-none">
+              <Button
+                variant="secondary"
+                className="h-8 px-4 text-base shadow-lg pointer-events-auto"
+                onClick={handleStop}
+              >
+                <OctagonX className="w-4 h-4" />
+                停止生成
+                <ShortcutRenderer
+                  shortcut={shortcuts.stopSolutionStream.key}
+                  className="inline-block border bg-transparent py-0 px-1"
+                />
+              </Button>
+            </div>
           </div>
         )}
       </div>

src/renderer/src/settings/CustomShortcuts.tsx

@@ -70,6 +70,7 @@ export function CustomShortcuts() {
         <div className="space-y-2">
           <h3 className="text-sm text-gray-500">截图与AI</h3>
           <Shortcut label="截图" shortcut="takeScreenshot" />
+          <Shortcut label="停止生成" shortcut="stopSolutionStream" />
         </div>
 
         {/* Navigation */}
@@ -87,11 +88,6 @@ export function CustomShortcuts() {
           <Shortcut label="向左移动窗口" shortcut="moveMainWindowLeft" />
           <Shortcut label="向右移动窗口" shortcut="moveMainWindowRight" />
         </div>
-        {/* AI 控制 */}
-        <div className="space-y-2">
-          <h3 className="text-sm text-gray-500">AI 控制</h3>
-          <Shortcut label="停止生成" shortcut="stopSolutionStream" />
-        </div>
       </div>
     </ShortcutsContext.Provider>
   )