← Commit history

Manager: canonical Adom app-shell header (dot+brand+subtitle, teal accent) matching adom-symbol/adom-footprint + live wiki source badge/tooltip (2.1.2)

John Lauer ·9bb8749aaf ·3mo ago ·parent 179b9ee
1 file changed +28−11
src/manage.html+28−11
@@ -6,9 +6,17 @@ <title>adom-lbr Manager</title> <script type="module" src="https://unpkg.com/@google/[email protected]/dist/model-viewer.min.js"></script> <style>-  :root{--bg:#0f1115;--panel:#171a21;--edge:#252a34;--ink:#e6e9ef;--mut:#8b93a3;--acc:#6ea8fe}+  :root{--bg:#0d1117;--panel:#171a21;--edge:#222b38;--ink:#e6edf3;--mut:#8b949e;--acc:#00b8b1;--dot:#00e6dc}   *{box-sizing:border-box}-  body{margin:0;font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);height:100vh;display:flex}+  body{margin:0;font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);height:100vh;display:flex;flex-direction:column}+  /* Canonical Adom app-shell header — matches adom-symbol / adom-footprint (adom-ui-design). */+  #appbar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--edge);background:var(--panel);flex:0 0 auto}+  #appbar .dot{width:10px;height:10px;border-radius:50%;background:var(--dot);box-shadow:0 0 12px var(--dot)}+  #appbar .brand{font-weight:700}+  #appbar .brand span{color:var(--mut);font-weight:400}+  #appbar .src{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:12px ui-monospace,monospace;color:var(--mut);background:#0d0f14;border:1px solid var(--edge);border-radius:7px;padding:4px 9px;cursor:help}+  #appbar .src b{color:var(--acc);font-weight:600}+  #shell{flex:1;display:flex;min-height:0}   #list{width:300px;min-width:300px;border-right:1px solid var(--edge);background:var(--panel);display:flex;flex-direction:column}   #list h1{font-size:15px;margin:0;padding:14px 16px;border-bottom:1px solid var(--edge);letter-spacing:.02em}   #list h1 small{color:var(--mut);font-weight:400}@@ -16,7 +24,7 @@   #rows{overflow:auto;flex:1}   .row{padding:10px 16px;border-bottom:1px solid var(--edge);cursor:pointer}   .row:hover{background:#1e222b}-  .row.sel{background:#243049;border-left:3px solid var(--acc);padding-left:13px}+  .row.sel{background:#123331;border-left:3px solid var(--acc);padding-left:13px}   .row .mpn{font-weight:600}   .row .sub{color:var(--mut);font-size:12px}   #view{flex:1;overflow:auto;padding:18px}@@ -44,19 +52,26 @@   .stacktitle{margin:22px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}   .err{color:#f87171;padding:16px}   .card .body [data-num]{cursor:pointer}-  .pinhi .pinvis{stroke:#6ea8fe !important;vector-effect:non-scaling-stroke;stroke-width:3}-  rect.pad.pinhi{stroke:#6ea8fe;vector-effect:non-scaling-stroke;stroke-width:3}+  .pinhi .pinvis{stroke:var(--acc) !important;vector-effect:non-scaling-stroke;stroke-width:3}+  rect.pad.pinhi{stroke:var(--acc);vector-effect:non-scaling-stroke;stroke-width:3}   #tip{position:fixed;z-index:9999;background:#0d1117;border:1px solid var(--acc);color:var(--ink);font:12px ui-monospace,monospace;padding:3px 8px;border-radius:6px;pointer-events:none;display:none;white-space:nowrap}   #tip b{color:var(--acc)} </style> </head> <body>-  <aside id="list">-    <h1>adom-lbr <small>Manager</small></h1>-    <input id="q" placeholder="filter components…">-    <div id="rows"></div>-  </aside>-  <main id="view"><div id="hint">← pick a component from the list to open its viewer</div></main>+  <header id="appbar">+    <span class="dot"></span>+    <span class="brand">adom-lbr <span>· Library Manager</span></span>+    <span class="src" id="src" title="Live from the Adom Wiki. The component list and every symbol / footprint / 3D (.glb) file is fetched from wiki.adom.inc on demand — nothing is stored in this container. SVGs render on the fly per click.">◍ <b>wiki.adom.inc</b></span>+  </header>+  <div id="shell">+    <aside id="list">+      <h1>Components <small id="count"></small></h1>+      <input id="q" placeholder="filter components…">+      <div id="rows"></div>+    </aside>+    <main id="view"><div id="hint">← pick a component from the list to open its viewer</div></main>+  </div>  <script> const COLORS={Silkscreen:'#d8b4fe',Courtyard:'#4ade80','Fabrication / Assembly':'#f472b6',Copper:'#f59e0b',Other:'#94a3b8'};@@ -66,6 +81,8 @@ async function loadList(){   try{     const r=await fetch('api/components').then(r=>r.json());     all=r.components||[];+    document.getElementById('count').textContent=all.length?all.length:'';+    document.getElementById('src').innerHTML='◍ <b>wiki.adom.inc</b> · '+all.length+' parts';     render();   }catch(e){     document.getElementById('rows').innerHTML='<div class="row" style="color:#f87171;cursor:default">failed to load list — retry</div>';