From 67334f1fd6a1ac5a4e0add83b7f9f5f753174069 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:48:57 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20always-mounted=20modal=20=E2=80=94=20GPU?=
 =?UTF-8?q?=20keeps=20backdrop-filter=20composited,=20no=20blur=20delay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx | 198 +++++++++---------
 1 file changed, 97 insertions(+), 101 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index ee66f6d..891a78f 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -373,108 +373,104 @@ export default function UnifiedSettingsModal() {
   }, [guardedAction, closeSettings])
 
   return (
-    <AnimatePresence>
-      {isOpen && (
-        <>
-          {/* Backdrop — solid scrim, no blur (modal handles its own glass) */}
-          <motion.div
-            initial={{ opacity: 1 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.15 }}
-            className="fixed inset-0 z-[60] bg-black/50"
-            onClick={handleBackdropClick}
-          />
+    <>
+      {/* Backdrop — always mounted, visibility toggled via CSS */}
+      <div
+        className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-150 ${
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={handleBackdropClick}
+      />
 
-          {/* Modal */}
-          <motion.div
-            initial={{ scale: 0.97, y: 8 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.97, y: 8 }}
-            transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
-            className="fixed inset-0 z-[61] flex items-center justify-center p-4 pointer-events-none"
-          >
-            <div
-              className="pointer-events-auto w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
-              onClick={e => e.stopPropagation()}
-            >
-              {/* Header */}
-              <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
-                <div className="flex items-center justify-between mb-4">
-                  <h2 className="text-lg font-semibold text-white">Settings</h2>
-                  <button
-                    onClick={handleClose}
-                    className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
-                  >
-                    <X weight="bold" className="w-4 h-4" />
-                  </button>
-                </div>
-
-                {/* Context Switcher */}
-                <ContextSwitcher
-                  active={context}
-                  onChange={handleContextChange}
-                  activeSiteDomain={sites.find(s => s.id === activeSiteId)?.domain ?? null}
-                />
-
-                {/* Tabs */}
-                <div className="mt-4">
-                  <TabBar tabs={tabs} activeTab={activeTab} onChange={handleTabChange} />
-                </div>
-              </div>
-
-              {/* Content */}
-              <div className="flex-1 overflow-y-auto overflow-x-hidden">
-                <AnimatePresence mode="wait">
-                  <motion.div
-                    key={`${context}-${activeTab}`}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    transition={{ duration: 0.12 }}
-                    className="p-6"
-                  >
-                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
-                  </motion.div>
-                </AnimatePresence>
-              </div>
-
-              {/* Save bar — fixed at modal bottom, outside scroll */}
-              <AnimatePresence>
-                {isDirtyVisible && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: 'auto', opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    transition={{ duration: 0.15 }}
-                    className="shrink-0 overflow-hidden"
-                  >
-                    <div className={`px-6 py-3 border-t flex items-center justify-between ${
-                      hasPendingAction
-                        ? 'bg-red-900/10 border-red-900/30'
-                        : 'bg-neutral-950/80 border-white/[0.06]'
-                    }`}>
-                      <span className="text-sm font-medium text-neutral-400">
-                        {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
-                      </span>
-                      <div className="flex items-center gap-2">
-                        {hasPendingAction && (
-                          <Button onClick={handleDiscard} variant="secondary" className="text-sm">
-                            Discard
-                          </Button>
-                        )}
-                        <Button onClick={handleSaveFromBar} variant="primary" disabled={saving} className="text-sm">
-                          {saving ? 'Saving...' : 'Save Changes'}
-                        </Button>
-                      </div>
-                    </div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
+      {/* Modal — always mounted, blur always composited by GPU */}
+      <div
+        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-all duration-200 ease-out ${
+          isOpen
+            ? 'opacity-100 scale-100 translate-y-0 pointer-events-auto'
+            : 'opacity-0 scale-[0.97] translate-y-2 pointer-events-none'
+        }`}
+      >
+        <div
+          className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
+          onClick={e => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold text-white">Settings</h2>
+              <button
+                onClick={handleClose}
+                className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
+              >
+                <X weight="bold" className="w-4 h-4" />
+              </button>
             </div>
-          </motion.div>
-        </>
-      )}
-    </AnimatePresence>
+
+            {/* Context Switcher */}
+            <ContextSwitcher
+              active={context}
+              onChange={handleContextChange}
+              activeSiteDomain={sites.find(s => s.id === activeSiteId)?.domain ?? null}
+            />
+
+            {/* Tabs */}
+            <div className="mt-4">
+              <TabBar tabs={tabs} activeTab={activeTab} onChange={handleTabChange} />
+            </div>
+          </div>
+
+          {/* Content — only render tab content when open to avoid unnecessary SWR calls */}
+          <div className="flex-1 overflow-y-auto overflow-x-hidden">
+            {isOpen && (
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={`${context}-${activeTab}`}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.12 }}
+                  className="p-6"
+                >
+                  <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
+                </motion.div>
+              </AnimatePresence>
+            )}
+          </div>
+
+          {/* Save bar */}
+          <AnimatePresence>
+            {isDirtyVisible && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.15 }}
+                className="shrink-0 overflow-hidden"
+              >
+                <div className={`px-6 py-3 border-t flex items-center justify-between ${
+                  hasPendingAction
+                    ? 'bg-red-900/10 border-red-900/30'
+                    : 'bg-neutral-950/80 border-white/[0.06]'
+                }`}>
+                  <span className="text-sm font-medium text-neutral-400">
+                    {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+                  </span>
+                  <div className="flex items-center gap-2">
+                    {hasPendingAction && (
+                      <Button onClick={handleDiscard} variant="secondary" className="text-sm">
+                        Discard
+                      </Button>
+                    )}
+                    <Button onClick={handleSaveFromBar} variant="primary" disabled={saving} className="text-sm">
+                      {saving ? 'Saving...' : 'Save Changes'}
+                    </Button>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+    </>
   )
 }