Dasemu
86b365ac52
Some checks failed
CI / test (push) Has been cancelled
Replace the unstyled apps/web UI with a cohesive dark/light "ops console" design: sidebar shell, semantic status badges for all 8 installation states, a real data table for the installation list, a modal install wizard, and a sectioned detail view (access, configuration, actions, build log) with copy-to-clipboard for the public URL and bearer token. Styling is plain CSS with custom-property design tokens (no new runtime dependency); Inter + JetBrains Mono loaded via Google Fonts. All existing API calls and behavior are preserved unchanged. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { NavLink } from "react-router-dom";
|
|
import { api } from "../api/client";
|
|
|
|
export function Shell({
|
|
title,
|
|
actions,
|
|
children,
|
|
onLoggedOut,
|
|
}: {
|
|
title: string;
|
|
actions?: ReactNode;
|
|
children: ReactNode;
|
|
onLoggedOut: () => void;
|
|
}) {
|
|
async function logout() {
|
|
await api.logout();
|
|
onLoggedOut();
|
|
}
|
|
|
|
return (
|
|
<div className="shell">
|
|
<aside className="sidebar">
|
|
<div className="brand">
|
|
<span className="brand-mark">mcp</span>
|
|
<div>
|
|
<div className="brand-name">remote-mcp-manager</div>
|
|
<div className="brand-sub">Server control room</div>
|
|
</div>
|
|
</div>
|
|
<nav className="nav">
|
|
<NavLink to="/" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`} end>
|
|
Installations
|
|
</NavLink>
|
|
</nav>
|
|
<div className="sidebar-footer">
|
|
<button type="button" className="btn btn-ghost btn-sm" onClick={logout}>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<div className="main">
|
|
<header className="topbar">
|
|
<h1>{title}</h1>
|
|
{actions && <div className="topbar-actions">{actions}</div>}
|
|
</header>
|
|
<div className="content">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|