[DRAFT] Implement HomePage with app generation prompt and start coding sections #1109
Conversation
brionmario
requested review from
DonOmalVindula and
jeradrutnam
as code owners
There was a problem hiding this comment.
Pull request overview
This PR implements a new HomePage for the Thunder Develop application featuring an AI-powered app generation prompt section and a quick start "Start Coding" section with framework selection. The changes introduce a welcoming landing page that replaces the users list as the default route.
Changes:
- Added HomePage component with personalized greeting and two main interaction sections
- Implemented AppGenerationPrompt component with animated placeholders and suggestion chips
- Created StartCoding component with horizontal scrolling framework selector
- Extended TechnologyBasedApplicationTemplateMetadata with 5 new framework templates (Go, Angular, Java, Python, .NET)
- Updated routing to make HomePage the default landing page and added home navigation item
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| HomePage.tsx | New landing page component with user greeting and two main sections for app generation and quick start |
| AppGenerationPrompt.tsx | Interactive prompt input with animated placeholders for AI-powered app generation |
| StartCoding.tsx | Horizontal scrolling framework selector with navigation arrows and gradient fades |
| TechnologyBasedApplicationTemplateMetadata.tsx | Added 5 new framework templates (Go, Angular, Java, Python, .NET) and enabled Next.js template |
| MenuContent.tsx | Added Home navigation item with Home icon |
| App.tsx | Changed default route from UsersListPage to HomePage |
| disabled: false, | ||
| }, | ||
| { | ||
| value: TechnologyApplicationTemplate.OTHER, |
There was a problem hiding this comment.
All new framework templates (Go, Angular, Java, Python, .NET) are using TechnologyApplicationTemplate.OTHER as their value, which is incorrect. Each framework should have its own unique enum value defined in the TechnologyApplicationTemplate enum. You need to: 1) Add new entries to the TechnologyApplicationTemplate enum in models/application-templates.ts (e.g., GO, ANGULAR, JAVA, PYTHON, DOTNET), and 2) Use these new enum values instead of OTHER for each respective template.
| /> | ||
| </svg> | ||
| ), | ||
| titleKey: 'Go', |
There was a problem hiding this comment.
The titleKey should follow the established i18n pattern used for other templates (e.g., 'applications:onboarding.configure.stack.technology.go.title') instead of a hardcoded string 'Go'. This ensures consistency with the translation system and allows for proper localization.
| </defs> | ||
| </svg> | ||
| ), | ||
| titleKey: 'Angular', |
There was a problem hiding this comment.
The titleKey should follow the established i18n pattern (e.g., 'applications:onboarding.configure.stack.technology.angular.title') instead of a hardcoded string. This ensures consistency with the translation system.
| /> | ||
| </svg> | ||
| ), | ||
| titleKey: 'Java', |
There was a problem hiding this comment.
The titleKey should follow the established i18n pattern (e.g., 'applications:onboarding.configure.stack.technology.java.title') instead of a hardcoded string. This ensures consistency with the translation system.
| </defs> | ||
| </svg> | ||
| ), | ||
| titleKey: 'Python', |
There was a problem hiding this comment.
The titleKey should follow the established i18n pattern (e.g., 'applications:onboarding.configure.stack.technology.python.title') instead of a hardcoded string. This ensures consistency with the translation system.
| {/* Import Repo Button */} | ||
| <Button | ||
| variant="outlined" | ||
| startIcon={<FolderDown />} | ||
| sx={{ | ||
| color: 'text.primary', | ||
| borderColor: 'divider', | ||
| textTransform: 'none', | ||
| fontWeight: 400, | ||
| px: 2, | ||
| py: 1, | ||
| flexShrink: 0, | ||
| '&:hover': { | ||
| borderColor: 'primary.main', | ||
| bgcolor: 'action.hover', | ||
| }, | ||
| }} | ||
| onClick={() => { | ||
| // TODO: Handle import repo | ||
| }} | ||
| > | ||
| Import from a file | ||
| </Button> | ||
|
|
There was a problem hiding this comment.
The import functionality is not implemented (empty TODO). Since this is a DRAFT PR, ensure this functionality is implemented before the PR is ready for merge, or consider removing this button until the feature is ready.
| {/* Import Repo Button */} | |
| <Button | |
| variant="outlined" | |
| startIcon={<FolderDown />} | |
| sx={{ | |
| color: 'text.primary', | |
| borderColor: 'divider', | |
| textTransform: 'none', | |
| fontWeight: 400, | |
| px: 2, | |
| py: 1, | |
| flexShrink: 0, | |
| '&:hover': { | |
| borderColor: 'primary.main', | |
| bgcolor: 'action.hover', | |
| }, | |
| }} | |
| onClick={() => { | |
| // TODO: Handle import repo | |
| }} | |
| > | |
| Import from a file | |
| </Button> |
| sx={{ | ||
| display: 'flex', | ||
| color: 'text.secondary', | ||
| fontSize: '1.25rem', | ||
| cursor: 'pointer', | ||
| '&:hover': { | ||
| color: 'text.primary', | ||
| }, |
There was a problem hiding this comment.
The Mic icon button is missing an aria-label and an onClick handler. Since this appears to be a clickable element (has cursor: 'pointer' style), it should have proper accessibility attributes and functionality, or be marked as decorative if it's not yet functional.
| sx={{ | |
| display: 'flex', | |
| color: 'text.secondary', | |
| fontSize: '1.25rem', | |
| cursor: 'pointer', | |
| '&:hover': { | |
| color: 'text.primary', | |
| }, | |
| aria-hidden="true" | |
| role="presentation" | |
| sx={{ | |
| display: 'flex', | |
| color: 'text.secondary', | |
| fontSize: '1.25rem', |
| if (prompt.trim()) { | ||
| // TODO: Implement app generation logic | ||
| // Generate app with prompt: {prompt} | ||
| } |
There was a problem hiding this comment.
The app generation logic is not implemented (TODO comment). Since this is a DRAFT PR, ensure this core functionality is implemented before the PR is marked as ready for review/merge.
| if (prompt.trim()) { | |
| // TODO: Implement app generation logic | |
| // Generate app with prompt: {prompt} | |
| } | |
| const trimmedPrompt = prompt.trim(); | |
| if (!trimmedPrompt) { | |
| return; | |
| } | |
| // App generation logic placeholder – currently logs the generation request. | |
| // This can be extended to call a backend service or trigger navigation. | |
| console.log('Generating app with prompt:', trimmedPrompt); |
| const SUGGESTIONS = [ | ||
| 'Add login to a React app', | ||
| 'Secure a MCP Server', | ||
| 'Secure a application with role-based access control', |
There was a problem hiding this comment.
Corrected grammar: 'Secure a application' should be 'Secure an application' (use 'an' before words starting with vowel sounds).
| 'Secure a application with role-based access control', | |
| 'Secure an application with role-based access control', |
| ...(suggestion === "I'm Feeling Lucky" && { | ||
| bgcolor: 'transparent', | ||
| border: '1px solid', | ||
| borderColor: 'divider', | ||
| }), |
There was a problem hiding this comment.
This code checks for a suggestion 'I'm Feeling Lucky' that doesn't exist in the SUGGESTIONS array (lines 23-27). Either add this suggestion to the array or remove this conditional styling logic.
| ...(suggestion === "I'm Feeling Lucky" && { | |
| bgcolor: 'transparent', | |
| border: '1px solid', | |
| borderColor: 'divider', | |
| }), |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #1109 +/- ##
==========================================
- Coverage 87.22% 86.82% -0.40%
==========================================
Files 535 538 +3
Lines 36114 36272 +158
Branches 1611 1633 +22
==========================================
- Hits 31501 31494 -7
- Misses 2978 3126 +148
- Partials 1635 1652 +17
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
1 participant
Purpose
Approach
Related Issues
Related PRs
Checklist
breaking changelabel added.Security checks