Добавляет возможность удаления задачи

src/entities/task/model/tasks.ts

@@ -8,11 +8,14 @@ import {
   createStorageAdapter,
   compareIf,
   customCompareIf,
+  excludeKey,
 } from '@/shared/utils';
 import { type TaskBase, type Task, type TaskId } from '@/shared/types';
 
 const addTask = createEvent<TaskBase>();
 
+const removeTask = createEvent<TaskId>();
+
 const toggleTask = createEvent<TaskId>();
 
 export const $tasks = createStore<Record<TaskId, Task>>({})
@@ -36,6 +39,7 @@ export const $tasks = createStore<Record<TaskId, Task>>({})
       },
     };
   })
+  .on(removeTask, (store, taskId) => excludeKey(store, taskId))
   .on(toggleTask, (store, taskId) => {
     const isCompleted = !store[taskId].isCompleted;
 
@@ -76,6 +80,7 @@ const useTasks = () => {
 
 export const events = {
   addTask,
+  removeTask,
   toggleTask,
 };
 

src/entities/task/ui/task-card/ui/TaskCard.tsx

@@ -1,5 +1,6 @@
 import { Paper, Stack, Group, Flex, Text, Button } from '@mantine/core';
 import { TaskOverdueIcon, TaskPriorityIcon, TaskProgress } from '../..';
+import { DeleteButton } from '@/shared/ui';
 import { toDate, humanizedDate } from '@/shared/utils';
 import { type Task } from '@/shared/types';
 import { taskModel } from '@/entities/task';
@@ -11,6 +12,10 @@ export interface TaskCardProps {
 export const TaskCard = ({ task }: TaskCardProps) => {
   const isOverdue = toDate(task.expiresIn ?? '').getTime() < Date.now();
 
+  const onDeleteClick = () => {
+    taskModel.events.removeTask(task.id);
+  };
+
   const onToggleClick = () => {
     taskModel.events.toggleTask(task.id);
   };
@@ -25,7 +30,10 @@ export const TaskCard = ({ task }: TaskCardProps) => {
               {task.title}
             </Text>
           </Group>
-          <TaskPriorityIcon variant={task.priority} />
+          <Group>
+            <TaskPriorityIcon variant={task.priority} />
+            <DeleteButton onClick={onDeleteClick} />
+          </Group>
         </Flex>
         {task.description && <Text size="sm">{task.description}</Text>}
         {task.expiresIn && (

src/shared/ui/delete-button/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/shared/ui/delete-button/ui/DeleteButton.tsx

@@ -0,0 +1,50 @@
+import { useState, useCallback, useRef, memo } from 'react';
+import { ActionIcon, type MantineColor } from '@mantine/core';
+import { IconTrash } from '@tabler/icons-react';
+
+export interface DeleteButtonProps {
+  delay?: number;
+  idleColor?: MantineColor;
+  confirmColor?: MantineColor;
+  onClick?: () => void;
+}
+
+export const DeleteButton = memo(
+  ({
+    delay = 1000,
+    idleColor = 'blue',
+    confirmColor = 'red',
+    onClick,
+  }: DeleteButtonProps) => {
+    const [color, setColor] = useState<MantineColor>(idleColor);
+    const isClicked = useRef(false);
+    const timeout = useRef<number | undefined>(undefined);
+
+    const onDelete = useCallback(() => {
+      if (!isClicked.current) {
+        setColor(confirmColor);
+        isClicked.current = true;
+
+        timeout.current = window.setTimeout(() => {
+          setColor(idleColor);
+          isClicked.current = false;
+        }, delay);
+      } else {
+        setColor(idleColor);
+        isClicked.current = false;
+
+        window.clearTimeout(timeout.current);
+
+        onClick?.();
+      }
+    }, [delay, idleColor, confirmColor, onClick]);
+
+    return (
+      <ActionIcon color={color} onClick={onDelete}>
+        <IconTrash />
+      </ActionIcon>
+    );
+  },
+);
+
+DeleteButton.displayName = 'DeleteButton';

src/shared/ui/delete-button/ui/index.ts

@@ -0,0 +1 @@
+export * from './DeleteButton';

src/shared/ui/index.ts

@@ -2,3 +2,4 @@ export * from './layout';
 export * from './theme-switcher';
 export * from './to-top';
 export * from './choice-item';
+export * from './delete-button';

src/shared/utils/data.ts

@@ -27,3 +27,10 @@ export const compareIf = <T>(value: T, needle: T | undefined) => {
 
 export const clamp = (min: number, max: number, value: number) =>
   Math.max(min, Math.min(max, value));
+
+export const excludeKey = <T, K extends keyof T>(entry: T, key: K) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { [key]: _, ...data } = entry;
+
+  return data;
+};