1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import { renderDashboard } from './pages/dashboard.js';
import { renderProjectPage } from './pages/project.js';
import { renderSettings } from './pages/settings.js';
import { wsClient } from './lib/ws.js';
const mainContent = document.getElementById('main-content')!;
// Simple client-side router
type Route = {
pattern: RegExp;
handler: (container: HTMLElement, params: string[]) => Promise<void>;
};
const routes: Route[] = [
{ pattern: /^\/$/, handler: (c) => renderDashboard(c) },
{ pattern: /^\/project\/([a-z0-9-]+)$/, handler: (c, p) => renderProjectPage(c, p[1]) },
{ pattern: /^\/settings$/, handler: (c) => renderSettings(c) },
];
function navigate(path: string): void {
for (const route of routes) {
const match = path.match(route.pattern);
if (match) {
updateNavActive(path);
route.handler(mainContent, Array.from(match));
return;
}
}
// 404
mainContent.innerHTML = `
<div class="empty-state">
<h3>Page not found</h3>
<p><a href="/" data-route="/" style="color:var(--accent-glow)">Back to Dashboard</a></p>
</div>
`;
}
function updateNavActive(path: string): void {
document.querySelectorAll('.nav-links a').forEach(a => {
const route = (a as HTMLElement).dataset.route;
a.classList.toggle('active', route === path || (route === '/' && path.startsWith('/project/')));
});
}
// Intercept link clicks for SPA navigation
document.addEventListener('click', (e) => {
const link = (e.target as HTMLElement).closest('[data-route]');
if (link) {
e.preventDefault();
const path = (link as HTMLElement).dataset.route!;
history.pushState(null, '', path);
navigate(path);
}
});
// Handle browser back/forward
window.addEventListener('popstate', () => {
navigate(location.pathname);
});
// Init
wsClient.connect();
navigate(location.pathname);
|
