From dda38e50aa0c08e30b95a4a78afc3ac8a90f9679 Mon Sep 17 00:00:00 2001
From: fkb032 <249513614+fkb032@users.noreply.github.com>
Date: Wed, 10 Jun 2026 22:21:49 -0600
Subject: [PATCH 1/3] Fix feedback dialog focus ring clipping

---
 .../widget/feedback/feedback-dialog.test.tsx  | 35 +++++++++++++++++++
 .../widget/feedback/feedback-dialog.tsx       |  8 +++--
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 apps/native/src/components/widget/feedback/feedback-dialog.test.tsx

diff --git a/apps/native/src/components/widget/feedback/feedback-dialog.test.tsx b/apps/native/src/components/widget/feedback/feedback-dialog.test.tsx
new file mode 100644
index 000000000..074ab64ac
--- /dev/null
+++ b/apps/native/src/components/widget/feedback/feedback-dialog.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useWidgetStore } from "@/stores/widget-store";
+import { FeedbackType } from "@/types/feedback";
+import { FeedbackDialog } from "./feedback-dialog";
+
+vi.mock("@/ipc/api", () => ({
+  tauriAPI: {
+    feedback: {
+      gatherMetadata: vi.fn<() => Promise<null>>(),
+      submit: vi.fn<() => Promise<boolean>>(),
+    },
+    promptHistory: {
+      get: vi.fn<() => Promise<string[]>>().mockResolvedValue([]),
+    },
+  },
+}));
+
+describe("FeedbackDialog focus ring buffers", () => {
+  it("keeps focus-ring paint inside scrollable dialog containers", async () => {
+    useWidgetStore.getState().openFeedback(FeedbackType.Issue);
+
+    render(<FeedbackDialog />);
+
+    const textarea = await screen.findByLabelText("DESCRIBE WHAT HAPPENED");
+    const dialogBody = textarea.closest(".overflow-y-auto");
+
+    expect(dialogBody).toHaveClass("pl-1", "py-1", "pr-3");
+
+    const shareCheckbox = screen.getByRole("checkbox", { name: "Current app state" });
+    const shareOptions = shareCheckbox.closest(".overflow-y-auto");
+
+    expect(shareOptions).toHaveClass("pl-1", "py-1", "pr-2");
+  });
+});
diff --git a/apps/native/src/components/widget/feedback/feedback-dialog.tsx b/apps/native/src/components/widget/feedback/feedback-dialog.tsx
index 866718755..47089c488 100644
--- a/apps/native/src/components/widget/feedback/feedback-dialog.tsx
+++ b/apps/native/src/components/widget/feedback/feedback-dialog.tsx
@@ -52,6 +52,10 @@ const ISSUE_SHARE_OPTIONS: ShareOptions = {
   appLogs: true,
 };
 
+const FEEDBACK_DIALOG_BODY_CLASS = "space-y-6 flex-1 overflow-y-auto pl-1 py-1 pr-3";
+const FEEDBACK_SHARE_OPTIONS_CLASS =
+  "space-y-2 max-h-[28vh] overflow-y-auto pl-1 py-1 pr-2";
+
 // Visibility helper functions for share options checkboxes
 // Each function returns a boolean indicating whether the checkbox should be visible
 // Parameters: feedbackType, step, mainWindowError
