App builder exit updates (#9218)

## Summary

- remove exit builder button from right panel
- add builder exit button to bottom of canvas
- add builder menu with save & exit in top left

## Screenshots (if applicable)

<img width="1544" height="998" alt="image"
src="https://github.com/user-attachments/assets/f5deadc5-2bf5-4729-b644-2b6a815b9975"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9218-App-builder-exit-updates-3126d73d365081a0bf1adf92e1171060)
by [Unito](https://www.unito.io)

src/components/builder/AppBuilder.vue

@@ -8,7 +8,6 @@ import DraggableList from '@/components/common/DraggableList.vue'
 import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
 import WidgetItem from '@/components/rightSidePanel/parameters/WidgetItem.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
@@ -211,9 +210,6 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     {{
       isArrangeMode ? t('nodeHelpPage.inputs') : t('linearMode.builder.title')
     }}
-    <Button class="ml-auto" @click="appModeStore.exitBuilder">
-      {{ t('linearMode.builder.exit') }}
-    </Button>
   </div>
   <DraggableList
     v-if="isArrangeMode"

src/components/builder/BuilderExitButton.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="fixed bottom-4 left-1/2 z-1000 flex -translate-x-1/2 items-center rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
+  >
+    <Button size="lg" @click="onExitBuilder">
+      {{ t('builderMenu.exitAppBuilder') }}
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useAppMode } from '@/composables/useAppMode'
+import { useAppModeStore } from '@/stores/appModeStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+const appModeStore = useAppModeStore()
+const dialogStore = useDialogStore()
+const { isBuilderMode } = useAppMode()
+
+useEventListener(window, 'keydown', (e: KeyboardEvent) => {
+  if (
+    e.key === 'Escape' &&
+    !e.ctrlKey &&
+    !e.altKey &&
+    !e.metaKey &&
+    dialogStore.dialogStack.length === 0 &&
+    isBuilderMode.value
+  ) {
+    e.preventDefault()
+    e.stopPropagation()
+    onExitBuilder()
+  }
+})
+
+function onExitBuilder() {
+  void appModeStore.exitBuilder()
+}
+</script>

src/components/builder/BuilderMenu.vue

@@ -0,0 +1,73 @@
+<template>
+  <Popover :show-arrow="false" class="min-w-56 p-3">
+    <template #button>
+      <button
+        :class="
+          cn(
+            'absolute left-4 top-[calc(var(--workflow-tabs-height)+16px)] z-1000 inline-flex h-10 cursor-pointer items-center gap-2.5 rounded-lg py-2 pr-2 pl-3 shadow-interface transition-colors border-none',
+            'bg-secondary-background hover:bg-secondary-background-hover',
+            'data-[state=open]:bg-secondary-background-hover'
+          )
+        "
+        :aria-label="t('linearMode.appModeToolbar.appBuilder')"
+      >
+        <i class="icon-[lucide--hammer] size-4" />
+        <span class="text-sm font-medium">
+          {{ t('linearMode.appModeToolbar.appBuilder') }}
+        </span>
+        <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
+      </button>
+    </template>
+    <template #default="{ close }">
+      <button
+        :class="
+          cn(
+            'flex w-full items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none',
+            hasOutputs
+              ? 'cursor-pointer hover:bg-secondary-background-hover'
+              : 'opacity-50 pointer-events-none'
+          )
+        "
+        :disabled="!hasOutputs"
+        @click="onSave(close)"
+      >
+        <i class="icon-[lucide--save] size-4" />
+        {{ t('builderMenu.saveApp') }}
+      </button>
+      <div class="my-1 border-t border-border-default" />
+      <button
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none hover:bg-secondary-background-hover"
+        @click="onExitBuilder(close)"
+      >
+        <i class="icon-[lucide--square-pen] size-4" />
+        {{ t('builderMenu.exitAppBuilder') }}
+      </button>
+    </template>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+
+import Popover from '@/components/ui/Popover.vue'
+import { useAppModeStore } from '@/stores/appModeStore'
+import { cn } from '@/utils/tailwindUtil'
+
+import { useBuilderSave } from './useBuilderSave'
+
+const { t } = useI18n()
+const appModeStore = useAppModeStore()
+const { hasOutputs } = storeToRefs(appModeStore)
+const { setSaving } = useBuilderSave()
+
+function onSave(close: () => void) {
+  setSaving(true)
+  close()
+}
+
+function onExitBuilder(close: () => void) {
+  void appModeStore.exitBuilder()
+  close()
+}
+</script>

src/components/builder/BuilderToolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="fixed top-[calc(var(--workflow-tabs-height)+var(--spacing)*1.5)] left-1/2 z-[1000] -translate-x-1/2"
+    class="fixed top-[calc(var(--workflow-tabs-height)+var(--spacing)*1.5)] left-1/2 z-1000 -translate-x-1/2"
     :aria-label="t('builderToolbar.label')"
   >
     <div

src/locales/en/main.json

@@ -3349,5 +3349,9 @@
     "saveSuccessAppPrompt": "Would you like to view it now?",
     "saveSuccessGraphMessage": "'{name}' has been saved. It will open as a node graph by default.",
     "viewApp": "View app"
+  },
+  "builderMenu": {
+    "saveApp": "Save app",
+    "exitAppBuilder": "Exit app builder"
   }
 }

src/stores/appModeStore.ts

@@ -2,11 +2,9 @@ import { defineStore } from 'pinia'
 import { reactive, computed, watch } from 'vue'
 
 import { useAppMode } from '@/composables/useAppMode'
-import { t } from '@/i18n'
 import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LinearData } from '@/platform/workflow/management/stores/comfyWorkflow'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useDialogService } from '@/services/dialogService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 
 export const useAppModeStore = defineStore('appMode', () => {
@@ -69,14 +67,6 @@ export const useAppModeStore = defineStore('appMode', () => {
   )
 
   async function exitBuilder() {
-    if (
-      !(await useDialogService().confirm({
-        title: t('linearMode.builder.exitConfirmTitle'),
-        message: t('linearMode.builder.exitConfirmMessage')
-      }))
-    )
-      return
-
     const workflow = workflowStore.activeWorkflow
     if (workflow) workflow.dirtyLinearData = null
     resetSelectedToWorkflow()

src/views/GraphView.vue

@@ -13,7 +13,11 @@
       <GraphCanvas @ready="onGraphReady" />
     </div>
     <LinearView v-if="linearMode" />
-    <BuilderToolbar v-if="isBuilderMode" />
+    <template v-if="isBuilderMode">
+      <BuilderToolbar />
+      <BuilderMenu />
+      <BuilderExitButton />
+    </template>
   </div>
 
   <GlobalToast />
@@ -87,6 +91,8 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { electronAPI } from '@/utils/envUtil'
+import BuilderExitButton from '@/components/builder/BuilderExitButton.vue'
+import BuilderMenu from '@/components/builder/BuilderMenu.vue'
 import BuilderToolbar from '@/components/builder/BuilderToolbar.vue'
 import LinearView from '@/views/LinearView.vue'
 import ManagerProgressToast from '@/workbench/extensions/manager/components/ManagerProgressToast.vue'