feat: template UI — onglets owner disabled avec label 'soon' + tooltip

This commit is contained in:
2026-03-21 17:56:16 +01:00
parent a043fd0285
commit 667e84aa30

View File

@@ -23,6 +23,7 @@ interface NavItem {
icon: string icon: string
label: string label: string
separator?: boolean separator?: boolean
disabled?: boolean
} }
interface PendingGate { interface PendingGate {
@@ -32,7 +33,11 @@ interface PendingGate {
} }
const NAV_ITEMS: NavItem[] = [ const NAV_ITEMS: NavItem[] = [
{ id: 'cosmos', icon: '🌌', label: 'Cosmos' }, { id: 'workflows', icon: '🔀', label: 'Workflows', disabled: true },
{ id: 'builder', icon: '⚡', label: 'Nouveau', disabled: true },
{ id: 'secrets', icon: '🔑', label: 'Secrets', disabled: true },
{ id: 'infra', icon: '🖥️', label: 'Infra', disabled: true },
{ id: 'cosmos', icon: '🌌', label: 'Cosmos', separator: true },
] ]
function AppInner() { function AppInner() {
@@ -141,10 +146,19 @@ function AppInner() {
<div className="mx-3 my-1" style={{ borderTop: '1px solid #2a2a2a' }} /> <div className="mx-3 my-1" style={{ borderTop: '1px solid #2a2a2a' }} />
)} )}
<button <button
onClick={() => handleViewChange(item.id)} onClick={() => !item.disabled && handleViewChange(item.id)}
className="flex items-center gap-3 px-3 py-2 rounded text-sm font-medium text-left transition-colors w-full" className="flex items-center gap-3 px-3 py-2 rounded text-sm font-medium text-left transition-colors w-full"
title={item.disabled ? 'Disponible avec brain boot' : undefined}
style={ style={
isActive item.disabled
? {
color: '#374151',
borderLeft: '2px solid transparent',
paddingLeft: 10,
cursor: 'default',
opacity: 0.5,
}
: isActive
? { ? {
background: 'rgba(99,102,241,0.2)', background: 'rgba(99,102,241,0.2)',
color: '#6366f1', color: '#6366f1',
@@ -160,6 +174,9 @@ function AppInner() {
> >
<span className="text-base leading-none">{item.icon}</span> <span className="text-base leading-none">{item.icon}</span>
<span>{item.label}</span> <span>{item.label}</span>
{item.disabled && (
<span style={{ marginLeft: 'auto', fontSize: 8, color: '#374151', fontFamily: 'monospace' }}>soon</span>
)}
</button> </button>
</div> </div>
) )