jahruz67/wisp-open
1
0
Fork 0
mirror of https://github.com/jahruz67/wisp-open.git synced 2026-08-08 18:14:08 +00:00
Code Issues Packages Projects Releases 2 Wiki Activity

Enhance Linux shortcut section: add collapsible fallback details and update styles

Browse Source
This commit is contained in:
John Doe
2026-07-14 14:51:45 -07:00
parent af55f41eb7
commit 858f62c916
2 changed files with 75 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+32 -12
View File
@@ -55,10 +55,18 @@
<div class="section-group-label">Input</div>
<!-- Linux fallback shortcut command -->
<div class="section" id="linuxPressSection" style="display: none;">
<label>Fallback System Shortcut (Linux)</label>
<div class="form-control">
<!-- Linux ydotool status / Direct typing setup -->
<div class="section" id="linuxYdotoolSection" style="display: none;">
<label>Direct Typing (ydotool)</label>
<div id="linuxYdotoolStatus"></div>
</div>
<!-- Linux fallback shortcut command (collapsible) -->
<div class="section" id="linuxFallbackSection" style="display: none;">
<details class="fallback-details">
<summary class="fallback-summary">Fallback Method</summary>
<p class="hint" style="margin-top: 12px;">Use this if your desktop does not support the GlobalShortcuts portal. The command toggles recording: one press starts, the next stops.</p>
<div class="form-control" style="margin-top: 12px;">
<div class="flex-row">
<div class="input-wrapper">
<input type="text" id="linuxPressCommand" readonly>
@@ -66,10 +74,9 @@
<button onclick="copyLinuxPressCommand()">Copy</button>
</div>
</div>
<p class="hint">Use this if your desktop does not support the GlobalShortcuts portal. The command toggles recording: one press starts, the next stops.</p>
<p class="hint">GNOME: Settings -> Keyboard -> Custom Shortcuts -> Add a shortcut with the copied command.</p>
<p class="hint">KDE: System Settings -> Shortcuts -> Command/URL -> Add a shortcut with the copied command.</p>
<div id="linuxYdotoolStatus" style="display: none; margin-top: 12px; padding: 10px 12px; border-radius: 7px; font-size: 12px; line-height: 1.45;"></div>
<p class="hint" style="margin-top: 10px;">GNOME: Settings → Keyboard → Custom Shortcuts → Add a shortcut with the copied command.</p>
<p class="hint">KDE: System Settings → Shortcuts → Command/URL → Add a shortcut with the copied command.</p>
</details>
</div>
<!-- Microphone -->
@@ -391,10 +398,22 @@
shortcutInput.value = settings.shortcut || 'alt+z';
}
if (settings.linux_press_mode) {
const section = document.getElementById('linuxPressSection');
const ydotoolSection = document.getElementById('linuxYdotoolSection');
const fallbackSection = document.getElementById('linuxFallbackSection');
const cmdInput = document.getElementById('linuxPressCommand');
if (section) section.style.display = 'block';
if (cmdInput) cmdInput.value = settings.linux_press_command || '';
if (ydotoolSection) ydotoolSection.style.display = 'block';
if (fallbackSection) fallbackSection.style.display = 'block';
if (cmdInput) {
// Show just the executable name with quotes and the toggle flag
const fullCommand = settings.linux_press_command || '';
const match = fullCommand.match(/^'[^']*' (--action=toggle)$/);
const togglePart = match ? "'wisp-open' " + match[1] : "'wisp-open' --action=toggle";
cmdInput.value = togglePart;
window._linuxFullCommand = togglePart;
}
renderLinuxYdotoolStatus(settings.linux_ydotool_status);
}
document.getElementById('whisperModel').value = settings.whisper_model || 'whisper-large-v3-turbo';
@@ -474,7 +493,8 @@
const cmdInput = document.getElementById('linuxPressCommand');
if (!cmdInput) return;
const command = cmdInput.value || '';
// Reconstruct the full command from the backend settings
const command = window._linuxFullCommand || cmdInput.value || '';
try {
if (navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(command);
frontend/src/style.css
+38
View File
@@ -342,6 +342,44 @@ button:active {
/* ── Collapsible fallback details ── */
.fallback-details {
color: var(--text);
}
.fallback-summary {
cursor: pointer;
font-weight: 500;
font-size: 13px;
color: var(--text-2);
padding: 2px 0;
user-select: none;
list-style: none;
display: flex;
align-items: center;
gap: 6px;
}
.fallback-summary::-webkit-details-marker {
display: none;
}
.fallback-summary::before {
content: '▶';
font-size: 10px;
color: var(--text-3);
transition: transform 0.15s ease;
display: inline-block;
}
.fallback-details[open] > .fallback-summary::before {
transform: rotate(90deg);
}
.fallback-summary:hover {
color: var(--text);
}
/* ── Section group header divider ── */
.section-group-label {
font-size: 11px;