fix: show unsaved F95 covers and clarify import results

frontend/tests/f95-browser.test.mjs

@@ -108,6 +108,7 @@ test("F95 personal cookies: decline, expired session, retry, delete and no paren
     assert.equal(await page.evaluate(() => window.submits), 0);
     assert.equal(await page.evaluate(() => localStorage.length), 0);
 
+    await page.getByText("Настройки F95zone", {exact: true}).click();
     await page.getByRole("button", {name: "Забыть cookie F95zone"}).click();
     await page.getByText("Ваши сохранённые cookie F95zone удалены.").waitFor();
     assert.equal(deleted, 1);
@@ -125,3 +126,68 @@ test("F95 personal cookies: decline, expired session, retry, delete and no paren
     await new Promise(resolve => server.close(resolve));
   }
 });
+
+test("new game shows an unsaved F95 cover and aligns metadata fields", {
+  skip: !process.env.PGAMES_PLAYWRIGHT_PATH,
+}, async () => {
+  const { chromium } = await import(pathToFileURL(process.env.PGAMES_PLAYWRIGHT_PATH + "/index.mjs").href);
+  const compiled = await build({stdin: {contents: `
+    import {createElement as h} from 'react';
+    import {createRoot} from 'react-dom/client';
+    import {MemoryRouter} from 'react-router-dom';
+    import {TranslationRunProvider} from './translator/runner';
+    import {UploadProvider} from './uploads';
+    import {NewGame} from './pages/NewGame';
+    createRoot(document.querySelector('main')).render(h(MemoryRouter, {initialEntries: ['/games/new']},
+      h(TranslationRunProvider, null, h(UploadProvider, null, h(NewGame)))));`,
+    resolveDir: fileURLToPath(new URL("../src/", import.meta.url)), loader: "tsx"},
+    bundle: true, write: false, format: "iife", platform: "browser", logLevel: "silent"});
+  const css = readFileSync(new URL("../src/styles.css", import.meta.url), "utf8");
+  let blobRequests = 0;
+  const server = createServer((req, res) => {
+    if (req.url === "/styles.css") { res.setHeader("Content-Type", "text/css"); res.end(css); return; }
+    if (req.url === "/bundle.js") { res.setHeader("Content-Type", "application/javascript"); res.end(compiled.outputFiles[0].text); return; }
+    if (req.url.startsWith("/blobs/")) { blobRequests++; res.writeHead(404); res.end(); return; }
+    if (req.url === "/api/metadata/f95") {
+      res.setHeader("Content-Type", "application/json");
+      res.end(JSON.stringify({url: "https://f95zone.to/threads/example.123/", title: "Mist", description: "A story",
+        tags: ["adventure", "survival"], cover_hash: "a".repeat(64) + ".webp",
+        cover_preview: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jCTkAAAAASUVORK5CYII=",
+        cover_warning: null, auth_required: false, metadata_available: true})); return;
+    }
+    res.setHeader("Content-Type", "text/html");
+    res.end('<!doctype html><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/styles.css"><main></main><script src="/bundle.js"></script>');
+  });
+  await new Promise(resolve => server.listen(0, "127.0.0.1", resolve));
+  let browser;
+  try {
+    browser = await chromium.launch({headless: true, executablePath: process.env.PGAMES_CHROMIUM_EXECUTABLE});
+    const page = await browser.newPage({colorScheme: "dark", viewport: {width: 947, height: 870}});
+    page.setDefaultTimeout(10000);
+    await page.goto(`http://127.0.0.1:${server.address().port}`);
+    await page.locator('input[type="file"]').setInputFiles({name: "MIST-1.0.3-pc.zip", mimeType: "application/zip", buffer: Buffer.from("archive")});
+    await page.getByPlaceholder("https://f95zone.to/threads/…").fill("https://f95zone.to/threads/example.123/");
+    await page.getByRole("button", {name: "Подтянуть", exact: true}).click();
+    await page.getByText("Данные из F95zone загружены", {exact: true}).waitFor();
+    await page.getByRole("img", {name: "Обложка игры из F95zone"}).evaluate(image => image.decode());
+    assert.equal(blobRequests, 0, "unsaved covers must not use a route that requires a saved game");
+    assert.equal(await page.getByRole("textbox", {name: "Название", exact: true}).inputValue(), "Mist");
+    assert.equal(await page.getByRole("textbox", {name: /^Теги/}).inputValue(), "adventure, survival");
+    const title = await page.getByRole("textbox", {name: "Название", exact: true}).boundingBox();
+    const tags = await page.getByRole("textbox", {name: /^Теги/}).boundingBox();
+    assert.ok(Math.abs(title.y - tags.y) < 1, "name and tags inputs align despite the tags hint");
+    for (const width of [947, 375]) {
+      await page.setViewportSize({width, height: 870});
+      assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), true);
+      if (process.env.PGAMES_F95_SCREENSHOT_DIR) {
+        await page.screenshot({path: `${process.env.PGAMES_F95_SCREENSHOT_DIR}/f95-result-${width}.png`, fullPage: true});
+      }
+    }
+    await page.getByRole("button", {name: "Убрать обложку", exact: true}).click();
+    assert.equal(await page.getByRole("img", {name: "Обложка игры из F95zone"}).count(), 0);
+    assert.equal(await page.getByRole("textbox", {name: "Название", exact: true}).inputValue(), "Mist");
+  } finally {
+    await browser?.close();
+    await new Promise(resolve => server.close(resolve));
+  }
+});