From 2ffcc62171f14221a3ad1de4789ea75e488adbea Mon Sep 17 00:00:00 2001
From: Churbanov Valery <vc.churbanov@yandex.com>
Date: Tue, 6 Jan 2026 08:29:58 +0300
Subject: [PATCH] [FEATURE] Clear events automatically

---
 .../settings-page-content.vue                 |  36 +++-
 .../lib/use-events/auto-delete-events.ts      | 116 ++++++++++++
 src/shared/lib/use-events/use-events.ts       |   1 -
 src/shared/stores/events/events-store.ts      |   2 +
 .../stores/settings/local-storage-actions.ts  |  24 +++
 src/shared/stores/settings/settings-store.ts  |  16 ++
 src/shared/types/local-storage.ts             |   1 +
 src/shared/ui/dropdown-menu/dropdown-menu.vue | 173 ++++++++++++++++++
 src/shared/ui/dropdown-menu/index.ts          |   3 +
 src/shared/ui/index.ts                        |   2 +
 src/shared/ui/select-control/index.ts         |   3 +
 .../ui/select-control/select-control.vue      | 140 ++++++++++++++
 12 files changed, 512 insertions(+), 5 deletions(-)
 create mode 100644 src/shared/lib/use-events/auto-delete-events.ts
 create mode 100644 src/shared/ui/dropdown-menu/dropdown-menu.vue
 create mode 100644 src/shared/ui/dropdown-menu/index.ts
 create mode 100644 src/shared/ui/select-control/index.ts
 create mode 100644 src/shared/ui/select-control/select-control.vue

diff --git a/src/pages/settings/ui/settings-page-content/settings-page-content.vue b/src/pages/settings/ui/settings-page-content/settings-page-content.vue
index b387cdc7..730d8e37 100644
--- a/src/pages/settings/ui/settings-page-content/settings-page-content.vue
+++ b/src/pages/settings/ui/settings-page-content/settings-page-content.vue
@@ -3,15 +3,28 @@ import { useTitle } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { THEME_MODES, useSettingsStore } from '@/shared/stores'
-import { BadgeNumber, IconSvg } from '@/shared/ui'
+import { BadgeNumber, IconSvg, SelectControl } from '@/shared/ui'
 
 const settingsStore = useSettingsStore()
-const { changeTheme, changeNavbar, changeEventCountsVisibility, changeActiveCodeEditor } =
-  settingsStore
-const { themeType, isFixedHeader, isVisibleEventCounts, codeEditor } = storeToRefs(settingsStore)
+const {
+  changeTheme,
+  changeNavbar,
+  changeEventCountsVisibility,
+  setAutoDeleteEventsTime,
+  changeActiveCodeEditor
+} = settingsStore
+const { themeType, isFixedHeader, isVisibleEventCounts, autoDeleteEventsTime, codeEditor } =
+  storeToRefs(settingsStore)
 
 const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK)
 
+const deleteEventsAfter = computed<string>({
+  get: () => (autoDeleteEventsTime.value === 'none' ? 'none' : String(autoDeleteEventsTime.value)),
+  set: (val) => {
+    setAutoDeleteEventsTime(val)
+  }
+})
+
 // TODO: add throttle
 const changeCodeEditor = (event: Event) => {
   const editor = (event.target as HTMLInputElement).value
@@ -114,6 +127,21 @@ useTitle('Settings | Buggregator')
       </div>
     </div>
 
+    <div class="settings-page-content__title">
+      Delete Events After:
+    </div>
+
+    <SelectControl
+      v-model="deleteEventsAfter"
+      name="delete_events_after"
+      :options="[
+        { value: 'none', text: 'No' },
+        { value: '1', text: '1 min' },
+        { value: '5', text: '5 min' },
+        { value: '10', text: '10 min' }
+      ]"
+    />
+
     <div class="settings-page-content__title">
       Code Editor Open Link:
     </div>
