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/2] 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/2] 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"