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/components/appMode/AppModeToolbar.vue

@@ -4,18 +4,21 @@ import { useI18n } from 'vue-i18n'
 
 import WorkflowActionsDropdown from '@/components/common/WorkflowActionsDropdown.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useAppMode } from '@/composables/useAppMode'
 import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
+import { useAppModeStore } from '@/stores/appModeStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { cn } from '@/utils/tailwindUtil'
-import { useAppMode } from '@/composables/useAppMode'
-import { useAppModeStore } from '@/stores/appModeStore'
+import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const workspaceStore = useWorkspaceStore()
 const { enableAppBuilder } = useAppMode()
-const { enterBuilder } = useAppModeStore()
+const appModeStore = useAppModeStore()
+const { enterBuilder } = appModeStore
+const { hasNodes } = storeToRefs(appModeStore)
 const tooltipOptions = { showDelay: 300, hideDelay: 300 }
 
 const isAssetsActive = computed(
@@ -71,6 +74,7 @@ function openTemplates() {
       }"
       variant="secondary"
       size="unset"
+      :disabled="!hasNodes"
       :aria-label="t('linearMode.appModeToolbar.appBuilder')"
       class="size-10 rounded-lg"
       @click="enterBuilder"

src/components/builder/EmptyWorkflowDialogContent.vue

@@ -6,7 +6,7 @@
 
     <div class="flex flex-col gap-2">
       <p class="m-0 text-sm text-muted-foreground">
-        {{ $t('builderToolbar.emptyWorkflowExplanation') }}
+        {{ $t('linearMode.emptyWorkflowExplanation') }}
       </p>
       <p class="m-0 text-sm text-muted-foreground">
         {{ $t('builderToolbar.emptyWorkflowPrompt') }}
@@ -19,10 +19,10 @@
         size="lg"
         @click="$emit('backToWorkflow')"
       >
-        {{ $t('builderToolbar.backToWorkflow') }}
+        {{ $t('linearMode.backToWorkflow') }}
       </Button>
       <Button variant="secondary" size="lg" @click="$emit('loadTemplate')">
-        {{ $t('builderToolbar.loadTemplate') }}
+        {{ $t('linearMode.loadTemplate') }}
       </Button>
     </template>
   </BuilderDialog>