mirror of
https://github.com/ruvnet/RuView
synced 2026-07-16 16:23:18 +00:00
ruv
4253c0e4fc
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>
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
/**
|
|
* HOMECORE frontend entry point.
|
|
* Imports global styles, registers Lit components, and mounts the app shell.
|
|
*/
|
|
|
|
import './styles/tokens.css';
|
|
import './styles/base.css';
|
|
|
|
// Register custom elements
|
|
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));
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const shell = document.querySelector('hc-app-shell');
|
|
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);
|
|
});
|
|
});
|