n.siegfried
928ab8c900
Three things asked for together, plus the migration they share (a7c31f9e5b02 —
additive, with database defaults for existing rows, so unlike the users.role
rewrite it is safe under a code-only rollback).
ARCHIVE A PROJECT. A finished job leaves every picker, switcher and search, and
freezes read-only, without losing anything. Hiding is free: GET /api/projects
defaults to archived=exclude, so the home picker and the app-bar switcher drop it
without either of them changing. Freezing is require_project_writable(), which
every write that lands on a project now goes through — SOP and WP upserts (both
ends, so a package can be moved neither into nor out of an archived job), deletes,
issue, status, WP archive, and comments on its WPs/SOPs. It answers 409, not 403:
nobody lacks a permission, the project's state is the objection, and the browser
outbox in project-data.js retires 4xx ops instead of retrying them against a job
that will never accept them. Unarchive and delete stay allowed on purpose —
unarchive is the one write an archived project must take, and archive-then-delete
is a normal sequence.
DEFAULT MEMBERS ON NEW PROJECTS. users.auto_add_projects / auto_add_role flag the
people who belong on every job, so an admin says it once instead of remembering it
at each project creation. It runs on the is_new branch of upsert_project, which is
the single road into project creation, so the home page, the sample project and the
demo seeder are all covered and an update never re-runs it. Note the interaction
with the existing creator-grant: that row commits first and add_default_members
never overwrites an existing membership, so the creator grant now carries the
creator's own auto_add_role — otherwise someone flagged "Project Admin on every
job" would land as a plain member on the one job they started themselves.
ADMIN CONSOLE. The user table had outgrown .wrap{max-width:860px}: nine columns in
an 860px card meant every cell wrapped, so one user occupied a ~100px band, the
action buttons stacked, and the table spilled outside its own white card. Now
1240px, with wide tables scrolling inside .tscroll so the page itself never scrolls
sideways, and one spacing/control scale across all twelve cards. Truncation hangs
off a span inside the cell rather than max-width on the td, which table-layout:auto
treats as advisory — the usual reason cell ellipsis works in the stylesheet and not
on the page.
Found in review and fixed here rather than later:
- Stored XSS in the new Projects card, reachable by any signed-in user, landing in
an admin's session. The uesc(v).replace(/'/g,"\'") idiom this file already used
in eight places escapes in the wrong order — uesc leaves backslashes alone, so a
stored name containing \' closes the JS string literal and the rest executes.
jsq() does backslash, then quote, then HTML, and all thirteen handler bindings go
through it. The same bug, unescaped entirely, was in the SOP builder's custom
constraint names (escHandlerArg there). Three of seven test payloads escaped the
literal under the old idiom — one of them a plain name ending in a backslash, so
it was breaking buttons for innocent input too.
- _save_comment resolved wp_id and sop_id with if/elif but stored both, so a
payload naming a WP you may touch and a SOP you may not was authorised on the WP
alone and still wrote into the other project's thread. Both are checked now.
- Promoting an account to admin left its default-member flag set but invisible,
ready to take effect again on demotion — cleared, as set_user_auto_add already
does for the role.
smoketest.py and the console's own smoke test both assert the archive round trip:
out of the default list, present with archived=all, writes refused with 409, and
all of it undone by unarchiving.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
238 lines
7.7 KiB
CSS
238 lines
7.7 KiB
CSS
/* ============================================================================
|
|
SHARED APP CHROME — project switcher + global search
|
|
----------------------------------------------------------------------------
|
|
Injected by wp-chrome.js into whichever top bar a page has: the dark UI-shell
|
|
bar (.wp-appbar on index / admin / field) or the older light bars (.header on
|
|
the SOP suite and the WP creator). The two live side by side, so every colour
|
|
here comes from a variable that wp-chrome.js sets per host bar — the markup and
|
|
behaviour are identical on both.
|
|
============================================================================ */
|
|
.wp-chrome {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0; /* lets the search shrink instead of overflowing */
|
|
flex: 1 1 auto;
|
|
}
|
|
/* Light host bar (the two tool pages) */
|
|
.wp-chrome {
|
|
--wpc-fg: #161616;
|
|
--wpc-fg-dim: #525252;
|
|
--wpc-bg: #ffffff;
|
|
--wpc-bg-soft: #f4f4f4;
|
|
--wpc-border: #c6c6c6;
|
|
--wpc-hover: #e8e8e8;
|
|
--wpc-accent: #0f62fe;
|
|
}
|
|
/* Dark host bar (the UI-shell appbar) */
|
|
.wp-chrome[data-bar="dark"] {
|
|
--wpc-fg: #ffffff;
|
|
--wpc-fg-dim: #c6c6c6;
|
|
--wpc-bg: #262626;
|
|
--wpc-bg-soft: #393939;
|
|
--wpc-border: #6f6f6f;
|
|
--wpc-hover: #353535;
|
|
--wpc-accent: #78a9ff;
|
|
}
|
|
|
|
/* ── archived-project banner ──────────────────────────────────────────────── */
|
|
/* Inserted by wp-chrome.js as the top bar's next sibling, so it sits directly
|
|
under the bar in normal flow and can never overlap it or eat its height (the
|
|
bar is sticky; this strip scrolls away under it). `flex: 0 0 auto` is for the
|
|
suite page, whose shell is a flex column — without it the strip would squash.
|
|
Amber tokens are the suite's warning set, same as the sync badge. */
|
|
.wpc-archived {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 9px 16px;
|
|
background: #fdf6dd;
|
|
color: #8e6a00;
|
|
border-bottom: 1px solid #f1c21b;
|
|
border-radius: 0;
|
|
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
font-size: 13.5px;
|
|
line-height: 1.35;
|
|
}
|
|
.wpc-archived-ico { flex: 0 0 auto; font-size: 14px; }
|
|
.wpc-archived-text { min-width: 0; } /* wraps instead of forcing a scrollbar */
|
|
@media (max-width: 620px) {
|
|
.wpc-archived { padding: 8px 12px; font-size: 13px; }
|
|
}
|
|
|
|
/* ── project switcher ─────────────────────────────────────────────────────── */
|
|
.wpc-proj { position: relative; flex: 0 0 auto; }
|
|
.wpc-proj-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
max-width: 280px;
|
|
padding: 5px 10px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
color: var(--wpc-fg);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.wpc-proj-btn:hover { background: var(--wpc-hover); border-color: var(--wpc-border); }
|
|
.wpc-proj-btn[aria-expanded="true"] { background: var(--wpc-hover); border-color: var(--wpc-border); }
|
|
.wpc-proj-labels { min-width: 0; }
|
|
.wpc-proj-kicker {
|
|
display: block;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
color: var(--wpc-fg-dim);
|
|
}
|
|
.wpc-proj-name {
|
|
display: block;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 240px;
|
|
}
|
|
.wpc-caret { flex: 0 0 auto; align-self: flex-end; margin-bottom: 3px; font-size: 10px;
|
|
line-height: 1; color: var(--wpc-fg-dim); }
|
|
|
|
/* ── dropdown / results panel (shared shell) ──────────────────────────────── */
|
|
.wpc-pop {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
z-index: 2000;
|
|
min-width: 320px;
|
|
max-width: min(460px, 92vw);
|
|
max-height: min(70vh, 560px);
|
|
overflow-y: auto;
|
|
background: #fff;
|
|
color: #161616;
|
|
border: 1px solid #e0e0e0;
|
|
box-shadow: 0 8px 28px rgba(20, 30, 50, .22);
|
|
border-radius: 4px;
|
|
}
|
|
.wpc-pop[hidden] { display: none; }
|
|
.wpc-pop-head {
|
|
padding: 9px 12px 6px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: .07em;
|
|
text-transform: uppercase;
|
|
color: #6f6f6f;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
.wpc-item {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: transparent;
|
|
border: 0;
|
|
border-left: 3px solid transparent;
|
|
text-align: left;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
color: #161616;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.wpc-item:hover, .wpc-item.is-active { background: #f4f4f4; }
|
|
.wpc-item.is-current { border-left-color: #0f62fe; background: #edf5ff; }
|
|
.wpc-item-title { display: block; font-weight: 600; }
|
|
.wpc-item-sub { display: block; font-size: 11.5px; color: #6f6f6f; }
|
|
.wpc-item-mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 12px; color: #0f62fe; }
|
|
.wpc-empty { padding: 14px 12px; font-size: 13px; color: #6f6f6f; }
|
|
.wpc-pop-foot {
|
|
padding: 8px 12px;
|
|
border-top: 1px solid #f0f0f0;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.wpc-foot-btn {
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 5px 10px;
|
|
border: 1px solid #c6c6c6;
|
|
background: #fff;
|
|
color: #161616;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.wpc-foot-btn:hover { border-color: #0f62fe; color: #0f62fe; }
|
|
|
|
/* ── global search ────────────────────────────────────────────────────────── */
|
|
/* Centered in the bar: the wrapper takes the free space and centres a capped box,
|
|
which keeps the field mid-screen without absolute positioning (so it can never
|
|
sit on top of the bar's own buttons). */
|
|
.wpc-search {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
}
|
|
.wpc-search-box {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 10px;
|
|
height: 34px;
|
|
background: var(--wpc-bg);
|
|
border: 1px solid var(--wpc-border);
|
|
border-radius: 3px;
|
|
}
|
|
.wpc-search-box:focus-within { outline: 2px solid var(--wpc-accent); outline-offset: -2px; }
|
|
.wpc-search-ico { flex: 0 0 auto; color: var(--wpc-fg-dim); font-size: 13px; }
|
|
.wpc-search-input {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
outline: none;
|
|
color: var(--wpc-fg);
|
|
font: inherit;
|
|
font-size: 13.5px;
|
|
}
|
|
.wpc-search-input::placeholder { color: var(--wpc-fg-dim); }
|
|
.wpc-kbd {
|
|
flex: 0 0 auto;
|
|
font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
|
|
font-size: 10.5px;
|
|
color: var(--wpc-fg-dim);
|
|
border: 1px solid var(--wpc-border);
|
|
border-radius: 3px;
|
|
padding: 1px 5px;
|
|
white-space: nowrap;
|
|
}
|
|
.wpc-search .wpc-pop { left: 50%; transform: translateX(-50%); min-width: min(560px, 92vw); }
|
|
.wpc-clear {
|
|
flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
|
|
color: var(--wpc-fg-dim); font: inherit; font-size: 14px; line-height: 1; padding: 2px 4px;
|
|
}
|
|
.wpc-clear:hover { color: var(--wpc-fg); }
|
|
|
|
/* ── narrow screens ───────────────────────────────────────────────────────── */
|
|
@media (max-width: 900px) {
|
|
.wpc-search-box { max-width: none; }
|
|
.wpc-kbd { display: none; }
|
|
.wpc-proj-btn { max-width: 190px; }
|
|
.wpc-proj-name { max-width: 150px; }
|
|
}
|
|
@media (max-width: 620px) {
|
|
/* Keep the switcher (you must be able to change project) and let the search
|
|
collapse to an icon-width field rather than pushing the bar out of shape. */
|
|
.wpc-proj-kicker { display: none; }
|
|
.wpc-search { flex: 1 1 120px; }
|
|
}
|