Feat build comment flow

[davedumto]

Overview

This PR implements a comprehensive comment modal system with full threading capabilities, designed to enhance user engagement and discussion within the application. The modal features a campaign journey stepper, comment posting, reply threading, and a responsive design that adapts to different screen sizes.

Key Features Implemented

1. Comment Modal System

• Modal Trigger: Integrated with "Add Comment" button on landing page
• Responsive Design: 90% viewport width on desktop, 95% on mobile
• Campaign Journey Stepper: Visual step indicator showing project progression
• Dynamic Close Button: Positioned outside modal on desktop, inside on mobile

2. Comment Management

• Post Comments: Users can write and submit new comments
• Like System: Heart icon with color change on click, like count display
• Delete Comments: Trash icon (top-right) with hover reveal
• Comment Display: Avatar, author name, timestamp, and interaction counts

3. Reply Threading System

• Reply Mode: Click chat icon to enter reply view for specific comments
• Threaded Replies: Nested reply structure under parent comments
• Reply Input: Dedicated input field below parent comment
• Back Navigation: Return to main comments view

4. Enhanced User Experience

• Toast Notifications: Success messages with undo functionality
• Hover Effects: Interactive comment cards with smooth transitions
• Auto-resizing Textareas: Dynamic height adjustment as users type
• Empty States: Illustrated "no comments" state with SVG graphics

UI/UX Improvements

Responsive Layout

• Desktop: Side-by-side layout with stepper on left, comments on right
• Mobile/Tablet: Vertical layout with horizontal stepper on top
• Step Descriptions: Hidden on mobile for cleaner mobile experience
• Connecting Lines: Horizontal on mobile, vertical on desktop

Visual Design

• Dark Theme: Consistent with application design system
• Borderless Inputs: Clean, modern textarea design without borders
• Custom Scrollbars: Styled scrollbars for better visual integration
• Smooth Animations: Hover states and transitions throughout

Technical Implementation

State Management

• Comments Array: Stores all comments with replies nested structure
• Reply Mode State: Tracks active reply session and target comment
• Form State: Manages input text and validation

Component Architecture

• CommentModal: Main modal component with conditional rendering
• Stepper Integration: Reused existing stepper component with responsive overrides
• Toast System: Integrated with existing sonner toast library

Performance Optimizations

• Conditional Rendering: Only renders active UI sections
• Efficient Updates: Optimistic UI updates with undo functionality
• Scroll Management: Fixed height constraints for smooth scrolling

🎯 Acceptance Criteria

• Modal opens with "Add Comment" button click
• Users can post comments and see them displayed
• Reply system allows threading under comments
• Responsive design works on all screen sizes
• Scrolling functions properly with overflow content
• All interactive elements (like, delete, reply) work correctly
• Toast notifications provide user feedback

[vercel]

@davedumto is attempting to deploy a commit to the christroa's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
boundless-t4ms	Ready	Preview	Comment	Aug 17, 2025 6:05pm

[0xdevcollins]

@davedumto Thanks for the PR! Overall, it looks great. Just a couple of things,
Please resolve the merge conflict and make sure to use the global component at components/sheet/boundless-sheet.tsx instead of the modal you used.

[0xdevcollins]

Perfect @davedumto 💯