From 917a72839903626a83e902263fe3c540e0322add Mon Sep 17 00:00:00 2001 From: "n.siegfried" Date: Mon, 3 Aug 2026 21:47:40 -0700 Subject: [PATCH] Rebuild the work-package side panel in the style of MS Planner MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The auto-hiding drawer was the wrong model — a list you navigate by shouldn't appear and disappear under the pointer, and its vertical text tab read as a stray artifact. Replaced with a persistent side panel following the Planner reference: - Collapse toggle at the top (the panel glyph, arrow flips), remembered across visits. Collapsed leaves a 56px icon rail where the coloured package badges are still clickable, rather than hiding the list entirely. - One primary action: "+ New work package" with a split caret for Duplicate, Split by discipline and Export all. - Icon nav with counts: My packages (owned by you), All packages, Needs attention (on hold or not release-ready), Dashboard. These filter the list below. - Packages as rows with a colour-coded initial badge, number, subject and readiness state, still grouped by status, with a left accent bar on the current package. The badge colour is hashed from the WP number, so a package keeps its swatch instead of shuffling when another is added or deleted. - The panel sits IN the layout: the form and the full-width chrome shift beside it rather than being overlaid. Also, the reason it appeared as loose unstyled widgets in the middle of the form: the panel's markup and its stylesheet are cached independently, so a browser can run new markup against old CSS. Its essential layout (fixed position, width, the row/badge flex, the collapsed rules) is now injected by wp-creation-app.js as a floor, inserted first in so the stylesheet still wins on everything it defines. Same lesson as the iframe: a component whose CSS-missing state is "broken" rather than "plain" must carry its own critical layout. Verified with 25 driven checks in headless Chrome: persistence, the four nav links, badge colours and text, view filtering, collapse/expand, the split menu, row selection and highlighting — and, with wp-creation-styles.css removed from the page entirely, the panel is still a fixed 288px side panel with the form shifted beside it. Co-Authored-By: Claude Opus 5 --- html/wp-creation-app.js | 283 ++++++++++++++++++++++++------------ html/wp-creation-index.html | 68 +++++++-- html/wp-creation-styles.css | 237 ++++++++++++++++++------------ 3 files changed, 388 insertions(+), 200 deletions(-) diff --git a/html/wp-creation-app.js b/html/wp-creation-app.js index 1c813bf..1047a0d 100644 --- a/html/wp-creation-app.js +++ b/html/wp-creation-app.js @@ -1378,123 +1378,216 @@ function viewPackage(i){ if(savedPackages[i]) renderPackage(savedPackages[i]); } // Every saved package on this project, grouped by status, filterable. Clicking a // row opens it in the form (same path as the Saved table's "edit"). const WPNAV_ORDER=['Issue','In Progress','Issued','QC','Scheduled','Draft','Closed']; -// ── drawer behaviour ───────────────────────────────────────────────────────── -// Hover the edge handle to open, move the pointer away to close. Pinning keeps it -// open and shifts the form across; the pin is remembered. Touch devices have no -// hover, so tapping the handle opens it and it stays until you pick something, -// tap outside, or press Escape. -let _navCloseTimer = null; +// The panel's ESSENTIAL layout ships with this script rather than living only in +// wp-creation-styles.css. The two files are cached independently, so a browser can +// run new markup against an old stylesheet — and without these rules the panel is +// not merely unstyled, it's broken: its title, filter and buttons drop into the +// middle of the form as loose widgets (which is exactly what happened once). +// Injecting the floor here means the panel is always a positioned side panel; the +// stylesheet only refines its appearance. +const WP_NAV_CRITICAL_CSS = ` + body{--nav-w:288px;} + body.wp-nav-collapsed{--nav-w:56px;} + .wp-nav{position:fixed;top:var(--rail-top,48px);left:0;bottom:0;width:var(--nav-w); + z-index:120;display:flex;flex-direction:column;overflow:hidden;background:#fbfbfc; + border-right:1px solid #e0e0e0;} + .wp-nav-list{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;} + .wp-nav-item,.wp-nav-link{display:flex;align-items:center;gap:11px;width:100%; + background:none;border:0;text-align:left;cursor:pointer;font:inherit;} + .wp-nav-badge{flex:0 0 28px;width:28px;height:28px;border-radius:5px;color:#fff; + display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;} + .wp-nav-body{min-width:0;flex:1 1 auto;} + .wp-nav-num,.wp-nav-subj{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} + .main{padding-left:calc(var(--nav-w) + 28px);} + body.wp-nav-collapsed .wp-nav-body,body.wp-nav-collapsed .wp-nav-state, + body.wp-nav-collapsed .wp-nav-link-label,body.wp-nav-collapsed .wp-nav-sect, + body.wp-nav-collapsed .wp-nav-filter,body.wp-nav-collapsed .wp-nav-group, + body.wp-nav-collapsed .wp-nav-cta-label,body.wp-nav-collapsed .wp-nav-cta-more{display:none;} +`; -function openWpNav(){ - clearTimeout(_navCloseTimer); - document.body.classList.add('wp-nav-open'); - const h = document.getElementById('wp-nav-handle'); - if(h) h.setAttribute('aria-expanded', 'true'); -} -function closeWpNav(force){ - clearTimeout(_navCloseTimer); - if(navPinned() && !force) return; // pinned stays put unless explicitly closed - if(force) setNavPinned(false); - document.body.classList.remove('wp-nav-open'); - const h = document.getElementById('wp-nav-handle'); - if(h) h.setAttribute('aria-expanded', 'false'); +function injectWpNavCriticalCss(){ + if(document.getElementById('wp-nav-critical')) return; + const st = document.createElement('style'); + st.id = 'wp-nav-critical'; + st.textContent = WP_NAV_CRITICAL_CSS; + // First in so the real stylesheet (loaded later) still wins on every + // property it defines — this is a floor, not an override. + const head = document.head || document.documentElement; + head.insertBefore(st, head.firstChild); } + +// ── panel behaviour ──────────────────────────────────────────── +// The panel is always present. The toggle collapses it to a 56px icon rail (badges +// only) and back; that choice is remembered. No hover-to-open: a list you navigate +// by shouldn't appear and disappear under the pointer. +let wpNavView = 'all'; // all | mine | open + function toggleWpNav(){ - if(document.body.classList.contains('wp-nav-open') || navPinned()) closeWpNav(true); - else openWpNav(); -} -function navPinned(){ return document.body.classList.contains('wp-nav-pinned'); } -function setNavPinned(on){ - document.body.classList.toggle('wp-nav-pinned', !!on); - const btn = document.getElementById('wp-nav-pin'); + const collapsed = document.body.classList.toggle('wp-nav-collapsed'); + try{ localStorage.setItem('wp_nav_collapsed', collapsed ? '1' : ''); }catch(e){} + const btn = document.getElementById('wp-nav-toggle'); if(btn){ - btn.classList.toggle('is-on', !!on); - btn.title = on ? 'Unpin (let it hide again)' : 'Keep this list open'; + btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true'); + btn.title = collapsed ? 'Expand the panel' : 'Collapse the panel'; } - try{ localStorage.setItem('wp_nav_pinned', on ? '1' : ''); }catch(e){} - positionSectionNav(); // pinned changes nothing about --rail-top, but keep them in step + closeWpNavMore(); + track(collapsed ? 'wp_nav_collapsed' : 'wp_nav_expanded'); } -function toggleWpNavPin(){ - const on = !navPinned(); - setNavPinned(on); - if(on) openWpNav(); else closeWpNav(true); - track(on ? 'wp_nav_pinned' : 'wp_nav_unpinned'); + +// Kept so older callers (and the suite shell) don't break. +function openWpNav(){ document.body.classList.remove('wp-nav-collapsed'); } +function closeWpNav(){ document.body.classList.add('wp-nav-collapsed'); } + +function toggleWpNavMore(ev){ + if(ev) ev.stopPropagation(); + const m = document.getElementById('wp-nav-more'); + const b = document.getElementById('wp-nav-more-btn'); + if(!m) return; + const open = m.hidden; + m.hidden = !open; + if(b) b.setAttribute('aria-expanded', open ? 'true' : 'false'); +} +function closeWpNavMore(){ + const m = document.getElementById('wp-nav-more'); + const b = document.getElementById('wp-nav-more-btn'); + if(m) m.hidden = true; + if(b) b.setAttribute('aria-expanded', 'false'); +} +document.addEventListener('click', e => { + if(!e.target.closest || !e.target.closest('.wp-nav-primary')) closeWpNavMore(); +}); +document.addEventListener('keydown', e => { if(e.key === 'Escape') closeWpNavMore(); }); + +function wpNavAction(what){ + closeWpNavMore(); + if(what === 'duplicate') duplicateWP(); + else if(what === 'split') splitByDiscipline(); + else if(what === 'export') exportPackages(); +} + +// The three views are filters over the same list, like Planner's My tasks / My plans. +function setWpNavView(view){ + wpNavView = view; + document.querySelectorAll('.wp-nav-link[data-view]').forEach(b => { + b.classList.toggle('is-current', b.getAttribute('data-view') === view); + }); + renderWpNav(); + track('wp_nav_view', {view}); +} + +// A stable colour per package so the same one is always the same swatch — the cue +// Planner gets from its plan avatars. Hashed from the WP number, not its index, so +// it doesn't shuffle when a package is added or deleted. +const WP_BADGE_COLORS = ['#0f62fe','#8a3ffc','#007d79','#d02670','#ba4e00', + '#1192e8','#198038','#a56eff','#9f1853','#005d5d']; +function wpBadgeColor(p){ + const key = (p.number || p.id || '') + ''; + let h = 0; + for(let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) % 100000; + return WP_BADGE_COLORS[h % WP_BADGE_COLORS.length]; +} +// Two characters for the badge: the package's own digits if it has them (WP-25 -> 25), +// otherwise the initials of its type, otherwise WP. +function wpBadgeText(p){ + const digits = String(p.number || '').match(/(\d{1,2})(?!.*\d)/); + if(digits) return digits[1]; + const t = String(p.type || '').trim(); + if(t){ + const words = t.split(/\s+/).filter(Boolean); + return (words.length > 1 ? words[0][0] + words[1][0] : t.slice(0, 2)); + } + return 'WP'; } function initWpNavDrawer(){ const nav = document.getElementById('wp-nav'); - const handle = document.getElementById('wp-nav-handle'); - if(!nav || !handle || nav.dataset.bound) return; + if(!nav || nav.dataset.bound) return; nav.dataset.bound = '1'; - - // Hover in / out. A short close delay stops the drawer snapping shut while the - // pointer crosses the gap between handle and panel. - const armClose = () => { - clearTimeout(_navCloseTimer); - _navCloseTimer = setTimeout(() => closeWpNav(false), 350); - }; - handle.addEventListener('mouseenter', openWpNav); - handle.addEventListener('mouseleave', armClose); - nav.addEventListener('mouseenter', () => clearTimeout(_navCloseTimer)); - nav.addEventListener('mouseleave', armClose); - // Opening from the keyboard should work too. - handle.addEventListener('focus', openWpNav); - - document.addEventListener('keydown', e => { if(e.key === 'Escape') closeWpNav(false); }); - // Tap/click outside closes it (the touch path, where there's no mouseleave). - document.addEventListener('click', e => { - if(navPinned()) return; - if(!document.body.classList.contains('wp-nav-open')) return; - if(nav.contains(e.target) || handle.contains(e.target)) return; - closeWpNav(false); - }); - - try{ if(localStorage.getItem('wp_nav_pinned')) setNavPinned(true); }catch(e){} + injectWpNavCriticalCss(); + try{ if(localStorage.getItem('wp_nav_collapsed')) document.body.classList.add('wp-nav-collapsed'); }catch(e){} + const btn = document.getElementById('wp-nav-toggle'); + if(btn){ + const collapsed = document.body.classList.contains('wp-nav-collapsed'); + btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true'); + btn.title = collapsed ? 'Expand the panel' : 'Collapse the panel'; + } } + function renderWpNav(){ - const list=document.getElementById('wp-nav-list'); if(!list) return; - const cnt=document.getElementById('wp-nav-count'); - if(cnt) cnt.textContent = savedPackages.length ? '('+savedPackages.length+')' : ''; - const badge=document.getElementById('wp-nav-handle-count'); - if(badge) badge.textContent = savedPackages.length; - const q=((document.getElementById('wp-nav-search')||{}).value||'').trim().toLowerCase(); + const list = document.getElementById('wp-nav-list'); + if(!list) return; + const q = ((document.getElementById('wp-nav-search') || {}).value || '').trim().toLowerCase(); + const me = myUserId(); + // Keep the original index — edit/view act on savedPackages by position. - const rows=savedPackages.map((p,i)=>({p:p,i:i})).filter(r=>{ - if(!q) return true; - const p=r.p; - return [p.number,p.subject,p.type,p.location,p.system].some(v=>String(v||'').toLowerCase().includes(q)); - }); + const all = savedPackages.map((p, i) => ({p, i})); + const mine = all.filter(r => r.p.assigneeId && r.p.assigneeId === me); + const needs = all.filter(r => r.p.status === 'Issue' || wpReleaseBlocked(r.p)); + + const setN = (id, n) => { const e = document.getElementById(id); if(e) e.textContent = n || ''; }; + setN('wp-nav-n-all', all.length); + setN('wp-nav-n-mine', mine.length); + setN('wp-nav-n-open', needs.length); + + let rows = wpNavView === 'mine' ? mine : (wpNavView === 'open' ? needs : all); + const label = document.getElementById('wp-nav-sect-label'); + if(label) label.textContent = wpNavView === 'mine' ? 'My packages' + : (wpNavView === 'open' ? 'Needs attention' : 'Work packages'); + + if(q){ + rows = rows.filter(r => { + const p = r.p; + return [p.number, p.subject, p.type, p.location, p.system] + .some(v => String(v || '').toLowerCase().includes(q)); + }); + } + + const cnt = document.getElementById('wp-nav-count'); + if(cnt) cnt.textContent = rows.length ? '(' + rows.length + ')' : ''; + if(!rows.length){ - list.innerHTML='
'+(savedPackages.length?'No packages match “'+esc(q)+'”.':'No work packages saved yet. Fill the form and Save Draft.')+'
'; + list.innerHTML = '
' + ( + savedPackages.length + ? (q ? 'Nothing matches “' + esc(q) + '”.' : 'No packages in this view.') + : 'No work packages yet. Fill the form and Save Draft.' + ) + '
'; return; } - const groups={}; - rows.forEach(r=>{ const s=r.p.status||'Draft'; (groups[s]=groups[s]||[]).push(r); }); - const keys=Object.keys(groups).sort((a,b)=>{ - const ia=WPNAV_ORDER.indexOf(a), ib=WPNAV_ORDER.indexOf(b); - return (ia<0?99:ia)-(ib<0?99:ib); + + const groups = {}; + rows.forEach(r => { const st = r.p.status || 'Draft'; (groups[st] = groups[st] || []).push(r); }); + const keys = Object.keys(groups).sort((a, b) => { + const ia = WPNAV_ORDER.indexOf(a), ib = WPNAV_ORDER.indexOf(b); + return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib); }); - list.innerHTML=keys.map(k=>{ - const label = k==='Issue' ? 'Issue (Hold)' : k; - return '
'+esc(label)+' · '+groups[k].length+'
'+groups[k].map(r=>{ - const p=r.p, open=(p.constraints||[]).filter(c=>c.status==='open').length; - // Waiting on an unclosed predecessor is 'not ready' too, not just open constraints. - const waiting=(p.predecessors||[]).map(id=>wpById(id)).filter(x=>x&&x.status!=='Closed').length; - const dot = p.status==='Issue' ? 'hold' : ((open===0 && !waiting) ? 'ok' : 'open'); - const state = p.status==='Issue' ? 'on hold' - : (open ? open+' open' : (waiting ? 'waits on '+waiting : 'ready')); - const active = (editingId && p.id===editingId) ? ' active' : ''; - return ''; - }).join(''); + + list.innerHTML = keys.map(k => { + const heading = k === 'Issue' ? 'Issue (Hold)' : k; + return '
' + esc(heading) + ' · ' + groups[k].length + '
' + + groups[k].map(r => { + const p = r.p; + const open = (p.constraints || []).filter(c => c.status === 'open').length; + const waiting = wpWaitingOn(p).length; + const dot = p.status === 'Issue' ? 'hold' : ((open === 0 && !waiting) ? 'ok' : 'open'); + const state = p.status === 'Issue' ? 'on hold' + : (open ? open + ' open' : (waiting ? 'waits on ' + waiting : 'ready')); + const active = (editingId && p.id === editingId) ? ' active' : ''; + const title = (p.number || '') + ' — ' + (p.subject || '') + ' · ' + (p.status || '') + ' · ' + state; + return ''; + }).join(''); }).join(''); } + function wpNavOpen(i){ const p=savedPackages[i]; if(!p) return; - closeWpNav(false); // get out of the way once you've chosen (unless pinned) editingId=p.id; loadPackageIntoForm(p); // ends in showForm(), so this also leaves the dashboard / package view renderWpNav(); diff --git a/html/wp-creation-index.html b/html/wp-creation-index.html index c4483e7..483acba 100644 --- a/html/wp-creation-index.html +++ b/html/wp-creation-index.html @@ -47,24 +47,62 @@
- - +
diff --git a/html/wp-creation-styles.css b/html/wp-creation-styles.css index b12a631..a976737 100644 --- a/html/wp-creation-styles.css +++ b/html/wp-creation-styles.css @@ -105,7 +105,8 @@ width away from the form — which matters most when this page is embedded in the suite's tab and every pixel is shared with the app chrome. */ .wp-layout { display: block; width: 100%; margin: 0; } - .main { min-width: 0; max-width: none; margin: 0; padding: 22px 28px 72px var(--gutter,34px); + .main { min-width: 0; max-width: none; margin: 0; + padding: 22px 28px 72px calc(var(--nav-w,288px) + 28px); transition: padding-left .18s ease; } .section { display: none; } @@ -438,7 +439,7 @@ border-radius:var(--radius); padding:7px 10px; font-size:11px; } /* ── CREATION TOOL ───────────────────────────────────────────────── */ - .ctx-bar { max-width:none; margin:0; padding:12px 28px 12px var(--gutter,34px); display:flex; align-items:center; gap:20px; + .ctx-bar { max-width:none; margin:0; padding:12px 28px 12px calc(var(--nav-w,288px) + 28px); display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; } .ctx-empty { color:var(--text-muted); font-size:13px; } .ctx-main .ctx-proj { font-weight:700; color:var(--text); font-size:14px; } @@ -474,7 +475,7 @@ /* ── WORK PACKAGE FORM ───────────────────────────────────────────── */ .sop-hint { color:var(--accent) !important; } - .release-banner { max-width:none; margin:0; padding:0 28px 0 var(--gutter,34px); } + .release-banner { max-width:none; margin:0; padding:0 28px 0 calc(var(--nav-w,288px) + 28px); } .release-banner .rb-inner { margin-top:14px; border-radius:var(--radius); padding:11px 16px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px; } .rb-ready { background:var(--accent-green-dim); color:var(--accent-green); border:1px solid #b6e3c6; } @@ -582,7 +583,7 @@ /* Section nav (jump chips) */ .section-nav-bar{ position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; gap:6px; - padding:8px 12px 8px var(--gutter,34px); background:rgba(255,255,255,.94); backdrop-filter:blur(4px); + padding:8px 12px 8px calc(var(--nav-w,288px) + 28px); background:rgba(255,255,255,.94); backdrop-filter:blur(4px); border-bottom:1px solid var(--border); box-shadow:0 1px 4px rgba(20,30,50,.06); transition:transform .22s ease; } .section-nav-bar:empty{ display:none; } @@ -649,108 +650,164 @@ font-weight:700; letter-spacing:.02em; color:var(--red); background:var(--red-dim); border:1px solid #ffc4c4; white-space:nowrap; vertical-align:middle; } - /* ── WP NAVIGATOR — auto-hiding drawer ───────────────────────────────────── - Was a fixed 262px column, which (a) stole width from the form and (b) vanished - entirely under 1100px — so embedded in the suite tab it was never visible at - all. Now it slides in over the content from a slim edge handle: hover (or tap) - the handle to open, move away to close, or pin it open if you'd rather it stay. - Nothing is taken from the form unless you pin it. */ + /* -- WORK PACKAGE NAVIGATOR ------------------------------------------------ + A persistent side panel in the spirit of MS Planner: collapse toggle, one + primary action, icon nav, then the packages as rows with colour-coded initial + badges and a highlighted current row. It sits IN the layout (the form shifts + across) rather than hovering over the content, and collapses to a 56px icon + rail so you can still see and switch packages with it closed. */ .wp-nav { position: fixed; - top: var(--rail-top, 0px); + top: var(--rail-top, 48px); left: 0; bottom: 0; - width: 300px; - max-width: 86vw; + width: var(--nav-w, 288px); z-index: 120; display: flex; flex-direction: column; - background: var(--surface); - border-right: 1px solid var(--border-strong); - box-shadow: 6px 0 22px rgba(20,30,50,.16); - transform: translateX(-100%); - transition: transform .18s ease; + background: #fbfbfc; + border-right: 1px solid var(--border); + overflow: hidden; + transition: width .16s ease; } - body.wp-nav-open .wp-nav, - body.wp-nav-pinned .wp-nav { transform: none; } - /* Pinned: no shadow (it's part of the layout now) and the form shifts over. */ - body.wp-nav-pinned .wp-nav { box-shadow: none; } + body { --nav-w: 288px; } + body.wp-nav-collapsed { --nav-w: 56px; } - /* The always-visible edge handle. Vertical so it costs ~26px of width. */ - .wp-nav-handle { - position: fixed; - top: calc(var(--rail-top, 0px) + 14px); - left: 0; - z-index: 119; - display: flex; - align-items: center; - gap: 6px; - padding: 12px 5px; - writing-mode: vertical-rl; - background: var(--surface); - color: var(--text-muted); - border: 1px solid var(--border-strong); - border-left: 0; - border-radius: 0 5px 5px 0; - box-shadow: 2px 0 8px rgba(20,30,50,.10); - font: inherit; - font-size: 11px; - font-weight: 700; - letter-spacing: .08em; - text-transform: uppercase; - cursor: pointer; + /* -- collapse toggle -- */ + .wp-nav-top { display: flex; align-items: center; padding: 8px 10px 2px; } + .wp-nav-toggle { + display: inline-flex; align-items: center; justify-content: center; + width: 34px; height: 34px; padding: 0; + background: transparent; border: 1px solid transparent; border-radius: 5px; + color: var(--text-muted); cursor: pointer; } - .wp-nav-handle:hover { color: var(--accent); border-color: var(--accent); } - .wp-nav-handle .wp-nav-handle-count { - writing-mode: horizontal-tb; font-size: 10px; font-weight: 700; letter-spacing: 0; - background: var(--accent-dim); color: var(--accent); border-radius: 8px; padding: 0 5px; + .wp-nav-toggle:hover { background: #eef0f3; color: var(--text); } + /* Arrow flips to point right when the panel is closed. */ + body.wp-nav-collapsed .wp-nav-toggle-arrow { transform: rotate(180deg); transform-origin: 11px 10px; } + + /* -- primary action -- */ + .wp-nav-primary { position: relative; display: flex; gap: 2px; padding: 6px 10px 12px; } + .wp-nav-cta { + flex: 1 1 auto; min-width: 0; + display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px; + height: 40px; padding: 0 14px; + background: var(--accent); color: #fff; + border: 0; border-radius: 6px 0 0 6px; + font: inherit; font-size: 14px; font-weight: 600; + cursor: pointer; white-space: nowrap; } - body.wp-nav-open .wp-nav-handle, - body.wp-nav-pinned .wp-nav-handle { display: none; } + .wp-nav-cta:hover { background: #0353e9; } + .wp-nav-cta-plus { font-size: 17px; font-weight: 400; line-height: 1; } + .wp-nav-cta-more { + flex: 0 0 auto; width: 30px; height: 40px; + background: var(--accent); color: #fff; border: 0; border-left: 1px solid rgba(255,255,255,.28); + border-radius: 0 6px 6px 0; font: inherit; font-size: 12px; cursor: pointer; + } + .wp-nav-cta-more:hover { background: #0353e9; } + .wp-nav-menu { + position: absolute; top: calc(100% - 6px); left: 10px; right: 10px; z-index: 10; + background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; + box-shadow: 0 10px 26px rgba(20,30,50,.18); padding: 5px 0; + } + .wp-nav-menu[hidden] { display: none; } + .wp-nav-menu button { + display: block; width: 100%; text-align: left; background: none; border: 0; + padding: 8px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; + } + .wp-nav-menu button:hover { background: var(--surface2); } - .wp-nav-head { display:flex; align-items:center; gap:8px; padding:12px 12px 8px; } - .wp-nav-title { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } - .wp-nav-count { color:var(--text-dim); font-weight:600; letter-spacing:0; } - .wp-nav-btn { background:transparent; border:1px solid var(--border); border-radius:4px; - color:var(--text-muted); cursor:pointer; font-size:13px; line-height:1; padding:3px 7px; } - .wp-nav-btn:hover { border-color:var(--accent); color:var(--accent); } - .wp-nav-btn.is-on { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); } - .wp-nav-head .wp-nav-btn:first-of-type { margin-left:auto; } - .wp-nav-search { margin:0 12px 10px; padding:6px 9px; font-size:12px; font-family:inherit; - border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); } - .wp-nav-search:focus { outline:none; border-color:var(--accent); } - .wp-nav-list { flex:1 1 auto; overflow-y:auto; padding:0 8px 8px; } - .wp-nav-group { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; - color:var(--text-dim); padding:10px 6px 5px; } - .wp-nav-item { display:block; width:100%; text-align:left; background:transparent; border:0; - border-left:3px solid transparent; border-radius:4px; padding:6px 8px; cursor:pointer; - font-family:inherit; color:var(--text); } - .wp-nav-item:hover { background:var(--surface2); } - .wp-nav-item.active { background:var(--accent-dim); border-left-color:var(--accent); } - .wp-nav-num { display:block; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent); } - .wp-nav-subj { display:block; font-size:12px; color:var(--text-muted); line-height:1.35; - overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } - .wp-nav-meta { display:flex; align-items:center; gap:6px; margin-top:3px; font-size:10px; color:var(--text-dim); } - .wp-nav-dot { width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex:0 0 auto; } - .wp-nav-dot.ok { background:var(--accent-green); } - .wp-nav-dot.open { background:var(--accent-amber); } - .wp-nav-dot.hold { background:var(--red); } - .wp-nav-empty { padding:12px 8px; font-size:12px; color:var(--text-dim); } - .wp-nav-foot { border-top:1px solid var(--border); padding:9px 12px; display:flex; gap:8px; flex-wrap:wrap; } - /* Keep the drawer's footer clear of the fixed save bar. */ - body.has-sticky-save .wp-nav { bottom: 54px; } - /* Pinned: the page chrome shifts with the form so nothing hides behind the panel. */ - body.wp-nav-pinned { --gutter: 328px; } - body.wp-nav-pinned .sticky-save { left: 300px; } + /* -- icon nav -- */ + .wp-nav-links { padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 1px; } + .wp-nav-link { + display: flex; align-items: center; gap: 12px; + width: 100%; padding: 9px 10px; + background: none; border: 0; border-radius: 6px; + font: inherit; font-size: 14px; color: var(--text); + cursor: pointer; text-align: left; white-space: nowrap; + } + .wp-nav-link:hover { background: #eef0f3; } + .wp-nav-link.is-current { background: #e8eaed; font-weight: 600; } + .wp-nav-ico { flex: 0 0 20px; width: 20px; text-align: center; font-size: 15px; color: var(--text-muted); } + .wp-nav-link-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } + .wp-nav-link-n { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; } - /* Narrow screens: never pin (there isn't the width) — overlay only. */ - @media (max-width: 900px) { - body.wp-nav-pinned { --gutter: 34px; } /* no room to pin — overlay only */ - .wp-nav { width: 290px; } + /* -- section header + filter -- */ + .wp-nav-sect { + display: flex; align-items: baseline; gap: 6px; + padding: 6px 18px 4px; border-top: 1px solid var(--border); + } + .wp-nav-sect-label { font-size: 12px; color: var(--text-muted); } + .wp-nav-count { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; } + .wp-nav-filter { padding: 4px 12px 8px; } + .wp-nav-search { + width: 100%; padding: 7px 10px; font: inherit; font-size: 13px; + border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); + } + .wp-nav-search:focus { outline: none; border-color: var(--accent); } + + /* -- package rows -- */ + .wp-nav-list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 8px 14px; } + .wp-nav-group { + font-size: 11px; font-weight: 600; letter-spacing: .02em; + color: var(--text-dim); padding: 12px 10px 4px; + } + .wp-nav-item { + position: relative; + display: flex; align-items: center; gap: 11px; + width: 100%; padding: 7px 10px; margin-bottom: 1px; + background: none; border: 0; border-radius: 6px; + font: inherit; color: var(--text); text-align: left; cursor: pointer; + } + .wp-nav-item:hover { background: #eef0f3; } + .wp-nav-item.active { background: #e8eaed; } + /* Left accent bar on the current package, like Planner's selected plan. */ + .wp-nav-item.active::before { + content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; + width: 3px; border-radius: 2px; background: var(--accent); + } + .wp-nav-badge { + flex: 0 0 28px; width: 28px; height: 28px; border-radius: 5px; + display: inline-flex; align-items: center; justify-content: center; + font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .02em; + color: #fff; text-transform: uppercase; + } + .wp-nav-body { min-width: 0; flex: 1 1 auto; } + .wp-nav-num { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .wp-nav-subj { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.35; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .wp-nav-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; + font-size: 10.5px; color: var(--text-dim); white-space: nowrap; } + .wp-nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex: 0 0 auto; } + .wp-nav-dot.ok { background: var(--accent-green); } + .wp-nav-dot.open { background: var(--accent-amber); } + .wp-nav-dot.hold { background: var(--red); } + .wp-nav-empty { padding: 14px 10px; font-size: 12.5px; color: var(--text-dim); } + + /* -- collapsed rail: badges and icons only -- */ + body.wp-nav-collapsed .wp-nav-cta-label, + body.wp-nav-collapsed .wp-nav-cta-more, + body.wp-nav-collapsed .wp-nav-link-label, + body.wp-nav-collapsed .wp-nav-link-n, + body.wp-nav-collapsed .wp-nav-sect, + body.wp-nav-collapsed .wp-nav-filter, + body.wp-nav-collapsed .wp-nav-body, + body.wp-nav-collapsed .wp-nav-state, + body.wp-nav-collapsed .wp-nav-group { display: none; } + body.wp-nav-collapsed .wp-nav-primary { padding: 6px 10px 10px; } + body.wp-nav-collapsed .wp-nav-cta { justify-content: center; padding: 0; border-radius: 6px; } + body.wp-nav-collapsed .wp-nav-link { justify-content: center; padding: 9px 0; } + body.wp-nav-collapsed .wp-nav-item { justify-content: center; padding: 6px 0; } + body.wp-nav-collapsed .wp-nav-list { padding: 6px 6px 14px; } + + /* Narrow screens: keep the rail collapsed-width so the form still has room. */ + @media (max-width: 860px) { + body { --nav-w: 56px; } + body:not(.wp-nav-collapsed) .wp-nav { width: 288px; box-shadow: 6px 0 22px rgba(20,30,50,.16); } } /* Sticky save bar */ - .sticky-save{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center; + .sticky-save{ position:fixed; left:var(--nav-w,288px); right:0; bottom:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 20px; background:#fff; border-top:1px solid var(--border-strong); box-shadow:0 -2px 10px rgba(20,30,50,.08); } .sticky-save .sticky-status{ font-size:13px; font-weight:600; }