feat: calendar circle colors

src/components/ModalTags.tsx

@@ -1,4 +1,4 @@
-import { IAPITag } from "@/pages/profile_tasks.dto";
+import { IAPITag, IViewTagsResponse } from "@/pages/profile_tasks.dto";
 import apiClient from "@/services/api";
 import { cn } from "@/utils/class-merge";
 import { BookOpenIcon, CheckIcon, DocumentDuplicateIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
@@ -25,7 +25,7 @@ interface ModalTagsProps extends ModalWindowProps {
     first: IAPITag[];
     second: IAPITag[];
   };
-  refreshTags: () => void;
+  refreshTags: () => Promise<IViewTagsResponse | void>;
 }
 
 const ModalTags: FunctionComponent<ModalTagsProps> = ({
@@ -64,7 +64,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
       { method: "POST", body: JSON.stringify(data) }
     );
     if (response.success) {
-      refreshTags();
+      await refreshTags();
       if (showAddFirstTag) {
         const new_subject_id = response.subject!.id;
         onChange!((prev) => ({ ...prev, first: new_subject_id }));
@@ -89,7 +89,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
       body: JSON.stringify(data),
     });
     if (!response.error) {
-      refreshTags();
+      await refreshTags();
     } else {
       setShowErrorDialog(true);
       const match = response.error?.match(/\[(.+)\]/);

src/components/menu.tsx

@@ -1,12 +1,13 @@
+import { useAppContext } from "@/providers/AuthProvider";
+import apiClient from "@/services/api";
+import { getAvatarPicUrl } from "@/services/avatar-pic";
 import { cn } from "@/utils/class-merge";
 import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid";
 import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
-import { useEffect, useState } from "preact/hooks";
-import apiClient from "@/services/api";
-import { useAppContext } from "@/providers/AuthProvider";
 
 interface UserProfile {
   username: string;
@@ -72,7 +73,7 @@ const Avatar: FunctionComponent = () => {
     }
   }, [isLoggedIn.value]);
 
-  return (
+  return username ? (
     <button
       onClick={() => route("/profile/settings")}
       class={cn("hidden h-32 w-full cursor-pointer overflow-hidden opacity-100 transition-[height,opacity] md:block", {
@@ -84,14 +85,16 @@ const Avatar: FunctionComponent = () => {
           "h-full flex-row items-center justify-around rounded-[3rem] bg-[linear-gradient(180.00deg,rgba(249,134,143,0.5)_3.053%,rgb(228,242,252)_96.183%)] px-5 py-5 md:flex"
         )}
       >
-        <div class="my-5 aspect-square h-full rounded-full bg-white"></div>
+        <div class="my-5 aspect-square h-full rounded-full">
+          <img class="size-full rounded-full" src={getAvatarPicUrl(status)} alt="avatar" />
+        </div>
         <div class="flex flex-col items-center justify-center">
           <p class="text-3xl font-semibold">{username}</p>
           <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div>
         </div>
       </div>
     </button>
-  );
+  ) : null;
 };
 
 interface MenuItems {

src/pages/profile_calendar.tsx

@@ -80,16 +80,7 @@ const ProfileCalendar: FunctionComponent = () => {
     setError,
     formState: { errors },
   } = useForm<ITaskForm>({
-    defaultValues: {
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
-    },
+    defaultValues: {},
   });
 
   useEffect(() => {
@@ -146,13 +137,13 @@ const ProfileCalendar: FunctionComponent = () => {
       return;
     }
     if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
-      setError("subject", { message: "Выберите теги" });
+      setError("date", { message: "Выберите теги" });
       return;
     }
 
     try {
-      const selectedSubject = editContent?.subject.id || tags.first;
-      const selectedTaskType = editContent?.taskType.id || tags.second;
+      const selectedSubject = tags.first || editContent?.subject.id;
+      const selectedTaskType = tags.second || editContent?.taskType.id;
 
       // Format date to DD-MM-YYYYTHH:MM
       const formattedDate = calendarDate
@@ -171,8 +162,8 @@ const ProfileCalendar: FunctionComponent = () => {
       const taskData = {
         title: data.name,
         description: data.description || "",
-        subject: selectedSubject,
-        taskType: selectedTaskType,
+        subject_id: selectedSubject,
+        taskType_id: selectedTaskType,
         dateTime_due: formattedDate,
         telegram_notifications: false,
         priority: selectedPriority,
@@ -195,7 +186,17 @@ const ProfileCalendar: FunctionComponent = () => {
 
         if (!response.success) {
           throw new Error(response.message);
-        }
+        } else if (isEdit)
+          setEditContent({
+            name: response.task.title,
+            id: response.task.id.toString(),
+            description: response.task.description,
+            priority: response.task.priority,
+            checked: response.task.isCompleted,
+            subject: response.task.subject,
+            taskType: response.task.task_type,
+            date: new Date(response.task.dateTime_due),
+          });
       }
 
       await fetchTasks();
@@ -295,12 +296,29 @@ const ProfileCalendar: FunctionComponent = () => {
   }, [tags]);
 
   const tasksCount = (date: CalendarDateTemplateEvent) => {
-    return tasks.filter((task) => {
+    const filterTasks = tasks.filter((task) => {
       const taskDate = task.date;
       return (
         taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
       );
-    }).length;
+    });
+    return {
+      length: filterTasks.length,
+      colors: filterTasks.map((task) => {
+        switch (task.priority) {
+          case 1:
+            return "bg-[rgba(18,26,230,1)]";
+          case 2:
+            return "bg-[rgba(97,200,232,1)]";
+          case 3:
+            return "bg-[rgba(247,220,52,1)]";
+          case 4:
+            return "bg-[rgba(251,194,199,1)]";
+          default:
+            return "bg-[rgba(251,194,199,1)]";
+        }
+      }),
+    };
   };
 
   const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
@@ -314,7 +332,8 @@ const ProfileCalendar: FunctionComponent = () => {
 
   const dateTemplate = (date: CalendarDateTemplateEvent) => {
     const isHighlighted = hasTasksOnDate(date);
-    const countT = tasksCount(date);
+    const taskInfo = tasksCount(date);
+    if (taskInfo.length) console.log(taskInfo);
     const isSelected =
       currentDate &&
       currentDate.getDate() === date.day &&
@@ -338,10 +357,10 @@ const ProfileCalendar: FunctionComponent = () => {
         <span>{date.day}</span>
         {isHighlighted && (
           <div class="absolute top-2 right-2 flex h-fit w-2 flex-col items-center gap-1 md:h-2 md:w-fit md:flex-row">
-            {Array.from({ length: countT > 3 ? 3 : countT }).map((_, i) => (
-              <span key={i} className="size-2 rounded-full bg-pink-400" />
+            {Array.from({ length: taskInfo.length > 3 ? 3 : taskInfo.length }).map((_, i) => (
+              <span key={i} className={cn("size-2 rounded-full", taskInfo.colors[i])} />
             ))}
-            {countT > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
+            {taskInfo.length > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
           </div>
         )}
       </div>
@@ -377,10 +396,148 @@ const ProfileCalendar: FunctionComponent = () => {
 
   return (
     <div class="flex w-full flex-col items-center">
+      <ModalWindow
+        isOpen={openModal}
+        setIsOpen={setIsOpen}
+        onClose={() => {
+          setIsEdit(false);
+          setEditContent(null);
+          setSelectedPriority(4);
+          setIsEditModal(false);
+          setTags({ first: 0, second: 0, overdue: false });
+          setCalendarDate(null);
+        }}
+      >
+        {isEdit && editContent && (
+          <form
+            class="flex h-full w-full flex-col items-start justify-between"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isEditModal) handleSubmit(saveTask)();
+              else setIsEditModal(!isEditModal);
+            }}
+          >
+            <div class="flex w-full flex-row items-start justify-between">
+              <div class="flex flex-1 flex-col gap-1 pe-2">
+                <input
+                  class={cn("w-full p-2 text-2xl outline-0", {
+                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                  })}
+                  disabled={!isEditModal}
+                  placeholder="Название"
+                  {...register("name", {
+                    required: "Заполните название",
+                    maxLength: { value: 20, message: "Максимум 20 символов в названии" },
+                  })}
+                />
+                <textarea
+                  class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
+                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                  })}
+                  disabled={!isEditModal}
+                  placeholder={isEditModal ? "Описание" : ""}
+                  {...register("description", {
+                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
+                  })}
+                />
+                <input
+                  type="datetime-local"
+                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
+                  hidden
+                  {...register("date")}
+                />
+                <input type="checkbox" hidden {...register("checked")} />
+              </div>
+              <div class="flex flex-row gap-4">
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => {
+                    if (isEditModal) {
+                      handleSubmit(saveTask)();
+                      setIsEditModal(!isEditModal);
+                    } else setIsEditModal(!isEditModal);
+                  }}
+                >
+                  {isEditModal ? (
+                    <>
+                      <InboxArrowDownIcon class="size-6" />
+                      <p class="text-[0.7rem]">Сохранить</p>
+                    </>
+                  ) : (
+                    <>
+                      <PencilIcon class="size-6" />
+                      <p class="text-[0.7rem]">Редактировать</p>
+                    </>
+                  )}
+                </div>
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => setShowDeleteDialog(true)}
+                >
+                  <TrashIcon class="size-6" />
+                  <p class="text-[0.7rem]">Удалить</p>
+                </div>
+              </div>
+            </div>
+            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+            {errors.description && <p class="text-red-500">{errors.description.message}</p>}
+            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
+            <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
+              <div
+                class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setOpenModalCalendar(true);
+                  setCalendarDate(editContent.date);
+                }}
+              >
+                <CalendarDaysIcon class="size-10" />
+                <p>
+                  {Intl.DateTimeFormat("ru-RU", {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  }).format(calendarDate!)}
+                </p>
+              </div>
+              <div
+                class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
+                  setOpenModalTags(true);
+                }}
+              >
+                <p class="flex flex-row gap-2">
+                  <BookOpenIcon class="size-5" />
+                  {editContent.subject.name}
+                </p>
+                <p class="flex flex-row gap-2">
+                  <DocumentDuplicateIcon class="size-5" />
+                  {editContent.taskType.name}
+                </p>
+              </div>
+              <Dropdown
+                disabled={!isEditModal}
+                pt={DropdownStyles}
+                options={priorities}
+                value={selectedPriority}
+                onChange={(e) => setSelectedPriority(e.value)}
+                itemTemplate={selectedPriorityTemplate}
+                valueTemplate={selectedPriorityTemplate}
+              />
+            </div>
+          </form>
+        )}
+      </ModalWindow>
       {isLoading ? (
-        <div class="flex w-full flex-1 items-center justify-center">
-          <div class="text-2xl">Загрузка...</div>
-        </div>
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
       ) : (
         <>
           <ModalTags
@@ -403,153 +560,6 @@ const ProfileCalendar: FunctionComponent = () => {
             onChange={(e) => isEditModal && setCalendarDate(e.value)}
             value={calendarDate!}
           />
-          <ModalWindow
-            isOpen={openModal}
-            setIsOpen={setIsOpen}
-            onClose={() => {
-              setIsEdit(false);
-              setEditContent(null);
-              setSelectedPriority(4);
-              setIsEditModal(false);
-              setTags({ first: 0, second: 0, overdue: false });
-              setCalendarDate(null);
-            }}
-          >
-            {isEdit && editContent && (
-              <form
-                class="flex h-full w-full flex-col items-start justify-between"
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  if (isEditModal) handleSubmit(saveTask)();
-                  else setIsEditModal(!isEditModal);
-                }}
-              >
-                <div class="flex w-full flex-row items-start justify-between">
-                  <div class="flex flex-1 flex-col gap-1 pe-2">
-                    <input
-                      class={cn("w-full p-2 text-2xl outline-0", {
-                        "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
-                      })}
-                      disabled={!isEditModal}
-                      placeholder="Название"
-                      {...register("name", {
-                        required: "Заполните название",
-                        maxLength: { value: 20, message: "Максимум 20 символов в названии" },
-                      })}
-                    />
-                    <textarea
-                      class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
-                        "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
-                      })}
-                      disabled={!isEditModal}
-                      placeholder={isEditModal ? "Описание" : ""}
-                      {...register("description", {
-                        maxLength: { value: 200, message: "Максимум 200 символов в описании" },
-                      })}
-                    />
-                    <input
-                      type="datetime-local"
-                      value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
-                      hidden
-                      {...register("date")}
-                    />
-                    <input type="checkbox" hidden {...register("checked")} />
-                  </div>
-                  <div class="flex flex-row gap-4">
-                    <div
-                      className="flex cursor-pointer flex-col items-center gap-3"
-                      onClick={() => {
-                        if (isEditModal) {
-                          handleSubmit(saveTask)();
-                          setIsEditModal(!isEditModal);
-                        } else setIsEditModal(!isEditModal);
-                      }}
-                    >
-                      {isEditModal ? (
-                        <>
-                          <InboxArrowDownIcon class="size-6" />
-                          <p class="text-[0.7rem]">Сохранить</p>
-                        </>
-                      ) : (
-                        <>
-                          <PencilIcon class="size-6" />
-                          <p class="text-[0.7rem]">Редактировать</p>
-                        </>
-                      )}
-                    </div>
-                    <div
-                      className="flex cursor-pointer flex-col items-center gap-3"
-                      onClick={() => setShowDeleteDialog(true)}
-                    >
-                      <TrashIcon class="size-6" />
-                      <p class="text-[0.7rem]">Удалить</p>
-                    </div>
-                  </div>
-                </div>
-                {errors.name && <p class="text-red-500">{errors.name.message}</p>}
-                {errors.description && <p class="text-red-500">{errors.description.message}</p>}
-                {errors.date && <p class="text-red-500">{errors.date.message}</p>}
-                {errors.subject && <p class="text-red-500">{errors.subject.message}</p>}
-                <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
-                  <div
-                    class={cn(
-                      "flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1",
-                      {
-                        "cursor-pointer": isEditModal,
-                      }
-                    )}
-                    onClick={() => {
-                      if (!isEditModal) return;
-                      setOpenModalCalendar(true);
-                      setCalendarDate(editContent.date);
-                    }}
-                  >
-                    <CalendarDaysIcon class="size-10" />
-                    <p>
-                      {Intl.DateTimeFormat("ru-RU", {
-                        day: "2-digit",
-                        month: "2-digit",
-                        year: "numeric",
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      }).format(calendarDate!)}
-                    </p>
-                  </div>
-                  <div
-                    class={cn(
-                      "flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2",
-                      {
-                        "cursor-pointer": isEditModal,
-                      }
-                    )}
-                    onClick={() => {
-                      if (!isEditModal) return;
-                      setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
-                      setOpenModalTags(true);
-                    }}
-                  >
-                    <p class="flex flex-row gap-2">
-                      <BookOpenIcon class="size-5" />
-                      {editContent.subject.name}
-                    </p>
-                    <p class="flex flex-row gap-2">
-                      <DocumentDuplicateIcon class="size-5" />
-                      {editContent.taskType.name}
-                    </p>
-                  </div>
-                  <Dropdown
-                    disabled={!isEditModal}
-                    pt={DropdownStyles}
-                    options={priorities}
-                    value={selectedPriority}
-                    onChange={(e) => setSelectedPriority(e.value)}
-                    itemTemplate={selectedPriorityTemplate}
-                    valueTemplate={selectedPriorityTemplate}
-                  />
-                </div>
-              </form>
-            )}
-          </ModalWindow>
           <Dialog
             isOpen={showDeleteDialog}
             setIsOpen={setShowDeleteDialog}

src/pages/profile_settings.module.scss

@@ -5,7 +5,7 @@
 }
 
 #avatar {
