From 7ff9cb524851e26d58275815b6d62a84aea9b487 Mon Sep 17 00:00:00 2001
From: 7eliassen <ivan-smirnov-6909@mail.ru>
Date: Thu, 5 Feb 2026 23:50:48 +0300
Subject: [PATCH 1/6] feat: add ability to remove team member

---
 src/application/i18n/messages/en.json         |   5 +
 src/application/services/useNoteSettings.ts   |  17 +++
 .../noteSettings.repository.interface.ts      |   7 ++
 src/domain/noteSettings.service.ts            |   9 ++
 src/infrastructure/noteSettings.repository.ts |  10 ++
 .../components/team/MoreActions.vue           | 102 ++++++++++++++++++
 src/presentation/components/team/Team.vue     |  15 +++
 src/presentation/pages/NoteSettings.vue       |   8 ++
 8 files changed, 173 insertions(+)
 create mode 100644 src/presentation/components/team/MoreActions.vue

diff --git a/src/application/i18n/messages/en.json b/src/application/i18n/messages/en.json
index aed70cd6..78538e17 100644
--- a/src/application/i18n/messages/en.json
+++ b/src/application/i18n/messages/en.json
@@ -67,6 +67,11 @@
       "roles": {
         "Read": "Reader",
         "Write": "Writer"
+      },
+      "removeMemberConfirmationTitle": "Remove member",
+      "removeMemberConfirmationBody": "Are you sure you want to remove user from the team?",
+      "ContextMenu": {
+        "remove": "Remove"
       }
     }
   },
diff --git a/src/application/services/useNoteSettings.ts b/src/application/services/useNoteSettings.ts
index 7e2d38a3..1c7c9187 100644
--- a/src/application/services/useNoteSettings.ts
+++ b/src/application/services/useNoteSettings.ts
@@ -66,6 +66,13 @@ interface UseNoteSettingsComposableState {
    * @param newParentURL - New parent note URL
    */
   setParent: (id: NoteId, newParentURL: string) => Promise<void>;
+
+  /**
+   * Delete team member by user id
+   * @param id - Note id
+   * @param userId - User id
+   */
+  removeMemberByUserId: (id: NoteId, userId: UserId) => Promise<void>;
 }
 
 /**
@@ -188,6 +195,15 @@ export default function (): UseNoteSettingsComposableState {
     }
   };
 
+  /**
+   * Delete team member by user id
+   * @param id - Note id
+   * @param userId - User id
+   */
+  const removeMemberByUserId = async (id: NoteId, userId: UserId) => {
+    await noteSettingsService.removeMemberByUserId(id, userId);
+  }
+
   return {
     updateCover,
     setParent,
@@ -198,5 +214,6 @@ export default function (): UseNoteSettingsComposableState {
     revokeHash,
     changeRole,
     deleteNoteById,
+    removeMemberByUserId,
   };
 }
diff --git a/src/domain/noteSettings.repository.interface.ts b/src/domain/noteSettings.repository.interface.ts
index ce2d8a1e..856bd512 100644
--- a/src/domain/noteSettings.repository.interface.ts
+++ b/src/domain/noteSettings.repository.interface.ts
@@ -43,4 +43,11 @@ export default interface NoteSettingsRepositoryInterface {
    * @param id - Note id
    */
   deleteNote(id: NoteId): Promise<void>;
+
+  /**
+   * Delete team member by user id
+   * @param id - Note id
+   * @param userId - User id
+   */
+  removeMemberByUserId(id: NoteId, userId: UserId): Promise<void>;
 }
diff --git a/src/domain/noteSettings.service.ts b/src/domain/noteSettings.service.ts
index 26ca425d..28d39032 100644
--- a/src/domain/noteSettings.service.ts
+++ b/src/domain/noteSettings.service.ts
@@ -118,4 +118,13 @@ export default class NoteSettingsService {
   public async deleteNote(id: NoteId): Promise<void> {
     return await this.noteSettingsRepository.deleteNote(id);
   }
+  
+  /**
+   * Delete team member by user id
+   * @param id - Note id
+   * @param userId - User id
+   */
+  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<void> {
+    return await this.noteSettingsRepository.removeMemberByUserId(id, userId);
+  }
 }
