From acb81f20e03275e18fefa20a3b5b63490a3a76de Mon Sep 17 00:00:00 2001
From: quangtuanitmo18 <quangtuanitmo18@gmail.com>
Date: Mon, 2 Mar 2026 02:45:32 +0300
Subject: [PATCH 1/7] fet: int api remove event

---
 src/App.vue                               |   3 +
 src/api/events/index.ts                   |  15 ++-
 src/api/events/queries.ts                 |  10 ++
 src/components/event/EventActionsMenu.vue |  93 ++++++++++++++++
 src/components/event/EventHeader.vue      | 126 ++++++++++++++++++++--
 src/components/event/Layout.vue           |  14 +++
 src/components/project/Overview.vue       |  11 +-
 src/i18n/messages/en.json                 |   7 +-
 src/i18n/messages/ru.json                 |   7 +-
 src/main.ts                               |   2 +-
 src/store/modules/events/actionTypes.js   |   5 +
 src/store/modules/events/index.ts         |  18 +++-
 src/styles/base.css                       |   3 +
 13 files changed, 300 insertions(+), 14 deletions(-)
 create mode 100644 src/components/event/EventActionsMenu.vue

diff --git a/src/App.vue b/src/App.vue
index ba923701f..74f643f91 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@
   >
     <router-view />
     <FeedbackButton />
+    <Popover />
   </div>
 </template>
 
@@ -15,11 +16,13 @@ import { setLanguage } from './i18n';
 import { defineComponent } from 'vue';
 import FeedbackButton from './components/utils/FeedbackButton.vue';
 import notifier from 'codex-notifier';
