Skip to content

Commit 811412e

Browse files
ToolboxAidToolboxAid
authored
Merge PR_26175_ALFA_009-status-bar-single-row-rebuild
OWNER approved merge of PR #133.
2 parents 5415f66 + 025aac9 commit 811412e

10 files changed

Lines changed: 1170 additions & 37144 deletions

‎assets/theme-v2/css/layout.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -733,7 +733,7 @@ body.tool-focus-mode .tool-workspace--table-scroll-focus .tool-table-scroll-regi
733733
.footer {
734734
margin-top: var(--space-46);
735735
border-top: var(--border-standard);
736-
padding: var(--space-24) var(--space-0);
736+
padding: var(--space-0) var(--space-0) var(--space-24);
737737
color: var(--muted)
738738
}
739739

‎assets/theme-v2/css/status.css‎

Lines changed: 45 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,10 @@
3636
}
3737

3838
.toolbox-status-bar {
39+
--toolbox-status-bar-height: var(--space-52);
40+
--toolbox-status-game-max: 220px;
3941
width: 100%;
42+
min-block-size: var(--toolbox-status-bar-height);
4043
border-block: var(--border-standard);
4144
background: var(--panel-overlay-strong);
4245
color: var(--text)
@@ -47,7 +50,7 @@
4750
margin: var(--space-0) auto;
4851
padding: var(--space-10) var(--space-0);
4952
display: grid;
50-
grid-template-columns: minmax(var(--space-0), 1fr) minmax(var(--space-0), 2fr);
53+
grid-template-columns: minmax(var(--space-0), max-content) minmax(var(--space-0), 1fr);
5154
gap: var(--space-16);
5255
align-items: center
5356
}
@@ -56,34 +59,18 @@
5659
min-width: var(--space-0);
5760
display: flex;
5861
align-items: center;
59-
flex-wrap: wrap;
60-
gap: var(--space-14);
62+
justify-content: flex-start;
6163
text-align: left
6264
}
6365

64-
.toolbox-status-bar__field {
65-
min-width: var(--space-0);
66-
display: grid;
67-
gap: var(--space-3)
68-
}
69-
70-
.toolbox-status-bar__label {
71-
color: var(--muted);
72-
font-size: var(--font-size-xs);
73-
font-weight: var(--font-weight-heavy);
74-
letter-spacing: var(--letter-spacing-kicker);
75-
text-transform: uppercase
76-
}
77-
7866
.toolbox-status-bar__game-name {
7967
color: var(--text);
8068
font-size: var(--font-size-base);
81-
overflow-wrap: anywhere
82-
}
83-
84-
.toolbox-status-bar__purpose {
85-
color: var(--muted);
86-
font-size: var(--font-size-sm);
69+
line-height: var(--line-height-tight);
70+
max-width: min(30vw, var(--toolbox-status-game-max));
71+
overflow: hidden;
72+
text-overflow: ellipsis;
73+
white-space: nowrap;
8774
overflow-wrap: anywhere
8875
}
8976

@@ -92,25 +79,17 @@
9279
display: flex;
9380
align-items: center;
9481
justify-content: center;
95-
flex-wrap: wrap;
96-
gap: var(--space-10);
82+
justify-self: center;
9783
text-align: center
9884
}
9985

100-
.toolbox-status-bar__context-type {
101-
flex: 0 0 auto
102-
}
103-
10486
.toolbox-status-bar__message {
10587
margin: var(--space-0);
10688
max-width: var(--measure-lg);
89+
line-height: var(--line-height-copy);
10790
overflow-wrap: anywhere
10891
}
10992

110-
.toolbox-status-bar__action {
111-
flex: 0 0 auto
112-
}
113-
11493
.toolbox-status-bar[data-selected-game-state="active"] {
11594
border-color: color-mix(in srgb, var(--green) 52%, var(--line))
11695
}
@@ -123,22 +102,6 @@
123102
border-color: color-mix(in srgb, var(--red) 52%, var(--line))
124103
}
125104

