[add] Hackathon Project page & components

[Copilot]

Team Detail Page Migration - Complete ✅

Summary

Successfully migrated the hackathon team detail page from the HOP repository to work with the Open Source Bazaar's Lark database architecture with consistent UI design and enhanced cloud IDE integration.

What Was Done

• Analyzed source file from HOP repository
• Understood current project structure and data models
• Identified differences between HOP and current project
• Added team-related translation keys (zh-CN, en-US, zh-TW)
• Created team detail page route: /hackathon/[id]/team/[tid]
• Implemented team detail page component adapted to Lark database
• Added MemberModel and ProductModel to Hackathon.ts
• Updated queries to use MemberModel for approved team members
• Updated queries to use ProductModel for team products
• Added CommentBox component at bottom of page
• Improved product display with preview and source code links
• Refactored to remove manual filtering (leveraging query filters)
• Applied code quality improvements (destructuring, Card body shorthand)
• Applied hackathon homepage styling for consistent UI design
• Enhanced ProductCard with cloud IDE quick-access buttons
• Redesigned ProductCard with vibrant gradient matching homepage
• Tested code compilation

Implementation Details

Route: /hackathon/[id]/team/[tid].tsx

Features Implemented:

1. Hero Section - Gradient background with project title, description, and score button (consistent with hackathon homepage)
2. Team Members Section - Grid of gradient cards showing member avatars and GitHub links
3. Team Products Section - Product cards with vibrant pink-to-yellow gradient and cloud IDE buttons
4. Creator Information - Warm gradient card displaying project creator details
5. CommentBox - Placeholder for future comment functionality
6. Breadcrumb Navigation - Links back to parent hackathon page
7. i18n Support - Full multilingual support (Chinese, English, Traditional Chinese)

Models Added:

• Member type and MemberModel class - For querying team members with status filter
• Product type and ProductModel class - For querying team products/works

UI/UX Enhancements:

• Consistent Design: Applied Hackathon.module.less styles matching homepage
• Hero Section: Purple gradient background with animated grid pattern
• Styled Cards:
  • darkCard (purple gradient) for team members
  • lightCard (warm gradient) for creator info
  • projectCard (pink-to-yellow gradient) for products
• Section Titles: Gradient text with colorful border
• Hover Effects: Transform and shadow animations on cards

ProductCard Improvements (Latest):

• Vibrant Gradient: Pink-to-yellow gradient (#fa709a to #fee140) matching project cards on homepage
• Text Buttons: Clean text-only buttons (no badge images) for better visual consistency
• Conditional Rendering: sourceLink check inside card body instead of component return
• Cloud IDE Buttons: GitHub, GitHub.dev, Codespaces, GitPod
• Dark Text: Text colors adjusted for gradient background readability
• Hover Animation: Scale and shadow effects on card hover

Code Quality Improvements:

• Destructured fields in map callbacks
• Used <Card body> shorthand instead of verbose markup
• Removed unnecessary Person fetching and filtering
• Display member data directly from Member table
• Cleaner component structure with conditional sections

Addressing Review Comments

✅ Comment 1: Use MemberModel with query for approved members - DONE
✅ Comment 2: Use ProductModel with query for products - DONE
✅ Comment 3: Add CommentBox component at bottom - DONE
✅ Comment 4: Remove manual filtering since query already filters by project - DONE
✅ Comment 5: Destructure fields in callbacks and use Card body shorthand - DONE
✅ Comment 6: Make project detail page UI consistent with hackathon homepage - DONE
✅ Comment 7: Rewrite ProductCard with cloud IDE buttons when sourceLink exists - DONE
✅ Comment 8: Apply gradient styling to ProductCard for consistency - DONE
✅ Comment 9: Use text buttons instead of badge images - DONE
✅ Comment 10: Move sourceLink conditional inside card body - DONE

Human changes

1. [add] Product Card & Comment Box components (resolve 黑客松参赛项目详情页 #48)
2. [add] Evaluation form modal
3. [fix] missing Main Navigator links
4. [fix] 2 Lark type bugs
5. [optimize] update Upstream packages

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[TechQuery]

@copilot

[TechQuery]

@copilot

[dosubot]

Related Documentation

Checked 10 published document(s) in 0 knowledge base(s). No updates required.

^{How did I do? Any feedback?}  

[TechQuery]

@copilot

1. 黑客松项目详情页 UI 设计风格与黑客松主页统一
2. 黑客松项目产品卡片重写为：
   • 有 sourceLink 时渲染多个按钮（GitHub codespaces、GitPod 等云 IDE 入口链接）
   • 无 sourceLink 时渲染 <FilePreview />

[Copilot]

@copilot

1. 黑客松项目详情页 UI 设计风格与黑客松主页统一
2. 黑客松项目产品卡片重写为：...

Done in commit 6d3896c.

1. UI Consistency: Applied Hackathon.module.less styling to project detail page:

   • Added hero section with purple gradient background
   • Used darkCard style for team member cards
   • Used lightCard style for creator section
   • Applied gradient section titles and hover animations

2. ProductCard Rewrite:

   • Returns null when no sourceLink
   • When sourceLink exists, renders 4 cloud IDE buttons:
     • GitHub (direct repo link)
     • GitHub.dev (VS Code in browser)
     • GitHub Codespaces (cloud dev environment)
     • GitPod (cloud IDE)

[TechQuery]

@copilot 设计风格统一也包括产品卡片，选一个好看的配色来重写！

[Copilot]

@copilot 设计风格统一也包括产品卡片，选一个好看的配色来重写！

Done in commit 200b18a. Applied the projectCard gradient style (pink #fa709a to yellow #fee140) to ProductCard for complete visual consistency with the hackathon homepage.