Wave 2: form cleanups from the site comments, plus localization, project switcher and global search

Site comments (8/3)
- BIM card: LOD removed, IFF # added next to the coordination status, and required
  once that status is "Signed off (IFF)" — an unnumbered sign-off isn't traceable.
  A LOD already stored on a package is preserved and shown as legacy, not blanked.
- The blue "from SOP types" subtext under a field is now a SOP chip on the label
  with the detail in a tooltip. The chip stays visible rather than hover-only:
  field tablets have no hover, and "this came from the SOP" is the part that
  matters. The hint elements stay in the DOM (hidden) so the code writing to them
  keeps working; an observer mirrors their text into the tooltip.
- Specification Section is no longer typed per package. Each WP type carries a
  spec section on the SOP; the field is read-only in the Creator and follows the
  type, with the SOP's spec folder linked underneath. This reads both spec
  comments as one intent — stop typing it, derive it.
- Assignees and Distribution are multi-selects over the SOP project team, showing
  each person's job function, with the CM pre-added to Distribution (removable per
  package) and a free-text option for people with no account. The stored display
  strings are unchanged so print/export/dashboard keep working; account ids ride
  alongside for the notification work in wave 3.

Localization + time
- Per-user locale/timezone (Language & time in the user menu), an app-wide default
  in the admin console, then the browser. Timezones are validated against the
  server's zoneinfo and the picker is fed from it. Calendar dates are formatted
  from their parts so a due date never reads a day early in another zone.
- Every displayed timestamp now goes through the shared helpers.

Top-bar chrome
- Project switcher beside the logo and a centered global search, injected into
  either generation of top bar; skipped in an iframe so the embedded Creator
  doesn't get a second one. Ctrl/Cmd-K focuses search.
- GET /api/search covers work packages, projects and SOPs, scoped to the caller's
  projects, hiding archived packages, with LIKE wildcards escaped.

Fixed along the way: showForm() cleared every card's inline display, which undid
applyKind() — so the Package Type and BIM cards reappeared on an install-only
project. Split out applyKindVisibility() and re-apply it there.

Verified: 100 API checks on a fresh database (44 permissions + 22 password reset +
34 search/localization), 24 driven UI checks against the real Creator page in
headless Chrome (SOP chips, both people pickers, spec auto-fill, critical tags,
BIM suppression), and the chrome harness on both bar styles. Screenshots reviewed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-03 15:17:51 -07:00
parent 79b0e955b4
commit 61d1cf4bff
21 changed files with 1445 additions and 36 deletions

View File

@@ -631,6 +631,59 @@
.wp-nav-reopen { display:none !important; }
}
/* ── SOP-inherited marker ───────────────────────────────────────────────────
The "from SOP types" subtext used to sit under the field. It's now a small
chip on the label with the detail in a hover tooltip (site comment 8/3).
The chip stays VISIBLE rather than hover-only: on a field tablet there is no
hover, and "this value came from the SOP" is the part people need to see. */
.field-hint.sop-hint { display: none; }
.sop-chip { display:inline-block; margin-left:6px; padding:0 6px; border-radius:9px;
background:var(--accent-dim); color:var(--accent); border:1px solid #b9d2fb;
font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
vertical-align:middle; cursor:help; position:relative; }
.sop-chip::after { content:attr(data-tip); position:absolute; bottom:135%; left:50%;
transform:translateX(-50%); background:#161616; color:#fff; padding:7px 10px; font-size:12px;
font-weight:400; letter-spacing:0; text-transform:none; line-height:1.4; white-space:normal;
width:max-content; max-width:260px; text-align:left; z-index:9999; opacity:0;
pointer-events:none; transition:opacity .12s; box-shadow:0 4px 14px rgba(20,30,50,.22); }
.sop-chip::before { content:''; position:absolute; bottom:135%; left:50%;
transform:translate(-50%,95%); border:5px solid transparent; border-top-color:#161616;
opacity:0; transition:opacity .12s; z-index:9999; }
.sop-chip:hover::after, .sop-chip:hover::before,
.sop-chip:focus::after, .sop-chip:focus::before { opacity:1; }
/* ── people picker (Assignees / Distribution) ───────────────────────────────
Multi-select over the SOP project team instead of a free-text list. */
.people-pick { border:1px solid var(--border-strong); border-radius:4px; background:var(--surface);
padding:5px 6px; min-height:38px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.people-pick:focus-within { outline:2px solid var(--accent); outline-offset:-2px; }
.pp-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 6px 2px 8px;
background:var(--surface2); border:1px solid var(--border); border-radius:12px;
font-size:12px; max-width:100%; }
.pp-chip.pp-locked { background:var(--accent-dim); border-color:#b9d2fb; color:var(--accent); }
.pp-chip .pp-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-chip .pp-x { background:none; border:0; cursor:pointer; color:var(--text-muted);
font-size:12px; line-height:1; padding:0 1px; }
.pp-chip .pp-x:hover { color:var(--red); }
.pp-add { position:relative; }
.pp-add-btn { background:none; border:1px dashed var(--border-strong); border-radius:12px;
color:var(--text-muted); font:inherit; font-size:12px; padding:2px 9px; cursor:pointer; }
.pp-add-btn:hover { border-color:var(--accent); color:var(--accent); }
.pp-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:60; min-width:270px;
max-height:300px; overflow-y:auto; background:var(--surface); border:1px solid var(--border-strong);
box-shadow:0 8px 24px rgba(20,30,50,.18); border-radius:4px; padding:6px 0; }
.pp-menu[hidden] { display:none; }
.pp-group { font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
color:var(--text-dim); padding:7px 10px 3px; }
.pp-opt { display:flex; align-items:center; gap:8px; padding:5px 10px; font-size:13px; cursor:pointer; }
.pp-opt:hover { background:var(--surface2); }
.pp-opt input { width:15px; height:15px; cursor:pointer; }
.pp-opt .pp-role { color:var(--text-dim); font-size:11.5px; }
.pp-free { border-top:1px solid var(--border); margin-top:5px; padding:7px 10px 3px; }
.pp-free input { width:100%; padding:5px 7px; font:inherit; font-size:12.5px;
border:1px solid var(--border); border-radius:3px; }
.pp-free .field-hint { margin-top:4px; }
/* Critical constraint marker (from the SOP) */
.crit-tag { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px; font-size:10px;
font-weight:700; letter-spacing:.02em; color:var(--red); background:var(--red-dim);