diff --git a/src/infrastructure/noteSettings.repository.ts b/src/infrastructure/noteSettings.repository.ts
index 90efebe2..6e0003c5 100644
--- a/src/infrastructure/noteSettings.repository.ts
+++ b/src/infrastructure/noteSettings.repository.ts
@@ -69,4 +69,14 @@ export default class NoteSettingsRepository implements NoteSettingsRepositoryInt
   public async deleteNote(id: NoteId): Promise<void> {
     await this.transport.delete<boolean>(`/note/` + id);
   }
+
+  /**
+   * Delete team member by user id
+   * @param id - Note id
+   * @param userId - User id
+   */
+  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<void> {
+    const data = { userId };
+    await this.transport.delete<boolean>(`/note-settings/${id}/team`, data);
+  }
 }
diff --git a/src/presentation/components/team/MoreActions.vue b/src/presentation/components/team/MoreActions.vue
new file mode 100644
index 00000000..fc77f98b
--- /dev/null
+++ b/src/presentation/components/team/MoreActions.vue
@@ -0,0 +1,102 @@
+<template>
+  <button 
+    ref="triggerButton" 
+    class="more-actions-button" 
+    @click="handleButtonClick"
+  >
+    <Icon 
+      name="EtcVertical" 
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon, ContextMenu, usePopover, useConfirm } from '@codexteam/ui/vue';
+import type { ContextMenuItem } from '@codexteam/ui/vue';
+import { type TeamMember } from '@/domain/entities/Team';
+import { useI18n } from 'vue-i18n';
+import { NoteId } from '@/domain/entities/Note';
+import useNoteSettings from '@/application/services/useNoteSettings';
+
+const { removeMemberByUserId } = useNoteSettings();
+
+const props = defineProps<{
+  /**
+   * Team member data
+   */
+  teamMember: TeamMember;
+  /**
+   * Id of the current note
+   */
+  noteId: NoteId;
+}>();
+
+const { t } = useI18n();
+const { showPopover, hide } = usePopover();
+const { confirm } = useConfirm();
+
+const triggerButton = ref<HTMLButtonElement>();
+
+const menuItems: ContextMenuItem[] = [
+  {
+    title: t('noteSettings.team.ContextMenu.remove'),
+    onActivate: () => {
+      handleRemove(props.teamMember);
+      hide(); 
+    }
+  }
+];
+
+const emit = defineEmits<{
+  teamMemberRemoved: []
+}>();
+
+const handleButtonClick = (): void => {
+  if (triggerButton.value) {
+    showPopover({
+      targetEl: triggerButton.value,
+      with: {
+        component: ContextMenu,
+        props: {
+          items: menuItems
+        }
+      },
+      align: {
+        vertically: 'below',
+        horizontally: 'right'
+      },
+      width: 'auto'
+    });
+  }
+};
+
+/**
+ * Remove team member by user id
+ *
+ * @param member - team member to remove
+ */
+const handleRemove = async (member: TeamMember): Promise<void> => {
+  const shouldRemove = await confirm(
+    t('noteSettings.team.removeMemberConfirmationTitle'),
+    t('noteSettings.team.removeMemberConfirmationBody')
+  );
+
+  if (shouldRemove) {
+    await removeMemberByUserId(props.noteId, member.user.id);
+    emit('teamMemberRemoved');
+  }
+};
+</script>
+
+<style scoped>
+.more-actions-button {
+  color: var(--ct-text-color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+}
+</style>
+
diff --git a/src/presentation/components/team/Team.vue b/src/presentation/components/team/Team.vue
index b02e5817..e5efa3d1 100644
--- a/src/presentation/components/team/Team.vue
+++ b/src/presentation/components/team/Team.vue
@@ -15,6 +15,11 @@
           :note-id="noteId"
           :team-member="member"
         />
+        <MoreActions 
+          :note-id="noteId"
+          :team-member="member"
+          @teamMemberRemoved="handleMemberRemoved"
+        />
       </template>
 
       <template #left>
@@ -40,6 +45,7 @@ import { Section, Row, Avatar } from '@codexteam/ui/vue';
 import RoleSelect from './RoleSelect.vue';
 import { useI18n } from 'vue-i18n';
 import useNote from '@/application/services/useNote.ts';
+import MoreActions from './MoreActions.vue';
 
 const props = defineProps<{
   /**
@@ -52,6 +58,10 @@ const props = defineProps<{
   noteId: NoteId;
 }>();
 
+const emit = defineEmits<{
+  teamMemberRemoved: [];
+}>();
+
 const { t } = useI18n();
 const { note } = useNote({ id: props.noteId });
 
@@ -79,6 +89,11 @@ const sortedTeam = computed(() => {
     return roleOrder[a.role] - roleOrder[b.role];
   });
 });
+
+// Listen for teamMemberRemoved event from child component and bubble them up
+const handleMemberRemoved = () => {
+  emit('teamMemberRemoved');
+};
 </script>
 
 <style scoped>
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
index 48f624ac..0c86bcb5 100644
--- a/src/presentation/pages/NoteSettings.vue
+++ b/src/presentation/pages/NoteSettings.vue
@@ -73,6 +73,7 @@
             <Team
               :note-id="id"
               :team="noteSettings.team"
+              @teamMemberRemoved="handleTeamMemberRemoved"
             />
             <InviteLink
               :id="props.id"
@@ -221,6 +222,13 @@ onMounted(async () => {
   parentURL.value = getParentURL(parentNote.value?.id);
 });
 
+/**
+ * Handle team member removal by refreshing the note settings
+ */
+async function handleTeamMemberRemoved() {
+  await loadSettings(props.id);
+}
+
 </script>
 
 <style setup lang="postcss" scoped>

From a9d9d4b9aabd9bcd9a686e90b47a4e803eda06bc Mon Sep 17 00:00:00 2001
From: 7eliassen <ivan-smirnov-6909@mail.ru>
Date: Fri, 6 Feb 2026 00:09:11 +0300
Subject: [PATCH 2/6] chore: lint fixes

---
 src/application/services/useNoteSettings.ts   |  4 +--
 src/domain/noteSettings.service.ts            |  2 +-
 src/infrastructure/noteSettings.repository.ts |  1 +
 .../components/team/MoreActions.vue           | 30 +++++++++----------
 src/presentation/components/team/Team.vue     |  4 +--
 src/presentation/pages/NoteSettings.vue       |  2 +-
 6 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/application/services/useNoteSettings.ts b/src/application/services/useNoteSettings.ts
index 1c7c9187..9613b0dd 100644
--- a/src/application/services/useNoteSettings.ts
+++ b/src/application/services/useNoteSettings.ts
@@ -200,9 +200,9 @@ export default function (): UseNoteSettingsComposableState {
    * @param id - Note id
    * @param userId - User id
    */
-  const removeMemberByUserId = async (id: NoteId, userId: UserId) => {
+  const removeMemberByUserId = async (id: NoteId, userId: UserId): Promise<void> => {
     await noteSettingsService.removeMemberByUserId(id, userId);
-  }
+  };
 
   return {
     updateCover,
diff --git a/src/domain/noteSettings.service.ts b/src/domain/noteSettings.service.ts
index 28d39032..1037a7d1 100644
--- a/src/domain/noteSettings.service.ts
+++ b/src/domain/noteSettings.service.ts
@@ -118,7 +118,7 @@ export default class NoteSettingsService {
   public async deleteNote(id: NoteId): Promise<void> {
     return await this.noteSettingsRepository.deleteNote(id);
   }
-  
+
   /**
    * Delete team member by user id
    * @param id - Note id
diff --git a/src/infrastructure/noteSettings.repository.ts b/src/infrastructure/noteSettings.repository.ts
index 6e0003c5..3112f28f 100644
--- a/src/infrastructure/noteSettings.repository.ts
+++ b/src/infrastructure/noteSettings.repository.ts
@@ -77,6 +77,7 @@ export default class NoteSettingsRepository implements NoteSettingsRepositoryInt
    */
   public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<void> {
     const data = { userId };
+
     await this.transport.delete<boolean>(`/note-settings/${id}/team`, data);
   }
 }
diff --git a/src/presentation/components/team/MoreActions.vue b/src/presentation/components/team/MoreActions.vue
index fc77f98b..74d4669d 100644
--- a/src/presentation/components/team/MoreActions.vue
+++ b/src/presentation/components/team/MoreActions.vue
@@ -1,19 +1,18 @@
 <template>
-  <button 
-    ref="triggerButton" 
-    class="more-actions-button" 
+  <button
+    ref="triggerButton"
+    class="more-actions-button"
     @click="handleButtonClick"
   >
-    <Icon 
-      name="EtcVertical" 
+    <Icon
+      name="EtcVertical"
     />
   </button>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Icon, ContextMenu, usePopover, useConfirm } from '@codexteam/ui/vue';
-import type { ContextMenuItem } from '@codexteam/ui/vue';
+import { Icon, ContextMenu, usePopover, useConfirm, type ContextMenuItem } from '@codexteam/ui/vue';
 import { type TeamMember } from '@/domain/entities/Team';
 import { useI18n } from 'vue-i18n';
 import { NoteId } from '@/domain/entities/Note';
@@ -43,13 +42,13 @@ const menuItems: ContextMenuItem[] = [
     title: t('noteSettings.team.ContextMenu.remove'),
     onActivate: () => {
       handleRemove(props.teamMember);
-      hide(); 
-    }
-  }
+      hide();
+    },
+  },
 ];
 
 const emit = defineEmits<{
-  teamMemberRemoved: []
+  teamMemberRemoved: [];
 }>();
 
 const handleButtonClick = (): void => {
@@ -59,14 +58,14 @@ const handleButtonClick = (): void => {
       with: {
         component: ContextMenu,
         props: {
-          items: menuItems
-        }
+          items: menuItems,
+        },
       },
       align: {
         vertically: 'below',
-        horizontally: 'right'
+        horizontally: 'right',
       },
-      width: 'auto'
+      width: 'auto',
     });
   }
 };
