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