diff --git a/src/shared/lib/use-events/auto-delete-events.ts b/src/shared/lib/use-events/auto-delete-events.ts
new file mode 100644
index 00000000..63b9b96d
--- /dev/null
+++ b/src/shared/lib/use-events/auto-delete-events.ts
@@ -0,0 +1,116 @@
+import { storeToRefs } from "pinia";
+import { watch } from "vue";
+import { useEventsStore, useSettingsStore } from "../../stores";
+import type { EventId } from "../../types";
+import { useEventsApi } from "./use-events-api";
+
+type AutoDeleteTime = number | "none";
+
+const autoDeleteTimers = new Map<EventId, ReturnType<typeof setTimeout>>();
+let autoDeleteInitialized = false;
+
+const toAutoDeleteMs = (val: AutoDeleteTime): number | null => {
+  if (val === "none") return null;
+  return val * 60 * 1000;
+};
+
+const clearAutoDeleteTimer = (eventId: EventId) => {
+  const timer = autoDeleteTimers.get(eventId);
+  if (!timer) return;
+  globalThis.clearTimeout(timer);
+  autoDeleteTimers.delete(eventId);
+};
+
+const clearAllAutoDeleteTimers = () => {
+  autoDeleteTimers.forEach((timer) => globalThis.clearTimeout(timer));
+  autoDeleteTimers.clear();
+};
+
+export const ensureAutoDeleteWatcher = () => {
+  if (autoDeleteInitialized) return;
+  autoDeleteInitialized = true;
+
+  const eventsStore = useEventsStore();
+  const settingsStore = useSettingsStore();
+  const eventsApi = useEventsApi();
+
+  const { events, lockedIds } = storeToRefs(eventsStore);
+  const { autoDeleteEventsTime } = storeToRefs(settingsStore);
+
+  const schedule = (eventId: EventId) => {
+    const ms = toAutoDeleteMs(autoDeleteEventsTime.value);
+    if (ms === null || autoDeleteTimers.has(eventId)) return;
+
+    const timer = globalThis.setTimeout(() => {
+      autoDeleteTimers.delete(eventId);
+
+      const locked = lockedIds.value ?? [];
+      if (locked.includes(eventId)) return;
+
+      void eventsApi.removeById(eventId);
+    }, ms);
+
+    autoDeleteTimers.set(eventId, timer);
+  };
+
+  const rescheduleAll = () => {
+    clearAllAutoDeleteTimers();
+
+    const ms = toAutoDeleteMs(autoDeleteEventsTime.value);
+    if (ms === null) return;
+
+    events.value.forEach(({ uuid }) => {
+      schedule(uuid);
+    });
+  };
+
+  const syncTimers = (currentIds: Set<EventId>, prevIds: Set<EventId>) => {
+    prevIds.forEach((id) => {
+      if (!currentIds.has(id)) {
+        clearAutoDeleteTimer(id);
+      }
+    });
+
+    if (toAutoDeleteMs(autoDeleteEventsTime.value) === null) return;
+
+    currentIds.forEach((id) => {
+      if (!prevIds.has(id)) {
+        schedule(id);
+      }
+    });
+  };
+
+  watch(
+    autoDeleteEventsTime,
+    () => {
+      rescheduleAll();
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => events.value.map(({ uuid }) => uuid),
+    (current, prev) => {
+      const currentIds = new Set(current);
+      const prevIds = new Set(prev ?? []);
+
+      syncTimers(currentIds, prevIds);
+    },
+  );
+
+  watch(
+    () => lockedIds.value.slice(),
+    (current, prev) => {
+      const currentIds = new Set(current);
+      const prevIds = new Set(prev ?? []);
+
+      const eventsIds = new Set(events.value.map(({ uuid }) => uuid));
+      const unlockedIds = new Set(
+        [...prevIds].filter((id) => !currentIds.has(id) && eventsIds.has(id)),
+      );
+
+      syncTimers(currentIds, prevIds);
+      syncTimers(unlockedIds, new Set<EventId>());
+    },
+  );
+};
diff --git a/src/shared/lib/use-events/use-events.ts b/src/shared/lib/use-events/use-events.ts
index 040ccec8..2457ac96 100644
--- a/src/shared/lib/use-events/use-events.ts
+++ b/src/shared/lib/use-events/use-events.ts
@@ -10,7 +10,6 @@ import { useApiTransport } from "../use-api-transport";
 import { normalizeUnknownEvent } from "./normalize-unknown-event";
 import { type TUseEventsApi, useEventsApi } from "./use-events-api";
 
-
 type TUseEvents = () => {
   normalizeUnknownEvent: (event: ServerEvent<unknown>) => NormalizedEvent<unknown>
   events: TUseEventsApi
diff --git a/src/shared/stores/events/events-store.ts b/src/shared/stores/events/events-store.ts
index 82861aed..930d798a 100644
--- a/src/shared/stores/events/events-store.ts
+++ b/src/shared/stores/events/events-store.ts
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { PAGE_TYPES} from "../../constants";
+import { ensureAutoDeleteWatcher } from "../../lib/use-events/auto-delete-events";
 import {useSettings} from "../../lib/use-settings";
 import {
   type EventId,
@@ -79,6 +80,7 @@ export const useEventsStore = defineStore("eventsStore", {
     async initialize (): Promise<void> {
       const {api: { getProjects }} = useSettings();
       this.initActiveProjectKey();
+      ensureAutoDeleteWatcher();
 
       try {
         const { data } = await getProjects();
diff --git a/src/shared/stores/settings/local-storage-actions.ts b/src/shared/stores/settings/local-storage-actions.ts
index cac56fd9..4f6d650d 100644
--- a/src/shared/stores/settings/local-storage-actions.ts
+++ b/src/shared/stores/settings/local-storage-actions.ts
@@ -70,6 +70,30 @@ export const setStoredEventsCountVisibility = (state: boolean) => {
   window?.localStorage?.setItem(LocalStorageKeys.EventCounts, String(state));
 }
 
+export const getStoredAutoDeleteEventsTime = (): number | 'none' => {
+  const raw = window?.localStorage?.getItem(
+    LocalStorageKeys.AutoDeleteEventsTime,
+  );
+  if (raw === null) {
+    return 'none';
+  }
+  const value = Number(raw);
+  return Number.isFinite(value) && value > 0 ? value : 'none';
+};
+
+export const setStoredAutoDeleteEventsTime = (minutes: number | 'none'): void => {
+  if (minutes === 'none') {
+    window?.localStorage?.removeItem(
+      LocalStorageKeys.AutoDeleteEventsTime,
+    );
+    return;
+  }
+
+  window?.localStorage?.setItem(
+    LocalStorageKeys.AutoDeleteEventsTime,
+    String(minutes),
+  );
+};
 
 export const getStoredPrimaryCodeEditor = (): string => {
   const storedCodeEditor = window?.localStorage?.getItem(LocalStorageKeys.CodeEditor);
diff --git a/src/shared/stores/settings/settings-store.ts b/src/shared/stores/settings/settings-store.ts
index 51cc2180..7312f7b3 100644
--- a/src/shared/stores/settings/settings-store.ts
+++ b/src/shared/stores/settings/settings-store.ts
@@ -7,6 +7,8 @@ import {
   getStoredFixedHeader,
   getStoredActiveTheme,
   setStoredEventsCountVisibility,
+  getStoredAutoDeleteEventsTime,
+  setStoredAutoDeleteEventsTime,
   setStoredFixedHeader,
   setStoredActiveTheme,
   getStoredPrimaryCodeEditor,
@@ -23,6 +25,7 @@ export const useSettingsStore = defineStore("settingsStore", {
     themeType: getStoredActiveTheme(),
     isFixedHeader: getStoredFixedHeader(),
     isVisibleEventCounts: getStoredEventsCountVisibility(),
+    autoDeleteEventsTime: getStoredAutoDeleteEventsTime(),
     availableEvents: [] as EventType[],
   }),
   getters: {
@@ -72,6 +75,19 @@ export const useSettingsStore = defineStore("settingsStore", {
 
       setStoredEventsCountVisibility(this.isVisibleEventCounts)
     },
+    setAutoDeleteEventsTime(value: string | number | 'none') {
+      const normalized =
+        value === 'none'
+          ? 'none'
+          : Number(value);
+
+      this.autoDeleteEventsTime =
+        normalized === 'none' || !Number.isFinite(normalized) || normalized <= 0
+          ? 'none'
+          : normalized;
+
+      setStoredAutoDeleteEventsTime(this.autoDeleteEventsTime);
+    },
     changeActiveCodeEditor(editor: string) {
       this.codeEditor = editor;
 
diff --git a/src/shared/types/local-storage.ts b/src/shared/types/local-storage.ts
index f0bc720d..ecb48e05 100644
--- a/src/shared/types/local-storage.ts
+++ b/src/shared/types/local-storage.ts
@@ -3,6 +3,7 @@ export enum LocalStorageKeys {
   Theme = "theme",
   Navbar = "navbar",
   EventCounts = "event_counts",
+  AutoDeleteEventsTime = "autodelete_events_time_in_minutes",
   CodeEditor = "code_editor",
   Token = "token",
 }
diff --git a/src/shared/ui/dropdown-menu/dropdown-menu.vue b/src/shared/ui/dropdown-menu/dropdown-menu.vue
new file mode 100644
index 00000000..ac64f3d2
--- /dev/null
+++ b/src/shared/ui/dropdown-menu/dropdown-menu.vue
@@ -0,0 +1,173 @@
+<template>
+  <div
+    ref="rootEl"
+    class="relative"
+  >
+    <div
+      :id="listboxId"
+      class="absolute z-20 mt-1 w-full rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+      role="listbox"
+      :aria-labelledby="labelledBy"
+    >
+      <button
+        v-for="(opt, index) in options"
+        :key="String(opt.value)"
+        :ref="(el) => setOptionRef(el, index)"
+        type="button"
+        class="flex w-full items-center px-4 py-2 text-left text-base text-gray-900 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-100 dark:hover:bg-gray-700"
+        role="option"
+        :aria-selected="opt.value === modelValue"
+        :disabled="!!opt.disabled"
+        :class="{
+          'rounded-t-xl': isFirstOption(opt),
+          'rounded-b-xl': isLastOption(opt)
+        }"
+        @click="selectOption(opt.value)"
+      >
+        <span>{{ opt.text }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, type ComponentPublicInstance } from 'vue'
+
+type DropdownOption = {
+  value: string
+  text: string
+  disabled?: boolean
+}
+
+const props = defineProps<{
+  modelValue: string
+  options: DropdownOption[]
+  labelledBy?: string
+  listboxId: string
+  ignoreElements?: Array<HTMLElement | null>
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', value: string): void
+  (e: 'close'): void
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+const optionEls = ref<Array<HTMLElement | null>>([])
+
+const selectOption = (value: string) => {
+  emit('select', value)
+  emit('close')
+}
+
+const setOptionRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+  const node = el && '$el' in el ? (el as ComponentPublicInstance).$el : el
+  optionEls.value[index] = node as HTMLElement | null
+}
+
+const isFirstOption = (opt: DropdownOption) => {
+  return props.options[0]?.value === opt.value
+}
+
+const isLastOption = (opt: DropdownOption) => {
+  return props.options[props.options.length - 1]?.value === opt.value
+}
+
+const getNextEnabledIndex = (start: number, direction: 1 | -1) => {
+  const total = props.options.length
+  let idx = start
+  for (let i = 0; i < total; i += 1) {
+    idx = (idx + direction + total) % total
+    if (!props.options[idx]?.disabled) return idx
+  }
+  return -1
+}
+
+const focusOptionAt = (index: number) => {
+  const el = optionEls.value[index]
+  if (el) {
+    el.focus()
+  }
+}
+
+const focusFirstEnabled = () => {
+  const idx = props.options.findIndex((opt) => !opt.disabled)
+  if (idx >= 0) {
+    focusOptionAt(idx)
+  }
+}
+
+const focusLastEnabled = () => {
+  for (let i = props.options.length - 1; i >= 0; i -= 1) {
+    if (!props.options[i]?.disabled) {
+      focusOptionAt(i)
+      break
+    }
+  }
+}
+
+const onNavigate = (direction: 1 | -1) => {
+  const activeIndex = optionEls.value.findIndex((el) => el === document.activeElement)
+  if (activeIndex === -1) {
+    if (direction === 1) focusFirstEnabled()
+    else focusLastEnabled()
+    return
+  }
+  const nextIndex = getNextEnabledIndex(activeIndex, direction)
+  if (nextIndex >= 0) {
+    focusOptionAt(nextIndex)
+  }
+}
+
+const isIgnoredTarget = (target: Node) => {
+  return (props.ignoreElements || []).some((el) => el?.contains(target))
+}
+
+const onClickOutside = (e: PointerEvent) => {
+  const target = e.target as Node | null
+  if (!rootEl.value || !target) return
+  if (!rootEl.value.contains(target) && !isIgnoredTarget(target)) {
+    emit('close')
+  }
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  const openKeys = ['Enter', ' ', 'Space', 'Spacebar']
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    emit('close')
+    return
+  }
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    onNavigate(1)
+    return
+  }
+
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    onNavigate(-1)
+    return
+  }
+
+  if (openKeys.includes(e.key)) {
+    const activeIndex = optionEls.value.findIndex((el) => el === document.activeElement)
+    if (activeIndex === -1) return
+    const opt = props.options[activeIndex]
+    if (opt?.disabled) return
+    e.preventDefault()
+    selectOption(opt.value)
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onClickOutside)
+  document.addEventListener('keydown', onKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onClickOutside)
+  document.removeEventListener('keydown', onKeydown)
+})
+</script>
diff --git a/src/shared/ui/dropdown-menu/index.ts b/src/shared/ui/dropdown-menu/index.ts
new file mode 100644
index 00000000..e700b78e
--- /dev/null
+++ b/src/shared/ui/dropdown-menu/index.ts
@@ -0,0 +1,3 @@
+import DropdownMenu from "./dropdown-menu.vue";
+
+export { DropdownMenu };
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index fa02b8e8..72f0ab41 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -9,4 +9,6 @@ export * from './file-attachment';
 export * from './pause-button';
 export * from './badge-number';
 export * from './app-header';
+export * from './dropdown-menu';
+export * from './select-control';
 
diff --git a/src/shared/ui/select-control/index.ts b/src/shared/ui/select-control/index.ts
new file mode 100644
index 00000000..6a703e86
--- /dev/null
+++ b/src/shared/ui/select-control/index.ts
@@ -0,0 +1,3 @@
+import SelectControl from "./select-control.vue";
+
+export { SelectControl };
diff --git a/src/shared/ui/select-control/select-control.vue b/src/shared/ui/select-control/select-control.vue
new file mode 100644
index 00000000..b1efd7df
--- /dev/null
+++ b/src/shared/ui/select-control/select-control.vue
@@ -0,0 +1,140 @@
+<template>
+  <div
+    ref="rootEl"
+    class="inline-flex flex-col"
+    @focusout="onFocusOut"
+  >
+    <div class="relative w-56">
+      <input
+        v-if="name"
+        type="hidden"
+        :name="name"
+        :value="modelValue"
+      >
+
+      <button
+        :id="selectId"
+        ref="triggerEl"
+        type="button"
+        class="w-56 rounded-xl border border-gray-200 bg-white px-4 py-2.5 pr-10 text-left text-lg font-medium text-gray-900 shadow-sm hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
+        :disabled="disabled"
+        :aria-expanded="isOpen"
+        :aria-controls="listboxId"
+        @pointerdown="onTriggerPointerDown"
+        @keydown="onTriggerKeydown"
+      >
+        <span>{{ selectedOption?.text ?? '' }}</span>
+      </button>
+
+      <DropdownMenu
+        v-if="isOpen"
+        :listbox-id="listboxId"
+        :labelled-by="selectId"
+        :model-value="modelValue"
+        :options="options"
+        :ignore-elements="[triggerEl]"
+        @select="selectOption"
+        @close="close"
+      />
+
+      <!-- chevron -->
+      <svg
+        class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 transition-transform duration-200 ease-out dark:text-gray-500"
+        :class="{ 'rotate-180': isOpen }"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M6 9l6 6 6-6" />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import DropdownMenu from '../dropdown-menu/dropdown-menu.vue'
+
+type SelectOption = {
+  value: string
+  text: string
+  disabled?: boolean
+}
+
+const props = defineProps<{
+  modelValue: string
+  options: SelectOption[]
+  disabled?: boolean
+  name?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const selectId = `sel_${Math.random().toString(36).slice(2, 9)}`
+const listboxId = `${selectId}_list`
+
+const rootEl = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const triggerEl = ref<HTMLElement | null>(null)
+
+const selectedOption = computed(
+  () => props.options.find((opt) => opt.value === props.modelValue) || props.options[0]
+)
+
+const close = () => {
+  isOpen.value = false
+}
+
+const open = () => {
+  if (!props.disabled) {
+    isOpen.value = true
+  }
+}
+
+const toggle = () => {
+  if (!props.disabled) {
+    isOpen.value = !isOpen.value
+  }
+}
+
+const onTriggerPointerDown = (e: PointerEvent) => {
+  if (e.button !== 0) return
+  toggle()
+}
+
+const selectOption = (value: string) => {
+  emit('update:modelValue', value)
+  close()
+}
+
+const onTriggerKeydown = (e: KeyboardEvent) => {
+  if (props.disabled) return
+
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    close()
+    return
+  }
+
+  const openKeys = ['Enter', ' ', 'Space', 'Spacebar', 'ArrowDown']
+  if (openKeys.includes(e.key)) {
+    e.preventDefault()
+    if (isOpen.value) return
+    open()
+  }
+}
+
+const onFocusOut = () => {
+  requestAnimationFrame(() => {
+    const active = document.activeElement
+    if (rootEl.value && active && rootEl.value.contains(active)) return
+    close()
+  })
+}
+</script>