Merge pull request #3 from gkamradt/codex/center-terminal-number-selector-and-add-increment-buttons

Add +/-10 terminal controls

Author: gkamradt

src/components/ControlsPanel/ControlsPanel.tsx

@@ -25,12 +25,26 @@ export function ControlsPanel({
     }
   };
 
+  const handleIncrementByTen = () => {
+    if (terminalCount < maxTerminals) {
+      const newCount = Math.min(terminalCount + 10, maxTerminals);
+      onTerminalCountChange(newCount);
+    }
+  };
+
   const handleDecrement = () => {
     if (terminalCount > minTerminals) {
       onTerminalCountChange(terminalCount - 1);
     }
   };
 
+  const handleDecrementByTen = () => {
+    if (terminalCount > minTerminals) {
+      const newCount = Math.max(terminalCount - 10, minTerminals);
+      onTerminalCountChange(newCount);
+    }
+  };
+
   const toggleVisibility = () => {
     setIsVisible(!isVisible);
   };
@@ -67,7 +81,17 @@ export function ControlsPanel({
           </div>
 
           {/* Terminal Count Control */}
-          <div className="flex items-center space-x-3">
+          <div className="flex items-center justify-center space-x-3">
+            <button
+              onClick={handleDecrementByTen}
+              disabled={terminalCount <= minTerminals}
+              className="w-8 h-8 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded font-bold transition-colors border-0 p-0"
+              style={{ backgroundColor: terminalCount <= minTerminals ? '#4b5563' : '#dc2626' }}
+              aria-label="Remove ten terminals"
+            >
+              -10
+            </button>
+
             <button
               onClick={handleDecrement}
               disabled={terminalCount <= minTerminals}
@@ -77,11 +101,11 @@ export function ControlsPanel({
             >
               -
             </button>
-            
+
             <span className="text-white font-mono text-sm min-w-[3rem] text-center">
               {terminalCount} terminal{terminalCount !== 1 ? 's' : ''}
             </span>
-            
+
             <button
               onClick={handleIncrement}
               disabled={terminalCount >= maxTerminals}
@@ -91,6 +115,16 @@ export function ControlsPanel({
             >
               +
             </button>
+
+            <button
+              onClick={handleIncrementByTen}
+              disabled={terminalCount >= maxTerminals}
+              className="w-8 h-8 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded font-bold transition-colors border-0 p-0"
+              style={{ backgroundColor: terminalCount >= maxTerminals ? '#4b5563' : '#059669' }}
+              aria-label="Add ten terminals"
+            >
+              +10
+            </button>
           </div>
 
           {/* Arrange Button */}

src/components/ControlsPanel/__tests__/ControlsPanel.test.tsx

@@ -29,6 +29,8 @@ describe('ControlsPanel', () => {
     expect(screen.getByText('1 terminal')).toBeInTheDocument();
     expect(screen.getByText('+')).toBeInTheDocument();
     expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('+10')).toBeInTheDocument();
+    expect(screen.getByText('-10')).toBeInTheDocument();
     expect(screen.getByText('Arrange')).toBeInTheDocument();
     expect(screen.getByText(/Theme:/)).toBeInTheDocument();
     expect(screen.getByText(/Made with ❤️ by/)).toBeInTheDocument();
@@ -57,6 +59,28 @@ describe('ControlsPanel', () => {
     expect(mockOnTerminalCountChange).toHaveBeenCalledWith(2);
   });
 
+  it('should call onTerminalCountChange when +10 button is clicked', () => {
+    const mockOnTerminalCountChange = vi.fn();
+    const mockOnArrangeTerminals = vi.fn();
+
+    render(
+      <ThemeProvider>
+        <AppProvider>
+          <ControlsPanel
+            terminalCount={1}
+            onTerminalCountChange={mockOnTerminalCountChange}
+            onArrangeTerminals={mockOnArrangeTerminals}
+          />
+        </AppProvider>
+      </ThemeProvider>
+    );
+
+    const incrementTenButton = screen.getByText('+10');
+    fireEvent.click(incrementTenButton);
+
+    expect(mockOnTerminalCountChange).toHaveBeenCalledWith(11);
+  });
+
   it('should call onArrangeTerminals when Arrange button is clicked', () => {
     const mockOnTerminalCountChange = vi.fn();
     const mockOnArrangeTerminals = vi.fn();
@@ -81,8 +105,30 @@ describe('ControlsPanel', () => {
 
   it('should disable decrement button when at minimum (1)', () => {
     renderControlsPanel();
-    
+
     const decrementButton = screen.getByText('-');
     expect(decrementButton).toBeDisabled();
   });
-}); 
+
+  it('should call onTerminalCountChange when -10 button is clicked', () => {
+    const mockOnTerminalCountChange = vi.fn();
+    const mockOnArrangeTerminals = vi.fn();
+
+    render(
+      <ThemeProvider>
+        <AppProvider>
+          <ControlsPanel
+            terminalCount={20}
+            onTerminalCountChange={mockOnTerminalCountChange}
+            onArrangeTerminals={mockOnArrangeTerminals}
+          />
+        </AppProvider>
+      </ThemeProvider>
+    );
+
+    const decrementTenButton = screen.getByText('-10');
+    fireEvent.click(decrementTenButton);
+
+    expect(mockOnTerminalCountChange).toHaveBeenCalledWith(10);
+  });
+});