App mode - Unify menus - 2 (#9023)

## Summary

Updates subgraph breadcrumbs menu, workflow tabs context menu & linear
mode menu to use a single implementation.
Adds new menu items for enter/exit app mode  
Hides menu when in builder mode

## Changes

- **What**: Changes the components to use either a reka-ui context menu
or dropdown, with a standard inner list
- **Breaking**: Remove existing linear toggle from sidebar as it is now
in the menu


## Screenshots (if applicable)
It looks basically identical other than the icon changes based on mode:

In Graph Mode:
<img width="261" height="497" alt="image"
src="https://github.com/user-attachments/assets/eb9968a2-b528-4e21-9e14-ab4a67e717ae"
/>

In App Mode:
<img width="254" height="499" alt="image"
src="https://github.com/user-attachments/assets/54a89fab-e7b2-4cb0-bcb7-43d6d076ac83"
/>

Right click tab:
<img width="321" height="564" alt="image"
src="https://github.com/user-attachments/assets/c12c7d64-2dba-45bb-be76-2615f3e38cc6"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9023-App-mode-Unify-menus-2-30d6d73d36508162bfc0e308d5f705de)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/views/LinearView.vue

@@ -1,27 +1,33 @@
 <script setup lang="ts">
-import { breakpointsTailwind, unrefElement, useBreakpoints } from '@vueuse/core'
+import {
+  breakpointsTailwind,
+  unrefElement,
+  useBreakpoints,
+  whenever
+} from '@vueuse/core'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
-import { computed, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import WorkflowActionsDropdown from '@/components/common/WorkflowActionsDropdown.vue'
 import ModeToggle from '@/components/sidebar/ModeToggle.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
-import Button from '@/components/ui/button/Button.vue'
-import Popover from '@/components/ui/Popover.vue'
 import TypeformPopoverButton from '@/components/ui/TypeformPopoverButton.vue'
-import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
 import LinearPreview from '@/renderer/extensions/linearMode/LinearPreview.vue'
 import MobileMenu from '@/renderer/extensions/linearMode/MobileMenu.vue'
-import { useCommandStore } from '@/stores/commandStore'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 const { t } = useI18n()
+const nodeOutputStore = useNodeOutputStore()
 const settingStore = useSettingStore()
 const workspaceStore = useWorkspaceStore()
 
@@ -29,11 +35,16 @@ const mobileDisplay = useBreakpoints(breakpointsTailwind).smaller('md')
 
 const activeTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
 
-const { menuItems } = useWorkflowActionsMenu(
-  () => useCommandStore().execute('Comfy.RenameWorkflow'),
-  { isRoot: true }
+const hasPreview = ref(false)
+whenever(
+  () => nodeOutputStore.latestPreview[0],
+  () => (hasPreview.value = true)
 )
 
+const selectedItem = ref<AssetItem>()
+const selectedOutput = ref<ResultItemImpl>()
+const canShowPreview = ref(true)
+
 const topLeftRef = useTemplateRef('topLeftRef')
 const topRightRef = useTemplateRef('topRightRef')
 const bottomLeftRef = useTemplateRef('bottomLeftRef')
@@ -55,7 +66,14 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
       <MobileMenu />
       <div class="flex flex-col text-muted-foreground">
         <LinearPreview
+          :latent-preview="
+            canShowPreview && hasPreview
+              ? nodeOutputStore.latestPreview[0]
+              : undefined
+          "
           :run-button-click="linearWorkflowRef?.runButtonClick"
+          :selected-item
+          :selected-output
           mobile
         />
       </div>
@@ -98,15 +116,18 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         :size="98"
         class="flex flex-col min-w-min gap-4 mx-2 px-10 pt-8 pb-4 relative text-muted-foreground outline-none"
       >
-        <LinearPreview :run-button-click="linearWorkflowRef?.runButtonClick" />
+        <LinearPreview
+          :latent-preview="
+            canShowPreview && hasPreview
+              ? nodeOutputStore.latestPreview[0]
+              : undefined
+          "
+          :run-button-click="linearWorkflowRef?.runButtonClick"
+          :selected-item
+          :selected-output
+        />
         <div ref="topLeftRef" class="absolute z-21 top-4 left-4">
-          <Popover :entries="menuItems" align="start">
-            <template #button>
-              <Button size="icon" variant="textonly">
-                <i class="icon-[lucide--menu]" />
-              </Button>
-            </template>
-          </Popover>
+          <WorkflowActionsDropdown source="app_mode_menu_selected" />
         </div>
         <div ref="topRightRef" class="absolute z-21 top-4 right-4" />
         <div ref="bottomLeftRef" class="absolute z-20 bottom-4 left-4" />