feat: add mobile case picker to toolbar

- Add Case button to mobile toolbar (between Run Claude and Run Shell)
- Add bottom sheet modal for case selection on mobile
- Show current case name on button (truncated)
- Allow creating new cases from mobile picker
- Sync selection with desktop dropdown

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-31 22:17:47 +01:00
co-authored by Claude Opus 4.5
parent d7608a4885
commit cd4905287e
5 changed files with 339 additions and 12 deletions
+27
View File
@@ -286,6 +286,11 @@
</select>
<button class="btn-case-add" onclick="app.showCreateCaseModal()" title="Create new case">+</button>
</div>
<!-- Mobile-only case button -->
<button class="btn-toolbar btn-case-mobile" onclick="app.showMobileCasePicker()" title="Select case">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
<span id="mobileCaseName">Case</span>
</button>
</div>
<!-- Directory (hidden) -->
@@ -1092,6 +1097,28 @@
</div>
</div>
<!-- Mobile Case Picker (Bottom Sheet) -->
<div class="modal mobile-case-picker" id="mobileCasePickerModal">
<div class="modal-backdrop" onclick="app.closeMobileCasePicker()"></div>
<div class="mobile-case-picker-sheet">
<div class="mobile-case-picker-header">
<h3>Select Case</h3>
<button class="modal-close" onclick="app.closeMobileCasePicker()" aria-label="Close case picker">&times;</button>
</div>
<div class="mobile-case-picker-body">
<div class="mobile-case-list" id="mobileCaseList">
<!-- Cases populated by JS -->
</div>
</div>
<div class="mobile-case-picker-footer">
<button class="btn-toolbar btn-case-create-mobile" onclick="app.showCreateCaseFromMobile()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Create New Case
</button>
</div>
</div>
</div>
<!-- Ralph Loop Wizard Modal -->
<div class="modal" id="ralphWizardModal">
<div class="modal-backdrop"></div>