feat: enhance CommunityTicketCard with upvote and comment functionality#91
Merged
feat: enhance CommunityTicketCard with upvote and comment functionality#91
Conversation
Contributor
Reviewer's GuideRefactors the CommunityTicketCard UI to a richer, accessible card with avatar, attachment preview, and new upvote/comment interaction handlers, and wires those handlers into the community board page with local per-ticket upvote state tracking. Sequence diagram for ticket upvote toggle on CommunityBoardsequenceDiagram
actor User
participant CommunityBoardPage
participant CommunityTicketCard
participant UpvoteState as upvoteByTicketId
User->>CommunityTicketCard: Click upvote button
CommunityTicketCard->>CommunityTicketCard: stopPropagation()
CommunityTicketCard->>CommunityBoardPage: onUpvoteToggle(ticket)
CommunityBoardPage->>UpvoteState: Read current = upvoteByTicketId[ticket.id] || {count:0, upvoted:false}
CommunityBoardPage->>UpvoteState: Write updated entry
Note over UpvoteState: Toggle upvoted, increment or decrement count
UpvoteState-->>CommunityBoardPage: Updated state object
CommunityBoardPage-->>CommunityTicketCard: Re-render with
Note over CommunityBoardPage,CommunityTicketCard: upvoteCount and isUpvoted props updated
CommunityTicketCard->>User: Updated icon and count displayed
Sequence diagram for opening ticket comments from CommunityTicketCardsequenceDiagram
actor User
participant CommunityBoardPage
participant CommunityTicketCard
User->>CommunityTicketCard: Click comment button
CommunityTicketCard->>CommunityTicketCard: stopPropagation()
CommunityTicketCard->>CommunityBoardPage: onCommentClick(ticket)
CommunityBoardPage->>CommunityBoardPage: selectedTicket = ticket
CommunityBoardPage-->>User: Comments panel or details for selectedTicket shown
Flow diagram for CommunityBoard and CommunityTicketCard wiringgraph TD
A[CommunityBoardPage +page.svelte] -->|passes ticket,isActive,onClick,onCommentClick,onUpvoteToggle,upvoteCount,isUpvoted| B[CommunityTicketCard.svelte]
subgraph PageState
S1[selectedTicket]
S2[upvoteByTicketId Record]
end
A --> S1
A --> S2
B -->|onClick callback| A
B -->|onCommentClick callback| A
B -->|onUpvoteToggle callback| A
A -->|updates| S1
A -->|updates| S2
S2 -->|derived props per ticket id| A
A -->|re-renders with updated props| B
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Contributor
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... 📒 Files selected for processing (2)
✏️ Tip: You can disable in-progress messages and the fortune message in your review settings. Tip You can get early access to new features in CodeRabbit.Enable the ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The
clickTimeris typed asNodeJS.Timeout, which can cause type mismatches in the browser; consider usinglet clickTimer: ReturnType<typeof setTimeout> | null = nullinstead for better compatibility in the Svelte client runtime. - The image modal currently only closes on mouse clicks; you may want to add keyboard handling (e.g. Escape key listener) to close it for better accessibility and keyboard navigation support.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `clickTimer` is typed as `NodeJS.Timeout`, which can cause type mismatches in the browser; consider using `let clickTimer: ReturnType<typeof setTimeout> | null = null` instead for better compatibility in the Svelte client runtime.
- The image modal currently only closes on mouse clicks; you may want to add keyboard handling (e.g. Escape key listener) to close it for better accessibility and keyboard navigation support.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
hueuhe
Summary by Sourcery
Enhance the community ticket card to support richer ticket display and interactive engagement controls.
New Features:
Enhancements:
Summary by CodeRabbit