n.siegfried/Project-SDE-WP-Suite
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

T5.2 - B3: a first-run empty state, then the picker card comes out

Browse Source 
B3's warning is about ORDER, and it is the whole item: the proposal removes the
project-picker card, and the first-run empty state was built inside it. Remove
the card first and every brand-new account lands on a page whose only
instruction is to choose from a list with nothing in it.

So the empty state was built first, as its own thing rather than a branch inside
a control that is going away, and only then did the card go.

The launcher now shows exactly one of three states:

  no projects at all   what a project is for, the create form already open (it
                       is the only thing to do on this page, so hiding it behind
                       a button is one click of ceremony in front of the only
                       way forward), and the sample offered underneath it
  none chosen          point at the app bar's switcher, which is on every page,
                       plus New project
  one active           the tool cards, as before

Switching moved to the app bar's switcher entirely. Its popover footer used to
read "All projects / new project" and link to index.html - half of that promise
moved into the popover itself and the other half needs a form, so the link now
says New project and carries #new-project, which the launcher opens on.

The create form was rebuilt, so per C1 it ships accessible: a real <form> with
requestSubmit, every input labelled, and its validation inline at the field with
aria-describedby and role="alert" - the same shape T5.8 gives the wizard. That
retires the "Project name is required." alert (index.html 6 -> 5).

  html/index.html    three states, rebuilt create form, picker card removed
  html/wp-chrome.js  popover footer link (one line - it named the card)
  tests/launcher_check.py  new - 58 checks, two seeded databases
  tests/f_items.py   F1 rewritten to drive the controls that replaced the select

Done when
  [x] a brand-new account with zero projects sees a clear path to create one
  [x] the sample project remains discoverable from the empty state
  [x] the picker card is removed only after the empty state ships
  [x] switching projects still works from the header for users who have projects

Two things the probes caught that I would have shipped

  F1 went INCONCLUSIVE, not FAIL. Its probe drove `document.querySelector
  ('select')` on the launcher - the picker card's dropdown. It refused to guess
  rather than reporting a silent pass, which is the behaviour f_items was
  written for. Rewritten to drive both replacements, because they fail
  differently: the switcher RELOADS with ?project=<id>, so its two labels cannot
  drift apart whatever subscribes to what; creating a project changes the active
  project IN PAGE, and that is the interaction F1's mechanism actually applies
  to. It is now the only in-page change on the launcher, so it is the arm that
  matters. Both pass - the bar subscribes through ProjectData.onActiveChange.

  launcher_check reported "no focus ring" on the rebuilt form's inputs. That was
  trap 5 in reverse: without CDP focus emulation the headless document is not
  the focused one, :focus-visible never matches, and every control reports NO
  ring - a false red where a11y_check would get a false green. With emulation on
  they draw 2px --cds-focus from T4.7's app-wide floor.

Verified one at a time
  launcher_check  58/58   new (38 empty-account + 20 populated)
  stepper_check   70/70
  browser_check   71/71
  aggregates      16/16
  a11y            22/22   launcher 29 focusable elements, all >= 3:1
  url_state       23/23
  autosave        34/34
  f_items         F1-F5 FIXED, F6 REPRODUCES (T7.2)

No colour literal added: 0 across all five page sheets and all seven inline
<style> blocks.

Raised, not fixed
  BL-014 updated rather than left stale: two of its four sites (.proj-row select,
  .link-like) went with the picker card, and the third (.proj-form-grid input)
  was measured rather than assumed - it draws T4.7's ring, which post-dates that
  entry. What survives is field.html's .fld-search, which T9.5 should measure the
  same way instead of inheriting the wording.

Question for the PR, per CLAUDE.md: with the picker gone, an account whose only
project is archived sees the choose-a-project prompt plus the archived note, and
the switcher lists nothing. That is honest but bleak. Whether an archived project
should stay switchable read-only is a product call, not an implementation one.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nick Siegfried
2026-08-16 10:24:41 -05:00
parent 5e1f6e75ba
commit 77c043c3db
6 changed files with 714 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
html/index.html
View File

