nucleo000/agent-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Split torch trigger into action + dropdown chevron

Browse Source 
Click the main area to request/release torch directly (1 click).
Click the chevron to open the settings dropdown.
This commit is contained in:
josedario87
2026-02-14 23:35:20 -06:00
parent 2a80b7751b
commit cf618b1948
1 changed files with 47 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/components/TorchButton.vue
View File

@@ -100,20 +100,19 @@ onUnmounted(() => {
<template> <template>
<div class="torch-dropdown-container"> <div class="torch-dropdown-container">
<!-- Trigger Button --> <!-- Split Trigger: main area = request/release, chevron = dropdown -->
<button <div class="trigger-split" :class="[statusClass, { requesting: torchStore.isRequesting }]">
class="dropdown-trigger" <button class="trigger-main" @click.stop="handleAction" :title="hasTorch ? 'Release torch' : 'Request torch'">
:class="[statusClass, { requesting: torchStore.isRequesting }]" <span class="status-dot" :class="statusBadgeClass"></span>
@click.stop="toggleDropdown" <span class="trigger-name">{{ displayName }}</span>
:title="displayName" <span v-if="torchStore.isRequesting" class="requesting-indicator"></span>
> </button>
<span class="status-dot" :class="statusBadgeClass"></span> <button class="trigger-chevron" @click.stop="toggleDropdown" title="Settings">
<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">
<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"/>
<polyline points="6 9 12 15 18 9"/> </svg>
</svg> </button>
<span v-if="torchStore.isRequesting" class="requesting-indicator"></span> </div>
</button>
<!-- Dropdown --> <!-- Dropdown -->
<div v-if="isOpen" class="dropdown-menu" @click.stop> <div v-if="isOpen" class="dropdown-menu" @click.stop>
@@ -209,25 +208,53 @@ onUnmounted(() => {
overflow: visible; overflow: visible;
} }
.dropdown-trigger { .trigger-split {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background: var(--bg-hover); background: var(--bg-hover);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
position: relative; 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)); background: var(--bg-tertiary, rgba(255,255,255,0.1));
color: var(--text-primary);
} }
.trigger-name { .trigger-name {