Add label hovering effect and up-vote click state

nhphong commented 1 week ago

Overview

This Pull Request introduces several changes to improve the UI/UX of our application. It refactors existing components, adds new ones, and updates styling to ensure a cohesive look and feel throughout the application.

Summary of Changes

Refactored App.scss to use Google Fonts for better performance and consistency.
Simplified routing by removing unnecessary wrappers in App.tsx.
Added new SVG assets for interactive UI components.
Introduced a MultiSelectDropdown component for better filter management.
Updated LiveblocksComments to enhance error handling and UI display.
Implemented a SnippetCard component to streamline snippet display and interactions.
Enhanced useSnippets hook for optimized data fetching and state management.
Updated Tailwind CSS configuration with new color palette.

Detailed Code Changes

App.scss: Removed unused font-face definitions and integrated Google Fonts via URL import.
App.tsx: Refactored routing logic by removing PrivateRoute wrapper from the /search path.
SVG Assets: Added new SVG files for star, upvote, and hover states to src/assets.
MultiSelectDropdown.tsx: Created a new component to handle multiple selections for filtering options.
LiveblocksComments.tsx: Improved error handling and simplified logic for rendering comment threads.
SearchInterface.tsx: Major refactor to incorporate new filter components, simplifying state management and UI structure.
useSnippets.tsx: Modified fetch logic and improved loading state handling.
AuthenticatedLayout.tsx: Adjusted layout styling to enhance visual hierarchy.
tailwind.config.js: Added new color variables for consistent use across the application.
tsconfig.json: Changed baseUrl to src for cleaner module imports.

Acceptance Criteria

[ ] Google Fonts are loaded correctly and applied throughout the application.
[ ] Filter options in the SearchInterface work with new MultiSelectDropdown.
[ ] Snippet cards display correct information and interact correctly with star and upvote actions.
[ ] Comments load without errors and display correctly within the LiveblocksComments component.
[ ] The application should compile and run without TypeScript errors.

Proof of Work

Attach screenshots, GIFs, or videos demonstrating the changes and new features.

Additional Notes

Please ensure to update any relevant documentation to reflect these changes.
Test thoroughly across different devices and browsers for UI consistency.

AiDD Conversation

Link to AiDD Conversation

coderabbitai[bot] commented 1 week ago

Walkthrough

The changes involve updates across multiple files, including the introduction of new components, modifications to existing components, and adjustments to styles and configurations. Key updates include the addition of MultiSelectDropdown, RoundedToggleButton, and SnippetCard components, as well as enhancements to the SearchInterface. Styling changes in App.scss and AuthenticatedLayout.tsx improve visual presentation. Additionally, the Tailwind CSS configuration is expanded with new color definitions, and the TypeScript configuration is updated to change the module resolution base directory.

Changes

File	Change Summary
`src/App.scss`	Removed commented-out CSS for button styles and font-face declarations; added import for "Inter" font from Google Fonts; updated `#root` font-family and size.
`src/App.tsx`	Modified routing logic for `/search` to remove `PrivateRoute`, allowing direct access; `SnippetDetail` route remains wrapped in `PrivateRoute`.
`src/components/LiveblocksComments.tsx`	Simplified conditional checks for `threads` array; removed unnecessary checks and streamlined comment count calculation.
`src/components/MultiSelectDropdown.tsx`	Introduced new component for multi-selection dropdown; includes props for selected items and item toggling; utilizes UI library components.
`src/components/RoundedToggleButton.tsx`	Introduced new component for a toggle button with dynamic styling based on active state; accepts label, active status, and an optional icon.
`src/components/SearchInterface.tsx`	Expanded state management and added multi-selection logic; replaced dropdowns with `MultiSelectDropdown` components; adjusted layout and integrated `SnippetCard`.
`src/components/SingleSelectDropdown.tsx`	Introduced new component for single-select dropdown; includes props for selected item and item selection handling.
`src/components/SnippetCard.tsx`	Introduced new component to display snippet details with interactive features; manages upvote and star states; integrates comments display.
`src/hooks/useSnippets.tsx`	Modified `fetchSnippets` call within `useEffect` to avoid awaiting the promise; updated snippet setting logic and added console logging for fetched data.
`src/layouts/AuthenticatedLayout.tsx`	Added new class for styling in the layout; maintained existing authentication logic.
`tailwind.config.js`	Added new color definitions to the Tailwind CSS theme for enhanced styling options.
`tsconfig.json`	Updated `baseUrl` in `compilerOptions` from `"."` to `"src"` for module resolution.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant App
    participant SearchInterface
    participant SnippetCard

    User->>App: Navigate to /search
    App->>SearchInterface: Render SearchInterface
    SearchInterface->>User: Display filters and options
    User->>SearchInterface: Select filters
    SearchInterface->>SnippetCard: Display filtered snippets
    SnippetCard->>User: Show snippet details

🐰 "In the code, new wonders bloom,
MultiSelect and Toggle bring joy to the room.
With colors bright and styles anew,
Our app shines bright, all thanks to you!
Let snippets dance and comments flow,
Hopping along, we watch the magic grow!" 🐇✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

nhphong commented 1 week ago

--- $${\color{green}[AI \space Generated \space Comment]}$$ --- This pull request introduces significant improvements to the UI/UX of the application, including new components, refactored existing ones, and updated styling. The changes enhance the search interface, introduce new interactive elements, and improve the overall user experience. However, there are some areas that could be further improved or require attention.

Dat-H-Tran commented 1 week ago

I will take these feedbacks into account when working on the files in future features and apply them accordingly.

PublicDataWorks / verdad-frontend