From 93195d3274f722c977a0af30d1095e31fb5ceaaa Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Tue, 16 Dec 2025 05:57:11 -0800
Subject: [PATCH] feat(server-config): restart required toast (#7479)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Show a warning toast when leaving Server Config with pending changes,
reminding users they must restart to apply changes.

## Changes

- **What**: Add a `onBeforeUnmount` toast in `ServerConfigPanel` when
`modifiedConfigs` is non-empty and the user didn’t click Restart; add
i18n strings.

## Review Focus

- Confirm the toast timing/conditions are correct (only fires on leaving
the panel; suppressed when Restart is clicked).

> [!NOTE]
> This is a stacked PR. (main <=
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7478 <=
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7479)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7479-feat-server-config-restart-required-toast-2ca6d73d3650811f85f7f0c52c4cf8f0)
by [Unito](https://www.unito.io)
---
 src/locales/en/main.json                      |  6 +++--
 .../settings/components/ServerConfigPanel.vue | 25 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index afa768e34..860140481 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -631,7 +631,9 @@
   "serverConfig": {
     "modifiedConfigs": "You have modified the following server configurations. Restart to apply changes.",
     "revertChanges": "Revert Changes",
-    "restart": "Restart"
+    "restart": "Restart",
+    "restartRequiredToastSummary": "Restart required",
+    "restartRequiredToastDetail": "Restart the app to apply server configuration changes."
   },
   "shape": {
     "default": "Default",
@@ -2450,4 +2452,4 @@
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
   }
-}
\ No newline at end of file
+}
diff --git a/src/platform/settings/components/ServerConfigPanel.vue b/src/platform/settings/components/ServerConfigPanel.vue
index 8f53c30d3..6821e4a35 100644
--- a/src/platform/settings/components/ServerConfigPanel.vue
+++ b/src/platform/settings/components/ServerConfigPanel.vue
@@ -70,7 +70,7 @@ import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Message from 'primevue/message'
-import { watch } from 'vue'
+import { onBeforeUnmount, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import FormItem from '@/components/common/FormItem.vue'
@@ -79,11 +79,13 @@ import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import type { ServerConfig } from '@/constants/serverConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { FormItem as FormItemType } from '@/platform/settings/types'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { electronAPI } from '@/utils/envUtil'
 
 const settingStore = useSettingStore()
 const serverConfigStore = useServerConfigStore()
+const toastStore = useToastStore()
 const {
   serverConfigsByCategory,
   serverConfigValues,
@@ -92,11 +94,14 @@ const {
   modifiedConfigs
 } = storeToRefs(serverConfigStore)
 
+let restartTriggered = false
+
 const revertChanges = () => {
   serverConfigStore.revertChanges()
 }
 
 const restartApp = async () => {
+  restartTriggered = true
   await electronAPI().restartApp()
 }
 
@@ -114,6 +119,24 @@ const copyCommandLineArgs = async () => {
 }
 
 const { t } = useI18n()
+
+onBeforeUnmount(() => {
+  if (restartTriggered) {
+    return
+  }
+
+  if (modifiedConfigs.value.length === 0) {
+    return
+  }
+
+  toastStore.add({
+    severity: 'warn',
+    summary: t('serverConfig.restartRequiredToastSummary'),
+    detail: t('serverConfig.restartRequiredToastDetail'),
+    life: 10_000
+  })
+})
+
 const translateItem = (item: ServerConfig<any>): FormItemType => {
   return {
     ...item,