From c2c1f1c56d533fbfc44b353b9346363e9a99ba38 Mon Sep 17 00:00:00 2001
From: quilin <v.quilin@gmail.com>
Date: Thu, 11 Dec 2025 21:05:43 +0100
Subject: [PATCH] [DM.Forum] Likes for comments and topics

---
 .../src/api/requests/forumApi.ts              |   4 +-
 .../src/components/likes/DmLike.vue           |  56 +++++++++
 .../src/components/ui-kit/DmIconButton.vue    |  29 +++--
 .../DM.Web.Modern.Temp/src/stores/fora.ts     |  10 ++
 .../src/views/pages/forum/ForumTopic.vue      |  14 ++-
 .../src/views/pages/forum/TopicsList.vue      |  24 ++--
 .../src/views/pages/topic/TopicComment.vue    | 115 +++++++++++-------
 .../src/views/pages/topic/TopicPage.vue       |  31 ++++-
 8 files changed, 207 insertions(+), 76 deletions(-)
 create mode 100644 frontend/DM.Web.Modern.Temp/src/components/likes/DmLike.vue

diff --git a/frontend/DM.Web.Modern.Temp/src/api/requests/forumApi.ts b/frontend/DM.Web.Modern.Temp/src/api/requests/forumApi.ts
index 0815cd6e..4f49d71d 100644
--- a/frontend/DM.Web.Modern.Temp/src/api/requests/forumApi.ts
+++ b/frontend/DM.Web.Modern.Temp/src/api/requests/forumApi.ts
@@ -86,11 +86,11 @@ export default new (class ForumApi {
     return Api.delete(`forum/comments/${id}`);
   }
 
-  public getCommentForUpdate(id: CommentId) {
+  public getComment(id: CommentId, renderMode?: BbRenderMode) {
     return Api.get<Envelope<Comment>>(
       `forum/comments/${id}`,
       undefined,
-      BbRenderMode.Bb,
+      renderMode,
     );
   }
 
diff --git a/frontend/DM.Web.Modern.Temp/src/components/likes/DmLike.vue b/frontend/DM.Web.Modern.Temp/src/components/likes/DmLike.vue
new file mode 100644
index 00000000..d3b2308c
--- /dev/null
+++ b/frontend/DM.Web.Modern.Temp/src/components/likes/DmLike.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { IconType } from "@/components/ui-kit/iconType";
+import { computed } from "vue";
+import type { Served } from "@/api/models";
+import type { User } from "@/api/models/community";
+import DmIconButton from "@/components/ui-kit/DmIconButton.vue";
+import DmIcon from "@/components/ui-kit/DmIcon.vue";
+
+interface Likeable {
+  likes: Served<User[]>;
+  author: Served<User>;
+}
+
+const props = defineProps<{
+  entity: Likeable;
+  user: User | null;
+}>();
+const emit = defineEmits(["liked", "unliked"]);
+
+const canInteract = computed(
+  () => !!props.user && props.user.login !== props.entity.author.login,
+);
+const userLiked = computed(() =>
+  props.entity.likes.some((liker) => liker.login === props.user?.login),
+);
+</script>
+
+<template>
+  <dm-icon-button v-show="canInteract || entity.likes.length"
+    :class="['like', canInteract && 'like-likeable', userLiked && 'like-liked']"
+    :icon="IconType.Like"
+    :disabled="!canInteract"
+    @click="emit(userLiked ? 'unliked' : 'liked')"
+  >
+    <template v-if="entity.likes.length">
+      <span class="like-counter">{{ entity.likes.length }}</span>
+    </template>
+  </dm-icon-button>
+</template>
+
+<style scoped lang="sass">
+@use "@/assets/styles/Variables"
+
+.like
+  opacity: 0.7
+  cursor: default
+
+  &.like-likeable
+    cursor: pointer
+    &:hover, &.like-liked
+      opacity: 1
+
+.like-counter
+  display: inline-block
+  margin-left: Variables.$tiny
+</style>
diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmIconButton.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmIconButton.vue
index 129e843a..d194873f 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmIconButton.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmIconButton.vue
@@ -4,6 +4,7 @@ import { IconType } from "@/components/ui-kit/iconType";
 defineProps<{
   icon: IconType;
   loading?: boolean;
+  disabled?: boolean;
   type?: "reset" | "submit" | "button";
 }>();
 </script>
@@ -11,9 +12,14 @@ defineProps<{
 <template>
   <button
     :type="type ?? 'button'"
-    :class="['icon-button', loading && 'loading']"
+    :disabled="disabled"
+    :class="[
+      'icon_button',
+      loading && 'icon_button-loading',
+      !disabled && 'icon_button-active',
+    ]"
   >
-    <dm-icon :font="icon" />
+    <dm-icon :font="icon" /><slot />
   </button>
 </template>
 
@@ -22,26 +28,31 @@ defineProps<{
 @use "@/assets/styles/Themes"
 @use "@/assets/styles/Layout"
 
-.icon-button
+.icon_button
   +Layout.square(Variables.$grid-step * 5)
+  display: inline-block
   padding: Variables.$tiny
+  width: initial
+  min-width: Variables.$grid-step * 5
   border: none
 
   +Themes.theme(background-color, Themes.$background)
   +Themes.theme(color, Themes.$active-text)
 
-  font-size: Variables.$font-size
+  font-family: "PT Sans", sans-serif
   line-height: 1
   text-align: center
 
   border-radius: Variables.$medium
-  cursor: pointer
+  cursor: default
 
-  &:hover
-    +Themes.theme(background-color, Themes.$panel-background-hover)
-    +Themes.theme(color, Themes.$active-text-hover)
+  &.icon_button-active
+    cursor: pointer
+    &:hover
+      +Themes.theme(background-color, Themes.$panel-background-hover)
+      +Themes.theme(color, Themes.$active-text-hover)
 
-  &.loading
+  &.icon_button-loading
     background-position: center center
     background-image: url('@/assets/images/loader.gif')
     background-size: Variables.$medium
diff --git a/frontend/DM.Web.Modern.Temp/src/stores/fora.ts b/frontend/DM.Web.Modern.Temp/src/stores/fora.ts
index d7e34694..ab8d388d 100644
--- a/frontend/DM.Web.Modern.Temp/src/stores/fora.ts
+++ b/frontend/DM.Web.Modern.Temp/src/stores/fora.ts
@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 import type {
   Comment,
+  CommentId,
   Forum,
   ForumId,
   Topic,
@@ -106,6 +107,14 @@ export const useForumStore = defineStore("fora", () => {
     });
     comments.value = data;
   }
+  async function reloadComment(id: CommentId) {
+    if (!selectedTopic.value || !comments.value) return;
+
+    const commentIndex = comments.value.resources.findIndex((c) => c.id === id);
+    if (commentIndex === -1) return;
+    const { data } = await forumApi.getComment(id);
+    comments.value.resources[commentIndex] = data!.resource;
+  }
   async function createComment(comment: Post<Comment>) {
     const result = await forumApi.createComment(
       selectedTopic.value!.id,
@@ -137,6 +146,7 @@ export const useForumStore = defineStore("fora", () => {
     selectedTopic,
     fetchComments,
     reloadComments,
+    reloadComment,
     createComment,
     comments,
   };
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/forum/ForumTopic.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/forum/ForumTopic.vue
index e9714ed4..ae0d73cf 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/forum/ForumTopic.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/forum/ForumTopic.vue
@@ -15,7 +15,7 @@ const topicDescription = computed(() => {
   <div
     :key="topic.id"
     :class="{
-      'topics-list_row': true,
+      'topics_list-row': true,
       closed: topic.closed,
       attached: topic.attached,
     }"
@@ -31,7 +31,7 @@ const topicDescription = computed(() => {
               : topic.commentsCount || undefined,
         },
       }"
-      class="topics-list_row-title"
+      class="topics_list-row_title"
     >
       <dm-icon v-if="topic.attached" :font="IconType.Pinned" />
       <dm-icon v-if="topic.closed" :font="IconType.Closed" />
@@ -42,12 +42,13 @@ const topicDescription = computed(() => {
     </router-link>
     <div><human-date :date="topic.created!" format="DD.MM.YYYY" /></div>
     <div><user-link :user="topic.author!" /></div>
-    <div>
+    <div class="topics_list-counter">
       {{ topic.commentsCount }}
-      <span class="topics-list_row-unread" v-if="topic.unreadCommentsCount"
+      <span class="topics_list-row_unread" v-if="topic.unreadCommentsCount"
         >(+{{ topic.unreadCommentsCount }})</span
       >
     </div>
+    <div class="topics_list-counter">{{ topic.likes.length }}</div>
     <div>
       <template v-if="topic.lastComment">
         <user-link :user="topic.lastComment.author" />,
@@ -64,4 +65,7 @@ const topicDescription = computed(() => {
   </div>
 </template>
 
-<style scoped lang="sass"></style>
+<style scoped lang="sass">
+.topics_list-counter
+  text-align: center
+</style>
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/forum/TopicsList.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/forum/TopicsList.vue
index 8d7427c0..432ef88e 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/forum/TopicsList.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/forum/TopicsList.vue
@@ -17,13 +17,16 @@ const { topics, attachedTopics } = storeToRefs(useForumStore());
     :to="{ name: 'forum', params: route.params }"
   />
 
-  <div class="topics-list_header">
+  <div class="topics_list-header">
     <div>Тема</div>
     <div>Дата</div>
     <div>Автор</div>
-    <div>
+    <div class="topics_list-counter">
       <dm-icon :font="IconType.CommentsNoUnread" />
     </div>
+    <div class="topics_list-counter">
+      <dm-icon :font="IconType.Like" />
+    </div>
     <div>Последнее сообщение</div>
   </div>
 
@@ -37,7 +40,7 @@ const { topics, attachedTopics } = storeToRefs(useForumStore());
   <dm-loader v-if="!topics || attachedTopics === null" :big="true" />
   <secondary-text
     v-else-if="topics.resources.length + attachedTopics.length === 0"
-    class="topics-list_none"
+    class="topics_list-none"
     >Еще не создано ни одной темы</secondary-text
   >
   <forum-topic
@@ -52,12 +55,15 @@ const { topics, attachedTopics } = storeToRefs(useForumStore());
 @use "@/assets/styles/Variables"
 @use "@/assets/styles/Themes"
 @use "@/assets/styles/Grid"
-$grid-template: [title] 40% [date] 12% [author] 14% [count] auto [lastComment] 26%
+$grid-template: [title] 35% [date] 12% [author] 14% [count] 1fr [likes] 1fr [lastComment] 26%
 
-.topics-list_header
+.topics_list-header
   +Grid.grid-head($grid-template)
 
-.topics-list_row
+.topics_list-counter
+  text-align: center
+
+.topics_list-row
   +Grid.grid($grid-template)
   &:hover
     +Themes.theme(background-color, Themes.$panel-background-hover)
@@ -66,16 +72,16 @@ $grid-template: [title] 40% [date] 12% [author] 14% [count] auto [lastComment] 2
     &.attached
       opacity: initial
 
-.topics-list_row-title
+.topics_list-row_title
   display: block
   position: relative
   & .attached
     font-weight: bold
 
-.topics-list_row-unread
+.topics_list-row_unread
   font-weight: bold
 
-.topics-list_none
+.topics_list-none
   display: block
   margin: Variables.$medium 0
   text-align: center
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/topic/TopicComment.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/topic/TopicComment.vue
index d9e604ae..58e918e2 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/topic/TopicComment.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/topic/TopicComment.vue
@@ -11,9 +11,11 @@ import { userIsHighAuthority } from "@/api/models/community/helpers";
 import UserIcon from "@/components/community/UserIcon.vue";
 import forumApi from "@/api/requests/forumApi";
 import useEditMode from "@/composables/useEditMode";
+import DmLike from "@/components/likes/DmLike.vue";
+import { BbRenderMode } from "@/api/bbRenderMode";
 
 const { user } = storeToRefs(useUserStore());
-const { reloadComments } = useForumStore();
+const { reloadComments, reloadComment } = useForumStore();
 const { comment } = defineProps<{ comment: Comment }>();
 
 const commentActions = computed(() => {
@@ -44,7 +46,7 @@ const text = ref<string | null>(null);
 const initializeEditMode = async () => {
   if (text.value === null) {
     loading.value = true;
-    const { data } = await forumApi.getCommentForUpdate(comment.id);
+    const { data } = await forumApi.getComment(comment.id, BbRenderMode.Bb);
     text.value = data!.resource.text;
     loading.value = false;
   }
@@ -63,47 +65,68 @@ const removeComment = async () => {
   loading.value = false;
   await reloadComments();
 };
+
+const canLike = computed(
+  () => user.value! && user.value.login !== comment.author.login,
+);
+const liked = computed(() =>
+  comment.likes.some((u) => u.login === user.value?.login),
+);
+const like = async () => {
+  await forumApi.postCommentLike(comment.id);
+  await reloadComment(comment.id);
+};
+const unlike = async () => {
+  await forumApi.deleteCommentLike(comment.id);
+  await reloadComment(comment.id);
+};
 </script>
 
 <template>
   <div class="comment-container">
-    <div class="comment-wrapper">
-      <user-icon :user="comment.author" />
-      <div class="comment-content">
-        <div>
-          <user-link :user="comment.author" :hide-picture="true" />,
-          <secondary-text>
-            <human-timespan :date="comment.created" /><template
-              v-if="comment.updated"
-              >, (изменен <human-timespan :date="comment.updated" />)
-            </template>
-          </secondary-text>
-        </div>
-
-        <dm-form
-          v-if="isActive"
-          class="edit_comment-form"
-          @submit="updateComment"
-        >
-          <dm-field>
-            <dm-text :id="id" v-model="text" />
-          </dm-field>
-          <template #controls>
-            <dm-button type="submit" label="Сохранить" :loading="loading" />
-            <a @click="release">Отмена</a>
+    <user-icon :user="comment.author" />
+    <div class="comment-content">
+      <div>
+        <user-link :user="comment.author" :hide-picture="true" />,
+        <secondary-text>
+          <human-timespan :date="comment.created" /><template
+            v-if="comment.updated"
+          >
+            (изменен <human-timespan :date="comment.updated" />)
           </template>
-        </dm-form>
-
-        <template v-else>
-          <div v-html="comment.text" />
-          <dm-menu
-            v-if="commentActions"
-            class="comment-actions"
-            :items="commentActions"
-            :loading="loading"
-          />
-        </template>
+        </secondary-text>
       </div>
+
+      <dm-form
+        v-if="isActive"
+        class="edit_comment-form"
+        @submit="updateComment"
+      >
+        <dm-field>
+          <dm-text :id="id" v-model="text" />
+        </dm-field>
+        <template #controls>
+          <dm-button type="submit" label="Сохранить" :loading="loading" />
+          <a @click="release">Отмена</a>
+        </template>
+      </dm-form>
+
+      <template v-else>
+        <div v-html="comment.text" />
+      </template>
+    </div>
+    <div v-if="!isActive" class="comment-actions">
+      <dm-like
+        :entity="comment"
+        :user="user"
+        @liked="like"
+        @unliked="unlike"
+      />
+      <dm-menu
+        v-if="commentActions.length"
+        :items="commentActions"
+        :loading="loading"
+      />
     </div>
   </div>
 </template>
@@ -112,21 +135,23 @@ const removeComment = async () => {
 @use "@/assets/styles/Variables"
 @use "@/assets/styles/Layout"
 
-.comment-container
-  margin: Variables.$small (-(Variables.$grid-step * 3))
-  padding: Variables.$grid-step * 3
-  border-radius: Variables.$border-radius
+$outline: Variables.$grid-step * 3
 
-.comment-wrapper
+.comment-container
   display: flex
+  position: relative
+  margin: Variables.$small (-$outline)
+  padding: $outline
+  border-radius: Variables.$border-radius
 
 .comment-actions
+  display: flex
+  gap: Variables.$tiny
   position: absolute
-  top: 0
-  right: 0
+  top: $outline
+  right: $outline
 
 .comment-content
-  position: relative
   flex-grow: 1
 
 .edit_comment-form
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/topic/TopicPage.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/topic/TopicPage.vue
index 0499ba71..8dad3616 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/topic/TopicPage.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/topic/TopicPage.vue
@@ -11,6 +11,7 @@ import { type DmMenuItem } from "@/components/ui-kit/DmMenu.vue";
 import { userIsHighAuthority } from "@/api/models/community/helpers";
 import forumApi from "@/api/requests/forumApi";
 import useEditMode from "@/composables/useEditMode";
+import DmLike from "@/components/likes/DmLike.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -117,6 +118,15 @@ const removeTopic = async () => {
     params: { n: undefined, id: topic.value!.forum.id },
   });
 };
+
+const like = async () => {
+  await forumApi.postTopicLike(topic.value!.id);
+  await trySelectTopic(topic.value!.id);
+};
+const unlike = async () => {
+  await forumApi.deleteTopicLike(topic.value!.id);
+  await trySelectTopic(topic.value!.id);
+};
 </script>
 
 <template>
@@ -159,12 +169,19 @@ const removeTopic = async () => {
         <secondary-text
           ><human-timespan :date="topic.created"
         /></secondary-text>
-        <dm-menu
-          v-if="topicActions"
-          class="topic-actions"
-          :items="topicActions"
-          :loading="loading"
-        />
+        <div class="topic-actions">
+          <dm-like
+            :entity="topic"
+            :user="user"
+            @liked="like"
+            @unliked="unlike"
+          />
+          <dm-menu
+            v-if="topicActions.length"
+            :items="topicActions"
+            :loading="loading"
+          />
+        </div>
       </template>
     </div>
   </template>
@@ -184,6 +201,8 @@ const removeTopic = async () => {
   position: relative
 
 .topic-actions
+  display: flex
+  gap: Variables.$tiny
   position: absolute
   bottom: 0
   right: 0