-  @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full bg-white;
+  @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full;
 }
 
 .profile_container {

src/pages/profile_settings.tsx

@@ -4,6 +4,7 @@ import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import apiClient from "@/services/api";
+import { getAvatarPicUrl } from "@/services/avatar-pic";
 import { cn } from "@/utils/class-merge";
 import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
@@ -62,11 +63,19 @@ const ProfileSettings: FunctionComponent = () => {
       console.error("Logout failed:", error);
     }
   };
+  if (!userData.username)
+    return (
+      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
+      </div>
+    );
   return (
     <div class={classes.container}>
       <ModalSettings isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} onClose={fetchUserData} />
       <div class="flex w-full flex-col items-center rounded-[4rem] bg-[linear-gradient(180.00deg,rgb(251,194,199),rgba(206,232,251,0.72)_100%)] px-7 py-5 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:flex-row">
-        <div id={classes.avatar}>"Аватар"</div>
+        <div id={classes.avatar}>
+          <img class="size-28 rounded-full" src={getAvatarPicUrl(userData.status)} alt="avatar" />
+        </div>
         <div class={classes.header_block__name}>
           <p class="text-4xl font-semibold">{userData.username}</p>
           <p class="text-2xl font-light">{userData.status}</p>
@@ -100,4 +109,6 @@ const ProfileSettings: FunctionComponent = () => {
   );
 };
 
