From 82fccdc6f1ab576c5d22059b1bd89723c6f60ee9 Mon Sep 17 00:00:00 2001
From: andrepimenta <andrepimenta7@gmail.com>
Date: Fri, 20 Jun 2025 19:10:55 +0100
Subject: [PATCH] Plan and Thinking buttons text clickable

---
 src/ui-styles.ts | 21 +++++++++++++++------
 src/ui.ts        | 30 ++++++++++++++----------------
 2 files changed, 29 insertions(+), 22 deletions(-)
diff --git a/src/ui-styles.ts b/src/ui-styles.ts
index a13f874..e93bf6e 100644
--- a/src/ui-styles.ts
+++ b/src/ui-styles.ts
@@ -455,16 +455,25 @@ const styles = `
         transition: opacity 0.2s ease;
     }
 
+    .mode-toggle span {
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+    }
+
+    .mode-toggle span:hover {
+        opacity: 1;
+    }
+
     .mode-toggle:hover {
         opacity: 1;
     }
 
     .mode-switch {
         position: relative;
-        width: 28px;
-        height: 16px;
+        width: 26px;
+        height: 14px;
         background-color: var(--vscode-panel-border);
-        border-radius: 8px;
+        border-radius: 7px;
         cursor: pointer;
         transition: background-color 0.2s ease;
     }
@@ -478,15 +487,15 @@ const styles = `
         position: absolute;
         top: 2px;
         left: 2px;
-        width: 12px;
-        height: 12px;
+        width: 10px;
+        height: 10px;
         background-color: var(--vscode-foreground);
         border-radius: 50%;
         transition: transform 0.2s ease;
     }
 
     .mode-switch.active::after {
-        transform: translateX(12px);
+        transform: translateX(10px);
         background-color: var(--vscode-button-foreground);
     }
 
diff --git a/src/ui.ts b/src/ui.ts
index 5df6717..8427bac 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -38,21 +38,19 @@ const html = `<!DOCTYPE html>
 	<div class="chat-container" id="chatContainer">
 		<div class="messages" id="messages"></div>
 		<div class="input-container" id="inputContainer">
-			<div class="input-modes">
-				<div class="mode-toggle">
-					<span>Plan First</span>
-					<div class="mode-switch" id="planModeSwitch" onclick="togglePlanMode()"></div>
-				</div>
-				<div class="mode-toggle">
-					<span>Thinking Mode</span>
-					<div class="mode-switch" id="thinkingModeSwitch" onclick="toggleThinkingMode()"></div>
-				</div>
-			</div>
 			<div class="textarea-container">
 				<div class="textarea-wrapper">
 					<textarea class="input-field" id="messageInput" placeholder="Type your message to Claude Code..." rows="1"></textarea>
 					<div class="input-controls">
 						<div class="left-controls">
+							<button class="mode-btn" id="planModeBtn" onclick="togglePlanMode()" title="Plan first mode">
+								<span>Plan First</span>
+								<div class="mode-indicator" id="planModeIndicator"></div>
+							</button>
+							<button class="mode-btn" id="thinkingModeBtn" onclick="toggleThinkingMode()" title="Thinking mode">
+								<span>Thinking</span>
+								<div class="mode-indicator" id="thinkingModeIndicator"></div>
+							</button>
 							<button class="model-selector" id="modelSelector" onclick="showModelSelector()" title="Select model">
 								<span id="selectedModel">Opus</span>
 								<svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor">
@@ -603,21 +601,21 @@ const html = `<!DOCTYPE html>
 
 		function togglePlanMode() {
 			planModeEnabled = !planModeEnabled;
-			const switchElement = document.getElementById('planModeSwitch');
+			const buttonElement = document.getElementById('planModeBtn');
 			if (planModeEnabled) {
-				switchElement.classList.add('active');
+				buttonElement.classList.add('active');
 			} else {
-				switchElement.classList.remove('active');
+				buttonElement.classList.remove('active');
 			}
 		}
 
 		function toggleThinkingMode() {
 			thinkingModeEnabled = !thinkingModeEnabled;
-			const switchElement = document.getElementById('thinkingModeSwitch');
+			const buttonElement = document.getElementById('thinkingModeBtn');
 			if (thinkingModeEnabled) {
-				switchElement.classList.add('active');
+				buttonElement.classList.add('active');
 			} else {
-				switchElement.classList.remove('active');
+				buttonElement.classList.remove('active');
 			}
 		}
 
