feat: small projects UX tweaks #5513
Merged
+557
−519
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Overview
Summary
This PR implements small UX improvements for the projects feature, primarily optimizing data loading and enhancing visual styling. The main changes include:
- Improved data flow: Projects are now fetched during SSR in
fetchChatData.tsand passed through the component hierarchy, eliminating unnecessary client-side fetches and loading states - Better component architecture: Moved
ProjectsProviderfrom page level to a more appropriate location inWrappedChat.tsxand added support for pre-loaded projects data - Enhanced styling: Added
cnutility usage for better className management, improved hover effects and transitions in input components - Sidebar reorganization: Moved Projects section below Assistants in the sidebar for better information hierarchy
- Backend refactoring: Updated Celery worker naming from
user_files_indexingtouser_file_processingfor consistency
The changes focus on user experience improvements without introducing breaking changes to the core functionality.
Confidence Score: 4/5
- This PR is safe to merge with minimal risk
- The changes are primarily UI/UX improvements and data flow optimizations without complex logic changes. Only minor issue is a console.log statement that should be removed.
- Pay attention to web/src/lib/chat/fetchChatData.ts to remove the console.log statement
Important Files Changed
File Analysis
| Filename | Score | Overview |
|---|---|---|
| web/src/app/chat/projects/ProjectsContext.tsx | 4/5 | Added initial projects prop to prevent unnecessary fetch on load, optimized initialization |
| web/src/lib/chat/fetchChatData.ts | 4/5 | Added projects fetch to SSR data loading, improved error handling with console logging |
| web/src/app/chat/WrappedChat.tsx | 5/5 | Added ProjectsProvider with initial projects data, improved component architecture |
| web/src/components/sidebar/HistorySidebar.tsx | 5/5 | Reorganized sidebar layout, moved Projects below Assistants section |
| backend/scripts/dev_run_background_jobs.py | 5/5 | Renamed worker from user_files_indexing to user_file_processing, updated queue names |
Sequence Diagram
sequenceDiagram
participant Page as Chat Page
participant Layout as Chat Layout
participant FetchData as fetchChatData
participant API as Backend API
participant Context as ChatContext
participant Provider as ProjectsProvider
participant Projects as Projects Component
Page->>Layout: Request chat layout
Layout->>FetchData: fetchChatData()
FetchData->>API: GET /user/projects/
API-->>FetchData: projects[]
FetchData-->>Layout: {projects, ...otherData}
Layout->>Context: Pass projects via ChatContext
Context->>Page: Render with projects data
Page->>Provider: ProjectsProvider(initialProjects=projects)
Note over Provider: No longer fetches projects on mount
Provider->>Provider: setState(initialProjects)
Provider->>Projects: Render with pre-loaded data
Note over Projects: Improved UX - no loading state needed
16 files reviewed, 1 comment
Comment on lines
+111
to
+112
| } else { | ||
| console.log("Failed to fetch projects"); |
There was a problem hiding this comment.
style: console.log statement should be removed before production merge
Context Used: Rule - Remove temporary debugging code before merging to production, especially tenant-specific debugging logs. (link)
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/lib/chat/fetchChatData.ts
Line: 111:112
Comment:
style: console.log statement should be removed before production merge
**Context Used:** **Rule -** Remove temporary debugging code before merging to production, especially tenant-specific debugging logs. ([link](https://app.greptile.com/review/custom-context?memory=b39fa59b-2568-4dd3-9576-83b46251a7b8))
How can I resolve this? If you propose a fix, please make it concise.![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 17 files
Prompt for AI agents (all 1 issues)
Understand the root cause of the following 1 issues and fix them.
<file name="web/src/app/chat/projects/ProjectsContext.tsx">
<violation number="1" location="web/src/app/chat/projects/ProjectsContext.tsx:268">
Removing the initial fetchProjects call leaves projects stuck at the initialProjects prop. Existing pages still mount <ProjectsProvider> without initialProjects, so the projects list never loads for them.</violation>
</file>
React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.
| setIsLoading(true); | ||
| Promise.all([fetchProjects(), getRecentFiles()]) | ||
| .then(([, recent]) => { | ||
| getRecentFiles() |
There was a problem hiding this comment.
Removing the initial fetchProjects call leaves projects stuck at the initialProjects prop. Existing pages still mount without initialProjects, so the projects list never loads for them.
Prompt for AI agents
Address the following comment on web/src/app/chat/projects/ProjectsContext.tsx at line 268:
<comment>Removing the initial fetchProjects call leaves projects stuck at the initialProjects prop. Existing pages still mount <ProjectsProvider> without initialProjects, so the projects list never loads for them.</comment>
<file context>
@@ -261,17 +263,17 @@ export const ProjectsProvider: React.FC<ProjectsProviderProps> = ({
setIsLoading(true);
- Promise.all([fetchProjects(), getRecentFiles()])
- .then(([, recent]) => {
+ getRecentFiles()
+ .then((recent) => {
setRecentFiles(recent);
</file context>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
[Provide a brief description of the changes in this PR]
How Has This Been Tested?
[Describe the tests you ran to verify your changes]
Additional Options
Summary by cubic
Server-side render the user’s projects and pass them through ChatContext to speed up first load and keep projects consistent across pages. Also polish the chat sidebar and input/file controls for cleaner spacing and hover behavior.
Refactors
UX Tweaks