feat(qr-generate): register preview panel, update descriptions, update e2e test

apps/web/src/lib/tool-registry.tsx

@@ -130,6 +130,11 @@ const QrGenerateSettings = lazy(() =>
     default: m.QrGenerateSettings,
   })),
 );
+const QrGeneratePreview = lazy(() =>
+  import("@/components/tools/qr-generate-preview").then((m) => ({
+    default: m.QrGeneratePreview,
+  })),
+);
 const BarcodeReadSettings = lazy(() =>
   import("@/components/tools/barcode-read-settings").then((m) => ({
     default: m.BarcodeReadSettings,
@@ -276,7 +281,10 @@ export const toolRegistry = new Map<string, ToolRegistryEntry>([
   ["compare", { displayMode: "before-after", Settings: CompareSettings }],
   ["find-duplicates", { displayMode: "before-after", Settings: FindDuplicatesSettings }],
   ["color-palette", { displayMode: "before-after", Settings: ColorPaletteSettings }],
-  ["qr-generate", { displayMode: "no-dropzone", Settings: QrGenerateSettings }],
+  [
+    "qr-generate",
+    { displayMode: "no-dropzone", Settings: QrGenerateSettings, ResultsPanel: QrGeneratePreview },
+  ],
   ["barcode-read", { displayMode: "before-after", Settings: BarcodeReadSettings }],
 
   // Layout & Composition

packages/shared/src/constants.ts

@@ -230,7 +230,7 @@ export const TOOLS: Tool[] = [
   {
     id: "qr-generate",
     name: "QR Code Generator",
-    description: "Generate QR codes from text or URLs",
+    description: "Generate styled QR codes with custom colors, patterns, and logos",
     category: "utilities",
     icon: "QrCode",
     route: "/qr-generate",

packages/shared/src/i18n/en.ts

@@ -88,7 +88,7 @@ export const en = {
     "color-palette": { name: "Color Palette", description: "Extract dominant colors from image" },
     "qr-generate": {
       name: "QR Code Generator",
-      description: "Generate QR codes from text or URLs",
+      description: "Generate styled QR codes with custom colors, patterns, and logos",
     },
     "barcode-read": {
       name: "Barcode Reader",

tests/e2e/tools-process.spec.ts

@@ -148,12 +148,13 @@ test.describe("Tool processing (core tools)", () => {
 
   test("qr-generate creates QR code without file upload", async ({ loggedInPage: page }) => {
     await page.goto("/qr-generate");
-    // Fill in QR text
+    // Fill in URL input (client-side generation, live preview)
-    await page.locator("textarea").first().fill("https://example.com");
+    await page.getByTestId("qr-input-url").fill("https://example.com");
-    await page.getByRole("button", { name: /generate qr/i }).click();
+    // Verify the live preview rendered (canvas or svg inside the preview area)
-    await waitForProcessing(page);
+    await expect(page.locator("canvas, svg").first()).toBeVisible({ timeout: 5000 });
-    // QR has a "Download QR Code" button in the left panel
+    // Download button should be enabled
-    await expect(page.getByText(/download qr/i).first()).toBeVisible({ timeout: 15_000 });
+    const downloadBtn = page.getByTestId("qr-generate-download");
+    await expect(downloadBtn).toBeEnabled();
   });
 
   test("vectorize processes image", async ({ loggedInPage: page }) => {