feat: App mode empty graph handling (#9393)

## Summary

Adds handling for entering app mode with an empty graph prompting the
user to load a template as a starting point

## Changes

- **What**: 
- app mode handle empty workflows, disable builder button, show
different message
- fix fitView when switching from app mode to graph

## Review Focus

Moving the fitView since the canvas is hidden in app mode until after
the workflow is loaded and the mode has been switched back to graph, I
don't see how this could cause any issues but worth a closer eye

## Screenshots (if applicable)

<img width="1057" height="916" alt="image"
src="https://github.com/user-attachments/assets/2ffe2b6d-9ce1-4218-828a-b7bc336c365a"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9393-feat-App-mode-empty-graph-handling-3196d73d3650812cab0ce878109ed5c9)
by [Unito](https://www.unito.io)

src/scripts/app.ts

@@ -1289,26 +1289,8 @@ export class ComfyApp {
       }
     }
 
-    try {
-      // @ts-expect-error Discrepancies between zod and litegraph - in progress
-      this.rootGraph.configure(graphData)
-
-      // Save original renderer version before scaling (it gets modified during scaling)
-      const originalMainGraphRenderer =
-        this.rootGraph.extra.workflowRendererVersion
-
-      // Scale main graph
-      ensureCorrectLayoutScale(originalMainGraphRenderer)
-
-      // Scale all subgraphs that were loaded with the workflow
-      // Use original main graph renderer as fallback (not the modified one)
-      for (const subgraph of this.rootGraph.subgraphs.values()) {
-        ensureCorrectLayoutScale(
-          subgraph.extra.workflowRendererVersion || originalMainGraphRenderer,
-          subgraph
-        )
-      }
-
+    const canvasVisible = !!(this.canvasEl.width && this.canvasEl.height)
+    const fitView = () => {
       if (
         restore_view &&
         useSettingStore().get('Comfy.EnableWorkflowViewRestore')
@@ -1336,6 +1318,29 @@ export class ComfyApp {
           useLitegraphService().fitView()
         }
       }
+    }
+
+    try {
+      // @ts-expect-error Discrepancies between zod and litegraph - in progress
+      this.rootGraph.configure(graphData)
+
+      // Save original renderer version before scaling (it gets modified during scaling)
+      const originalMainGraphRenderer =
+        this.rootGraph.extra.workflowRendererVersion
+
+      // Scale main graph
+      ensureCorrectLayoutScale(originalMainGraphRenderer)
+
+      // Scale all subgraphs that were loaded with the workflow
+      // Use original main graph renderer as fallback (not the modified one)
+      for (const subgraph of this.rootGraph.subgraphs.values()) {
+        ensureCorrectLayoutScale(
+          subgraph.extra.workflowRendererVersion || originalMainGraphRenderer,
+          subgraph
+        )
+      }
+
+      if (canvasVisible) fitView()
     } catch (error) {
       useDialogService().showErrorDialog(error, {
         title: t('errorDialog.loadWorkflowTitle'),
@@ -1415,6 +1420,13 @@ export class ComfyApp {
       this.rootGraph.serialize() as unknown as ComfyWorkflowJSON
     )
 
+    // If the canvas was not visible and we're a fresh load, resize the canvas and fit the view
+    // This fixes switching from app mode to a new graph mode workflow (e.g. load template)
+    if (!canvasVisible && (!workflow || typeof workflow === 'string')) {
+      this.canvas.resize()
+      requestAnimationFrame(() => fitView())
+    }
+
     // Store pending warnings on the workflow for deferred display
     const activeWf = useWorkspaceStore().workflow.activeWorkflow
     if (activeWf) {