From d6c902187dc31dd7c765a27ac01ac896acb6cb5e Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Mon, 23 Feb 2026 10:10:58 +0000
Subject: [PATCH] App mode - store - 1 (#9022)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 |  9 +++++-
 src/stores/appModeStore.ts              | 40 +++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/stores/appModeStore.ts

diff --git a/src/renderer/core/canvas/canvasStore.ts b/src/renderer/core/canvas/canvasStore.ts
index bfc54c1db..edc27ffac 100644
--- a/src/renderer/core/canvas/canvasStore.ts
+++ b/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 =
diff --git a/src/stores/appModeStore.ts b/src/stores/appModeStore.ts
new file mode 100644
index 000000000..364c9eae0
--- /dev/null
+++ b/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
+    }
+  }
+})