@@ -99,4 +98,3 @@ const handleRemove = async (member: TeamMember): Promise<void> => {
   cursor: pointer;
 }
 </style>
-
diff --git a/src/presentation/components/team/Team.vue b/src/presentation/components/team/Team.vue
index e5efa3d1..bcfcf2bb 100644
--- a/src/presentation/components/team/Team.vue
+++ b/src/presentation/components/team/Team.vue
@@ -15,10 +15,10 @@
           :note-id="noteId"
           :team-member="member"
         />
-        <MoreActions 
+        <MoreActions
           :note-id="noteId"
           :team-member="member"
-          @teamMemberRemoved="handleMemberRemoved"
+          @team-member-removed="handleMemberRemoved"
         />
       </template>
 
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
index 0c86bcb5..cbe31641 100644
--- a/src/presentation/pages/NoteSettings.vue
+++ b/src/presentation/pages/NoteSettings.vue
@@ -73,7 +73,7 @@
             <Team
               :note-id="id"
               :team="noteSettings.team"
-              @teamMemberRemoved="handleTeamMemberRemoved"
+              @team-member-removed="handleTeamMemberRemoved"
             />
             <InviteLink
               :id="props.id"

From 2057faa6e311096ae3b992689562fe8e2e163497 Mon Sep 17 00:00:00 2001
From: 7eliassen <ivan-smirnov-6909@mail.ru>
Date: Mon, 9 Feb 2026 22:30:26 +0300
Subject: [PATCH 3/6] chore: small fixes

