App mode - builder toolbar save - 7 (#9030)

## Summary

Implements save flow for the builder toolbar.
The todo will be done in a future PR once the serailized format is
finalized

## Screenshots (if applicable)


https://github.com/user-attachments/assets/124cb7d8-e23b-476a-8691-0ee2c4c9150b

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9030-App-mode-builder-toolbar-save-7-30d6d73d3650815e8610fced20e95e6e)
by [Unito](https://www.unito.io)

src/components/builder/useBuilderSave.ts

@@ -0,0 +1,124 @@
+import { watch } from 'vue'
+
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useDialogService } from '@/services/dialogService'
+import { useAppModeStore } from '@/stores/appModeStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+import BuilderSaveDialogContent from './BuilderSaveDialogContent.vue'
+import BuilderSaveSuccessDialogContent from './BuilderSaveSuccessDialogContent.vue'
+
+const SAVE_DIALOG_KEY = 'builder-save'
+const SUCCESS_DIALOG_KEY = 'builder-save-success'
+
+export function useBuilderSave() {
+  const appModeStore = useAppModeStore()
+  const workflowStore = useWorkflowStore()
+  const workflowService = useWorkflowService()
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+
+  watch(
+    () => appModeStore.isBuilderSaving,
+    (saving) => {
+      if (saving) void onBuilderSave()
+    }
+  )
+
+  async function onBuilderSave() {
+    const workflow = workflowStore.activeWorkflow
+    if (!workflow) {
+      resetSaving()
+      return
+    }
+
+    // TODO: Update this to show the save dialog if it is temp OR if the user has not saved app mode before.
+    // If they have saved app mode before, just save the workflow, but use the initial app mode state not current.
+
+    if (!workflow.isTemporary) {
+      try {
+        workflow.changeTracker?.checkState()
+        await workflowService.saveWorkflow(workflow)
+        showSuccessDialog(workflow.filename, appModeStore.isAppMode)
+      } catch {
+        resetSaving()
+      }
+      return
+    }
+
+    showSaveDialog(workflow.filename)
+  }
+
+  function showSaveDialog(defaultFilename: string) {
+    dialogService.showLayoutDialog({
+      key: SAVE_DIALOG_KEY,
+      component: BuilderSaveDialogContent,
+      props: {
+        defaultFilename,
+        onSave: handleSave,
+        onClose: handleCancelSave
+      },
+      dialogComponentProps: {
+        onClose: resetSaving
+      }
+    })
+  }
+
+  function handleCancelSave() {
+    closeSaveDialog()
+    resetSaving()
+  }
+
+  async function handleSave(filename: string, openAsApp: boolean) {
+    try {
+      const workflow = workflowStore.activeWorkflow
+      if (!workflow) return
+
+      const saved = await workflowService.saveWorkflowAs(workflow, {
+        filename,
+        openAsApp
+      })
+
+      if (!saved) return
+
+      closeSaveDialog()
+      showSuccessDialog(filename, openAsApp)
+    } catch {
+      closeSaveDialog()
+      resetSaving()
+    }
+  }
+
+  function showSuccessDialog(workflowName: string, savedAsApp: boolean) {
+    dialogService.showLayoutDialog({
+      key: SUCCESS_DIALOG_KEY,
+      component: BuilderSaveSuccessDialogContent,
+      props: {
+        workflowName,
+        savedAsApp,
+        onViewApp: () => {
+          appModeStore.setMode('app')
+          closeSuccessDialog()
+        },
+        onClose: closeSuccessDialog
+      },
+      dialogComponentProps: {
+        onClose: resetSaving
+      }
+    })
+  }
+
+  function closeSaveDialog() {
+    dialogStore.closeDialog({ key: SAVE_DIALOG_KEY })
+  }
+
+  function closeSuccessDialog() {
+    dialogStore.closeDialog({ key: SUCCESS_DIALOG_KEY })
+    resetSaving()
+  }
+
+  function resetSaving() {
+    appModeStore.setBuilderSaving(false)
+  }
+}