shadcn.io is not affiliated with official shadcn/ui
Upvote System Reviews Block for Vue
Six reviews of a board game as cards with an Up and Down pill and a net score worked out from the votes, tabs for Top, New and Controversial, and a collapsible that folds reviews at a net of minus three or lower.
Installation
Overview
A net-score voting section for Vue with Ark UI, for Hamletfield, a fictional village-building board game. Each review is a card with overshooting lines: its stars and their value in words, a "Net +54" badge, a title, the text, the reviewer and an Up and Down pill. The pill is a group where one side is pressed or neither, and each side shows its own count; the net score is the up votes minus the down votes, worked out from the typed counts at the top of the file. Three tabs re-order the same cards: Top (the highest net score), New (the latest date) and Controversial (the most evenly split votes, so 39 up against 36 down comes before 58 against 4). Reviews at a net of minus three or lower are folded into a collapsible, "Hidden for low score", that stays open as you change tabs. It uses ToggleGroup, Tabs, Collapsible, Badge, Rating, Avatar and Guides. On a phone the avatar goes and the pill sits under the text.
FAQ
How does the Up and Down pill work, and is it saved?
It's a toggle group that can be empty: press Up and its count goes up by one and the net score with it; press Down instead and Up gives its vote back as Down takes one; press the pressed side again to take the vote back. A polite status line says what happened and what the net score is now. Nothing is sent and a reload starts afresh: to keep votes, post the review's id and the side from the handler and seed up and down from your data.
The group's value is an array with zero or one item.
Why doesn't a card move when I vote?
Every order and the fold read the counts the page loaded with, and the note above the cards says so. A card that jumped to the top, or vanished into the fold, the moment you voted would be hard to follow. Your vote changes the two counts and the net score on its own card; the next visit, with your vote saved on a server, would re-order.
What counts as controversial?
The review whose smaller side is largest, so a split of 39 up and 36 down (36) ranks above 33 and 29 (29), and a lopsided 58 and 4 (4) ranks near the end. Ties go to the review with more votes in all, then by id. Change splitOf for another rule, such as the ratio of the two sides.
Which reviews are folded, and can I still vote on them?
Those at a net of -3 or lower when the page loads, set by FOLD_AT. They sit under the cards in a collapsible whose trigger is a heading button saying how many are hidden; open it and they're the same cards with the same Up and Down pill. The open state is kept above the tabs, so it survives switching tabs.