---
 src/application/i18n/messages/en.json            | 5 +++--
 src/presentation/components/team/MoreActions.vue | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/application/i18n/messages/en.json b/src/application/i18n/messages/en.json
index 78538e17..eed27673 100644
--- a/src/application/i18n/messages/en.json
+++ b/src/application/i18n/messages/en.json
@@ -69,8 +69,9 @@
         "Write": "Writer"
       },
       "removeMemberConfirmationTitle": "Remove member",
-      "removeMemberConfirmationBody": "Are you sure you want to remove user from the team?",
-      "ContextMenu": {
+      "removeMemberConfirmationBody": "Are you sure you want to remove the user from the team?",
+      "contextMenu": {
+        "title": "More actions",
         "remove": "Remove"
       }
     }
diff --git a/src/presentation/components/team/MoreActions.vue b/src/presentation/components/team/MoreActions.vue
index 74d4669d..42b31a08 100644
--- a/src/presentation/components/team/MoreActions.vue
+++ b/src/presentation/components/team/MoreActions.vue
@@ -3,6 +3,7 @@
     ref="triggerButton"
     class="more-actions-button"
     @click="handleButtonClick"
+    :title="t('noteSettings.team.contextMenu.title')"
   >
     <Icon
       name="EtcVertical"
@@ -39,7 +40,7 @@ const triggerButton = ref<HTMLButtonElement>();
 
 const menuItems: ContextMenuItem[] = [
   {
-    title: t('noteSettings.team.ContextMenu.remove'),
+    title: t('noteSettings.team.contextMenu.remove'),
     onActivate: () => {
       handleRemove(props.teamMember);
       hide();

From 98111c00ee1577e697f40e85e7c3dd5fd6bb7531 Mon Sep 17 00:00:00 2001
From: 7eliassen <ivan-smirnov-6909@mail.ru>
Date: Mon, 9 Feb 2026 22:39:15 +0300
Subject: [PATCH 4/6] chore: add error handle

---
 src/presentation/components/team/MoreActions.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/presentation/components/team/MoreActions.vue b/src/presentation/components/team/MoreActions.vue
index 42b31a08..0265f3b2 100644
--- a/src/presentation/components/team/MoreActions.vue
+++ b/src/presentation/components/team/MoreActions.vue
@@ -41,9 +41,13 @@ const triggerButton = ref<HTMLButtonElement>();
 const menuItems: ContextMenuItem[] = [
   {
     title: t('noteSettings.team.contextMenu.remove'),
-    onActivate: () => {
-      handleRemove(props.teamMember);
+    onActivate: async () => {
       hide();
+      try {
+        await handleRemove(props.teamMember);
+      } catch (error) {
+        console.error('Failed to remove team member', error);
+      }
     },
   },
 ];

From 879ff7c7ba3768947f00346e7699a3d2a4529167 Mon Sep 17 00:00:00 2001
From: 7eliassen <ivan-smirnov-6909@mail.ru>
Date: Thu, 12 Feb 2026 23:45:25 +0300
Subject: [PATCH 5/6] refactor: removeTeamMember optimization

---
 src/application/services/useNoteSettings.ts     |  8 +++++---
 src/domain/noteSettings.repository.interface.ts |  3 ++-
 src/domain/noteSettings.service.ts              |  3 ++-
 src/infrastructure/noteSettings.repository.ts   |  6 ++++--
 .../components/team/MoreActions.vue             | 17 ++++++++---------
 src/presentation/components/team/Team.vue       |  8 ++++----
 src/presentation/pages/NoteSettings.vue         | 15 +++++++++++----
 7 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/application/services/useNoteSettings.ts b/src/application/services/useNoteSettings.ts
index 9613b0dd..bd488b3a 100644
--- a/src/application/services/useNoteSettings.ts
+++ b/src/application/services/useNoteSettings.ts
@@ -71,8 +71,9 @@ interface UseNoteSettingsComposableState {
    * Delete team member by user id
    * @param id - Note id
    * @param userId - User id
+   * @returns true if user was removed
    */
-  removeMemberByUserId: (id: NoteId, userId: UserId) => Promise<void>;
+  removeMemberByUserId: (id: NoteId, userId: UserId) => Promise<boolean>;
 }
 
 /**
@@ -199,9 +200,10 @@ export default function (): UseNoteSettingsComposableState {
    * Delete team member by user id
    * @param id - Note id
    * @param userId - User id
+   * @returns true if user was removed
    */
-  const removeMemberByUserId = async (id: NoteId, userId: UserId): Promise<void> => {
-    await noteSettingsService.removeMemberByUserId(id, userId);
+  const removeMemberByUserId = async (id: NoteId, userId: UserId): Promise<boolean> => {
+    return await noteSettingsService.removeMemberByUserId(id, userId);
   };
 
   return {
diff --git a/src/domain/noteSettings.repository.interface.ts b/src/domain/noteSettings.repository.interface.ts
index 856bd512..4ac752d1 100644
--- a/src/domain/noteSettings.repository.interface.ts
+++ b/src/domain/noteSettings.repository.interface.ts
@@ -48,6 +48,7 @@ export default interface NoteSettingsRepositoryInterface {
    * Delete team member by user id
    * @param id - Note id
    * @param userId - User id
+   * @returns true if user was removed
    */
-  removeMemberByUserId(id: NoteId, userId: UserId): Promise<void>;
+  removeMemberByUserId(id: NoteId, userId: UserId): Promise<boolean>;
 }
diff --git a/src/domain/noteSettings.service.ts b/src/domain/noteSettings.service.ts
index 1037a7d1..bede251f 100644
--- a/src/domain/noteSettings.service.ts
+++ b/src/domain/noteSettings.service.ts
@@ -123,8 +123,9 @@ export default class NoteSettingsService {
    * Delete team member by user id
    * @param id - Note id
    * @param userId - User id
+   * @returns true if user was removed
    */
-  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<void> {
+  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<boolean> {
     return await this.noteSettingsRepository.removeMemberByUserId(id, userId);
   }
 }
diff --git a/src/infrastructure/noteSettings.repository.ts b/src/infrastructure/noteSettings.repository.ts
index 3112f28f..72d9f245 100644
--- a/src/infrastructure/noteSettings.repository.ts
+++ b/src/infrastructure/noteSettings.repository.ts
@@ -74,10 +74,12 @@ export default class NoteSettingsRepository implements NoteSettingsRepositoryInt
    * Delete team member by user id
    * @param id - Note id
    * @param userId - User id
+   * @returns true if user was removed
    */
-  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<void> {
+  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<boolean> {
     const data = { userId };
+    const response = await this.transport.delete<number>(`/note-settings/${id}/team`, data);
 
-    await this.transport.delete<boolean>(`/note-settings/${id}/team`, data);
+    return response === userId;
   }
 }
diff --git a/src/presentation/components/team/MoreActions.vue b/src/presentation/components/team/MoreActions.vue
index 0265f3b2..a794598c 100644
--- a/src/presentation/components/team/MoreActions.vue
+++ b/src/presentation/components/team/MoreActions.vue
@@ -1,9 +1,9 @@
 <template>
   <button
     ref="triggerButton"
+    :title="t('noteSettings.team.contextMenu.title')"
     class="more-actions-button"
     @click="handleButtonClick"
-    :title="t('noteSettings.team.contextMenu.title')"
   >
     <Icon
       name="EtcVertical"
@@ -43,17 +43,13 @@ const menuItems: ContextMenuItem[] = [
     title: t('noteSettings.team.contextMenu.remove'),
     onActivate: async () => {
       hide();
-      try {
-        await handleRemove(props.teamMember);
-      } catch (error) {
-        console.error('Failed to remove team member', error);
-      }
+      await handleRemove(props.teamMember);
     },
   },
 ];
 
 const emit = defineEmits<{
-  teamMemberRemoved: [];
+  teamMemberRemoved: [userId: TeamMember['user']['id']];
 }>();
 
 const handleButtonClick = (): void => {
@@ -87,8 +83,11 @@ const handleRemove = async (member: TeamMember): Promise<void> => {
   );
 
   if (shouldRemove) {
-    await removeMemberByUserId(props.noteId, member.user.id);
-    emit('teamMemberRemoved');
+    const isDeleted = await removeMemberByUserId(props.noteId, member.user.id);
+
+    if (isDeleted) {
+      emit('teamMemberRemoved', member.user.id);
+    }
   }
 };
 </script>
diff --git a/src/presentation/components/team/Team.vue b/src/presentation/components/team/Team.vue
index bcfcf2bb..17a35df6 100644
--- a/src/presentation/components/team/Team.vue
+++ b/src/presentation/components/team/Team.vue
@@ -39,7 +39,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { Team, MemberRole } from '@/domain/entities/Team';
+import { Team, MemberRole, TeamMember } from '@/domain/entities/Team';
 import { Note, NoteId } from '@/domain/entities/Note';
 import { Section, Row, Avatar } from '@codexteam/ui/vue';
 import RoleSelect from './RoleSelect.vue';
@@ -59,7 +59,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  teamMemberRemoved: [];
+  teamMemberRemoved: [id: TeamMember['user']['id']];
 }>();
 
 const { t } = useI18n();
@@ -91,8 +91,8 @@ const sortedTeam = computed(() => {
 });
 
 // Listen for teamMemberRemoved event from child component and bubble them up
-const handleMemberRemoved = () => {
-  emit('teamMemberRemoved');
+const handleMemberRemoved = (userId: TeamMember['user']['id']): void => {
+  emit('teamMemberRemoved', userId);
 };
 </script>
 
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
index cbe31641..f2cbccc6 100644
--- a/src/presentation/pages/NoteSettings.vue
+++ b/src/presentation/pages/NoteSettings.vue
@@ -112,6 +112,7 @@ import { getTimeFromNow } from '@/infrastructure/utils/date';
 import InviteLink from '@/presentation/components/noteSettings/InviteLink.vue';
 import useNavbar from '@/application/services/useNavbar';
 import { useRoute } from 'vue-router';
+import { TeamMember } from '@/domain/entities/Team';
 
 const { t } = useI18n();
 
@@ -223,12 +224,18 @@ onMounted(async () => {
 });
 
 /**
- * Handle team member removal by refreshing the note settings
+ * Handle team member removal by refreshing the note settings and removing the member from the team
+ *
+ * @param userId - user id of the member to remove
  */
-async function handleTeamMemberRemoved() {
-  await loadSettings(props.id);
+async function handleTeamMemberRemoved(userId: TeamMember['user']['id']) {
+  if (noteSettings.value !== null) {
+    noteSettings.value = {
+      ...noteSettings.value,
+      team: noteSettings.value.team.filter(member => member.user.id !== userId),
+    };
+  }
 }
-
 </script>
 
 <style setup lang="postcss" scoped>

From ccfe732760f087c2a5d73ec2a7d157991d030789 Mon Sep 17 00:00:00 2001
From: 7eliassen <ivan-smirnov-6909@mail.ru>
Date: Fri, 13 Feb 2026 00:03:59 +0300
Subject: [PATCH 6/6] feat: display whom you want to remove

---
 src/application/i18n/messages/en.json            | 2 +-
 src/presentation/components/team/MoreActions.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/application/i18n/messages/en.json b/src/application/i18n/messages/en.json
index eed27673..5c39816e 100644
--- a/src/application/i18n/messages/en.json
+++ b/src/application/i18n/messages/en.json
@@ -69,7 +69,7 @@
         "Write": "Writer"
       },
       "removeMemberConfirmationTitle": "Remove member",
-      "removeMemberConfirmationBody": "Are you sure you want to remove the user from the team?",
+      "removeMemberConfirmationBody": "Are you sure you want to remove '{username}' from the team?",
       "contextMenu": {
         "title": "More actions",
         "remove": "Remove"
diff --git a/src/presentation/components/team/MoreActions.vue b/src/presentation/components/team/MoreActions.vue
index a794598c..16bda254 100644
--- a/src/presentation/components/team/MoreActions.vue
+++ b/src/presentation/components/team/MoreActions.vue
@@ -79,7 +79,7 @@ const handleButtonClick = (): void => {
 const handleRemove = async (member: TeamMember): Promise<void> => {
   const shouldRemove = await confirm(
     t('noteSettings.team.removeMemberConfirmationTitle'),
-    t('noteSettings.team.removeMemberConfirmationBody')
+    t('noteSettings.team.removeMemberConfirmationBody', { username: member.user.name })
   );
 
   if (shouldRemove) {