+
Add Note opens a new note row under the expanded idea. Notes can be edited, and removable notes can be deleted.
+diff --git a/toolbox/idea-board/index.js b/toolbox/idea-board/index.js
+index 8f588c3c3..2b74e797d 100644
+--- a/toolbox/idea-board/index.js
++++ b/toolbox/idea-board/index.js
+@@ -1,4 +1,5 @@
+-const statusOptions = Object.freeze(["New", "Exploring", "Parked", "Ready to Shape"]);
++const statusOptions = Object.freeze(["New", "Exploring", "Refining", "Ready", "Project", "Archived"]);
++const defaultVisibleStatuses = Object.freeze(["New", "Exploring", "Refining", "Ready", "Project"]);
+ const userId = "user-1";
+
+ const ideaTable = [
+@@ -79,6 +80,7 @@ const state = {
+ editingNoteId: null,
+ addingIdea: false,
+ addingNoteIdeaId: null,
++ visibleStatuses: new Set(defaultVisibleStatuses),
+ };
+
+ function today() {
+@@ -98,6 +100,34 @@ function noteCountLabel(ideaId) {
+ return `${count} ${count === 1 ? "Note" : "Notes"}`;
+ }
+
++function isArchived(record) {
++ return record.status === "Archived";
++}
++
++function isProject(record) {
++ return record.status === "Project";
++}
++
++function visibleIdeas() {
++ return ideaTable.filter((record) => state.visibleStatuses.has(record.status));
++}
++
++function previousStatusForRestore(record) {
++ return statusOptions.includes(record.previousStatus) && record.previousStatus !== "Archived"
++ ? record.previousStatus
++ : "Refining";
++}
++
++function rememberPreviousStatus(record) {
++ if (record.status !== "Archived") {
++ record.previousStatus = record.status;
++ }
++}
++
++function canDeleteIdea(record) {
++ return !isProject(record) || isArchived(record);
++}
++
+ function cell(text) {
+ const td = document.createElement("td");
+ td.textContent = text;
+@@ -113,6 +143,25 @@ function actionButton(label, action, datasetName, variant = "") {
+ return control;
+ }
+
++function renderStatusFilter(root) {
++ const options = root.querySelector("[data-idea-board-status-options]");
++ if (!options) return;
++ options.replaceChildren();
++ for (const status of statusOptions) {
++ const label = document.createElement("label");
++ label.className = "idea-board-show-filter__option";
++ const input = document.createElement("input");
++ input.type = "checkbox";
++ input.value = status;
++ input.checked = state.visibleStatuses.has(status);
++ input.dataset.ideaBoardStatusFilterOption = status;
++ const text = document.createElement("span");
++ text.textContent = status;
++ label.append(input, text);
++ options.append(label);
++ }
++}
++
+ function textInput(label, value = "") {
+ const input = document.createElement("input");
+ input.type = "text";
+@@ -199,7 +248,7 @@ function renderIdeaRow(tbody, record) {
+ chevron.setAttribute("aria-hidden", "true");
+ chevron.dataset.ideaBoardChevron = record.ideaId;
+ chevron.dataset.ideaBoardChevronIcon = chevronIcon;
+- ideaLabel.append(ideaText, chevron);
++ ideaLabel.append(chevron, ideaText);
+ idea.append(ideaLabel);
+ row.append(idea);
+ row.append(cell(record.pitch));
+@@ -214,11 +263,28 @@ function renderIdeaRow(tbody, record) {
+ row.append(notes);
+
+ const actions = document.createElement("td");
+- actions.append(
+- actionButton("Edit", "edit", "ideaBoardIdeaAction"),
+- " ",
+- actionButton("Delete", "delete", "ideaBoardIdeaAction"),
+- );
++ if (isArchived(record)) {
++ actions.append(
++ actionButton("Restore", "restore", "ideaBoardIdeaAction"),
++ " ",
++ actionButton("Delete", "delete", "ideaBoardIdeaAction"),
++ );
++ } else {
++ actions.append(actionButton("Edit", "edit", "ideaBoardIdeaAction"));
++ if (record.status === "Ready") {
++ actions.append(" ", actionButton("Create Project", "create-project", "ideaBoardIdeaAction", "primary"));
++ }
++ if (isProject(record)) {
++ actions.append(
++ " ",
++ actionButton("Open Project", "open-project", "ideaBoardIdeaAction", "primary"),
++ " ",
++ actionButton("Archive", "archive", "ideaBoardIdeaAction"),
++ );
++ } else {
++ actions.append(" ", actionButton("Delete", "delete", "ideaBoardIdeaAction"));
++ }
++ }
+ row.append(actions);
+ tbody.append(row);
+ }
+@@ -322,8 +388,9 @@ function renderAddIdeaRow(tbody) {
+ function render(root) {
+ const tbody = root.querySelector("[data-idea-board-ideas-body]");
+ if (!tbody) return;
++ renderStatusFilter(root);
+ tbody.replaceChildren();
+- for (const record of ideaTable) {
++ for (const record of visibleIdeas()) {
+ if (state.editingIdeaId === record.ideaId) {
+ renderIdeaInputRow(tbody, record);
+ } else {
+@@ -361,7 +428,11 @@ function saveIdeaRow(root, row) {
+ }
+ record.idea = idea;
+ record.pitch = pitch;
++ if (status === "Archived" && record.status !== "Archived") {
++ record.previousStatus = record.status;
++ }
+ record.status = status;
++ rememberPreviousStatus(record);
+ record.updated = today();
+ state.editingIdeaId = null;
+ updateStatus(root, `Updated ${record.idea}.`);
+@@ -427,6 +498,10 @@ function deleteIdea(root, ideaId) {
+ updateStatus(root, "Idea Board could not delete that idea.");
+ return;
+ }
++ if (!canDeleteIdea(ideaTable[index])) {
++ updateStatus(root, "Archive this project before deleting it.");
++ return;
++ }
+ const [removed] = ideaTable.splice(index, 1);
+ for (let noteIndex = noteTable.length - 1; noteIndex >= 0; noteIndex -= 1) {
+ if (noteTable[noteIndex].ideaId === ideaId) noteTable.splice(noteIndex, 1);
+@@ -438,6 +513,61 @@ function deleteIdea(root, ideaId) {
+ render(root);
+ }
+
++function createProject(root, ideaId) {
++ const record = ideaRecord(ideaId);
++ if (!record) {
++ updateStatus(root, "Idea Board could not update that idea.");
++ return;
++ }
++ if (record.status !== "Ready") {
++ updateStatus(root, "Set this idea to Ready before creating a project.");
++ return;
++ }
++ record.status = "Project";
++ record.previousStatus = "Project";
++ record.updated = today();
++ updateStatus(root, `${record.idea} is now a project.`);
++ render(root);
++}
++
++function archiveIdea(root, ideaId) {
++ const record = ideaRecord(ideaId);
++ if (!record) {
++ updateStatus(root, "Idea Board could not archive that idea.");
++ return;
++ }
++ if (record.status !== "Archived") record.previousStatus = record.status;
++ record.status = "Archived";
++ record.updated = today();
++ if (!state.visibleStatuses.has("Archived") && state.expandedIdeaId === ideaId) {
++ state.expandedIdeaId = null;
++ }
++ updateStatus(root, `Archived ${record.idea}.`);
++ render(root);
++}
++
++function restoreIdea(root, ideaId) {
++ const record = ideaRecord(ideaId);
++ if (!record) {
++ updateStatus(root, "Idea Board could not restore that idea.");
++ return;
++ }
++ record.status = previousStatusForRestore(record);
++ record.previousStatus = record.status;
++ record.updated = today();
++ updateStatus(root, `Restored ${record.idea}.`);
++ render(root);
++}
++
++function openProject(root, ideaId) {
++ const record = ideaRecord(ideaId);
++ if (!record) {
++ updateStatus(root, "Idea Board could not open that project.");
++ return;
++ }
++ updateStatus(root, `Opening ${record.idea}.`);
++}
++
+ function handleIdeaAction(root, actionControl) {
+ const action = actionControl.dataset.ideaBoardIdeaAction;
+ const row = actionControl.closest("tr");
+@@ -454,6 +584,14 @@ function handleIdeaAction(root, actionControl) {
+ render(root);
+ } else if (action === "delete") {
+ deleteIdea(root, ideaId);
++ } else if (action === "create-project") {
++ createProject(root, ideaId);
++ } else if (action === "open-project") {
++ openProject(root, ideaId);
++ } else if (action === "archive") {
++ archiveIdea(root, ideaId);
++ } else if (action === "restore") {
++ restoreIdea(root, ideaId);
+ } else if (action === "cancel") {
+ state.editingIdeaId = null;
+ state.addingIdea = false;
+@@ -497,7 +635,38 @@ function handleNoteAction(root, actionControl) {
+ }
+ }
+
++function handleFilterAction(root, actionControl) {
++ if (actionControl.matches("[data-idea-board-filter-select-all]")) {
++ state.visibleStatuses = new Set(statusOptions);
++ updateStatus(root, "Showing all statuses.");
++ } else if (actionControl.matches("[data-idea-board-filter-clear-all]")) {
++ state.visibleStatuses = new Set();
++ state.expandedIdeaId = null;
++ updateStatus(root, "Status filters cleared.");
++ }
++ render(root);
++}
++
++function handleFilterChange(root, input) {
++ if (input.checked) {
++ state.visibleStatuses.add(input.value);
++ } else {
++ state.visibleStatuses.delete(input.value);
++ if (state.expandedIdeaId && ideaRecord(state.expandedIdeaId)?.status === input.value) {
++ state.expandedIdeaId = null;
++ }
++ }
++ updateStatus(root, "Updated visible statuses.");
++ render(root);
++}
++
+ function handleClick(root, event) {
++ const filterAction = event.target.closest("[data-idea-board-filter-select-all], [data-idea-board-filter-clear-all]");
++ if (filterAction) {
++ handleFilterAction(root, filterAction);
++ return;
++ }
++
+ const toggle = event.target.closest("[data-idea-board-toggle-notes]");
+ if (toggle) {
+ toggleNotes(root, toggle.dataset.ideaBoardToggleNotes);
+@@ -514,6 +683,11 @@ function handleClick(root, event) {
+ if (noteAction) handleNoteAction(root, noteAction);
+ }
+
++function handleChange(root, event) {
++ const statusFilter = event.target.closest("[data-idea-board-status-filter-option]");
++ if (statusFilter) handleFilterChange(root, statusFilter);
++}
++
+ function handleKeydown(root, event) {
+ const toggle = event.target.closest("[data-idea-board-toggle-notes]");
+ if (!toggle || (event.key !== "Enter" && event.key !== " ")) return;
+@@ -526,5 +700,6 @@ document.addEventListener("DOMContentLoaded", () => {
+ if (!root) return;
+ render(root);
+ root.addEventListener("click", (event) => handleClick(root, event));
++ root.addEventListener("change", (event) => handleChange(root, event));
+ root.addEventListener("keydown", (event) => handleKeydown(root, event));
+ });
diff --git a/docs_build/dev/reports/coverage_changed_js_guardrail.txt b/docs_build/dev/reports/coverage_changed_js_guardrail.txt
index 076d27690..66dd0cb12 100644
--- a/docs_build/dev/reports/coverage_changed_js_guardrail.txt
+++ b/docs_build/dev/reports/coverage_changed_js_guardrail.txt
@@ -6,10 +6,9 @@ Missing changed runtime JS files are WARN, not FAIL.
Source: Playwright/Chromium built-in V8 coverage from the active Playwright run.
Changed runtime JS files considered:
-(0%) src/dev-runtime/server/local-api-router.mjs - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
(0%) src/shared/toolbox/tool-metadata-inventory.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(70%) toolbox/idea-board/index.js - executed lines 480/480; executed functions 23/33
+(64%) assets/theme-v2/js/tool-display-mode.js - executed lines 209/209; executed functions 9/14
+(74%) toolbox/idea-board/index.js - executed lines 640/640; executed functions 37/50
Guardrail warnings:
-(0%) src/dev-runtime/server/local-api-router.mjs - WARNING: changed runtime JS file missing from coverage; advisory only
(0%) src/shared/toolbox/tool-metadata-inventory.js - WARNING: changed runtime JS file missing from coverage; advisory only
diff --git a/docs_build/dev/reports/playwright_v8_coverage_report.txt b/docs_build/dev/reports/playwright_v8_coverage_report.txt
index cb35b4d50..4a9f71ff1 100644
--- a/docs_build/dev/reports/playwright_v8_coverage_report.txt
+++ b/docs_build/dev/reports/playwright_v8_coverage_report.txt
@@ -17,9 +17,9 @@ Exercised tool entry points detected:
(63%) Theme V2 Shared JS - exercised 2 runtime JS files
Changed runtime JS files covered:
-(0%) src/dev-runtime/server/local-api-router.mjs - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
(0%) src/shared/toolbox/tool-metadata-inventory.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(70%) toolbox/idea-board/index.js - executed lines 480/480; executed functions 23/33
+(64%) assets/theme-v2/js/tool-display-mode.js - executed lines 209/209; executed functions 9/14
+(74%) toolbox/idea-board/index.js - executed lines 640/640; executed functions 37/50
Files with executed line/function counts where available:
(25%) src/api/session-api-client.js - executed lines 68/68; executed functions 3/12
@@ -30,17 +30,16 @@ Files with executed line/function counts where available:
(65%) src/api/public-config-client.js - executed lines 209/209; executed functions 17/26
(67%) src/api/game-journey-completion-api-client.js - executed lines 15/15; executed functions 2/3
(67%) toolbox/game-workspace/game-workspace-api-client.js - executed lines 20/20; executed functions 2/3
-(70%) toolbox/idea-board/index.js - executed lines 480/480; executed functions 23/33
+(74%) toolbox/idea-board/index.js - executed lines 640/640; executed functions 37/50
(78%) toolbox/tools-page-accordions.js - executed lines 1156/1156; executed functions 87/111
(86%) toolbox/tool-registry-api-client.js - executed lines 155/155; executed functions 25/29
Uncovered or low-coverage changed JS files:
-(0%) src/dev-runtime/server/local-api-router.mjs - WARNING: uncovered changed runtime JS file; advisory only
(0%) src/shared/toolbox/tool-metadata-inventory.js - WARNING: uncovered changed runtime JS file; advisory only
Changed JS files considered:
-(0%) src/dev-runtime/server/local-api-router.mjs - changed JS file not collected as browser runtime coverage
(0%) src/shared/toolbox/tool-metadata-inventory.js - changed JS file not collected as browser runtime coverage
(0%) tests/playwright/tools/IdeaBoardTableNotes.spec.mjs - changed JS file not collected as browser runtime coverage
(0%) tests/playwright/tools/ToolboxRoutePages.spec.mjs - changed JS file not collected as browser runtime coverage
-(70%) toolbox/idea-board/index.js - changed JS file with browser V8 coverage
+(64%) assets/theme-v2/js/tool-display-mode.js - changed JS file with browser V8 coverage
+(74%) toolbox/idea-board/index.js - changed JS file with browser V8 coverage
diff --git a/src/shared/toolbox/tool-metadata-inventory.js b/src/shared/toolbox/tool-metadata-inventory.js
index db04eac5b..6d2ed68fa 100644
--- a/src/shared/toolbox/tool-metadata-inventory.js
+++ b/src/shared/toolbox/tool-metadata-inventory.js
@@ -72,14 +72,14 @@ export const TOOL_REGISTRY = Object.freeze([
"id": "idea-board",
"name": "Idea Board",
"displayName": "Idea Board",
- "shortDescription": "Capture, compare, and shape game ideas in a table.",
+ "shortDescription": "Capture, compare, and shape game ideas.",
"shortLabel": "Idea Board",
"path": "idea-board",
"folderName": "idea-board",
"entryPoint": "idea-board/index.html",
"badge": "/assets/theme-v2/images/badges/game-design.png",
"tool": "/assets/theme-v2/images/tools/game-design.png",
- "description": "Capture, compare, and shape game ideas with notes under each idea row.",
+ "description": "Capture, compare, and shape game ideas.",
"category": "Idea",
"colorGroup": "tool-group-idea",
"active": true,
@@ -93,7 +93,7 @@ export const TOOL_REGISTRY = Object.freeze([
"progressChecklist": [
"Idea table workflow visible",
"Add Idea and Add Note actions remain inline",
- "Create Project remains unavailable until an idea is ready"
+ "Ready ideas show project actions in their row"
],
"deferred": false,
"hidden": false,
diff --git a/tests/playwright/tools/IdeaBoardTableNotes.spec.mjs b/tests/playwright/tools/IdeaBoardTableNotes.spec.mjs
index f5544ca88..38085a4d2 100644
--- a/tests/playwright/tools/IdeaBoardTableNotes.spec.mjs
+++ b/tests/playwright/tools/IdeaBoardTableNotes.spec.mjs
@@ -13,10 +13,13 @@ function restoreEnvValue(key, value) {
async function expectIdeaChevron(page, ideaId, iconName) {
const metrics = await page.locator(`[data-idea-board-idea-row='${ideaId}'] th`).evaluate((cell, targetIdeaId) => {
const label = cell.querySelector(".idea-board-idea-label");
+ const text = label.querySelector(".idea-board-idea-label__text");
const icon = cell.querySelector(`[data-idea-board-chevron='${targetIdeaId}']`);
const cellStyles = getComputedStyle(cell);
const labelStyles = getComputedStyle(label);
const iconStyles = getComputedStyle(icon);
+ const textRect = text.getBoundingClientRect();
+ const iconRect = icon.getBoundingClientRect();
return {
iconName: icon.dataset.ideaBoardChevronIcon,
labelDisplay: labelStyles.display,
@@ -24,7 +27,11 @@ async function expectIdeaChevron(page, ideaId, iconName) {
iconHeight: Number.parseFloat(iconStyles.height),
fontSize: Number.parseFloat(cellStyles.fontSize),
iconColor: iconStyles.backgroundColor,
+ iconBottom: iconRect.bottom,
+ iconLeft: iconRect.left,
textColor: cellStyles.color,
+ textBottom: textRect.bottom,
+ textLeft: textRect.left,
maskImage: iconStyles.getPropertyValue("-webkit-mask-image") || iconStyles.maskImage,
};
}, ideaId);
@@ -33,6 +40,8 @@ async function expectIdeaChevron(page, ideaId, iconName) {
expect(Math.abs(metrics.iconWidth - metrics.fontSize)).toBeLessThanOrEqual(1);
expect(Math.abs(metrics.iconHeight - metrics.fontSize)).toBeLessThanOrEqual(1);
expect(metrics.iconColor).toBe(metrics.textColor);
+ expect(metrics.iconLeft).toBeLessThan(metrics.textLeft);
+ expect(Math.abs(metrics.iconBottom - metrics.textBottom)).toBeLessThanOrEqual(2);
expect(metrics.maskImage).toContain(iconName);
}
@@ -92,7 +101,7 @@ async function expectExpandedNotesChildIndentation(page, ideaId, expectedInputRo
async function expectProductionCopy(page) {
await expect(page.locator("main")).not.toContainText(
- /\bDB-shaped\b|\bin-page data model\b|\buserId\b|\bideaId\b|\bnoteId\b|\bsystem flag\b|\bmetadata\b|\bseed\b|\bdebug\b|\bselected context\b|\bmock\b|\btest\b|\binternal implementation\b|\bplaceholder\b|\bproject records\b|\bmutating API\b|\bauth\b|\bAI\b|\bdatabase behavior\b/i,
+ /\bDB-shaped\b|\bin-page data model\b|\buserId\b|\bideaId\b|\bnoteId\b|\bsystem flag\b|\bmetadata\b|\bseed\b|\bdebug\b|\bselected context\b|\bmock\b|\btest\b|\binternal implementation\b|\bplaceholder\b|\bproject records\b|\bmutating API\b|\bserver\b|\bAPI\b|\blocal server\b|\bport\b|\bunderlying systems\b|\bauth\b|\bAI\b|\bdatabase behavior\b/i,
);
}
@@ -141,6 +150,28 @@ test("Idea Board uses accordion table ideas and notes", async ({ page }) => {
await expect(page.locator("[data-idea-board-add-idea-row]")).toHaveCount(1);
await expect(page.locator("[data-idea-board-add-idea]")).toHaveText("Add Idea");
await expectButtonLeftAligned(page, "[data-idea-board-add-idea]", "[data-idea-board-add-idea-row] > td");
+ await expect(page.locator("[data-idea-board-show-filter] summary")).toHaveText("Show");
+ const captionMetrics = await page.locator(".idea-board-table-caption").evaluate((caption) => {
+ const label = caption.querySelector("span");
+ const filter = caption.querySelector("[data-idea-board-show-filter]");
+ const labelRect = label.getBoundingClientRect();
+ const filterRect = filter.getBoundingClientRect();
+ return {
+ filterRight: filterRect.right,
+ filterTop: filterRect.top,
+ labelRight: labelRect.right,
+ labelTop: labelRect.top,
+ };
+ });
+ expect(captionMetrics.filterRight).toBeGreaterThan(captionMetrics.labelRight);
+ expect(Math.abs(captionMetrics.filterTop - captionMetrics.labelTop)).toBeLessThanOrEqual(4);
+ await page.locator("[data-idea-board-show-filter] summary").click();
+ await expect(page.locator("[data-idea-board-status-filter-option]")).toHaveCount(6);
+ const checkedStatuses = await page.locator("[data-idea-board-status-filter-option]:checked").evaluateAll((inputs) => (
+ inputs.map((input) => input.value)
+ ));
+ expect(checkedStatuses).toEqual(["New", "Exploring", "Refining", "Ready", "Project"]);
+ await expect(page.locator("[data-idea-board-status-filter-option][value='Archived']")).not.toBeChecked();
await expect(page.getByText(/another/i)).toHaveCount(0);
await expect(page.locator("[data-idea-board-notes-chevron]")).toHaveCount(0);
await expect(page.getByText("Selected idea context")).toHaveCount(0);
@@ -223,11 +254,19 @@ test("Idea Board uses accordion table ideas and notes", async ({ page }) => {
const ideaInputRow = page.locator("[data-idea-board-idea-input-row]").last();
await expect(ideaInputRow.locator("[data-idea-board-idea-action]")).toHaveText(["Save", "Cancel"]);
await expect(ideaInputRow.locator("[data-idea-board-idea-status-input]")).toHaveCount(1);
+ await expect(ideaInputRow.locator("[data-idea-board-idea-status-input] option")).toHaveText([
+ "New",
+ "Exploring",
+ "Refining",
+ "Ready",
+ "Project",
+ "Archived",
+ ]);
await expect(ideaInputRow.locator("td").nth(2)).toHaveText(/\d{4}-\d{2}-\d{2}/);
await expect(ideaInputRow.locator("td").nth(3)).toHaveText("0 Notes");
await page.locator("[data-idea-board-idea-input]").fill("Lantern Reef");
await page.locator("[data-idea-board-pitch-input]").fill("Guide light through a reef that rearranges at dusk.");
- await page.locator("[data-idea-board-idea-status-input]").selectOption("Parked");
+ await page.locator("[data-idea-board-idea-status-input]").selectOption("Refining");
await page.locator("[data-idea-board-idea-action='save']").click();
await expect(page.locator("[data-idea-board-idea-row='lantern-reef']")).toBeVisible();
await expect(page.locator("[data-idea-board-notes-count='lantern-reef']")).toHaveText("0 Notes");
@@ -236,9 +275,33 @@ test("Idea Board uses accordion table ideas and notes", async ({ page }) => {
await page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action='edit']").click();
await expect(page.locator("[data-idea-board-idea-input-row] [data-idea-board-idea-action]")).toHaveText(["Save", "Cancel"]);
await expect(page.locator("[data-idea-board-idea-status-input]")).toHaveCount(1);
- await page.locator("[data-idea-board-idea-status-input]").selectOption("Ready to Shape");
+ await page.locator("[data-idea-board-idea-status-input]").selectOption("Ready");
await page.locator("[data-idea-board-idea-action='save']").click();
- await expect(page.locator("[data-idea-board-idea-row='lantern-reef'] td").nth(1)).toHaveText("Ready to Shape");
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef'] td").nth(1)).toHaveText("Ready");
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action]")).toHaveText(["Edit", "Create Project", "Delete"]);
+ await page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action='create-project']").click();
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef'] td").nth(1)).toHaveText("Project");
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action]")).toHaveText(["Edit", "Open Project", "Archive"]);
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action='delete']")).toHaveCount(0);
+ await page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action='open-project']").click();
+ await expect(page.locator("[data-idea-board-status]")).toHaveText("Opening Lantern Reef.");
+ await page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action='archive']").click();
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef']")).toHaveCount(0);
+ await page.locator("[data-idea-board-status-filter-option][value='Archived']").check();
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef']")).toBeVisible();
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef'] td").nth(1)).toHaveText("Archived");
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action]")).toHaveText(["Restore", "Delete"]);
+ await page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action='restore']").click();
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef'] td").nth(1)).toHaveText("Project");
+ await page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action='archive']").click();
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action]")).toHaveText(["Restore", "Delete"]);
+ await page.locator("[data-idea-board-idea-row='lantern-reef'] [data-idea-board-idea-action='delete']").click();
+ await expect(page.locator("[data-idea-board-idea-row='lantern-reef']")).toHaveCount(0);
+ await page.locator("[data-idea-board-filter-clear-all]").click();
+ await expect(page.locator("[data-idea-board-idea-row]")).toHaveCount(0);
+ await expect(page.locator("[data-idea-board-add-idea]")).toBeVisible();
+ await page.locator("[data-idea-board-filter-select-all]").click();
+ await expect(page.locator("[data-idea-board-idea-row]")).toHaveCount(3);
expect(mutatingApiRequests).toEqual([]);
expect(failedRequests).toEqual([]);
diff --git a/tests/playwright/tools/ToolboxRoutePages.spec.mjs b/tests/playwright/tools/ToolboxRoutePages.spec.mjs
index b3033e10d..9f40a19ad 100644
--- a/tests/playwright/tools/ToolboxRoutePages.spec.mjs
+++ b/tests/playwright/tools/ToolboxRoutePages.spec.mjs
@@ -115,10 +115,13 @@ function restoreEnvValue(key, value) {
async function expectIdeaChevron(page, ideaId, iconName) {
const metrics = await page.locator(`[data-idea-board-idea-row='${ideaId}'] th`).evaluate((cell, targetIdeaId) => {
const label = cell.querySelector(".idea-board-idea-label");
+ const text = label.querySelector(".idea-board-idea-label__text");
const icon = cell.querySelector(`[data-idea-board-chevron='${targetIdeaId}']`);
const cellStyles = getComputedStyle(cell);
const labelStyles = getComputedStyle(label);
const iconStyles = getComputedStyle(icon);
+ const textRect = text.getBoundingClientRect();
+ const iconRect = icon.getBoundingClientRect();
return {
iconName: icon.dataset.ideaBoardChevronIcon,
labelDisplay: labelStyles.display,
@@ -126,7 +129,11 @@ async function expectIdeaChevron(page, ideaId, iconName) {
iconHeight: Number.parseFloat(iconStyles.height),
fontSize: Number.parseFloat(cellStyles.fontSize),
iconColor: iconStyles.backgroundColor,
+ iconBottom: iconRect.bottom,
+ iconLeft: iconRect.left,
textColor: cellStyles.color,
+ textBottom: textRect.bottom,
+ textLeft: textRect.left,
maskImage: iconStyles.getPropertyValue("-webkit-mask-image") || iconStyles.maskImage,
};
}, ideaId);
@@ -135,6 +142,8 @@ async function expectIdeaChevron(page, ideaId, iconName) {
expect(Math.abs(metrics.iconWidth - metrics.fontSize)).toBeLessThanOrEqual(1);
expect(Math.abs(metrics.iconHeight - metrics.fontSize)).toBeLessThanOrEqual(1);
expect(metrics.iconColor).toBe(metrics.textColor);
+ expect(metrics.iconLeft).toBeLessThan(metrics.textLeft);
+ expect(Math.abs(metrics.iconBottom - metrics.textBottom)).toBeLessThanOrEqual(2);
expect(metrics.maskImage).toContain(iconName);
}
@@ -194,7 +203,7 @@ async function expectExpandedNotesChildIndentation(page, ideaId, expectedInputRo
async function expectIdeaBoardProductionCopy(page) {
await expect(page.locator("main")).not.toContainText(
- /\bDB-shaped\b|\bin-page data model\b|\buserId\b|\bideaId\b|\bnoteId\b|\bsystem flag\b|\bmetadata\b|\bseed\b|\bdebug\b|\bselected context\b|\bmock\b|\btest\b|\binternal implementation\b|\bplaceholder\b|\bproject records\b|\bmutating API\b|\bauth\b|\bAI\b|\bdatabase behavior\b/i,
+ /\bDB-shaped\b|\bin-page data model\b|\buserId\b|\bideaId\b|\bnoteId\b|\bsystem flag\b|\bmetadata\b|\bseed\b|\bdebug\b|\bselected context\b|\bmock\b|\btest\b|\binternal implementation\b|\bplaceholder\b|\bproject records\b|\bmutating API\b|\bserver\b|\bAPI\b|\blocal server\b|\bport\b|\bunderlying systems\b|\bauth\b|\bAI\b|\bdatabase behavior\b/i,
);
}
@@ -302,7 +311,6 @@ test("Idea Board launches from Toolbox with accordion table notes model", async
"Workflow",
"Status",
"Idea Table",
- "Create Project",
"Notes Governance",
"Diagnostics",
]);
@@ -335,12 +343,10 @@ test("Idea Board launches from Toolbox with accordion table notes model", async
await expect(page.locator("[data-idea-board-add-note='top-thoughts']")).toBeVisible();
await expect(page.locator("[data-idea-board-add-note='top-thoughts']")).toHaveText("Add Note");
await expectExpandedNotesChildIndentation(page, "top-thoughts");
- await expect(page.locator("[data-idea-board-create-project]")).toBeVisible();
- await expect(page.locator("[data-idea-board-create-project]")).toBeDisabled();
+ await expect(page.locator("[data-idea-board-create-project]")).toHaveCount(0);
await expect(page.locator("style, [style], script:not([src])")).toHaveCount(0);
await expect(page.locator("script[src='toolbox/idea-board/index.js']")).toHaveCount(1);
mutatingApiRequests.length = 0;
- await page.locator("[data-idea-board-create-project]").evaluate((button) => button.click());
await page.locator("[data-idea-board-add-note='top-thoughts']").click();
await page.locator("[data-idea-board-note-input]").fill("Capture traversal risks before project creation.");
await page.locator("[data-idea-board-note-action='save']").click();
@@ -348,6 +354,16 @@ test("Idea Board launches from Toolbox with accordion table notes model", async
await page.locator("[data-idea-board-idea-cell='clockwork-courier']").click();
await expect(page.locator("[data-idea-board-expanded-row='clockwork-courier']")).toBeVisible();
await expect(page.locator("[data-idea-board-notes-table='clockwork-courier']")).not.toContainText("Capture traversal risks before project creation.");
+ await page.locator("[data-idea-board-add-idea]").click();
+ await page.locator("[data-idea-board-idea-input]").fill("Launch Tile");
+ await page.locator("[data-idea-board-pitch-input]").fill("Turn a polished board idea into a project.");
+ await page.locator("[data-idea-board-idea-status-input]").selectOption("Ready");
+ await page.locator("[data-idea-board-idea-action='save']").click();
+ await expect(page.locator("[data-idea-board-idea-row='launch-tile'] [data-idea-board-idea-action]")).toHaveText(["Edit", "Create Project", "Delete"]);
+ await page.locator("[data-idea-board-idea-row='launch-tile'] [data-idea-board-idea-action='create-project']").click();
+ await expect(page.locator("[data-idea-board-idea-row='launch-tile'] td").nth(1)).toHaveText("Project");
+ await expect(page.locator("[data-idea-board-idea-row='launch-tile'] [data-idea-board-idea-action]")).toHaveText(["Edit", "Open Project", "Archive"]);
+ await expect(page.locator("[data-idea-board-idea-row='launch-tile'] [data-idea-board-idea-action='delete']")).toHaveCount(0);
expect(mutatingApiRequests).toEqual([]);
expect(failedRequests).toEqual([]);
diff --git a/toolbox/idea-board/index.html b/toolbox/idea-board/index.html
index 214a303fb..422d67b1b 100644
--- a/toolbox/idea-board/index.html
+++ b/toolbox/idea-board/index.html
@@ -18,7 +18,7 @@
Toolbox
Idea Board
-
Capture, compare, and shape game ideas in one table.
+
Capture, compare, and shape game ideas.
@@ -38,7 +38,7 @@ Idea Filters
Status
-
Use status to show where each idea stands: New, Exploring, Parked, or Ready to Shape.
+
Use status to show where each idea stands: New, Exploring, Refining, Ready, Project, or Archived.