frank/ruvnet--RuView
1
0
Fork 0
mirror of https://github.com/ruvnet/RuView synced 2026-07-26 18:01:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(homecore-ui): wire nav router + States / Services / Settings pages

Browse Source 
Before: clicking Dashboard / States / Services / Settings highlighted
the active nav button but the page content never changed. AppShell
dispatched `hc-navigate` events but no listener acted on them.

After (~232 LOC across 4 files):
  - main.ts (+20 LOC) tiny router: NAV_TO_TAG maps nav id → page
    custom element; on `hc-navigate`, swap the AppShell's child.
  - pages/States.ts (~86 LOC) HA-style entity table with 5 s refresh.
  - pages/Services.ts (~82 LOC) domain-grouped service registry,
    friendly empty state when no services registered.
  - pages/Settings.ts (~90 LOC) backend config readout + bearer-token
    editor (localStorage["homecore.token"]).

Browser-verified all 4 nav clicks swap content; 0 console errors.
Dashboard → 10 entity cards; States → 10-row table; Services →
empty state (0 domains); Settings → config + token editor.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
ruv
2026-05-26 12:39:33 -04:00
parent 858a3d9eb5
commit 4253c0e4fc
4 changed files with 291 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/main.ts
+26 -5
View File
@@ -10,12 +10,33 @@ import './styles/base.css';
import './components/AppShell.js';
import './components/StateCard.js';
import './pages/Dashboard.js';
import './pages/States.js';
import './pages/Services.js';
import './pages/Settings.js';
// Tiny router: the AppShell dispatches `hc-navigate` on every nav
// click. We swap whichever page element is sitting in its <slot>
// based on the new active id. Default page on first paint = dashboard.
const NAV_TO_TAG: Record<string, string> = {
dashboard: 'hc-dashboard',
states: 'hc-states',
services: 'hc-services',
settings: 'hc-settings',
};
function mountPage(shell: Element, tag: string): void {
// Remove any existing page (everything that isn't itself the shell).
Array.from(shell.children).forEach((c) => c.remove());
shell.appendChild(document.createElement(tag));
}
// Mount the Dashboard inside the AppShell's slot so the empty `<main>`
// layout actually shows something on first paint.
window.addEventListener('DOMContentLoaded', () => {
const shell = document.querySelector('hc-app-shell');
if (shell && !shell.querySelector('hc-dashboard')) {
shell.appendChild(document.createElement('hc-dashboard'));
}
if (!shell) return;
mountPage(shell, 'hc-dashboard');
shell.addEventListener('hc-navigate', (ev) => {
const id = (ev as CustomEvent<{ id: string }>).detail?.id;
const tag = id ? NAV_TO_TAG[id] : undefined;
if (tag) mountPage(shell, tag);
});
});