Extract AssetsSidebarTab template and improve UI structure

[viva-jinyi]

Summary

• Extract sidebar template into reusable AssetSidebarTemplate component
• Replace PrimeVue Tabs with TextButton for better visual consistency
• Improve job detail view header layout with better spacing

Changes

• Created AssetSidebarTemplate.vue as a reusable template component
• Replaced PrimeVue Tabs with TextButton components for tab navigation
• Added i18n translation key for "Back to all assets" button
• Improved spacing and layout in job detail view header
• Maintained all existing functionality while cleaning up template structure

Test Plan

• Verify tab switching between Imported and Generated tabs works correctly
• Test job detail view displays properly with Job ID and execution time
• Confirm "Back to all assets" button returns to main view
• Check that all existing media asset features remain functional
• Verify UI consistency with other sidebar tabs

screen-capture.webm

[github-actions]

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 10/23/2025, 02:24:14 PM UTC

📈 Summary

• Total Tests: 498
• Passed: 464 ✅
• Failed: 0
• Flaky: 3 ⚠️
• Skipped: 31 ⏭️

📊 Test Reports by Browser

• ✅ chromium: View Report • ✅ 455 / ❌ 0 / ⚠️ 3 / ⏭️ 31
• ✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
• ✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
• ✅ mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

---

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

[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: Extract AssetsSidebarTab template and improve UI structure (#6164)
Impact: 729 additions, 62 deletions across 15 files

Issue Distribution

• Critical: 0
• High: 1
• Medium: 5
• Low: 2

Category Breakdown

• Architecture: 2 issues
• Security: 1 issue
• Performance: 0 issues
• Code Quality: 5 issues

Key Findings

Architecture & Design

The PR introduces custom tab components to replace PrimeVue's TabView, which diverges from the established component library ecosystem. While the implementation follows Vue 3 patterns correctly, it creates duplicate functionality that may be better addressed by extending PrimeVue components with custom styling. The AssetSidebarTemplate component shows good separation of concerns but could benefit from more flexible, composable design patterns.

Security Considerations

The code handles external URLs and user-provided metadata without sufficient validation. Direct assignment of output.url to preview_url poses potential XSS risks if malicious content is provided. Type assertions using 'as any[]' bypass TypeScript safety mechanisms for user-provided data.

Performance Impact

No significant performance concerns identified. The use of VirtualGrid for asset rendering and computed properties for reactive data are appropriate patterns. The component properly leverages Vue 3's reactivity system.

Integration Points

The PR maintains backward compatibility while introducing new folder view functionality. The integration with existing media asset systems appears solid, with proper error handling for toast notifications and clipboard operations.

Positive Observations

• Excellent test coverage for the new UUID utility functions with comprehensive edge cases
• Proper use of Vue 3 Composition API and TypeScript throughout
• Good separation of concerns with template extraction
• Appropriate use of semantic CSS tokens for theming
• Proper i18n integration for new UI strings

References

• Repository Architecture Guide
• Vue 3 Composition API Best Practices
• PrimeVue Component Library

Next Steps

1. Address critical issues before merge (currently none)
2. Consider architectural feedback for long-term maintainability
3. Add proper validation for external URL handling
4. Remove debug console.log statements
5. Consider extending PrimeVue components instead of reimplementing tab functionality

---

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

[viva-jinyi]

Thank you for the thorough review! I’ve addressed all feedback and implemented the requested changes.

Changes Made
1. Type Safety
• Removed all type assertions (as string, as number, as any[]) and replaced them with proper type guards and runtime checks.
• Introduced an OutputAssetMetadata interface to replace untyped Record<string, any>.
• Added a getAssetType() utility for consistent type handling across the codebase.
2. Code Quality
• Replaced the custom UUID regex with the standard uuid package (uuid.validate()).
• Added i18n for all user-facing strings (e.g., clipboard toast messages).
• Refactored tests to use test.for for parameterized UUID validation.
3. Accessibility
• Implemented the WAI-ARIA tab pattern with proper attributes (role="tablist", role="tab", aria-selected, aria-controls").
• Simplified keyboard navigation by using standard Tab navigation (removed complex arrow-key handling).
• Ensured all tabs have tabindex="0" for keyboard accessibility.
4. Fixes
• Restored missing folder-view functionality after rebase (now fetching all outputs instead of just preview).
• Added robust error handling for clipboard operations with a fallback mechanism.

Pending Item

The suggestion to use the provide/inject pattern for MediaAssetCard actions (from @DrJKL’s review) will be handled in a separate PR to keep this one focused on the current feedback.

All tests are passing, and the code is ready for review. Please let me know if anything needs clarification!