diff --git a/src/app/MainHeader.js b/src/app/MainHeader.js index 33c2a33..24b2d3d 100644 --- a/src/app/MainHeader.js +++ b/src/app/MainHeader.js @@ -2,7 +2,9 @@ import { html, css, LitElement } from '../assets/lit-core-2.7.4.min.js'; export class MainHeader extends LitElement { static properties = { - isSessionActive: { type: Boolean, state: true }, + // isSessionActive: { type: Boolean, state: true }, + isTogglingSession: { type: Boolean, state: true }, + actionText: { type: String, state: true }, shortcuts: { type: Object, state: true }, }; @@ -95,6 +97,11 @@ export class MainHeader extends LitElement { position: relative; } + .listen-button:disabled { + cursor: default; + opacity: 0.8; + } + .listen-button.active::before { background: rgba(215, 0, 0, 0.5); } @@ -103,6 +110,24 @@ export class MainHeader extends LitElement { background: rgba(255, 20, 20, 0.6); } + .listen-button.done { + background-color: rgba(255, 255, 255, 0.6); + transition: background-color 0.15s ease; + } + + .listen-button.done .action-text-content { + color: black; + } + + .listen-button.done .listen-icon svg rect, + .listen-button.done .listen-icon svg path { + fill: black; + } + + .listen-button.done:hover { + background-color: #f0f0f0; + } + .listen-button:hover::before { background: rgba(255, 255, 255, 0.18); } @@ -132,6 +157,38 @@ export class MainHeader extends LitElement { pointer-events: none; } + .listen-button.done::after { + display: none; + } + + .loading-dots { + display: flex; + align-items: center; + gap: 5px; + } + + .loading-dots span { + width: 6px; + height: 6px; + background-color: white; + border-radius: 50%; + animation: pulse 1.4s infinite ease-in-out both; + } + .loading-dots span:nth-of-type(1) { + animation-delay: -0.32s; + } + .loading-dots span:nth-of-type(2) { + animation-delay: -0.16s; + } + @keyframes pulse { + 0%, 80%, 100% { + opacity: 0.2; + } + 40% { + opacity: 1.0; + } + } + .header-actions { -webkit-app-region: no-drag; height: 26px; @@ -242,7 +299,9 @@ export class MainHeader extends LitElement { this.isAnimating = false; this.hasSlidIn = false; this.settingsHideTimer = null; - this.isSessionActive = false; + // this.isSessionActive = false; + this.isTogglingSession = false; + this.actionText = 'Listen'; this.animationEndTimer = null; this.handleAnimationEnd = this.handleAnimationEnd.bind(this); } @@ -305,10 +364,19 @@ export class MainHeader extends LitElement { if (window.require) { const { ipcRenderer } = window.require('electron'); - this._sessionStateListener = (event, { isActive }) => { - this.isSessionActive = isActive; + + this._sessionStateTextListener = (event, text) => { + this.actionText = text; + this.isTogglingSession = false; }; - ipcRenderer.on('session-state-changed', this._sessionStateListener); + ipcRenderer.on('session-state-text', this._sessionStateTextListener); + + + // this._sessionStateListener = (event, { isActive }) => { + // this.isSessionActive = isActive; + // this.isTogglingSession = false; + // }; + // ipcRenderer.on('session-state-changed', this._sessionStateListener); this._shortcutListener = (event, keybinds) => { console.log('[MainHeader] Received updated shortcuts:', keybinds); this.shortcuts = keybinds; @@ -328,9 +396,12 @@ export class MainHeader extends LitElement { if (window.require) { const { ipcRenderer } = window.require('electron'); - if (this._sessionStateListener) { - ipcRenderer.removeListener('session-state-changed', this._sessionStateListener); + if (this._sessionStateTextListener) { + ipcRenderer.removeListener('session-state-text', this._sessionStateTextListener); } + // if (this._sessionStateListener) { + // ipcRenderer.removeListener('session-state-changed', this._sessionStateListener); + // } if (this._shortcutListener) { ipcRenderer.removeListener('shortcuts-updated', this._shortcutListener); } @@ -341,6 +412,7 @@ export class MainHeader extends LitElement { if (window.require) { window.require('electron').ipcRenderer.invoke(channel, ...args); } + // return Promise.resolve(); } showSettingsWindow(element) { @@ -369,6 +441,23 @@ export class MainHeader extends LitElement { } } + async _handleListenClick() { + if (this.isTogglingSession) { + return; + } + + this.isTogglingSession = true; + + try { + const channel = 'toggle-feature'; + const args = ['listen']; + await this.invoke(channel, ...args); + } catch (error) { + console.error('IPC invoke for session toggle failed:', error); + this.isTogglingSession = false; + } + } + renderShortcut(accelerator) { if (!accelerator) return html``; @@ -394,31 +483,45 @@ export class MainHeader extends LitElement { } render() { + const buttonClasses = { + active: this.actionText === 'Stop', + done: this.actionText === 'Done', + }; + const showStopIcon = this.actionText === 'Stop' || this.actionText === 'Done'; + return html`