Fix bulk actions, create chats lazily, rework the UI
Seven reported problems.
**Bulk model actions 404'd.** /admin/models/{model_id} was registered
before /admin/models/bulk, and FastAPI matches in registration order, so
"bulk" was parsed as a model id. Moved above the parameterised route,
with a comment saying why, and a regression test.
**Empty chats piled up.** There is now no endpoint that creates one.
"New chat" is a link to /chat, which renders a composer with no row
behind it, and POST /api/chats/start writes the chat together with its
first message. Opening one and walking away leaves nothing.
**Pinning meant two different things.** The picker is now always in the
administrator's position order; pinned models get shortcuts in the chat
sidebar and nothing else. A picker whose order silently differs from the
admin screen is just confusing.
**Model images were missing in chat.** Assistant bubbles now show the
avatar of the model that actually wrote the turn -- which is not always
the model the chat is set to now -- falling back to the LLeMbas mark.
The picker shows it too.
**No global or per-model system prompt.** Three layers now: instance
(Admin -> General), model (Admin -> Models), chat. Precedence, not
concatenation: most specific wins outright. Stacking them reads well in
a settings screen and badly in practice, because two layers that
disagree give the model contradictory instructions and nobody can tell
which is losing. The chat panel shows the inherited prompt as
placeholder text so "leave empty to inherit" is not a guess.
**Alignment and button sizing.** Added --control-h and friends to
tokens.css; every button, input and select takes its height from them,
so a mixed row is flush by construction rather than by per-instance
nudging. Icon buttons are square at that height. Added .btn-row,
.card__header/.card__footer and .grid so pages stop carrying inline
styles, and moved every admin page onto them.
**Settings needed structure.** The user settings page is now tabbed
(Account / Models / Appearance / Security) using radio inputs and
sibling selectors -- no JavaScript, and the browser keeps the chosen tab
across a re-render.
Caught while checking: the chat.css surgery had deleted the attachment,
chip and dropzone rules. Restored, and there is now a check that every
literal class used in a template has a CSS rule.
197 tests, ruff clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaroslav Beneš
@@ -1,27 +1,34 @@
|
||||
/* Administration screens. */
|
||||
/* Settings and administration screens. */
|
||||
|
||||
.admin-scroll {
|
||||
/* --- Page scaffolding ------------------------------------------------------ */
|
||||
.admin-scroll,
|
||||
.tabs__body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-strong) transparent;
|
||||
}
|
||||
|
||||
.page,
|
||||
.admin-page {
|
||||
max-width: 46rem;
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
padding: var(--sp-6) var(--sp-5) var(--sp-12);
|
||||
}
|
||||
|
||||
.admin-lede {
|
||||
.page-header { margin-bottom: var(--sp-6); }
|
||||
.admin-lede,
|
||||
.page-header__lede {
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-relaxed);
|
||||
margin-bottom: var(--sp-6);
|
||||
max-width: 42rem;
|
||||
margin: 0 0 var(--sp-6);
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.admin-section-title {
|
||||
.admin-section-title,
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
@@ -29,6 +36,60 @@
|
||||
margin: var(--sp-8) 0 var(--sp-4);
|
||||
}
|
||||
|
||||
/* --- Tabs ------------------------------------------------------------------
|
||||
Radio inputs plus sibling selectors: no JavaScript, and the browser keeps
|
||||
the chosen tab across a re-render.
|
||||
*/
|
||||
.tabs { display: flex; flex-direction: column; flex: 1; min-height: 0; }
|
||||
|
||||
.tabs__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-1);
|
||||
padding: 0 var(--sp-5);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
flex: none;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.tabs__tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
height: var(--control-h-lg);
|
||||
padding: 0 var(--sp-4);
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: color var(--transition-fast), border-color var(--transition-fast);
|
||||
}
|
||||
.tabs__tab:hover { color: var(--ink); }
|
||||
|
||||
.tabs__panel { display: none; }
|
||||
|
||||
/* Each radio activates its own label and its own panel. Written out because
|
||||
CSS has no way to derive one from the other. */
|
||||
#tab-account:checked ~ label[for="tab-account"],
|
||||
#tab-models:checked ~ label[for="tab-models"],
|
||||
#tab-appearance:checked ~ label[for="tab-appearance"],
|
||||
#tab-security:checked ~ label[for="tab-security"] {
|
||||
color: var(--ink);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
.tabs__bar:has(#tab-account:checked) ~ .tabs__body [data-tab="tab-account"],
|
||||
.tabs__bar:has(#tab-models:checked) ~ .tabs__body [data-tab="tab-models"],
|
||||
.tabs__bar:has(#tab-appearance:checked) ~ .tabs__body [data-tab="tab-appearance"],
|
||||
.tabs__bar:has(#tab-security:checked) ~ .tabs__body [data-tab="tab-security"] {
|
||||
display: block;
|
||||
}
|
||||
.tabs__tab:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
|
||||
/* --- Cards ----------------------------------------------------------------- */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
@@ -36,27 +97,21 @@
|
||||
padding: var(--sp-5);
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
.card:last-child { margin-bottom: 0; }
|
||||
.card__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
font-size: var(--text-md);
|
||||
margin-bottom: var(--sp-4);
|
||||
margin-bottom: var(--sp-2);
|
||||
}
|
||||
|
||||
.form-grid { display: block; }
|
||||
.form-grid .field:last-of-type { margin-bottom: 0; }
|
||||
.field--actions { margin-top: var(--sp-5); margin-bottom: 0; }
|
||||
|
||||
.connection__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
.card__lede {
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--sp-4);
|
||||
flex-wrap: wrap;
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
.connection__footer {
|
||||
.card__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -66,8 +121,36 @@
|
||||
border-top: 1px solid var(--border);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
margin-bottom: var(--sp-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Reachable status at a glance: green working, red errored, grey disabled. */
|
||||
/* Legacy aliases so existing admin templates keep their spacing. */
|
||||
.form-grid { display: block; }
|
||||
.connection__head { display: flex; align-items: center; justify-content: space-between;
|
||||
gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
|
||||
.connection__footer { display: flex; align-items: center; justify-content: space-between;
|
||||
gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4);
|
||||
border-top: 1px solid var(--border); flex-wrap: wrap; }
|
||||
.field--actions { margin-top: var(--sp-5); margin-bottom: 0; }
|
||||
|
||||
/* --- Definition lists ------------------------------------------------------ */
|
||||
.detail-list {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(6rem, auto) 1fr;
|
||||
gap: var(--sp-2) var(--sp-4);
|
||||
margin: 0;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.detail-list dt { color: var(--ink-muted); font-weight: 500; }
|
||||
.detail-list dd { margin: 0; }
|
||||
|
||||
/* --- Status ---------------------------------------------------------------- */
|
||||
.status-dot {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
@@ -79,44 +162,25 @@
|
||||
.status-dot.is-bad { background: var(--danger); }
|
||||
.status-dot.is-off { background: var(--ink-faint); }
|
||||
|
||||
.model-list { list-style: none; margin: 0; padding: 0; }
|
||||
.model-list__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-2) 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.model-list__item:last-child { border-bottom: 0; }
|
||||
.model-list__id {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-item.is-disabled {
|
||||
opacity: 0.45;
|
||||
cursor: default;
|
||||
}
|
||||
.nav-item.is-disabled:hover { background: none; color: var(--ink-muted); }
|
||||
|
||||
/* --- Model list ----------------------------------------------------------- */
|
||||
/* --- Model list ------------------------------------------------------------ */
|
||||
.bulk-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
flex-wrap: wrap;
|
||||
padding: var(--sp-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface);
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
.bulk-bar .model-rows { flex-basis: 100%; margin-top: var(--sp-3); }
|
||||
.bulk-bar__label { font-size: var(--text-sm); color: var(--ink-muted); margin-right: var(--sp-1); }
|
||||
|
||||
.model-rows {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--surface);
|
||||
}
|
||||
.model-row {
|
||||
display: flex;
|
||||
@@ -124,31 +188,43 @@
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-3);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
.model-row:last-child { border-bottom: 0; }
|
||||
.model-row.is-off { opacity: 0.55; }
|
||||
.model-row.is-off { opacity: 0.5; }
|
||||
.model-row__check { accent-color: var(--accent); width: 1rem; height: 1rem; flex: none; }
|
||||
.model-row__avatar { flex: none; }
|
||||
.model-row__avatar { flex: none; width: 2rem; height: 2rem; }
|
||||
.model-row__main { flex: 1; min-width: 0; }
|
||||
.model-row__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
.model-row__id {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink-muted);
|
||||
color: var(--ink-faint);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
.model-row__actions { display: flex; gap: var(--sp-1); flex: none; align-items: center; }
|
||||
.model-row__actions { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
|
||||
|
||||
/* --- Permission and checkbox grids ---------------------------------------- */
|
||||
.model-list { list-style: none; margin: 0; padding: 0; }
|
||||
.model-list__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-3) 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.model-list__item:first-child { padding-top: 0; }
|
||||
.model-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
|
||||
|
||||
/* --- Permission grids ------------------------------------------------------ */
|
||||
.checkbox-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -159,26 +235,52 @@
|
||||
|
||||
.perm-row {
|
||||
align-items: flex-start;
|
||||
padding: var(--sp-2) 0;
|
||||
padding: var(--sp-3) 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.perm-row:last-child { border-bottom: 0; }
|
||||
.perm-row input { margin-top: 0.2rem; }
|
||||
.perm-row input { margin-top: 0.15rem; }
|
||||
.perm-row__desc {
|
||||
display: block;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink-faint);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading-normal);
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.input--file {
|
||||
padding: 0.35rem;
|
||||
.perm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
|
||||
.perm-list__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.perm-list__state {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--surface-active);
|
||||
color: var(--ink-faint);
|
||||
flex: none;
|
||||
}
|
||||
.perm-list__state.is-on { background: var(--success-soft); color: var(--success); }
|
||||
|
||||
/* --- Misc ------------------------------------------------------------------ */
|
||||
.input--file {
|
||||
height: auto;
|
||||
padding: 0.35rem;
|
||||
font-size: var(--text-xs);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.field__hint code {
|
||||
.nav-item.is-disabled { opacity: 0.4; cursor: default; }
|
||||
.nav-item.is-disabled:hover { background: none; color: var(--ink-muted); }
|
||||
|
||||
.field__hint code,
|
||||
.card__lede code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.92em;
|
||||
padding: 0.05em 0.3em;
|
||||
|
||||
@@ -84,29 +84,37 @@ button, input, textarea, select {
|
||||
/* The leaf is a filled silhouette, not a stroked pictogram. */
|
||||
.icon--leaf { fill: currentColor; stroke: none; }
|
||||
|
||||
/* --- Buttons -------------------------------------------------------------- */
|
||||
/* --- Buttons ---------------------------------------------------------------
|
||||
Every variant is the same height and vertically centres its contents, so a
|
||||
row of mixed buttons lines up without per-instance nudging. Icon buttons are
|
||||
square at that height rather than a different shape.
|
||||
*/
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--sp-2);
|
||||
padding: 0.5rem 0.9rem;
|
||||
height: var(--control-h);
|
||||
padding: 0 var(--control-px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface-raised);
|
||||
color: var(--ink);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
transition: background var(--transition-fast), border-color var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
background: var(--surface-hover);
|
||||
border-color: var(--border-strong);
|
||||
color: var(--ink);
|
||||
}
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
|
||||
.btn--primary {
|
||||
background: var(--accent);
|
||||
@@ -116,37 +124,58 @@ button, input, textarea, select {
|
||||
.btn--primary:hover:not(:disabled) {
|
||||
background: var(--accent-hover);
|
||||
border-color: var(--accent-hover);
|
||||
color: var(--accent-ink);
|
||||
}
|
||||
|
||||
.btn--danger { color: var(--danger); border-color: var(--border); }
|
||||
.btn--danger { color: var(--danger); }
|
||||
.btn--danger:hover:not(:disabled) {
|
||||
background: var(--danger-soft);
|
||||
border-color: var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.btn--ghost { background: transparent; border-color: transparent; }
|
||||
.btn--ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: transparent; }
|
||||
|
||||
/* Square, and the same height as everything beside it. */
|
||||
.btn--icon {
|
||||
padding: 0.4rem;
|
||||
border-radius: var(--radius);
|
||||
width: var(--control-h);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.btn--icon:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
|
||||
.btn--icon.btn--primary {
|
||||
color: var(--accent-ink);
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn--sm { height: var(--control-h-sm); padding: 0 var(--control-px-sm); font-size: var(--text-xs); }
|
||||
.btn--sm.btn--icon { width: var(--control-h-sm); padding: 0; }
|
||||
.btn--lg { height: var(--control-h-lg); padding: 0 var(--sp-5); font-size: var(--text-base); }
|
||||
|
||||
.btn--block { width: 100%; }
|
||||
.btn--sm { padding: 0.3rem 0.6rem; font-size: var(--text-xs); }
|
||||
.btn--grow { flex: 1; }
|
||||
|
||||
/* --- Forms ---------------------------------------------------------------- */
|
||||
/* Rows of buttons: gap and alignment in one place, not per instance. */
|
||||
.btn-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
|
||||
.btn-row--end { justify-content: flex-end; }
|
||||
.spacer { flex: 1; }
|
||||
|
||||
/* --- Forms -----------------------------------------------------------------
|
||||
Inputs share the button height, so a control row is flush by construction.
|
||||
*/
|
||||
.field { margin-bottom: var(--sp-4); }
|
||||
.field:last-child { margin-bottom: 0; }
|
||||
|
||||
.field__label {
|
||||
display: block;
|
||||
margin-bottom: var(--sp-2);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--ink-muted);
|
||||
color: var(--ink);
|
||||
}
|
||||
.field__hint {
|
||||
margin-top: var(--sp-2);
|
||||
@@ -156,17 +185,31 @@ button, input, textarea, select {
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea,
|
||||
.select {
|
||||
width: 100%;
|
||||
padding: 0.55rem 0.7rem;
|
||||
height: var(--control-h);
|
||||
padding: 0 var(--control-px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-sunken);
|
||||
color: var(--ink);
|
||||
font-size: var(--text-base);
|
||||
font-size: var(--text-sm);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
.textarea {
|
||||
width: 100%;
|
||||
padding: var(--sp-2) var(--control-px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-sunken);
|
||||
color: var(--ink);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-normal);
|
||||
resize: vertical;
|
||||
min-height: 5rem;
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.textarea:focus,
|
||||
.select:focus {
|
||||
@@ -175,8 +218,29 @@ button, input, textarea, select {
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
|
||||
.textarea { resize: vertical; min-height: 5rem; line-height: var(--leading-normal); }
|
||||
.input--mono { font-family: var(--font-mono); font-size: var(--text-sm); }
|
||||
.input--mono, .textarea--mono { font-family: var(--font-mono); font-size: var(--text-xs); }
|
||||
|
||||
.select {
|
||||
appearance: none;
|
||||
padding-right: var(--sp-8);
|
||||
/* Chevron drawn in CSS, so no icon font and no extra element. */
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, currentColor 50%),
|
||||
linear-gradient(135deg, currentColor 50%, transparent 50%);
|
||||
background-position: right 1.1rem center, right 0.85rem center;
|
||||
background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Sits inside a composed control that draws its own frame (the model picker). */
|
||||
.select--bare {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
max-width: 14rem;
|
||||
padding-left: var(--sp-1);
|
||||
}
|
||||
.select--bare:focus { box-shadow: none; }
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
@@ -184,8 +248,20 @@ button, input, textarea, select {
|
||||
gap: var(--sp-2);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
line-height: var(--leading-normal);
|
||||
}
|
||||
.checkbox input { accent-color: var(--accent); width: 1rem; height: 1rem; }
|
||||
.checkbox input {
|
||||
accent-color: var(--accent);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Multi-column form layout, one definition. */
|
||||
.grid { display: grid; gap: var(--sp-4); }
|
||||
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
|
||||
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
|
||||
|
||||
/* --- Alerts --------------------------------------------------------------- */
|
||||
.alert {
|
||||
@@ -220,12 +296,8 @@ button, input, textarea, select {
|
||||
.badge--success { background: var(--success-soft); color: var(--success); }
|
||||
.badge--danger { background: var(--danger-soft); color: var(--danger); }
|
||||
|
||||
/* --- Application shell ---------------------------------------------------- */
|
||||
.shell {
|
||||
display: flex;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* --- Application shell ----------------------------------------------------- */
|
||||
.shell { display: flex; height: 100dvh; overflow: hidden; }
|
||||
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
@@ -234,14 +306,13 @@ button, input, textarea, select {
|
||||
flex-direction: column;
|
||||
background: var(--bg-sunken);
|
||||
border-right: 1px solid var(--border);
|
||||
transition: margin-left var(--transition);
|
||||
min-height: 0;
|
||||
}
|
||||
.sidebar[hidden] { display: none; }
|
||||
|
||||
.sidebar__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
height: var(--header-height);
|
||||
padding: 0 var(--sp-3);
|
||||
flex: none;
|
||||
@@ -259,13 +330,20 @@ button, input, textarea, select {
|
||||
min-width: 0;
|
||||
}
|
||||
.sidebar__brand:hover { color: var(--ink); }
|
||||
.sidebar__brand .brand-mark { width: 1.6rem; height: 1.6rem; flex: none; }
|
||||
.sidebar__brand .brand-mark { width: 1.65rem; height: 1.65rem; flex: none; }
|
||||
.sidebar__brand .brand-llm { color: var(--gold); }
|
||||
|
||||
.sidebar__actions { padding: 0 var(--sp-3) var(--sp-3); display: flex; gap: var(--sp-2); }
|
||||
.sidebar__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
padding: 0 var(--sp-3) var(--sp-3);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.sidebar__scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0 var(--sp-2) var(--sp-3);
|
||||
scrollbar-width: thin;
|
||||
@@ -276,13 +354,18 @@ button, input, textarea, select {
|
||||
flex: none;
|
||||
border-top: 1px solid var(--border);
|
||||
padding: var(--sp-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-1);
|
||||
}
|
||||
.sidebar__tools { display: flex; align-items: center; gap: var(--sp-1); }
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
@@ -306,10 +389,52 @@ button, input, textarea, select {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.topbar__spacer { flex: 1; }
|
||||
.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
|
||||
|
||||
/* --- Sidebar navigation --------------------------------------------------- */
|
||||
/* The model picker: an avatar and a select sharing one frame, so it reads as a
|
||||
single control rather than two things that happen to be adjacent. */
|
||||
.model-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
height: var(--control-h);
|
||||
padding: 0 var(--sp-1) 0 var(--sp-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
.model-select:hover { border-color: var(--border-strong); }
|
||||
.model-select:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.model-select__avatar { width: 1.4rem; height: 1.4rem; border-radius: var(--radius-sm); }
|
||||
|
||||
/* Collapsible settings panel, shared by chat settings and anything like it. */
|
||||
.panel {
|
||||
flex: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-sunken);
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.panel__inner {
|
||||
max-width: var(--thread-max-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--sp-5);
|
||||
}
|
||||
.panel__note {
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--text-sm);
|
||||
font-style: italic;
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
|
||||
/* --- Sidebar navigation ---------------------------------------------------- */
|
||||
.nav-group { margin-bottom: var(--sp-4); }
|
||||
.nav-group:last-child { margin-bottom: 0; }
|
||||
.nav-group__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -326,7 +451,8 @@ button, input, textarea, select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
padding: 0.4rem var(--sp-2);
|
||||
min-height: var(--control-h);
|
||||
padding: 0 var(--sp-2);
|
||||
border-radius: var(--radius);
|
||||
color: var(--ink-muted);
|
||||
text-decoration: none;
|
||||
@@ -335,7 +461,11 @@ button, input, textarea, select {
|
||||
position: relative;
|
||||
}
|
||||
.nav-item:hover { background: var(--surface-hover); color: var(--ink); }
|
||||
.nav-item.is-active { background: var(--surface-active); color: var(--ink); font-weight: 500; }
|
||||
.nav-item.is-active {
|
||||
background: var(--surface-active);
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-item__label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -343,11 +473,16 @@ button, input, textarea, select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
/* Row actions stay hidden until the row is hovered or focused within, so the
|
||||
list reads calmly, but they remain keyboard reachable. */
|
||||
.nav-item__avatar { width: 1.4rem; height: 1.4rem; border-radius: var(--radius-sm); flex: none; }
|
||||
.nav-item--model .nav-item__label { font-weight: 500; }
|
||||
|
||||
/* Row actions stay hidden until hover or focus, so the list reads calmly while
|
||||
remaining keyboard reachable. */
|
||||
.nav-item__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
flex: none;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
@@ -355,7 +490,8 @@ button, input, textarea, select {
|
||||
.nav-item:focus-within .nav-item__actions { opacity: 1; }
|
||||
|
||||
.nav-empty {
|
||||
padding: var(--sp-3) var(--sp-2);
|
||||
padding: var(--sp-2);
|
||||
margin: 0;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink-faint);
|
||||
font-style: italic;
|
||||
|
||||
@@ -48,6 +48,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
.msg__mark { width: 2rem; height: 2rem; }
|
||||
.msg__avatar { width: 2rem; height: 2rem; border-radius: var(--radius); }
|
||||
.msg__initial {
|
||||
width: 2rem; height: 2rem;
|
||||
display: grid;
|
||||
@@ -310,11 +311,10 @@
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
.composer__inner { max-width: var(--thread-max-width); margin: 0 auto; }
|
||||
.composer__form {
|
||||
max-width: var(--thread-max-width);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: var(--sp-2);
|
||||
gap: var(--sp-1);
|
||||
align-items: flex-end;
|
||||
padding: var(--sp-2);
|
||||
border: 1px solid var(--border);
|
||||
@@ -322,37 +322,33 @@
|
||||
background: var(--surface);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
/* Attach and send are the same size and sit on the same baseline as the last
|
||||
line of the textarea, so the control row reads as one object. */
|
||||
.composer__btn { flex: none; align-self: flex-end; border-radius: var(--radius-full); }
|
||||
.composer__form:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.composer__input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
resize: none;
|
||||
padding: var(--sp-2);
|
||||
padding: 0.5rem var(--sp-2);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
max-height: 20rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
.composer__input:focus { outline: none; }
|
||||
.composer__send { border-radius: var(--radius-full); padding: 0.55rem 0.7rem; }
|
||||
.composer__hint {
|
||||
max-width: var(--thread-max-width);
|
||||
margin: var(--sp-2) auto 0;
|
||||
margin: var(--sp-2) 0 0;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink-faint);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.select--compact {
|
||||
width: auto;
|
||||
max-width: 16rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* --- Folders -------------------------------------------------------------- */
|
||||
.folder__row { padding-right: var(--sp-1); }
|
||||
.folder__toggle {
|
||||
@@ -386,38 +382,11 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* --- Chat settings panel -------------------------------------------------- */
|
||||
.chat-settings {
|
||||
flex: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-sunken);
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.chat-settings__inner {
|
||||
max-width: var(--thread-max-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--sp-4) var(--sp-5);
|
||||
}
|
||||
.chat-settings__note {
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--text-sm);
|
||||
font-style: italic;
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
.chat-settings__params {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
.chat-settings__params .field { margin-bottom: 0; }
|
||||
|
||||
/* --- Attachment chips (composer) ------------------------------------------ */
|
||||
.composer { position: relative; }
|
||||
|
||||
.composer__attachments {
|
||||
max-width: var(--thread-max-width);
|
||||
margin: 0 auto var(--sp-2);
|
||||
margin: 0 0 var(--sp-2);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-2);
|
||||
@@ -451,8 +420,6 @@
|
||||
.chip__meta { font-size: var(--text-xs); color: var(--ink-faint); }
|
||||
.chip__warning { font-size: var(--text-xs); color: var(--danger); }
|
||||
|
||||
.composer__attach { flex: none; align-self: flex-end; }
|
||||
|
||||
/* --- Drag and drop -------------------------------------------------------- */
|
||||
.dropzone-overlay {
|
||||
position: absolute;
|
||||
@@ -534,7 +501,9 @@
|
||||
}
|
||||
|
||||
/* --- Theme toggle --------------------------------------------------------- */
|
||||
/* Only the icon for the theme you would switch TO is shown. */
|
||||
/* Only the icon for the theme you would switch TO is shown. Both live in the
|
||||
same button, so the wrapper must not add a line box of its own. */
|
||||
.theme-icon { display: flex; }
|
||||
:root[data-theme="moria"] .theme-icon--dark { display: none; }
|
||||
:root[data-theme="shire"] .theme-icon--light { display: none; }
|
||||
|
||||
|
||||
@@ -51,10 +51,22 @@
|
||||
--radius-xl: 18px;
|
||||
--radius-full: 999px;
|
||||
|
||||
/*
|
||||
--- Controls ----------------------------------------------------------
|
||||
Every button, input and select resolves its height from these. That is the
|
||||
whole reason things line up: a row of mixed controls has one height, not
|
||||
whatever each element's padding and font happened to add up to.
|
||||
*/
|
||||
--control-h: 2.25rem;
|
||||
--control-h-sm: 1.75rem;
|
||||
--control-h-lg: 2.75rem;
|
||||
--control-px: 0.75rem;
|
||||
--control-px-sm: 0.5rem;
|
||||
|
||||
/* --- Layout ----------------------------------------------------------- */
|
||||
--sidebar-width: 17rem;
|
||||
--sidebar-width: 17.5rem;
|
||||
--thread-max-width: 48rem;
|
||||
--header-height: 3.25rem;
|
||||
--header-height: 3.5rem;
|
||||
|
||||
--transition-fast: 120ms ease;
|
||||
--transition: 200ms ease;
|
||||
|
||||
@@ -211,6 +211,20 @@
|
||||
event.preventDefault();
|
||||
var source = document.getElementById(copy.dataset.copy);
|
||||
if (source) copyText(source.textContent.trim(), copy);
|
||||
return;
|
||||
}
|
||||
|
||||
/* Show/hide a panel by selector, so templates do not each carry their own
|
||||
inline toggle script. */
|
||||
var toggle = event.target.closest("[data-toggle]");
|
||||
if (toggle) {
|
||||
event.preventDefault();
|
||||
var panel = document.querySelector(toggle.dataset.toggle);
|
||||
if (!panel) return;
|
||||
var nowOpen = panel.hasAttribute("hidden");
|
||||
panel.toggleAttribute("hidden");
|
||||
toggle.setAttribute("aria-expanded", nowOpen ? "true" : "false");
|
||||
toggle.classList.toggle("is-active", nowOpen);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user