feat(ui): Dragonflight redesign — foundation JSX files: shell.jsx
This commit is contained in:
parent
14bfcabcaf
commit
b6dcecb672
1 changed files with 167 additions and 0 deletions
167
services/web-ui/public/shell.jsx
Normal file
167
services/web-ui/public/shell.jsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
// shell.jsx - app shell: sidebar nav, topbar, route container
|
||||
|
||||
const NAV_TREE = [
|
||||
{ id: "home", label: "Home", icon: "home" },
|
||||
{ id: "library", label: "Library", icon: "library" },
|
||||
{ id: "projects", label: "Projects", icon: "folder" },
|
||||
{
|
||||
id: "ingest", label: "Ingest", icon: "upload", group: true,
|
||||
children: [
|
||||
{ id: "upload", label: "Upload", icon: "upload" },
|
||||
{ id: "recorders", label: "Recorders", icon: "record", badge: { kind: "live", text: "4" } },
|
||||
{ id: "capture", label: "Capture", icon: "capture" },
|
||||
{ id: "monitors", label: "Monitors", icon: "monitor" },
|
||||
],
|
||||
},
|
||||
{ id: "jobs", label: "Jobs", icon: "jobs", badge: { kind: "neutral", text: "3" } },
|
||||
{ id: "editor", label: "Editor", icon: "editor", badge: { kind: "dev", text: "DEV" } },
|
||||
];
|
||||
|
||||
const ADMIN_TREE = [
|
||||
{ id: "users", label: "Users", icon: "users" },
|
||||
{ id: "tokens", label: "Tokens", icon: "token" },
|
||||
{ id: "containers", label: "Containers", icon: "container" },
|
||||
{ id: "cluster", label: "Cluster", icon: "cluster" },
|
||||
{ id: "settings", label: "Settings", icon: "settings" },
|
||||
];
|
||||
|
||||
function NavItem({ item, active, onSelect, depth = 0, openGroups, toggleGroup }) {
|
||||
const isGroup = item.group && item.children;
|
||||
const isOpen = isGroup && openGroups.has(item.id);
|
||||
const isActive = active === item.id || (isGroup && item.children.some(c => c.id === active));
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`nav-item ${isActive && !isGroup ? "active" : ""} ${isGroup ? "has-children" : ""} ${isOpen ? "open" : ""}`}
|
||||
onClick={() => {
|
||||
if (isGroup) toggleGroup(item.id);
|
||||
else onSelect(item.id);
|
||||
}}
|
||||
>
|
||||
<Icon name={item.icon} size={15} className="nav-icon" />
|
||||
<span>{item.label}</span>
|
||||
{item.badge && (
|
||||
<span className={`nav-badge ${item.badge.kind}`}>{item.badge.text}</span>
|
||||
)}
|
||||
{isGroup && <Icon name="chevron" size={12} className="nav-caret" />}
|
||||
</div>
|
||||
{isGroup && isOpen && (
|
||||
<div className="nav-children">
|
||||
{item.children.map(c => (
|
||||
<div
|
||||
key={c.id}
|
||||
className={`nav-item ${active === c.id ? "active" : ""}`}
|
||||
onClick={() => onSelect(c.id)}
|
||||
>
|
||||
<Icon name={c.icon} size={14} className="nav-icon" />
|
||||
<span>{c.label}</span>
|
||||
{c.badge && <span className={`nav-badge ${c.badge.kind}`}>{c.badge.text}</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Sidebar({ active, onNavigate }) {
|
||||
const [openGroups, setOpenGroups] = React.useState(new Set(["ingest"]));
|
||||
const toggleGroup = (id) => {
|
||||
setOpenGroups(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
const ingestChildren = ["upload", "recorders", "capture", "monitors"];
|
||||
if (ingestChildren.includes(active)) {
|
||||
setOpenGroups(prev => prev.has("ingest") ? prev : new Set([...prev, "ingest"]));
|
||||
}
|
||||
}, [active]);
|
||||
|
||||
return (
|
||||
<aside className="sidebar">
|
||||
<div className="sidebar-header">
|
||||
<div className="brand-mark">D</div>
|
||||
<div>
|
||||
<div className="brand-name">Dragonflight</div>
|
||||
</div>
|
||||
<div className="brand-sub">v1.2.0</div>
|
||||
</div>
|
||||
<div className="sidebar-scroll">
|
||||
{NAV_TREE.map(item => (
|
||||
<NavItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
active={active}
|
||||
onSelect={onNavigate}
|
||||
openGroups={openGroups}
|
||||
toggleGroup={toggleGroup}
|
||||
/>
|
||||
))}
|
||||
<div className="nav-section-label">Admin</div>
|
||||
{ADMIN_TREE.map(item => (
|
||||
<NavItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
active={active}
|
||||
onSelect={onNavigate}
|
||||
openGroups={openGroups}
|
||||
toggleGroup={toggleGroup}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="sidebar-footer">
|
||||
<div className="avatar">ZG</div>
|
||||
<div className="user-meta">
|
||||
<div className="user-name">Zach Gaetano</div>
|
||||
<div className="user-role">admin · broadcast</div>
|
||||
</div>
|
||||
<button className="icon-btn" data-tip="Sign out"><Icon name="power" /></button>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function Topbar({ crumbs, onNavigate, right }) {
|
||||
return (
|
||||
<header className="topbar">
|
||||
<div className="crumb">
|
||||
{crumbs.map((c, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{i > 0 && <Icon name="chevron" size={12} className="sep" />}
|
||||
<span
|
||||
className={i === crumbs.length - 1 ? "current" : ""}
|
||||
style={{ cursor: c.to && i < crumbs.length - 1 ? "pointer" : "default" }}
|
||||
onClick={() => c.to && onNavigate && onNavigate(c.to)}
|
||||
>
|
||||
{c.label}
|
||||
</span>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
<div className="spacer" />
|
||||
<div className="search">
|
||||
<Icon name="search" className="search-icon" />
|
||||
<input placeholder="Search assets, projects, comments…" />
|
||||
<span className="kbd">⌘K</span>
|
||||
</div>
|
||||
<div className="status-pip">
|
||||
<span className="dot" />
|
||||
<span>cluster healthy</span>
|
||||
</div>
|
||||
<button className="icon-btn" data-tip="Notifications">
|
||||
<Icon name="bell" />
|
||||
</button>
|
||||
{right}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
window.Sidebar = Sidebar;
|
||||
window.Topbar = Topbar;
|
||||
window.NAV_TREE = NAV_TREE;
|
||||
Loading…
Reference in a new issue