web: keep the port strip in the header on every tab

The row of port icons lived in a card on the Dashboard, so link
state and speed were out of sight on every other tab. Move it into the
header between the title and the save button, a little smaller, and
poll /status.json whenever the page is open instead of only on the
Dashboard, Ports and Statistics tabs; the existing idle and hidden-tab
gating still pauses it. On narrow screens the strip wraps to its own
row under the title.

html/app.js

@@ -964,6 +964,7 @@ function pollStatus(){
   });
 }
 var statusPoller=new Poller(pollStatus,2500);
+statusPoller.start();
 function needPorts(fn){
   if(S.n)return fn();
   pollStatus().then(fn).catch(function(){});
@@ -1108,8 +1109,7 @@ function dashStatus(){
   });
 }
 tabHooks.dash={
-  enter:function(){statusPoller.start();pollInfo().catch(function(){})},
+  enter:function(){pollInfo().catch(function(){})},
-  leave:function(){statusPoller.stop()},
   status:dashStatus,
 };
 
@@ -1186,8 +1186,7 @@ function applyPort(i){
   postCmds(cmds).then(loadMtu).catch(function(){});
 }
 tabHooks.ports={
-  enter:function(){statusPoller.start();needPorts(buildPorts)},
+  enter:function(){needPorts(buildPorts)},
-  leave:function(){statusPoller.stop()},
   status:portsStatus,
 };
 
@@ -1443,8 +1442,7 @@ function statsStatus(){
   });
 }
 tabHooks.stats={
-  enter:function(){statusPoller.start()},
+  leave:function(){if(ctrPoll)ctrPoll.stop()},
-  leave:function(){statusPoller.stop();if(ctrPoll)ctrPoll.stop()},
   status:statsStatus,
 };
 

html/index.html

@@ -55,11 +55,11 @@ a{color:var(--ac);text-decoration:none}
 #navfoot{padding:10px 16px;border-top:1px solid var(--bd);font-size:12px;color:var(--fg2)}
 #wrap{flex:1;min-width:0;display:flex;flex-direction:column}
 #top{
-  display:flex;align-items:center;gap:10px;padding:10px 20px;
+  display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 20px;
   background:var(--panel);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:5;
 }
 #burger{display:none;background:none;border:0;cursor:pointer;padding:4px}
-#ttitle{font-size:16px;font-weight:650;flex:1}
+#ttitle{font-size:16px;font-weight:650;min-width:120px}
 #dirty{
   display:none;font-size:12px;font-weight:600;color:var(--warn);
   border:1px solid var(--warn);border-radius:20px;padding:2px 10px;
@@ -112,19 +112,19 @@ label.row span.lb{width:110px;flex:none;color:var(--fg2);font-size:13px}
 }
 .switch input:checked+i{background:var(--ok)}
 .switch input:checked+i:before{transform:translateX(15px)}
-#strip{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 2px}
+#strip{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center;min-width:0}
 .port{
-  width:46px;border:2px solid var(--bd);border-radius:7px;padding:5px 0 3px;
+  width:40px;border:2px solid var(--bd);border-radius:7px;padding:3px 0 2px;
   text-align:center;cursor:pointer;background:var(--panel2);position:relative;
 }
-.port.sfp{width:56px}
+.port.sfp{width:50px}
-.port .pn{font-weight:650;font-size:13px}
+.port .pn{font-weight:650;font-size:12px}
-.port .ps{font-size:10px;color:var(--fg2);display:block;line-height:1.2}
+.port .ps{font-size:9px;color:var(--fg2);display:block;line-height:1.2}
 .port .jack{
-  display:block;width:18px;height:12px;margin:3px auto 2px;border-radius:2px;
+  display:block;width:16px;height:10px;margin:2px auto 1px;border-radius:2px;
-  border:2px solid var(--fg2);border-top-width:5px;opacity:.55;
+  border:2px solid var(--fg2);border-top-width:4px;opacity:.55;
 }
-.port.sfp .jack{width:28px;height:10px;border-top-width:3px}
+.port.sfp .jack{width:24px;height:9px;border-top-width:3px}
 .port.up{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 10%,var(--panel2))}
 .port.up .jack{border-color:var(--pc);opacity:1}
 .port.up .ps{color:var(--pc);font-weight:600}
@@ -180,7 +180,8 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
   #burger{display:block}
   main{padding:14px 12px 40px}
   #top{padding:8px 10px;gap:7px}
-  #ttitle{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  #ttitle{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
+  #strip{order:3;flex-basis:100%;justify-content:flex-start}
   #dirty{padding:2px 7px}
 }
 </style>
@@ -215,15 +216,13 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
       <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--fg)" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
     </button>
     <span id="ttitle"></span>
+    <div id="strip" data-i18n-t="d_ports_h"></div>
     <span id="dirty" data-i18n="hdr_dirty" data-i18n-t="hdr_dirty_t">unsaved changes</span>
     <button class="ctl pri" id="saveBtn" data-i18n="hdr_save" data-i18n-t="hdr_save_t">Save to flash</button>
   </header>
 
   <main>
     <section class="tab act" id="tab-dash">
-      <div class="card"><h2><span data-i18n="d_ports">Ports</span> <span class="hint" data-i18n="d_ports_h">click a port for details</span></h2>
-        <div id="strip"></div>
-      </div>
       <div class="grid2">
         <div class="card"><h2 data-i18n="d_system">System</h2><table class="t" id="sysinfo"></table></div>
         <div class="card"><h2><span data-i18n="d_traffic">Traffic</span> <span class="hint" data-i18n="d_traffic_h">packets/s, live</span></h2>