+ProfileSettings.displayName = "ProfileSettings";
+
 export default withTitle(UrlsTitle.PROFILE, ProfileSettings);

src/pages/profile_tasks.dto.ts

@@ -17,7 +17,7 @@ export interface ITaskView extends Omit<ITask, "taskType"> {
   task_type: IAPITag;
 }
 
-export interface ITaskForm extends Omit<ITask, "date"> {
+export interface ITaskForm extends Omit<ITask, "date" | "subject" | "taskType"> {
   date: string;
 }
 
@@ -80,15 +80,11 @@ export interface IEditTaskResponse {
     id: number;
     title: string;
     description: string;
-    subject: string;
-    taskType: string;
+    subject: IAPITag;
+    task_type: IAPITag;
     dateTime_due: string;
     isCompleted: boolean;
-    reminder?: {
-      remind_before_days: number;
-      repeat_interval: number;
-      reminder_time: string;
-    };
+    priority: number;
   };
 }
 

src/pages/profile_tasks.tsx

@@ -32,7 +32,6 @@ import { Dropdown } from "primereact/dropdown";
 import { SelectItem } from "primereact/selectitem";
 import { Nullable } from "primereact/ts-helpers";
 import { SubmitHandler, useForm } from "react-hook-form";
-import { v4 as uuid } from "uuid";
 import {
   IApiResponse,
   IAPITag,
@@ -87,7 +86,7 @@ const ProfileTasks: FunctionComponent = () => {
     fetchTags();
   }, []);
 
