[backport cloud/1.36] feat: add model download progress dialog

AGENTS.md

@@ -63,6 +63,9 @@ The project uses **Nx** for build orchestration and task management
 - Imports:
   - sorted/grouped by plugin
   - run `pnpm format` before committing
+  - use separate `import type` statements, not inline `type` in mixed imports
+    - ✅ `import type { Foo } from './foo'` + `import { bar } from './foo'`
+    - ❌ `import { bar, type Foo } from './foo'`
 - ESLint:
   - Vue + TS rules
   - no floating promises
@@ -137,7 +140,7 @@ The project uses **Nx** for build orchestration and task management
 8. Implement proper error handling
 9. Follow Vue 3 style guide and naming conventions
 10. Use Vite for fast development and building
-11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
+11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json. Use the plurals system in i18n instead of hardcoding pluralization in templates.
 12. Avoid new usage of PrimeVue components
 13. Write tests for all changes, especially bug fixes to catch future regressions
 14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary

src/components/common/StatusBadge.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+type Severity = 'default' | 'secondary' | 'warn' | 'danger' | 'contrast'
+
+const { label, severity = 'default' } = defineProps<{
+  label: string
+  severity?: Severity
+}>()
+
+function badgeClasses(sev: Severity): string {
+  const baseClasses =
+    'inline-flex h-3.5 items-center justify-center rounded-full px-1 text-xxxs font-semibold uppercase'
+
+  switch (sev) {
+    case 'danger':
+      return `${baseClasses} bg-destructive-background text-white`
+    case 'contrast':
+      return `${baseClasses} bg-base-foreground text-base-background`
+    case 'warn':
+      return `${baseClasses} bg-warning-background text-base-background`
+    case 'secondary':
+      return `${baseClasses} bg-secondary-background text-base-foreground`
+    default:
+      return `${baseClasses} bg-primary-background text-base-foreground`
+  }
+}
+</script>
+
+<template>
+  <span :class="badgeClasses(severity)">{{ label }}</span>
+</template>

src/components/toast/ProgressToastItem.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import StatusBadge from '@/components/common/StatusBadge.vue'
+import type { AssetDownload } from '@/stores/assetDownloadStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const { job } = defineProps<{
+  job: AssetDownload
+}>()
+
+const { t } = useI18n()
+
+const progressPercent = computed(() => Math.round(job.progress * 100))
+const isCompleted = computed(() => job.status === 'completed')
+const isFailed = computed(() => job.status === 'failed')
+const isRunning = computed(() => job.status === 'running')
+const isPending = computed(() => job.status === 'created')
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex items-center justify-between rounded-lg bg-modal-card-background px-4 py-3',
+        isCompleted && 'opacity-50'
+      )
+    "
+  >
+    <div class="flex flex-col">
+      <span class="text-sm text-base-foreground">{{ job.assetName }}</span>
+      <span v-if="isRunning" class="text-xs text-muted-foreground">
+        {{ progressPercent }}%
+      </span>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <template v-if="isFailed">
+        <i
+          class="icon-[lucide--circle-alert] size-4 text-destructive-background"
+        />
+        <StatusBadge :label="t('progressToast.failed')" severity="danger" />
+      </template>
+
+      <template v-else-if="isCompleted">
+        <StatusBadge :label="t('progressToast.finished')" severity="contrast" />
+      </template>
+
+      <template v-else-if="isRunning">
+        <i
+          class="icon-[lucide--loader-circle] size-4 animate-spin text-primary-background"
+        />
+        <span class="text-xs text-primary-background">
+          {{ progressPercent }}%
+        </span>
+      </template>
+
+      <template v-else-if="isPending">
+        <span class="text-xs text-muted-foreground">
+          {{ t('progressToast.pending') }}
+        </span>
+      </template>
+    </div>
+  </div>
+</template>

src/locales/en/main.json

@@ -2456,5 +2456,21 @@
   "help": {
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
+  },
+  "progressToast": {
+    "importingModels": "Importing Models",
+    "downloadingModel": "Downloading model...",
+    "downloadsFailed": "{count} downloads failed | {count} download failed | {count} downloads failed",
+    "allDownloadsCompleted": "All downloads completed",
+    "noImportsInQueue": "No {filter} in queue",
+    "failed": "Failed",
+    "finished": "Finished",
+    "pending": "Pending",
+    "progressCount": "{completed} of {total}",
+    "filter": {
+      "all": "All",
+      "completed": "Completed",
+      "failed": "Failed"
+    }
   }
 }