refactor: derive download platform type from useDownloadUrl

apps/website/src/components/product/local/DownloadLocalButton.vue

@@ -3,6 +3,7 @@ import type { Locale } from '../../../i18n/translations'
 import { computed } from 'vue'
 import type { HTMLAttributes } from 'vue'
 
+import type { Platform } from '../../../composables/useDownloadUrl'
 import {
   downloadUrls,
   useDownloadUrl
@@ -18,13 +19,15 @@ const { locale = 'en', class: customClass = '' } = defineProps<{
 
 const { downloadUrl, platform, showFallback } = useDownloadUrl()
 
-const ICONS = {
+const label = computed(() => t('download.hero.downloadLocal', locale))
+
+const ICONS: Record<Platform, string> = {
   windows: '/icons/os/windows.svg',
   mac: '/icons/os/apple.svg'
-} as const
+}
 
 interface ButtonSpec {
-  key: string
+  key: Platform
   href: string
   icon: string
   ariaLabel?: string
@@ -41,19 +44,18 @@ const buttons = computed<ButtonSpec[]>(() => {
     ]
   }
   if (showFallback.value) {
-    const label = t('download.hero.downloadLocal', locale)
     return [
       {
         key: 'windows',
         href: downloadUrls.windows,
         icon: ICONS.windows,
-        ariaLabel: `${label} — Windows`
+        ariaLabel: `${label.value} — Windows`
       },
       {
         key: 'mac',
         href: downloadUrls.macArm,
         icon: ICONS.mac,
-        ariaLabel: `${label} — macOS`
+        ariaLabel: `${label.value} — macOS`
       }
     ]
   }
@@ -77,11 +79,8 @@ const buttons = computed<ButtonSpec[]>(() => {
         :src="btn.icon"
         alt=""
         class="ppformula-text-center size-5 -translate-y-0.75"
-        aria-hidden="true"
       />
-      <span class="ppformula-text-center">{{
-        t('download.hero.downloadLocal', locale)
-      }}</span>
+      <span class="ppformula-text-center">{{ label }}</span>
     </span>
   </BrandButton>
 </template>

apps/website/src/composables/useDownloadUrl.ts

@@ -7,13 +7,13 @@ export const downloadUrls = {
   macArm: 'https://download.comfy.org/mac/dmg/arm64'
 } as const
 
-type DetectedPlatform = 'windows' | 'mac' | null
+export type Platform = 'windows' | 'mac'
 
 function isMobile(ua: string): boolean {
   return /iphone|ipad|ipod|android/.test(ua)
 }
 
-function detectPlatform(ua: string): DetectedPlatform {
+function detectPlatform(ua: string): Platform | null {
   if (isMobile(ua)) return null
   if (ua.includes('win')) return 'windows'
   if (ua.includes('macintosh') || ua.includes('mac os x')) return 'mac'
@@ -23,7 +23,7 @@ function detectPlatform(ua: string): DetectedPlatform {
 // TODO: Only Windows x64 and macOS arm64 are available today.
 // When Linux and/or macIntel builds are added, extend detection and URLs here.
 export function useDownloadUrl() {
-  const platform = ref<DetectedPlatform>(null)
+  const platform = ref<Platform | null>(null)
   const detected = ref(false)
   const isMobileUa = ref(false)
 

apps/website/src/scripts/posthog.ts

@@ -2,6 +2,8 @@ import posthog from 'posthog-js'
 
 import { createPostHogBeforeSend } from '@comfyorg/shared-frontend-utils/piiUtil'
 
+import type { Platform } from '@/composables/useDownloadUrl'
+
 const POSTHOG_KEY =
   import.meta.env.PUBLIC_POSTHOG_KEY ??
   'phc_iKfK86id4xVYws9LybMje0h44eGtfwFgRPIBehmy8rO'
@@ -39,7 +41,7 @@ export function capturePageview() {
   }
 }
 
-export function captureDownloadClick(platform: string) {
+export function captureDownloadClick(platform: Platform) {
   if (!initialized) return
   try {
     posthog.capture('website:download_button_clicked', { platform })