From e3ca31da089f73abb39b94e8e49473846b38972b Mon Sep 17 00:00:00 2001
From: Haoqing Wang <78337154+hqhq1025@users.noreply.github.com>
Date: Wed, 29 Jul 2026 20:12:12 +0800
Subject: [PATCH] perf(web): mount session row dialogs only while they are open
 (#1233)

---
 web/src/components/SessionList.tsx | 64 ++++++++++++++++--------------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/web/src/components/SessionList.tsx b/web/src/components/SessionList.tsx
index 074306a3..28c29702 100644
--- a/web/src/components/SessionList.tsx
+++ b/web/src/components/SessionList.tsx
@@ -957,13 +957,15 @@ function SessionItem(props: {
                 />
             ) : null}
 
-            <RenameSessionDialog
-                isOpen={renameOpen}
-                onClose={() => setRenameOpen(false)}
-                currentName={sessionName}
-                onRename={renameSession}
-                isPending={isPending}
-            />
+            {renameOpen ? (
+                <RenameSessionDialog
+                    isOpen={true}
+                    onClose={() => setRenameOpen(false)}
+                    currentName={sessionName}
+                    onRename={renameSession}
+                    isPending={isPending}
+                />
+            ) : null}
 
             {exportOpen ? (
                 <SessionExportDialog
@@ -974,29 +976,33 @@ function SessionItem(props: {
                 />
             ) : null}
 
-            <ConfirmDialog
-                isOpen={archiveOpen}
-                onClose={() => setArchiveOpen(false)}
-                title={t('dialog.archive.title')}
-                description={t('dialog.archive.description', { name: sessionName })}
-                confirmLabel={t('dialog.archive.confirm')}
-                confirmingLabel={t('dialog.archive.confirming')}
-                onConfirm={archiveSession}
-                isPending={isPending}
-                destructive
-            />
+            {archiveOpen ? (
+                <ConfirmDialog
+                    isOpen={true}
+                    onClose={() => setArchiveOpen(false)}
+                    title={t('dialog.archive.title')}
+                    description={t('dialog.archive.description', { name: sessionName })}
+                    confirmLabel={t('dialog.archive.confirm')}
+                    confirmingLabel={t('dialog.archive.confirming')}
+                    onConfirm={archiveSession}
+                    isPending={isPending}
+                    destructive
+                />
+            ) : null}
 
-            <ConfirmDialog
-                isOpen={deleteOpen}
-                onClose={() => setDeleteOpen(false)}
-                title={t('dialog.delete.title')}
-                description={t('dialog.delete.description', { name: sessionName })}
-                confirmLabel={t('dialog.delete.confirm')}
-                confirmingLabel={t('dialog.delete.confirming')}
-                onConfirm={deleteSession}
-                isPending={isPending}
-                destructive
-            />
+            {deleteOpen ? (
+                <ConfirmDialog
+                    isOpen={true}
+                    onClose={() => setDeleteOpen(false)}
+                    title={t('dialog.delete.title')}
+                    description={t('dialog.delete.description', { name: sessionName })}
+                    confirmLabel={t('dialog.delete.confirm')}
+                    confirmingLabel={t('dialog.delete.confirming')}
+                    onConfirm={deleteSession}
+                    isPending={isPending}
+                    destructive
+                />
+            ) : null}
         </>
     )
 }