drive the headscale section from the url

sections were held in a usePanelChannel, which is exactly the opaque
click the navigation audit catalogues: the id lived in an onClick
closure, so a section could not be linked to, opened in a new tab or
reached with the back button.

/headscale/:section is now the source of truth. nav items are real
NavLinks with the active class coming from the router rather than
derived in js, and the screen redirects bare or unknown sections to a
canonical url so the highlight always matches the address bar.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/apps/officer-web/App.tsx

@@ -43,6 +43,7 @@ export function App() {
             <Route path="/music" element={<Dashboard.MusicScreen />} />
             <Route path="/soulseek" element={<Dashboard.SoulseekScreen />} />
             <Route path="/headscale" element={<Dashboard.HeadscaleScreen />} />
+            <Route path="/headscale/:section" element={<Dashboard.HeadscaleScreen />} />
             <Route path="/system-monitor" element={<Dashboard.SystemMonitorScreen />} />
             <Route path="/activity" element={<Dashboard.ActivityScreen />} />