From c093e60b671528efffe64040a93e04438439476b Mon Sep 17 00:00:00 2001
From: Tom Wheeler <thomas.wheeler.tcw@gmail.com>
Date: Mon, 19 Jan 2026 03:01:27 +1300
Subject: [PATCH] fix(overlays): fixes focus issue in condition editor

replace modal with Dialog, fix nested structure

fix #375
---
 .../OverlayEditor/ConditionEditorModal.tsx    |  57 +++++---
 .../OverlayEditor/OverlayEditorModal.tsx      | 122 +++++++++---------
 2 files changed, 101 insertions(+), 78 deletions(-)

diff --git a/src/components/OverlayEditor/ConditionEditorModal.tsx b/src/components/OverlayEditor/ConditionEditorModal.tsx
index a99ff01..bddbe20 100644
--- a/src/components/OverlayEditor/ConditionEditorModal.tsx
+++ b/src/components/OverlayEditor/ConditionEditorModal.tsx
@@ -1,4 +1,4 @@
-import Modal from '@app/components/Common/Modal';
+import Button from '@app/components/Common/Button';
 import type { DragEndEvent } from '@dnd-kit/core';
 import {
   closestCenter,
@@ -16,6 +16,7 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { Dialog } from '@headlessui/react';
 import { Bars3Icon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
 import type {
   ApplicationCondition,
@@ -712,25 +713,45 @@ export const ConditionEditorModal: React.FC<ConditionEditorModalProps> = ({
   };
 
   return (
-    <Modal
-      title={intl.formatMessage(messages.title)}
-      onCancel={handleCancel}
-      onOk={handleSave}
-      okText={intl.formatMessage(messages.save)}
-      cancelText={intl.formatMessage(messages.cancel)}
-      backgroundClickable={false}
-      customMaxWidth="sm:max-w-4xl"
-    >
-      <div className="space-y-4">
-        <p className="text-sm text-stone-400">
-          {intl.formatMessage(messages.description)}
-        </p>
+    <Dialog open={isOpen} onClose={handleCancel} className="relative z-[60]">
+      {/* Backdrop */}
+      <div className="fixed inset-0 bg-black/75" aria-hidden="true" />
 
-        <div className="max-h-[600px] overflow-y-auto rounded border border-stone-700 bg-stone-900 p-4">
-          <ConditionBuilder condition={condition} onChange={setCondition} />
-        </div>
+      {/* Full-screen container for centering */}
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="w-full max-w-4xl rounded-lg bg-stone-800 p-4 shadow-xl ring-1 ring-gray-700">
+          {/* Header */}
+          <Dialog.Title className="text-agregarr mb-4 text-2xl font-bold">
+            {intl.formatMessage(messages.title)}
+          </Dialog.Title>
+
+          {/* Content */}
+          <div className="space-y-4">
+            <p className="text-sm text-stone-400">
+              {intl.formatMessage(messages.description)}
+            </p>
+
+            <div className="max-h-[600px] overflow-y-auto rounded border border-stone-700 bg-stone-900 p-4">
+              <ConditionBuilder condition={condition} onChange={setCondition} />
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="mt-5 flex flex-row-reverse sm:mt-4">
+            <Button buttonType="primary" onClick={handleSave}>
+              {intl.formatMessage(messages.save)}
+            </Button>
+            <Button
+              buttonType="default"
+              onClick={handleCancel}
+              className="mr-3"
+            >
+              {intl.formatMessage(messages.cancel)}
+            </Button>
+          </div>
+        </Dialog.Panel>
       </div>
-    </Modal>
+    </Dialog>
   );
 };
 
diff --git a/src/components/OverlayEditor/OverlayEditorModal.tsx b/src/components/OverlayEditor/OverlayEditorModal.tsx
index 73624e7..a010b33 100644
--- a/src/components/OverlayEditor/OverlayEditorModal.tsx
+++ b/src/components/OverlayEditor/OverlayEditorModal.tsx
@@ -529,68 +529,70 @@ export const OverlayEditorModal: React.FC<OverlayEditorModalProps> = ({
               </Transition.Child>
             </div>
           </div>
+
+          {/* Nested modals - INSIDE Dialog for StackProvider/FocusTrap access */}
+          {isPreviewSelectorOpen && (
+            <Modal
+              title={intl.formatMessage(messages.selectOverlaysForPreview)}
+              onCancel={() => setIsPreviewSelectorOpen(false)}
+              onOk={() => setIsPreviewSelectorOpen(false)}
+              okText="Done"
+              loading={false}
+              backgroundClickable={false}
+            >
+              <div className="max-h-96 overflow-y-auto">
+                {availableTemplates.length === 0 ? (
+                  <p className="text-center text-stone-400">
+                    {intl.formatMessage(messages.noOtherOverlays)}
+                  </p>
+                ) : (
+                  <div className="space-y-2">
+                    {availableTemplates.map((template) => (
+                      <label
+                        key={template.id}
+                        className="flex cursor-pointer items-center space-x-3 rounded-md p-2 hover:bg-stone-700"
+                      >
+                        <input
+                          type="checkbox"
+                          checked={selectedPreviewIds.includes(template.id)}
+                          onChange={(e) => {
+                            if (e.target.checked) {
+                              setSelectedPreviewIds([
+                                ...selectedPreviewIds,
+                                template.id,
+                              ]);
+                            } else {
+                              setSelectedPreviewIds(
+                                selectedPreviewIds.filter(
+                                  (id) => id !== template.id
+                                )
+                              );
+                            }
+                          }}
+                          className="rounded border-stone-600 bg-stone-700 text-orange-600 focus:ring-orange-500"
+                        />
+                        <span className="text-sm text-white">
+                          {template.name}
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </Modal>
+          )}
+
+          {/* Condition Editor Modal */}
+          {isConditionEditorOpen && (
+            <ConditionEditorModal
+              isOpen={isConditionEditorOpen}
+              onClose={() => setIsConditionEditorOpen(false)}
+              initialCondition={condition}
+              onSave={setCondition}
+            />
+          )}
         </Dialog>
       </Transition>
-
-      {/* Preview Overlay Selection Modal - outside Transition to avoid Fragment prop issues */}
-      {isPreviewSelectorOpen && (
-        <Modal
-          title={intl.formatMessage(messages.selectOverlaysForPreview)}
-          onCancel={() => setIsPreviewSelectorOpen(false)}
-          onOk={() => setIsPreviewSelectorOpen(false)}
-          okText="Done"
-          loading={false}
-          backgroundClickable={false}
-        >
-          <div className="max-h-96 overflow-y-auto">
-            {availableTemplates.length === 0 ? (
-              <p className="text-center text-stone-400">
-                {intl.formatMessage(messages.noOtherOverlays)}
-              </p>
-            ) : (
-              <div className="space-y-2">
-                {availableTemplates.map((template) => (
-                  <label
-                    key={template.id}
-                    className="flex cursor-pointer items-center space-x-3 rounded-md p-2 hover:bg-stone-700"
-                  >
-                    <input
-                      type="checkbox"
-                      checked={selectedPreviewIds.includes(template.id)}
-                      onChange={(e) => {
-                        if (e.target.checked) {
-                          setSelectedPreviewIds([
-                            ...selectedPreviewIds,
-                            template.id,
-                          ]);
-                        } else {
-                          setSelectedPreviewIds(
-                            selectedPreviewIds.filter(
-                              (id) => id !== template.id
-                            )
-                          );
-                        }
-                      }}
-                      className="rounded border-stone-600 bg-stone-700 text-orange-600 focus:ring-orange-500"
-                    />
-                    <span className="text-sm text-white">{template.name}</span>
-                  </label>
-                ))}
-              </div>
-            )}
-          </div>
-        </Modal>
-      )}
-
-      {/* Condition Editor Modal */}
-      {isConditionEditorOpen && (
-        <ConditionEditorModal
-          isOpen={isConditionEditorOpen}
-          onClose={() => setIsConditionEditorOpen(false)}
-          initialCondition={condition}
-          onSave={setCondition}
-        />
-      )}
     </>
   );
 };