From 0f4bceafdd4c731c42a5c4b26f112ae84112d5f6 Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Mon, 23 Feb 2026 18:05:52 +0000
Subject: [PATCH] App mode - App mode toolbar - 3 (#9025)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Adds a new toolbar for app mode

## Changes

- **What**:  Adds new toolbar with builder mode disabled

## Screenshots (if applicable)

<img width="172" height="220" alt="image"
src="https://github.com/user-attachments/assets/16f3cf61-bcbe-4b4d-a169-01c934140354"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9025-App-mode-App-mode-toolbar-3-30d6d73d365081549af6fdd1937b098f)
by [Unito](https://www.unito.io)
---
 src/components/appMode/AppModeToolbar.vue     | 126 ++++++++++++++++++
 src/locales/en/main.json                      |   4 +
 .../extensions/linearMode/LinearControls.vue  |  13 +-
 src/stores/appModeStore.ts                    |   2 +
 src/views/LinearView.vue                      |  42 +++---
 5 files changed, 160 insertions(+), 27 deletions(-)
 create mode 100644 src/components/appMode/AppModeToolbar.vue

diff --git a/src/components/appMode/AppModeToolbar.vue b/src/components/appMode/AppModeToolbar.vue
new file mode 100644
index 000000000..919c84115
--- /dev/null
+++ b/src/components/appMode/AppModeToolbar.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import WorkflowActionsDropdown from '@/components/common/WorkflowActionsDropdown.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
+import { useCommandStore } from '@/stores/commandStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { cn } from '@/utils/tailwindUtil'
+import { useAppModeStore } from '@/stores/appModeStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const workspaceStore = useWorkspaceStore()
+const appModeStore = useAppModeStore()
+const tooltipOptions = { showDelay: 300, hideDelay: 300 }
+
+const isAssetsActive = computed(
+  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'assets'
+)
+const isWorkflowsActive = computed(
+  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'workflows'
+)
+
+function enterBuilderMode() {
+  appModeStore.setMode('builder:select')
+}
+
+function openAssets() {
+  void commandStore.execute('Workspace.ToggleSidebarTab.assets')
+}
+
+function showApps() {
+  void commandStore.execute('Workspace.ToggleSidebarTab.workflows')
+}
+
+function openTemplates() {
+  useWorkflowTemplateSelectorDialog().show('sidebar')
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 pointer-events-auto">
+    <WorkflowActionsDropdown source="app_mode_toolbar">
+      <template #button>
+        <Button
+          v-tooltip.right="{
+            value: t('sideToolbar.labels.menu'),
+            ...tooltipOptions
+          }"
+          variant="secondary"
+          size="unset"
+          :aria-label="t('sideToolbar.labels.menu')"
+          class="h-10 rounded-lg pl-3 pr-2 gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+        >
+          <i class="icon-[lucide--panels-top-left] size-4" />
+          <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
+        </Button>
+      </template>
+    </WorkflowActionsDropdown>
+
+    <Button
+      v-if="appModeStore.enableAppBuilder"
+      v-tooltip.right="{
+        value: t('linearMode.appModeToolbar.appBuilder'),
+        ...tooltipOptions
+      }"
+      variant="secondary"
+      size="unset"
+      :aria-label="t('linearMode.appModeToolbar.appBuilder')"
+      class="size-10 rounded-lg"
+      @click="enterBuilderMode"
+    >
+      <i class="icon-[lucide--hammer] size-4" />
+    </Button>
+
+    <div
+      class="flex flex-col w-10 rounded-lg bg-secondary-background overflow-hidden"
+    >
+      <Button
+        v-tooltip.right="{
+          value: t('sideToolbar.mediaAssets.title'),
+          ...tooltipOptions
+        }"
+        variant="textonly"
+        size="unset"
+        :aria-label="t('sideToolbar.mediaAssets.title')"
+        :class="
+          cn('size-10', isAssetsActive && 'bg-secondary-background-hover')
+        "
+        @click="openAssets"
+      >
+        <i class="icon-[comfy--image-ai-edit] size-4" />
+      </Button>
+      <Button
+        v-tooltip.right="{
+          value: t('linearMode.appModeToolbar.apps'),
+          ...tooltipOptions
+        }"
+        variant="textonly"
+        size="unset"
+        :aria-label="t('linearMode.appModeToolbar.apps')"
+        :class="
+          cn('size-10', isWorkflowsActive && 'bg-secondary-background-hover')
+        "
+        @click="showApps"
+      >
+        <i class="icon-[lucide--panels-top-left] size-4" />
+      </Button>
+      <Button
+        v-tooltip.right="{
+          value: t('sideToolbar.templates'),
+          ...tooltipOptions
+        }"
+        variant="textonly"
+        size="unset"
+        :aria-label="t('sideToolbar.templates')"
+        class="size-10"
+        @click="openTemplates"
+      >
+        <i class="icon-[comfy--template] size-4" />
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index f834679a7..4d908a547 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2946,6 +2946,10 @@
       "layout": "On the left, you'll see your generated images, videos, and outputs. On the right, just the controls you need. Everything complex stays out of sight.",
       "sharing": "Sharing is easy: create your workflow, open App Mode, right-click the tab, and export. When others open your file, it launches straight into this clean view. You can share powerful workflows as simple tools without anyone needing to understand node graphs.",
       "widget": "If you want to control which settings appear, convert your top-level nodes into a subgraph, then use widget promotion in the toolbox above it to choose what's exposed."
