[backport cloud/1.37] Linear: progressbar, tooltips, and output fixes (#8291)

Backport of #8250 to `cloud/1.37`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8291-backport-cloud-1-37-Linear-progressbar-tooltips-and-output-fixes-2f26d73d36508170a083eef8dfd1be50)
by [Unito](https://www.unito.io)

---------

Co-authored-by: AustinMroz <austin@comfy.org>
Co-authored-by: GitHub Action <action@github.com>

src/components/sidebar/ModeToggle.vue

@@ -14,16 +14,24 @@ function toggleLinearMode() {
 <template>
   <div class="p-1 bg-secondary-background rounded-lg w-10">
     <Button
+      v-tooltip="{
+        value: t('linearMode.linearMode'),
+        showDelay: 300,
+        hideDelay: 300
+      }"
       size="icon"
-      :title="t('linearMode.linearMode')"
       :variant="canvasStore.linearMode ? 'inverted' : 'secondary'"
       @click="toggleLinearMode"
     >
       <i class="icon-[lucide--panels-top-left]" />
     </Button>
     <Button
+      v-tooltip="{
+        value: t('linearMode.graphMode'),
+        showDelay: 300,
+        hideDelay: 300
+      }"
       size="icon"
-      :title="t('linearMode.graphMode')"
       :variant="canvasStore.linearMode ? 'secondary' : 'inverted'"
       @click="toggleLinearMode"
     >

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 md:contain-size"
+    class="object-contain flex-1 md:contain-size md:p-3"
   />
   <audio
     v-else-if="getMediaType(selectedOutput) === 'audio'"

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -7,6 +7,8 @@ import SidebarIcon from '@/components/sidebar/SidebarIcon.vue'
 import SidebarTemplatesButton from '@/components/sidebar/SidebarTemplatesButton.vue'
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
 import { CanvasPointer } from '@/lib/litegraph/src/CanvasPointer'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
@@ -23,6 +25,13 @@ import { cn } from '@/utils/tailwindUtil'
 
 const displayWorkflows = ref(false)
 const outputs = useMediaAssets('output')
+const {
+  progressBarContainerClass,
+  progressBarPrimaryClass,
+  progressBarSecondaryClass,
+  progressPercentStyle
+} = useProgressBarBackground()
+const { totalPercent, currentNodePercent } = useQueueProgress()
 const queueStore = useQueueStore()
 const settingStore = useSettingStore()
 
@@ -46,14 +55,14 @@ defineExpose({ onWheel })
 
 const selectedIndex = ref<[number, number]>([-1, 0])
 
-watch(selectedIndex, () => {
+function doEmit() {
   const [index] = selectedIndex.value
   emit('updateSelection', [
     outputs.media.value[index],
     selectedOutput.value,
     selectedIndex.value[0] <= 0
   ])
-})
+}
 
 const outputsRef = useTemplateRef('outputsRef')
 const { reset: resetInfiniteScroll } = useInfiniteScroll(
@@ -72,7 +81,9 @@ watch(selectedIndex, () => {
   const [index, key] = selectedIndex.value
   if (!outputsRef.value) return
 
-  const outputElement = outputsRef.value?.children?.[index]?.children?.[key]
+  const outputElement = outputsRef.value?.querySelectorAll(
+    `[data-output-index="${index}"]`
+  )?.[key]
   if (!outputElement) return
 
   //container: 'nearest' is nice, but bleeding edge and chrome only
@@ -96,12 +107,12 @@ const selectedOutput = computed(() => {
   return allOutputs(outputs.media.value[0])[0]
 })
 
+watch([selectedIndex, selectedOutput], doEmit)
 watch(
   () => outputs.media.value,
   (newAssets, oldAssets) => {
     if (newAssets.length === oldAssets.length || oldAssets.length === 0) return
     if (selectedIndex.value[0] <= 0) {
-      //force update
       selectedIndex.value = [0, 0]
       return
     }
@@ -246,6 +257,18 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
             queueStore.runningTasks.length + queueStore.pendingTasks.length
           "
         />
+        <div class="absolute -bottom-1 w-full h-3 rounded-sm overflow-clip">
+          <div :class="progressBarContainerClass">
+            <div
+              :class="progressBarPrimaryClass"
+              :style="progressPercentStyle(totalPercent)"
+            />
+            <div
+              :class="progressBarSecondaryClass"
+              :style="progressPercentStyle(currentNodePercent)"
+            />
+          </div>
+        </div>
       </section>
       <template v-for="(item, index) in outputs.media.value" :key="index">
         <div
@@ -262,6 +285,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
                   'border-2'
               )
             "
+            :data-output-index="index"
             :src="output.url"
             @click="selectedIndex = [index, key]"
           />
@@ -275,6 +299,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
                   'border-2'
               )
             "
+            :data-output-index="index"
             @click="selectedIndex = [index, key]"
           >
             <i