From 7ee284005675b9e3ead784df2d387442c21fba52 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 22 Oct 2026 16:22:29 +0200
Subject: [PATCH 1/2] Light fill on the Preview button while the preview is
 open

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../Factory/Preview/PreviewToggle.test.ts     | 37 +++++++++++++++++++
 .../Factory/Preview/PreviewToggle.vue         |  8 +++-
 2 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/components/Factory/Preview/PreviewToggle.test.ts

diff --git a/resources/js/components/Factory/Preview/PreviewToggle.test.ts b/resources/js/components/Factory/Preview/PreviewToggle.test.ts
new file mode 100644
index 00000000..a24b323f
--- /dev/null
+++ b/resources/js/components/Factory/Preview/PreviewToggle.test.ts
@@ -0,0 +1,37 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import PreviewToggle from "./PreviewToggle.vue";
+
+const mountToggle = (open: boolean) =>
+    mount(PreviewToggle, {
+        props: { modelValue: open, "onUpdate:modelValue": () => {} },
+    });
+
+describe("preview toggle", () => {
+    it("is a light, pressed button while the preview is open", () => {
+        const button = mountToggle(true).get("button");
+
+        expect(button.attributes("aria-pressed")).toBe("true");
+        expect(button.classes()).toEqual(
+            expect.arrayContaining(["bg-white", "text-grey-900", "hover:bg-grey-100"]),
+        );
+        expect(button.classes()).not.toContain("text-white");
+    });
+
+    it("stays dark with a thin border while it is closed", () => {
+        const button = mountToggle(false).get("button");
+
+        expect(button.attributes("aria-pressed")).toBe("false");
+        expect(button.classes()).toEqual(
+            expect.arrayContaining(["border-grey-600", "text-white", "hover:bg-grey-700"]),
+        );
+        expect(button.classes()).not.toContain("bg-white");
+    });
+
+    it("flips the state on click", async () => {
+        const wrapper = mount(PreviewToggle, { props: { modelValue: false } });
+        await wrapper.get("button").trigger("click");
+
+        expect(wrapper.emitted("update:modelValue")).toEqual([[true]]);
+    });
+});
diff --git a/resources/js/components/Factory/Preview/PreviewToggle.vue b/resources/js/components/Factory/Preview/PreviewToggle.vue
index d71073c6..a34e28ea 100644
--- a/resources/js/components/Factory/Preview/PreviewToggle.vue
+++ b/resources/js/components/Factory/Preview/PreviewToggle.vue
@@ -3,8 +3,12 @@
   <button
     type="button"
     :aria-pressed="open"
-    class="hidden h-9 w-9 flex-none items-center justify-center gap-1.5 rounded-md border text-[13px] font-semibold text-white hover:bg-grey-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:flex xl:w-auto xl:px-2.5"
-    :class="open ? 'border-grey-500 bg-grey-700' : 'border-grey-600'"
+    class="hidden h-9 w-9 flex-none items-center justify-center gap-1.5 rounded-md border text-[13px] font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:flex xl:w-auto xl:px-2.5"
+    :class="
+      open
+        ? 'border-white bg-white text-grey-900 hover:bg-grey-100'
+        : 'border-grey-600 text-white hover:bg-grey-700'
+    "
     @click="open = !open"
   >
     <D9Icon name="eye" /><span class="sr-only xl:not-sr-only">Preview</span>

From 4f6564f3180b4b1b5b0820be76e937af106164b7 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 22 Oct 2026 16:22:46 +0200
Subject: [PATCH 2/2] Changelog: Preview button state

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ee045bd..26a6b268 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ Lines marked **Upgrade step** need you to act after updating.
 
 ## [Unreleased]
 
+### Changed
+
+-   In the form editor, the Preview button is white while the side preview is open, so you can see the preview is on. (#301)
+
 ### Fixed
 
 -   Clicking "Log in" on the two-factor code screen now sends the code. Before, only Enter worked. (#299)