Add keybind hint to confirm close dialog (#2529)

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -4,6 +4,15 @@
     <ul v-if="itemList?.length" class="pl-4 m-0 flex flex-col gap-2">
       <li v-for="item of itemList" :key="item">{{ item }}</li>
     </ul>
+    <Message
+      v-if="hint"
+      icon="pi pi-info-circle"
+      severity="secondary"
+      size="small"
+      variant="simple"
+    >
+      {{ hint }}
+    </Message>
     <div class="flex gap-4 justify-end">
       <Button
         :label="$t('g.cancel')"
@@ -63,6 +72,7 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import Message from 'primevue/message'
 
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -72,6 +82,7 @@ const props = defineProps<{
   type: ConfirmationDialogType
   onConfirm: (value?: boolean) => void
   itemList?: string[]
+  hint?: string
 }>()
 
 const onCancel = () => useDialogStore().closeDialog()

src/components/topbar/WorkflowTab.vue

@@ -31,6 +31,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import {
   usePragmaticDraggable,
@@ -51,6 +52,8 @@ const props = defineProps<{
   workflowOption: WorkflowOption
 }>()
 
+const { t } = useI18n()
+
 const workspaceStore = useWorkspaceStore()
 const workflowStore = useWorkflowStore()
 const workflowTabRef = ref<HTMLElement | null>(null)
@@ -59,7 +62,8 @@ const closeWorkflows = async (options: WorkflowOption[]) => {
   for (const opt of options) {
     if (
       !(await useWorkflowService().closeWorkflow(opt.workflow, {
-        warnIfUnsaved: !workspaceStore.shiftDown
+        warnIfUnsaved: !workspaceStore.shiftDown,
+        hint: t('sideToolbar.workflowTab.dirtyCloseHint')
       }))
     ) {
       // User clicked cancel

src/locales/en/main.json

@@ -315,6 +315,7 @@
       "deleteFailed": "Attempt to delete the workflow failed.",
       "dirtyCloseTitle": "Save Changes?",
       "dirtyClose": "The files below have been changed.  Would you like to save them before closing?",
+      "dirtyCloseHint": "Hold Shift to close without prompt",
       "confirmOverwriteTitle": "Overwrite existing file?",
       "confirmOverwrite": "The file below already exists. Would you like to overwrite it?",
       "workflowTreeType": {

src/locales/fr/main.json

@@ -735,6 +735,7 @@
       "deleteFailedTitle": "Échec de la suppression",
       "deleted": "Flux de travail supprimé",
       "dirtyClose": "Les fichiers ci-dessous ont été modifiés. Souhaitez-vous les enregistrer avant de fermer ?",
+      "dirtyCloseHint": "Maintenez Shift pour fermer sans invite",
       "dirtyCloseTitle": "Enregistrer les modifications ?",
       "workflowTreeType": {
         "bookmarks": "Favoris",

src/locales/ja/main.json

@@ -735,6 +735,7 @@
       "deleteFailedTitle": "削除に失敗しました",
       "deleted": "ワークフローが削除されました",
       "dirtyClose": "以下のファイルが変更されました。閉じる前に保存しますか？",
+      "dirtyCloseHint": "Shiftキーを押しながら閉じると、プロンプトなしで閉じます",
       "dirtyCloseTitle": "変更を保存しますか？",
       "workflowTreeType": {
         "bookmarks": "ブックマーク",

src/locales/ko/main.json

@@ -735,6 +735,7 @@
       "deleteFailedTitle": "삭제 실패",
       "deleted": "워크플로가 삭제되었습니다.",
       "dirtyClose": "아래 파일들이 변경되었습니다. 닫기 전에 저장하시겠습니까?",
+      "dirtyCloseHint": "프롬프트 없이 닫으려면 Shift를 누르세요",
       "dirtyCloseTitle": "변경 사항 저장",
       "workflowTreeType": {
         "bookmarks": "북마크",

src/locales/ru/main.json

@@ -735,6 +735,7 @@
       "deleteFailedTitle": "Не удалось удалить",
       "deleted": "Рабочий процесс удалён",
       "dirtyClose": "Файлы ниже были изменены. Вы хотите сохранить их перед закрытием?",
+      "dirtyCloseHint": "Удерживайте Shift, чтобы закрыть без подсказки",
       "dirtyCloseTitle": "Сохранить изменения?",
       "workflowTreeType": {
         "bookmarks": "Закладки",

src/locales/zh/main.json

@@ -735,6 +735,7 @@
       "deleteFailedTitle": "删除失败",
       "deleted": "工作流已删除",
       "dirtyClose": "以下文件已被更改。您想在关闭之前保存它们吗？",
+      "dirtyCloseHint": "按住 Shift 关闭而不提示",
       "dirtyCloseTitle": "保存更改？",
       "workflowTreeType": {
         "bookmarks": "书签",

src/services/dialogService.ts

@@ -133,7 +133,8 @@ export const useDialogService = () => {
     title,
     message,
     type = 'default',
-    itemList = []
+    itemList = [],
+    hint
   }: {
     /** Dialog heading */
     title: string
@@ -141,8 +142,9 @@ export const useDialogService = () => {
     message: string
     /** Pre-configured dialog type */
     type?: ConfirmationDialogType
-    /** Displayed as an unorderd list immediately below the message body */
+    /** Displayed as an unordered list immediately below the message body */
     itemList?: string[]
+    hint?: string
   }): Promise<boolean | null> {
     return new Promise((resolve) => {
       const options: ShowDialogOptions = {
@@ -153,7 +155,8 @@ export const useDialogService = () => {
           message,
           type,
           itemList,
-          onConfirm: resolve
+          onConfirm: resolve,
+          hint
         },
         dialogComponentProps: {
           onClose: () => resolve(null)

src/services/workflowService.ts

@@ -188,14 +188,17 @@ export const useWorkflowService = () => {
    */
   const closeWorkflow = async (
     workflow: ComfyWorkflow,
-    options: { warnIfUnsaved: boolean } = { warnIfUnsaved: true }
+    options: { warnIfUnsaved: boolean; hint?: string } = {
+      warnIfUnsaved: true
+    }
   ): Promise<boolean> => {
     if (workflow.isModified && options.warnIfUnsaved) {
       const confirmed = await dialogService.confirm({
         title: t('sideToolbar.workflowTab.dirtyCloseTitle'),
         type: 'dirtyClose',
         message: t('sideToolbar.workflowTab.dirtyClose'),
-        itemList: [workflow.path]
+        itemList: [workflow.path],
+        hint: options.hint
       })
       // Cancel
       if (confirmed === null) return false