From c48b7adf9ede703ba15170a28c38ea7055a81b26 Mon Sep 17 00:00:00 2001
From: quilin <v.quilin@gmail.com>
Date: Fri, 5 Dec 2025 14:07:59 +0100
Subject: [PATCH 1/9] [DM.Forum] Fix topic creation date

---
 .../DM.Web.Modern.Temp/src/views/pages/topic/TopicPage.vue  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 9162ed0e..f91f7180 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
@@ -114,9 +114,9 @@ const removeTopic = async () => {
           v-html="topic.description"
         />
         <user-link :user="topic.author" />,
-        <secondary-text>
-          <human-timespan date="topic.created" />
-        </secondary-text>
+        <secondary-text
+          ><human-timespan :date="topic.created"
+        /></secondary-text>
         <dm-menu
           v-if="topicActions"
           class="topic-actions"

From 96504f111d9e28238508380c052f7f0e89c1f0de Mon Sep 17 00:00:00 2001
From: quilin <v.quilin@gmail.com>
Date: Mon, 8 Dec 2025 09:07:51 +0100
Subject: [PATCH 2/9] [DM.Forum] Edit profile information feature

---
 .../src/components/ui-kit/DmText.vue          |  1 -
 .../src/views/pages/forum/ForumTopic.vue      | 12 ++-
 .../views/pages/profile/UserInformation.vue   | 81 +++++++++++++++++--
 .../src/views/pages/topic/TopicPage.vue       |  3 +-
 4 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmText.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmText.vue
index bf48cc80..9e10dcc3 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmText.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmText.vue
@@ -25,7 +25,6 @@ const dispatchSubmit = (nativeInput: HTMLInputElement) => {
     <text-area
       :id="id"
       v-model="model"
-      rows="5"
       auto-resize
       :disabled="disabled"
       :readonly="readonly"
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 141c1005..e9714ed4 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
@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import type { Topic } from "@/api/models/forum";
 import { IconType } from "@/components/ui-kit/iconType";
+import { computed } from "vue";
 
-defineProps<{ topic: Topic }>();
+const props = defineProps<{ topic: Topic }>();
+const topicDescription = computed(() => {
+  return props.topic.description.length <= 100
+    ? props.topic.description
+    : `${props.topic.description.substring(0, 100)}...`;
+});
 </script>
 
 <template>
@@ -30,8 +36,8 @@ defineProps<{ topic: Topic }>();
       <dm-icon v-if="topic.attached" :font="IconType.Pinned" />
       <dm-icon v-if="topic.closed" :font="IconType.Closed" />
       {{ topic.title }}<br />
-      <secondary-text v-if="topic.description"
-        ><span v-html="topic.description"
+      <secondary-text v-if="topicDescription"
+        ><span v-html="topicDescription"
       /></secondary-text>
     </router-link>
     <div><human-date :date="topic.created!" format="DD.MM.YYYY" /></div>
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
index e3d72484..20ef9a9e 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
@@ -1,17 +1,82 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { useCommunityStore } from "@/stores/community";
-import SecondaryText from "@/components/layout/SecondaryText.vue";
+import { IconType } from "@/components/ui-kit/iconType";
+import { useUserStore } from "@/stores";
+import { computed, ref, watch } from "vue";
+import { userIsHighAuthority } from "@/api/models/community/helpers";
+import communityApi from "@/api/requests/communityApi";
 
-const { selectedUser: user } = storeToRefs(useCommunityStore());
+const store = useCommunityStore();
+const { selectedUser } = storeToRefs(store);
+const { user: currentUser } = storeToRefs(useUserStore());
+
+const canEdit = computed(() => {
+  if (!selectedUser.value || !currentUser.value) return false;
+  if (userIsHighAuthority(selectedUser.value)) return true;
+
+  return currentUser.value.login === selectedUser.value.login;
+});
+
+const editMode = ref(false);
+const info = ref<string | null>(null);
+watch(
+  () => editMode.value,
+  async () => {
+    if (info.value !== null) return;
+    const { data } = await communityApi.getUserForUpdate(
+      selectedUser.value!.login,
+    );
+    info.value = data!.resource.info;
+  },
+);
+
+const saveChanges = async () => {
+  await store.updateUser(currentUser.value!.login, { info: info.value! });
+  await store.trySelectProfile(currentUser.value!.login);
+  editMode.value = false;
+};
 </script>
 
 <template>
-  <dm-loader v-if="!user" :big="true" />
-  <div v-else-if="user!.info" v-html="user!.info" />
-  <secondary-text v-else
-    >Пользователь ничего о себе не написал...</secondary-text
-  >
+  <dm-loader v-if="!selectedUser" :big="true" />
+
+  <div class="profile-edit_container" v-if="canEdit">
+    <!--  TODO: should be same button as activation menu link  -->
+    <a v-if="!editMode" class="profile-edit_button" @click="editMode = true"
+      ><dm-icon :font="IconType.Edit"
+    /></a>
+    <dm-form v-if="editMode" @submit="saveChanges">
+      <dm-field>
+        <dm-text id="edit-profile-info-text" v-model="info" />
+      </dm-field>
+      <template #controls>
+        <dm-button type="submit" label="Сохранить" />
+        <a @click="editMode = false">Отмена</a>
+      </template>
+    </dm-form>
+  </div>
+
+  <div class="profile-info" v-if="!editMode && selectedUser">
+    <div v-if="selectedUser.info" v-html="selectedUser.info" />
+    <secondary-text v-else
+      >Пользователь ничего о себе не написал...</secondary-text
+    >
+  </div>
 </template>
 
-<style scoped lang="sass"></style>
+<style scoped lang="sass">
+@use "@/assets/styles/Variables"
+
+.profile-info
+  margin: Variables.$medium 0
+
+.profile-edit_container
+  position: relative
+  margin: 0 (-(Variables.$small))
+
+.profile-edit_button
+  position: absolute
+  top: 0
+  right: 0
+</style>
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 f91f7180..575ff37a 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
@@ -6,9 +6,8 @@ import { extractNumberParam } from "@/router";
 import { storeToRefs } from "pinia";
 import type { TopicId } from "@/api/models/forum";
 import { useFetchData } from "@/composables/useFetchData";
-import HumanTimespan from "@/components/dates/HumanTimespan.vue";
 import { computed, ref } from "vue";
-import DmMenu, { type DmMenuItem } from "@/components/ui-kit/DmMenu.vue";
+import { type DmMenuItem } from "@/components/ui-kit/DmMenu.vue";
 import { userIsHighAuthority } from "@/api/models/community/helpers";
 import forumApi from "@/api/requests/forumApi";
 import EditTopic from "@/views/pages/forum/EditTopic.vue";

From abee392019447327e6330e91d52310fac6b2da91 Mon Sep 17 00:00:00 2001
From: quilin <v.quilin@gmail.com>
Date: Mon, 8 Dec 2025 09:28:05 +0100
Subject: [PATCH 3/9] [DM.Front] Add icon button and use it as menu initialor

---
 .../src/components/index.ts                   |  4 ++-
 .../src/components/ui-kit/DmIconButton.vue    | 34 +++++++++++++++++++
 .../src/components/ui-kit/DmMenu.vue          | 18 +---------
 .../views/pages/profile/UserInformation.vue   | 10 +++---
 4 files changed, 44 insertions(+), 22 deletions(-)
 create mode 100644 frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmIconButton.vue

diff --git a/frontend/DM.Web.Modern.Temp/src/components/index.ts b/frontend/DM.Web.Modern.Temp/src/components/index.ts
index a4574c55..a875e304 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/index.ts
+++ b/frontend/DM.Web.Modern.Temp/src/components/index.ts
@@ -20,6 +20,7 @@ import UserOnline from "@/components/community/UserOnline.vue";
 import UserRating from "@/components/community/UserRating.vue";
 import UserIcon from "@/components/community/UserIcon.vue";
 import DmPaging from "@/components/ui-kit/DmPaging.vue";
+import DmIconButton from "@/components/ui-kit/DmIconButton.vue";
 
 export default function (application: App<Element>) {
   application.config.globalProperties.IconType = IconType;
@@ -37,7 +38,8 @@ export default function (application: App<Element>) {
     .component("DmInput", DmInput)
     .component("DmText", DmText)
     .component("DmDropdown", DmDropdown)
-    .component("DmButton", DmButton);
+    .component("DmButton", DmButton)
+    .component("DmIconButton", DmIconButton);
 
   application
     .component("PageTitle", PageTitle)
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
new file mode 100644
index 00000000..611cdbc0
--- /dev/null
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmIconButton.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { IconType } from "@/components/ui-kit/iconType";
+
+defineProps<{ icon: IconType }>();
+</script>
+
+<template>
+  <button class="icon-button"><dm-icon :font="icon" /></button>
+</template>
+
+<style scoped lang="sass">
+@use "@/assets/styles/Variables"
+@use "@/assets/styles/Themes"
+@use "@/assets/styles/Layout"
+
+.icon-button
+  +Layout.square(Variables.$grid-step * 5)
+  padding: Variables.$tiny
+  border: none
+
+  +Themes.theme(background-color, Themes.$background)
+  +Themes.theme(color, Themes.$active-text)
+
+  font-size: Variables.$font-size
+  line-height: 1
+  text-align: center
+
+  border-radius: Variables.$medium
+  cursor: pointer
+
+  &:hover
+    +Themes.theme(background-color, Themes.$panel-background-hover)
+    +Themes.theme(color, Themes.$active-text-hover)
+</style>
diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmMenu.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmMenu.vue
index 47d1af82..939601a5 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmMenu.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmMenu.vue
@@ -26,11 +26,7 @@ const menu = useTemplateRef("menu");
 
 <template>
   <span>
-    <dm-icon
-      class="menu-button"
-      @click="menu!.toggle($event)"
-      :font="IconType.Kebab"
-    />
+    <dm-icon-button :icon="IconType.Kebab" @click="menu!.toggle($event)" />
     <Menu
       ref="menu"
       popup
@@ -72,18 +68,6 @@ const menu = useTemplateRef("menu");
     opacity: 0
     transform: translateY(10%)
 
-.menu-button
-  +Layout.square(Variables.$medium)
-  +Themes.theme(background-color, Themes.$background)
-  line-height: Variables.$grid-step * 3
-  text-align: center
-  padding: Variables.$tiny
-  border-radius: Variables.$medium
-  cursor: pointer
-
-  &:hover
-    +Themes.theme(background-color, Themes.$panel-background-hover)
-
 .menu-root
   +Themes.theme(background, Themes.$background)
   +Themes.theme(border, Themes.$border, 1px solid)
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
index 20ef9a9e..4880e56e 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
@@ -42,10 +42,12 @@ const saveChanges = async () => {
   <dm-loader v-if="!selectedUser" :big="true" />
 
   <div class="profile-edit_container" v-if="canEdit">
-    <!--  TODO: should be same button as activation menu link  -->
-    <a v-if="!editMode" class="profile-edit_button" @click="editMode = true"
-      ><dm-icon :font="IconType.Edit"
-    /></a>
+    <dm-icon-button
+      v-if="!editMode"
+      :icon="IconType.Edit"
+      class="profile-edit_button"
+      @click="editMode = true"
+    />
     <dm-form v-if="editMode" @submit="saveChanges">
       <dm-field>
         <dm-text id="edit-profile-info-text" v-model="info" />

From 625956ff1a96cd436102d32c0aa495d33807a15d Mon Sep 17 00:00:00 2001
From: quilin <v.quilin@gmail.com>
Date: Mon, 8 Dec 2025 12:09:28 +0100
Subject: [PATCH 4/9] [DM.Front] Some loader adjustments

---
 .../src/components/ui-kit/DmButton.vue             |  1 +
 .../src/components/ui-kit/DmIconButton.vue         | 14 ++++++++++++--
 .../src/components/ui-kit/DmLoader.vue             |  3 ++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmButton.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmButton.vue
index dffc5f40..4ad4079f 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmButton.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmButton.vue
@@ -37,6 +37,7 @@ defineProps<{
     background-size: Variables.$medium
     background-repeat: no-repeat
     color: transparent !important
+    cursor: progress
 
 .button-icon
   margin-right: Variables.$minor
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 611cdbc0..94a0a48c 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
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { IconType } from "@/components/ui-kit/iconType";
 
-defineProps<{ icon: IconType }>();
+defineProps<{ icon: IconType; loading?: boolean }>();
 </script>
 
 <template>
-  <button class="icon-button"><dm-icon :font="icon" /></button>
+  <button :class="['icon-button', loading && 'loading']">
+    <dm-icon :font="icon" />
+  </button>
 </template>
 
 <style scoped lang="sass">
@@ -31,4 +33,12 @@ defineProps<{ icon: IconType }>();
   &:hover
     +Themes.theme(background-color, Themes.$panel-background-hover)
     +Themes.theme(color, Themes.$active-text-hover)
+
+  &.loading
+    background-position: center center
+    background-image: url('@/assets/images/loader.gif')
+    background-size: Variables.$medium
+    background-repeat: no-repeat
+    color: transparent !important
+    cursor: progress
 </style>
diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmLoader.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmLoader.vue
index ce985a52..85a43673 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmLoader.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmLoader.vue
@@ -3,7 +3,7 @@ defineProps<{ big?: boolean }>();
 </script>
 
 <template>
-  <span :class="{ loader: true, 'big-loader': big }">&nbsp;</span>
+  <span :class="['loader', big && 'big-loader']">&nbsp;</span>
 </template>
 
 <style scoped lang="sass">
@@ -14,6 +14,7 @@ defineProps<{ big?: boolean }>();
   +Layout.square(Variables.$medium)
   background-image: url('@/assets/images/loader.gif')
   background-size: contain
+  cursor: progress
 
 .big-loader
   +Layout.square(Variables.$big)

From e5e29a77db95458eacd7cadc1a022a3ae4be2543 Mon Sep 17 00:00:00 2001
From: quilin <v.quilin@gmail.com>
Date: Mon, 8 Dec 2025 18:19:46 +0100
Subject: [PATCH 5/9] [DM.Front] Better UI for information edit

---
 .../views/pages/profile/UserInformation.vue   | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
index 4880e56e..bf20c3e3 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
@@ -3,7 +3,7 @@ import { storeToRefs } from "pinia";
 import { useCommunityStore } from "@/stores/community";
 import { IconType } from "@/components/ui-kit/iconType";
 import { useUserStore } from "@/stores";
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 import { userIsHighAuthority } from "@/api/models/community/helpers";
 import communityApi from "@/api/requests/communityApi";
 
@@ -19,17 +19,21 @@ const canEdit = computed(() => {
 });
 
 const editMode = ref(false);
+const loading = ref(false);
 const info = ref<string | null>(null);
-watch(
-  () => editMode.value,
-  async () => {
-    if (info.value !== null) return;
+
+const initializeEditMode = async () => {
+  if (info.value === null) {
+    loading.value = true;
     const { data } = await communityApi.getUserForUpdate(
       selectedUser.value!.login,
     );
     info.value = data!.resource.info;
-  },
-);
+    loading.value = false;
+  }
+
+  editMode.value = true;
+};
 
 const saveChanges = async () => {
   await store.updateUser(currentUser.value!.login, { info: info.value! });
@@ -44,9 +48,10 @@ const saveChanges = async () => {
   <div class="profile-edit_container" v-if="canEdit">
     <dm-icon-button
       v-if="!editMode"
+      :loading="loading"
       :icon="IconType.Edit"
       class="profile-edit_button"
-      @click="editMode = true"
+      @click="initializeEditMode"
     />
     <dm-form v-if="editMode" @submit="saveChanges">
       <dm-field>

From 29713102e7bec54000dad1f9c8c8f0f618643d4d Mon Sep 17 00:00:00 2001
From: quilin <v.quilin@gmail.com>
Date: Mon, 8 Dec 2025 23:23:46 +0100
Subject: [PATCH 6/9] [DM.Front] Cleanup unneeded import statements and add
 useEditMode composable

---
 .../src/components/ui-kit/DmButton.vue        |  2 +-
 .../src/components/ui-kit/DmMenu.vue          |  7 +-
 .../src/components/ui-kit/DmText.vue          |  3 +-
 .../src/composables/useEditMode.ts            | 16 ++++
 .../src/views/pages/forum/EditTopic.vue       |  4 -
 .../src/views/pages/forum/TopicsList.vue      |  1 -
 .../views/pages/profile/UserInformation.vue   |  4 +-
 .../src/views/pages/topic/CreateComment.vue   | 21 +++--
 .../src/views/pages/topic/EditComment.vue     | 41 ---------
 .../src/views/pages/topic/TopicComment.vue    | 88 ++++++++++++++-----
 .../src/views/pages/topic/TopicPage.vue       | 74 ++++++++++++----
 11 files changed, 166 insertions(+), 95 deletions(-)
 create mode 100644 frontend/DM.Web.Modern.Temp/src/composables/useEditMode.ts
 delete mode 100644 frontend/DM.Web.Modern.Temp/src/views/pages/topic/EditComment.vue

diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmButton.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmButton.vue
index 4ad4079f..aff944e8 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmButton.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmButton.vue
@@ -19,7 +19,7 @@ defineProps<{
     }"
   >
     <template v-if="icon" #icon>
-      <DmIcon :font="icon" class="button-icon" />
+      <dm-icon :font="icon" class="button-icon" />
     </template>
   </Button>
 </template>
diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmMenu.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmMenu.vue
index 939601a5..6b9dfc34 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmMenu.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmMenu.vue
@@ -11,6 +11,7 @@ export type DmMenuItem = {
 };
 const props = defineProps<{
   items: DmMenuItem[];
+  loading?: boolean;
 }>();
 const primeItems = computed<MenuItem[]>(() =>
   props.items.map((item) => ({
@@ -26,7 +27,11 @@ const menu = useTemplateRef("menu");
 
 <template>
   <span>
-    <dm-icon-button :icon="IconType.Kebab" @click="menu!.toggle($event)" />
+    <dm-icon-button
+      :loading="loading"
+      :icon="IconType.Kebab"
+      @click="menu!.toggle($event)"
+    />
     <Menu
       ref="menu"
       popup
diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmText.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmText.vue
index 9e10dcc3..c3151187 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmText.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmText.vue
@@ -8,12 +8,12 @@ defineProps<{
   disabled?: boolean;
   placeholder?: string;
   readonly?: boolean;
+  rows?: number;
 }>();
 
 const isFilled = computed(() => !!model.value);
 
 const dispatchSubmit = (nativeInput: HTMLInputElement) => {
-  console.log(nativeInput);
   const event = new Event("submit");
   nativeInput.form?.dispatchEvent(event);
 };
@@ -28,6 +28,7 @@ const dispatchSubmit = (nativeInput: HTMLInputElement) => {
       auto-resize
       :disabled="disabled"
       :readonly="readonly"
+      :rows="rows"
       @keydown.meta.enter.prevent="
         dispatchSubmit($event.target! as HTMLInputElement)
       "
diff --git a/frontend/DM.Web.Modern.Temp/src/composables/useEditMode.ts b/frontend/DM.Web.Modern.Temp/src/composables/useEditMode.ts
new file mode 100644
index 00000000..c9d1a830
--- /dev/null
+++ b/frontend/DM.Web.Modern.Temp/src/composables/useEditMode.ts
@@ -0,0 +1,16 @@
+import { computed, ref, useId } from "vue";
+
+const activeId = ref<string | null>(null);
+
+export default function useEditMode() {
+  const id = useId();
+  const isActive = computed(() => activeId.value === id);
+  const acquire = () => (activeId.value = id);
+  const release = () => (activeId.value = null);
+
+  return {
+    isActive,
+    acquire,
+    release,
+  };
+}
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/forum/EditTopic.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/forum/EditTopic.vue
index 4e483cc4..6af520f6 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/forum/EditTopic.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/forum/EditTopic.vue
@@ -2,10 +2,6 @@
 import type { Topic } from "@/api/models/forum";
 import { ref, watch } from "vue";
 import forumApi from "@/api/requests/forumApi";
-import DmForm from "@/components/ui-kit/DmForm.vue";
-import DmLoader from "@/components/ui-kit/DmLoader.vue";
-import DmField from "@/components/ui-kit/DmField.vue";
-import DmInput from "@/components/ui-kit/DmInput.vue";
 
 const active = defineModel("active");
 const props = defineProps<{ topic: Topic }>();
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 a3cc8608..8d7427c0 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
@@ -4,7 +4,6 @@ import { useRoute } from "vue-router";
 import { storeToRefs } from "pinia";
 import { useForumStore } from "@/stores";
 import ForumTopic from "@/views/pages/forum/ForumTopic.vue";
-import DmLoader from "@/components/ui-kit/DmLoader.vue";
 import SecondaryText from "@/components/layout/SecondaryText.vue";
 
 const route = useRoute();
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
index bf20c3e3..2b526354 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
@@ -53,9 +53,9 @@ const saveChanges = async () => {
       class="profile-edit_button"
       @click="initializeEditMode"
     />
-    <dm-form v-if="editMode" @submit="saveChanges">
+    <dm-form v-else @submit="saveChanges">
       <dm-field>
-        <dm-text id="edit-profile-info-text" v-model="info" />
+        <dm-text id="edit-profile-info-text" v-model="info" :rows="5" />
       </dm-field>
       <template #controls>
         <dm-button type="submit" label="Сохранить" />
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/topic/CreateComment.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/topic/CreateComment.vue
index 147b68bc..dbc35b73 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/topic/CreateComment.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/topic/CreateComment.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import DmText from "@/components/ui-kit/DmText.vue";
 import { ref } from "vue";
 import { useForumStore } from "@/stores";
-import DmField from "@/components/ui-kit/DmField.vue";
 import { storeToRefs } from "pinia";
-import SecondaryText from "@/components/layout/SecondaryText.vue";
 
 const store = useForumStore();
 const { selectedTopic: topic } = storeToRefs(store);
 
 const emit = defineEmits(["created"]);
 const text = ref("");
+const loading = ref(false);
 const tryCreateTopic = async () => {
+  loading.value = true;
   const { data } = await store.createComment({ text: text.value });
-  if (data) emit("created");
-  text.value = "";
+  if (data) {
+    emit("created");
+    text.value = "";
+  }
+  loading.value = false;
 };
 </script>
 
@@ -25,9 +27,14 @@ const tryCreateTopic = async () => {
     class="create_comment-container"
   >
     <dm-field>
-      <dm-text v-model="text" id="text" placeholder="Новый комментарий" />
+      <dm-text
+        v-model="text"
+        id="text"
+        placeholder="Новый комментарий"
+        :rows="5"
+      />
     </dm-field>
-    <dm-button type="submit" label="Отправить" />
+    <dm-button type="submit" label="Отправить" :loading="loading" />
   </dm-form>
   <secondary-text class="create_comment-forbidden" v-else
     >Тема закрыта, добавление комментариев невозможно</secondary-text
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/topic/EditComment.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/topic/EditComment.vue
deleted file mode 100644
index 32d4894c..00000000
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/topic/EditComment.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import forumApi from "@/api/requests/forumApi";
-import type { Comment } from "@/api/models/forum";
-
-const active = defineModel("active");
-const props = defineProps<{ comment: Comment }>();
-const emit = defineEmits(["updated"]);
-const editableComment = ref<Comment | null>(null);
-
-watch(
-  () => active.value,
-  async () => {
-    const { data } = await forumApi.getCommentForUpdate(props.comment.id);
-    editableComment.value = data!.resource;
-  },
-);
-
-const saveChanges = async () => {
-  await forumApi.updateComment(props.comment.id, editableComment.value!);
-  active.value = false;
-  emit("updated");
-};
-</script>
-
-<template>
-  <dm-form v-if="active" @submit="saveChanges">
-    <template v-if="editableComment">
-      <dm-field>
-        <dm-text id="edit-comment-text" v-model="editableComment.text" />
-      </dm-field>
-    </template>
-    <dm-loader v-else />
-    <template v-if="editableComment" #controls>
-      <dm-button type="submit" label="Сохранить" />
-      <a @click="active = false">Отмена</a>
-    </template>
-  </dm-form>
-</template>
-
-<style scoped lang="sass"></style>
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 45bde50e..2a81fe51 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
@@ -8,9 +8,9 @@ import { useForumStore, useUserStore } from "@/stores";
 import { storeToRefs } from "pinia";
 import { userIsHighAuthority } from "@/api/models/community/helpers";
 
-import EditComment from "@/views/pages/topic/EditComment.vue";
 import UserIcon from "@/components/community/UserIcon.vue";
 import forumApi from "@/api/requests/forumApi";
+import useEditMode from "@/composables/useEditMode";
 
 const { user } = storeToRefs(useUserStore());
 const { reloadComments } = useForumStore();
@@ -20,33 +20,58 @@ const commentActions = computed(() => {
   const result: DmMenuItem[] = [];
   if (!user.value) return result;
   if (userIsHighAuthority(user.value)) {
-    result.push({ label: "Удалить", icon: IconType.Remove, command: remove });
+    result.push({
+      label: "Удалить",
+      icon: IconType.Remove,
+      command: removeComment,
+    });
   }
   if (user.value.login === comment.author.login) {
     result.unshift({
       label: "Редактировать",
       icon: IconType.Edit,
-      command: () => (editMode.value = true),
+      command: initializeEditMode,
     });
   }
 
   return result;
 });
 
-const editMode = ref(false);
-const remove = async () => {
+const loading = ref(false);
+
+const { isActive, acquire, release } = useEditMode();
+const text = ref<string | null>(null);
+const initializeEditMode = async () => {
+  if (text.value === null) {
+    loading.value = true;
+    const { data } = await forumApi.getCommentForUpdate(comment.id);
+    text.value = data!.resource.text;
+    loading.value = false;
+  }
+  acquire();
+};
+const updateComment = async () => {
+  loading.value = true;
+  await forumApi.updateComment(comment.id, { text: text.value! });
+  loading.value = false;
+  release();
+  await reloadComments();
+};
+const removeComment = async () => {
+  loading.value = true;
   await forumApi.deleteComment(comment.id);
+  loading.value = false;
   await reloadComments();
 };
 </script>
 
 <template>
-  <div class="topic-container">
-    <div class="wrapper">
+  <div class="comment-container">
+    <div class="comment-wrapper">
       <user-icon :user="comment.author" />
-      <div class="content">
-        <div class="meta">
-          <user-link :user="comment.author" hide-picture />,
+      <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"
@@ -54,14 +79,31 @@ const remove = async () => {
             </template>
           </secondary-text>
         </div>
-        <edit-comment
-          :comment="comment"
-          v-model:active="editMode"
-          @updated="reloadComments"
-        />
-        <div v-if="!editMode" v-html="comment.text" />
+
+        <dm-form
+          v-if="isActive"
+          class="edit_comment-form"
+          @submit="updateComment"
+        >
+          <dm-field>
+            <dm-text id="edit_comment-text" 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" />
+          <dm-menu
+            v-if="commentActions"
+            class="comment-actions"
+            :items="commentActions"
+            :loading="loading"
+          />
+        </template>
       </div>
-      <dm-menu v-if="commentActions" class="actions" :items="commentActions" />
     </div>
   </div>
 </template>
@@ -70,21 +112,23 @@ const remove = async () => {
 @use "@/assets/styles/Variables"
 @use "@/assets/styles/Layout"
 
-.topic-container
+.comment-container
   margin: Variables.$small (-(Variables.$grid-step * 3))
   padding: Variables.$grid-step * 3
   border-radius: Variables.$border-radius
 
-.wrapper
+.comment-wrapper
   display: flex
-  position: relative
 
-.actions
+.comment-actions
   position: absolute
   top: 0
   right: 0
 
-.content
+.comment-content
   position: relative
   flex-grow: 1
+
+.edit_comment-form
+  margin: (-(Variables.$small)) (-(Variables.$small)) 0
 </style>
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 575ff37a..0499ba71 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
@@ -4,13 +4,13 @@ import { useRoute, useRouter } from "vue-router";
 import { useForumStore, useUserStore } from "@/stores";
 import { extractNumberParam } from "@/router";
 import { storeToRefs } from "pinia";
-import type { TopicId } from "@/api/models/forum";
+import type { Topic, TopicId } from "@/api/models/forum";
 import { useFetchData } from "@/composables/useFetchData";
 import { computed, ref } from "vue";
 import { type DmMenuItem } from "@/components/ui-kit/DmMenu.vue";
 import { userIsHighAuthority } from "@/api/models/community/helpers";
 import forumApi from "@/api/requests/forumApi";
-import EditTopic from "@/views/pages/forum/EditTopic.vue";
+import useEditMode from "@/composables/useEditMode";
 
 const route = useRoute();
 const router = useRouter();
@@ -42,11 +42,6 @@ const topicActions = computed(() => {
 
   if (userIsHighAuthority(user.value)) {
     result.push(
-      {
-        label: "Удалить",
-        icon: IconType.Remove,
-        command: removeTopic,
-      },
       {
         label: topic.value!.closed ? "Открыть" : "Закрыть",
         icon: topic.value!.closed ? IconType.Open : IconType.Closed,
@@ -57,33 +52,66 @@ const topicActions = computed(() => {
         icon: IconType.Pinned,
         command: togglePinned,
       },
+      {
+        label: "Удалить",
+        icon: IconType.Remove,
+        command: removeTopic,
+      },
     );
   }
   if (user.value.login === topic.value!.author.login) {
     result.unshift({
       label: "Редактировать",
       icon: IconType.Edit,
-      command: () => (editMode.value = true),
+      command: initializeEditMode,
     });
   }
   return result;
 });
 
-const editMode = ref(false);
+const { isActive, acquire, release } = useEditMode();
+const loading = ref(false);
+
+const topicToEdit = ref<Topic | null>(null);
+const initializeEditMode = async () => {
+  if (topicToEdit.value === null) {
+    loading.value = true;
+    const { data } = await forumApi.getTopicForUpdate(topic.value!.id);
+    topicToEdit.value = data!.resource;
+    loading.value = false;
+  }
+  acquire();
+};
+const updateTopic = async () => {
+  loading.value = true;
+  await forumApi.updateTopic(topic.value!.id, {
+    title: topicToEdit.value!.title,
+    description: topicToEdit.value!.description,
+  });
+  loading.value = false;
+  await trySelectTopic(topic.value!.id);
+};
+
 const toggleClose = async () => {
+  loading.value = true;
   await forumApi.updateTopic(topic.value!.id, {
     closed: !topic.value!.closed,
   });
   topic.value!.closed = !topic.value!.closed;
+  loading.value = false;
 };
 const togglePinned = async () => {
+  loading.value = true;
   await forumApi.updateTopic(topic.value!.id, {
     attached: !topic.value!.attached,
   });
   topic.value!.attached = !topic.value!.attached;
+  loading.value = false;
 };
 const removeTopic = async () => {
+  loading.value = true;
   await forumApi.deleteTopic(topic.value!.id);
+  loading.value = false;
   await router.push({
     name: "forum",
     params: { n: undefined, id: topic.value!.forum.id },
@@ -101,12 +129,27 @@ const removeTopic = async () => {
       </router-link>
     </div>
     <div class="topic-content">
-      <edit-topic
-        :topic="topic"
-        v-model:active="editMode"
-        @updated="trySelectTopic(route.params.id as TopicId)"
-      />
-      <template v-if="!editMode">
+      <dm-form v-if="isActive" @submit="updateTopic">
+        <dm-field>
+          <dm-input
+            id="edit-topic-title"
+            v-model="topicToEdit!.title"
+            placeholder="Название"
+          />
+        </dm-field>
+        <dm-field>
+          <dm-text
+            id="edit-topic-description"
+            v-model="topicToEdit!.description"
+            placeholder="Описание"
+          />
+        </dm-field>
+        <template #controls>
+          <dm-button type="submit" label="Сохранить" />
+          <a @click="release">Отмена</a>
+        </template>
+      </dm-form>
+      <template v-else>
         <div
           v-if="topic.description"
           class="topic-description"
@@ -120,6 +163,7 @@ const removeTopic = async () => {
           v-if="topicActions"
           class="topic-actions"
           :items="topicActions"
+          :loading="loading"
         />
       </template>
     </div>

From c3be788eeaf61110da23d2f17a3f6742901b2251 Mon Sep 17 00:00:00 2001
From: quilin <v.quilin@gmail.com>
Date: Tue, 9 Dec 2025 14:53:58 +0100
Subject: [PATCH 7/9] [DM.Front] Allow editing of user stats

---
 .../src/components/ui-kit/DmForm.vue          | 14 ++-
 .../src/composables/useEditMode.ts            |  1 +
 .../src/views/pages/profile/ProfilePage.vue   | 61 ++++++++-----
 .../src/views/pages/profile/ProfileStat.vue   | 85 ++++++++++++++++++-
 .../views/pages/profile/UserInformation.vue   | 37 ++++----
 .../src/views/pages/topic/TopicComment.vue    |  4 +-
 6 files changed, 146 insertions(+), 56 deletions(-)

diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmForm.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmForm.vue
index 50c66447..7b2ede07 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmForm.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmForm.vue
@@ -3,14 +3,12 @@ defineEmits(["submit"]);
 </script>
 
 <template>
-  <div>
-    <form @submit.prevent="$emit('submit')">
-      <slot />
-      <div class="controls">
-        <slot name="controls" />
-      </div>
-    </form>
-  </div>
+  <form @submit.self.prevent="$emit('submit')">
+    <slot />
+    <div class="controls">
+      <slot name="controls" />
+    </div>
+  </form>
 </template>
 
 <style scoped lang="sass">
diff --git a/frontend/DM.Web.Modern.Temp/src/composables/useEditMode.ts b/frontend/DM.Web.Modern.Temp/src/composables/useEditMode.ts
index c9d1a830..86cc03cc 100644
--- a/frontend/DM.Web.Modern.Temp/src/composables/useEditMode.ts
+++ b/frontend/DM.Web.Modern.Temp/src/composables/useEditMode.ts
@@ -9,6 +9,7 @@ export default function useEditMode() {
   const release = () => (activeId.value = null);
 
   return {
+    id,
     isActive,
     acquire,
     release,
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue
index a0d582e0..a9d34313 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue
@@ -25,7 +25,7 @@ const roleNames: Record<string, string> = {
 const userRoles = computed(() =>
   user.value?.roles.filter((r) => r in roleNames).map((r) => roleNames[r]),
 );
-const isCurrentUser = computed(
+const canEdit = computed(
   () => currentUser.value && user.value?.login === currentUser.value?.login,
 );
 
@@ -42,30 +42,46 @@ useFetchData(
 
 <template>
   <template v-if="user">
-    <page-title class="profile_title">{{ route.params.login }}</page-title>
-    <secondary-text class="profile_roles">{{
+    <page-title class="profile-title">{{ route.params.login }}</page-title>
+    <secondary-text class="profile-roles">{{
       userRoles!.join(", ")
     }}</secondary-text>
 
-    <div class="profile_container">
-      <div class="profile_short-info">
+    <div class="profile-container">
+      <div class="profile-short_info">
         <img
           :src="user.originalPictureUrl"
           :alt="user.login"
-          class="profile_short-info_picture"
+          class="profile-short_info-picture"
         />
 
         <div>В сети: <user-online :user="user" :detailed="true" /></div>
-        <profile-stat title="Статус" empty="Не указан" v-model="user.status" />
-        <profile-stat title="Имя" empty="Не указано" v-model="user.name" />
+        <profile-stat
+          title="Статус"
+          empty="Не указан"
+          :value="user.status"
+          :update-value="(value) => ({ status: value })"
+        />
+        <profile-stat
+          title="Имя"
+          empty="Не указано"
+          :value="user.name"
+          :update-value="(value) => ({ name: value })"
+        />
         <profile-stat
           title="Местоположение"
           empty="Не указано"
-          v-model="user.location"
+          :value="user.location"
+          :update-value="(value) => ({ location: value })"
+        />
+        <profile-stat
+          title="Skype"
+          empty="Не указан"
+          :value="user.skype"
+          :update-value="(value) => ({ skype: value })"
         />
-        <profile-stat title="Skype" empty="Не указан" v-model="user.skype" />
       </div>
-      <div class="profile_content">
+      <div class="profile-content">
         <nav>
           <router-link
             class="tabs-link"
@@ -83,7 +99,7 @@ useFetchData(
             >Персонажи</router-link
           >
           <router-link
-            v-if="isCurrentUser"
+            v-if="canEdit"
             class="tabs-link"
             :to="{ name: 'user-settings', params: route.params }"
             >Настройки</router-link
@@ -100,29 +116,28 @@ useFetchData(
 <style scoped lang="sass">
 @use "@/assets/styles/Variables"
 
-.profile_title
+.profile-title
   display: inline-block
-.profile_roles
+.profile-roles
   display: inline-block
   margin-left: Variables.$small
 
-.profile_container
+.profile-container
   display: flex
+  gap: Variables.$big
 
-.profile_short-info
-  width: Variables.$grid-step * 40
+.profile-short_info
+  width: Variables.$grid-step * 50
+  flex-shrink: 0
 
-.profile_short-info_picture
+.profile-short_info-picture
   width: 100%
   max-height: Variables.$grid-step * 200
   border-radius: Variables.$border-radius
 
-.profile_content
+.profile-content
   flex-grow: 1
-  margin-left: Variables.$big
-
-  & .controls
-    background: transparent
+  min-width: 0
 
 nav
   margin-bottom: Variables.$small
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfileStat.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfileStat.vue
index 9498d38b..ef25b125 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfileStat.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfileStat.vue
@@ -1,14 +1,63 @@
 <script setup lang="ts">
-import SecondaryText from "@/components/layout/SecondaryText.vue";
+import { storeToRefs } from "pinia";
+import { useUserStore } from "@/stores";
+import { useCommunityStore } from "@/stores/community";
+import type { Patch } from "@/api/models";
+import type { User } from "@/api/models/community";
+import { computed, ref } from "vue";
+import useEditMode from "@/composables/useEditMode";
+import DmIconButton from "@/components/ui-kit/DmIconButton.vue";
+import { IconType } from "@/components/ui-kit/iconType";
+import DmForm from "@/components/ui-kit/DmForm.vue";
+import DmInput from "@/components/ui-kit/DmInput.vue";
+import communityApi from "@/api/requests/communityApi";
 
-defineProps<{ title: string; empty: string }>();
-const value = defineModel();
+const { user: currentUser } = storeToRefs(useUserStore());
+const communityStore = useCommunityStore();
+const { selectedUser: user } = storeToRefs(communityStore);
+
+const props = defineProps<{
+  title: string;
+  value: string;
+  empty: string;
+  updateValue: (value: string) => Patch<User>;
+}>();
+const editableValue = ref(props.value);
+
+const canEdit = computed(() => currentUser.value!.login === user.value!.login);
+const { id, isActive, acquire, release } = useEditMode();
+
+const loading = ref(false);
+const saveChanges = async () => {
+  if (props.value !== editableValue.value) {
+    loading.value = true;
+    await communityApi.updateUser(
+      user.value!.login,
+      props.updateValue(editableValue.value),
+    );
+    await communityStore.trySelectProfile(user.value!.login);
+    loading.value = false;
+  }
+  release();
+};
 </script>
 
 <template>
   <dl>
     <secondary-text tag="dt">{{ title }}</secondary-text>
-    <dd>{{ value || empty }}</dd>
+    <dd>
+      <div class="profile_stat-data" v-if="!isActive">
+        <div class="profile_stat-value">{{ value || empty }}</div>
+        <dm-icon-button v-if="canEdit" :icon="IconType.Edit" @click="acquire" />
+      </div>
+      <dm-form class="profile_stat-edit" v-else @submit="saveChanges">
+        <dm-input :id="id" v-model="editableValue" /><dm-icon-button
+          type="submit"
+          :icon="IconType.Tick"
+          :loading="loading"
+        /><dm-icon-button :icon="IconType.Close" @click="release" />
+      </dm-form>
+    </dd>
   </dl>
 </template>
 
@@ -20,4 +69,32 @@ dl
 
 dd
   padding: 0
+
+.profile_stat-data
+  display: flex
+  flex-wrap: nowrap
+  align-content: space-between
+  align-items: baseline
+
+.profile_stat-value
+  flex-grow: 1
+
+.profile_stat-edit
+  display: flex
+  flex-wrap: nowrap
+  align-content: space-between
+  align-items: baseline
+
+  & > *:first-child
+    flex-grow: 1
+    min-width: 0
+    margin-right: Variables.$minor
+
+  & input
+    display: block
+    width: 100%
+    box-sizing: border-box
+
+  & .icon-button
+    margin-left: Variables.$tiny
 </style>
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
index 2b526354..b9852e9e 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/UserInformation.vue
@@ -6,6 +6,7 @@ import { useUserStore } from "@/stores";
 import { computed, ref } from "vue";
 import { userIsHighAuthority } from "@/api/models/community/helpers";
 import communityApi from "@/api/requests/communityApi";
+import useEditMode from "@/composables/useEditMode";
 
 const store = useCommunityStore();
 const { selectedUser } = storeToRefs(store);
@@ -18,7 +19,7 @@ const canEdit = computed(() => {
   return currentUser.value.login === selectedUser.value.login;
 });
 
-const editMode = ref(false);
+const { isActive, acquire, release } = useEditMode();
 const loading = ref(false);
 const info = ref<string | null>(null);
 
@@ -32,55 +33,53 @@ const initializeEditMode = async () => {
     loading.value = false;
   }
 
-  editMode.value = true;
+  acquire();
 };
 
 const saveChanges = async () => {
   await store.updateUser(currentUser.value!.login, { info: info.value! });
   await store.trySelectProfile(currentUser.value!.login);
-  editMode.value = false;
+  release();
 };
 </script>
 
 <template>
   <dm-loader v-if="!selectedUser" :big="true" />
 
-  <div class="profile-edit_container" v-if="canEdit">
+  <div class="profile-info" v-if="!isActive && selectedUser">
     <dm-icon-button
-      v-if="!editMode"
+      v-if="canEdit"
       :loading="loading"
       :icon="IconType.Edit"
       class="profile-edit_button"
       @click="initializeEditMode"
     />
-    <dm-form v-else @submit="saveChanges">
-      <dm-field>
-        <dm-text id="edit-profile-info-text" v-model="info" :rows="5" />
-      </dm-field>
-      <template #controls>
-        <dm-button type="submit" label="Сохранить" />
-        <a @click="editMode = false">Отмена</a>
-      </template>
-    </dm-form>
-  </div>
-
-  <div class="profile-info" v-if="!editMode && selectedUser">
     <div v-if="selectedUser.info" v-html="selectedUser.info" />
     <secondary-text v-else
       >Пользователь ничего о себе не написал...</secondary-text
     >
   </div>
+
+  <dm-form class="profile-edit_container" v-if="isActive" @submit="saveChanges">
+    <dm-field>
+      <dm-text id="edit-profile-info-text" v-model="info" :rows="5" />
+    </dm-field>
+    <template #controls>
+      <dm-button type="submit" label="Сохранить" />
+      <a @click="release">Отмена</a>
+    </template>
+  </dm-form>
 </template>
 
 <style scoped lang="sass">
 @use "@/assets/styles/Variables"
 
 .profile-info
+  position: relative
   margin: Variables.$medium 0
 
 .profile-edit_container
-  position: relative
-  margin: 0 (-(Variables.$small))
+  margin: 0 (-(Variables.$small + Variables.$tiny))
 
 .profile-edit_button
   position: absolute
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 2a81fe51..d9e604ae 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
@@ -39,7 +39,7 @@ const commentActions = computed(() => {
 
 const loading = ref(false);
 
-const { isActive, acquire, release } = useEditMode();
+const { id, isActive, acquire, release } = useEditMode();
 const text = ref<string | null>(null);
 const initializeEditMode = async () => {
   if (text.value === null) {
@@ -86,7 +86,7 @@ const removeComment = async () => {
           @submit="updateComment"
         >
           <dm-field>
-            <dm-text id="edit_comment-text" v-model="text" />
+            <dm-text :id="id" v-model="text" />
           </dm-field>
           <template #controls>
             <dm-button type="submit" label="Сохранить" :loading="loading" />

From fde8b92c01a7606e1179d61fa40cbc95af13d54f Mon Sep 17 00:00:00 2001
From: quilin <v.quilin@gmail.com>
Date: Wed, 10 Dec 2025 12:09:40 +0100
Subject: [PATCH 8/9] [DM.Front] Upload component wrapper

---
 frontend/DM.Web.Modern.Temp/src/components/index.ts   |  2 ++
 .../src/components/ui-kit/DmUpload.vue                | 11 +++++++++++
 .../src/views/pages/profile/ProfilePage.vue           |  3 +--
 .../src/views/pages/profile/ProfileStat.vue           |  8 ++------
 4 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmUpload.vue

diff --git a/frontend/DM.Web.Modern.Temp/src/components/index.ts b/frontend/DM.Web.Modern.Temp/src/components/index.ts
index a875e304..f3bd5182 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/index.ts
+++ b/frontend/DM.Web.Modern.Temp/src/components/index.ts
@@ -21,6 +21,7 @@ import UserRating from "@/components/community/UserRating.vue";
 import UserIcon from "@/components/community/UserIcon.vue";
 import DmPaging from "@/components/ui-kit/DmPaging.vue";
 import DmIconButton from "@/components/ui-kit/DmIconButton.vue";
+import DmUpload from "@/components/ui-kit/DmUpload.vue";
 
 export default function (application: App<Element>) {
   application.config.globalProperties.IconType = IconType;
@@ -38,6 +39,7 @@ export default function (application: App<Element>) {
     .component("DmInput", DmInput)
     .component("DmText", DmText)
     .component("DmDropdown", DmDropdown)
+    .component("DmUpload", DmUpload)
     .component("DmButton", DmButton)
     .component("DmIconButton", DmIconButton);
 
diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmUpload.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmUpload.vue
new file mode 100644
index 00000000..13bea4c2
--- /dev/null
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmUpload.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { FileUpload } from "primevue";
+
+defineModel<{ name: string }>();
+</script>
+
+<template>
+  <file-upload :auto="true" :name="name" />
+</template>
+
+<style scoped lang="sass"></style>
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue
index a9d34313..3cf2bb7b 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue
@@ -4,11 +4,9 @@ import { useCommunityStore } from "@/stores/community";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 import { type UserLogin, UserRole } from "@/api/models/community";
-import SecondaryText from "@/components/layout/SecondaryText.vue";
 import ProfileStat from "@/views/pages/profile/ProfileStat.vue";
 import { useUserStore } from "@/stores";
 import { useFetchData } from "@/composables/useFetchData";
-import UserOnline from "@/components/community/UserOnline.vue";
 
 const route = useRoute();
 const { user: currentUser } = storeToRefs(useUserStore());
@@ -54,6 +52,7 @@ useFetchData(
           :alt="user.login"
           class="profile-short_info-picture"
         />
+        <dm-upload v-if="canEdit" />
 
         <div>В сети: <user-online :user="user" :detailed="true" /></div>
         <profile-stat
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfileStat.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfileStat.vue
index ef25b125..b234b785 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfileStat.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfileStat.vue
@@ -70,7 +70,8 @@ dl
 dd
   padding: 0
 
-.profile_stat-data
+.profile_stat-data,
+.profile_stat-edit
   display: flex
   flex-wrap: nowrap
   align-content: space-between
@@ -80,11 +81,6 @@ dd
   flex-grow: 1
 
 .profile_stat-edit
-  display: flex
-  flex-wrap: nowrap
-  align-content: space-between
-  align-items: baseline
-
   & > *:first-child
     flex-grow: 1
     min-width: 0

From ca782ab6608c509f97c92620361ea8faec3e0ad0 Mon Sep 17 00:00:00 2001
From: quilin <v.quilin@gmail.com>
Date: Wed, 10 Dec 2025 20:47:10 +0100
Subject: [PATCH 9/9] [DM.Front] Profile picture upload

---
 frontend/DM.Web.Modern.Temp/src/api/index.ts  |  13 +-
 .../src/api/requests/communityApi.ts          |   3 +-
 .../src/assets/styles/Themes.sass             |   2 +-
 .../src/components/index.ts                   |   4 +-
 .../src/components/ui-kit/DmPictureUpload.vue | 114 ++++++++++++++++++
 .../DmProgress.vue}                           |   2 +-
 .../src/components/ui-kit/DmUpload.vue        |  35 +++++-
 .../src/views/layout/sidebar/TheDonation.vue  |  22 ++--
 .../src/views/pages/polls/ThePoll.vue         |   5 +-
 .../src/views/pages/profile/ProfilePage.vue   |  64 ++++++----
 10 files changed, 213 insertions(+), 51 deletions(-)
 create mode 100644 frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmPictureUpload.vue
 rename frontend/DM.Web.Modern.Temp/src/components/{ProgressBar.vue => ui-kit/DmProgress.vue} (95%)

diff --git a/frontend/DM.Web.Modern.Temp/src/api/index.ts b/frontend/DM.Web.Modern.Temp/src/api/index.ts
index 9a290a00..a4a142b1 100644
--- a/frontend/DM.Web.Modern.Temp/src/api/index.ts
+++ b/frontend/DM.Web.Modern.Temp/src/api/index.ts
@@ -64,21 +64,24 @@ class Api {
   public postFile<T>(
     url: string,
     params?: any,
-    progressCallback?: (event: AxiosProgressEvent) => void,
+    progressCallback?: (event: ProgressEvent) => void,
   ): Promise<ApiResult<T>> {
     const result = this.send<T>(() =>
       this.axios.post(url, params, {
         onUploadProgress: progressCallback
           ? (event: AxiosProgressEvent) =>
               progressCallback(
-                event.loaded === event.total
-                  ? ({ loaded: 99, total: 100 } as AxiosProgressEvent)
-                  : event,
+                (event.loaded === event.total
+                  ? { loaded: 99, total: 100 }
+                  : event) as ProgressEvent,
               )
           : undefined,
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
       }),
     );
-    progressCallback?.({ loaded: 1, total: 1 } as AxiosProgressEvent);
+    progressCallback?.({ loaded: 1, total: 1 } as ProgressEvent);
     return result;
   }
 
diff --git a/frontend/DM.Web.Modern.Temp/src/api/requests/communityApi.ts b/frontend/DM.Web.Modern.Temp/src/api/requests/communityApi.ts
index e00d23ba..748368bf 100644
--- a/frontend/DM.Web.Modern.Temp/src/api/requests/communityApi.ts
+++ b/frontend/DM.Web.Modern.Temp/src/api/requests/communityApi.ts
@@ -10,7 +10,6 @@ import type {
 } from "@/api/models/community";
 import Api from "@/api";
 import { BbRenderMode } from "../bbRenderMode";
-import type { AxiosProgressEvent } from "axios";
 import type { Patch, Post } from "@/api/models";
 
 export default new (class CommunityApi {
@@ -47,7 +46,7 @@ export default new (class CommunityApi {
   public uploadUserPicture(
     login: UserLogin,
     files: FormData,
-    progressCallback: (event: AxiosProgressEvent) => void,
+    progressCallback: (event: ProgressEvent) => void,
   ) {
     return Api.postFile<Envelope<User>>(
       `users/${login}/uploads`,
diff --git a/frontend/DM.Web.Modern.Temp/src/assets/styles/Themes.sass b/frontend/DM.Web.Modern.Temp/src/assets/styles/Themes.sass
index 56bc05d6..f4680314 100644
--- a/frontend/DM.Web.Modern.Temp/src/assets/styles/Themes.sass
+++ b/frontend/DM.Web.Modern.Temp/src/assets/styles/Themes.sass
@@ -7,7 +7,7 @@
   @return color-set($light, $light, $light, $light, $dark)
 
 
-$animation-props: background-color, color, border-color, filter
+$animation-props: background-color, color, border-color, filter, opacity
 @mixin theme($attr, $color-set, $value-prefix: null)
   transition-property: $animation-props
   transition-duration: Variables.$animation-time
diff --git a/frontend/DM.Web.Modern.Temp/src/components/index.ts b/frontend/DM.Web.Modern.Temp/src/components/index.ts
index f3bd5182..23cf921f 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/index.ts
+++ b/frontend/DM.Web.Modern.Temp/src/components/index.ts
@@ -22,6 +22,7 @@ import UserIcon from "@/components/community/UserIcon.vue";
 import DmPaging from "@/components/ui-kit/DmPaging.vue";
 import DmIconButton from "@/components/ui-kit/DmIconButton.vue";
 import DmUpload from "@/components/ui-kit/DmUpload.vue";
+import DmProgress from "@/components/ui-kit/DmProgress.vue";
 
 export default function (application: App<Element>) {
   application.config.globalProperties.IconType = IconType;
@@ -31,7 +32,8 @@ export default function (application: App<Element>) {
     .component("DmLoader", DmLoader)
     .component("DmDialog", DmDialog)
     .component("DmPaging", DmPaging)
-    .component("DmMenu", DmMenu);
+    .component("DmMenu", DmMenu)
+    .component("DmProgress", DmProgress);
 
   application
     .component("DmForm", DmForm)
diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmPictureUpload.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmPictureUpload.vue
new file mode 100644
index 00000000..54ed7e96
--- /dev/null
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmPictureUpload.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { IconType } from "@/components/ui-kit/iconType";
+import { computed, ref, watch } from "vue";
+
+const props = defineProps<{
+  canUpload: boolean;
+  alt: string;
+  progressEvent: ProgressEvent | null;
+  pictureUrl: string | undefined;
+}>();
+const emit = defineEmits(["upload"]);
+
+const loaded = ref(0);
+const total = ref(0);
+const progress = computed(() =>
+  total.value > 0 ? Math.floor((loaded.value / total.value) * 100) : 0,
+);
+
+const uploading = computed(() => total.value > loaded.value);
+const uploaded = computed(
+  () => total.value > 0 && total.value === loaded.value,
+);
+
+watch(
+  () => props.progressEvent,
+  (progressEvent: ProgressEvent | null) => {
+    if (progressEvent === null) {
+      loaded.value = 0;
+      total.value = 0;
+      return;
+    }
+
+    loaded.value = progressEvent.loaded;
+    total.value = progressEvent.total;
+
+    if (loaded.value === total.value) {
+      setTimeout(() => {
+        loaded.value = 0;
+        total.value = 0;
+      }, 2000);
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="picture_upload-container">
+    <img :src="props.pictureUrl" class="picture_upload-picture" :alt="alt" />
+    <template v-if="canUpload">
+      <span :class="['picture_upload-status', !uploading && !uploaded && 'picture_upload-status-ready']">
+        <template v-if="uploading">
+          <dm-progress
+            class="picture_upload-progress"
+            :goal="total"
+            :current="loaded"
+            >{{ progress }}%</dm-progress
+          >
+        </template>
+        <template v-else-if="uploaded">
+          <dm-icon :font="IconType.Tick" />&nbsp;Изображение загружено
+        </template>
+        <template v-else>
+          <dm-icon :font="IconType.Upload" />&nbsp;Загрузить изображение
+        </template>
+      </span>
+      <dm-upload
+        v-if="!uploading"
+        @upload="(picture: FormData) => emit('upload', picture)"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped lang="sass">
+@use "@/assets/styles/Variables"
+@use "@/assets/styles/Themes"
+
+.picture_upload-container
+  position: relative
+
+.picture_upload-picture
+  width: 100%
+  max-height: Variables.$grid-step * 200
+  border-radius: Variables.$border-radius
+
+.picture_upload-status
+  display: flex
+  align-items: center
+  justify-content: center
+
+  position: absolute
+  bottom: 0
+  left: 0
+  right: 0
+  height: Variables.$grid-step * 10
+  padding: 0 Variables.$small
+
+  +Themes.theme(background-color, Themes.$shade-background)
+  +Themes.theme(color, Themes.$shade-text)
+  text-align: center
+
+  border-bottom-left-radius: Variables.$border-radius
+  border-bottom-right-radius: Variables.$border-radius
+
+  &.picture_upload-status-ready
+    opacity: 0
+
+.picture_upload-container:hover .picture_upload-status-ready
+  opacity: 1
+
+.picture_upload-progress
+  margin: 0
+  flex-grow: 1
+</style>
diff --git a/frontend/DM.Web.Modern.Temp/src/components/ProgressBar.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmProgress.vue
similarity index 95%
rename from frontend/DM.Web.Modern.Temp/src/components/ProgressBar.vue
rename to frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmProgress.vue
index bf921b64..8ef5a8e1 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ProgressBar.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmProgress.vue
@@ -20,7 +20,7 @@ const progress = computed(() => (props.current / props.goal) * 100);
   position: relative
   overflow: hidden
   margin: Variables.$small 0
-  padding: Variables.$small
+  padding: Variables.$minor Variables.$small
   border-radius: Variables.$border-radius
   +Themes.theme(background-color, Themes.$progress-background)
 
diff --git a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmUpload.vue b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmUpload.vue
index 13bea4c2..8c4a32a6 100644
--- a/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmUpload.vue
+++ b/frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmUpload.vue
@@ -1,11 +1,38 @@
 <script setup lang="ts">
-import { FileUpload } from "primevue";
+import { ref } from "vue";
 
-defineModel<{ name: string }>();
+const emit = defineEmits(["upload"]);
+
+const input = ref<HTMLInputElement>();
+const upload = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const files = target.files;
+
+  if (!files?.length) return;
+
+  const formData = new FormData();
+  const name = files.length > 1 ? "files" : "file";
+
+  for (const file of files) formData.append(name, file);
+  emit("upload", formData);
+};
 </script>
 
 <template>
-  <file-upload :auto="true" :name="name" />
+  <input type="file" class="upload-input" ref="input" @change="upload" />
 </template>
 
-<style scoped lang="sass"></style>
+<style scoped lang="sass">
+.upload-input
+  position: absolute
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  padding: 0
+  margin: 0
+  opacity: 0
+  border: none
+  outline: none
+  cursor: pointer
+</style>
diff --git a/frontend/DM.Web.Modern.Temp/src/views/layout/sidebar/TheDonation.vue b/frontend/DM.Web.Modern.Temp/src/views/layout/sidebar/TheDonation.vue
index b3bc4e06..7b3ddc34 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/layout/sidebar/TheDonation.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/layout/sidebar/TheDonation.vue
@@ -1,23 +1,21 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { IconType } from "@/components/ui-kit/iconType";
+
+const goal = ref(50000);
+const current = ref(17000);
+</script>
+
 <template>
   <div>
     <block-title>
       <dm-icon :font="IconType.Ruble" /> Помочь проекту
     </block-title>
-    <progress-bar :current="current" :goal="goal"
-      >{{ current }} / {{ goal }} р.</progress-bar
+    <dm-progress :current="current" :goal="goal"
+      >{{ current }} / {{ goal }} р.</dm-progress
     >
     dm.am &ndash; некоммерческий проект.<br />
     <router-link :to="{ name: 'donate' }">Помогите нам</router-link> хотя бы не
     испортить его!
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import ProgressBar from "@/components/ProgressBar.vue";
-import BlockTitle from "@/components/layout/BlockTitle.vue";
-import { IconType } from "@/components/ui-kit/iconType";
-
-const goal = ref(50000);
-const current = ref(17000);
-</script>
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/polls/ThePoll.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/polls/ThePoll.vue
index d519bdb7..813977a0 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/polls/ThePoll.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/polls/ThePoll.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Poll, PollOptionId } from "@/api/models/community";
-import ProgressBar from "@/components/ProgressBar.vue";
 import { computed } from "vue";
 import dayjs from "dayjs";
 import { storeToRefs } from "pinia";
@@ -27,7 +26,7 @@ async function voteForOption(optionId: PollOptionId) {
       {{ poll.title }}<br />
       <secondary-text v-if="closed">Голосование окончено</secondary-text>
     </div>
-    <progress-bar
+    <dm-progress
       v-for="option in poll.options"
       :key="option.id"
       :current="option.votesCount"
@@ -42,7 +41,7 @@ async function voteForOption(optionId: PollOptionId) {
         @click="voteForOption(option.id)"
         class="poll-option-vote"
       />
-    </progress-bar>
+    </dm-progress>
   </div>
 </template>
 
diff --git a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue
index 3cf2bb7b..1d4f5bcb 100644
--- a/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue
+++ b/frontend/DM.Web.Modern.Temp/src/views/pages/profile/ProfilePage.vue
@@ -2,11 +2,13 @@
 import { useRoute } from "vue-router";
 import { useCommunityStore } from "@/stores/community";
 import { storeToRefs } from "pinia";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { type UserLogin, UserRole } from "@/api/models/community";
 import ProfileStat from "@/views/pages/profile/ProfileStat.vue";
 import { useUserStore } from "@/stores";
 import { useFetchData } from "@/composables/useFetchData";
+import DmPictureUpload from "@/components/ui-kit/DmPictureUpload.vue";
+import communityApi from "@/api/requests/communityApi";
 
 const route = useRoute();
 const { user: currentUser } = storeToRefs(useUserStore());
@@ -14,6 +16,16 @@ const communityStore = useCommunityStore();
 const { selectedUser: user } = storeToRefs(communityStore);
 const { trySelectProfile } = communityStore;
 
+useFetchData(
+  () => trySelectProfile(route.params.login as UserLogin),
+  [
+    {
+      param: (p) => p.login,
+      callback: (login) => trySelectProfile(login as UserLogin),
+    },
+  ],
+);
+
 const roleNames: Record<string, string> = {
   [UserRole.Administrator]: "Тролль",
   [UserRole.SeniorModerator]: "Старший гоблин",
@@ -23,19 +35,26 @@ const roleNames: Record<string, string> = {
 const userRoles = computed(() =>
   user.value?.roles.filter((r) => r in roleNames).map((r) => roleNames[r]),
 );
-const canEdit = computed(
-  () => currentUser.value && user.value?.login === currentUser.value?.login,
-);
+const canEdit = computed(() => {
+  if (currentUser.value === null) return false;
+  return user.value?.login === currentUser.value?.login;
+});
 
-useFetchData(
-  () => trySelectProfile(route.params.login as UserLogin),
-  [
-    {
-      param: (p) => p.login,
-      callback: (login) => trySelectProfile(login as UserLogin),
-    },
-  ],
+const uploadProgress = ref<ProgressEvent | null>(null);
+const profilePictureUrl = computed(
+  () => user.value?.originalPictureUrl ?? "/userpic.png",
 );
+const uploadPicture = async (data: FormData) => {
+  await communityApi.uploadUserPicture(
+    user.value!.login,
+    data,
+    (progressEvent) => {
+      uploadProgress.value = progressEvent;
+    },
+  );
+  uploadProgress.value = null;
+  await trySelectProfile(user.value!.login);
+};
 </script>
 
 <template>
@@ -47,12 +66,15 @@ useFetchData(
 
     <div class="profile-container">
       <div class="profile-short_info">
-        <img
-          :src="user.originalPictureUrl"
-          :alt="user.login"
-          class="profile-short_info-picture"
-        />
-        <dm-upload v-if="canEdit" />
+        <div class="profile-picture">
+          <dm-picture-upload
+            @upload="uploadPicture"
+            :can-upload="canEdit"
+            :alt="user.login"
+            :progress-event="uploadProgress"
+            :picture-url="profilePictureUrl"
+          />
+        </div>
 
         <div>В сети: <user-online :user="user" :detailed="true" /></div>
         <profile-stat
@@ -129,10 +151,8 @@ useFetchData(
   width: Variables.$grid-step * 50
   flex-shrink: 0
 
-.profile-short_info-picture
-  width: 100%
-  max-height: Variables.$grid-step * 200
-  border-radius: Variables.$border-radius
+.profile-picture
+  margin-bottom: Variables.$small
 
 .profile-content
   flex-grow: 1