Add responsive game filters and hybrid toolbox drawer

e2e/toolbox-drawer-layout.spec.js

@@ -0,0 +1,81 @@
+// Rôle : vérifie la réservation hybride, le redimensionnement et le mode mobile du drawer toolbox.
+import { test, expect } from "@playwright/test";
+
+async function openDrawer(page) {
+  await page.locator(".drawer-button").click();
+  const drawer = page.locator("#toolbox-drawer");
+  await expect(drawer.locator(".drawer-panel")).toBeVisible();
+  return drawer;
+}
+
+async function resizeDrawer(page, deltaX) {
+  const handle = page.locator(".drawer-resize-handle");
+  const bounds = await handle.boundingBox();
+  await page.mouse.move(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(bounds.x + bounds.width / 2 + deltaX, bounds.y + bounds.height / 2);
+  await page.mouse.up();
+}
+
+test("drawer reserves 700px while additional width overlays the page", async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 900 });
+  await page.goto("/#/games/mhwilds/monsters");
+
+  const drawer = await openDrawer(page);
+  const panel = drawer.locator(".drawer-panel");
+  const shell = page.locator(".app-shell");
+  const contentShell = page.locator(".content-shell");
+  const main = page.locator(".content-shell > main");
+  const sidebar = page.locator(".sidebar");
+  await expect(shell).toHaveClass(/toolbox-drawer-open/);
+  await expect(sidebar).toHaveAttribute("data-variant", "compact");
+  await expect(sidebar).toHaveCSS("width", "72px");
+  await expect(drawer.locator(".drawer-backdrop")).toHaveCount(0);
+
+  const contentBounds = await contentShell.boundingBox();
+  const initialPanelBounds = await panel.boundingBox();
+  const initialMainBounds = await main.boundingBox();
+  const topbarBounds = await page.locator(".topbar").boundingBox();
+  expect(initialPanelBounds.width).toBeCloseTo(700, 0);
+  expect(initialPanelBounds.x).toBeCloseTo(contentBounds.x + contentBounds.width - 700, 0);
+  expect(topbarBounds.x + topbarBounds.width).toBeCloseTo(1280, 0);
+
+  const search = page.locator(".nds-filter-search input").first();
+  await search.fill("rath");
+  await expect(search).toHaveValue("rath");
+  await expect(panel).toBeVisible();
+
+  await resizeDrawer(page, -100);
+  await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(800, 0);
+  const expandedPanelBounds = await panel.boundingBox();
+  const expandedMainBounds = await main.boundingBox();
+  expect(expandedPanelBounds.x).toBeCloseTo(initialPanelBounds.x - 100, 0);
+  expect(expandedMainBounds.x).toBeCloseTo(initialMainBounds.x, 0);
+  expect(expandedMainBounds.width).toBeCloseTo(initialMainBounds.width, 0);
+  expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(1280);
+
+  await resizeDrawer(page, 300);
+  await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(700, 0);
+
+  await resizeDrawer(page, -100);
+  await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(800, 0);
+  await drawer.getByRole("button", { name: "Fermer", exact: true }).click();
+  await expect(drawer).toHaveCount(0);
+  await expect(sidebar).not.toHaveAttribute("data-variant");
+  await expect(sidebar).toHaveCSS("width", "248px");
+  const reopenedDrawer = await openDrawer(page);
+  await expect.poll(async () => (await reopenedDrawer.locator(".drawer-panel").boundingBox()).width).toBeCloseTo(700, 0);
+});
+
+test("drawer becomes a non-resizable full-width overlay below 700px", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 900 });
+  await page.goto("/#/games/mhwilds/monsters");
+
+  const drawer = await openDrawer(page);
+  const panel = drawer.locator(".drawer-panel");
+  const bounds = await panel.boundingBox();
+  expect(bounds.x).toBeCloseTo(0, 0);
+  expect(bounds.width).toBeCloseTo(390, 0);
+  await expect(drawer.locator(".drawer-resize-handle")).toHaveCSS("display", "none");
+  expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
+});