snxraven/peardock
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix titlebar pear-ctrl overlap; route status into job tray
CI / test (push) Successful in 9m53s
Details

Browse Source 
Reserve space for window controls and split the titlebar clusters so brand and chrome no longer collide. Replace the full-screen status spinner with lightweight activity jobs in the event tray.
This commit is contained in:
snxraven
2026-07-10 21:48:11 -04:00
parent 25ba70cce8
commit 2cccb8a04e
7 changed files with 348 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+49 -57
View File
@@ -27,53 +27,57 @@
<button type="button" class="btn btn-sm btn-outline-light" id="offline-banner-dismiss">Dismiss</button>
</div>
<div id="titlebar">
<pear-ctrl></pear-ctrl>
<div class="app-brand">
<div class="app-brand-mark">🍐</div>
<div class="app-brand-text">peardock <span>P2P Docker</span></div>
<div class="titlebar-left">
<pear-ctrl></pear-ctrl>
<div class="app-brand">
<div class="app-brand-mark">🍐</div>
<div class="app-brand-text">peardock <span>P2P Docker</span></div>
</div>
</div>
<div id="active-peer-chip" title="Active peer">
<span class="dot" id="active-peer-dot"></span>
<span id="active-peer-label">No peer</span>
</div>
<div id="connection-health-badge" class="connection-health-badge" title="Connection health">
<span class="health-dot health-dot--unknown" id="health-dot"></span>
<span id="health-latency" class="health-latency">—</span>
<span id="health-docker" class="health-docker">Docker —</span>
<span id="health-role" class="health-role"></span>
</div>
<!-- Notification Tray - Global across all views -->
<div id="notification-tray" class="notification-tray">
<button id="notification-tray-toggle" class="notification-tray-toggle" aria-label="Notifications">
<i class="fas fa-bell"></i>
<span id="notification-badge" class="notification-badge">0</span>
</button>
<div id="notification-panel" class="notification-panel hidden">
<div class="notification-panel-header">
<h5 class="notification-panel-title">Notifications</h5>
<div class="notification-panel-actions">
<button id="mark-all-read-btn" class="notification-action-btn" title="Mark all as read">
<i class="fas fa-check-double"></i>
</button>
<button id="clear-all-btn" class="notification-action-btn" title="Clear all">
<i class="fas fa-trash"></i>
</button>
<button id="close-panel-btn" class="notification-action-btn" title="Close">
<i class="fas fa-times"></i>
</button>
<div class="titlebar-right">
<div id="active-peer-chip" title="Active peer">
<span class="dot" id="active-peer-dot"></span>
<span id="active-peer-label">No peer</span>
</div>
<div id="connection-health-badge" class="connection-health-badge" title="Connection health">
<span class="health-dot health-dot--unknown" id="health-dot"></span>
<span id="health-latency" class="health-latency">—</span>
<span id="health-docker" class="health-docker">Docker —</span>
<span id="health-role" class="health-role"></span>
</div>
<!-- Notification Tray - Global across all views -->
<div id="notification-tray" class="notification-tray">
<button id="notification-tray-toggle" class="notification-tray-toggle" aria-label="Notifications">
<i class="fas fa-bell"></i>
<span id="notification-badge" class="notification-badge">0</span>
</button>
<div id="notification-panel" class="notification-panel hidden">
<div class="notification-panel-header">
<h5 class="notification-panel-title">Notifications</h5>
<div class="notification-panel-actions">
<button id="mark-all-read-btn" class="notification-action-btn" title="Mark all as read">
<i class="fas fa-check-double"></i>
</button>
<button id="clear-all-btn" class="notification-action-btn" title="Clear all">
<i class="fas fa-trash"></i>
</button>
<button id="close-panel-btn" class="notification-action-btn" title="Close">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</div>
<div class="notification-filters">
<button class="notification-filter-btn active" data-filter="all">All</button>
<button class="notification-filter-btn" data-filter="success">Success</button>
<button class="notification-filter-btn" data-filter="danger">Error</button>
<button class="notification-filter-btn" data-filter="warning">Warning</button>
<button class="notification-filter-btn" data-filter="info">Info</button>
</div>
<div id="notification-list" class="notification-list">
<div class="notification-empty">
<i class="fas fa-bell-slash"></i>
<p>No notifications</p>
<div class="notification-filters">
<button class="notification-filter-btn active" data-filter="all">All</button>
<button class="notification-filter-btn" data-filter="success">Success</button>
<button class="notification-filter-btn" data-filter="danger">Error</button>
<button class="notification-filter-btn" data-filter="warning">Warning</button>
<button class="notification-filter-btn" data-filter="info">Info</button>
</div>
<div id="notification-list" class="notification-list">
<div class="notification-empty">
<i class="fas fa-bell-slash"></i>
<p>No notifications</p>
</div>
</div>
</div>
</div>
@@ -2114,18 +2118,6 @@ services:
</div>
</div>
<!-- Status Indicator Overlay -->
<div id="status-indicator"
class="position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-dark bg-opacity-75"
style="display: none; z-index: 1050;">
<div class="text-center">
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-3 text-light">Processing...</p>
</div>
</div>
<!-- Docker Terminal Modal -->
<div class="modal fade" id="dockerTerminalModal" tabindex="-1" aria-labelledby="docker-terminal-title" aria-hidden="true">
<div class="modal-dialog modal-lg">