Refocus responsive layouts on compact desktop use
All checks were successful
Deploy Sokko G / deploy (push) Successful in 19s

This commit is contained in:
Shinuwa 2026-10-05 15:47:46 +02:00
parent 96d058293d
commit 0ac1a0974e
27 changed files with 610 additions and 190 deletions

View file

@ -76,14 +76,15 @@ export function validateSiteContent(site) {
"navigation.games",
"navigation.library",
"navigation.about",
"navigation.mobileLibrary",
"navigation.mobileGames",
"sidebar.badge",
"sidebar.note",
"topbar.dashboard",
"topbar.toolbox",
"topbar.library",
"topbar.games",
"topbar.gameViewLabel",
"topbar.guideView",
"topbar.toolboxView",
"gamesPage.eyebrow",
"gamesPage.title",
"gamesPage.description",

View file

@ -34,7 +34,9 @@ test("vite entrypoint and app shell are wired", async () => {
assert.match(shell, /dragon-sidebar\.png/);
assert.match(shell, /ImportButton/);
assert.match(shell, /compactSidebar/);
assert.match(shell, /compactSidebar = Boolean\(drawerGameId\)/);
assert.match(shell, /reducedSidebar/);
assert.match(shell, /compact-game-view-switch/);
assert.doesNotMatch(shell, /mobile-nav/);
assert.doesNotMatch(shell, /import\.meta\.env\.DEV \|\| Boolean\(drawerGameId\)/);
assert.match(shell, /data-variant=\{compactSidebar \? "compact"/);
assert.match(shell, /toolbox-drawer-open/);

View file

@ -0,0 +1,14 @@
// Rôle : vérifie que les alertes visibles suivent la vue toolbox réellement affichée.
import test from "node:test";
import assert from "node:assert/strict";
import { getVisibleToolboxIds } from "../website/src/hooks/useToolboxAlerts.js";
test("a mounted compact drawer is visible only while its toolbox view is selected", () => {
const links = { mhwilds: "linked" };
assert.deepEqual([...getVisibleToolboxIds("/games/mhwilds/monsters", "", links)], []);
assert.deepEqual([...getVisibleToolboxIds("/games/mhwilds/monsters", "mhwilds", links)], ["linked"]);
});
test("a full toolbox page remains visible independently of the game drawer", () => {
assert.deepEqual([...getVisibleToolboxIds("/toolbox/personal", "", {})], ["personal"]);
});