Improve the build mode buttons

Author: jahooma

cli/src/components/build-mode-buttons.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import type { ChatTheme } from '../types/theme-system'
-
+import { BORDER_CHARS } from '../utils/ui-constants'
+import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
 export const BuildModeButtons = ({
   theme,
   onBuildFast,
@@ -10,20 +11,28 @@ export const BuildModeButtons = ({
   onBuildFast: () => void
   onBuildMax: () => void
 }) => {
-  const [hoveredButton, setHoveredButton] = useState<'fast' | 'max' | null>(null)
+  const [hoveredButton, setHoveredButton] = useState<'fast' | 'max' | null>(
+    null,
+  )
+  const { terminalWidth } = useTerminalDimensions()
+  const isNarrow = terminalWidth < 55
   return (
     <box
       style={{
-        flexDirection: 'column',
-        gap: 0,
-        paddingTop: 1,
-        paddingBottom: 1,
+        flexDirection: 'row',
+        gap: 1,
+        paddingTop: 0,
+        paddingBottom: 0,
         paddingLeft: 1,
+        alignItems: 'center',
+        justifyContent: 'space-between',
       }}
     >
-      <text style={{ wrapMode: 'none', marginBottom: 1 }}>
-        <span fg={theme.secondary}>Ready to build? Choose your mode:</span>
-      </text>
+      {isNarrow ? null : (
+        <text style={{ wrapMode: 'none' }}>
+          <span fg={theme.secondary}>Ready to build?</span>
+        </text>
+      )}
       <box
         style={{
           flexDirection: 'row',
@@ -37,14 +46,16 @@ export const BuildModeButtons = ({
             paddingLeft: 2,
             paddingRight: 2,
             borderStyle: 'single',
-            borderColor: hoveredButton === 'fast' ? '#ffffff' : theme.secondary,
+            borderColor:
+              hoveredButton === 'fast' ? theme.foreground : theme.secondary,
+            customBorderChars: BORDER_CHARS,
           }}
           onMouseDown={onBuildFast}
           onMouseOver={() => setHoveredButton('fast')}
           onMouseOut={() => setHoveredButton(null)}
         >
           <text wrapMode="none">
-            <span fg="#ffffff">Build FAST</span>
+            <span fg={theme.foreground}>Build FAST</span>
           </text>
         </box>
         <box
@@ -54,14 +65,16 @@ export const BuildModeButtons = ({
             paddingLeft: 2,
             paddingRight: 2,
             borderStyle: 'single',
-            borderColor: hoveredButton === 'max' ? '#ffffff' : theme.secondary,
+            borderColor:
+              hoveredButton === 'max' ? theme.foreground : theme.secondary,
+            customBorderChars: BORDER_CHARS,
           }}
           onMouseDown={onBuildMax}
           onMouseOver={() => setHoveredButton('max')}
           onMouseOut={() => setHoveredButton(null)}
         >
           <text wrapMode="none">
-            <span fg="#ffffff">Build MAX</span>
+            <span fg={theme.foreground}>Build MAX</span>
           </text>
         </box>
       </box>