feat(ui): add help modal and copy terminal button

- Add floating help button (?) with keyboard shortcuts modal
- Add Ctrl+? shortcut to open help modal
- Add copy terminal button to copy output to clipboard
- Style kbd elements for keyboard shortcut display
- Update Escape key to close all modals

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-18 22:18:17 +01:00
co-authored by Claude Opus 4.5
parent c60f416d4b
commit c1ec28eace
3 changed files with 179 additions and 0 deletions
+68
View File
@@ -240,6 +240,7 @@
<span class="font-size-display" id="fontSizeDisplay">14px</span>
<button class="btn btn-xs" onclick="app.increaseFontSize()" title="Increase font size (Ctrl+=)">A+</button>
</div>
<button class="btn btn-sm" onclick="app.copyTerminal()" title="Copy terminal output">Copy</button>
<button class="btn btn-sm" onclick="app.clearTerminal()">Clear</button>
</div>
</div>
@@ -277,6 +278,73 @@
</div>
</div>
</div>
<!-- Help Button -->
<button class="help-btn" onclick="app.showHelp()" title="Keyboard shortcuts (Ctrl+?)">?</button>
<!-- Help Modal -->
<div class="modal" id="helpModal">
<div class="modal-backdrop" onclick="app.closeHelp()"></div>
<div class="modal-content">
<div class="modal-header">
<h3>Keyboard Shortcuts</h3>
<button class="modal-close" onclick="app.closeHelp()">&times;</button>
</div>
<div class="modal-body">
<div class="shortcuts-list">
<div class="shortcut-group">
<h4>General</h4>
<div class="shortcut-row">
<kbd>Ctrl</kbd>+<kbd>Enter</kbd>
<span>Quick Start</span>
</div>
<div class="shortcut-row">
<kbd>Ctrl</kbd>+<kbd>K</kbd>
<span>Kill all sessions</span>
</div>
<div class="shortcut-row">
<kbd>Ctrl</kbd>+<kbd>?</kbd>
<span>Show this help</span>
</div>
<div class="shortcut-row">
<kbd>Escape</kbd>
<span>Close modals</span>
</div>
</div>
<div class="shortcut-group">
<h4>Terminal</h4>
<div class="shortcut-row">
<kbd>Ctrl</kbd>+<kbd>L</kbd>
<span>Clear terminal</span>
</div>
<div class="shortcut-row">
<kbd>Ctrl</kbd>+<kbd>+</kbd>
<span>Increase font size</span>
</div>
<div class="shortcut-row">
<kbd>Ctrl</kbd>+<kbd>-</kbd>
<span>Decrease font size</span>
</div>
</div>
<div class="shortcut-group">
<h4>Navigation</h4>
<div class="shortcut-row">
<kbd>Ctrl</kbd>+<kbd>1</kbd>
<span>Run tab</span>
</div>
<div class="shortcut-row">
<kbd>Ctrl</kbd>+<kbd>2</kbd>
<span>Cases tab</span>
</div>
<div class="shortcut-row">
<kbd>Ctrl</kbd>+<kbd>3</kbd>
<span>Settings tab</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>