Модифицирует логику удаления задачи

package.json

@@ -19,6 +19,7 @@
     "@mantine/form": "^7.3.2",
     "@mantine/hooks": "^7.3.2",
     "@mantine/modals": "^7.3.2",
+    "@mantine/notifications": "^7.3.2",
     "@mantine/spotlight": "^7.3.2",
     "@tabler/icons-react": "^2.44.0",
     "dayjs": "^1.11.10",

src/app/App.tsx

@@ -1,3 +1,4 @@
+import { Notifications } from '@mantine/notifications';
 import {
   ThemeProvider,
   DateProvider,
@@ -7,11 +8,13 @@ import {
 import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/spotlight/styles.css';
+import '@mantine/notifications/styles.css';
 import './index.css';
 
 export const App = () => {
   return (
     <ThemeProvider>
+      <Notifications />
       <DateProvider>
         <ModalProvider>
           <Routing />

src/entities/task/model/query-config.ts

@@ -17,7 +17,7 @@ const resetQueryConfig = createEvent();
 
 export const $queryConfig = createStore<QueryConfig>({})
   .on(setQueryConfig, (store, payload) => ({ ...store, ...payload }))
-  .on(resetQueryConfig, () => ({}));
+  .reset(resetQueryConfig);
 
 persist({
   key: 'query-config',

src/entities/task/model/tasks.ts

@@ -1,4 +1,4 @@
-import { createStore, createEvent, combine } from 'effector';
+import { createStore, createEvent, combine, sample } from 'effector';
 import { useUnit } from 'effector-react';
 import { persist } from 'effector-storage';
 import { nanoid } from 'nanoid';
@@ -18,6 +18,15 @@ const removeTask = createEvent<TaskId>();
 
 const toggleTask = createEvent<TaskId>();
 
+const markTaskToRemove = createEvent<TaskId>();
+
+const unmarkTaskToRemove = createEvent<TaskId>();
+
+sample({
+  clock: removeTask,
+  target: unmarkTaskToRemove,
+});
+
 export const $tasks = createStore<Record<TaskId, Task>>({})
   .on(addTask, (store, taskBase) => {
     const id = nanoid();
@@ -53,16 +62,34 @@ export const $tasks = createStore<Record<TaskId, Task>>({})
     };
   });
 
-export const $tasksList = combine($tasks, (tasks) => Object.values(tasks));
+export const $tasksToDelete = createStore<TaskId[]>([])
+  .on(markTaskToRemove, (store, taskId) => [...store, taskId])
+  .on(unmarkTaskToRemove, (store, taskId) =>
+    store.filter((entry) => entry !== taskId),
+  );
+
+$tasksToDelete.watch((s) => {
+  console.log(s);
+});
+
+export const $tasksList = combine(
+  $tasks,
+  $tasksToDelete,
+  (tasks, tasksToDelete) =>
+    Object.values(tasks).filter((task) => !tasksToDelete.includes(task.id)),
+);
 
 export const $tasksFiltered = combine(
   $tasksList,
   $queryConfig,
   (tasks, query) =>
     tasks.filter(
       (task) =>
-        (customCompareIf(task.title, query.text, compareText) ||
-          customCompareIf(task.title, query.text, compareText)) &&
+        customCompareIf(
+          task.title.concat(task.description ?? ''),
+          query.text,
+          compareText,
+        ) &&
         compareIf(task.priority, query.priority) &&
         compareIf(task.isCompleted, query.isCompleted) &&
         customCompareIf(task.expiresIn, query.isOverdue, compareExpiresIn),
@@ -93,6 +120,8 @@ export const events = {
   addTask,
   removeTask,
   toggleTask,
+  markTaskToRemove,
+  unmarkTaskToRemove,
 };
 
 export const selectors = {

src/entities/task/ui/index.ts

@@ -3,4 +3,5 @@ export * from './task-overdue-icon';
 export * from './task-non-overdue-icon';
 export * from './task-priority-icon';
 export * from './task-progress';
+export * from './task-delete-button';
 export * from './task-create-form';

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

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

src/entities/task/ui/task-delete-button/ui/TaskDeleteButton.tsx

@@ -0,0 +1,58 @@
+import { Group, Button, ActionIcon, rem } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { IconQuestionMark, IconCheck, IconTrash } from '@tabler/icons-react';
+import { type Task } from '@/shared/types';
+import { taskModel } from '@/entities/task';
+
+export interface TaskDeleteButtonProps {
+  task: Task;
+}
+
+export const TaskDeleteButton = ({ task }: TaskDeleteButtonProps) => {
+  const onClick = () => {
+    taskModel.events.markTaskToRemove(task.id);
+
+    notifications.show({
+      id: task.id,
+      title: `Вы удалили задачу: ${task.title}`,
+      message: (
+        <Group gap={rem(4)}>
+          Хотите вернуть?
+          <Button
+            color="blue"
+            variant="light"
+            size="compact-xs"
+            onClick={() => {
+              taskModel.events.unmarkTaskToRemove(task.id);
+
+              notifications.update({
+                id: task.id,
+                title: `Вы вернули задачу: ${task.title}`,
+                message: 'Задача возвращена',
+                color: 'green',
+                icon: <IconCheck />,
+                withCloseButton: true,
+                // eslint-disable-next-line @typescript-eslint/no-empty-function
+                onClose: () => {},
+              });
+            }}
+          >
+            Да!
+          </Button>
+        </Group>
+      ),
+      color: 'yellow',
+      icon: <IconQuestionMark />,
+      withCloseButton: false,
+      onClose: () => {
+        taskModel.events.removeTask(task.id);
+      },
+    });
+  };
+
+  return (
+    <ActionIcon color="blue" onClick={onClick}>
+      <IconTrash />
+    </ActionIcon>
+  );
+};

src/entities/task/ui/task-delete-button/ui/index.ts

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

src/shared/ui/index.ts

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