@@ -486,7 +490,7 @@ export function FeedbackDialog() {
           <DialogDescription>{dialogDescription}</DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-6 flex-1 overflow-y-auto pr-2">
+        <div className={FEEDBACK_DIALOG_BODY_CLASS}>
           {isPreviewingReport ? (
             <div className="space-y-3">
               <Label htmlFor="feedback-preview" className="text-foreground">
@@ -625,7 +629,7 @@ export function FeedbackDialog() {
               {/* Share with team */}
               <div className="space-y-2">
                 <Label className="text-foreground">SHARE WITH THE TEAM</Label>
-                <div className="space-y-2 max-h-[28vh] overflow-y-auto pr-2">
+                <div className={FEEDBACK_SHARE_OPTIONS_CLASS}>
                   {shouldShowCurrentAppState(feedbackType, step, mainWindowError) && (
                     <div className="flex items-center gap-2">
                       <Checkbox

From e5df4b4ea6a8d0d8f65b798a0722033897201837 Mon Sep 17 00:00:00 2001
From: fkb032 <249513614+fkb032@users.noreply.github.com>
Date: Wed, 10 Jun 2026 22:39:57 -0600
Subject: [PATCH 2/3] Add setup step story snapshot

---
 .../widget/steps/__snapshots__/setup-step.stories.tsx.snap     | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 apps/native/src/components/widget/steps/__snapshots__/setup-step.stories.tsx.snap

diff --git a/apps/native/src/components/widget/steps/__snapshots__/setup-step.stories.tsx.snap b/apps/native/src/components/widget/steps/__snapshots__/setup-step.stories.tsx.snap
new file mode 100644
index 000000000..e7fdda23e
--- /dev/null
+++ b/apps/native/src/components/widget/steps/__snapshots__/setup-step.stories.tsx.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Default Config Required 1`] = `"<div class="relative m-2 h-[760px] w-[400px] overflow-auto rounded-xl border border-border bg-background shadow-2xl"><div class="flex flex-col items-center justify-center space-y-6 py-8"><img alt="" class="h-16 w-16 object-contain" src="/outline-white.png"><div class="text-center"><h2 data-testid="onboarding-welcome-title" class="font-semibold text-foreground text-lg">Welcome to nixmac</h2><p class="mt-1 text-muted-foreground text-sm">Let's set up your nix-darwin configuration</p></div><div class="w-full max-w-sm"><div class="space-y-2"><label class="font-medium text-sm">1. Configuration Directory</label><div class="flex flex-col gap-2"><div dir="ltr" data-orientation="horizontal" class="w-full max-w-md"><div role="tablist" aria-orientation="horizontal" class="h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground grid w-full grid-cols-3" tabindex="0" data-orientation="horizontal" style="outline: none;"><button type="button" role="tab" aria-selected="false" aria-controls="radix-_r_0_-content-existing" data-state="inactive" id="radix-_r_0_-trigger-existing" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Existing</button><button type="button" role="tab" aria-selected="true" aria-controls="radix-_r_0_-content-new" data-state="active" id="radix-_r_0_-trigger-new" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">New</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_r_0_-content-import" data-state="inactive" id="radix-_r_0_-trigger-import" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Import</button></div></div><div class="space-y-2 rounded-lg border border-border bg-muted/30 p-3"><div class="flex items-center gap-2"><input class="flex-1 truncate rounded-md border border-border bg-muted/50 px-3 py-2 font-mono text-xs" placeholder=".darwin" aria-label="1. Configuration Directory name" value=".darwin"><button class="inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-8 gap-1.5 rounded-md px-3 has-[&gt;svg]:px-2.5" data-slot="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-plus mr-1 h-3 w-3" aria-hidden="true"><path d="M12 10v6"></path><path d="M9 13h6"></path><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path></svg>Create</button></div><p class="text-muted-foreground text-xs">Creates an empty folder in your home directory, then nixmac can generate a default flake.</p></div><p class="text-xs text-teal-300">Select your own, or proceed below for defaults</p></div></div></div><hr class="w-96 mx-auto"><div class="w-full max-w-sm space-y-2"><div class="space-y-2"><label class="font-medium text-sm">2. Configuration</label><div class="space-y-3 rounded-lg border border-border bg-muted/30 p-4"><div class="flex items-start gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert mt-0.5 h-4 w-4 text-muted-foreground" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg><p class="text-muted-foreground text-sm">No nix-darwin configuration found in this directory</p></div><div class="space-y-3"><div class="space-y-2"><label for="hostname" class="text-sm">Host name</label><input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm font-mono text-xs" id="hostname" placeholder="macbook" type="text" value="macbook"><p class="text-muted-foreground text-xs">This will be your darwinConfiguration name</p></div><button class="inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3 w-full" data-slot="button" data-testid="create-default-config-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles mr-2 h-4 w-4" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>Create Default Configuration</button><p class="text-muted-foreground text-xs">This will create a basic nix-darwin flake in the directory</p></div></div></div></div></div></div>"`;

From 7538045a4406a5e9ca40ff732f6e749ab3a756fb Mon Sep 17 00:00:00 2001
From: "darkmatter-bot[bot]" <darkmatter-bot[bot]@users.noreply.github.com>
Date: Mon, 29 Jun 2026 05:05:32 +0000
Subject: [PATCH 3/3] refactor: inline focus-ring class strings, drop redundant
 test

Address review feedback from arximboldi:
- Inline FEEDBACK_DIALOG_BODY_CLASS and FEEDBACK_SHARE_OPTIONS_CLASS
  directly at their JSX use sites; the constants added no reuse value
- Remove feedback-dialog.test.tsx which only asserted the presence of
  the class strings themselves, mirroring the implementation without
  testing meaningful behaviour
---
 .../widget/feedback/feedback-dialog.test.tsx  | 35 -------------------
 .../widget/feedback/feedback-dialog.tsx       |  8 ++---
 2 files changed, 2 insertions(+), 41 deletions(-)
 delete mode 100644 apps/native/src/components/widget/feedback/feedback-dialog.test.tsx

diff --git a/apps/native/src/components/widget/feedback/feedback-dialog.test.tsx b/apps/native/src/components/widget/feedback/feedback-dialog.test.tsx
deleted file mode 100644
index 074ab64ac..000000000
--- a/apps/native/src/components/widget/feedback/feedback-dialog.test.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { useWidgetStore } from "@/stores/widget-store";
-import { FeedbackType } from "@/types/feedback";
-import { FeedbackDialog } from "./feedback-dialog";
-
-vi.mock("@/ipc/api", () => ({
-  tauriAPI: {
-    feedback: {
-      gatherMetadata: vi.fn<() => Promise<null>>(),
-      submit: vi.fn<() => Promise<boolean>>(),
-    },
-    promptHistory: {
-      get: vi.fn<() => Promise<string[]>>().mockResolvedValue([]),
-    },
-  },
-}));
-
-describe("FeedbackDialog focus ring buffers", () => {
-  it("keeps focus-ring paint inside scrollable dialog containers", async () => {
-    useWidgetStore.getState().openFeedback(FeedbackType.Issue);
-
-    render(<FeedbackDialog />);
-
-    const textarea = await screen.findByLabelText("DESCRIBE WHAT HAPPENED");
-    const dialogBody = textarea.closest(".overflow-y-auto");
-
-    expect(dialogBody).toHaveClass("pl-1", "py-1", "pr-3");
-
-    const shareCheckbox = screen.getByRole("checkbox", { name: "Current app state" });
-    const shareOptions = shareCheckbox.closest(".overflow-y-auto");
-
-    expect(shareOptions).toHaveClass("pl-1", "py-1", "pr-2");
-  });
-});
diff --git a/apps/native/src/components/widget/feedback/feedback-dialog.tsx b/apps/native/src/components/widget/feedback/feedback-dialog.tsx
index 47089c488..050a09b37 100644
--- a/apps/native/src/components/widget/feedback/feedback-dialog.tsx
+++ b/apps/native/src/components/widget/feedback/feedback-dialog.tsx
@@ -52,10 +52,6 @@ const ISSUE_SHARE_OPTIONS: ShareOptions = {
   appLogs: true,
 };
 
-const FEEDBACK_DIALOG_BODY_CLASS = "space-y-6 flex-1 overflow-y-auto pl-1 py-1 pr-3";
-const FEEDBACK_SHARE_OPTIONS_CLASS =
-  "space-y-2 max-h-[28vh] overflow-y-auto pl-1 py-1 pr-2";
-
 // Visibility helper functions for share options checkboxes
 // Each function returns a boolean indicating whether the checkbox should be visible
 // Parameters: feedbackType, step, mainWindowError
@@ -490,7 +486,7 @@ export function FeedbackDialog() {
           <DialogDescription>{dialogDescription}</DialogDescription>
         </DialogHeader>
 
-        <div className={FEEDBACK_DIALOG_BODY_CLASS}>
+        <div className="space-y-6 flex-1 overflow-y-auto pl-1 py-1 pr-3">
           {isPreviewingReport ? (
             <div className="space-y-3">
               <Label htmlFor="feedback-preview" className="text-foreground">
@@ -629,7 +625,7 @@ export function FeedbackDialog() {
               {/* Share with team */}
               <div className="space-y-2">
                 <Label className="text-foreground">SHARE WITH THE TEAM</Label>
-                <div className={FEEDBACK_SHARE_OPTIONS_CLASS}>
+                <div className="space-y-2 max-h-[28vh] overflow-y-auto pl-1 py-1 pr-2">
                   {shouldShowCurrentAppState(feedbackType, step, mainWindowError) && (
                     <div className="flex items-center gap-2">
                       <Checkbox