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>
<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 {