@@ -292,25 +292,38 @@
color: var(--cds-text-primary);
}
/* PROJECT PICKER */
/* PROJECT ENTRY POINTS — B3
The picker card (a "Select a project…" dropdown in its own section) is gone.
Switching projects is the app bar's switcher, which is on every page; the
launcher keeps the two things a dropdown could not do — the first-run empty
state, and creating a project. */
.proj-loading { color: var(--cds-text-secondary); font-style: italic; font-size: 13px; }
.proj-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.proj-row select { flex: 1; min-width: 240px; padding: 0.6rem 0.7rem; font-size: 14px;
border: 1px solid var(--cds-border-strong); background: var(--cds-field); }
.proj-empty { background: var(--cds-ui-01); border: 1px dashed var(--cds-border-strong);
padding: 1.25rem; }
.proj-empty p { margin: 0 0 0.9rem; color: var(--cds-text-secondary); }
.proj-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.proj-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
/* Shown once when the project someone had open turns out to have been archived
rather than deleted — otherwise the picker just silently resets on them. */
rather than deleted — otherwise the launcher just silently resets on them. */
.proj-archived-note { background: var(--wp-status-warning-bg); border: 1px solid var(--cds-support-warning); color: var(--wp-status-warning-text);
padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; font-size: 13px; line-height: 1.5; }
.proj-form { margin-top: 1rem; padding: 1rem; border: 1px solid var(--cds-ui-03); background: var(--cds-ui-01); }
.proj-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem; }
.proj-form-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 12px; font-weight: 600; color: var(--cds-text-secondary); }
.proj-form-grid input { padding: 0.55rem 0.65rem; font-size: 14px; border: 1px solid var(--cds-border-strong); }
.proj-active { margin-top: 0.85rem; font-size: 13px; color: var(--cds-text-primary); }
.link-like { background: none; border: none; color: var(--cds-link-01); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; }
.proj-form-grid input { padding: 0.55rem 0.65rem; font-size: 14px; border: 1px solid var(--cds-border-strong); background: var(--cds-field); }
.proj-form-grid input[aria-invalid="true"] { border-color: var(--cds-support-error); }
/* .link-like and .proj-row went with the picker card. Both were named in
BL-014 as controls falling back to the UA focus ring; two of that entry's
four sites no longer exist. */
/* An inline error at the field it belongs to, rather than a native dialog that
names no field and highlights nothing (C1, and the pattern T5.8 uses in the
wizard). :empty so the element can sit in the markup and announce on change. */
.field-error { color: var(--cds-text-error); font-size: 12px; font-weight: 600; margin-top: 0.3rem; }
.field-error:empty { display: none; }
/* FIRST RUN
A brand-new account has no projects, so it has no tool cards either — this
is the whole page for that person, and it has to say what to do next. */
.first-run { border-left: 3px solid var(--cds-interactive-01); }
.first-run-note { font-size: 13px; margin-top: 1rem; }
.first-run-sample { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cds-border-subtle); }
.first-run-sample h3 { margin-bottom: 0.35rem; }
/* RESPONSIVE */
@media (max-width: 768px) {
@@ -344,12 +357,85 @@
<p id="hero-sub">Standardized Work Package creation for Prime Controls construction projects. Select a project to begin — or create one.</p>
</div>
<!-- PROJECT SELECTION -->
<div class="section" id="project-section">
<h2>Project</h2>
<p style="color:var(--cds-text-secondary);font-size:13px;margin:-.25rem 0 1rem">Projects are stored centrally. Pick the project you're working on, or set up a new one.</p>
<div id="project-picker"><div class="proj-loading">Loading projects…</div></div>
</div>
<!-- ═══════════════════════════════════════════════════════════════════════
PROJECT ENTRY POINTS — B3 / T5.2
The project-picker card that used to sit here — <h2>Project</h2> over a
"Select a project…" dropdown — is gone. Switching projects is the app
bar's switcher, which is on every page rather than only this one.
What a dropdown could NOT do is what stayed: the first-run empty state,
and creating a project. The empty state was built INSIDE the picker card,
so removing the card first would have stranded every new account on a
page whose only instruction was to pick from an empty list.
Exactly one of these three is visible at a time; #proj-status says which
and is where the archived note lands.
══════════════════════════════════════════════════════════════════════ -->
<div id="proj-status"><div class="proj-loading">Loading projects…</div></div>
<!-- (a) no projects at all -->
<section class="section first-run" id="first-run" hidden>
<h2>No projects yet</h2>
<p>A project holds one SOP — the baseline every work package on the job
inherits — and the work packages written against it. Everything else in
the suite hangs off a project, so this is the first thing to make.
Fill in the form below, or start from the sample underneath it.</p>
</section>
<!-- (b) projects exist, none chosen -->
<section class="section" id="pick-prompt" hidden>
<h2>Choose a project</h2>
<p id="pick-prompt-sub">Pick the job you are working on from the project
switcher in the bar at the top of the page. It is there on every page, so
you can change job without coming back here.</p>
<div class="proj-actions">
<button type="button" class="card-button" id="open-switcher-btn">Open the project switcher</button>
<button type="button" class="close-btn" id="new-project-btn">New project</button>
</div>
</section>
<!-- (c) the create form. Open on first run, on demand after that. -->
<section class="section" id="new-project" hidden>
<h2 id="new-project-head">Create a project</h2>
<form id="np-form" novalidate>
<div class="proj-form-grid">
<label for="np_name">Project name *
<input type="text" id="np_name" name="np_name" required
aria-describedby="np_name_err" placeholder="e.g. Micron — INC Construction">
</label>
<label for="np_number">Project number
<input type="text" id="np_number" placeholder="e.g. 26-67-008"></label>
<label for="np_client">Client
<input type="text" id="np_client" placeholder="e.g. Micron Technology, Inc."></label>
<label for="np_division">Division
<input type="text" id="np_division" placeholder="e.g. Semiconductor"></label>
<label for="np_site">Site / location
<input type="text" id="np_site" placeholder="e.g. Boise, ID — Fab"></label>
</div>
<!-- The error belongs at the field, not in a dialog that names no field
and highlights nothing. role="alert" so it is heard (C1 / S10). -->
<div class="field-error" id="np_name_err" role="alert"></div>
<div class="proj-actions">
<button type="submit" class="card-button">Create &amp; select</button>
<button type="button" class="close-btn" id="np-cancel">Cancel</button>
</div>
</form>
</section>
<!-- (d) the sample. Offered on first run, where it is the alternative to
filling in a form about a job you may not have started yet. It stays
reachable afterwards from the create form's own section. -->
<section class="section" id="sample-offer" hidden>
<h2>Not ready to set one up?</h2>
<p>The sample project is a fully configured example — a finished SOP and a
few work packages — so you can see what the tools do before committing a
real job to them. It is labelled as a sample everywhere it appears, and it
can be deleted later.</p>
<div class="proj-actions">
<button type="button" class="close-btn" id="use-sample-btn">Use the sample project</button>
</div>
</section>
<!-- TOOL CARDS (shown once a project is active) -->
<div class="cards-grid" id="overview" style="display:none">
@@ -452,7 +538,8 @@
}
const dropped = (active && !_projects.some(p => p.id === active.id)) ? active : null;
if(dropped) ProjectData.setActive(null);
renderProjectPicker();
_listLoaded = true;
renderProjectEntry();
applyActiveProject();
// "No longer in the list" used to mean one thing — deleted. Now it also
// means archived, and resetting someone to "Select a project" with no word
@@ -466,7 +553,7 @@
// taken away) fails here, and that case genuinely has nothing to say.
ProjectData.get(p.id).then(full => {
if(!full || !full.archived) return;
const box = document.getElementById('project-picker');
const box = document.getElementById('proj-status');
if(!box || document.getElementById('proj-archived-note')) return;
const note = document.createElement('div');
note.id = 'proj-archived-note';
@@ -478,55 +565,86 @@
}).catch(() => {});
}
function createFormHtml(){
return `<div class="proj-form" id="proj-form" style="display:none">
<div class="proj-form-grid">
<label>Project Name *<input type="text" id="np_name" placeholder="e.g. Micron — INC Construction"></label>
<label>Project Number<input type="text" id="np_number" placeholder="e.g. 26-67-008"></label>
<label>Client<input type="text" id="np_client" placeholder="e.g. Micron Technology, Inc."></label>
<label>Division<input type="text" id="np_division" placeholder="e.g. Semiconductor"></label>
<label>Site / Location<input type="text" id="np_site" placeholder="e.g. Boise, ID — Fab"></label>
</div>
<div class="proj-actions">
<button class="card-button" onclick="saveNewProject()">Create &amp; select</button>
<button class="close-btn" onclick="hideCreateProject()">Cancel</button>
</div>
</div>`;
}
// ── PROJECT ENTRY POINTS (B3 / T5.2) ──────────────────────────────────────
// Three states, one visible at a time. The picker card that used to render
// here is gone; the app bar's switcher does that job on every page, and this
// page keeps the two things a dropdown could not do.
//
// ORDER MATTERS, and it is the whole reason B3 exists: the first-run empty
// state used to live INSIDE the picker card. Deleting the card without
// building this first would have left a brand-new account on a page whose
// only instruction was to choose from a list with nothing in it.
const $ = id => document.getElementById(id);
let _createOpenedManually = false;
let _focusCreateOnRender = false;
// Nothing renders until the list is in. "No projects yet" is a claim, and
// making it while the request is still in flight would show every new-account
// page to every returning user for a beat.
let _listLoaded = false;
function renderProjectPicker(){
const box = document.getElementById('project-picker');
const activeId = ProjectData.getActiveId();
if(!_projects.length){
box.innerHTML = `<div class="proj-empty">
<p>No projects yet. Create your first project, or start from a sample.</p>
<div class="proj-actions">
<button class="card-button" onclick="showCreateProject()">+ Create project</button>
<button class="close-btn" onclick="useSampleProject()">Use sample project</button>
</div>
</div>` + createFormHtml();
return;
function show(id, on){ const el = $(id); if(el) el.hidden = !on; }
function renderProjectEntry(){
if(!_listLoaded) return;
const status = $('proj-status');
const loading = status && status.querySelector('.proj-loading');
if(loading) loading.remove();
const firstRun = !_projects.length;
const active = ProjectData.getActive();
show('first-run', firstRun);
show('sample-offer', firstRun);
// On first run the form IS the page — there is nothing else to do here, so
// hiding it behind a button would be one click of ceremony in front of the
// only path forward.
show('new-project', firstRun || _createOpenedManually);
show('pick-prompt', !firstRun && !active && !_createOpenedManually);
const head = $('new-project-head');
if(head) head.textContent = firstRun ? 'Create your first project' : 'Create a project';
// Nothing to cancel back to on first run.
show('np-cancel', !firstRun);
if(_focusCreateOnRender && !$('new-project').hidden){
_focusCreateOnRender = false;
const n = $('np_name');
if(n){ n.focus(); n.scrollIntoView({behavior:'smooth', block:'center'}); }
}
const opts = _projects.map(p =>
`<option value="${esc(p.id)}" ${p.id===activeId?'selected':''}>${esc(p.name||'(unnamed)')}${p.number?' — '+esc(p.number):''}${p.sample?' [sample]':''}</option>`
).join('');
box.innerHTML = `<div class="proj-row">
<select id="project-select" onchange="selectProject(this.value)">
<option value="">Select a project…</option>${opts}
</select>
<button class="card-button" onclick="showCreateProject()">+ New</button>
<button class="close-btn" onclick="useSampleProject()">Sample</button>
</div>
<div id="active-project-info"></div>` + createFormHtml();
}
function showCreateProject(){ const f=document.getElementById('proj-form'); if(f){ f.style.display=''; const n=document.getElementById('np_name'); if(n) n.focus(); } }
function hideCreateProject(){ const f=document.getElementById('proj-form'); if(f) f.style.display='none'; }
function showCreateProject(){
_createOpenedManually = true;
_focusCreateOnRender = true;
renderProjectEntry();
}
function hideCreateProject(){
_createOpenedManually = false;
setFieldError('np_name', '');
renderProjectEntry();
}
// An error at the field, associated with aria-describedby and announced —
// rather than a native dialog that names no field and highlights nothing.
// Same shape T5.8 gives the SOP wizard (C1).
function setFieldError(fieldId, message){
const field = $(fieldId), box = $(fieldId + '_err');
if(box) box.textContent = message || '';
if(field){
if(message) field.setAttribute('aria-invalid', 'true');
else field.removeAttribute('aria-invalid');
}
}
function saveNewProject(){
const v = id => (document.getElementById(id)?.value || '').trim();
const v = id => ($(id)?.value || '').trim();
const name = v('np_name');
if(!name){ alert('Project name is required.'); return; }
if(!name){
setFieldError('np_name', 'Enter a project name — it is the only field this needs.');
$('np_name')?.focus();
return;
}
setFieldError('np_name', '');
const p = { name, number:v('np_number'), client:v('np_client'), division:v('np_division'), site:v('np_site'), sample:false };
ProjectData.save(p).then(saved => { afterProjectChosen(saved); });
}
@@ -537,6 +655,33 @@
ProjectData.save(Object.assign({}, ProjectData.SAMPLE)).then(saved => { afterProjectChosen(saved); });
}
// The switcher is wp-chrome.js's, injected into the app bar after this script
// runs. Reaching for its button is deliberate: the alternative is a second
// project list on this page, which is the card B3 removes.
function openProjectSwitcher(){
const btn = document.querySelector('.wpc-proj-btn');
if(btn){ btn.click(); btn.focus(); return true; }
return false;
}
document.addEventListener('DOMContentLoaded', function(){
$('np-form')?.addEventListener('submit', function(e){ e.preventDefault(); saveNewProject(); });
$('np-cancel')?.addEventListener('click', hideCreateProject);
$('new-project-btn')?.addEventListener('click', showCreateProject);
$('use-sample-btn')?.addEventListener('click', useSampleProject);
$('open-switcher-btn')?.addEventListener('click', function(){
if(!openProjectSwitcher()){
// No chrome mounted (it returns early inside an iframe, and it loads
// after this file). Say so rather than doing nothing on a click.
const sub = $('pick-prompt-sub');
if(sub) sub.textContent = 'The project switcher is in the bar at the top of the page.';
}
});
// The app bar's popover links here for "new project". Honour it, so that
// link lands on the form rather than on a page that no longer has one.
if(location.hash === '#new-project') showCreateProject();
});
// S3: which project you are in is addressable, so a launcher link carries it
// and Back returns to the project you were looking at before.
function urlSyncProject(id, replace){
@@ -544,16 +689,16 @@
(replace ? WPUrl.replace : WPUrl.push).call(WPUrl, { project: id || '' });
}
function selectProject(id){
if(!id){ ProjectData.setActive(null); urlSyncProject('', false); applyActiveProject(); return; }
const p = _projects.find(x => x.id === id);
if(p){ ProjectData.setActive(p); urlSyncProject(p.id, false); applyActiveProject(); }
}
// selectProject() went with the picker card's <select>. The app bar's switcher
// reloads with ?project=<id> rather than swapping state in place, so there is
// nothing left on this page that chooses a project without navigating.
function afterProjectChosen(p){
if(!_projects.some(x => x.id === p.id)) _projects.unshift(p);
ProjectData.setActive(p);
renderProjectPicker();
_createOpenedManually = false;
urlSyncProject(p.id, false);
renderProjectEntry();
applyActiveProject();
document.getElementById('overview').scrollIntoView({ behavior:'smooth', block:'start' });
}
@@ -564,13 +709,15 @@
const cards = document.getElementById('overview');
const heroTitle = document.getElementById('hero-title');
const heroSub = document.getElementById('hero-sub');
const info = document.getElementById('active-project-info');
if(!active){
cards.style.display = 'none';
heroTitle.textContent = 'Work Package Suite';
heroSub.textContent = 'Select a project to begin — or create one.';
if(info) info.innerHTML = '';
// Two different situations, and telling someone to "select a project"
// when there are none to select is the thing B3 is about.
heroSub.textContent = _projects.length
? 'Choose a project to begin — or create one.'
: 'Create your first project to begin.';
return;
}
@@ -584,8 +731,6 @@
cards.style.display = '';
heroTitle.textContent = active.name || 'Work Package Suite';
heroSub.textContent = [active.number, active.client, active.site].filter(Boolean).join(' · ') || 'Active project';
if(info) info.innerHTML = `<div class="proj-active">✓ Active project: <strong>${esc(active.name||'')}</strong>${active.number?' ('+esc(active.number)+')':''}
&nbsp;<button class="link-like" onclick="clearActiveProject()">change</button></div>`;
// Pull the project's shared SOP/WPs into the local cache so the tools boot
// with data. The card status below does NOT come from that cache — see
@@ -594,7 +739,7 @@
reflectSOPStatus(active);
}
function clearActiveProject(){ ProjectData.setActive(null); urlSyncProject('', false); renderProjectPicker(); applyActiveProject(); }
function clearActiveProject(){ ProjectData.setActive(null); urlSyncProject('', false); renderProjectEntry(); applyActiveProject(); }
// Back / Forward between projects.
if(typeof WPUrl !== 'undefined'){
@@ -607,7 +752,7 @@
const p = (_projects||[]).find(x=>x.id===want);
ProjectData.setActive(p || { id: want });
}
renderProjectPicker(); applyActiveProject();
renderProjectEntry(); applyActiveProject();
});
}

6
html/wp-chrome.js
View File

@@ -137,7 +137,11 @@
pop.innerHTML =
'<div class="wpc-pop-head">Switch project</div>' +
(rows || '<div class="wpc-empty">No projects you can access yet.</div>') +
'<div class="wpc-pop-foot"><a class="wpc-foot-btn" href="index.html">All projects / new project</a></div>';
// B3/T5.2 removed the launcher's picker card, so "all projects" is this
// popover now and the launcher is where a project is CREATED. The link
// says the one thing that is still true there, and carries the hash the
// launcher opens its form on — otherwise it promises a list that moved.
'<div class="wpc-pop-foot"><a class="wpc-foot-btn" href="index.html#new-project">New project</a></div>';
Array.prototype.forEach.call(pop.querySelectorAll('.wpc-item'), function (item) {
item.addEventListener('click', function () {
var p = projects.filter(function (x) { return x.id === item.getAttribute('data-pid'); })[0];