kimi/Timmy-time-dashboard
Archived
1
0
Fork 0
forked from Rockachopa/Timmy-time-dashboard
Code Pull Requests Activity

polish: streamline nav, extract inline styles, improve tablet UX (#168)

Browse Source
This commit is contained in:
Alexander Whitestone
2026-03-11 11:32:56 -04:00
committed by GitHub
parent b028b768c9
commit 708c8a2477
5 changed files with 484 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/dashboard/templates/base.html
View File

@@ -6,7 +6,7 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#080412" />
<title>{% block title %}Mission Control{% endblock %}</title>
<title>{% block title %}Timmy Time — Mission Control{% endblock %}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
@@ -34,35 +34,56 @@
<a href="/" class="mc-title">MISSION CONTROL</a>
<span class="mc-subtitle">MISSION CONTROL</span>
<span class="mc-conn-status" id="conn-status">
<span class="mc-conn-dot red" id="conn-dot"></span>
<span id="conn-label">OFFLINE</span>
<span class="mc-conn-dot amber" id="conn-dot"></span>
<span id="conn-label">CONNECTING</span>
</span>
</div>
<!-- Desktop nav -->
<!-- Desktop nav — grouped dropdowns matching mobile sections -->
<div class="mc-header-right mc-desktop-nav">
<a href="/calm" class="mc-test-link">CALM</a>
<a href="/tasks" class="mc-test-link">TASKS</a>
<a href="/briefing" class="mc-test-link">BRIEFING</a>
<a href="/thinking" class="mc-test-link mc-link-thinking">THINKING</a>
<a href="/swarm/mission-control" class="mc-test-link">MISSION CTRL</a>
<a href="/swarm/live" class="mc-test-link">SWARM</a>
<a href="/bugs" class="mc-test-link mc-link-bugs">BUGS</a>
<a href="/" class="mc-test-link">HOME</a>
<div class="mc-nav-dropdown">
<button class="mc-test-link mc-dropdown-toggle" aria-expanded="false">CORE &#x25BE;</button>
<div class="mc-dropdown-menu">
<a href="/calm" class="mc-test-link">CALM</a>
<a href="/tasks" class="mc-test-link">TASKS</a>
<a href="/briefing" class="mc-test-link">BRIEFING</a>
<a href="/thinking" class="mc-test-link mc-link-thinking">THINKING</a>
<a href="/swarm/mission-control" class="mc-test-link">MISSION CTRL</a>
<a href="/swarm/live" class="mc-test-link">SWARM</a>
<a href="/bugs" class="mc-test-link mc-link-bugs">BUGS</a>
</div>
</div>
<div class="mc-nav-dropdown">
<button class="mc-test-link mc-dropdown-toggle" aria-expanded="false">AGENTS &#x25BE;</button>
<div class="mc-dropdown-menu">
<a href="/hands" class="mc-test-link">HANDS</a>
<a href="/work-orders/queue" class="mc-test-link">WORK ORDERS</a>
<a href="/self-modify/queue" class="mc-test-link">UPGRADES</a>
<a href="/self-coding" class="mc-test-link">SELF-CODING</a>
</div>
</div>
<div class="mc-nav-dropdown">
<button class="mc-test-link mc-dropdown-toggle" aria-expanded="false">INTEL &#x25BE;</button>
<div class="mc-dropdown-menu">
<a href="/spark/ui" class="mc-test-link">SPARK</a>
<a href="/memory" class="mc-test-link">MEMORY</a>
<a href="/marketplace/ui" class="mc-test-link">MARKET</a>
</div>
</div>
<div class="mc-nav-dropdown">
<button class="mc-test-link mc-dropdown-toggle" aria-expanded="false">SYSTEM &#x25BE;</button>
<div class="mc-dropdown-menu">
<a href="/tools" class="mc-test-link">TOOLS</a>
<a href="/swarm/events" class="mc-test-link">EVENTS</a>
<a href="/router/status" class="mc-test-link">ROUTER</a>
<a href="/grok/status" class="mc-test-link mc-link-grok">GROK</a>
</div>
</div>
<div class="mc-nav-dropdown">
<button class="mc-test-link mc-dropdown-toggle" aria-expanded="false">MORE &#x25BE;</button>
<div class="mc-dropdown-menu">
<a href="/spark/ui" class="mc-test-link">SPARK</a>
<a href="/marketplace/ui" class="mc-test-link">MARKET</a>
<a href="/tools" class="mc-test-link">TOOLS</a>
<a href="/swarm/events" class="mc-test-link">EVENTS</a>
<a href="/lightning/ledger" class="mc-test-link">LEDGER</a>
<a href="/memory" class="mc-test-link">MEMORY</a>
<a href="/router/status" class="mc-test-link">ROUTER</a>
<a href="/grok/status" class="mc-test-link mc-link-grok">GROK</a>
<a href="/self-modify/queue" class="mc-test-link">UPGRADES</a>
<a href="/self-coding" class="mc-test-link">SELF-CODING</a>
<a href="/hands" class="mc-test-link">HANDS</a>
<a href="/work-orders/queue" class="mc-test-link">WORK ORDERS</a>
<a href="/creative/ui" class="mc-test-link">CREATIVE</a>
<a href="/voice/button" class="mc-test-link">VOICE</a>
<a href="/mobile" class="mc-test-link" title="Mobile-optimized view">MOBILE</a>
@@ -70,10 +91,10 @@
</div>
</div>
<div class="mc-nav-dropdown" id="notif-dropdown">
<button id="enable-notifications" class="mc-test-link mc-dropdown-toggle" style="background:none;cursor:pointer;position:relative;" title="Notifications" aria-expanded="false">&#x1F514;<span id="notif-badge" class="notif-badge" style="display:none;"></span></button>
<div class="mc-dropdown-menu" style="right:0;left:auto;min-width:280px;max-height:350px;overflow-y:auto;">
<div id="notif-list" style="padding:6px;">
<div style="color:var(--text-dim);font-size:0.8rem;text-align:center;padding:12px;">Loading...</div>
<button id="enable-notifications" class="mc-test-link mc-dropdown-toggle mc-notif-btn" title="Notifications" aria-expanded="false">&#x1F514;<span id="notif-badge" class="notif-badge"></span></button>
<div class="mc-dropdown-menu mc-notif-menu">
<div id="notif-list" class="mc-notif-list">
<div class="mc-notif-empty">Loading...</div>
</div>
</div>
</div>
@@ -123,7 +144,7 @@
<a href="/mobile" class="mc-mobile-link">MOBILE</a>
<a href="/mobile/local" class="mc-mobile-link">LOCAL AI</a>
<div class="mc-mobile-menu-footer">
<button id="enable-notifications-mobile" class="mc-mobile-link" style="background:none;border:none;cursor:pointer;width:100%;text-align:left;font:inherit;color:inherit;padding:inherit;">&#x1F514; NOTIFICATIONS</button>
<button id="enable-notifications-mobile" class="mc-mobile-link mc-mobile-notif-btn">&#x1F514; NOTIFICATIONS</button>
</div>
</nav>
@@ -159,9 +180,10 @@
hamburger.addEventListener('click', toggleMenu);
overlay.addEventListener('click', toggleMenu);
// Highlight current page in mobile menu
document.querySelectorAll('.mc-mobile-link').forEach(function(a) {
if (a.getAttribute('href') === window.location.pathname) {
// Highlight current page in mobile menu and desktop dropdowns
var currentPath = window.location.pathname;
document.querySelectorAll('.mc-mobile-link, .mc-dropdown-menu .mc-test-link').forEach(function(a) {
if (a.getAttribute('href') === currentPath) {
a.classList.add('active');
}
});
@@ -200,17 +222,25 @@
.then(function(data) {
var list = document.getElementById('notif-list');
if (!data.length) {
list.innerHTML = '<div style="color:var(--text-dim);font-size:0.8rem;text-align:center;padding:12px;">No recent notifications</div>';
list.innerHTML = '<div class="mc-notif-empty">No recent notifications</div>';
return;
}
list.innerHTML = data.map(function(n) {
return '<div style="padding:6px 8px;border-bottom:1px solid var(--border);font-size:0.8rem;">'
+ '<div style="color:var(--text-bright);">' + (n.title || n.event_type || 'Event') + '</div>'
+ '<div style="color:var(--text-dim);font-size:0.7rem;">' + (n.timestamp || '') + '</div>'
+ '</div>';
}).join('');
list.innerHTML = '';
data.forEach(function(n) {
var item = document.createElement('div');
item.className = 'mc-notif-item';
var title = document.createElement('div');
title.className = 'mc-notif-title';
title.textContent = n.title || n.event_type || 'Event';
var ts = document.createElement('div');
ts.className = 'mc-notif-ts';
ts.textContent = n.timestamp || '';
item.appendChild(title);
item.appendChild(ts);
list.appendChild(item);
});
var badge = document.getElementById('notif-badge');
if (badge) { badge.style.display = 'none'; }
if (badge) { badge.classList.add('hidden'); }
})
.catch(function() {});
}