feat: App mode - Show filename on previews (#10364)

## Summary

Shows the name of the file allowing users to update the filename_prefix
widget on nodes to easier identify which output is for which node

## Changes

- **What**: Pass output display name or filename and use as label

## Screenshots (if applicable)

<img width="586" height="203" alt="image"
src="https://github.com/user-attachments/assets/8d989e61-aa47-4644-8738-159dbf4430e0"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10364-feat-App-mode-Show-filename-on-previews-32a6d73d36508133b53df619e8f0bea1)
by [Unito](https://www.unito.io)

src/renderer/extensions/linearMode/ImagePreview.vue

@@ -9,6 +9,7 @@ defineOptions({ inheritAttrs: false })
 const { src } = defineProps<{
   src: string
   mobile?: boolean
+  label?: string
 }>()
 
 const imageRef = useTemplateRef('imageRef')
@@ -48,5 +49,8 @@ const height = ref('')
       }
     "
   />
-  <span class="self-center md:z-10" v-text="`${width} x ${height}`" />
+  <span class="self-center md:z-10">
+    {{ `${width} x ${height}` }}
+    <template v-if="label"> | {{ label }}</template>
+  </span>
 </template>

src/renderer/extensions/linearMode/MediaOutputPreview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent, useAttrs } from 'vue'
+import { computed, defineAsyncComponent, useAttrs } from 'vue'
 
 import ImagePreview from '@/renderer/extensions/linearMode/ImagePreview.vue'
 import VideoPreview from '@/renderer/extensions/linearMode/VideoPreview.vue'
@@ -19,40 +19,56 @@ const { output } = defineProps<{
 }>()
 
 const attrs = useAttrs()
+const mediaType = computed(() => getMediaType(output))
+const outputLabel = computed(
+  () => output.display_name?.trim() || output.filename
+)
 </script>
 <template>
-  <ImagePreview
-    v-if="getMediaType(output) === 'images'"
-    :class="attrs.class as string"
-    :mobile
-    :src="output.url"
-  />
-  <VideoPreview
-    v-else-if="getMediaType(output) === 'video'"
-    :src="output.url"
-    :class="
-      cn('flex-1 object-contain md:p-3 md:contain-size', attrs.class as string)
-    "
-  />
-  <audio
-    v-else-if="getMediaType(output) === 'audio'"
-    :class="cn('m-auto w-full', attrs.class as string)"
-    controls
-    :src="output.url"
-  />
-  <article
-    v-else-if="getMediaType(output) === 'text'"
-    :class="
-      cn(
-        'm-auto my-12 size-full max-w-2xl scroll-shadows-secondary-background overflow-y-auto rounded-lg bg-secondary-background p-4 whitespace-pre-wrap',
-        attrs.class as string
-      )
-    "
-    v-text="output.content"
-  />
-  <Preview3d
-    v-else-if="getMediaType(output) === '3d'"
-    :class="attrs.class as string"
-    :model-url="output.url"
-  />
+  <template v-if="mediaType === 'images' || mediaType === 'video'">
+    <ImagePreview
+      v-if="mediaType === 'images'"
+      :class="attrs.class as string"
+      :mobile
+      :src="output.url"
+      :label="outputLabel"
+    />
+    <VideoPreview
+      v-else
+      :src="output.url"
+      :label="outputLabel"
+      :class="
+        cn(
+          'flex-1 object-contain md:p-3 md:contain-size',
+          attrs.class as string
+        )
+      "
+    />
+  </template>
+  <template v-else>
+    <audio
+      v-if="mediaType === 'audio'"
+      :class="cn('m-auto w-full', attrs.class as string)"
+      controls
+      :src="output.url"
+    />
+    <article
+      v-else-if="mediaType === 'text'"
+      :class="
+        cn(
+          'm-auto my-12 size-full max-w-2xl scroll-shadows-secondary-background overflow-y-auto rounded-lg bg-secondary-background p-4 whitespace-pre-wrap',
+          attrs.class as string
+        )
+      "
+      v-text="output.content"
+    />
+    <Preview3d
+      v-else-if="mediaType === '3d'"
+      :class="attrs.class as string"
+      :model-url="output.url"
+    />
+    <span v-if="outputLabel" class="self-center text-sm">
+      {{ outputLabel }}
+    </span>
+  </template>
 </template>

src/renderer/extensions/linearMode/VideoPreview.vue

@@ -3,6 +3,7 @@ import { ref, useTemplateRef } from 'vue'
 
 const { src } = defineProps<{
   src: string
+  label?: string
 }>()
 
 const videoRef = useTemplateRef('videoRef')
@@ -23,5 +24,8 @@ const height = ref('')
       }
     "
   />
-  <span class="z-10 self-center" v-text="`${width} x ${height}`" />
+  <span class="z-10 self-center">
+    {{ `${width} x ${height}` }}
+    <template v-if="label"> | {{ label }}</template>
+  </span>
 </template>