[Draft] Add QueueAssetCard presentation components #5878

viva-jinyi · 2025-10-01T12:26:47Z

Summary

Implemented presentation-only QueueAssetCard component for the Queue Panel Upgrade project
Created type-specific card components for different media types (Image, Video, Audio, Text)
Integrated with existing component library (IconButton, Card components)

Changes

✨ New QueueAssetCard component that switches between type-specific cards based on media kind
✨ Type-specific card components: QueueImageCard, QueueVideoCard, QueueAudioCard, QueueTextCard
✨ Reusable QueueAssetThumbnail component for media display
✨ JobIdSection component for output context
🎨 Uses existing Card components with 1:1 aspect ratio for consistent layouts
🎨 Responsive design without hardcoded dimensions
🎨 Hover states with action buttons using IconButton component
📚 Added comprehensive Storybook stories
✅ Added unit tests

Test Plan

Review Storybook stories for all card types
Verify 1:1 aspect ratio consistency across all cards
Test hover states and action buttons
Check responsive behavior
Verify Input/Output context switching

🤖 Generated with Claude Code

┆Issue is synchronized with this Notion page by Unito

- Create type-specific card components (Image, Video, Audio, Text) - Use IconButton and Card components from common library - Implement 1:1 aspect ratio for all CardTop components - Add responsive layouts without hardcoded dimensions - Support Input/Output contexts with jobId display - Add Storybook stories and unit tests 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2025-10-01T12:27:11Z

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 10/01/2025, 12:28:42 PM UTC

🔗 Links

📊 View Workflow Run
🎨 View Storybook

🎉 Your Storybook is ready for review!

github-actions · 2025-10-01T12:27:14Z

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 10/01/2025, 12:38:22 PM UTC

📈 Summary

Total Tests: 483
Passed: 449 ✅
Failed: 0
Flaky: 5 ⚠️
Skipped: 29 ⏭️

📊 Test Reports by Browser

✅ chromium: View Report • ✅ 441 / ❌ 0 / ⚠️ 5 / ⏭️ 29
✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ mobile-chrome: View Report • ✅ 5 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

github-actions · 2025-10-01T12:30:46Z

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

ESLint auto-fixes
Prettier formatting

claude · 2025-10-03T20:39:09Z

src/components/assetLibrary/cards/QueueImageCard.vue

+import CardContainer from '@/components/card/CardContainer.vue'
+import CardTop from '@/components/card/CardTop.vue'
+import type { AssetContext, AssetMeta } from '@/types/media.types'
+import { formatSize } from '@/utils/formatUtil'


[architecture] critical Priority

Issue: Incorrect import path for formatSize utility
Context: Components import formatSize from '@/utils/formatUtil' but the file exists at 'packages/shared-frontend-utils/src/formatUtil.ts'. This will cause build failures.
Suggestion: Either fix the import path or check if there should be a path alias mapping in the build configuration

claude · 2025-10-03T20:39:18Z

src/components/assetLibrary/QueueAssetThumbnail.vue

+      >
+        <i class="pi pi-copy text-xs" />
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span>MULTI</span>


[quality] medium Priority

Issue: Hardcoded text violates i18n guidelines
Context: The project has comprehensive i18n support but this component hardcodes 'MULTI' text
Suggestion: Use i18n translation key instead of hardcoded text, e.g., {{ ('asset.multi') }}

claude · 2025-10-03T20:39:25Z

src/components/assetLibrary/QueueAssetThumbnail.vue

+        v-else
+        class="w-full h-full flex items-center justify-center p-4 bg-gray-100 dark-theme:bg-gray-800 rounded-t-lg"
+        :style="{
+          backgroundImage: 'url(/assets/images/default-template.png)',


[performance] medium Priority

Issue: Hardcoded asset URL may cause loading issues
Context: Direct path '/assets/images/default-template.png' assumes specific asset location
Suggestion: Import the asset properly or use a dynamic import to ensure build tools can handle asset optimization and path resolution

claude · 2025-10-03T20:39:32Z

src/components/assetLibrary/QueueAssetThumbnail.vue

+      >
+        <video
+          controls
+          autoplay


[security] low Priority

Issue: Autoplay video without user consent
Context: Video autoplay can consume bandwidth, battery, and be accessibility unfriendly without explicit user consent
Suggestion: Remove autoplay or make it conditional based on user preferences/settings

claude · 2025-10-03T20:39:39Z

src/components/assetLibrary/cards/QueueVideoCard.vue

