feat(ui): StatusPill primitive + time-of-day greeting helper

Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto
2026-06-18 10:37:29 +00:00
parent abd8162aad
commit 0838d7d3e6
3 changed files with 44 additions and 0 deletions

View File

@@ -8120,3 +8120,17 @@ select.input {
.console-rail.console-rail--enter { animation: none; }
.console-rail .nav-item:hover:not(.active) { transform: none; }
}
.status-pill {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.status-pill__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-text-muted); flex-shrink: 0; }
.status-pill--success .status-pill__dot { background: var(--color-success); }
.status-pill--warning .status-pill__dot { background: var(--color-warning); }
.status-pill--error .status-pill__dot { background: var(--color-error); }
.status-pill--info .status-pill__dot { background: var(--color-info); }
.status-pill--muted .status-pill__dot { background: var(--color-text-muted); }

View File

@@ -0,0 +1,21 @@
// Single source for status visuals. Maps a semantic status to a token-driven
// dot + label. Replaces per-page hex status maps over time.
const STATUS = {
healthy: 'success',
online: 'success',
warning: 'warning',
draining: 'warning',
error: 'error',
unhealthy: 'error',
loading: 'info',
idle: 'muted',
}
export default function StatusPill({ status, label, className = '' }) {
const tone = STATUS[status] || 'muted'
return (
<span className={`status-pill status-pill--${tone} ${className}`.trim()}>
<span className="status-pill__dot" aria-hidden="true" />
{label != null ? label : status}
</span>
)
}

View File

@@ -0,0 +1,9 @@
// Pure time-of-day bucket for the editorial home greeting.
// Returns an i18n key suffix; caller resolves t(`greeting.${key}`).
export function greetingKey(date = new Date()) {
const h = date.getHours()
if (h < 5) return 'night'
if (h < 12) return 'morning'
if (h < 18) return 'afternoon'
return 'evening'
}