feat: Add new project from template feature and UI enhancements#52
feat: Add new project from template feature and UI enhancements#52webdevcody merged 13 commits intomainfrom
Conversation
Summary of ChangesHello @webdevcody, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the project creation experience by introducing a versatile new project modal that supports blank projects, starter templates, and direct GitHub repository cloning. The core architectural change involves migrating backend functionalities from Electron's IPC to a dedicated HTTP/WebSocket server, allowing the application to run fully in web browsers while maintaining Electron support. This shift streamlines the codebase, improves scalability, and lays the groundwork for future cloud-based deployments. Additionally, various UI/UX improvements and robust error handling mechanisms have been integrated to provide a more polished and reliable user experience. Highlights
Ignored Files
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This is an impressive pull request that introduces a major architectural refactoring to support a web-based version of the application by moving backend logic into a dedicated server. The new "create project from template" feature is a fantastic addition and is well-implemented with a clean UI. The simplification of the Electron main process and the move to an HTTP/WebSocket-based API is a great step forward for maintainability and scalability. I've identified a critical security vulnerability and a couple of areas for code improvement to enhance maintainability. Overall, excellent work on a complex and significant update.
- Introduced a new red theme with custom color variables for a bold aesthetic. - Updated the theme management to include the new red theme option. - Added a BoardBackgroundModal component for managing board background settings, including image uploads and opacity controls. - Enhanced KanbanCard and KanbanColumn components to support new background settings such as opacity and border visibility. - Updated API client to handle saving and deleting board backgrounds. - Refactored theme application logic to accommodate the new preview theme functionality.
- Added a new configuration flag `IS_MARKETING` to toggle marketing mode. - Updated the sidebar component to conditionally display the marketing URL when in marketing mode. - Refactored event type naming for consistency in the sidebar logic. - Cleaned up formatting in the HttpApiClient for improved readability.
- Introduced a new video demo section to showcase features with an embedded video player. - Styled the video container for responsive design and improved aesthetics. - Added media queries for better display on smaller screens.
- Refactored project handling in Sidebar and WelcomeView components to use a new `upsertAndSetCurrentProject` action for creating or updating projects. - Enhanced theme preservation logic during project creation and updates by integrating theme management directly into the store action. - Cleaned up redundant code related to project existence checks and state updates, improving maintainability and readability.
- Added a cache-busting query parameter to the background image URL to ensure the browser reloads the image when updated. - Updated the AppState to include an optional imageVersion property for managing image updates. - Modified the BoardBackgroundModal and BoardView components to utilize the new imageVersion for dynamic image loading.
- Introduced `addProject` and `setCurrentProject` actions to the WelcomeView component for enhanced project management capabilities. - Updated the component's state management to support these new actions, improving user experience in project handling.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This is an impressive pull request that introduces a comprehensive new project creation feature with starter templates, alongside numerous UI enhancements and technical improvements. The new project modal is well-designed, and the board background customization is a fantastic addition. The code is generally well-structured, with good refactoring efforts to centralize logic. I have a few suggestions to improve maintainability and efficiency, focusing on removing some code duplication, replacing an inefficient polling mechanism with a more robust event-driven approach, and fixing a minor UI icon inconsistency. Overall, this is a high-quality contribution that significantly enhances the application's functionality and user experience.
| const backgroundSettings = currentProject | ||
| ? boardBackgroundByProject[currentProject.path] || { | ||
| imagePath: null, | ||
| cardOpacity: 100, | ||
| columnOpacity: 100, | ||
| columnBorderEnabled: true, | ||
| cardGlassmorphism: true, | ||
| cardBorderEnabled: true, | ||
| cardBorderOpacity: 100, | ||
| hideScrollbar: false, | ||
| } | ||
| : { | ||
| imagePath: null, | ||
| cardOpacity: 100, | ||
| columnOpacity: 100, | ||
| columnBorderEnabled: true, | ||
| cardGlassmorphism: true, | ||
| cardBorderEnabled: true, | ||
| cardBorderOpacity: 100, | ||
| hideScrollbar: false, | ||
| }; |
There was a problem hiding this comment.
The default settings object for backgroundSettings is duplicated. To improve maintainability and avoid potential inconsistencies, it's better to define this default object as a constant and reuse it.
const defaultBackgroundSettings = {
imagePath: null,
cardOpacity: 100,
columnOpacity: 100,
columnBorderEnabled: true,
cardGlassmorphism: true,
cardBorderEnabled: true,
cardBorderOpacity: 100,
hideScrollbar: false,
};
export function BoardBackgroundModal({
open,
onOpenChange,
}: BoardBackgroundModalProps) {
// ... (other state)
const backgroundSettings = (currentProject && boardBackgroundByProject[currentProject.path]) || defaultBackgroundSettings;
| useEffect(() => { | ||
| const fetchRunningAgentsCount = async () => { | ||
| try { | ||
| const api = getElectronAPI(); | ||
| if (api.runningAgents) { | ||
| const result = await api.runningAgents.getAll(); | ||
| if (result.success && result.runningAgents) { | ||
| setRunningAgentsCount(result.runningAgents.length); | ||
| } | ||
| } | ||
| } catch (error) { | ||
| console.error("[Sidebar] Error fetching running agents count:", error); | ||
| } | ||
| }; | ||
|
|
||
| // Initial fetch | ||
| fetchRunningAgentsCount(); | ||
|
|
||
| // Set up interval to refresh every 2 seconds | ||
| const interval = setInterval(fetchRunningAgentsCount, 2000); | ||
|
|
||
| return () => clearInterval(interval); | ||
| }, []); |
There was a problem hiding this comment.
This useEffect hook polls for the running agents count every 2 seconds, which is inefficient. There is another useEffect hook below (lines 360-394) that subscribes to events for real-time updates, which is a much better approach. Relying on polling can lead to unnecessary network requests and delayed UI updates.
I recommend removing this polling-based useEffect and ensuring the event-driven approach is comprehensive. If the current events don't cover all state changes (e.g., manually stopping an agent), it would be better to add more specific events to the autoMode service rather than relying on polling as a fallback.
- Removed duplicate entry for node_modules from the .gitignore file to streamline ignored files and improve clarity.
- Added default background settings to streamline background management across components. - Implemented animated border styles for in-progress cards to improve visual feedback. - Refactored BoardBackgroundModal and BoardView components to utilize the new default settings, ensuring consistent background behavior. - Updated KanbanCard to support animated borders, enhancing the user experience during task progress. - Improved Sidebar component by optimizing the fetching of running agents count with a more efficient use of hooks.
- Changed the default release URL from 'https://releases.automaker.dev/releases.json' to 'https://releases.automaker.app/releases.json' in both index.html and releases.html files to ensure correct resource loading.
2 participants
#46
Summary
This PR introduces a comprehensive new project creation feature with starter templates, along with several UI enhancements and bug fixes.
Key Features
🚀 New Project from Template
🎨 UI/UX Improvements
🔧 Technical Improvements
🏗️ Infrastructure
Files Changed
apps/app/src/components/new-project-modal.tsx- New comprehensive project creation modalapps/app/src/lib/templates.ts- Template definitions and utilitiesapps/app/src/components/views/welcome-view.tsx- Enhanced welcome screenapps/server/src/routes/templates.ts- Server-side template APITesting
Breaking Changes
None - this is a feature addition with backward compatibility maintained.