-  const fetchTags = async () => {
+  const fetchTags = async (): Promise<IViewTagsResponse | void> => {
     try {
       const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/");
       setSubjectChoices(response.subjects);
@@ -126,18 +125,7 @@ const ProfileTasks: FunctionComponent = () => {
     reset,
     setError,
     formState: { errors },
-  } = useForm<ITaskForm>({
-    defaultValues: {
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
-    },
-  });
+  } = useForm<ITaskForm>({});
 
   const example_tags = useMemo(
     () => ({
@@ -153,7 +141,7 @@ const ProfileTasks: FunctionComponent = () => {
       return;
     }
     if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
-      setError("subject", { message: "Выберите теги" });
+      setError("date", { message: "Выберите теги" });
       return;
     }
 
@@ -202,11 +190,20 @@ const ProfileTasks: FunctionComponent = () => {
 
         if (!response.success) {
           throw new Error(response.message);
-        }
+        } else if (isEdit)
+          setEditContent({
+            name: response.task.title,
+            id: response.task.id.toString(),
+            description: response.task.description,
+            priority: response.task.priority,
+            checked: response.task.isCompleted,
+            subject: response.task.subject,
+            taskType: response.task.task_type,
+            date: new Date(response.task.dateTime_due),
+          });
       }
 
       await fetchTasks();
-
       if (isCreating) setIsOpen(false);
       setTags({ first: 0, second: 0, overdue: false });
     } catch (error) {
@@ -223,14 +220,6 @@ const ProfileTasks: FunctionComponent = () => {
       name: "",
       description: "",
       date: "",
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
       priority: 4,
       checked: false,
     });
@@ -387,34 +376,6 @@ const ProfileTasks: FunctionComponent = () => {
 
   return (
     <div class={classes.container}>
-      {isLoading ? (
-        <div class="flex w-full flex-1 items-center justify-center">
-          <div class="text-2xl">Загрузка...</div>
-        </div>
-      ) : (
-        <ModalTags
-          refreshTags={fetchTags}
-          zIndex={70}
-          isOpen={openModalTags}
-          setIsOpen={setOpenModalTags}
-          tagsList={example_tags}
-          value={tags}
-          onClose={() => {
-            if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
-          }}
-          onChange={setTags}
-        />
-      )}
-      <ModalCalendar
-        zIndex={80}
-        isOpen={openModalCalendar}
-        setIsOpen={setOpenModalCalendar}
-        onClose={() => {
-          if (isEdit && !isEditModal) setCalendarDate(null);
-        }}
-        onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
-        value={calendarDate!}
-      />
       <ModalWindow
         zIndex={60}
         isOpen={openModal}
@@ -503,7 +464,6 @@ const ProfileTasks: FunctionComponent = () => {
             {errors.name && <p class="text-red-500">{errors.name.message}</p>}
             {errors.description && <p class="text-red-500">{errors.description.message}</p>}
             {errors.date && <p class="text-red-500">{errors.date.message}</p>}
-            {errors.subject && <p class="text-red-500">{errors.subject.message}</p>}
             <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
               <div
                 class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
@@ -523,7 +483,7 @@ const ProfileTasks: FunctionComponent = () => {
                     year: "numeric",
                     hour: "2-digit",
                     minute: "2-digit",
-                  }).format(calendarDate!)}
+                  }).format(calendarDate ?? editContent.date)}
                 </p>
               </div>
               <div