+    },
+    "appModeToolbar": {
+      "appBuilder": "App builder",
+      "apps": "Apps"
     }
   },
   "missingNodes": {
diff --git a/src/renderer/extensions/linearMode/LinearControls.vue b/src/renderer/extensions/linearMode/LinearControls.vue
index dfe30f72f..f65fcceff 100644
--- a/src/renderer/extensions/linearMode/LinearControls.vue
+++ b/src/renderer/extensions/linearMode/LinearControls.vue
@@ -39,7 +39,6 @@ const appModeStore = useAppModeStore()
 
 const props = defineProps<{
   toastTo?: string | HTMLElement
-  notesTo?: string | HTMLElement
   mobile?: boolean
 }>()
 
@@ -194,11 +193,10 @@ defineExpose({ runButtonClick })
       <div class="flex-1" />
       <Popover
         v-if="partitionedNodes[0].length"
-        align="start"
+        align="end"
         class="overflow-y-auto overflow-x-clip max-h-(--reka-popover-content-available-height) z-100"
-        :reference="notesTo"
-        side="left"
-        :to="notesTo"
+        side="bottom"
+        :side-offset="-8"
       >
         <template #button>
           <Button variant="muted-textonly">
@@ -312,9 +310,4 @@ defineExpose({ runButtonClick })
       <span v-text="t('queue.jobAddedToQueue')" />
     </div>
   </Teleport>
-  <Teleport v-if="false" defer :to="notesTo">
-    <div
-      class="bg-base-background text-muted-foreground flex flex-col w-90 gap-2 rounded-2xl border-1 border-border-subtle py-3"
-    ></div>
-  </Teleport>
 </template>
diff --git a/src/stores/appModeStore.ts b/src/stores/appModeStore.ts
index 364c9eae0..320cade8a 100644
--- a/src/stores/appModeStore.ts
+++ b/src/stores/appModeStore.ts
@@ -7,6 +7,7 @@ export const useAppModeStore = defineStore('appMode', () => {
   const mode = ref<AppMode>('graph')
   const builderSaving = ref(false)
   const hasOutputs = ref(true)
+  const enableAppBuilder = ref(false)
 
   const isBuilderMode = computed(
     () => mode.value === 'builder:select' || mode.value === 'builder:arrange'
@@ -23,6 +24,7 @@ export const useAppModeStore = defineStore('appMode', () => {
 
   return {
     mode: readonly(mode),
+    enableAppBuilder: readonly(enableAppBuilder),
     isBuilderMode,
     isAppMode,
     isGraphMode,
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index fc73a6cb2..41daf981c 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -10,10 +10,9 @@ import SplitterPanel from 'primevue/splitterpanel'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import AppModeToolbar from '@/components/appMode/AppModeToolbar.vue'
 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 TypeformPopoverButton from '@/components/ui/TypeformPopoverButton.vue'
@@ -25,15 +24,26 @@ import MobileMenu from '@/renderer/extensions/linearMode/MobileMenu.vue'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import type { ResultItemImpl } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { useAppModeStore } from '@/stores/appModeStore'
 
 const { t } = useI18n()
 const nodeOutputStore = useNodeOutputStore()
 const settingStore = useSettingStore()
 const workspaceStore = useWorkspaceStore()
+const appModeStore = useAppModeStore()
 
 const mobileDisplay = useBreakpoints(breakpointsTailwind).smaller('md')
 
 const activeTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
+const sidebarOnLeft = computed(
+  () => settingStore.get('Comfy.Sidebar.Location') === 'left'
+)
+const hasLeftPanel = computed(
+  () => (sidebarOnLeft.value && activeTab.value) || !sidebarOnLeft.value
+)
+const hasRightPanel = computed(
+  () => sidebarOnLeft.value || (!sidebarOnLeft.value && activeTab.value)
+)
 
 const hasPreview = ref(false)
 whenever(
@@ -45,8 +55,6 @@ const selectedItem = ref<AssetItem>()
 const selectedOutput = ref<ResultItemImpl>()
 const canShowPreview = ref(true)
 
-const topLeftRef = useTemplateRef('topLeftRef')
-const topRightRef = useTemplateRef('topRightRef')
 const bottomLeftRef = useTemplateRef('bottomLeftRef')
 const bottomRightRef = useTemplateRef('bottomRightRef')
 const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
@@ -93,28 +101,27 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
       @resizestart="({ originalEvent }) => originalEvent.preventDefault()"
     >
       <SplitterPanel
+        v-if="hasLeftPanel"
         id="linearLeftPanel"
         :size="1"
         class="min-w-min outline-none"
       >
         <div
-          v-if="settingStore.get('Comfy.Sidebar.Location') === 'left'"
+          v-if="sidebarOnLeft && activeTab"
           class="flex h-full border-border-subtle border-r"
         >
-          <SideToolbar />
-          <ExtensionSlot v-if="activeTab" :extension="activeTab" />
+          <ExtensionSlot :extension="activeTab" />
         </div>
         <LinearControls
           v-else
           ref="linearWorkflowRef"
           :toast-to="unrefElement(bottomLeftRef) ?? undefined"
-          :notes-to="unrefElement(topLeftRef) ?? undefined"
         />
       </SplitterPanel>
       <SplitterPanel
         id="linearCenterPanel"
         :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"
+        class="flex flex-col min-w-min gap-4 px-10 pt-8 pb-4 relative text-muted-foreground outline-none"
       >
         <LinearPreview
           :latent-preview="
@@ -126,10 +133,9 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
           :selected-item
           :selected-output
         />
-        <div ref="topLeftRef" class="absolute z-21 top-4 left-4">
-          <WorkflowActionsDropdown source="app_mode_menu_selected" />
+        <div class="absolute z-21 top-1 left-1">
+          <AppModeToolbar v-if="!appModeStore.isBuilderMode" />
         </div>
-        <div ref="topRightRef" class="absolute z-21 top-4 right-4" />
         <div ref="bottomLeftRef" class="absolute z-20 bottom-4 left-4" />
         <div ref="bottomRightRef" class="absolute z-20 bottom-24 right-4" />
         <div
@@ -146,19 +152,21 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         </div>
       </SplitterPanel>
       <SplitterPanel
+        v-if="hasRightPanel"
         id="linearRightPanel"
         :size="1"
         class="min-w-min outline-none"
       >
         <LinearControls
-          v-if="settingStore.get('Comfy.Sidebar.Location') === 'left'"
+          v-if="sidebarOnLeft"
           ref="linearWorkflowRef"
           :toast-to="unrefElement(bottomRightRef) ?? undefined"
-          :notes-to="unrefElement(topRightRef) ?? undefined"
         />
-        <div v-else class="flex h-full border-border-subtle border-l">
-          <ExtensionSlot v-if="activeTab" :extension="activeTab" />
-          <SideToolbar class="border-border-subtle border-l" />
+        <div
+          v-else-if="activeTab"
+          class="flex h-full border-border-subtle border-l"
+        >
+          <ExtensionSlot :extension="activeTab" />
         </div>
       </SplitterPanel>
     </Splitter>