diff --git a/frontend/dashboard.css b/frontend/dashboard.css index 1a6c239..4951270 100644 --- a/frontend/dashboard.css +++ b/frontend/dashboard.css @@ -26,6 +26,7 @@ header { position: sticky; top: 0; z-index: 20; padding: 12px 16px; display:flex .app-menu { margin-left:auto; } .app-menu > summary { display:none; } .app-menu-panel { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } +#open-insights { display:none; } button { background: linear-gradient(180deg,#1f3a5f,#15324d); border:1px solid #2a496e; color:#e5e7eb; padding:8px 12px; border-radius:10px; cursor:pointer; } .notification-undo { position:fixed; z-index:110; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); transform:translateX(-50%); box-sizing:border-box; width:min(520px,calc(100vw - 24px)); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #60a5fa; border-radius:12px; background:#10233d; box-shadow:0 12px 36px rgba(0,0,0,.5); overflow-wrap:anywhere; } .notification-undo[hidden] { display:none; } @@ -91,6 +92,8 @@ button:hover { filter: brightness(1.15); } .panel[open] > summary { margin-bottom: 8px; } aside, section { position: relative; z-index: 1; } main { position: relative; z-index: 1; display: grid; grid-template-columns: 300px 1fr 340px; gap: 14px; padding: 14px; } +.insights-shell { display:contents; } +.insights-header { display:none; } @media (max-width: 1100px) { main { grid-template-columns: 1fr; } } .sidebar { display:flex; flex-direction:column; gap: 12px; } .stack { display:flex; flex-direction:column; gap:10px; } @@ -932,6 +935,12 @@ textarea { resize: vertical; min-height: 120px; } .app-menu:not([open]) > .app-menu-panel { display:none; } .app-menu-panel { position:absolute; top:calc(100% + 6px); right:0; width:min(280px,calc(100vw - 20px)); display:grid; gap:8px; padding:10px; border:1px solid #2a496e; border-radius:12px; background:#0b1526; box-shadow:0 18px 45px rgba(0,0,0,.5); } .app-menu-panel button { min-height:44px; width:100%; } + #open-insights { display:block; } + .insights-shell { display:none; } + .insights-shell[data-mobile-open="true"] { position:fixed; inset:0; z-index:90; display:grid; align-content:start; gap:12px; overflow:auto; overflow-x:hidden; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:#050c15; } + .insights-header { position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px; border:1px solid #2a496e; border-radius:12px; background:#0b1526; } + .insights-header h2, .insights-header p { margin:0 0 4px; } + .insights-header button { min-height:44px; flex:none; } .device-setup-panel { width:100%; padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); } .device-setup-step { grid-template-columns:1fr; } .device-setup-action { width:100%; } diff --git a/frontend/dashboard.js b/frontend/dashboard.js index 4c740ba..e8070cb 100644 --- a/frontend/dashboard.js +++ b/frontend/dashboard.js @@ -204,6 +204,20 @@ }, }); mobileTaskDock.start(); + const mobileInsights = createMobileInsights({ + root: qs('#insights-sheet'), + launcher: qs('#open-insights'), + closeButton: qs('#close-insights'), + dock: qs('#mobile-task-dock'), + hud: qs('[data-mobile-today-hud]'), + backgrounds: [qs('header'), qs('#my-work')], + menu: qs('.app-menu'), + history: window.history, + location: window.location, + eventTarget: window, + mediaQuery: window.matchMedia('(max-width: 600px)'), + }); + mobileInsights.start(); qs('#empty-work-find').addEventListener('click', () => qs('#find-work').click()); qs('#empty-work-create').addEventListener('click', () => qs('#new-issue').click()); let liveMode = true; diff --git a/frontend/index.html b/frontend/index.html index 4cfbc57..193e952 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -16,6 +16,7 @@
Menu
+ @@ -273,6 +274,11 @@
+
+
+

Insights

Context, activity, live signals, and workspace tools.

+ +
+