feat/fix: App mode QA fixes (#9530)

## Summary Additional updates for app mode ## Changes - **What**: - Reposition toolbar button in app mode so it doesnt jump between modes - Move node name to under title on input/output selection - Change delete asset button text - Change exit builder button icon ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9530-feat-fix-App-mode-QA-fixes-31c6d73d365081738b5cc5beaf2cbd41) by [Unito](https://www.unito.io)
2026-03-11 08:00:21 +00:00 · 2026-03-07 18:54:13 +00:00
parent ca2d61f393
commit 5bb742ac3a
6 changed files with 89 additions and 65 deletions
--- a/src/components/appMode/AppModeToolbar.vue
+++ b/src/components/appMode/AppModeToolbar.vue
@@ -46,71 +46,74 @@ function showApps() {
 </script>

 <template>
-  <div class="pointer-events-auto flex flex-col gap-2">
-    <WorkflowActionsDropdown source="app_mode_toolbar" />
-
-    <Button
-      v-if="enableAppBuilder"
-      v-tooltip.right="{
-        value: t('linearMode.appModeToolbar.appBuilder'),
-        ...tooltipOptions
-      }"
-      variant="secondary"
-      size="unset"
-      :disabled="!hasNodes"
-      :aria-label="t('linearMode.appModeToolbar.appBuilder')"
-      class="size-10 rounded-lg"
-      @click="enterBuilder"
-    >
-      <i class="icon-[lucide--hammer] size-4" />
-    </Button>
-    <Button
-      v-if="isCloud && flags.workflowSharingEnabled"
-      v-tooltip.right="{
-        value: t('actionbar.shareTooltip'),
-        ...tooltipOptions
-      }"
-      variant="secondary"
-      size="unset"
-      :aria-label="t('actionbar.shareTooltip')"
-      class="size-10 rounded-lg"
-      @click="() => openShareDialog().catch(toastErrorHandler)"
-      @pointerenter="prefetchShareDialog"
-    >
-      <i class="icon-[lucide--send] size-4" />
-    </Button>
-
-    <div
-      class="flex w-10 flex-col overflow-hidden rounded-lg bg-secondary-background"
-    >
+  <div class="pointer-events-auto flex flex-row items-start gap-2">
+    <div class="pointer-events-auto flex flex-col gap-2">
      <Button
+        v-if="enableAppBuilder"
        v-tooltip.right="{
-          value: t('sideToolbar.mediaAssets.title'),
+          value: t('linearMode.appModeToolbar.appBuilder'),
          ...tooltipOptions
        }"
-        variant="textonly"
+        variant="secondary"
        size="unset"
-        :aria-label="t('sideToolbar.mediaAssets.title')"
-        :class="
-          cn('size-10', isAssetsActive && 'bg-secondary-background-hover')
-        "
-        @click="openAssets"
+        :disabled="!hasNodes"
+        :aria-label="t('linearMode.appModeToolbar.appBuilder')"
+        class="size-10 rounded-lg"
+        @click="enterBuilder"
      >
-        <i class="icon-[comfy--image-ai-edit] size-4" />
+        <i class="icon-[lucide--hammer] size-4" />
      </Button>
      <Button
+        v-if="isCloud && flags.workflowSharingEnabled"
        v-tooltip.right="{
-          value: t('linearMode.appModeToolbar.apps'),
+          value: t('actionbar.shareTooltip'),
          ...tooltipOptions
        }"
-        variant="textonly"
+        variant="secondary"
        size="unset"
-        :aria-label="t('linearMode.appModeToolbar.apps')"
-        :class="cn('size-10', isAppsActive && 'bg-secondary-background-hover')"
-        @click="showApps"
+        :aria-label="t('actionbar.shareTooltip')"
+        class="size-10 rounded-lg"
+        @click="() => openShareDialog().catch(toastErrorHandler)"
+        @pointerenter="prefetchShareDialog"
      >
-        <i class="icon-[lucide--panels-top-left] size-4" />
+        <i class="icon-[lucide--send] size-4" />
      </Button>
+
+      <div
+        class="flex w-10 flex-col overflow-hidden rounded-lg bg-secondary-background"
+      >
+        <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', isAppsActive && 'bg-secondary-background-hover')
+          "
+          @click="showApps"
+        >
+          <i class="icon-[lucide--panels-top-left] size-4" />
+        </Button>
+      </div>
    </div>
