web: split app css by feature
This commit is contained in:
parent
51e2b721ff
commit
1c2cb01882
File diff suppressed because it is too large
Load Diff
|
|
@ -16,7 +16,9 @@ Deno.test("workspace app css uses bundled UI fonts", async () => {
|
||||||
appCss.includes("gen-interface-jp/500.css") &&
|
appCss.includes("gen-interface-jp/500.css") &&
|
||||||
appCss.includes("gen-interface-jp/600.css") &&
|
appCss.includes("gen-interface-jp/600.css") &&
|
||||||
appCss.includes("gen-interface-jp/700.css") &&
|
appCss.includes("gen-interface-jp/700.css") &&
|
||||||
appCss.includes('"Gen Interface JP", Inter'),
|
appCss.includes("--font-sans:") &&
|
||||||
|
appCss.includes('"Gen Interface JP"') &&
|
||||||
|
appCss.includes("Inter"),
|
||||||
"global app css should import the tracked Gen Interface JP weights and prefer it in the sans font stack",
|
"global app css should import the tracked Gen Interface JP weights and prefer it in the sans font stack",
|
||||||
);
|
);
|
||||||
assert(
|
assert(
|
||||||
|
|
@ -24,11 +26,44 @@ Deno.test("workspace app css uses bundled UI fonts", async () => {
|
||||||
appCss.includes("@fontsource/ibm-plex-mono/latin-500.css") &&
|
appCss.includes("@fontsource/ibm-plex-mono/latin-500.css") &&
|
||||||
appCss.includes("@fontsource/ibm-plex-mono/latin-600.css") &&
|
appCss.includes("@fontsource/ibm-plex-mono/latin-600.css") &&
|
||||||
appCss.includes("@fontsource/ibm-plex-mono/latin-700.css") &&
|
appCss.includes("@fontsource/ibm-plex-mono/latin-700.css") &&
|
||||||
appCss.includes('"IBM Plex Mono", ui-monospace'),
|
appCss.includes("--font-mono:") &&
|
||||||
|
appCss.includes('"IBM Plex Mono"') &&
|
||||||
|
appCss.includes("ui-monospace"),
|
||||||
"global app css should import the tracked IBM Plex Mono weights and prefer it in the mono font stack",
|
"global app css should import the tracked IBM Plex Mono weights and prefer it in the mono font stack",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Deno.test("workspace feature css is owned outside app css", async () => {
|
||||||
|
const appCss = await Deno.readTextFile(new URL("./../../../app.css", import.meta.url));
|
||||||
|
const workspaceLayout = await Deno.readTextFile(
|
||||||
|
new URL("./../../../routes/w/[workspaceId]/+layout.svelte", import.meta.url),
|
||||||
|
);
|
||||||
|
const settingsLayout = await Deno.readTextFile(
|
||||||
|
new URL("./../../../routes/w/[workspaceId]/settings/+layout.svelte", import.meta.url),
|
||||||
|
);
|
||||||
|
const accountPage = await Deno.readTextFile(
|
||||||
|
new URL("./../../../routes/account/+page.svelte", import.meta.url),
|
||||||
|
);
|
||||||
|
const deviceLoginPage = await Deno.readTextFile(
|
||||||
|
new URL("./../../../routes/login/device/+page.svelte", import.meta.url),
|
||||||
|
);
|
||||||
|
|
||||||
|
assert(
|
||||||
|
!appCss.includes(".workspace-actions") &&
|
||||||
|
!appCss.includes(".worker-new-page") &&
|
||||||
|
!appCss.includes(".settings-page"),
|
||||||
|
"app.css should not own workspace, worker, or settings page implementation classes",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
workspaceLayout.includes("$lib/workspace/styles/workspace-pages.css") &&
|
||||||
|
workspaceLayout.includes("$lib/workspace/styles/workers.css") &&
|
||||||
|
settingsLayout.includes("$lib/workspace/styles/settings.css") &&
|
||||||
|
accountPage.includes("$lib/workspace/styles/settings.css") &&
|
||||||
|
deviceLoginPage.includes("$lib/workspace/styles/settings.css"),
|
||||||
|
"feature-owned CSS should be imported by the layouts/pages that need it",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
Deno.test("workspace Worker list lives on the dedicated Workers page", async () => {
|
Deno.test("workspace Worker list lives on the dedicated Workers page", async () => {
|
||||||
const workspacePage = await Deno.readTextFile(
|
const workspacePage = await Deno.readTextFile(
|
||||||
new URL("./../../../routes/w/[workspaceId]/+page.svelte", import.meta.url),
|
new URL("./../../../routes/w/[workspaceId]/+page.svelte", import.meta.url),
|
||||||
|
|
|
||||||
521
web/workspace/src/lib/workspace/styles/settings.css
Normal file
521
web/workspace/src/lib/workspace/styles/settings.css
Normal file
|
|
@ -0,0 +1,521 @@
|
||||||
|
@layer reset, tokens, base, layout, components;
|
||||||
|
@layer components {
|
||||||
|
.settings-button {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-button:hover,
|
||||||
|
.settings-button:focus-visible,
|
||||||
|
.settings-button.active {
|
||||||
|
background: var(--interactive-selected);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-shell {
|
||||||
|
gap: var(--space-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-hero,
|
||||||
|
.settings-notice,
|
||||||
|
.settings-section-header,
|
||||||
|
.settings-patterns {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy {
|
||||||
|
max-width: 54rem;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.35rem 0.65rem;
|
||||||
|
background: var(--bg-subtle);
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.warning {
|
||||||
|
color: var(--warning);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.success {
|
||||||
|
color: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-notice {
|
||||||
|
border-left: 4px solid var(--warning);
|
||||||
|
padding-left: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-diagnostic {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
max-width: 24rem;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-panel);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-diagnostic strong {
|
||||||
|
color: var(--text-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-nav-card {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-nav-link {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-panel);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-nav-link:hover,
|
||||||
|
.settings-nav-link:focus-visible {
|
||||||
|
background: var(--interactive-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-nav-link span {
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-grid,
|
||||||
|
.settings-pattern-grid {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section,
|
||||||
|
.settings-patterns,
|
||||||
|
.settings-pattern {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section ul,
|
||||||
|
.settings-patterns ul {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section li + li {
|
||||||
|
margin-top: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-identity-list {
|
||||||
|
padding-top: var(--space-3);
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-pattern {
|
||||||
|
padding: var(--space-4);
|
||||||
|
border-radius: var(--radius-panel);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-pattern h3,
|
||||||
|
.settings-pattern p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-message {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-details {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin: var(--space-3) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-details div {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(8rem, 0.35fr) 1fr;
|
||||||
|
gap: var(--space-3);
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-details dt {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-details dd {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-details code {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-panel {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.settings-hero,
|
||||||
|
.settings-notice,
|
||||||
|
.settings-section-header,
|
||||||
|
.settings-patterns {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.settings-runtime-form label {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.25rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-form button,
|
||||||
|
.settings-action-row button {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0.6rem;
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--bg);
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-form button:disabled,
|
||||||
|
.settings-action-row button:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-form,
|
||||||
|
.settings-runtime-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-form {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table-wrap {
|
||||||
|
overflow-x: auto;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: var(--bg-raised);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 48rem;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table th,
|
||||||
|
.settings-runtime-table td {
|
||||||
|
padding: 0.8rem 0.9rem;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table th {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table tr:last-child td {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table tr.inactive {
|
||||||
|
opacity: 0.78;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table td {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table td > strong,
|
||||||
|
.settings-runtime-table td > span,
|
||||||
|
.settings-runtime-table td > code,
|
||||||
|
.settings-runtime-table td > small {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table strong {
|
||||||
|
color: var(--text-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table code {
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-table small {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-runtime-detail-row td {
|
||||||
|
padding-top: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.025);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-muted-action {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-action-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-action-row .danger {
|
||||||
|
background: var(--danger);
|
||||||
|
color: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-diagnostics-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.4rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-diagnostics-list li {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.15rem;
|
||||||
|
border-radius: 0.6rem;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
padding: 0.55rem 0.65rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-diagnostics-list li.error {
|
||||||
|
border-color: rgba(255, 99, 99, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-diagnostics-list li.warning {
|
||||||
|
border-color: rgba(255, 205, 86, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-test-result {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.3rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
.settings-page {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-5);
|
||||||
|
}
|
||||||
|
.settings-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.settings-nav a,
|
||||||
|
.settings-section-card,
|
||||||
|
.button-link {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.settings-nav a,
|
||||||
|
.settings-section-card {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-panel);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
}
|
||||||
|
.settings-nav a:hover,
|
||||||
|
.settings-nav a:focus-visible,
|
||||||
|
.settings-nav a.active,
|
||||||
|
.settings-section-card:hover,
|
||||||
|
.settings-section-card:focus-visible {
|
||||||
|
background: var(--interactive-hover);
|
||||||
|
}
|
||||||
|
.settings-nav span,
|
||||||
|
.settings-section-card h3 {
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
.settings-section-grid,
|
||||||
|
.settings-profile-grid,
|
||||||
|
.settings-pattern-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.settings-card {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.settings-card-header,
|
||||||
|
.settings-section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.settings-form,
|
||||||
|
.settings-registry-editor {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.settings-form label,
|
||||||
|
.settings-registry-editor label {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
|
.settings-form input,
|
||||||
|
.settings-form select,
|
||||||
|
.settings-form textarea,
|
||||||
|
.settings-registry-editor input,
|
||||||
|
.settings-registry-editor select,
|
||||||
|
.settings-runtime-form input {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 0.55rem;
|
||||||
|
background: var(--bg-raised);
|
||||||
|
color: var(--text-strong);
|
||||||
|
padding: 0.45rem 0.55rem;
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
.settings-form textarea {
|
||||||
|
min-height: 18rem;
|
||||||
|
resize: vertical;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
.settings-form button,
|
||||||
|
.button-link {
|
||||||
|
width: fit-content;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0.6rem;
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--bg);
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.settings-form button:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
.settings-form button.danger {
|
||||||
|
background: var(--danger);
|
||||||
|
}
|
||||||
|
.settings-note {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.settings-profile-list {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-3);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.settings-profile-list li,
|
||||||
|
.settings-registry-editor fieldset,
|
||||||
|
.settings-pattern-grid article {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-2);
|
||||||
|
padding: var(--space-3);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-panel);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
}
|
||||||
|
.settings-profile-list strong,
|
||||||
|
.settings-profile-list span,
|
||||||
|
.settings-profile-list small {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.settings-profile-list strong {
|
||||||
|
color: var(--text-strong);
|
||||||
|
}
|
||||||
|
.settings-profile-list span,
|
||||||
|
.settings-profile-list small,
|
||||||
|
.settings-profile-list p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.settings-registry-editor fieldset {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.settings-registry-editor legend {
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-weight: 750;
|
||||||
|
}
|
||||||
|
.settings-identity-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
|
||||||
|
gap: var(--space-3);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.settings-identity-list div {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
}
|
||||||
|
.settings-identity-list dt {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
.settings-identity-list dd {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-strong);
|
||||||
|
}
|
||||||
|
.section-status-pill {
|
||||||
|
width: fit-content;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.25rem 0.55rem;
|
||||||
|
background: var(--bg-subtle);
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.status-message.error {
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
}
|
||||||
197
web/workspace/src/lib/workspace/styles/workers.css
Normal file
197
web/workspace/src/lib/workspace/styles/workers.css
Normal file
|
|
@ -0,0 +1,197 @@
|
||||||
|
@layer reset, tokens, base, layout, components;
|
||||||
|
@layer components {
|
||||||
|
.section-heading-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-action {
|
||||||
|
margin-left: auto;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--bg-subtle);
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
padding: 0.2rem 0.55rem;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-action:hover,
|
||||||
|
.section-action:focus-visible,
|
||||||
|
.section-action.active {
|
||||||
|
background: var(--interactive-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-launch-form {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.65rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-launch-form label {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.25rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-launch-form input,
|
||||||
|
.worker-launch-form select,
|
||||||
|
.worker-launch-form textarea {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 0.55rem;
|
||||||
|
background: var(--bg-raised);
|
||||||
|
color: var(--text-strong);
|
||||||
|
padding: 0.45rem 0.55rem;
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-launch-form textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-launch-form button {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0.6rem;
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--bg);
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-launch-form button:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
.worker-new-page {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-5);
|
||||||
|
max-width: 68rem;
|
||||||
|
}
|
||||||
|
.worker-new-page-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.worker-new-page-header h1,
|
||||||
|
.worker-new-page-header p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.worker-new-page-header h1 {
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||||||
|
line-height: 1.05;
|
||||||
|
}
|
||||||
|
.worker-new-page-header p:not(.eyebrow) {
|
||||||
|
margin-top: var(--space-2);
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.worker-launch-form {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-5);
|
||||||
|
max-width: 48rem;
|
||||||
|
}
|
||||||
|
.worker-form-section {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.worker-form-section h2 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.worker-launch-sentence {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.worker-inline-select {
|
||||||
|
width: auto;
|
||||||
|
min-width: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.worker-inline-select.wd-select {
|
||||||
|
min-width: 20rem;
|
||||||
|
}
|
||||||
|
.new-working-directory-panel {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-3);
|
||||||
|
padding-left: var(--space-3);
|
||||||
|
}
|
||||||
|
.new-working-directory-panel h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.new-working-directory-fields,
|
||||||
|
.worker-detail-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.worker-new-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.secondary-link {
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.secondary-link:hover,
|
||||||
|
.secondary-link:focus-visible {
|
||||||
|
color: var(--text-strong);
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.worker-launch-sentence {
|
||||||
|
align-items: stretch;
|
||||||
|
flex-direction: column;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
.worker-inline-select,
|
||||||
|
.worker-inline-select.wd-select {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.new-working-directory-fields,
|
||||||
|
.worker-detail-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.worker-submit-error {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
.worker-submit-error p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.worker-error-diagnostics {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
margin: 0;
|
||||||
|
padding-left: var(--space-4);
|
||||||
|
}
|
||||||
|
.worker-error-diagnostics li {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.worker-error-diagnostics li.error {
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
.worker-error-diagnostics strong {
|
||||||
|
color: inherit;
|
||||||
|
font-weight: 750;
|
||||||
|
}
|
||||||
|
.worker-error-diagnostics span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
299
web/workspace/src/lib/workspace/styles/workspace-pages.css
Normal file
299
web/workspace/src/lib/workspace/styles/workspace-pages.css
Normal file
|
|
@ -0,0 +1,299 @@
|
||||||
|
@layer reset, tokens, base, layout, components;
|
||||||
|
@layer components {
|
||||||
|
.workspace-actions {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.workspace-action-card {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
padding: var(--space-4);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-card);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.workspace-action-card:hover,
|
||||||
|
.workspace-action-card:focus-visible {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
.workspace-action-card span,
|
||||||
|
.workspace-action-card small {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.workspace-action-card span {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
.workspace-action-card strong {
|
||||||
|
color: var(--text-strong);
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.workspace-actions {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.runtime-card {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.ticket-list,
|
||||||
|
.objective-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
}
|
||||||
|
.ticket-row,
|
||||||
|
.objective-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) max-content;
|
||||||
|
align-items: start;
|
||||||
|
gap: var(--space-4);
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
border-radius: var(--radius-panel);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background-color 140ms ease;
|
||||||
|
}
|
||||||
|
.ticket-row:hover,
|
||||||
|
.ticket-row:focus-visible,
|
||||||
|
.objective-row:hover,
|
||||||
|
.objective-row:focus-visible {
|
||||||
|
background: var(--interactive-hover);
|
||||||
|
}
|
||||||
|
.ticket-row.selected,
|
||||||
|
.objective-row.selected {
|
||||||
|
background: var(--interactive-selected);
|
||||||
|
}
|
||||||
|
.ticket-row.selected .ticket-title,
|
||||||
|
.objective-row.selected .objective-title {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.ticket-main,
|
||||||
|
.objective-main {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.ticket-title-row,
|
||||||
|
.objective-title-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: var(--space-2);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.ticket-title,
|
||||||
|
.objective-title {
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-weight: 700;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.state-pill {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
color: var(--success);
|
||||||
|
font-size: 0.76rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.ticket-summary,
|
||||||
|
.objective-summary {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.88rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.ticket-meta,
|
||||||
|
.objective-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: var(--space-2);
|
||||||
|
color: var(--text-faint);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
line-height: 1.35;
|
||||||
|
text-align: right;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.ticket-row,
|
||||||
|
.objective-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
.ticket-meta,
|
||||||
|
.objective-meta {
|
||||||
|
justify-content: flex-start;
|
||||||
|
text-align: left;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.runtime-heading,
|
||||||
|
.detail-heading {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-3);
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
|
}
|
||||||
|
.runtime-heading span {
|
||||||
|
color: var(--success);
|
||||||
|
}
|
||||||
|
.runtime-heading span.warn {
|
||||||
|
color: var(--warning);
|
||||||
|
}
|
||||||
|
.detail-heading.compact {
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
.detail-heading h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.detail-heading span {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
.ticket-detail-grid {
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.risk-flags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.risk-flags span,
|
||||||
|
.warning-pill {
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.18rem 0.55rem;
|
||||||
|
background: var(--bg-subtle);
|
||||||
|
color: var(--warning);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.ticket-body pre {
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: var(--space-4);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-panel);
|
||||||
|
background: var(--bg-raised);
|
||||||
|
color: var(--text);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
dl {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
dl > div {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(6.5rem, 10rem) minmax(0, 1fr);
|
||||||
|
align-items: baseline;
|
||||||
|
gap: var(--space-3);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
dt {
|
||||||
|
color: var(--text-faint);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
min-width: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
dd small {
|
||||||
|
display: inline;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: var(--space-2);
|
||||||
|
}
|
||||||
|
.table-wrap {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
padding: 10px 8px;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
color: var(--text-faint);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.page-header-row,
|
||||||
|
.workers-page-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.page-header-row h1,
|
||||||
|
.page-header-row p,
|
||||||
|
.workers-page-header h1,
|
||||||
|
.workers-page-header p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.page-header-row h1,
|
||||||
|
.workers-page-header h1 {
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||||||
|
line-height: 1.05;
|
||||||
|
}
|
||||||
|
.page-header-row p:not(.breadcrumb),
|
||||||
|
.workers-page-header p {
|
||||||
|
margin-top: var(--space-2);
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.breadcrumb {
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.breadcrumb a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.runtimes-page,
|
||||||
|
.workdirs-page,
|
||||||
|
.workers-page {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.workers-table-wrap {
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.workers-table td small {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.diagnostics {
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
}
|
||||||
|
.diagnostics li {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
|
}
|
||||||
|
.record-body {
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: var(--space-4) 0 0;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
color: var(--text);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
logout,
|
logout,
|
||||||
registerPasskey,
|
registerPasskey,
|
||||||
} from '$lib/workspace/auth/api';
|
} from '$lib/workspace/auth/api';
|
||||||
|
import '$lib/workspace/styles/settings.css';
|
||||||
import type { RequestActor } from '$lib/workspace/auth/model';
|
import type { RequestActor } from '$lib/workspace/auth/model';
|
||||||
|
|
||||||
let actor = $state<RequestActor | null>(null);
|
let actor = $state<RequestActor | null>(null);
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
loadWhoami,
|
loadWhoami,
|
||||||
loginWithPasskey,
|
loginWithPasskey,
|
||||||
} from '$lib/workspace/auth/api';
|
} from '$lib/workspace/auth/api';
|
||||||
|
import '$lib/workspace/styles/settings.css';
|
||||||
import type { RequestActor } from '$lib/workspace/auth/model';
|
import type { RequestActor } from '$lib/workspace/auth/model';
|
||||||
|
|
||||||
let actor = $state<RequestActor | null>(null);
|
let actor = $state<RequestActor | null>(null);
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,8 @@
|
||||||
import { page } from '$app/state';
|
import { page } from '$app/state';
|
||||||
import SidebarOverride from '$lib/workspace/sidebar/SidebarOverride.svelte';
|
import SidebarOverride from '$lib/workspace/sidebar/SidebarOverride.svelte';
|
||||||
import WorkspaceSidebar from '$lib/workspace/sidebar/WorkspaceSidebar.svelte';
|
import WorkspaceSidebar from '$lib/workspace/sidebar/WorkspaceSidebar.svelte';
|
||||||
|
import '$lib/workspace/styles/workspace-pages.css';
|
||||||
|
import '$lib/workspace/styles/workers.css';
|
||||||
import type { LayoutProps } from './$types';
|
import type { LayoutProps } from './$types';
|
||||||
|
|
||||||
let { data, children }: LayoutProps = $props();
|
let { data, children }: LayoutProps = $props();
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
import { page } from '$app/state';
|
import { page } from '$app/state';
|
||||||
import { workspaceRoute } from '$lib/workspace/api/http';
|
import { workspaceRoute } from '$lib/workspace/api/http';
|
||||||
import { SETTINGS_SECTIONS, settingsSectionHref } from '$lib/workspace/settings/model';
|
import { SETTINGS_SECTIONS, settingsSectionHref } from '$lib/workspace/settings/model';
|
||||||
|
import '$lib/workspace/styles/settings.css';
|
||||||
import type { LayoutProps } from './$types';
|
import type { LayoutProps } from './$types';
|
||||||
|
|
||||||
let { data, children }: LayoutProps = $props();
|
let { data, children }: LayoutProps = $props();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user