feat(reactions): add reacting to comments in the frontend

frontend/src/components/input/Reactions.vue

@@ -154,7 +154,7 @@ async function toggleReaction(value: string) {
 				v-if="showEmojiPicker"
 				class="emoji-picker"
 				:style="{left: emojiPickerPosition?.left + 'px'}"
-				@emojiClick.stop="detail => addReaction(detail.unicode)"
+				@emojiClick="detail => addReaction(detail.unicode)"
 				ref="emojiPickerRef"
 			/>
 		</CustomTransition>

frontend/src/components/tasks/partials/comments.vue

@@ -97,6 +97,12 @@
 							editComment()
 						}"
 					/>
+					<Reactions 
+						class="mt-2"
+						entity-kind="comments" 
+						:entity-id="c.id"
+						v-model="c.reactions"
+					/>
 				</div>
 			</div>
 			<div
@@ -190,6 +196,7 @@ import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 import {getAvatarUrl, getDisplayName} from '@/models/user'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
+import Reactions from '@/components/input/Reactions.vue'
 
 const props = defineProps({
 	taskId: {

frontend/src/modelTypes/ITaskComment.ts

@@ -1,12 +1,15 @@
 import type {IAbstract} from './IAbstract'
 import type {IUser} from './IUser'
 import type {ITask} from './ITask'
+import type {IReactionPerEntity} from '@/modelTypes/IReaction'
 
 export interface ITaskComment extends IAbstract {
 	id: number
 	taskId: ITask['id']
 	comment: string
 	author: IUser
+	
+	reactions: IReactionPerEntity
 
 	created: Date
 	updated: Date

frontend/src/models/taskComment.ts

@@ -10,6 +10,8 @@ export default class TaskCommentModel extends AbstractModel<ITaskComment> implem
 	taskId: ITask['id'] = 0
 	comment = ''
 	author: IUser = UserModel
+	
+	reactions = {}
 
 	created: Date = null
 	updated: Date = null
@@ -21,5 +23,11 @@ export default class TaskCommentModel extends AbstractModel<ITaskComment> implem
 		this.author = new UserModel(this.author)
 		this.created = new Date(this.created)
 		this.updated = new Date(this.updated)
+		
+		// We can't convert emojis to camel case, hence we do this manually
+		this.reactions = {}
+		Object.keys(data.reactions || {}).forEach(reaction => {
+			this.reactions[reaction] = data.reactions[reaction].map(u => new UserModel(u))
+		})
 	}
 }