Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-28 08:40:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: UI/UX overhaul — CSS cleanup, accessibility, error handling, inline style extraction

Browse Source 
Phase 0 — CSS-only fixes:
- Fix --font-mono to use real monospace stack (JetBrains Mono, Fira Code, etc.)
- Replace hardcoded hex colors with CSS variables across 16+ files
- Merge global-nav.css (507 lines) into layout.css, delete original
- Reduce !important in responsive.css from 71 to 8 via .app-shell specificity
- Standardize breakpoints to 480/768/1024/1280px

Phase 1 — Loading states & SSE connection feedback:
- Add centralized SSEManager (sse-manager.js) with exponential backoff
- Add SSE status indicator dot in nav bar
- Add withLoadingButton() + .btn-loading CSS spinner
- Add mode section crossfade transitions

Phase 2 — Accessibility:
- Add aria-labels to icon-only buttons across mode partials
- Add for/id associations to 42 form labels in 5 mode partials
- Add aria-live on toast stack, enableListKeyNav() utility

Phase 3 — Destructive action guards & list overflow:
- Add confirmAction() styled modal, replace all 25 native confirm() calls
- Add toast cap at 5 simultaneous toasts
- Add list overflow indicator CSS

Phase 4 — Inline style extraction:
- Refactor switchMode() in app.js and index.html to use classList.toggle()
- Add CSS toggle rules for all switchMode-controlled elements
- Remove inline style="display:none" from 7+ HTML elements
- Add utility classes (.hidden, .d-flex, .d-grid, etc.)

Phase 5 — Mobile UX polish:
- pre/code overflow handling already in place
- Touch target sizing via --touch-min variable

Phase 6 — Error handling consistency:
- Add reportActionableError() to user-facing catch blocks in 5 mode JS files
- 28 error toast additions alongside existing console.error calls

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-03-12 13:04:36 +00:00
parent 05412fbfc3
commit e687862043
56 changed files with 2660 additions and 2238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
static/js/modes/bluetooth.js
View File

