feat(legacy): say the old pages will be removed in a future release (#615)

Each old page shows a notice with a link to where its job lives in the
workspace. The pages keep working.

tests/browser/legacy-removal-notice.spec.mjs

@@ -0,0 +1,47 @@
+// #615: each old page says it will be removed and links to where its job lives now. The page keeps working, and the
+// notice takes its own room: nothing is pushed off a page whose layout fills the window.
+import { startCoverage, saveCoverage } from '../../tools/vendor/browser-coverage.mjs';
+import { test, expect } from './fixtures.mjs';
+
+const PAGES = Object.freeze([
+    { path: '/prompt_manager/admin', section: 'library', heading: 'Prompt library' },
+    { path: '/prompt_manager/gallery', section: 'images', heading: 'Images' },
+    { path: '/prompt_manager/gallery.html', section: 'inspect', heading: 'Inspect a file' },
+]);
+
+test.beforeEach(async ({ page, request, browserName }) => {
+    await startCoverage(page, browserName);
+    await expect(await request.post('/__test__/reset', {})).toBeOK();
+    await page.addInitScript(() => {
+        localStorage.setItem('pm_update_notice_dismissed', '3.2.0');
+        localStorage.setItem('gallerySettings', JSON.stringify({ checkThumbnailsAtStartup: false }));
+    });
+});
+
+test.afterEach(async ({ page, browserName }) => {
+    await saveCoverage(page, browserName);
+});
+
+for (const { path, section, heading } of PAGES) {
+    test(`${path} says it will be removed and links to ${section}`, async ({ page }) => {
+        await page.goto(path);
+        const notice = page.locator('#legacy-removal-notice');
+        await expect(notice).toBeVisible();
+        await expect(notice).toContainText('This page will be removed in a future release.');
+        await notice.getByRole('link', { name: 'Open the workspace' }).click();
+        await expect(page).toHaveURL(new RegExp(`/prompt_manager/workspace#/${section}$`));
+        await expect(page.locator('#workspace-main h1')).toHaveText(heading);
+    });
+}
+
+test('the notice leaves the metadata page filling the window', async ({ page }) => {
+    await page.goto('/prompt_manager/gallery.html');
+    await expect(page.locator('#legacy-removal-notice')).toBeVisible();
+    const { bottom, height, scroll } = await page.locator('#image-area').evaluate(area => ({
+        bottom: area.getBoundingClientRect().bottom,
+        height: window.innerHeight,
+        scroll: document.documentElement.scrollHeight,
+    }));
+    expect(bottom).toBeLessThanOrEqual(height);
+    expect(scroll).toBeLessThanOrEqual(height);
+});

web/admin.html

@@ -20,6 +20,7 @@
     <script src="lib/viewerjs/viewer.min.js"></script>
 </head>
 <body class="bg-pm-primary text-pm min-h-screen text-[13px]">
+    <div id="legacy-removal-notice" role="note" class="bg-pm-surface border-b border-pm px-4 py-2 text-pm" style="font-size: 13px;">This page will be removed in a future release. Its features are moving to the new workspace. <a href="workspace#/library" style="text-decoration: underline;">Open the workspace</a></div>
     <div class="min-h-screen flex flex-col">
         <!-- Header -->
         <header class="bg-pm-surface border-b border-pm px-4 py-2" style="min-height: 2.5rem;">

web/gallery.html

@@ -28,6 +28,7 @@
     </style>
 </head>
 <body class="bg-pm-primary text-pm min-h-screen">
+    <div id="legacy-removal-notice" role="note" class="bg-pm-surface border-b border-pm px-4 py-2 text-pm" style="font-size: 13px;">This page will be removed in a future release. Its features are moving to the new workspace. <a href="workspace#/images" style="text-decoration: underline;">Open the workspace</a></div>
     <div class="min-h-screen flex flex-col">
         <!-- Header -->
         <header class="bg-pm-surface border-b border-pm px-4 py-2">

web/metadata.html

@@ -361,8 +361,9 @@ Seed: ${currentWorkflowData.seed || 'Unknown'}`;
         });
     </script>
 </head>
-<body class="bg-pm-primary text-pm font-sans overflow-hidden">
-    <div class="h-screen flex">
+<body class="bg-pm-primary text-pm font-sans overflow-hidden" style="display: flex; flex-direction: column; height: 100vh;">
+    <div id="legacy-removal-notice" role="note" class="bg-pm-surface border-b border-pm px-4 py-2 text-pm" style="font-size: 13px;">This page will be removed in a future release. Its features are moving to the new workspace. <a href="workspace#/inspect" style="text-decoration: underline;">Open the workspace</a></div>
+    <div class="flex" style="flex: 1; min-height: 0;">
         <!-- Main Image Area -->
         <div id="image-area" class="flex-1 flex items-center justify-center p-3 bg-pm-primary relative border-2 border-dashed border-transparent transition-colors min-w-0">
             <!-- Upload prompt overlay -->