+  '!rounded-lg'
+)
+
+function formatDuration(seconds: number): string {


[quality] medium Priority

Issue: Code duplication - formatDuration function
Context: Identical formatDuration function exists in both QueueVideoCard and QueueAudioCard components
Suggestion: Extract formatDuration to a shared utility function or use existing time formatting utilities from a library like date-fns

claude · 2025-10-03T20:39:52Z

src/components/assetLibrary/common/JobIdSection.vue

+<template>
+  <div class="flex items-center gap-1">
+    <span class="text-xs text-muted">{{ `Job: ${jobId}` }}</span>
+    <button


[quality] medium Priority

Issue: Missing keyboard accessibility for JobIdSection button
Context: The copy button lacks proper keyboard event handlers
Suggestion: Add @keydown.enter and @keydown.space event handlers to support keyboard navigation

claude · 2025-10-03T20:39:59Z

src/types/media.types.ts

+ * Media types for Asset Library
+ */
+
+export type MediaKind =


[quality] low Priority

Issue: Missing JSDoc documentation for public types
Context: New MediaKind type and AssetMeta interface would benefit from documentation for maintainability
Suggestion: Add JSDoc comments describing when each MediaKind should be used and what AssetMeta represents

claude · 2025-10-03T20:40:08Z

src/components/assetLibrary/QueueAssetThumbnail.vue

+          :poster="asset.thumbnailUrl"
+          @click.stop
+        >
+          <source :src="asset.videoUrl || asset.thumbnailUrl || ''" />


[performance] low Priority

Issue: Inefficient fallback chain for video source
Context: The video source fallback uses 'asset.videoUrl || asset.thumbnailUrl || ""' which may load inappropriate content
Suggestion: Separate the logic - only use videoUrl for video source and handle missing URLs with proper error states

claude · 2025-10-03T20:40:15Z

src/components/assetLibrary/QueueAssetCard.vue

+import type { AssetContext, AssetMeta, MediaKind } from '@/types/media.types'
+
+// Map media types to their specific card components
+const cardComponents = {


[architecture] medium Priority

Issue: Inconsistent component mapping for media types
Context: Both 'webp' and 'gif' map to QueueImageCard, but 'pose' also maps to QueueImageCard which may not be semantically correct
Suggestion: Consider if 'pose' should have its own card component or be mapped to QueueTextCard based on its actual content type

claude · 2025-10-03T20:40:22Z

src/components/assetLibrary/QueueAssetCard.vue

+    @open-detail="emit('openDetail', $event)"
+    @play="emit('play', $event)"
+    @view="emit('view', $event)"
+    @copy="emit('copy', $event)"


[quality] medium Priority

Issue: Missing 'more' event handler in parent component
Context: QueueImageCard and QueueVideoCard emit 'more' events but QueueAssetCard doesn't handle or forward them
Suggestion: Add @more="emit('more', $event)" to the parent component's event handlers

claude

Comprehensive PR Review

This review is generated by Claude. It may not always be accurate, as with human reviewers. If you believe that any of the comments are invalid or incorrect, please state why for each. For others, please implement the changes in one way or another.

Review Summary

PR: [Draft] Add QueueAssetCard presentation components (#5878)
Impact: 1499 additions, 0 deletions across 11 files

Issue Distribution

Critical: 1
High: 0
Medium: 6
Low: 3

Category Breakdown

Architecture: 2 issues
Security: 1 issues
Performance: 2 issues
Code Quality: 5 issues

Key Findings

Architecture & Design

The component architecture follows Vue 3 Composition API patterns well with proper type-specific card components. However, there's a critical import path issue that will cause build failures. The component mapping for 'pose' type needs reconsideration for semantic correctness.

Security Considerations

Video autoplay without user consent could impact bandwidth and accessibility. Consider implementing user preference controls.

Performance Impact

Hardcoded asset paths and inefficient video fallback chains may impact build optimization and runtime performance.

Integration Points

Missing event handler forwarding may break parent-child communication. The formatUtil import path mismatch is the most critical issue requiring immediate attention.

Positive Observations

Excellent use of TypeScript with proper type definitions
Good accessibility with ARIA labels and keyboard support
Consistent use of Tailwind utility classes following project guidelines
Comprehensive test coverage and Storybook stories
Proper component composition with clear separation of concerns
Good error and loading state handling

References

Next Steps

Address critical import path issue before merge
Fix missing event handler forwarding
Extract duplicate formatDuration utility function
Add i18n support for hardcoded text
Consider accessibility improvements for keyboard navigation

This is a comprehensive automated review. For architectural decisions requiring human judgment, please request additional manual review.

viva-jinyi and others added 2 commits October 1, 2025 21:21

[chore] Remove unused formatUtil.ts file

522a99e

[auto-fix] Apply ESLint and Prettier fixes

97df22f

christian-byrne added the claude-review Add to trigger a PR code review from Claude Code label Oct 3, 2025

claude bot reviewed Oct 3, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Draft] Add QueueAssetCard presentation components #5878

[Draft] Add QueueAssetCard presentation components #5878

Uh oh!

viva-jinyi commented Oct 1, 2025 •

edited by sync-by-unito bot

Loading

Uh oh!

github-actions bot commented Oct 1, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 1, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 1, 2025

Uh oh!

claude bot Oct 3, 2025

Uh oh!

claude bot Oct 3, 2025

Uh oh!

claude bot Oct 3, 2025

Uh oh!

claude bot Oct 3, 2025

Uh oh!

claude bot Oct 3, 2025

Uh oh!

claude bot Oct 3, 2025

Uh oh!

claude bot Oct 3, 2025

Uh oh!

claude bot Oct 3, 2025

Uh oh!

claude bot Oct 3, 2025

Uh oh!

claude bot Oct 3, 2025

Uh oh!

claude bot left a comment

Uh oh!

Uh oh!

[Draft] Add QueueAssetCard presentation components #5878

Are you sure you want to change the base?

[Draft] Add QueueAssetCard presentation components #5878

Uh oh!

Conversation

viva-jinyi commented Oct 1, 2025 • edited by sync-by-unito bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test Plan

Uh oh!

github-actions bot commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Build Status

🔗 Links

Uh oh!

github-actions bot commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎭 Playwright Test Results

📈 Summary

📊 Test Reports by Browser

Uh oh!

github-actions bot commented Oct 1, 2025

🔧 Auto-fixes Applied

Changes made:

Uh oh!

claude bot Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot left a comment

Choose a reason for hiding this comment

Comprehensive PR Review

Review Summary

Issue Distribution

Category Breakdown

Key Findings

Architecture & Design

Security Considerations

Performance Impact

Integration Points

Positive Observations

References

Next Steps

Uh oh!

Uh oh!

viva-jinyi commented Oct 1, 2025 •

edited by sync-by-unito bot

Loading

github-actions bot commented Oct 1, 2025 •

edited

Loading

github-actions bot commented Oct 1, 2025 •

edited

Loading