@@ -75,12 +75,12 @@ const BluetoothMode = (function() {
/**
* Check for agent mode conflicts before starting scan.
*/
function checkAgentConflicts() {
async function checkAgentConflicts() {
if (typeof currentAgent === 'undefined' || currentAgent === 'local') {
return true;
}
if (typeof checkAgentModeConflict === 'function') {
return checkAgentModeConflict('bluetooth');
return await checkAgentModeConflict('bluetooth');
}
return true;
}
@@ -883,7 +883,7 @@ const BluetoothMode = (function() {
async function startScan() {
// Check for agent mode conflicts
if (!checkAgentConflicts()) {
if (!await checkAgentConflicts()) {
return;
}
@@ -940,7 +940,9 @@ const BluetoothMode = (function() {
} catch (err) {
console.error('Failed to start scan:', err);
showErrorMessage('Failed to start scan: ' + err.message);
reportActionableError('Start Bluetooth Scan', err, {
onRetry: () => startScan()
});
}
}
@@ -968,6 +970,7 @@ const BluetoothMode = (function() {
}
} catch (err) {
console.error('Failed to stop scan:', err);
reportActionableError('Stop Bluetooth Scan', err);
} finally {
if (timeoutId) {
clearTimeout(timeoutId);
@@ -1537,6 +1540,9 @@ const BluetoothMode = (function() {
}
} catch (err) {
console.error('Failed to set baseline:', err);
reportActionableError('Set Baseline', err, {
onRetry: () => setBaseline()
});
}
}
@@ -1552,6 +1558,9 @@ const BluetoothMode = (function() {
}
} catch (err) {
console.error('Failed to clear baseline:', err);
reportActionableError('Clear Baseline', err, {
onRetry: () => clearBaseline()
});
}
}

31
static/js/modes/meshtastic.js
View File

@@ -266,8 +266,10 @@ const Meshtastic = (function() {
}
} catch (err) {
console.error('Failed to start Meshtastic:', err);
reportActionableError('Start Meshtastic', err, {
onRetry: () => start()
});
updateStatusIndicator('disconnected', 'Connection error');
showStatusMessage('Connection error: ' + err.message, 'error');
}
}
@@ -283,6 +285,7 @@ const Meshtastic = (function() {
showNotification('Meshtastic', 'Disconnected');
} catch (err) {
console.error('Failed to stop Meshtastic:', err);
reportActionableError('Stop Meshtastic', err);
}
}
@@ -589,7 +592,9 @@ const Meshtastic = (function() {
}
} catch (err) {
console.error('Failed to configure channel:', err);
showStatusMessage('Error configuring channel: ' + err.message, 'error');
reportActionableError('Configure Channel', err, {
onRetry: () => saveChannel()
});
}
}
@@ -1246,11 +1251,11 @@ const Meshtastic = (function() {
}
} catch (err) {
console.error('Failed to send message:', err);
reportActionableError('Send Message', err, {
onRetry: () => sendMessage()
});
optimisticMsg._failed = true;
updatePendingMessage(optimisticMsg, true);
if (typeof showNotification === 'function') {
showNotification('Meshtastic', 'Send error: ' + err.message);
}
} finally {
if (sendBtn) {
sendBtn.disabled = false;
@@ -1382,6 +1387,9 @@ const Meshtastic = (function() {
}
} catch (err) {
console.error('Traceroute error:', err);
reportActionableError('Send Traceroute', err, {
onRetry: () => sendTraceroute(destination)
});
showTracerouteModal(destination, { error: err.message }, false);
}
}
@@ -1564,7 +1572,9 @@ const Meshtastic = (function() {
}
} catch (err) {
console.error('Position request error:', err);
showStatusMessage('Error requesting position: ' + err.message, 'error');
reportActionableError('Request Position', err, {
onRetry: () => requestPosition(nodeId)
});
}
}
@@ -2085,7 +2095,9 @@ const Meshtastic = (function() {
}
} catch (err) {
console.error('Range test error:', err);
showStatusMessage('Error starting range test: ' + err.message, 'error');
reportActionableError('Start Range Test', err, {
onRetry: () => startRangeTest()
});
}
}
@@ -2099,6 +2111,7 @@ const Meshtastic = (function() {
showNotification('Meshtastic', 'Range test stopped');
} catch (err) {
console.error('Error stopping range test:', err);
reportActionableError('Stop Range Test', err);
}
}
@@ -2243,7 +2256,9 @@ const Meshtastic = (function() {
}
} catch (err) {
console.error('S&F request error:', err);
showStatusMessage('Error: ' + err.message, 'error');
reportActionableError('Request Store & Forward History', err, {
onRetry: () => requestStoreForwardHistory()
});
}
}

20
static/js/modes/ook.js
View File

@@ -498,15 +498,27 @@ var OokMode = (function () {
input.value = '';
}
function removePreset(freq) {
if (!confirm('Remove preset ' + freq + ' MHz?')) return;
async function removePreset(freq) {
const confirmed = await AppFeedback.confirmAction({
title: 'Remove Preset',
message: 'Remove preset ' + freq + ' MHz?',
confirmLabel: 'Remove',
confirmClass: 'btn-danger'
});
if (!confirmed) return;
var presets = loadPresets().filter(function (p) { return p !== freq; });
savePresets(presets);
renderPresets();
}
function resetPresets() {
if (!confirm('Reset to default presets?')) return;
async function resetPresets() {
const confirmed = await AppFeedback.confirmAction({
title: 'Reset Presets',
message: 'Reset to default presets?',
confirmLabel: 'Reset',
confirmClass: 'btn-danger'
});
if (!confirmed) return;
savePresets(DEFAULT_FREQ_PRESETS.slice());
renderPresets();
}

16
static/js/modes/sstv-general.js
View File

@@ -802,7 +802,13 @@ const SSTVGeneral = (function() {
* Delete a single image
*/
async function deleteImage(filename) {
if (!confirm('Delete this image?')) return;
const confirmed = await AppFeedback.confirmAction({
title: 'Delete Image',
message: 'Delete this image? This cannot be undone.',
confirmLabel: 'Delete',
confirmClass: 'btn-danger'
});
if (!confirmed) return;
try {
const response = await fetch(`/sstv-general/images/${encodeURIComponent(filename)}`, { method: 'DELETE' });
const data = await response.json();
@@ -822,7 +828,13 @@ const SSTVGeneral = (function() {
* Delete all images
*/
async function deleteAllImages() {
if (!confirm('Delete all decoded images?')) return;
const confirmed = await AppFeedback.confirmAction({
title: 'Delete All Images',
message: 'Delete all decoded images? This cannot be undone.',
confirmLabel: 'Delete All',
confirmClass: 'btn-danger'
});
if (!confirmed) return;
try {
const response = await fetch('/sstv-general/images', { method: 'DELETE' });
const data = await response.json();

23
static/js/modes/sstv.js
View File

@@ -606,8 +606,10 @@ const SSTV = (function() {
}
} catch (err) {
console.error('Failed to start SSTV:', err);
reportActionableError('Start SSTV', err, {
onRetry: () => start()
});
updateStatusUI('idle', 'Error');
showStatusMessage('Connection error: ' + err.message, 'error');
}
}
@@ -626,6 +628,7 @@ const SSTV = (function() {
showNotification('SSTV', 'Decoder stopped');
} catch (err) {
console.error('Failed to stop SSTV:', err);
reportActionableError('Stop SSTV', err);
}
}
@@ -1297,7 +1300,13 @@ const SSTV = (function() {
* Delete a single image
*/
async function deleteImage(filename) {
if (!confirm('Delete this image?')) return;
const confirmed = await AppFeedback.confirmAction({
title: 'Delete Image',
message: 'Delete this image? This cannot be undone.',
confirmLabel: 'Delete',
confirmClass: 'btn-danger'
});
if (!confirmed) return;
try {
const response = await fetch(`/sstv/images/${encodeURIComponent(filename)}`, { method: 'DELETE' });
const data = await response.json();
@@ -1310,6 +1319,7 @@ const SSTV = (function() {
}
} catch (err) {
console.error('Failed to delete image:', err);
reportActionableError('Delete Image', err);
}
}
@@ -1317,7 +1327,13 @@ const SSTV = (function() {
* Delete all images
*/
async function deleteAllImages() {
if (!confirm('Delete all decoded images?')) return;
const confirmed = await AppFeedback.confirmAction({
title: 'Delete All Images',
message: 'Delete all decoded images? This cannot be undone.',
confirmLabel: 'Delete All',
confirmClass: 'btn-danger'
});
if (!confirmed) return;
try {
const response = await fetch('/sstv/images', { method: 'DELETE' });
const data = await response.json();
@@ -1329,6 +1345,7 @@ const SSTV = (function() {
}
} catch (err) {
console.error('Failed to delete images:', err);
reportActionableError('Delete All Images', err);
}
}

1802
static/js/modes/subghz.js
View File

File diff suppressed because it is too large Load Diff

34
static/js/modes/weather-satellite.js
View File

@@ -291,8 +291,10 @@ const WeatherSat = (function() {
}
} catch (err) {
console.error('Failed to start weather sat:', err);
reportActionableError('Start Weather Satellite', err, {
onRetry: () => start()
});
updateStatusUI('idle', 'Error');
showNotification('Weather Sat', 'Connection error');
}
}
@@ -322,6 +324,7 @@ const WeatherSat = (function() {
showNotification('Weather Sat', 'Capture stopped');
} catch (err) {
console.error('Failed to stop weather sat:', err);
reportActionableError('Stop Weather Satellite', err);
}
}
@@ -375,8 +378,10 @@ const WeatherSat = (function() {
}
} catch (err) {
console.error('Failed to start test decode:', err);
reportActionableError('Start Test Decode', err, {
onRetry: () => testDecode()
});
updateStatusUI('idle', 'Error');
showNotification('Weather Sat', 'Connection error');
}
}
@@ -1439,9 +1444,11 @@ const WeatherSat = (function() {
showNotification('Weather Sat', `Auto-scheduler enabled (${data.scheduled_count || 0} passes)`);
} catch (err) {
console.error('Failed to enable scheduler:', err);
reportActionableError('Enable Scheduler', err, {
onRetry: () => enableScheduler()
});
schedulerEnabled = false;
updateSchedulerUI({ enabled: false, scheduled_count: 0 });
showNotification('Weather Sat', 'Failed to enable auto-scheduler');
}
}
@@ -1461,6 +1468,7 @@ const WeatherSat = (function() {
showNotification('Weather Sat', 'Auto-scheduler disabled');
} catch (err) {
console.error('Failed to disable scheduler:', err);
reportActionableError('Disable Scheduler', err);
}
}
@@ -1649,7 +1657,13 @@ const WeatherSat = (function() {
*/
async function deleteImage(filename) {
if (!filename) return;
if (!confirm(`Delete this image?`)) return;
const confirmed = await AppFeedback.confirmAction({
title: 'Delete Image',
message: 'Delete this image? This cannot be undone.',
confirmLabel: 'Delete',
confirmClass: 'btn-danger'
});
if (!confirmed) return;
try {
const response = await fetch(`/weather-sat/images/${encodeURIComponent(filename)}`, { method: 'DELETE' });
@@ -1668,7 +1682,7 @@ const WeatherSat = (function() {
}
} catch (err) {
console.error('Failed to delete image:', err);
showNotification('Weather Sat', 'Failed to delete image');
reportActionableError('Delete Image', err);
}
}
@@ -1677,7 +1691,13 @@ const WeatherSat = (function() {
*/
async function deleteAllImages() {
if (images.length === 0) return;
if (!confirm(`Delete all ${images.length} decoded images?`)) return;
const confirmed = await AppFeedback.confirmAction({
title: 'Delete All Images',
message: `Delete all ${images.length} decoded images? This cannot be undone.`,
confirmLabel: 'Delete All',
confirmClass: 'btn-danger'
});
if (!confirmed) return;
try {
const response = await fetch('/weather-sat/images', { method: 'DELETE' });
@@ -1693,7 +1713,7 @@ const WeatherSat = (function() {
}
} catch (err) {
console.error('Failed to delete all images:', err);
showNotification('Weather Sat', 'Failed to delete images');
reportActionableError('Delete All Images', err);
}
}

29
static/js/modes/wefax.js
View File

@@ -242,6 +242,7 @@ var WeFax = (function () {
.catch(function (err) {
setStatus('Stopped');
console.error('WeFax stop error:', err);
reportActionableError('Stop WeFax', err);
});
}
@@ -626,9 +627,15 @@ var WeFax = (function () {
gallery.innerHTML = html;
}
function deleteImage(filename) {
async function deleteImage(filename) {
if (!filename) return;
if (!confirm('Delete this image?')) return;
const confirmed = await AppFeedback.confirmAction({
title: 'Delete Image',
message: 'Delete this image? This cannot be undone.',
confirmLabel: 'Delete',
confirmClass: 'btn-danger'
});
if (!confirmed) return;
fetch('/wefax/images/' + encodeURIComponent(filename), { method: 'DELETE' })
.then(function (r) { return r.json(); })
.then(function (data) {
@@ -641,12 +648,18 @@ var WeFax = (function () {
})
.catch(function (err) {
console.error('WeFax delete error:', err);
setStatus('Delete failed: ' + err.message);
reportActionableError('Delete Image', err);
});
}
function deleteAllImages() {
if (!confirm('Delete all WeFax images?')) return;
async function deleteAllImages() {
const confirmed = await AppFeedback.confirmAction({
title: 'Delete All Images',
message: 'Delete all WeFax images? This cannot be undone.',
confirmLabel: 'Delete All',
confirmClass: 'btn-danger'
});
if (!confirmed) return;
fetch('/wefax/images', { method: 'DELETE' })
.then(function (r) { return r.json(); })
.then(function (data) {
@@ -654,7 +667,10 @@ var WeFax = (function () {
loadImages();
}
})
.catch(function (err) { console.error('WeFax delete all error:', err); });
.catch(function (err) {
console.error('WeFax delete all error:', err);
reportActionableError('Delete All Images', err);
});
}
var currentModalUrl = null;
@@ -1107,6 +1123,7 @@ var WeFax = (function () {
})
.catch(function (err) {
console.error('WeFax scheduler disable error:', err);
reportActionableError('Disable Scheduler', err);
});
}

8
static/js/modes/wifi.js
View File

@@ -59,12 +59,12 @@ const WiFiMode = (function() {
/**
* Check for agent mode conflicts before starting WiFi scan.
*/
function checkAgentConflicts() {
async function checkAgentConflicts() {
if (typeof currentAgent === 'undefined' || currentAgent === 'local') {
return true;
}
if (typeof checkAgentModeConflict === 'function') {
return checkAgentModeConflict('wifi');
return await checkAgentModeConflict('wifi');
}
return true;
}
@@ -411,7 +411,7 @@ const WiFiMode = (function() {
if (isScanning) return;
// Check for agent mode conflicts
if (!checkAgentConflicts()) {
if (!await checkAgentConflicts()) {
return;
}
@@ -503,7 +503,7 @@ const WiFiMode = (function() {
if (isScanning) return;
// Check for agent mode conflicts
if (!checkAgentConflicts()) {
if (!await checkAgentConflicts()) {
return;
}