App mode - more updates & fixes (#9137)

## Summary

- fix sizing of sidebars in app mode
- update feedback button to match design
- update job queue notification
- clickable queue spinner item to allow clear queue
- refactor mode out of store to specific workflow instance
- support different saved vs active mode
- other styling/layout tweaks

## Changes

- **What**: Changes the store to a composable and moves the mode state
to the workflow.
- This enables switching between tabs and maintaining the mode they were
in

## Screenshots (if applicable)
<img width="1866" height="1455" alt="image"
src="https://github.com/user-attachments/assets/f9a8cd36-181f-4948-b48c-dd27bd9127cf"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9137-App-mode-more-updates-fixes-3106d73d365081a18ccff6ffe24fdec7)
by [Unito](https://www.unito.io)

---------

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

src/components/builder/BuilderToolbar.vue

@@ -20,7 +20,7 @@
             )
           "
           :aria-current="activeStep === step.id ? 'step' : undefined"
-          @click="appModeStore.setMode(step.id)"
+          @click="setMode(step.id)"
         >
           <StepBadge :step :index :model-value="activeStep" />
           <StepLabel :step />
@@ -31,9 +31,9 @@
 
       <!-- Save -->
       <ConnectOutputPopover
-        v-if="!appModeStore.hasOutputs"
+        v-if="!hasOutputs"
         :is-select-active="activeStep === 'builder:select'"
-        @switch="appModeStore.setMode('builder:select')"
+        @switch="setMode('builder:select')"
       >
         <button :class="cn(stepClasses, 'opacity-30 bg-transparent')">
           <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
@@ -50,7 +50,7 @@
               : 'hover:bg-secondary-background bg-transparent'
           )
         "
-        @click="appModeStore.setBuilderSaving(true)"
+        @click="setSaving(true)"
       >
         <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
         <StepLabel :step="saveStep" />
@@ -62,31 +62,25 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useEventListener } from '@vueuse/core'
 
+import { useAppMode } from '@/composables/useAppMode'
+import type { AppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
-import type { AppMode } from '@/stores/appModeStore'
 import { cn } from '@/utils/tailwindUtil'
 
+import { useBuilderSave } from './useBuilderSave'
 import ConnectOutputPopover from './ConnectOutputPopover.vue'
 import StepBadge from './StepBadge.vue'
 import StepLabel from './StepLabel.vue'
 import type { BuilderToolbarStep } from './types'
+import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
-const appModeStore = useAppModeStore()
+const { mode, setMode } = useAppMode()
+const { hasOutputs } = storeToRefs(useAppModeStore())
+const { saving, setSaving } = useBuilderSave()
 
-useEventListener(document, 'keydown', (e: KeyboardEvent) => {
-  if (e.key !== 'Escape') return
-
-  e.preventDefault()
-  e.stopPropagation()
-  void appModeStore.exitBuilder()
-})
-
-const activeStep = computed(() =>
-  appModeStore.isBuilderSaving ? 'save' : appModeStore.mode
-)
+const activeStep = computed(() => (saving.value ? 'save' : mode.value))
 
 const stepClasses =
   'inline-flex h-14 min-h-8 cursor-pointer items-center gap-3 rounded-lg py-2 pr-4 pl-2 transition-colors border-none'

src/components/builder/useBuilderSave.ts

@@ -1,30 +1,36 @@
-import { watch } from 'vue'
+import { ref } from 'vue'
 
+import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useDialogService } from '@/services/dialogService'
+import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useDialogStore } from '@/stores/dialogStore'
 
 import BuilderSaveDialogContent from './BuilderSaveDialogContent.vue'
 import BuilderSaveSuccessDialogContent from './BuilderSaveSuccessDialogContent.vue'
+import { whenever } from '@vueuse/core'
 
 const SAVE_DIALOG_KEY = 'builder-save'
 const SUCCESS_DIALOG_KEY = 'builder-save-success'
 
 export function useBuilderSave() {
-  const appModeStore = useAppModeStore()
+  const { setMode } = useAppMode()
+  const { toastErrorHandler } = useErrorHandling()
   const workflowStore = useWorkflowStore()
   const workflowService = useWorkflowService()
   const dialogService = useDialogService()
+  const appModeStore = useAppModeStore()
   const dialogStore = useDialogStore()
 
-  watch(
-    () => appModeStore.isBuilderSaving,
-    (saving) => {
-      if (saving) void onBuilderSave()
-    }
-  )
+  const saving = ref(false)
+
+  whenever(saving, onBuilderSave)
+
+  function setSaving(value: boolean) {
+    saving.value = value
+  }
 
   async function onBuilderSave() {
     const workflow = workflowStore.activeWorkflow
@@ -33,13 +39,14 @@ export function useBuilderSave() {
       return
     }
 
-    if (!workflow.isTemporary && workflow.activeState.extra?.linearMode) {
+    if (!workflow.isTemporary && workflow.initialMode != null) {
+      // Re-save with the previously chosen mode — no dialog needed.
       try {
-        workflow.changeTracker?.checkState()
-        appModeStore.saveSelectedToWorkflow()
+        appModeStore.flushSelections()
         await workflowService.saveWorkflow(workflow)
-        showSuccessDialog(workflow.filename, appModeStore.isAppMode)
-      } catch {
+        showSuccessDialog(workflow.filename, workflow.initialMode === 'app')
+      } catch (e) {
+        toastErrorHandler(e)
         resetSaving()
       }
       return
@@ -73,17 +80,19 @@ export function useBuilderSave() {
       const workflow = workflowStore.activeWorkflow
       if (!workflow) return
 
-      appModeStore.saveSelectedToWorkflow()
+      appModeStore.flushSelections()
+      const mode = openAsApp ? 'app' : 'graph'
       const saved = await workflowService.saveWorkflowAs(workflow, {
         filename,
-        openAsApp
+        initialMode: mode
       })
 
       if (!saved) return
 
       closeSaveDialog()
       showSuccessDialog(filename, openAsApp)
-    } catch {
+    } catch (e) {
+      toastErrorHandler(e)
       closeSaveDialog()
       resetSaving()
     }
@@ -97,7 +106,7 @@ export function useBuilderSave() {
         workflowName,
         savedAsApp,
         onViewApp: () => {
-          appModeStore.setMode('app')
+          setMode('app')
           closeSuccessDialog()
         },
         onClose: closeSuccessDialog
@@ -118,6 +127,8 @@ export function useBuilderSave() {
   }
 
   function resetSaving() {
-    appModeStore.setBuilderSaving(false)
+    saving.value = false
   }
+
+  return { saving, setSaving }
 }