@@ -562,7 +522,7 @@ const ProfileTasks: FunctionComponent = () => {
             class="flex h-full w-full flex-col items-start justify-between"
             onSubmit={(e) => {
               e.preventDefault();
-              handleSubmit((data) => saveTask({ ...data, id: uuid() }))();
+              handleSubmit((data) => saveTask(data))();
             }}
           >
             <div class="flex w-full flex-1 flex-row items-start justify-between">
@@ -608,7 +568,6 @@ const ProfileTasks: FunctionComponent = () => {
             </div>
             {errors.name && <p class="text-red-500">{errors.name.message}</p>}
             {errors.date && <p class="text-red-500">{errors.date.message}</p>}
-            {errors.subject?.message && <p class="text-red-500">{errors.subject.message}</p>}
             <div className="mb-8 flex h-16 flex-col items-center gap-6 self-center md:mb-0 md:flex-row md:self-start">
               <Button
                 className="text-sm"
@@ -625,37 +584,201 @@ const ProfileTasks: FunctionComponent = () => {
           </form>
         )}
       </ModalWindow>
-      <Dialog
-        isOpen={showDeleteDialog}
-        setIsOpen={setShowDeleteDialog}
-        title="Удаление задачи"
-        onConfirm={handleDeleteTask}
-        confirmText="Удалить"
-        cancelText="Отмена"
-      >
-        <p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
-      </Dialog>
-      {!searchQuery && !filterTags.first && !filterTags.second && !filterTags.overdue ? (
-        filteredTasks.length > 0 ? (
-          <>
-            <div class={classes.header}>
-              Сегодня: {getDate}
-              <div class="flex flex-row items-center gap-2 md:hidden">
-                {!openSearchModal && (
-                  <div
-                    class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      if (!openSearchModal) setOpenFilterModal(false);
-                      setOpenSearchModal(!openSearchModal);
-                    }}
-                  >
-                    <MagnifyingGlassIcon class="size-6" />
+      {isLoading ? (
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
+      ) : (
+        <>
+          <ModalTags
+            refreshTags={fetchTags}
+            zIndex={70}
+            isOpen={openModalTags}
+            setIsOpen={setOpenModalTags}
+            tagsList={example_tags}
+            value={tags}
+            onClose={() => {
+              if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
+            }}
+            onChange={setTags}
+          />
+          <ModalCalendar
+            zIndex={80}
+            isOpen={openModalCalendar}
+            setIsOpen={setOpenModalCalendar}
+            onClose={() => {
+              if (isEdit && !isEditModal) setCalendarDate(null);
+            }}
+            onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
+            value={calendarDate!}
+          />
+          <Dialog
+            isOpen={showDeleteDialog}
+            setIsOpen={setShowDeleteDialog}
+            title="Удаление задачи"
+            onConfirm={handleDeleteTask}
+            confirmText="Удалить"
+            cancelText="Отмена"
+          >
+            <p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
+          </Dialog>
+          {!searchQuery && !filterTags.first && !filterTags.second && !filterTags.overdue ? (
+            filteredTasks.length > 0 ? (
+              <>
+                <div class={classes.header}>
+                  Сегодня: {getDate}
+                  <div class="flex flex-row items-center gap-2 md:hidden">
+                    {!openSearchModal && (
+                      <div
+                        class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (!openSearchModal) setOpenFilterModal(false);
+                          setOpenSearchModal(!openSearchModal);
+                        }}
+                      >
+                        <MagnifyingGlassIcon class="size-6" />
+                      </div>
+                    )}
+                    <div class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]">
+                      <FunnelIcon
+                        class="size-6"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (!openFilterModal) setOpenSearchModal(false);
+                          setOpenFilterModal(!openFilterModal);
+                        }}
+                      />
+                    </div>
                   </div>
-                )}
-                <div class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]">
+                </div>
+                <div class={classes.tasks_container}>
+                  {groupTasksByDate.today.length > 0 ? (
+                    <div class="w-full">
+                      {groupTasksByDate.today.map((task) => (
+                        <Task
+                          name={task.name}
+                          key={task.id}
+                          priority={task.priority}
+                          checked={task.checked}
+                          overdue={task.date < new Date()}
+                          onClick={() => handleViewTask(task.id)}
+                          onMarkClick={() => handleMarkTask(task.id)}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <div class="w-full text-center text-xl">Задач на сегодня нет</div>
+                  )}
+                  {groupTasksByDate.tomorrow.length > 0 && (
+                    <div class="flex w-full flex-col gap-3 md:gap-10">
+                      <div class="w-full text-3xl font-semibold md:text-5xl">Завтра</div>
+                      {groupTasksByDate.tomorrow.map((task) => (
+                        <Task
+                          name={task.name}
+                          priority={task.priority}
+                          key={task.id}
+                          checked={task.checked}
+                          onClick={() => handleViewTask(task.id)}
+                          onMarkClick={() => handleMarkTask(task.id)}
+                        />
+                      ))}
+                    </div>
+                  )}
+                  {groupTasksByDate.future.map((group) => (
+                    <div class="flex w-full flex-col gap-3 md:gap-10" key={group.date.getTime()}>
+                      <div class="w-full text-3xl font-semibold md:text-5xl">{formatDate(group.date)}</div>
+                      {group.tasks.map((task) => (
+                        <Task
+                          name={task.name}
+                          priority={task.priority}
+                          key={task.id}
+                          checked={task.checked}
+                          onClick={() => handleViewTask(task.id)}
+                          onMarkClick={() => handleMarkTask(task.id)}
+                        />
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </>
+            ) : (
+              <div class="my-auto flex h-full w-full flex-col items-center justify-start">
+                <img src={MainSvg} />
+                <div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
+              </div>
+            )
+          ) : (
+            <div class={classes.tasks_container}>
+              <div class="mb-8 flex w-full flex-row items-center justify-between text-xl font-semibold sm:text-3xl md:text-5xl">
+                {searchQuery ? "Результаты поиска" : "Результаты фильтрации"}
+                <div class="flex flex-row items-center gap-2 md:hidden">
+                  {!openSearchModal && (
+                    <div
+                      class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (!openSearchModal) setOpenFilterModal(false);
+                        setOpenSearchModal(!openSearchModal);
+                      }}
+                    >
+                      <MagnifyingGlassIcon class="size-6" />
+                    </div>
+                  )}
+                  <div class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]">
+                    <FunnelIcon
+                      class="size-6"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (!openFilterModal) setOpenSearchModal(false);
+                        setOpenFilterModal(!openFilterModal);
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+              {filteredTasks.length > 0 ? (
+                filteredTasks.map((task) => (
+                  <Task
+                    name={task.name}
+                    priority={task.priority}
+                    key={task.id}
+                    checked={task.checked}
+                    overdue={task.date < new Date()}
+                    onClick={() => handleViewTask(task.id)}
+                    onMarkClick={() => handleMarkTask(task.id)}
+                  />
+                ))
+              ) : (
+                <div class="w-full text-center text-xl">
+                  {searchQuery ? "Ничего не найдено" : "Нет задач с выбранными фильтрами"}
+                </div>
+              )}
+            </div>
+          )}
+          <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
+            <div
+              class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
+              onClick={() => {
+                setIsCreating(true);
+                setIsOpen(true);
+              }}
+            >
+              <PlusIcon />
+            </div>
+            {tasks.length > 0 && (
+              <div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
+                <div
+                  class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (!openSearchModal) setOpenFilterModal(false);
+                    setOpenSearchModal(!openSearchModal);
+                  }}
+                >
+                  <MagnifyingGlassIcon class="size-12" />
+                </div>
+                <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
                   <FunnelIcon
-                    class="size-6"
+                    class="size-12"
                     onClick={(e) => {
                       e.stopPropagation();
                       if (!openFilterModal) setOpenSearchModal(false);
@@ -664,317 +787,181 @@ const ProfileTasks: FunctionComponent = () => {
                   />
                 </div>
               </div>
-            </div>
-            <div class={classes.tasks_container}>
-              {groupTasksByDate.today.length > 0 ? (
-                <div class="w-full">
-                  {groupTasksByDate.today.map((task) => (
-                    <Task
-                      name={task.name}
-                      key={task.id}
-                      priority={task.priority}
-                      checked={task.checked}
-                      overdue={task.date < new Date()}
-                      onClick={() => handleViewTask(task.id)}
-                      onMarkClick={() => handleMarkTask(task.id)}
-                    />
-                  ))}
-                </div>
-              ) : (
-                <div class="w-full text-center text-xl">Задач на сегодня нет</div>
-              )}
-              {groupTasksByDate.tomorrow.length > 0 && (
-                <div class="flex w-full flex-col gap-3 md:gap-10">
-                  <div class="w-full text-3xl font-semibold md:text-5xl">Завтра</div>
-                  {groupTasksByDate.tomorrow.map((task) => (
-                    <Task
-                      name={task.name}
-                      priority={task.priority}
-                      key={task.id}
-                      checked={task.checked}
-                      onClick={() => handleViewTask(task.id)}
-                      onMarkClick={() => handleMarkTask(task.id)}
-                    />
-                  ))}
-                </div>
-              )}
-              {groupTasksByDate.future.map((group) => (
-                <div class="flex w-full flex-col gap-3 md:gap-10" key={group.date.getTime()}>
-                  <div class="w-full text-3xl font-semibold md:text-5xl">{formatDate(group.date)}</div>
-                  {group.tasks.map((task) => (
-                    <Task
-                      name={task.name}
-                      priority={task.priority}
-                      key={task.id}
-                      checked={task.checked}
-                      onClick={() => handleViewTask(task.id)}
-                      onMarkClick={() => handleMarkTask(task.id)}
-                    />
-                  ))}
-                </div>
-              ))}
-            </div>
-          </>
-        ) : (
-          <div class="my-auto flex h-full w-full flex-col items-center justify-start">
-            <img src={MainSvg} />
-            <div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
+            )}
           </div>
-        )
-      ) : (
-        <div class={classes.tasks_container}>
-          <div class="mb-8 flex w-full flex-row items-center justify-between text-xl font-semibold sm:text-3xl md:text-5xl">
-            {searchQuery ? "Результаты поиска" : "Результаты фильтрации"}
-            <div class="flex flex-row items-center gap-2 md:hidden">
-              {!openSearchModal && (
-                <div
-                  class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    if (!openSearchModal) setOpenFilterModal(false);
-                    setOpenSearchModal(!openSearchModal);
+          {openSearchModal && (
+            <div class="fixed bottom-28 z-50 w-full rounded-lg bg-white p-4 shadow-lg md:absolute md:right-[24rem] md:mx-0 md:w-80">
+              {/* Пофиксить разфокус при вводе */}
+              <div class="flex items-center gap-2">
+                <MagnifyingGlassIcon class="size-6 text-gray-400" />
+                <input
+                  type="text"
+                  class="w-full rounded-lg border-0 px-4 py-2 outline-none"
+                  placeholder="Поиск"
+                  ref={searchInputRef}
+                  value={searchQuery}
+                  onInput={(e) => {
+                    setSearchQuery((e.target as HTMLInputElement).value);
                   }}
-                >
-                  <MagnifyingGlassIcon class="size-6" />
-                </div>
-              )}
-              <div class="flex aspect-square h-12 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] hover:bg-[rgba(206,232,251,0.9)]">
-                <FunnelIcon
-                  class="size-6"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    if (!openFilterModal) setOpenSearchModal(false);
-                    setOpenFilterModal(!openFilterModal);
+                />
+                <XMarkIcon
+                  class="size-5 cursor-pointer text-gray-400 hover:text-gray-600"
+                  onClick={() => {
+                    setSearchQuery("");
+                    setOpenSearchModal(false);
                   }}
                 />
               </div>
             </div>
-          </div>
-          {filteredTasks.length > 0 ? (
-            filteredTasks.map((task) => (
-              <Task
-                name={task.name}
-                priority={task.priority}
-                key={task.id}
-                checked={task.checked}
-                overdue={task.date < new Date()}
-                onClick={() => handleViewTask(task.id)}
-                onMarkClick={() => handleMarkTask(task.id)}
-              />
-            ))
-          ) : (
-            <div class="w-full text-center text-xl">
-              {searchQuery ? "Ничего не найдено" : "Нет задач с выбранными фильтрами"}
+          )}
+          {openFilterModal && (
+            <div class="fixed top-[50%] z-50 w-full rounded-[2rem] bg-white p-4 shadow-lg md:absolute md:top-auto md:right-[24rem] md:bottom-28 md:w-80">
+              <div class="flex flex-col gap-4">
+                <div class="text-center text-lg font-semibold">Фильтры</div>
+                <div class="flex flex-col gap-2">
+                  <div class="flex flex-row gap-2">
+                    <Checkbox
+                      name="overdue"
+                      checked={filterTags.overdue}
+                      onChange={(e) => {
+                        setFilterTags({ ...filterTags, overdue: e.target.checked! });
+                      }}
+                      pt={{
+                        root: {
+                          className: cn("cursor-pointer inline-flex relative select-none align-bottom", "w-6 h-6"),
+                        },
+                        input: {
+                          className: cn(
+                            "absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer"
+                          ),
+                        },
+                        box: ({ props, context }: CheckboxPassThroughMethodOptions) => ({
+                          className: cn(
+                            "flex items-center justify-center",
+                            "border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
+                            {
+                              "border-gray-300 bg-white": !context.checked,
+                              "border-blue-500 bg-blue-500": context.checked,
+                            },
+                            {
+                              "hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]":
+                                !props.disabled,
+                              "cursor-default opacity-60": props.disabled,
+                            }
+                          ),
+                        }),
+                        icon: {
+                          className: "w-4 h-4 transition-all duration-200 text-white text-base",
+                        },
+                      }}
+                    ></Checkbox>
+                    <label htmlFor="overdue" class="cursor-pointer">
+                      Просроченные
+                    </label>
+                  </div>
+                  <div class="relative">
+                    <div
+                      class={cn(
+                        "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2",
+                        {
+                          "bg-[rgba(206,232,251,0.9)]": filterTags.first,
+                        }
+                      )}
+                      onClick={() => {
+                        setOpenFirstList(!openFirstList);
+                        setOpenSecondList(false);
+                      }}
+                    >
+                      <BookOpenIcon class="size-5" />
+                      <span>{subjectChoices.find((s) => s.id === filterTags.first)?.name || "Предмет"}</span>
+                    </div>
+                    {openFirstList && (
+                      <div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
+                        {example_tags.first.map((tag) => {
+                          return (
+                            <div
+                              key={`subject_${tag.id}`}
+                              class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
+                              onClick={() => {
+                                setFilterTags({ ...filterTags, first: tag.id });
+                                setOpenFirstList(false);
+                              }}
+                            >
+                              <div
+                                class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
+                                  "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.first === tag.id,
+                                  "border-[#D4D4D4]": filterTags.first !== tag.id,
+                                })}
+                              >
+                                {filterTags.first === tag.id && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
+                              </div>
+                              <span class="text-sm font-medium text-[#404040]">{tag.name}</span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+
+                  <div class="relative">
+                    <div
+                      class={cn(
+                        "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2",
+                        {
+                          "bg-[rgba(206,232,251,0.9)]": filterTags.second,
+                        }
+                      )}
+                      onClick={() => {
+                        setOpenSecondList(!openSecondList);
+                        setOpenFirstList(false);
+                      }}
+                    >
+                      <DocumentDuplicateIcon class="size-5" />
+                      <span>{taskTypeChoices.find((s) => s.id === filterTags.second)?.name || "Задача"}</span>
+                    </div>
+                    {openSecondList && (
+                      <div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
+                        {example_tags.second.map((tag) => (
+                          <div
+                            key={`taskType_${tag.id}`}
+                            class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
+                            onClick={() => {
+                              setFilterTags({ ...filterTags, second: tag.id });
+                              setOpenSecondList(false);
+                            }}
+                          >
+                            <div
+                              class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
+                                "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.second === tag.id,
+                                "border-[#D4D4D4]": filterTags.second !== tag.id,
+                              })}
+                            >
+                              {filterTags.second === tag.id && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
+                            </div>
+                            <span class="text-sm font-medium text-[#404040]">{tag.name}</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  {(filterTags.first || filterTags.second || filterTags.overdue) && (
+                    <button
+                      class="mt-2 w-full rounded-lg bg-red-100 px-4 py-2 text-red-600 hover:bg-red-200"
+                      onClick={() => {
+                        setFilterTags({ first: 0, second: 0, overdue: false });
+                        setOpenFirstList(false);
+                        setOpenSecondList(false);
+                      }}
+                    >
+                      Сбросить фильтры
+                    </button>
+                  )}
+                </div>
+              </div>
             </div>
           )}
-        </div>
-      )}
-      <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
-        <div
-          class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
-          onClick={() => {
-            setIsCreating(true);
-            setIsOpen(true);
-          }}
-        >
-          <PlusIcon />
-        </div>
-        {tasks.length > 0 && (
-          <div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
-            <div
-              class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]"
-              onClick={(e) => {
-                e.stopPropagation();
-                if (!openSearchModal) setOpenFilterModal(false);
-                setOpenSearchModal(!openSearchModal);
-              }}
-            >
-              <MagnifyingGlassIcon class="size-12" />
-            </div>
-            <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
-              <FunnelIcon
-                class="size-12"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (!openFilterModal) setOpenSearchModal(false);
-                  setOpenFilterModal(!openFilterModal);
-                }}
-              />
-            </div>
-          </div>
-        )}
-      </div>
-      {openSearchModal && (
-        <div class="fixed bottom-28 z-50 w-full rounded-lg bg-white p-4 shadow-lg md:absolute md:right-[24rem] md:mx-0 md:w-80">
-          {/* Пофиксить разфокус при вводе */}
-          <div class="flex items-center gap-2">
-            <MagnifyingGlassIcon class="size-6 text-gray-400" />
-            <input
-              type="text"
-              class="w-full rounded-lg border-0 px-4 py-2 outline-none"
-              placeholder="Поиск"
-              ref={searchInputRef}
-              value={searchQuery}
-              onInput={(e) => {
-                setSearchQuery((e.target as HTMLInputElement).value);
-              }}
-            />
-            <XMarkIcon
-              class="size-5 cursor-pointer text-gray-400 hover:text-gray-600"
-              onClick={() => {
-                setSearchQuery("");
-                setOpenSearchModal(false);
-              }}
-            />
-          </div>
-        </div>
-      )}
-      {openFilterModal && (
-        <div class="fixed top-[50%] z-50 w-full rounded-[2rem] bg-white p-4 shadow-lg md:absolute md:top-auto md:right-[24rem] md:bottom-28 md:w-80">
-          <div class="flex flex-col gap-4">
-            <div class="text-center text-lg font-semibold">Фильтры</div>
-            <div class="flex flex-col gap-2">
-              <div class="flex flex-row gap-2">
-                <Checkbox
-                  name="overdue"
-                  checked={filterTags.overdue}
-                  onChange={(e) => {
-                    setFilterTags({ ...filterTags, overdue: e.target.checked! });
-                  }}
-                  pt={{
-                    root: {
-                      className: cn("cursor-pointer inline-flex relative select-none align-bottom", "w-6 h-6"),
-                    },
-                    input: {
-                      className: cn(
-                        "absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer"
-                      ),
-                    },
-                    box: ({ props, context }: CheckboxPassThroughMethodOptions) => ({
-                      className: cn(
-                        "flex items-center justify-center",
-                        "border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
-                        {
-                          "border-gray-300 bg-white": !context.checked,
-                          "border-blue-500 bg-blue-500": context.checked,
-                        },
-                        {
-                          "hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]":
-                            !props.disabled,
-                          "cursor-default opacity-60": props.disabled,
-                        }
-                      ),
-                    }),
-                    icon: {
-                      className: "w-4 h-4 transition-all duration-200 text-white text-base",
-                    },
-                  }}
-                ></Checkbox>
-                <label htmlFor="overdue" class="cursor-pointer">
-                  Просроченные
-                </label>
-              </div>
-              <div class="relative">
-                <div
-                  class={cn(
-                    "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2",
-                    {
-                      "bg-[rgba(206,232,251,0.9)]": filterTags.first,
-                    }
-                  )}
-                  onClick={() => {
-                    setOpenFirstList(!openFirstList);
-                    setOpenSecondList(false);
-                  }}
-                >
-                  <BookOpenIcon class="size-5" />
-                  <span>{subjectChoices.find((s) => s.id === filterTags.first)?.name || "Предмет"}</span>
-                </div>
-                {openFirstList && (
-                  <div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
-                    {example_tags.first.map((tag) => {
-                      return (
-                        <div
-                          key={`subject_${tag.id}`}
-                          class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
-                          onClick={() => {
-                            setFilterTags({ ...filterTags, first: tag.id });
-                            setOpenFirstList(false);
-                          }}
-                        >
-                          <div
-                            class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
-                              "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.first === tag.id,
-                              "border-[#D4D4D4]": filterTags.first !== tag.id,
-                            })}
-                          >
-                            {filterTags.first === tag.id && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
-                          </div>
-                          <span class="text-sm font-medium text-[#404040]">{tag.name}</span>
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-
-              <div class="relative">
-                <div
-                  class={cn(
-                    "flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2",
-                    {
-                      "bg-[rgba(206,232,251,0.9)]": filterTags.second,
-                    }
-                  )}
-                  onClick={() => {
-                    setOpenSecondList(!openSecondList);
-                    setOpenFirstList(false);
-                  }}
-                >
-                  <DocumentDuplicateIcon class="size-5" />
-                  <span>{taskTypeChoices.find((s) => s.id === filterTags.second)?.name || "Задача"}</span>
-                </div>
-                {openSecondList && (
-                  <div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
-                    {example_tags.second.map((tag) => (
-                      <div
-                        key={`taskType_${tag.id}`}
-                        class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
-                        onClick={() => {
-                          setFilterTags({ ...filterTags, second: tag.id });
-                          setOpenSecondList(false);
-                        }}
-                      >
-                        <div
-                          class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
-                            "border-[#FBC2C7] bg-[#FBC2C7]": filterTags.second === tag.id,
-                            "border-[#D4D4D4]": filterTags.second !== tag.id,
-                          })}
-                        >
-                          {filterTags.second === tag.id && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
-                        </div>
-                        <span class="text-sm font-medium text-[#404040]">{tag.name}</span>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-
-              {(filterTags.first || filterTags.second || filterTags.overdue) && (
-                <button
-                  class="mt-2 w-full rounded-lg bg-red-100 px-4 py-2 text-red-600 hover:bg-red-200"
-                  onClick={() => {
-                    setFilterTags({ first: 0, second: 0, overdue: false });
-                    setOpenFirstList(false);
-                    setOpenSecondList(false);
-                  }}
-                >
-                  Сбросить фильтры
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
+        </>
       )}
     </div>
   );

src/services/avatar-pic.ts

@@ -0,0 +1,21 @@
+import Status1 from "@/assets/status/1.png";
+import Status2 from "@/assets/status/2.png";
+import Status3 from "@/assets/status/3.png";
+import Status4 from "@/assets/status/4.png";
+import Status5 from "@/assets/status/5.png";
+export const getAvatarPicUrl = (status: string) => {
+  switch (true) {
+    case status.includes("точно"):
+      return Status1;
+    case status.includes("плана нет"):
+      return Status2;
+    case status.includes("прокрастинации"):
+      return Status3;
+    case status.includes("3000"):
+      return Status4;
+    case status.includes("планирования"):
+      return Status5;
+    default:
+      return Status1;
+  }
+};