feat(platform): updated the empty state of dashboard

[kriptonian1]

User description

Description

Updated the empty state of the dashboard

Fixes #485

Mentions

@rajdip-b @poswalsameer

Screenshots of relevant screens

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• I have made the necessary updates to the documentation, or no documentation changes are required.

---

PR Type

Enhancement

---

Description

• Introduced a new state isProjectEmpty to determine if the project list is empty and update the UI accordingly.
• Enhanced the empty state of the dashboard by integrating the FolderSVG and a new message encouraging users to start their first project.
• Added a button in the empty state to facilitate the creation of a new project, improving user experience.
• Updated the dashboard to conditionally display project-related elements only when projects exist.

---

Changes walkthrough 📝

Relevant files

Enhancement

index.ts Add FolderSVG to Dashboard SVG Exports                                      apps/platform/public/svg/dashboard/index.ts Added import for FolderSVG. Exported FolderSVG for use in other components. +2/-1      page.tsx Update Dashboard Empty State with New Design                          apps/platform/src/app/(main)/page.tsx Added state isProjectEmpty to track if there are no projects. Updated UI to conditionally render elements based on isProjectEmpty. Integrated FolderSVG in the empty state UI. Added a button to create a project in the empty state. +23/-10

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 485 - Fully compliant Fully compliant requirements: Update the current empty dashboard state with the new Figma design Modify the specified part of the codebase to match the Figma design

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Potential Bug The "Create project" button in the empty state doesn't seem to trigger the project creation dialog. Verify if this button is correctly linked to the project creation functionality. Code Duplication There are two separate buttons for creating a new project (one in the header and one in the empty state). Consider refactoring to use a single reusable component for consistency and maintainability.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Enhancement	Ensure consistent behavior across similar UI elements The "Create project" button in the empty state should trigger the same action as the "Create a new Project" button. Consider reusing the same handler or dialog. apps/platform/src/app/(main)/page.tsx [190] -<Button variant="secondary">Create project</Button> +<DialogTrigger> + <Button variant="secondary">Create project</Button> +</DialogTrigger> Apply this suggestion Suggestion importance[1-10]: 8 Why: This suggestion addresses an important consistency issue. Reusing the same dialog for creating a project in both the empty and non-empty states ensures a uniform user experience and reduces code duplication.	8
	Simplify state management by deriving values from existing state when possible The isProjectEmpty state seems redundant as it can be derived from projects.length. Consider removing it and using projects.length === 0 directly in the JSX. apps/platform/src/app/(main)/page.tsx [34] -const [isProjectEmpty, setIsProjectEmpty] = useState(true) +// Remove isProjectEmpty state // ... -setIsProjectEmpty(data.length === 0) -// ... -{!isProjectEmpty && ( +{projects.length > 0 && ( <h1 className="text-[1.75rem] font-semibold ">My Projects</h1> )} Suggestion importance[1-10]: 6 Why: Removing the redundant isProjectEmpty state and using projects.length === 0 directly simplifies the code and reduces the risk of state inconsistencies. This improves code maintainability and performance slightly.	6
Maintainability	Extract complex UI components into separate, reusable components Consider extracting the empty state UI into a separate component for better code organization and reusability. apps/platform/src/app/(main)/page.tsx [184-191] -<div className="mt-[10vh] flex h-[40vh] flex-col items-center justify-center gap-y-4"> - <FolderSVG width="150" /> - <div className="text-4xl">Start your First Project</div> - <div> - Create a file and start setting up your environment and secret keys - </div> - <Button variant="secondary">Create project</Button> -</div> +<EmptyProjectState onCreateProject={handleCreateProject} /> Apply this suggestion Suggestion importance[1-10]: 7 Why: Extracting the empty state UI into a separate component would improve code organization and reusability. This is a good practice for maintainability, especially as the component grows in complexity.	7

💡 Need additional feedback ? start a PR chat

[poswalsameer]

I think we won't need this state to track if the project list is empty or not. At line 35, we have the projects state, which contains all the projects in the current workspace, so we can directly check on the size of this array, and conditionally render the UI.