App mode - store - 1 (#9022)

## Summary

Adds a store to control the mode the app is in (app, graph, builder)
Changes the existing linearMode in canvasStore to update new store

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9022-App-mode-store-1-30d6d73d365081498df1c1192c9860f0)
by [Unito](https://www.unito.io)

src/renderer/core/canvas/canvasStore.ts

@@ -3,6 +3,8 @@ import { defineStore } from 'pinia'
 import { computed, markRaw, ref, shallowRef } from 'vue'
 import type { Raw } from 'vue'
 
+import { useAppModeStore } from '@/stores/appModeStore'
+
 import type { Point, Positionable } from '@/lib/litegraph/src/interfaces'
 import type {
   LGraph,
@@ -40,7 +42,12 @@ export const useCanvasStore = defineStore('canvas', () => {
   // Reactive scale percentage that syncs with app.canvas.ds.scale
   const appScalePercentage = ref(100)
 
-  const linearMode = ref(false)
+  const linearMode = computed({
+    get: () => useAppModeStore().isAppMode,
+    set: (val: boolean) => {
+      useAppModeStore().setMode(val ? 'app' : 'graph')
+    }
+  })
 
   // Set up scale synchronization when canvas is available
   let originalOnChanged: ((scale: number, offset: Point) => void) | undefined =

src/stores/appModeStore.ts

@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+import { readonly, computed, ref } from 'vue'
+
+type AppMode = 'graph' | 'app' | 'builder:select' | 'builder:arrange'
+
+export const useAppModeStore = defineStore('appMode', () => {
+  const mode = ref<AppMode>('graph')
+  const builderSaving = ref(false)
+  const hasOutputs = ref(true)
+
+  const isBuilderMode = computed(
+    () => mode.value === 'builder:select' || mode.value === 'builder:arrange'
+  )
+  const isAppMode = computed(
+    () => mode.value === 'app' || mode.value === 'builder:arrange'
+  )
+  const isGraphMode = computed(
+    () => mode.value === 'graph' || mode.value === 'builder:select'
+  )
+  const isBuilderSaving = computed(
+    () => builderSaving.value && isBuilderMode.value
+  )
+
+  return {
+    mode: readonly(mode),
+    isBuilderMode,
+    isAppMode,
+    isGraphMode,
+    isBuilderSaving,
+    hasOutputs,
+    setBuilderSaving: (newBuilderSaving: boolean) => {
+      if (!isBuilderMode.value) return
+      builderSaving.value = newBuilderSaving
+    },
+    setMode: (newMode: AppMode) => {
+      if (newMode === mode.value) return
+      mode.value = newMode
+    }
+  }
+})