Further linear fixes (#8074)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8074-Further-linear-fixes-2e96d73d365081efb74bf150982c7a66)
by [Unito](https://www.unito.io)

src/renderer/extensions/linearMode/DropZone.vue

@@ -7,8 +7,9 @@ defineProps<{
   onDragOver?: (e: DragEvent) => boolean
   onDragDrop?: (e: DragEvent) => Promise<boolean> | boolean
   dropIndicator?: {
-    label?: string
     iconClass?: string
+    imageUrl?: string
+    label?: string
     onClick?: (e: MouseEvent) => void
   }
 }>()
@@ -44,8 +45,15 @@ const canAcceptDrop = ref(false)
       "
       @click.prevent="dropIndicator?.onClick?.($event)"
     >
-      <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
-      <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
+      <img
+        v-if="dropIndicator?.imageUrl"
+        class="h-23"
+        :src="dropIndicator?.imageUrl"
+      />
+      <template v-else>
+        <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
+        <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
+      </template>
     </div>
   </div>
   <slot v-else />

src/renderer/extensions/linearMode/LinearControls.vue

@@ -18,6 +18,7 @@ import DropZone from '@/renderer/extensions/linearMode/DropZone.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
 import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils'
 import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
+import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -50,15 +51,26 @@ useEventListener(
   () => (graphNodes.value = app.rootGraph.nodes)
 )
 
+function getDropIndicator(node: LGraphNode) {
+  if (node.type !== 'LoadImage') return undefined
+
+  const filename = node.widgets?.[0]?.value
+  const resultItem = { type: 'input', filename: `${filename}` }
+
+  return {
+    iconClass: 'icon-[lucide--image]',
+    imageUrl: filename
+      ? api.apiURL(
+          `/view?${new URLSearchParams(resultItem)}${app.getPreviewFormatParam()}`
+        )
+      : undefined,
+    label: t('linearMode.dragAndDropImage'),
+    onClick: () => node.widgets?.[1]?.callback?.(undefined)
+  }
+}
+
 function nodeToNodeData(node: LGraphNode) {
-  const dropIndicator =
-    node.type !== 'LoadImage'
-      ? undefined
-      : {
-          iconClass: 'icon-[lucide--image]',
-          label: t('linearMode.dragAndDropImage'),
-          onClick: () => node.widgets?.[1]?.callback?.(undefined)
-        }
+  const dropIndicator = getDropIndicator(node)
   const nodeData = extractVueNodeData(node)
   for (const widget of nodeData.widgets ?? []) widget.slotMetadata = undefined
 
@@ -107,7 +119,7 @@ async function runButtonClick(e: Event) {
       : 'Comfy.QueuePrompt'
 
     useTelemetry()?.trackUiButtonClicked({
-      button_id: 'queue_run_linear'
+      button_id: props.mobile ? 'queue_run_linear_mobile' : 'queue_run_linear'
     })
     if (batchCount.value > 1) {
       useTelemetry()?.trackUiButtonClicked({
@@ -196,7 +208,7 @@ defineExpose({ runButtonClick })
             <NodeWidgets
               :node-data
               :style="{ background: applyLightThemeColor(nodeData.bgcolor) }"
-              class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg"
+              class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg max-w-100"
             />
           </template>
         </div>

src/renderer/extensions/linearMode/LinearPreview.vue

@@ -159,7 +159,7 @@ async function rerun(e: Event) {
   <VideoPreview
     v-else-if="getMediaType(selectedOutput) === 'video'"
     :src="selectedOutput!.url"
-    class="object-contain flex-1 contain-size"
+    class="object-contain flex-1 md:contain-size"
   />
   <audio
     v-else-if="getMediaType(selectedOutput) === 'audio'"
@@ -178,7 +178,7 @@ async function rerun(e: Event) {
   />
   <img
     v-else
-    class="pointer-events-none object-contain flex-1 max-h-full brightness-50 opacity-10"
+    class="pointer-events-none object-contain flex-1 max-h-full md:contain-size brightness-50 opacity-10"
     src="/assets/images/comfy-logo-mono.svg"
   />
 </template>

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -217,7 +217,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
       <ModeToggle />
     </div>
     <div class="border-border-subtle md:border-r" />
-    <WorkflowsSidebarTab v-if="displayWorkflows" class="min-w-50" />
+    <WorkflowsSidebarTab v-if="displayWorkflows" class="min-w-50 grow-1" />
     <article
       v-else
       ref="outputsRef"