vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(dashboard): extract themed-dialog styles into an importable modal.css

Browse source 
The themed dialog component (modal.js: themedConfirm / themedPrompt /
themedToast) is raised from common.js's data-async / data-confirm
handler, which every page loads — but its .tc-* styles lived only in
dashboard.css (the main tabbed dashboard's stylesheet). So on any
standalone page (core/C0R3, settings, flow, logs) a dialog rendered
completely unstyled: the build-queue rebuild-cancel confirm came up as
raw text.

Extract the .tc-* rules into a dedicated modal.css component (paired
with modal.js) and @import it from common.css, so the styles load
wherever a dialog can fire — not just the main dashboard. esbuild
inlines the @import into the common.css bundle, so there's no extra
request and the main dashboard is visually unchanged (it loads
common.css too). The stale 'themedConfirm() in common.js' comment is
gone with the move. Fixes #1910.
This commit is contained in:
iris 2026-06-22 22:15:23 +02:00 • committed by mara
commit 5ae5657ca4
3 changed files with 112 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/packages/dashboard/src/common.css
View file

@ -4,6 +4,7 @@
@import "@hive/shared/terminal.css";
@import "@hive/shared/tabs.css";
@import "@hive/shared/chrome.css";
@import "./modal.css";
/* ─── global typography ─────────────────────────────────────────────
Element-level rules shared across all three pages (index, flow,

107
frontend/packages/dashboard/src/dashboard.css
View file

@ -414,113 +414,6 @@ body.dashboard-shell {
}
.container-row .actions form.inline { display: inline-block; margin: 0; }
/* Themed confirm modal — `themedConfirm()` in common.js. In-theme replacement
for the native confirm() on destructive actions (stop / restart / destroy),
carrying the optional "stop gracefully" checkbox. */
.tc-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1em;
background: color-mix(in srgb, var(--crust) 60%, transparent);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.tc-box {
background: var(--bg-elev);
border: 1px solid var(--purple-dim);
box-shadow: 0 8px 40px -8px var(--crust);
padding: 1.2em 1.4em;
max-width: min(32em, 92vw);
display: flex;
flex-direction: column;
gap: 0.9em;
}
.tc-title {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--subtext0);
}
.tc-message { color: var(--fg); line-height: 1.45; }
.tc-checks { display: flex; flex-direction: column; gap: 0.4em; }
.tc-checkrow {
display: flex;
align-items: flex-start;
gap: 0.5em;
cursor: pointer;
color: var(--subtext0);
font-size: 0.92em;
line-height: 1.35;
}
.tc-checkrow .tc-check { margin-top: 0.2em; flex: 0 0 auto; }
.tc-actions {
display: flex;
justify-content: flex-end;
gap: 0.6em;
margin-top: 0.2em;
}
.tc-cancel { color: var(--subtext0); }
.tc-confirm { color: var(--green); }
.tc-confirm.tc-danger { color: var(--red); }
/* themedPrompt input field */
.tc-promptfield { display: flex; flex-direction: column; gap: 0.4em; }
.tc-promptlabel { color: var(--subtext0); font-size: 0.9em; }
.tc-input {
font-family: inherit;
font-size: 1em;
width: 100%;
box-sizing: border-box;
background: var(--crust);
color: var(--fg);
border: 1px solid var(--purple-dim);
padding: 0.4em 0.6em;
}
.tc-input:focus { outline: 1px solid var(--green); }
/* themedPrompt's field is always a resizable textarea (Enter submits,
Shift+Enter inserts a newline) — sensible min-height, wrapped output. */
.tc-textarea {
resize: vertical;
min-height: 4.5em;
line-height: 1.4;
white-space: pre-wrap;
}
/* themedToast — non-blocking transient notifications (errors/info/ok) */
.tc-toasts {
position: fixed;
top: 1em;
right: 1em;
z-index: 1100;
display: flex;
flex-direction: column;
gap: 0.5em;
max-width: min(28em, 92vw);
pointer-events: none;
}
.tc-toast {
pointer-events: auto;
cursor: pointer;
background: var(--bg-elev);
border: 1px solid var(--purple-dim);
border-left-width: 3px;
box-shadow: 0 4px 20px -6px var(--crust);
padding: 0.6em 0.9em;
font-size: 0.9em;
color: var(--fg);
white-space: pre-wrap;
opacity: 1;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.tc-toast-out { opacity: 0; transform: translateX(0.5em); }
.tc-toast-error { border-left-color: var(--red); }
.tc-toast-info { border-left-color: var(--purple-dim); }
.tc-toast-ok { border-left-color: var(--green); }
.agent-status {
font-size: 0.82em;
color: var(--subtext0);

111
frontend/packages/dashboard/src/modal.css Normal file
View file

@ -0,0 +1,111 @@
/* modal.css — themed dialog component styles.
Pairs with modal.js (themedConfirm / themedPrompt / themedToast). The
dialogs are raised from common.js's data-async / data-confirm handler,
which every page loads, so common.css @imports this to keep the styles
present wherever a dialog can fire — not just the main dashboard.
(Previously these rules lived in dashboard.css, so dialogs rendered
unstyled on standalone pages such as /core.) */
.tc-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1em;
background: color-mix(in srgb, var(--crust) 60%, transparent);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.tc-box {
background: var(--bg-elev);
border: 1px solid var(--purple-dim);
box-shadow: 0 8px 40px -8px var(--crust);
padding: 1.2em 1.4em;
max-width: min(32em, 92vw);
display: flex;
flex-direction: column;
gap: 0.9em;
}
.tc-title {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--subtext0);
}
.tc-message { color: var(--fg); line-height: 1.45; }
.tc-checks { display: flex; flex-direction: column; gap: 0.4em; }
.tc-checkrow {
display: flex;
align-items: flex-start;
gap: 0.5em;
cursor: pointer;
color: var(--subtext0);
font-size: 0.92em;
line-height: 1.35;
}
.tc-checkrow .tc-check { margin-top: 0.2em; flex: 0 0 auto; }
.tc-actions {
display: flex;
justify-content: flex-end;
gap: 0.6em;
margin-top: 0.2em;
}
.tc-cancel { color: var(--subtext0); }
.tc-confirm { color: var(--green); }
.tc-confirm.tc-danger { color: var(--red); }
/* themedPrompt input field */
.tc-promptfield { display: flex; flex-direction: column; gap: 0.4em; }
.tc-promptlabel { color: var(--subtext0); font-size: 0.9em; }
.tc-input {
font-family: inherit;
font-size: 1em;
width: 100%;
box-sizing: border-box;
background: var(--crust);
color: var(--fg);
border: 1px solid var(--purple-dim);
padding: 0.4em 0.6em;
}
.tc-input:focus { outline: 1px solid var(--green); }
/* themedPrompt's field is always a resizable textarea (Enter submits,
Shift+Enter inserts a newline) — sensible min-height, wrapped output. */
.tc-textarea {
resize: vertical;
min-height: 4.5em;
line-height: 1.4;
white-space: pre-wrap;
}
/* themedToast — non-blocking transient notifications (errors/info/ok) */
.tc-toasts {
position: fixed;
top: 1em;
right: 1em;
z-index: 1100;
display: flex;
flex-direction: column;
gap: 0.5em;
max-width: min(28em, 92vw);
pointer-events: none;
}
.tc-toast {
pointer-events: auto;
cursor: pointer;
background: var(--bg-elev);
border: 1px solid var(--purple-dim);
border-left-width: 3px;
box-shadow: 0 4px 20px -6px var(--crust);
padding: 0.6em 0.9em;
font-size: 0.9em;
color: var(--fg);
white-space: pre-wrap;
opacity: 1;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.tc-toast-out { opacity: 0; transform: translateX(0.5em); }
.tc-toast-error { border-left-color: var(--red); }
.tc-toast-info { border-left-color: var(--purple-dim); }
.tc-toast-ok { border-left-color: var(--green); }