+    <WorkflowActionsDropdown source="app_mode_toolbar" />
  </div>
 </template>
--- a/src/components/builder/BuilderMenu.vue
+++ b/src/components/builder/BuilderMenu.vue
@@ -72,7 +72,7 @@ const menuItems = computed(() => [
  },
  {
    label: t('builderMenu.exitAppBuilder'),
-    icon: 'icon-[lucide--square-pen]',
+    icon: 'icon-[lucide--x]',
    action: onExitBuilder
  }
 ])
--- a/src/components/builder/IoItem.vue
+++ b/src/components/builder/IoItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import Popover from '@/components/ui/Popover.vue'
@@ -7,6 +7,13 @@ import Button from '@/components/ui/button/Button.vue'

 const { t } = useI18n()

+const titleTooltip = ref<string | null>(null)
+const subTitleTooltip = ref<string | null>(null)
+
+function isTruncated(e: MouseEvent): boolean {
+  const el = e.currentTarget as HTMLElement
+  return el.scrollWidth > el.clientWidth
+}
 const { rename, remove } = defineProps<{
  title: string
  subTitle?: string
@@ -32,15 +39,28 @@ const entries = computed(() => {
 })
 </script>
 <template>
-  <div class="my-2 flex items-center-safe gap-2 rounded-lg p-2">
-    <div
-      class="drag-handle mr-auto inline max-w-max min-w-0 flex-[4_1_0%] truncate"
-      v-text="title"
-    />
-    <div
-      class="drag-handle inline max-w-max min-w-0 flex-[2_1_0%] truncate text-end text-muted-foreground"
-      v-text="subTitle"
-    />
+  <div
+    class="my-2 flex items-center-safe gap-2 rounded-lg p-2"
+    data-testid="builder-io-item"
+  >
+    <div class="drag-handle mr-auto flex min-w-0 flex-col gap-1">
+      <div
+        v-tooltip.left="{ value: titleTooltip, showDelay: 300 }"
+        class="drag-handle truncate text-sm"
+        data-testid="builder-io-item-title"
+        @mouseenter="titleTooltip = isTruncated($event) ? title : null"
+        v-text="title"
+      />
+      <div
+        v-tooltip.left="{ value: subTitleTooltip, showDelay: 300 }"
+        class="drag-handle truncate text-xs text-muted-foreground"
+        data-testid="builder-io-item-subtitle"
+        @mouseenter="
+          subTitleTooltip = isTruncated($event) ? (subTitle ?? null) : null
+        "
+        v-text="subTitle"
+      />
+    </div>
    <Popover :entries>
      <template #button>
        <Button variant="muted-textonly">
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -3178,6 +3178,7 @@
    "backToWorkflow": "Back to workflow",
    "loadTemplate": "Load a template",
    "cancelThisRun": "Cancel this run",
+    "deleteAllAssets": "Delete all assets from this run",
    "welcome": {
      "title": "App Mode",
      "message": "A simplified view that hides the node graph so you can focus on creating.",
--- a/src/renderer/extensions/linearMode/LinearPreview.vue
+++ b/src/renderer/extensions/linearMode/LinearPreview.vue
@@ -126,7 +126,7 @@ async function rerun(e: Event) {
          : []),
        {
          icon: 'icon-[lucide--trash-2]',
-          label: t('queue.jobMenu.deleteAsset'),
+          label: t('linearMode.deleteAllAssets'),
          command: () => mediaActions.deleteAssets(selectedItem!)
        }
      ]"
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -145,13 +145,13 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
        class="relative flex min-w-[20vw] flex-col gap-4 text-muted-foreground outline-none"
      >
        <LinearProgressBar
-          class="absolute top-0 left-0 z-21 w-[calc(100%+16px)]"
+          class="absolute top-0 left-0 z-21 h-1 w-[calc(100%+16px)]"
        />
        <LinearPreview
          :run-button-click="linearWorkflowRef?.runButtonClick"
          :typeform-widget-id="TYPEFORM_WIDGET_ID"
        />
-        <div class="absolute top-4 left-4 z-21">
+        <div class="absolute top-2 left-4.5 z-21">
          <AppModeToolbar v-if="!isBuilderMode" />
        </div>
        <div ref="bottomLeftRef" class="absolute bottom-7 left-4 z-20" />