[automated] Apply ESLint and Prettier fixes

- Create new MarkdownImageGallery component using PrimeVue Galleria directly
- Remove dependency on ResultGallery and ResultItemImpl
- Simplify image data structure with simple ImageItem interface
- Improve separation of concerns and maintainability
- Address review feedback to use dedicated component wrapper

src/components/sidebar/tabs/nodeLibrary/MarkdownImageGallery.vue

@@ -0,0 +1,144 @@
+<template>
+  <Galleria
+    v-model:visible="galleryVisible"
+    :active-index="activeIndex"
+    :value="imageItems"
+    :show-indicators="false"
+    change-item-on-indicator-hover
+    show-item-navigators
+    full-screen
+    circular
+    :show-thumbnails="false"
+    :pt="{
+      mask: {
+        onMousedown: onMaskMouseDown,
+        onMouseup: onMaskMouseUp,
+        'data-mask': true
+      },
+      prevButton: {
+        style: 'position: fixed !important'
+      },
+      nextButton: {
+        style: 'position: fixed !important'
+      }
+    }"
+    @update:visible="handleVisibilityChange"
+    @update:active-index="handleActiveIndexChange"
+  >
+    <template #item="{ item }">
+      <img :src="item.url" :alt="item.filename" class="galleria-image" />
+    </template>
+  </Galleria>
+</template>
+
+<script setup lang="ts">
+import Galleria from 'primevue/galleria'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+interface ImageItem {
+  url: string
+  filename: string
+}
+
+const props = defineProps<{
+  imageItems: ImageItem[]
+  activeIndex: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:activeIndex', value: number): void
+}>()
+
+const galleryVisible = ref(false)
+let maskMouseDownTarget: EventTarget | null = null
+
+const onMaskMouseDown = (event: MouseEvent) => {
+  maskMouseDownTarget = event.target
+}
+
+const onMaskMouseUp = (event: MouseEvent) => {
+  const maskEl = document.querySelector('[data-mask]')
+  if (
+    galleryVisible.value &&
+    maskMouseDownTarget === event.target &&
+    maskMouseDownTarget === maskEl
+  ) {
+    galleryVisible.value = false
+    handleVisibilityChange(false)
+  }
+}
+
+watch(
+  () => props.activeIndex,
+  (index) => {
+    if (index !== -1) {
+      galleryVisible.value = true
+    }
+  }
+)
+
+const handleVisibilityChange = (visible: boolean) => {
+  if (!visible) {
+    emit('update:activeIndex', -1)
+  }
+}
+
+const handleActiveIndexChange = (index: number) => {
+  emit('update:activeIndex', index)
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (!galleryVisible.value) return
+
+  switch (event.key) {
+    case 'ArrowLeft':
+      navigateImage(-1)
+      break
+    case 'ArrowRight':
+      navigateImage(1)
+      break
+    case 'Escape':
+      galleryVisible.value = false
+      handleVisibilityChange(false)
+      break
+  }
+}
+
+const navigateImage = (direction: number) => {
+  const newIndex =
+    (props.activeIndex + direction + props.imageItems.length) %
+    props.imageItems.length
+  emit('update:activeIndex', newIndex)
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+})
+</script>
+
+<style>
+/* PrimeVue's galleria teleports the fullscreen gallery out of subtree so we
+cannot use scoped style here. */
+img.galleria-image {
+  max-width: 100vw;
+  max-height: 100vh;
+  object-fit: contain;
+}
+
+.p-galleria-close-button {
+  /* Set z-index so the close button doesn't get hidden behind the image when image is large */
+  z-index: 1;
+}
+
+/* Mobile/tablet specific fixes */
+@media screen and (max-width: 768px) {
+  .p-galleria-prev-button,
+  .p-galleria-next-button {
+    z-index: 2;
+  }
+}
+</style>

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

@@ -21,6 +21,7 @@
       <!-- Markdown fetched successfully -->
       <div
         v-else-if="!error"
+        ref="markdownContainer"
         class="markdown-content"
         v-html="renderedHelpHtml"
       />
@@ -81,17 +82,30 @@
       </div>
     </div>
   </div>
+
+  <!-- Image Gallery for markdown images -->
+  <MarkdownImageGallery
+    v-model:active-index="galleryActiveIndex"
+    :image-items="imageItems"
+  />
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 
+import MarkdownImageGallery from './MarkdownImageGallery.vue'
+
+interface ImageItem {
+  url: string
+  filename: string
+}
+
 const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
 
 const nodeHelpStore = useNodeHelpStore()
@@ -101,6 +115,11 @@ defineEmits<{
   (e: 'close'): void
 }>()
 
+// Gallery state for image preview
+const markdownContainer = ref<HTMLElement | null>(null)
+const imageItems = ref<ImageItem[]>([])
+const galleryActiveIndex = ref(-1)
+
 const inputList = computed(() =>
   Object.values(node.inputs).map((spec) => ({
     name: spec.name,
@@ -116,6 +135,66 @@ const outputList = computed(() =>
     tooltip: spec.tooltip || ''
   }))
 )
+
+// Track if we've already setup image preview to avoid re-setup
+const imagePreviewSetup = ref(false)
+
+// Function to setup image preview functionality
+function setupImagePreview() {
+  if (!markdownContainer.value || imagePreviewSetup.value) return
+
+  const imgs = Array.from(markdownContainer.value.querySelectorAll('img'))
+
+  // Only setup if there are images
+  if (imgs.length === 0) return
+
+  // Update gallery items - create simple image items
+  imageItems.value = imgs.map((img, index) => {
+    // Extract filename from URL
+    const url = new URL(img.src, window.location.origin)
+    const filename = url.pathname.split('/').pop() || `image-${index}.jpg`
+
+    return {
+      url: img.src,
+      filename
+    }
+  })
+
+  // Add click handlers to images
+  imgs.forEach((img, index) => {
+    img.style.cursor = 'zoom-in'
+    img.onclick = (e) => {
+      e.preventDefault()
+      galleryActiveIndex.value = index
+    }
+  })
+
+  imagePreviewSetup.value = true
+}
+
+// Reset setup flag when content changes
+function resetImagePreviewSetup() {
+  imagePreviewSetup.value = false
+  imageItems.value = []
+  galleryActiveIndex.value = -1
+}
+
+// Watch for changes in rendered HTML and setup image preview
+watch(renderedHelpHtml, async () => {
+  resetImagePreviewSetup()
+  await nextTick()
+  setupImagePreview()
+})
+
+// Watch for loading state changes
+watch([isLoading, error], () => {
+  resetImagePreviewSetup()
+})
+
+onMounted(async () => {
+  await nextTick()
+  setupImagePreview()
+})
 </script>
 
 <style scoped>
@@ -242,4 +321,13 @@ const outputList = computed(() =>
     color: var(--p-text-color);
   }
 }
+
+/* Add hover effect for clickable images */
+.markdown-content :deep(img) {
+  transition: opacity 0.2s ease;
+}
+
+.markdown-content :deep(img:hover) {
+  opacity: 0.8;
+}
 </style>