[feat] Refactor VideoHelpDialog and UploadModelFooter components

- Use IconTextButton instead of native button in UploadModelFooter for consistency
- Replace withDefaults with reactive props destructure in VideoHelpDialog
- Replace manual v-model implementation with defineModel
- Remove unused loop and showControls props, hardcode to defaults
- Refactor event listener management to use useEventListener from VueUse

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

src/platform/assets/components/UploadModelFooter.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="flex justify-end gap-2 w-full">
-    <button
+    <IconTextButton
       v-if="currentStep === 1"
-      class="text-muted-foreground mr-auto underline flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0"
+      :label="$t('assetBrowser.uploadModelHowDoIFindThis')"
+      type="transparent"
+      size="md"
+      class="mr-auto underline text-muted-foreground"
       data-attr="upload-model-step1-help-link"
       @click="showVideoHelp = true"
     >
-      <i class="icon-[lucide--circle-question-mark]" />
-      <span>{{ $t('assetBrowser.uploadModelHowDoIFindThis') }}</span>
-    </button>
+      <template #icon>
+        <i class="icon-[lucide--circle-question-mark]" />
+      </template>
+    </IconTextButton>
     <TextButton
       v-if="currentStep === 1"
       :label="$t('g.cancel')"
@@ -73,8 +77,6 @@
       v-model="showVideoHelp"
       video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
       :aria-label="$t('assetBrowser.uploadModelHelpVideo')"
-      loop
-      :show-controls="false"
     />
   </div>
 </template>

src/platform/assets/components/VideoHelpDialog.vue

@@ -22,10 +22,9 @@
         <i class="pi pi-times text-sm" />
       </IconButton>
       <video
-        :controls="showControls"
         autoplay
         muted
-        :loop="loop"
+        loop
         :aria-label="ariaLabel"
         class="w-full rounded-lg"
         :src="videoUrl"
@@ -37,35 +36,19 @@
 </template>
 
 <script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
 import Dialog from 'primevue/dialog'
-import { computed, onUnmounted, watch } from 'vue'
+import { watch } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    videoUrl: string
-    ariaLabel?: string
-    loop?: boolean
-    showControls?: boolean
-  }>(),
-  {
-    ariaLabel: 'Help video',
-    loop: true,
-    showControls: false
-  }
-)
+const isVisible = defineModel<boolean>({ required: true })
 
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+const { videoUrl, ariaLabel = 'Help video' } = defineProps<{
+  videoUrl: string
+  ariaLabel?: string
 }>()
 
-const isVisible = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value)
-})
-
 const handleEscapeKey = (event: KeyboardEvent) => {
   if (event.key === 'Escape' && isVisible.value) {
     event.stopImmediatePropagation()
@@ -75,22 +58,15 @@ const handleEscapeKey = (event: KeyboardEvent) => {
   }
 }
 
+// Add listener with capture phase to intercept before parent dialogs
+// Only active when dialog is visible
 watch(
   isVisible,
   (visible) => {
     if (visible) {
-      // Add listener with capture phase to intercept before parent dialogs
-      document.addEventListener('keydown', handleEscapeKey, { capture: true })
-    } else {
-      document.removeEventListener('keydown', handleEscapeKey, {
-        capture: true
-      })
+      useEventListener(document, 'keydown', handleEscapeKey, { capture: true })
     }
   },
   { immediate: true }
 )
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleEscapeKey, { capture: true })
-})
 </script>