Skip to content

Commit d525bd8

Browse files
ToolboxAidToolboxAid
committed
Merge remote-tracking branch 'origin/main' into PR_26180_BRAVO_002-complete-messages-creator-tool
# Conflicts: # dev/reports/codex_changed_files.txt # dev/reports/codex_review.diff
2 parents ba3bcf5 + 994b844 commit d525bd8

142 files changed

Lines changed: 5201 additions & 1296 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,7 @@ details.vertical-accordion summary::-webkit-details-marker {
7575
}
7676

7777
.horizontal-accordion-toggle__icon,
78-
.vertical-accordion__chevron,
79-
.tool-display-mode__chevron {
78+
.vertical-accordion__chevron {
8079
--accordion-button-border: var(--line);
8180
--accordion-button-background: var(--panel-soft);
8281
--accordion-button-color: var(--gold);
@@ -109,8 +108,7 @@ details.vertical-accordion summary::-webkit-details-marker {
109108
margin-left: auto
110109
}
111110

112-
.vertical-accordion__chevron .theme-icon,
113-
.tool-display-mode__chevron .theme-icon {
111+
.vertical-accordion__chevron .theme-icon {
114112
height: var(--space-14);
115113
width: var(--space-14)
116114
}

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

Lines changed: 19 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -275,39 +275,32 @@ body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
275275
background: var(--panel);
276276
box-shadow: var(--shadow-lg);
277277
overflow: hidden;
278-
display: flex;
279-
align-items: center;
280-
justify-content: center;
281-
gap: var(--space-12)
278+
display: block
282279
}
283280

284281
.tool-display-mode summary {
285282
color: var(--gold);
286283
font-weight: var(--font-weight-heavy);
287284
cursor: pointer;
288285
list-style: none;
289-
padding: var(--space-10) var(--space-44) var(--space-10) var(--space-10);
286+
min-width: var(--space-0);
287+
padding: var(--space-10);
290288
display: flex;
291289
align-items: center;
292-
justify-content: center;
290+
justify-content: flex-start;
293291
gap: var(--space-10);
294-
flex: 0 0 auto
292+
width: 100%
295293
}
296294

297295
.tool-display-mode summary::-webkit-details-marker {
298296
display: none
299297
}
300298

301299
.tool-display-mode__mode-icon {
302-
color: var(--cyan)
303-
}
304-
305-
.tool-display-mode__chevron {
306-
position: absolute;
307-
right: var(--space-12);
308-
top: 50%;
309-
transform: translateY(-50%);
310-
z-index: var(--z-index-sm)
300+
color: var(--gold);
301+
height: calc(var(--icon-size-sm) * 2.6);
302+
margin-left: auto;
303+
width: calc(var(--icon-size-sm) * 2.6)
311304
}
312305

313306
.tool-display-mode__badge {
@@ -320,90 +313,38 @@ body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
320313
background: transparent
321314
}
322315

323-
.tool-display-mode__body {
324-
display: grid;
325-
grid-template-columns: auto minmax(var(--space-0), 1fr);
326-
grid-template-rows: auto auto;
327-
align-items: center;
328-
column-gap: var(--space-15);
329-
row-gap: var(--space-8);
330-
min-width: var(--space-0);
331-
padding: var(--space-10) var(--space-14) var(--space-10) var(--space-0)
332-
}
333-
334-
.tool-display-mode__identity-row {
335-
display: contents
336-
}
337-
338-
.tool-display-mode__navigation-row {
339-
grid-column: 2;
340-
grid-row: 2;
341-
display: flex;
342-
align-items: center;
343-
gap: var(--space-14);
344-
flex-wrap: wrap
345-
}
346-
347-
.tool-display-mode__navigation-link {
348-
align-items: center;
349-
color: var(--text);
350-
display: inline-flex;
351-
gap: var(--space-6);
352-
line-height: var(--line-height-tight)
353-
}
354-
355-
.tool-display-mode__navigation-link:hover,
356-
.tool-display-mode__navigation-link:focus-visible {
357-
color: var(--gold)
358-
}
359-
360-
.tool-display-mode__navigation-link--disabled {
361-
color: var(--muted)
362-
}
363-
364-
.tool-display-mode__navigation-icon {
365-
color: currentColor
366-
}
367-
368316
.tool-display-mode__character {
369-
grid-column: 1;
370-
grid-row: 1 / span 2;
371317
width: 225px;
372318
height: 127px;
373319
object-fit: contain;
374320
display: block;
375321
flex: 0 0 auto
376322
}
377323

378-
.tool-display-mode__fullscreen-name {
379-
display: none;
380-
white-space: nowrap
381-
}
382-
383-
.tool-display-mode__description {
384-
grid-column: 2;
385-
grid-row: 1;
324+
.tool-display-mode__tool-name {
386325
color: var(--gold);
326+
flex: 1 1 auto;
387327
font-weight: var(--font-weight-heavy);
328+
min-width: var(--space-0);
388329
overflow: hidden;
330+
text-align: center;
389331
text-overflow: ellipsis;
390332
white-space: nowrap
391333
}
392334

393335
body.tool-focus-mode .tool-display-mode {
394336
border-color: var(--line);
395337
background: var(--panel);
396-
box-shadow: var(--shadow-lg);
397-
justify-content: center
338+
box-shadow: var(--shadow-lg)
398339
}
399340

400-
body.tool-focus-mode .tool-display-mode__fullscreen-name {
401-
display: inline
341+
body.tool-focus-mode .tool-display-mode__badge {
342+
width: 64px;
343+
height: 64px
402344
}
403345

404-
body.tool-focus-mode .tool-display-mode__badge {
405-
width: 32px;
406-
height: 32px
346+
body.tool-focus-mode .tool-display-mode__character {
347+
display: none
407348
}
408349

409350
.side-menu a {

‎assets/theme-v2/js/tool-display-mode.js‎

Lines changed: 12 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,6 @@
7373
document.querySelectorAll("details.vertical-accordion").forEach(wireVerticalAccordionChevron);
7474
}
7575

76-
function updateToolDisplayModeChevron() {
77-
const iconName = displayMode.open ? "chevron-up" : "chevron-down";
78-
const shell = createChevronShell(iconName, "tool-display-mode__chevron", "tool-display-mode__chevron-icon");
79-
replaceIconNode(summary, ":scope > .tool-display-mode__chevron", shell);
80-
}
81-
8276
function updateToolDisplayModeModeIcon() {
8377
const iconName = document.body.classList.contains("tool-focus-mode") || document.fullscreenElement
8478
? "exit-fullscreen"
@@ -107,7 +101,6 @@
107101
function refreshThemeIcons() {
108102
refreshVerticalAccordionChevrons();
109103
updateToolDisplayModeModeIcon();
110-
updateToolDisplayModeChevron();
111104
refreshHorizontalToggleIcons();
112105
}
113106

@@ -146,67 +139,27 @@
146139
const summary = document.createElement("summary");
147140
summary.setAttribute("aria-label", "Tool Display Mode");
148141
summary.title = "Tool Display Mode";
149-
summary.appendChild(createThemeIconNode("fullscreen", "layout-icon tool-display-mode__mode-icon"));
150142

151143
const badge = document.createElement("img");
152144
badge.className = "tool-display-mode__badge";
153145
badge.src = publicImageSource(slot.dataset.toolIconSrc, "badges");
154146
badge.alt = toolName + " badge";
155147
summary.appendChild(badge);
156148

157-
const fullscreenName = document.createElement("span");
158-
fullscreenName.className = "tool-display-mode__fullscreen-name";
159-
fullscreenName.textContent = toolName;
160-
summary.appendChild(fullscreenName);
161-
displayMode.appendChild(summary);
162-
displayMode.addEventListener("toggle", updateToolDisplayModeChevron);
163-
164-
const body = document.createElement("div");
165-
body.className = "tool-display-mode__body";
166-
167-
const identityRow = document.createElement("div");
168-
identityRow.className = "tool-display-mode__identity-row content-cluster";
169-
identityRow.dataset.toolDisplayModeRow = "identity";
149+
const toolNameLabel = document.createElement("span");
150+
toolNameLabel.className = "tool-display-mode__tool-name";
151+
toolNameLabel.textContent = toolName;
152+
summary.appendChild(toolNameLabel);
170153

171154
const character = document.createElement("img");
172155
character.className = "tool-display-mode__character";
173156
character.src = publicImageSource(slot.dataset.toolCharacterSrc, "characters");
174157
character.alt = toolName + " character";
175-
identityRow.appendChild(character);
176-
177-
const description = document.createElement("span");
178-
description.className = "tool-display-mode__description";
179-
description.textContent = toolName;
180-
identityRow.appendChild(description);
181-
body.appendChild(identityRow);
182-
displayMode.appendChild(body);
183-
slot.replaceWith(displayMode);
158+
summary.appendChild(character);
184159

185-
function createNavigationControl(direction, target) {
186-
const controlLabel = direction === "previous" ? "Previous" : "Next";
187-
const dataAttribute = direction === "previous" ? "toolNavPrevious" : "toolNavNext";
188-
const iconName = direction === "previous" ? "chevron-left" : "chevron-right";
189-
const icon = createThemeIconNode(iconName, "layout-icon tool-display-mode__navigation-icon");
190-
const label = document.createTextNode(controlLabel + ": " + (target?.label || "Unavailable"));
191-
192-
if (!target || target.disabled) {
193-
const disabledText = document.createElement("span");
194-
disabledText.className = "pill tool-display-mode__navigation-link tool-display-mode__navigation-link--disabled";
195-
disabledText.dataset[dataAttribute] = "disabled";
196-
disabledText.append(icon, label);
197-
return disabledText;
198-
}
199-
200-
const link = document.createElement("a");
201-
link.className = "tool-display-mode__navigation-link";
202-
link.href = target.href;
203-
link.dataset[dataAttribute] = target.kind;
204-
if (target.group) {
205-
link.dataset.toolNavGroup = target.group;
206-
}
207-
link.append(icon, label);
208-
return link;
209-
}
160+
summary.appendChild(createThemeIconNode("fullscreen", "layout-icon tool-display-mode__mode-icon"));
161+
displayMode.appendChild(summary);
162+
slot.replaceWith(displayMode);
210163

211164
function applyRegistryImages(registry) {
212165
const registryTool = registry.getToolBySlug(toolSlug);
@@ -238,37 +191,26 @@
238191
leftColumnTitle.textContent = registryName;
239192
}
240193
badge.alt = registryName + " badge";
241-
fullscreenName.textContent = registryName;
194+
toolNameLabel.textContent = registryName;
242195
character.alt = registryName + " character";
243-
description.textContent = registryName;
244196
badge.src = registry.getToolImageSource(registryTool, "badge");
245197
character.src = registry.getToolImageSource(registryTool, "tool");
246198
}
247199

248-
async function renderToolNavigation() {
200+
async function applyRegistryDisplayData() {
249201
try {
250202
const registry = await import("/toolbox/tool-registry-api-client.js");
251203
const registryDiagnostic = registry.getToolRegistryApiDiagnostic();
252204
if (registryDiagnostic) {
253205
throw new Error(registryDiagnostic);
254206
}
255-
const navigation = registry.getToolNavigationTargets(toolSlug);
256207
applyRegistryImages(registry);
257-
const navigationRow = document.createElement("nav");
258-
navigationRow.className = "tool-display-mode__navigation-row content-cluster";
259-
navigationRow.dataset.toolDisplayModeRow = "navigation";
260-
navigationRow.setAttribute("aria-label", "Tool build-order navigation");
261-
navigationRow.append(
262-
createNavigationControl("previous", navigation.previous),
263-
createNavigationControl("next", navigation.next)
264-
);
265-
body.appendChild(navigationRow);
266208
} catch (error) {
267-
console.warn("Tool navigation could not be loaded.", error);
209+
console.warn("Tool display mode registry metadata could not be loaded.", error);
268210
}
269211
}
270212

271-
renderToolNavigation();
213+
applyRegistryDisplayData();
272214

273215
async function enterToolMode() {
274216
document.body.classList.add("tool-focus-mode");
@@ -317,7 +259,6 @@
317259
});
318260

319261
refreshVerticalAccordionChevrons();
320-
updateToolDisplayModeChevron();
321262

322263
document.querySelectorAll(".tool-workspace").forEach(function (workspace) {
323264
const columns = workspace.querySelectorAll(":scope > .tool-column");

0 commit comments

Comments
 (0)