+import { Popover } from '@codexteam/ui/vue';
 
 export default defineComponent({
   name: 'App',
   components: {
     FeedbackButton,
+    Popover,
   },
   computed: {
     /**
diff --git a/src/api/events/index.ts b/src/api/events/index.ts
index 1296e257a..3820fe0f3 100644
--- a/src/api/events/index.ts
+++ b/src/api/events/index.ts
@@ -6,7 +6,8 @@ import {
   QUERY_EVENT,
   QUERY_EVENT_REPETITIONS_PORTION,
   QUERY_PROJECT_DAILY_EVENTS,
-  QUERY_CHART_DATA
+  QUERY_CHART_DATA,
+  MUTATION_REMOVE_EVENT
 } from './queries';
 import * as api from '@/api';
 import type {
@@ -196,3 +197,15 @@ export async function fetchChartData(
     timezoneOffset,
   })).project.event.chartData;
 }
+
+/**
+ * Remove event and all related data (repetitions, daily events)
+ * @param projectId - project event is related to
+ * @param eventId — original event id to remove
+ */
+export async function removeEvent(projectId: string, eventId: string): Promise<boolean> {
+  return (await api.callOld(MUTATION_REMOVE_EVENT, {
+    projectId,
+    eventId,
+  })).removeEvent;
+}
\ No newline at end of file
diff --git a/src/api/events/queries.ts b/src/api/events/queries.ts
index 1c7a7ab61..f8f950fb6 100644
--- a/src/api/events/queries.ts
+++ b/src/api/events/queries.ts
@@ -156,3 +156,13 @@ export const MUTATION_REMOVE_EVENT_ASSIGNEE = `
     }
   }
 `;
+
+// language=GraphQL
+/**
+ * GraphQL Mutation to remove an event and all related data
+ */
+export const MUTATION_REMOVE_EVENT = `
+  mutation removeEvent($projectId: ID!, $eventId: ID!) {
+    removeEvent(projectId: $projectId, eventId: $eventId)
+  }
+`;
diff --git a/src/components/event/EventActionsMenu.vue b/src/components/event/EventActionsMenu.vue
new file mode 100644
index 000000000..07a8f3cf7
--- /dev/null
+++ b/src/components/event/EventActionsMenu.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="event-actions-menu">
+    <button
+      v-for="(item, index) in items"
+      :key="index"
+      class="event-actions-menu__item"
+      :class="{ 'event-actions-menu__item--danger': item.danger }"
+      @click="item.onClick"
+    >
+      <Icon
+        v-if="item.icon"
+        :name="item.icon"
+        class="event-actions-menu__icon"
+      />
+      {{ item.title }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Icon } from '@codexteam/ui/vue';
+import { defineComponent, PropType } from 'vue';
+
+export interface EventActionItem {
+  /** Button label */
+  title: string;
+
+  /** Icon name from @codexteam/icons, e.g. 'Trash', 'Cross' */
+  icon?: string;
+
+  /** When true, renders the item in danger/red colour */
+  danger?: boolean;
+
+  /** Click handler */
+  onClick: () => void;
+}
+
+export default defineComponent({
+  name: 'EventActionsMenu',
+  components: { Icon },
+  props: {
+    /**
+     * List of action items to show in the menu
+     */
+    items: {
+      type: Array as PropType<EventActionItem[]>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style scoped>
+.event-actions-menu {
+  padding: 4px;
+  min-width: 140px;
+}
+
+.event-actions-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 4px 8px;
+  color: var(--color-text-main);
+  font-size: 14px;
+  font-weight: 500;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+
+.event-actions-menu__item:hover {
+  background-color: color-mod(var(--color-text-main) alpha(8%));
+}
+
+.event-actions-menu__item--danger {
+  color: var(--color-indicator-critical);
+}
+
+.event-actions-menu__item--danger:hover {
+  background-color: color-mod(var(--color-indicator-critical) alpha(10%));
+}
+
+.event-actions-menu__icon {
+  flex-shrink: 0;
+  width: 16px;
+}
+</style>
diff --git a/src/components/event/EventHeader.vue b/src/components/event/EventHeader.vue
index 570fc80c6..51303d715 100644
--- a/src/components/event/EventHeader.vue
+++ b/src/components/event/EventHeader.vue
@@ -1,12 +1,22 @@
 <template>
   <div class="event-header">
     <div class="event-layout__container">
-      <span
-        v-if="!loading"
-        class="event-header__date"
-      >
-        {{ formattedFullDate }}
-      </span>
+      <div class="event-header__top-right">
+        <span
+          v-if="!loading"
+          class="event-header__date"
+        >
+          {{ formattedFullDate }}
+        </span>
+
+        <div class="event-header__button event-header__button--more">
+          <Icon
+            class="event-header__button--more-icon"
+            symbol="dots"
+            @click="onMoreClick($event)"
+          />
+        </div>
+      </div>
 
       <div
         v-if="workspace"
@@ -124,12 +134,17 @@ import AssigneeBar from '../utils/AssigneeBar.vue';
 import EntityImage from '../utils/EntityImage.vue';
 
 import { HawkEvent, HawkEventBacktraceFrame } from '@/types/events';
-import { TOGGLE_EVENT_MARK } from '@/store/modules/events/actionTypes';
+import { REMOVE_EVENT, TOGGLE_EVENT_MARK } from '@/store/modules/events/actionTypes';
 import { Project } from '@/types/project';
 import { Workspace } from '@/types/workspaces';
 import { projectBadges } from '../../mixins/projectBadges';
 import ProjectBadge from '../project/ProjectBadge.vue';
 import { JavaScriptAddons } from '@hawk.so/types';
+import { usePopover } from '@codexteam/ui/vue';
+import EventActionsMenu from './EventActionsMenu.vue';
+import { ActionType } from '../utils/ConfirmationWindow/types';
+import notifier from 'codex-notifier';
+import Icon from '../utils/Icon.vue';
 
 export default defineComponent({
   name: 'EventHeader',
@@ -141,6 +156,7 @@ export default defineComponent({
     AssigneeBar,
     EntityImage,
     ProjectBadge,
+    Icon,
   },
   mixins: [projectBadges],
   props: {
@@ -153,6 +169,15 @@ export default defineComponent({
       validator: prop => typeof prop === 'object' || prop === null,
     },
   },
+  emits: ['event-deleted'],
+  setup() {
+    const { showPopover, hide } = usePopover();
+
+    return {
+      showPopover,
+      hidePopover: hide,
+    };
+  },
   data() {
     return {
       /**
@@ -302,6 +327,70 @@ export default defineComponent({
         window.open(this.event.taskManagerItem.url, '_blank', 'noopener');
       }
     },
+
+    /**
+     * Open the "more options" context menu near the 3-dot button
+     *
+     * @param event - native click mouse event
+     */
+    onMoreClick(event: MouseEvent) {
+      this.showPopover({
+        targetEl: event.currentTarget as HTMLElement,
+        with: {
+          component: EventActionsMenu,
+          props: {
+            items: [
+              {
+                title: this.$t('event.remove') as string,
+                icon: 'Trash',
+                danger: true,
+                onClick: () => {
+                  this.hidePopover();
+                  this.confirmRemoveEvent();
+                },
+              },
+            ],
+          },
+        },
+        align: {
+          vertically: 'below',
+          horizontally: 'right',
+        },
+      });
+    },
+
+    /**
+     * Show confirmation dialog and, on confirm, delete the event then navigate back
+     */
+    confirmRemoveEvent() {
+      const { projectId, eventId } = this.$route.params;
+
+      this.$confirm.open({
+        description: this.$t('event.removeConfirmation').toString(),
+        actionType: ActionType.DELETION,
+        continueButtonText: this.$t('event.removeButton').toString(),
+        onConfirm: async () => {
+          try {
+            await this.$store.dispatch(REMOVE_EVENT, {
+              projectId,
+              eventId,
+            });
+            notifier.show({
+              message: this.$t('event.removeSuccess').toString(),
+              style: 'success',
+              time: 5000,
+            });
+            this.$emit('event-deleted');
+          } catch {
+            notifier.show({
+              message: this.$t('event.removeError').toString(),
+              style: 'error',
+              time: 5000,
+            });
+          }
+        },
+      });
+    },
   },
 });
 </script>
@@ -352,8 +441,14 @@ export default defineComponent({
       text-overflow: ellipsis;
     }
 
-    &__date {
+    &__top-right {
+      display: flex;
       float: right;
+      align-items: center;
+      gap: 12px;
+    }
+
+    &__date {
       font-size: 12px;
       line-height: 23px;
     }
@@ -395,6 +490,21 @@ export default defineComponent({
       &:hover {
         color: var(--color-text-main)
       }
+
+      &--more {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        border-radius: 4px;
+      }
+
+      &--more-icon {
+        width: 16px;
+        height: 16px;
+      }
     }
 
     &__nav-bar, &__viewed-by {
diff --git a/src/components/event/Layout.vue b/src/components/event/Layout.vue
index 21972c000..608699c6e 100644
--- a/src/components/event/Layout.vue
+++ b/src/components/event/Layout.vue
@@ -7,6 +7,7 @@
     <EventHeader
       v-if="event || loading"
       :event="event"
+      @event-deleted="onEventDeleted"
     />
     <div class="event-layout__info">
       <div class="event-layout__container">
@@ -45,6 +46,7 @@ export default defineComponent({
     PopupDialog,
     EventHeader,
   },
+  emits: ['event-deleted'],
   data() {
     return {
       /**
@@ -125,6 +127,18 @@ export default defineComponent({
         });
       }
     },
+
+    /**
+     * Called when EventHeader signals that the event was deleted.
+     * and navigates back to the project overview to close the modal.
+     */
+    onEventDeleted() {
+      this.$emit('event-deleted');
+      this.$router.push({
+        name: 'project-overview',
+        params: { projectId: this.projectId },
+      });
+    },
   },
 });
 </script>
diff --git a/src/components/project/Overview.vue b/src/components/project/Overview.vue
index 555058309..95df35496 100644
--- a/src/components/project/Overview.vue
+++ b/src/components/project/Overview.vue
@@ -23,7 +23,12 @@
         <EventsList ref="eventsList" />
       </div>
     </div>
-    <router-view />
+    <router-view v-slot="{ Component }">
+      <component
+        :is="Component"
+        @event-deleted="eventDeleted"
+      />
+    </router-view>
   </div>
 </template>
 
@@ -145,6 +150,10 @@ export default {
         this.$refs.eventsList.reloadDailyEvents();
       }
     },
+
+    async eventDeleted() {
+      this.reloadDailyEvents();
+    },
   },
 };
 </script>
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 24af27a5b..f67bc3e83 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -609,7 +609,12 @@
       "title": "Event Hidden",
       "description": "We received this event but have hidden it because your subscription has expired.",
       "upgradeButton": "Pay and view event"
-    }
+    },
+    "remove": "Remove event",
+    "removeConfirmation": "Are you sure you want to remove this event? All repetitions and related data will also be removed.",
+    "removeButton": "Remove",
+    "removeSuccess": "Event successfully removed",
+    "removeError": "Failed to remove the event"
   },
   "common": {
     "workspace": "Workspace",
diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json
index c8e936963..f50c898b9 100644
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -609,7 +609,12 @@
       "title": "Событие скрыто",
       "description": "Мы получили это событие, но скрыли его, потому что ваша подписка закончилась.",
       "upgradeButton": "Оплатить и посмотреть событие"
-    }
+    },
+    "remove": "Удалить событие",
+    "removeConfirmation": "Вы уверены, что хотите удалить это событие? Все повторения и связанные данные также будут удалены.",
+    "removeButton": "Удалить",
+    "removeSuccess": "Событие успешно удалено",
+    "removeError": "Не удалось удалить событие"
   },
   "common": {
     "workspace": "Воркспейc",
diff --git a/src/main.ts b/src/main.ts
index 8f4ef828c..87cd505e5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,4 @@
+import '@codexteam/ui/styles';
 import './styles/base.css';
 import { createApp } from 'vue';
 import 'virtual:svg-icons-register';
@@ -11,7 +12,6 @@ import * as api from './api/index';
 import { REFRESH_TOKENS } from './store/modules/user/actionTypes';
 import { RESET_STORE } from './store/methodsTypes';
 
-import '@codexteam/ui/styles';
 
 const DEBOUNCE_TIMEOUT = 1000;
 
diff --git a/src/store/modules/events/actionTypes.js b/src/store/modules/events/actionTypes.js
index 82d0f49e1..a6a86594b 100644
--- a/src/store/modules/events/actionTypes.js
+++ b/src/store/modules/events/actionTypes.js
@@ -62,3 +62,8 @@ export const GET_CHART_DATA = 'GET_CHART_DATA';
  * Get list project with dailyEvents portion
  */
 export const FETCH_PROJECT_OVERVIEW = 'FETCH_PROJECT_OVERVIEW';
+
+/**
+ * Remove a single event and all related data
+ */
+export const REMOVE_EVENT = 'REMOVE_EVENT';
diff --git a/src/store/modules/events/index.ts b/src/store/modules/events/index.ts
index 98200153c..38bddebfe 100644
--- a/src/store/modules/events/index.ts
+++ b/src/store/modules/events/index.ts
@@ -9,7 +9,8 @@ import {
   TOGGLE_EVENT_MARK,
   UPDATE_EVENT_ASSIGNEE,
   VISIT_EVENT,
-  GET_CHART_DATA
+  GET_CHART_DATA,
+  REMOVE_EVENT
 } from './actionTypes';
 import { RESET_STORE } from '../../methodsTypes';
 import type { Module } from 'vuex';
@@ -416,6 +417,21 @@ const module: Module<EventsModuleState, RootState> = {
       }
     },
 
+    /**
+     * Remove event and all related data (repetitions, daily events)
+     * @param context - vuex action context (not used)
+     * @param context.commit - standard Vuex commit function
+     * @param payload - vuex action payload
+     * @param payload.projectId - project event is related to
+     * @param payload.eventId - original event id to remove
+     */
+    async [REMOVE_EVENT]({ commit }, { projectId, eventId }: {
+      projectId: string;
+      eventId: string;
+    }): Promise<boolean> {
+      return eventsApi.removeEvent(projectId, eventId);
+    },
+
     /**
      * Resets module state
      * @param commit - standard Vuex commit function
diff --git a/src/styles/base.css b/src/styles/base.css
index 053d44ae5..8a11409e3 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -295,4 +295,7 @@ body .cdx-notify {
   --accent--solid-hover: var(--color-indicator-medium-dark);
   --accent--bg-secondary: color-mod(var(--color-indicator-medium) alpha(10%));
   --accent--text-solid-foreground: var(--color-text-main);
+
+  /* Override codexteam/ui popover z-index to appear above app modals */
+  --z-popover: 10000;
 }

From 4710cc45518dac37e192627da2345350ba1beab0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D1=82=D1=83=D0=B0=D0=BD?= <quangtuanitmo18@gmail.com>
Date: Mon, 2 Mar 2026 17:15:03 +0300
Subject: [PATCH 2/7] minor changes

---
 src/components/event/EventHeader.vue | 30 +++++++++++-----------------
 src/store/modules/events/index.ts    |  2 +-
 src/styles/base.css                  |  4 ++++
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/event/EventHeader.vue b/src/components/event/EventHeader.vue
index 51303d715..a14c9f133 100644
--- a/src/components/event/EventHeader.vue
+++ b/src/components/event/EventHeader.vue
@@ -8,14 +8,11 @@
         >
           {{ formattedFullDate }}
         </span>
-
-        <div class="event-header__button event-header__button--more">
-          <Icon
-            class="event-header__button--more-icon"
-            symbol="dots"
-            @click="onMoreClick($event)"
-          />
-        </div>
+        <Icon
+          class="event-header__button--more"
+          symbol="dots"
+          @click="onMoreClick($event)"
+        />
       </div>
 
       <div
@@ -492,18 +489,15 @@ export default defineComponent({
       }
 
       &--more {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        cursor: pointer;
-        border-radius: 4px;
-      }
-
-      &--more-icon {
         width: 16px;
         height: 16px;
+        opacity: 0.5;
+        cursor: pointer;
+        transition: opacity 0.2s ease-in-out;
+
+        &:hover {
+          opacity: 1;
+        }
       }
     }
 
diff --git a/src/store/modules/events/index.ts b/src/store/modules/events/index.ts
index 38bddebfe..4e9cd8f1c 100644
--- a/src/store/modules/events/index.ts
+++ b/src/store/modules/events/index.ts
@@ -429,7 +429,7 @@ const module: Module<EventsModuleState, RootState> = {
       projectId: string;
       eventId: string;
     }): Promise<boolean> {
-      return eventsApi.removeEvent(projectId, eventId);
+      return await eventsApi.removeEvent(projectId, eventId);
     },
 
     /**
diff --git a/src/styles/base.css b/src/styles/base.css
index 8a11409e3..1373a1195 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -298,4 +298,8 @@ body .cdx-notify {
 
   /* Override codexteam/ui popover z-index to appear above app modals */
   --z-popover: 10000;
+  
+  .codex-popover {
+    padding: 10px;
+  }
 }

From 2f08658c8a53a794db4df139fce851e336bc6f56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D1=82=D1=83=D0=B0=D0=BD?= <quangtuanitmo18@gmail.com>
Date: Tue, 10 Mar 2026 16:44:00 +0300
Subject: [PATCH 3/7] address review comments

---
 src/api/events/index.ts                   | 10 ++-
 src/components/event/EventActionsMenu.vue | 97 ++++-------------------
 src/components/event/EventHeader.vue      | 68 ++++++++++------
 src/store/modules/events/index.ts         | 30 ++++++-
 4 files changed, 95 insertions(+), 110 deletions(-)

diff --git a/src/api/events/index.ts b/src/api/events/index.ts
index 3820fe0f3..c46f0604c 100644
--- a/src/api/events/index.ts
+++ b/src/api/events/index.ts
@@ -203,9 +203,11 @@ export async function fetchChartData(
  * @param projectId - project event is related to
  * @param eventId — original event id to remove
  */
-export async function removeEvent(projectId: string, eventId: string): Promise<boolean> {
-  return (await api.callOld(MUTATION_REMOVE_EVENT, {
+export async function removeEvent(projectId: string, eventId: string): Promise<APIResponse<{ removeEvent: boolean }>> {
+  return await api.call<{ removeEvent: boolean }>(MUTATION_REMOVE_EVENT, {
     projectId,
     eventId,
-  })).removeEvent;
-}
\ No newline at end of file
+  }, undefined, {
+    allowErrors: true,
+  });
+}
diff --git a/src/components/event/EventActionsMenu.vue b/src/components/event/EventActionsMenu.vue
index 07a8f3cf7..7f70ac26c 100644
--- a/src/components/event/EventActionsMenu.vue
+++ b/src/components/event/EventActionsMenu.vue
@@ -1,93 +1,28 @@
 <template>
-  <div class="event-actions-menu">
-    <button
-      v-for="(item, index) in items"
-      :key="index"
-      class="event-actions-menu__item"
-      :class="{ 'event-actions-menu__item--danger': item.danger }"
-      @click="item.onClick"
-    >
-      <Icon
-        v-if="item.icon"
-        :name="item.icon"
-        class="event-actions-menu__icon"
-      />
-      {{ item.title }}
-    </button>
-  </div>
+  <ContextMenu
+    class="event-actions-menu"
+    :items="items"
+  />
 </template>
 
-<script lang="ts">
-import { Icon } from '@codexteam/ui/vue';
-import { defineComponent, PropType } from 'vue';
-
-export interface EventActionItem {
-  /** Button label */
-  title: string;
-
-  /** Icon name from @codexteam/icons, e.g. 'Trash', 'Cross' */
-  icon?: string;
-
-  /** When true, renders the item in danger/red colour */
-  danger?: boolean;
-
-  /** Click handler */
-  onClick: () => void;
+<script setup lang="ts">
+import { ContextMenu, type ContextMenuItem } from '@codexteam/ui/vue';
+
+/**
+ * Event actions menu props
+ */
+interface Props {
+  /**
+   * List of action items to show in the menu
+   */
+  items: ContextMenuItem[];
 }
 
-export default defineComponent({
-  name: 'EventActionsMenu',
-  components: { Icon },
-  props: {
-    /**
-     * List of action items to show in the menu
-     */
-    items: {
-      type: Array as PropType<EventActionItem[]>,
-      required: true,
-    },
-  },
-});
+defineProps<Props>();
 </script>
 
 <style scoped>
 .event-actions-menu {
-  padding: 4px;
   min-width: 140px;
 }
-
-.event-actions-menu__item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  padding: 4px 8px;
-  color: var(--color-text-main);
-  font-size: 14px;
-  font-weight: 500;
-  background: none;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  text-align: left;
-  transition: background-color 0.15s ease;
-}
-
-.event-actions-menu__item:hover {
-  background-color: color-mod(var(--color-text-main) alpha(8%));
-}
-
-.event-actions-menu__item--danger {
-  color: var(--color-indicator-critical);
-}
-
-.event-actions-menu__item--danger:hover {
-  background-color: color-mod(var(--color-indicator-critical) alpha(10%));
-}
-
-.event-actions-menu__icon {
-  flex-shrink: 0;
-  width: 16px;
-}
 </style>
diff --git a/src/components/event/EventHeader.vue b/src/components/event/EventHeader.vue
index a14c9f133..17ed93a69 100644
--- a/src/components/event/EventHeader.vue
+++ b/src/components/event/EventHeader.vue
@@ -9,6 +9,7 @@
           {{ formattedFullDate }}
         </span>
         <Icon
+          v-if="isAdmin"
           class="event-header__button--more"
           symbol="dots"
           @click="onMoreClick($event)"
@@ -137,7 +138,7 @@ import { Workspace } from '@/types/workspaces';
 import { projectBadges } from '../../mixins/projectBadges';
 import ProjectBadge from '../project/ProjectBadge.vue';
 import { JavaScriptAddons } from '@hawk.so/types';
-import { usePopover } from '@codexteam/ui/vue';
+import { ContextMenuItem, usePopover } from '@codexteam/ui/vue';
 import EventActionsMenu from './EventActionsMenu.vue';
 import { ActionType } from '../utils/ConfirmationWindow/types';
 import notifier from 'codex-notifier';
@@ -275,6 +276,13 @@ export default defineComponent({
       return this.$store.getters.getWorkspaceByProjectId(this.projectId);
     },
 
+    /**
+     * Is current user admin in workspace with this project
+     */
+    isAdmin(): boolean {
+      return this.workspace ? this.$store.getters.isCurrentUserAdmin(this.workspace.id) : false;
+    },
+
     /**
      * Computed property that returns formatted full date for event timestamp
      */
@@ -325,28 +333,39 @@ export default defineComponent({
       }
     },
 
+    /**
+     * Build "more options" context menu items
+     */
+    eventActionsMenuItems(): ContextMenuItem[] {
+      return [
+        {
+          type: 'default',
+          title: this.$t('event.remove') as string,
+          icon: 'Trash',
+          onActivate: () => {
+            this.hidePopover();
+            this.confirmRemoveEvent();
+          },
+        },
+      ];
+    },
+
     /**
      * Open the "more options" context menu near the 3-dot button
      *
      * @param event - native click mouse event
      */
     onMoreClick(event: MouseEvent) {
+      if (!this.isAdmin) {
+        return;
+      }
+
       this.showPopover({
         targetEl: event.currentTarget as HTMLElement,
         with: {
           component: EventActionsMenu,
           props: {
-            items: [
-              {
-                title: this.$t('event.remove') as string,
-                icon: 'Trash',
-                danger: true,
-                onClick: () => {
-                  this.hidePopover();
-                  this.confirmRemoveEvent();
-                },
-              },
-            ],
+            items: this.eventActionsMenuItems(),
           },
         },
         align: {
@@ -367,24 +386,27 @@ export default defineComponent({
         actionType: ActionType.DELETION,
         continueButtonText: this.$t('event.removeButton').toString(),
         onConfirm: async () => {
-          try {
-            await this.$store.dispatch(REMOVE_EVENT, {
-              projectId,
-              eventId,
-            });
+          const isRemoved = await this.$store.dispatch(REMOVE_EVENT, {
+            projectId,
+            eventId,
+          });
+
+          if (isRemoved) {
             notifier.show({
               message: this.$t('event.removeSuccess').toString(),
               style: 'success',
               time: 5000,
             });
             this.$emit('event-deleted');
-          } catch {
-            notifier.show({
-              message: this.$t('event.removeError').toString(),
-              style: 'error',
-              time: 5000,
-            });
+
+            return;
           }
+
+          notifier.show({
+            message: this.$t('event.removeError').toString(),
+            style: 'error',
+            time: 5000,
+          });
         },
       });
     },
diff --git a/src/store/modules/events/index.ts b/src/store/modules/events/index.ts
index 4e9cd8f1c..c9e7ecfbf 100644
--- a/src/store/modules/events/index.ts
+++ b/src/store/modules/events/index.ts
@@ -28,6 +28,12 @@ import {
 } from '@/types/events';
 import type { User } from '@/types/user';
 import type { EventChartItem } from '@/types/chart';
+import { useErrorTracker } from '@/hawk';
+
+/**
+ * Error tracking composable
+ */
+const { track } = useErrorTracker();
 
 /**
  * Mutations enum for this module
@@ -425,11 +431,31 @@ const module: Module<EventsModuleState, RootState> = {
      * @param payload.projectId - project event is related to
      * @param payload.eventId - original event id to remove
      */
-    async [REMOVE_EVENT]({ commit }, { projectId, eventId }: {
+    async [REMOVE_EVENT](context, { projectId, eventId }: {
       projectId: string;
       eventId: string;
     }): Promise<boolean> {
-      return await eventsApi.removeEvent(projectId, eventId);
+      const response = await eventsApi.removeEvent(projectId, eventId);
+
+      if (response.errors?.length) {
+        response.errors.forEach((apiError) => {
+          const apiErrorDetails = {
+            message: apiError.message,
+            path: apiError.path ? apiError.path.join('.') : '',
+            code: String(apiError.extensions?.code ?? ''),
+          };
+
+          track(new Error(apiError.message), {
+            projectId,
+            eventId,
+            errorDetails: apiErrorDetails,
+          });
+        });
+
+        return false;
+      }
+
+      return Boolean(response.data?.removeEvent);
     },
 
     /**

From 377a3e4e03444acd6ff450f349c73922b777c2e1 Mon Sep 17 00:00:00 2001
From: Murod Khaydarov <murod.haydarov@gmail.com>
Date: Wed, 15 Apr 2026 23:26:37 +0300
Subject: [PATCH 4/7] Update JavaScript catcher version

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e80a9a5ba..4b46a9eec 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@codexteam/ui": "0.2.0-rc.4",
-    "@hawk.so/javascript": "3.2.20-catcher-ws-conn.8a0320b",
+    "@hawk.so/javascript": "3.2.21",
     "@hawk.so/types": "^0.5.9",
     "axios": "^1.12.2",
     "codex-notifier": "^1.1.2",
diff --git a/yarn.lock b/yarn.lock
index 27fdd2780..e146a6a78 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -649,10 +649,10 @@
     "@eslint/core" "^0.17.0"
     levn "^0.4.1"
 
-"@hawk.so/javascript@3.2.20-catcher-ws-conn.8a0320b":
-  version "3.2.20-catcher-ws-conn.8a0320b"
-  resolved "https://registry.yarnpkg.com/@hawk.so/javascript/-/javascript-3.2.20-catcher-ws-conn.8a0320b.tgz#cd3dfa63d8868ded45aa4f742969ac97f180d81f"
-  integrity sha512-YwRIdvc9/b/OXwQozDobDin0Vo/Kt8jV06/ry1XKr7B6rR8ex4yrR/wmtHnv08vwSggWUXr6JetTmH5MPgqm/A==
+"@hawk.so/javascript@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@hawk.so/javascript/-/javascript-3.2.21.tgz#7ff328a8398780a6eccd56bd83421abb5544b8a1"
+  integrity sha512-iUi0cJuuXUUlzk9x5bYdjn2sUqnfDetgG6+smvN7nFAT73rPWnLqLKoCDN+4xJCAWjt+VYTKHtjH85sDdRBXOQ==
   dependencies:
     error-stack-parser "^2.1.4"
 

From 8077a51f6df2a88fadad8122789db501f653e093 Mon Sep 17 00:00:00 2001
From: Dobrunia Kostrigin <48620984+Dobrunia@users.noreply.github.com>
Date: Thu, 16 Apr 2026 21:46:40 +0300
Subject: [PATCH 5/7] fix: show skeleton when reloading events list

---
 package.json                                 | 2 +-
 src/components/project/EventItemSkeleton.vue | 6 ++++++
 src/components/project/EventsList.vue        | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4b46a9eec..08943e1f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawk.so",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/src/components/project/EventItemSkeleton.vue b/src/components/project/EventItemSkeleton.vue
index 0162ecbc2..bab3ec7e3 100644
--- a/src/components/project/EventItemSkeleton.vue
+++ b/src/components/project/EventItemSkeleton.vue
@@ -26,6 +26,12 @@ export default {
   height: 16px;
   background-color: var(--color-bg-third);
   border-radius: 9px;
+  animation: skeleton-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
 }
 
 .event-item-skeleton {
diff --git a/src/components/project/EventsList.vue b/src/components/project/EventsList.vue
index 86be21b63..c19b52d7b 100644
--- a/src/components/project/EventsList.vue
+++ b/src/components/project/EventsList.vue
@@ -372,6 +372,7 @@ export default {
     reloadDailyEvents() {
       this.dailyEventsNextCursor = null;
       this.noMore = false;
+      this.dailyEvents = [];
       this.loadMoreEvents(true);
     },
     /**

From 73a8e917aafab5d612e2dda77f6f34526a364264 Mon Sep 17 00:00:00 2001
From: quangtuanitmo18 <quangtuanitmo18@gmail.com>
Date: Sat, 25 Apr 2026 20:11:06 +0300
Subject: [PATCH 6/7] address comments review

---
 src/components/event/EventActionsMenu.vue | 106 +++++++++++++++++++---
 src/components/event/EventHeader.vue      |  64 +------------
 src/components/event/Layout.vue           |  14 ---
 src/components/project/Overview.vue       |  22 +++--
 src/i18n/messages/en.json                 |   5 +-
 src/i18n/messages/ru.json                 |   5 +-
 6 files changed, 116 insertions(+), 100 deletions(-)

diff --git a/src/components/event/EventActionsMenu.vue b/src/components/event/EventActionsMenu.vue
index 7f70ac26c..a88db3ec3 100644
--- a/src/components/event/EventActionsMenu.vue
+++ b/src/components/event/EventActionsMenu.vue
@@ -1,24 +1,104 @@
 <template>
   <ContextMenu
     class="event-actions-menu"
-    :items="items"
+    :items="menuItems"
   />
 </template>
 
-<script setup lang="ts">
-import { ContextMenu, type ContextMenuItem } from '@codexteam/ui/vue';
+<script lang="ts">
+import { REMOVE_EVENT } from '@/store/modules/events/actionTypes';
+import { ContextMenu, ContextMenuItem } from '@codexteam/ui/vue';
+import notifier from 'codex-notifier';
+import { defineComponent, PropType } from 'vue';
+import { i18n } from '../../i18n';
+import { ActionType } from '../utils/ConfirmationWindow/types';
 
-/**
- * Event actions menu props
- */
-interface Props {
-  /**
-   * List of action items to show in the menu
-   */
-  items: ContextMenuItem[];
-}
+export default defineComponent({
+  name: 'EventActionsMenu',
+  components: {
+    ContextMenu,
+  },
+  props: {
+    /**
+     * Project id the event belongs to
+     */
+    projectId: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Original event id to remove
+     */
+    eventId: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Callback to close popover
+     */
+    onClose: {
+      type: Function as PropType<() => void>,
+      default: null,
+    },
+  },
+  computed: {
+    /**
+     * Actions available in event context menu
+     */
+    menuItems(): ContextMenuItem[] {
+      return [
+        {
+          type: 'default',
+          title: i18n.global.t('event.remove') as string,
+          icon: 'Trash',
+          onActivate: () => {
+            this.onClose?.();
+            this.confirmRemoveEvent();
+          },
+        },
+      ];
+    },
+  },
+  methods: {
+    /**
+     * Show confirmation dialog and remove event on confirm
+     */
+    confirmRemoveEvent() {
+      this.$confirm.open({
+        description: i18n.global.t('event.removeConfirmation').toString(),
+        actionType: ActionType.DELETION,
+        continueButtonText: i18n.global.t('event.removeButton').toString(),
+        onConfirm: async () => {
+          const isRemoved = await this.$store.dispatch(REMOVE_EVENT, {
+            projectId: this.projectId,
+            eventId: this.eventId,
+          });
+
+          if (isRemoved) {
+            notifier.show({
+              message: i18n.global.t('event.removeSuccess').toString(),
+              style: 'success',
+              time: 5000,
+            });
+            this.$router.push({
+              name: 'project-overview',
+              params: { projectId: this.projectId },
+              query: { reload: String(Date.now()) },
+            });
+
+            return;
+          }
 
-defineProps<Props>();
+          notifier.show({
+            message: i18n.global.t('errors.Something went wrong').toString(),
+            style: 'error',
+            time: 5000,
+          });
+        },
+      });
+    },
+  },
+});
 </script>
 
 <style scoped>
diff --git a/src/components/event/EventHeader.vue b/src/components/event/EventHeader.vue
index 17ed93a69..0b0f4281d 100644
--- a/src/components/event/EventHeader.vue
+++ b/src/components/event/EventHeader.vue
@@ -132,16 +132,14 @@ import AssigneeBar from '../utils/AssigneeBar.vue';
 import EntityImage from '../utils/EntityImage.vue';
 
 import { HawkEvent, HawkEventBacktraceFrame } from '@/types/events';
-import { REMOVE_EVENT, TOGGLE_EVENT_MARK } from '@/store/modules/events/actionTypes';
+import { TOGGLE_EVENT_MARK } from '@/store/modules/events/actionTypes';
 import { Project } from '@/types/project';
 import { Workspace } from '@/types/workspaces';
 import { projectBadges } from '../../mixins/projectBadges';
 import ProjectBadge from '../project/ProjectBadge.vue';
 import { JavaScriptAddons } from '@hawk.so/types';
-import { ContextMenuItem, usePopover } from '@codexteam/ui/vue';
+import { usePopover } from '@codexteam/ui/vue';
 import EventActionsMenu from './EventActionsMenu.vue';
-import { ActionType } from '../utils/ConfirmationWindow/types';
-import notifier from 'codex-notifier';
 import Icon from '../utils/Icon.vue';
 
 export default defineComponent({
@@ -167,7 +165,6 @@ export default defineComponent({
       validator: prop => typeof prop === 'object' || prop === null,
     },
   },
-  emits: ['event-deleted'],
   setup() {
     const { showPopover, hide } = usePopover();
 
@@ -333,23 +330,6 @@ export default defineComponent({
       }
     },
 
-    /**
-     * Build "more options" context menu items
-     */
-    eventActionsMenuItems(): ContextMenuItem[] {
-      return [
-        {
-          type: 'default',
-          title: this.$t('event.remove') as string,
-          icon: 'Trash',
-          onActivate: () => {
-            this.hidePopover();
-            this.confirmRemoveEvent();
-          },
-        },
-      ];
-    },
-
     /**
      * Open the "more options" context menu near the 3-dot button
      *
@@ -365,7 +345,9 @@ export default defineComponent({
         with: {
           component: EventActionsMenu,
           props: {
-            items: this.eventActionsMenuItems(),
+            projectId: this.projectId,
+            eventId: this.$route.params.eventId,
+            onClose: () => this.hidePopover(),
           },
         },
         align: {
@@ -374,42 +356,6 @@ export default defineComponent({
         },
       });
     },
-
-    /**
-     * Show confirmation dialog and, on confirm, delete the event then navigate back
-     */
-    confirmRemoveEvent() {
-      const { projectId, eventId } = this.$route.params;
-
-      this.$confirm.open({
-        description: this.$t('event.removeConfirmation').toString(),
-        actionType: ActionType.DELETION,
-        continueButtonText: this.$t('event.removeButton').toString(),
-        onConfirm: async () => {
-          const isRemoved = await this.$store.dispatch(REMOVE_EVENT, {
-            projectId,
-            eventId,
-          });
-
-          if (isRemoved) {
-            notifier.show({
-              message: this.$t('event.removeSuccess').toString(),
-              style: 'success',
-              time: 5000,
-            });
-            this.$emit('event-deleted');
-
-            return;
-          }
-
-          notifier.show({
-            message: this.$t('event.removeError').toString(),
-            style: 'error',
-            time: 5000,
-          });
-        },
-      });
-    },
   },
 });
 </script>
diff --git a/src/components/event/Layout.vue b/src/components/event/Layout.vue
index 608699c6e..21972c000 100644
--- a/src/components/event/Layout.vue
+++ b/src/components/event/Layout.vue
@@ -7,7 +7,6 @@
     <EventHeader
       v-if="event || loading"
       :event="event"
-      @event-deleted="onEventDeleted"
     />
     <div class="event-layout__info">
       <div class="event-layout__container">
@@ -46,7 +45,6 @@ export default defineComponent({
     PopupDialog,
     EventHeader,
   },
-  emits: ['event-deleted'],
   data() {
     return {
       /**
@@ -127,18 +125,6 @@ export default defineComponent({
         });
       }
     },
-
-    /**
-     * Called when EventHeader signals that the event was deleted.
-     * and navigates back to the project overview to close the modal.
-     */
-    onEventDeleted() {
-      this.$emit('event-deleted');
-      this.$router.push({
-        name: 'project-overview',
-        params: { projectId: this.projectId },
-      });
-    },
   },
 });
 </script>
diff --git a/src/components/project/Overview.vue b/src/components/project/Overview.vue
index 95df35496..d72468d81 100644
--- a/src/components/project/Overview.vue
+++ b/src/components/project/Overview.vue
@@ -24,10 +24,7 @@
       </div>
     </div>
     <router-view v-slot="{ Component }">
-      <component
-        :is="Component"
-        @event-deleted="eventDeleted"
-      />
+      <component :is="Component" />
     </router-view>
   </div>
 </template>
@@ -89,6 +86,19 @@ export default {
       return this.workspace?.isBlocked;
     },
   },
+  watch: {
+    /**
+     * Refresh list when route gets a new reload token
+     *
+     * @param newValue
+     * @param oldValue
+     */
+    '$route.query.reload'(newValue, oldValue) {
+      if (newValue && newValue !== oldValue) {
+        this.reloadDailyEvents();
+      }
+    },
+  },
 
   /**
    * Vue created hook
@@ -150,10 +160,6 @@ export default {
         this.$refs.eventsList.reloadDailyEvents();
       }
     },
-
-    async eventDeleted() {
-      this.reloadDailyEvents();
-    },
   },
 };
 </script>
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index da6e00cf9..9e26675cb 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -615,10 +615,9 @@
       "upgradeButton": "Pay and view event"
     },
     "remove": "Remove event",
-    "removeConfirmation": "Are you sure you want to remove this event? All repetitions and related data will also be removed.",
+    "removeConfirmation": "Are you sure you want to remove this event? All related data will also be removed.",
     "removeButton": "Remove",
-    "removeSuccess": "Event successfully removed",
-    "removeError": "Failed to remove the event"
+    "removeSuccess": "Event successfully removed"
   },
   "common": {
     "workspace": "Workspace",
diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json
index 220a7fadd..7b5e16c4e 100644
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -615,10 +615,9 @@
       "upgradeButton": "Оплатить и посмотреть событие"
     },
     "remove": "Удалить событие",
-    "removeConfirmation": "Вы уверены, что хотите удалить это событие? Все повторения и связанные данные также будут удалены.",
+    "removeConfirmation": "Вы уверены, что хотите удалить это событие? Все связанные данные также будут удалены.",
     "removeButton": "Удалить",
-    "removeSuccess": "Событие успешно удалено",
-    "removeError": "Не удалось удалить событие"
+    "removeSuccess": "Событие успешно удалено"
   },
   "common": {
     "workspace": "Воркспейc",

From 40598a5644bd51f180aca122909f244f4b0c655b Mon Sep 17 00:00:00 2001
From: quangtuanitmo18 <quangtuanitmo18@gmail.com>
Date: Wed, 29 Apr 2026 23:08:26 +0300
Subject: [PATCH 7/7] address commit review

---
 src/components/event/EventActionsMenu.vue | 161 +++++++++++-----------
 src/components/event/EventHeader.vue      |  22 +--
 src/components/project/Overview.vue       |   4 +-
 3 files changed, 85 insertions(+), 102 deletions(-)

diff --git a/src/components/event/EventActionsMenu.vue b/src/components/event/EventActionsMenu.vue
index a88db3ec3..6c96c395f 100644
--- a/src/components/event/EventActionsMenu.vue
+++ b/src/components/event/EventActionsMenu.vue
@@ -5,99 +5,94 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { REMOVE_EVENT } from '@/store/modules/events/actionTypes';
-import { ContextMenu, ContextMenuItem } from '@codexteam/ui/vue';
+import { ContextMenu, type ContextMenuItem } from '@codexteam/ui/vue';
 import notifier from 'codex-notifier';
-import { defineComponent, PropType } from 'vue';
+import { computed, getCurrentInstance } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 import { i18n } from '../../i18n';
 import { ActionType } from '../utils/ConfirmationWindow/types';
 
-export default defineComponent({
-  name: 'EventActionsMenu',
-  components: {
-    ContextMenu,
-  },
-  props: {
-    /**
-     * Project id the event belongs to
-     */
-    projectId: {
-      type: String,
-      required: true,
-    },
-    /**
-     * Original event id to remove
-     */
-    eventId: {
-      type: String,
-      required: true,
-    },
-    /**
-     * Callback to close popover
-     */
-    onClose: {
-      type: Function as PropType<() => void>,
-      default: null,
-    },
-  },
-  computed: {
-    /**
-     * Actions available in event context menu
-     */
-    menuItems(): ContextMenuItem[] {
-      return [
-        {
-          type: 'default',
-          title: i18n.global.t('event.remove') as string,
-          icon: 'Trash',
-          onActivate: () => {
-            this.onClose?.();
-            this.confirmRemoveEvent();
-          },
-        },
-      ];
-    },
-  },
-  methods: {
-    /**
-     * Show confirmation dialog and remove event on confirm
-     */
-    confirmRemoveEvent() {
-      this.$confirm.open({
-        description: i18n.global.t('event.removeConfirmation').toString(),
-        actionType: ActionType.DELETION,
-        continueButtonText: i18n.global.t('event.removeButton').toString(),
-        onConfirm: async () => {
-          const isRemoved = await this.$store.dispatch(REMOVE_EVENT, {
-            projectId: this.projectId,
-            eventId: this.eventId,
-          });
+interface Props {
+  /**
+   * Project id the event belongs to
+   */
+  projectId: string;
+  /**
+   * Original event id to remove
+   */
+  eventId: string;
+  /**
+   * Callback to close popover
+   */
+  onClose?: () => void;
+}
+
+const props = defineProps<Props>();
 
-          if (isRemoved) {
-            notifier.show({
-              message: i18n.global.t('event.removeSuccess').toString(),
-              style: 'success',
-              time: 5000,
-            });
-            this.$router.push({
-              name: 'project-overview',
-              params: { projectId: this.projectId },
-              query: { reload: String(Date.now()) },
-            });
+const store = useStore();
+const router = useRouter();
+const instance = getCurrentInstance();
 
-            return;
-          }
+/**
+ * Show confirmation dialog and remove event on confirm
+ */
+function confirmRemoveEvent(): void {
+  if (!instance?.appContext.config.globalProperties.$confirm) {
+    return;
+  }
 
-          notifier.show({
-            message: i18n.global.t('errors.Something went wrong').toString(),
-            style: 'error',
-            time: 5000,
-          });
-        },
+  instance.appContext.config.globalProperties.$confirm.open({
+    description: i18n.global.t('event.removeConfirmation').toString(),
+    actionType: ActionType.DELETION,
+    continueButtonText: i18n.global.t('event.removeButton').toString(),
+    onConfirm: async () => {
+      const isRemoved = await store.dispatch(REMOVE_EVENT, {
+        projectId: props.projectId,
+        eventId: props.eventId,
       });
+
+      if (isRemoved) {
+        notifier.show({
+          message: i18n.global.t('event.removeSuccess').toString(),
+          style: 'success',
+          time: 5000,
+        });
+        router.push({
+          name: 'project-overview',
+          params: { projectId: props.projectId },
+          query: { reload: String(Date.now()) },
+        });
+
+        return;
+      }
+
+      notifier.show({
+        message: i18n.global.t('errors.Something went wrong').toString(),
+        style: 'error',
+        time: 5000,
+      });
+    },
+  });
+}
+
+/**
+ * Actions available in event context menu
+ */
+const menuItems = computed<ContextMenuItem[]>(() => {
+  return [
+    {
+      type: 'default',
+      title: i18n.global.t('event.remove') as string,
+      icon: 'Trash',
+      onActivate: () => {
+        props.onClose?.();
+        confirmRemoveEvent();
+      },
     },
-  },
+  ];
 });
 </script>
 
diff --git a/src/components/event/EventHeader.vue b/src/components/event/EventHeader.vue
index 0b0f4281d..fa09e796b 100644
--- a/src/components/event/EventHeader.vue
+++ b/src/components/event/EventHeader.vue
@@ -8,11 +8,12 @@
         >
           {{ formattedFullDate }}
         </span>
-        <Icon
+        <CdxButton
           v-if="isAdmin"
           class="event-header__button--more"
-          symbol="dots"
-          @click="onMoreClick($event)"
+          secondary
+          icon="EtcHorisontal"
+          @click="onMoreClick"
         />
       </div>
 
@@ -138,13 +139,14 @@ import { Workspace } from '@/types/workspaces';
 import { projectBadges } from '../../mixins/projectBadges';
 import ProjectBadge from '../project/ProjectBadge.vue';
 import { JavaScriptAddons } from '@hawk.so/types';
-import { usePopover } from '@codexteam/ui/vue';
+import { Button as CdxButton, usePopover } from '@codexteam/ui/vue';
 import EventActionsMenu from './EventActionsMenu.vue';
 import Icon from '../utils/Icon.vue';
 
 export default defineComponent({
   name: 'EventHeader',
   components: {
+    CdxButton,
     TabBar,
     ViewedBy,
     UiButton,
@@ -152,7 +154,6 @@ export default defineComponent({
     AssigneeBar,
     EntityImage,
     ProjectBadge,
-    Icon,
   },
   mixins: [projectBadges],
   props: {
@@ -456,17 +457,6 @@ export default defineComponent({
         color: var(--color-text-main)
       }
 
-      &--more {
-        width: 16px;
-        height: 16px;
-        opacity: 0.5;
-        cursor: pointer;
-        transition: opacity 0.2s ease-in-out;
-
-        &:hover {
-          opacity: 1;
-        }
-      }
     }
 
     &__nav-bar, &__viewed-by {
diff --git a/src/components/project/Overview.vue b/src/components/project/Overview.vue
index d72468d81..41c850ead 100644
--- a/src/components/project/Overview.vue
+++ b/src/components/project/Overview.vue
@@ -23,9 +23,7 @@
         <EventsList ref="eventsList" />
       </div>
     </div>
-    <router-view v-slot="{ Component }">
-      <component :is="Component" />
-    </router-view>
+    <router-view />
   </div>
 </template>