Added voting. Improved comments.

components/posts/post.vue

@@ -1,5 +1,26 @@
 <template>
 	<div class="post">
+		<div class="votes noselect">
+			<div
+				class="vote bump"
+				:class="{ active: hasBump }"
+				title="Bump"
+				@click="vote(1)"
+			>+</div>
+
+			<div
+				class="tally"
+				:title="`${post.votes.total} ${post.votes.total === 1 ? 'vote' : 'votes'}`"
+			>{{ tally }}</div>
+
+			<div
+				class="vote sink"
+				:class="{ active: hasSink }"
+				title="Sink"
+				@click="vote(-1)"
+			>-</div>
+		</div>
+
 		<a
 			:href="post.link || `/s/${post.shelf.slug}/post/${post.id}`"
 			target="_blank"
@@ -47,32 +68,61 @@
 
 			<div class="actions">
 				<a
-					:href="`/s/shack/post/${post.id}`"
+					:href="`/s/${post.shelf.slug}/post/${post.id}`"
 					class="link comments"
 				>{{ post.commentCount }} comments</a>
 			</div>
 		</div>
 
 		<a
-			:href="`/s/shack/post/${post.id}`"
+			:href="`/s/${post.shelf.slug}/post/${post.id}`"
 			class="fill"
 		/>
 	</div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import { format, formatDistance } from 'date-fns';
+
 import blockedIcon from '../../assets/icons/blocked.svg?url'; // eslint-disable-line import/no-unresolved
 import { usePageContext } from '../../renderer/usePageContext';
+import * as api from '../../assets/js/api';
 
-const { now } = usePageContext();
+const { me, now } = usePageContext();
 
-defineProps({
+const props = defineProps({
 	post: {
 		type: Object,
 		default: null,
 	},
+	shelf: {
+		type: Object,
+		default: null,
+	},
 });
+
+const tally = ref(props.post.votes.tally);
+const hasBump = ref(props.post.votes.bump);
+const hasSink = ref(props.post.votes.sink);
+const voting = ref(false);
+
+async function vote(value) {
+	if (!me || voting.value) {
+		return;
+	}
+
+	voting.value = true;
+
+	const undo = (value > 0 && hasBump.value) || (value < 0 && hasSink.value);
+	const votes = await api.post(`/posts/${props.post.id}/votes`, { value: undo ? 0 : value });
+
+	tally.value = votes.tally;
+	hasBump.value = votes.bump;
+	hasSink.value = votes.sink;
+
+	voting.value = false;
+}
 </script>
 
 <style scoped>
@@ -127,6 +177,50 @@ defineProps({
 	opacity: .25;
 }
 
+.votes {
+	width: 2rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.vote,
+.tally {
+	display: flex;
+	align-items: center;
+	height: 1rem;
+	font-weight: bold;
+}
+
+.vote {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.5rem;
+	height: 1rem;
+	box-sizing: border-box;
+	padding: .6rem;
+	margin: .25rem 0;
+	border-radius: .5rem;
+	background: var(--shadow-weak-40);
+}
+
+.tally {
+	color: var(--shadow-strong-20);
+	font-size: .9rem;
+}
+
+.bump.active {
+	color: var(--text-light);
+	background: var(--bump);
+}
+
+.sink.active {
+	color: var(--text-light);
+	background: var(--sink);
+}
+
 .meta {
 	display: flex;
 	gap: 1rem;