126-
.toolbox-status-bar[data-toolbox-status-context-kind="error"] .toolbox-status-bar__context-type {
127-
border-color: color-mix(in srgb, var(--red) 62%, var(--line));
128-
color: var(--red)
129-
}
130-
131-
.toolbox-status-bar[data-toolbox-status-context-kind="warning"] .toolbox-status-bar__context-type,
132-
.toolbox-status-bar[data-toolbox-status-context-kind="validation"] .toolbox-status-bar__context-type {
133-
border-color: var(--gold-border-muted);
134-
color: var(--gold)
135-
}
136-
137-
.toolbox-status-bar[data-toolbox-status-context-kind="save"] .toolbox-status-bar__context-type {
138-
border-color: color-mix(in srgb, var(--green) 62%, var(--line));
139-
color: var(--green)
140-
}
141-
142105
body.tool-focus-mode .toolbox-status-bar {
143106
position: fixed;
144107
inset-block-end: var(--space-0);
@@ -148,6 +111,31 @@ body.tool-focus-mode .toolbox-status-bar {
148111
box-shadow: var(--shadow-md)
149112
}
150113

114+
body.tool-focus-mode {
115+
--toolbox-status-bar-height: var(--space-52);
116+
--toolbox-status-top-reserve: var(--space-0)
117+
}
118+
119+
body.tool-focus-mode:has(.platform-banner) {
120+
--toolbox-status-top-reserve: var(--space-52)
121+
}
122+
123+
body.tool-focus-mode .tool-workspace {
124+
box-sizing: border-box;
125+
height: calc(100vh - var(--toolbox-status-bar-height) - var(--toolbox-status-top-reserve));
126+
max-height: calc(100vh - var(--toolbox-status-bar-height) - var(--toolbox-status-top-reserve))
127+
}
128+
129+
body.tool-focus-mode .tool-column {
130+
height: calc(100vh - var(--toolbox-status-bar-height) - var(--toolbox-status-top-reserve) - var(--space-20));
131+
max-height: calc(100vh - var(--toolbox-status-bar-height) - var(--toolbox-status-top-reserve) - var(--space-20))
132+
}
133+
134+
body.tool-focus-mode .tool-center-panel {
135+
box-sizing: border-box;
136+
scroll-padding-block-end: var(--toolbox-status-bar-height)
137+
}
138+
151139
.platform-banner {
152140
width: 100%;
153141
border-bottom: var(--border-standard);
@@ -261,12 +249,16 @@ body.tool-focus-mode .toolbox-status-bar {
261249
@media (max-width: 720px) {
262250
.toolbox-status-bar__inner {
263251
width: var(--container-width);
264-
grid-template-columns: 1fr;
252+
grid-template-columns: minmax(var(--space-0), max-content) minmax(var(--space-0), 1fr);
253+
gap: var(--space-10);
265254
text-align: center
266255
}
267256

268-
.toolbox-status-bar__game {
269-
justify-content: center;
270-
text-align: center
257+
.toolbox-status-bar__game-name {
258+
max-width: 34vw
259+
}
260+
261+
.toolbox-status-bar__message {
262+
font-size: var(--font-size-sm)
271263
}
272264
}

‎assets/theme-v2/js/toolbox-status-bar.js‎

Lines changed: 9 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -90,37 +90,16 @@ function createStatusBar() {
9090
game.className = "toolbox-status-bar__game";
9191
game.dataset.toolboxSelectedGame = "";
9292

93-
const nameField = document.createElement("div");
94-
nameField.className = "toolbox-status-bar__field";
95-
nameField.dataset.toolboxSelectedGameNameField = "";
96-
const nameLabel = createText("span", "toolbox-status-bar__label", "toolboxSelectedGameNameLabel");
97-
nameLabel.textContent = "Selected Game Name";
9893
const name = createText("strong", "toolbox-status-bar__game-name", "toolboxSelectedGameName");
99-
nameField.append(nameLabel, name);
100-
101-
const purposeField = document.createElement("div");
102-
purposeField.className = "toolbox-status-bar__field";
103-
purposeField.dataset.toolboxSelectedGamePurposeField = "";
104-
const purposeLabel = createText("span", "toolbox-status-bar__label", "toolboxSelectedGamePurposeLabel");
105-
purposeLabel.textContent = "Selected Game Purpose";
106-
const purpose = createText("span", "toolbox-status-bar__purpose", "toolboxSelectedGamePurpose");
107-
purpose.dataset.toolboxSelectedGameMeta = "";
108-
purposeField.append(purposeLabel, purpose);
109-
game.append(nameField, purposeField);
94+
game.append(name);
11095

11196
const center = document.createElement("div");
11297
center.className = "toolbox-status-bar__center";
11398
center.dataset.toolboxStatusCenter = "";
11499

115-
const contextType = createText("span", "pill toolbox-status-bar__context-type", "toolboxStatusContextType");
116100
const message = createText("p", "toolbox-status-bar__message status", "toolboxStatusMessage");
117101
message.setAttribute("role", "status");
118-
const action = document.createElement("a");
119-
action.className = "btn btn--compact toolbox-status-bar__action";
120-
action.dataset.toolboxStatusAction = "";
121-
action.href = mountOptions.gameHubHref;
122-
action.textContent = "Open Game Hub";
123-
center.append(contextType, message, action);
102+
center.append(message);
124103

125104
inner.append(game, center);
126105
bar.append(inner);
@@ -234,33 +213,30 @@ function publishSelectedGameContext(selectedGame, state) {
234213
function classifyToolContext(messageText, state, required) {
235214
const text = String(messageText || "").trim();
236215
if (state === "error") {
237-
return { kind: "error", label: "Error" };
216+
return { kind: "error" };
238217
}
239218
if (required && state === "missing") {
240-
return { kind: "action", label: "Tool Action" };
219+
return { kind: "action" };
241220
}
242221
if (/\b(error|failed|malformed|unavailable|could not)\b/i.test(text)) {
243-
return { kind: "error", label: "Error" };
222+
return { kind: "error" };
244223
}
245224
if (/\b(sign in|refresh|try again|temporarily|blocked)\b/i.test(text)) {
246-
return { kind: "warning", label: "Warning" };
225+
return { kind: "warning" };
247226
}
248227
if (/\b(validation|requirement|requirements|missing|required|open or seed)\b/i.test(text)) {
249-
return { kind: "validation", label: "Validation" };
228+
return { kind: "validation" };
250229
}
251230
if (/\b(saved|created|deleted|updated|loaded|save changes)\b/i.test(text)) {
252-
return { kind: "save", label: "Save State" };
231+
return { kind: "save" };
253232
}
254-
return { kind: "action", label: "Tool Action" };
233+
return { kind: "action" };
255234
}
256235

257236
function renderSelectedGame(bar, selectedGame, state, messageText) {
258237
const required = pageRequiresSelectedGame();
259238
const name = bar.querySelector("[data-toolbox-selected-game-name]");
260-
const purpose = bar.querySelector("[data-toolbox-selected-game-purpose]");
261-
const contextType = bar.querySelector("[data-toolbox-status-context-type]");
262239
const message = bar.querySelector("[data-toolbox-status-message]");
263-
const action = bar.querySelector("[data-toolbox-status-action]");
264240
const nextMessage = messageText || latestToolMessage || (selectedGame
265241
? `Tool context is filtered to ${selectedGame.name}.`
266242
: required
@@ -271,38 +247,27 @@ function renderSelectedGame(bar, selectedGame, state, messageText) {
271247
bar.dataset.selectedGameState = state;
272248
bar.dataset.selectedGameRequired = String(required);
273249
bar.dataset.toolboxStatusContextKind = context.kind;
274-
contextType.textContent = context.label;
275-
action.hidden = false;
276-
action.href = mountOptions.gameHubHref;
277250

278251
if (selectedGame) {
279252
name.textContent = selectedGame.name;
280-
purpose.textContent = selectedGame.purpose || "Game";
281253
message.textContent = nextMessage;
282-
action.textContent = "Open Game Hub";
283254
return;
284255
}
285256

286257
if (!required) {
287258
name.textContent = "No game selected";
288-
purpose.textContent = "Idea Board optional";
289259
message.textContent = nextMessage;
290-
action.textContent = "Open Game Hub";
291260
return;
292261
}
293262

294263
if (state === "error") {
295264
name.textContent = "Unavailable";
296-
purpose.textContent = "Game Hub selected game could not be read";
297265
message.textContent = nextMessage;
298-
action.textContent = "Open Game Hub";
299266
return;
300267
}
301268

302269
name.textContent = "No game selected";
303-
purpose.textContent = "Game Hub owns game selection";
304270
message.textContent = "Select or create a game in Game Hub before using this toolbox page.";
305-
action.textContent = "Select or Create in Game Hub";
306271
}
307272

308273
export function refreshToolboxStatusBar() {

‎docs_build/dev/BUILD_PR.md‎

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,70 @@
1-
# PR_26175_ALFA_008-game-hub-feature-matrix
1+
# PR_26175_ALFA_009-status-bar-single-row-rebuild
22

33
## Purpose
4-
Audit the current Game Hub workflow and publish a feature matrix that maps implemented creator-facing behavior to code and Playwright evidence.
4+
Rebuild the shared toolbox status bar on current `main` so it is a single-row creator context bar.
55

66
## Source Of Truth
7-
This `BUILD_PR.md` is the source of truth for `PR_26175_ALFA_008-game-hub-feature-matrix`.
7+
This `BUILD_PR.md` is the source of truth for `PR_26175_ALFA_009-status-bar-single-row-rebuild`.
88

99
## Exact Scope
10-
- Produce a Game Hub feature matrix only.
11-
- Audit Game Hub table workflow, selected/open game behavior, create/edit/delete actions, child tables, guest save gating, empty/error states, Theme V2 layout, and targeted Game Hub coverage.
12-
- Use current `main` behavior as evidence.
13-
- Preserve Game Hub UI/product behavior.
14-
- Preserve API/service/repository contracts.
15-
- Preserve previous ALFA Game Hub cleanup and create-validation behavior.
16-
- Do not implement product/UI changes unless validation exposes a requirement-critical defect.
10+
- Display only the selected Game Hub game name on the left side of the toolbox status bar.
11+
- Display only the current status message in the center of the toolbox status bar.
12+
- Remove visible status bar labels: `Selected Game Name`, `Selected Game Purpose`, `Save State`, `Tool Action`, `Warning`, and `Error`.
13+
- Remove selected-game purpose from the visible status bar.
14+
- Preserve normal status bar placement above the footer.
15+
- Remove extra status bar/footer spacing so the shared footer top padding resolves to `0px`.
16+
- Preserve fullscreen/tool display mode bottom anchoring.
17+
- Ensure fullscreen center scrollable content stops above the fixed status bar.
18+
- Ensure fullscreen tool content is not hidden behind the status bar.
19+
- Preserve Idea Board selected-game filtering exclusion.
20+
- Preserve Game Hub as selected-game owner through the existing repository contract.
21+
- Use shared Theme V2 CSS/classes only.
22+
- Update targeted Playwright coverage for the single-row status bar, footer spacing, and fullscreen bottom reserve.
1723

1824
## Exact Targets
1925
- `docs_build/dev/BUILD_PR.md`
20-
- `docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_report.md`
21-
- `docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_validation-lane.md`
22-
- `docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_requirements-checklist.md`
26+
- `assets/theme-v2/js/toolbox-status-bar.js`
27+
- `assets/theme-v2/css/status.css`
28+
- `assets/theme-v2/css/layout.css`
29+
- `tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs`
30+
- `docs_build/dev/reports/PR_26175_ALFA_009-status-bar-single-row-rebuild_report.md`
31+
- `docs_build/dev/reports/PR_26175_ALFA_009-status-bar-single-row-rebuild_validation-lane.md`
32+
- `docs_build/dev/reports/PR_26175_ALFA_009-status-bar-single-row-rebuild_requirements-checklist.md`
2333
- `docs_build/dev/reports/codex_review.diff`
2434
- `docs_build/dev/reports/codex_changed_files.txt`
2535

26-
## Evidence Sources
27-
- `toolbox/game-hub/index.html`
28-
- `toolbox/project-workspace/index.html`
29-
- `toolbox/game-hub/game-hub.js`
30-
- `toolbox/game-hub/game-hub-api-client.js`
31-
- `src/dev-runtime/persistence/tool-repositories/game-workspace-mock-repository.js`
32-
- `tests/playwright/tools/GameHubMockRepository.spec.mjs`
33-
3436
## Out Of Scope
35-
- No Game Hub product or UI changes.
36-
- No Game Journey changes.
37-
- No shared toolbox status bar changes.
38-
- No browser-owned product data as source of truth.
37+
- No merge of PR #120.
38+
- No reuse of stale ALFA_003 branch.
39+
- No environment/server details in the status bar.
40+
- No selected game purpose in the visible status bar.
41+
- No visible status category labels in the status bar.
42+
- No status action links in the visible status bar.
43+
- No large banners.
44+
- No modal messages or modal-style status messages.
45+
- No row highlights.
3946
- No API/service/repository contract changes.
47+
- No browser-owned product data as source of truth.
4048
- No inline styles, style blocks, or page-local CSS.
4149
- No engine core changes.
4250
- No `start_of_day` folder changes.
43-
- No ALFA_007 work.
4451

4552
## Validation
46-
Run targeted Game Hub validation:
53+
Run targeted Playwright coverage:
4754

4855
```powershell
49-
npx playwright test tests/playwright/tools/GameHubMockRepository.spec.mjs --workers=1
56+
npx playwright test tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs --workers=1
5057
```
5158

52-
Also verify changed docs/reports do not introduce inline styles or style blocks:
59+
Also verify changed source does not introduce inline styles or style blocks:
5360

5461
```powershell
55-
rg -n "<[s]tyle|[s]tyle=" docs_build/dev/BUILD_PR.md docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_report.md docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_validation-lane.md docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_requirements-checklist.md
62+
rg -n "<[s]tyle|[s]tyle=" assets/theme-v2/js/toolbox-status-bar.js assets/theme-v2/css/status.css assets/theme-v2/css/layout.css tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs
5663
```
5764

5865
## Artifact
5966
Create repo-structured delta ZIP:
6067

6168
```text
62-
tmp/PR_26175_ALFA_008-game-hub-feature-matrix_delta.zip
69+
tmp/PR_26175_ALFA_009-status-bar-single-row-rebuild_delta.zip
6370
```

0 commit comments

Comments
 (0)