From cf618b194831ca6fc68a891810ed85c84ea17541 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 14 Feb 2026 23:35:20 -0600
Subject: [PATCH] feat: Split torch trigger into action + dropdown chevron

Click the main area to request/release torch directly (1 click).
Click the chevron to open the settings dropdown.
---
 frontend/src/components/TorchButton.vue | 67 +++++++++++++++++--------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/TorchButton.vue b/frontend/src/components/TorchButton.vue
index 5d41d56..d91afb0 100644
--- a/frontend/src/components/TorchButton.vue
+++ b/frontend/src/components/TorchButton.vue
@@ -100,20 +100,19 @@ onUnmounted(() => {
 
 <template>
   <div class="torch-dropdown-container">
-    <!-- Trigger Button -->
-    <button
-      class="dropdown-trigger"
-      :class="[statusClass, { requesting: torchStore.isRequesting }]"
-      @click.stop="toggleDropdown"
-      :title="displayName"
-    >
-      <span class="status-dot" :class="statusBadgeClass"></span>
-      <span class="trigger-name">{{ displayName }}</span>
-      <svg class="chevron" :class="{ open: isOpen }" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <polyline points="6 9 12 15 18 9"/>
-      </svg>
-      <span v-if="torchStore.isRequesting" class="requesting-indicator"></span>
-    </button>
+    <!-- Split Trigger: main area = request/release, chevron = dropdown -->
+    <div class="trigger-split" :class="[statusClass, { requesting: torchStore.isRequesting }]">
+      <button class="trigger-main" @click.stop="handleAction" :title="hasTorch ? 'Release torch' : 'Request torch'">
+        <span class="status-dot" :class="statusBadgeClass"></span>
+        <span class="trigger-name">{{ displayName }}</span>
+        <span v-if="torchStore.isRequesting" class="requesting-indicator"></span>
+      </button>
+      <button class="trigger-chevron" @click.stop="toggleDropdown" title="Settings">
+        <svg class="chevron" :class="{ open: isOpen }" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="6 9 12 15 18 9"/>
+        </svg>
+      </button>
+    </div>
 
     <!-- Dropdown -->
     <div v-if="isOpen" class="dropdown-menu" @click.stop>
@@ -209,25 +208,53 @@ onUnmounted(() => {
   overflow: visible;
 }
 
-.dropdown-trigger {
+.trigger-split {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.75rem;
   background: var(--bg-hover);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   color: var(--text-secondary);
   font-size: 0.8rem;
   font-weight: 500;
-  cursor: pointer;
   transition: all 0.15s ease;
   position: relative;
 }
 
-.dropdown-trigger:hover {
+.trigger-main {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition: background 0.1s;
+  border-radius: 7px 0 0 7px;
+}
+
+.trigger-main:hover {
+  background: var(--bg-tertiary, rgba(255,255,255,0.1));
+}
+
+.trigger-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0.5rem;
+  background: none;
+  border: none;
+  border-left: 1px solid var(--border-color);
+  color: inherit;
+  cursor: pointer;
+  transition: background 0.1s;
+  border-radius: 0 7px 7px 0;
+}
+
+.trigger-chevron:hover {
   background: var(--bg-tertiary, rgba(255,255,255,0.1));
-  color: var(--text-primary);
 }
 
 .trigger-name {