Merge branch 'refactor__ProfilePage' into V3

2025-04-05 07:44:38 +00:00 · 2024-08-27 16:29:24 +05:00 · 2024-08-27 16:29:24 +05:00 · c762c4a940
commit c762c4a940
parent 5b68da425b b0eed16d18
23 changed files with 1125 additions and 275 deletions
--- a/TODO.md
+++ b/TODO.md
@ -24,13 +24,9 @@

 ### Профиль

- [ ] Оценки релизов
- [ ] Динамика просмотра серий
- [ ] Значки команд озвучки\перевода и т.д.
 - [ ] Просмотр комментариев пользователя к релизам и коллекциям.
 - [ ] Редактирование профиля.
- [ ] Уважение настроек приватности пользователя.
- [ ] Добавление друзей.
+- [ ] Просмотр всех оценок

 ## Баги

--- a/app/api/utils.ts
+++ b/app/api/utils.ts
@ -119,12 +119,11 @@ const months = [
  "дек.",
 ];

-export function unixToDate(unix: number, type: string = "short") {
+export function unixToDate(
+  unix: number,
+  type: "full" | "dayMonth" | "dayMonthYear"
+) {
  const date = new Date(unix * 1000);
-  if (type === "short")
-    return (
-      date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear()
-    );
  if (type === "full")
    return (
      date.getDate() +
@ -137,6 +136,12 @@ export function unixToDate(unix: number, type: string = "short") {
      ":" +
      date.getMinutes()
    );
+  if (type === "dayMonth")
+    return date.getDate() + " " + months[date.getMonth()];
+  if (type === "dayMonthYear")
+    return (
+      date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear()
+    );
 }

 export const getSeasonFromUnix = (unix: number) => {
@ -172,18 +177,31 @@ export function sinceUnixDate(unixInSeconds: number) {
  );
 }

-export function minutesToTime(min: number) {
+export function minutesToTime(
+  min: number,
+  type?: "full" | "daysOnly" | "daysHours"
+) {
  const d = Math.floor(min / 1440); // 60*24
  const h = Math.floor((min - d * 1440) / 60);
  const m = Math.round(min % 60);

  var dDisplay =
-    d > 0 ? `${d} ${numberDeclension(d, "день", "дня", "дней")}, ` : "";
+    d > 0 ? `${d} ${numberDeclension(d, "день", "дня", "дней")}` : "";
  var hDisplay =
-    h > 0 ? `${h} ${numberDeclension(h, "час", "часа", "часов")}, ` : "";
+    h > 0 ? `${h} ${numberDeclension(h, "час", "часа", "часов")}` : "";
  var mDisplay =
    m > 0 ? `${m} ${numberDeclension(m, "минута", "минуты", "минут")}` : "";
-  return dDisplay + hDisplay + mDisplay;
+
+  if (type == "daysOnly") {
+    if (d > 0) return dDisplay;
+    return "? дней";
+  } else if (type == "daysHours") {
+    if (d > 0 && h > 0) return dDisplay + ", " + hDisplay;
+    if (h > 0) return hDisplay;
+    if (m > 0) return mDisplay;
+  } else {
+    return `${dDisplay}${h > 0 && ", " + hDisplay}${m > 0 && ", " + mDisplay}`;
+  }
 }

 const StatusList: Record<string, null | number> = {
--- a/app/components/Chip/Chip.tsx
+++ b/app/components/Chip/Chip.tsx
@ -5,12 +5,14 @@ export const Chip = (props: {
  name_2?: string;
  devider?: string;
  bg_color?: string;
+  style?: React.CSSProperties;
 }) => {
  return (
    <div
      className={`px-2 sm:px-4 py-0.5 sm:py-1 rounded-sm ${
        props.bg_color || "bg-gray-500"
      } ${props.icon_name ? "flex items-center justify-center gap-1" : ""}`}
+      style={props.style || {}}
    >
      {props.icon_name && (
        <span
--- a/app/components/Profile/Profile.Actions.tsx
+++ b/app/components/Profile/Profile.Actions.tsx
@ -0,0 +1,148 @@
+"use client";
+import { ENDPOINTS } from "#/api/config";
+import { Card, Button } from "flowbite-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import useSWR, { useSWRConfig } from "swr";
+
+// null - не друзья
+// 0 - заявка в друзья authUserId < profileId
+// 1 - заявка в друзья authUserId > profileId
+// 2 - друзья
+
+// если id профиля больше id юзера, то 0 иначе 1
+
+export const ProfileActions = (props: {
+  isMyProfile: boolean;
+  isFriendRequestsDisallowed: boolean;
+  profile_id: number;
+  my_profile_id: number;
+  friendStatus: number;
+  token: string;
+  is_me_blocked: boolean;
+  is_blocked: boolean;
+}) => {
+  const router = useRouter();
+  const profileIdIsSmaller = props.my_profile_id < props.profile_id;
+  const [friendRequestDisabled, setFriendRequestDisabled] = useState(false);
+  const [blockRequestDisabled, setBlockRequestDisabled] = useState(false);
+  const { mutate } = useSWRConfig();
+  function _getFriendStatus() {
+    const num = props.friendStatus;
+
+    if (num == null) {
+      return null;
+    }
+    let z = true;
+    if (num == 2) {
+      return 1;
+    }
+    let z3 =
+      (num == 0 && profileIdIsSmaller) || (num == 1 && !profileIdIsSmaller);
+    if ((num != 1 || profileIdIsSmaller) && (num != 0 || !profileIdIsSmaller)) {
+      z = false;
+    }
+    if (z3) {
+      return 2;
+    }
+    if (z) {
+      return 3;
+    }
+    return 0;
+  }
+  const FriendStatus = _getFriendStatus();
+  const isRequestedStatus =
+    FriendStatus != null
+      ? profileIdIsSmaller
+        ? profileIdIsSmaller && FriendStatus != 0
+        : !profileIdIsSmaller && FriendStatus == 2
+      : null;
+  // ^ This is some messed up shit
+
+  function _addToFriends() {
+    let url = `${ENDPOINTS.user.profile}/friend/request`;
+    setFriendRequestDisabled(true);
+    setBlockRequestDisabled(true);
+
+    FriendStatus == 1
+      ? (url += "/remove/")
+      : isRequestedStatus
+      ? (url += "/remove/")
+      : (url += "/send/");
+
+    url += `${props.profile_id}?token=${props.token}`;
+    fetch(url).then((res) => {
+      mutate(
+        `${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}`
+      );
+      setTimeout(() => {
+        setBlockRequestDisabled(false);
+        setFriendRequestDisabled(false);
+      }, 100);
+    });
+  }
+
+  function _addToBlocklist() {
+    let url = `${ENDPOINTS.user.profile}/blocklist`;
+    setBlockRequestDisabled(true);
+    setFriendRequestDisabled(true);
+
+    !props.is_blocked ? (url += "/add/") : (url += "/remove/");
+
+    url += `${props.profile_id}?token=${props.token}`;
+    fetch(url).then((res) => {
+      mutate(
+        `${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}`
+      );
+      setTimeout(() => {
+        setBlockRequestDisabled(false);
+        setFriendRequestDisabled(false);
+      }, 100);
+    });
+  }
+
+  return (
+    <Card className="h-fit">
+      {isRequestedStatus != null && !isRequestedStatus && FriendStatus != 1 && (
+        <p>Отправил(-а) вам заявку в друзья</p>
+      )}
+      <div className="flex gap-2">
+        {props.isMyProfile && <Button color={"blue"}>Редактировать</Button>}
+        {!props.isMyProfile && (
+          <>
+            {(!props.isFriendRequestsDisallowed ||
+              FriendStatus == 1 ||
+              isRequestedStatus) &&
+              !props.is_me_blocked &&
+              !props.is_blocked && (
+                <Button
+                  disabled={friendRequestDisabled}
+                  color={
+                    FriendStatus == 1
+                      ? "red"
+                      : isRequestedStatus
+                      ? "light"
+                      : "blue"
+                  }
+                  onClick={() => _addToFriends()}
+                >
+                  {FriendStatus == 1
+                    ? "Удалить из друзей"
+                    : isRequestedStatus
+                    ? "Заявка отправлена"
+                    : "Добавить в друзья"}
+                </Button>
+              )}
+            <Button
+              color={!props.is_blocked ? "red" : "blue"}
+              disabled={blockRequestDisabled}
+              onClick={() => _addToBlocklist()}
+            >
+              {!props.is_blocked ? "Заблокировать" : "Разблокировать"}
+            </Button>
+          </>
+        )}
+      </div>
+    </Card>
+  );
+};
--- a/app/components/Profile/Profile.Activity.tsx
+++ b/app/components/Profile/Profile.Activity.tsx
@ -0,0 +1,49 @@
+"use client";
+import { Card } from "flowbite-react";
+import Link from "next/link";
+import { numberDeclension } from "#/api/utils";
+
+export function ProfileActivity(props: {
+  profile_id: number;
+  commentCount: number;
+  videoCount: number;
+  collectionCount: number;
+  friendsCount: number;
+}) {
+  return (
+    <Card className="h-fit">
+      <h1 className="text-2xl font-bold">Активность</h1>
+      <div className="flex items-center gap-4 text-lg">
+        <div>
+          <p>
+            {props.commentCount}{" "}
+            {numberDeclension(
+              props.commentCount,
+              "комментарий",
+              "комментария",
+              "комментариев"
+            )}
+          </p>
+          <p className="mt-2">{props.videoCount} видео</p>
+        </div>
+        <div>
+          <Link href={`/profile/${props.profile_id}/collections`}>
+            <p className="border-b-2 border-gray-300 border-solid dark:border-gray-400 hover:border-gray-500 dark:hover:border-gray-200">
+              {props.collectionCount}{" "}
+              {numberDeclension(
+                props.commentCount,
+                "коллекция",
+                "коллекции",
+                "коллекций"
+              )}
+            </p>
+          </Link>
+          <p className="mt-2">
+            {props.friendsCount}{" "}
+            {numberDeclension(props.commentCount, "друзей", "друга", "друзей")}
+          </p>
+        </div>
+      </div>
+    </Card>
+  );
+}
--- a/app/components/Profile/Profile.PrivacyBanner.tsx
+++ b/app/components/Profile/Profile.PrivacyBanner.tsx
@ -0,0 +1,26 @@
+export const ProfilePrivacyBanner = (props: {
+  is_privacy: boolean;
+  is_me_blocked: boolean;
+}) => {
+  return (
+    <>
+      {props.is_privacy && (
+        <div
+          className={`flex flex-col justify-between w-full p-4 border rounded-md md:flex-row ${
+            !props.is_me_blocked
+              ? "border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600"
+              : "border-red-200 bg-red-50 dark:bg-red-700 dark:border-red-600"
+          }`}
+        >
+          <div className="mb-4 md:mb-0 md:me-4">
+            <p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-200">
+              {!props.is_me_blocked
+                ? "У пользователя установлены настройки приватности. Некоторая информация для вас может быть недоступна."
+                : "Вы заблокированы данным пользователем. Его информация для вас не доступна."}
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
--- a/app/components/Profile/Profile.ReleaseHistory.tsx
+++ b/app/components/Profile/Profile.ReleaseHistory.tsx
@ -0,0 +1,40 @@
+import { Card, Carousel, RatingStar, Rating } from "flowbite-react";
+import type {
+  FlowbiteCarouselIndicatorsTheme,
+  FlowbiteCarouselControlTheme,
+} from "flowbite-react";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
+
+const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
+  active: {
+    off: "bg-gray-300/50 hover:bg-gray-400 dark:bg-gray-400/50 dark:hover:bg-gray-200",
+    on: "bg-gray-600 dark:bg-gray-200",
+  },
+  base: "h-3 w-3 rounded-full",
+  wrapper: "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3",
+};
+
+const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
+  base: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-600/30 group-hover:bg-gray-600/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-gray-600 dark:bg-gray-400/30 dark:group-hover:bg-gray-400/60 dark:group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
+  icon: "h-5 w-5 text-gray-600 dark:text-gray-400 sm:h-6 sm:w-6",
+};
+
+const CarouselTheme = {
+  indicators: CarouselIndicatorsTheme,
+  control: CarouselControlsTheme,
+};
+
+export const ProfileReleaseHistory = (props: any) => {
+  return (
+    <Card className="h-fit">
+      <h1 className="text-2xl font-bold">Недавно просмотренные</h1>
+      <div className="max-w-[700px] min-h-[200px]">
+        <Carousel theme={CarouselTheme}>
+          {props.history.map((release) => {
+            return <ReleaseLink key={`history-${release.id}`} {...release} />;
+          })}
+        </Carousel>
+      </div>
+    </Card>
+  );
+};
--- a/app/components/Profile/Profile.ReleaseRatings.tsx
+++ b/app/components/Profile/Profile.ReleaseRatings.tsx
@ -0,0 +1,67 @@
+import { Card, Carousel, RatingStar, Rating } from "flowbite-react";
+import type {
+  FlowbiteCarouselIndicatorsTheme,
+  FlowbiteCarouselControlTheme,
+} from "flowbite-react";
+import Image from "next/image";
+import { unixToDate } from "#/api/utils";
+import Link from "next/link";
+
+const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
+  active: {
+    off: "bg-gray-300/50 hover:bg-gray-400 dark:bg-gray-400/50 dark:hover:bg-gray-200",
+    on: "bg-gray-600 dark:bg-gray-200",
+  },
+  base: "h-3 w-3 rounded-full",
+  wrapper: "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3",
+};
+
+const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
+  base: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-600/30 group-hover:bg-gray-600/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-gray-600 dark:bg-gray-400/30 dark:group-hover:bg-gray-400/60 dark:group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
+  icon: "h-5 w-5 text-gray-600 dark:text-gray-400 sm:h-6 sm:w-6",
+};
+
+const CarouselTheme = {
+  indicators: CarouselIndicatorsTheme,
+  control: CarouselControlsTheme,
+};
+
+export const ProfileReleaseRatings = (props: any) => {
+  return (
+    <Card className="h-fit">
+      <h1 className="text-2xl font-bold">Оценки</h1>
+      <div className="max-w-[700px] min-h-[200px]">
+        <Carousel theme={CarouselTheme}>
+          {props.ratings.map((release) => {
+            return (
+              <Link href={`/release/${release.id}`} key={`vote-${release.id}`}>
+                <div className="flex gap-4 xl:mx-20">
+                  <Image
+                    src={release.image}
+                    width={100}
+                    height={125}
+                    alt=""
+                    className="object-cover border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800 w-[100px] h-[125px]"
+                  />
+                  <div className="flex flex-col gap-1 py-4">
+                    <h2 className="text-lg">{release.title_ru}</h2>
+                    <Rating size="md">
+                      <RatingStar filled={release.my_vote >= 1} />
+                      <RatingStar filled={release.my_vote >= 2} />
+                      <RatingStar filled={release.my_vote >= 3} />
+                      <RatingStar filled={release.my_vote >= 4} />
+                      <RatingStar filled={release.my_vote >= 5} />
+                    </Rating>
+                    <h2 className="text-gray-500 text-md dark:text-gray-400">
+                      {unixToDate(release.voted_at, "full")}
+                    </h2>
+                  </div>
+                </div>
+              </Link>
+            );
+          })}
+        </Carousel>
+      </div>
+    </Card>
+  );
+};
--- a/app/components/Profile/Profile.Stats.tsx
+++ b/app/components/Profile/Profile.Stats.tsx
@ -0,0 +1,110 @@
+import { Card } from "flowbite-react";
+import Link from "next/link";
+import ApexCharts from "apexcharts";
+import { useEffect } from "react";
+import { minutesToTime } from "#/api/utils";
+
+export const ProfileStats = (props: {
+  lists: Array<number>;
+  watched_count: number;
+  watched_time: number;
+  profile_id: number
+}) => {
+  const getChartOptions = () => {
+    return {
+      series: props.lists,
+      colors: ["#66bb6c", "#b566bb", "#5c6cc0", "#ffca28", "#ef5450"],
+      chart: {
+        height: 240,
+        width: "100%",
+        type: "donut",
+      },
+      stroke: {
+        colors: ["transparent"],
+        lineCap: "",
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      labels: [`Смотрю`, `В планах`, `Просмотрено`, `Отложено`, `Брошено`],
+      legend: {
+        show: false,
+      },
+      responsive: [
+        {
+          breakpoint: 640,
+          options: {
+            chart: {
+              height: 200,
+              width: 200,
+              type: "donut",
+            },
+          },
+        },
+      ],
+    };
+  };
+  useEffect(() => {
+    if (
+      document.getElementById("donut-chart") &&
+      typeof ApexCharts !== "undefined"
+    ) {
+      const chart = new ApexCharts(
+        document.getElementById("donut-chart"),
+        getChartOptions()
+      );
+      chart.render();
+    }
+  }, []);
+
+  return (
+    <Card className="font-light h-fit">
+      <div className="flex justify-between">
+        <h1 className="text-2xl font-bold">Статистика</h1>
+        <Link href={`/profile/${props.profile_id}/bookmarks`}>
+          <div className="flex items-center">
+            <p className="hidden text-xl font-bold sm:block">Показать все</p>
+            <span className="w-6 h-6 iconify mdi--arrow-right"></span>
+          </div>
+        </Link>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <p className="align-center whitespace-nowrap">
+            <span className="inline-block rounded w-4 h-4 bg-[#66bb6c]"></span>{" "}
+            Смотрю <span className="font-bold">{props.lists[0]}</span>
+          </p>
+          <p className="align-center whitespace-nowrap">
+            <span className="inline-block rounded w-4 h-4 bg-[#b566bb]"></span>{" "}
+            В планах <span className="font-bold">{props.lists[1]}</span>
+          </p>
+          <p className="align-center whitespace-nowrap">
+            <span className="inline-block rounded w-4 h-4 bg-[#5c6cc0]"></span>{" "}
+            Просмотрено <span className="font-bold">{props.lists[2]}</span>
+          </p>
+          <p className="align-center whitespace-nowrap">
+            <span className="inline-block rounded w-4 h-4 bg-[#ffca28]"></span>{" "}
+            Отложено <span className="font-bold">{props.lists[3]}</span>
+          </p>
+          <p className="align-center whitespace-nowrap">
+            <span className="inline-block rounded w-4 h-4 bg-[#ef5450]"></span>{" "}
+            Брошено <span className="font-bold">{props.lists[4]}</span>
+          </p>
+        </div>
+        <div id="donut-chart"></div>
+      </div>
+      <div>
+        <p>
+          Просмотрено серий:{" "}
+          <span className="font-bold">{props.watched_count}</span>
+        </p>
+        <p>
+          Время просмотра:{" "}
+          <span className="font-bold">
+            ~{minutesToTime(props.watched_time, "daysHours")}
+          </span>
+        </p>
+      </div>
+    </Card>
+  );
+};
--- a/app/components/Profile/Profile.User.tsx
+++ b/app/components/Profile/Profile.User.tsx
@ -0,0 +1,145 @@
+"use client";
+import { Avatar, Card, Button } from "flowbite-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Chip } from "../Chip/Chip";
+
+export const ProfileUser = (props: {
+  isOnline: boolean;
+  avatar: string;
+  login: string;
+  status: string;
+  socials: {
+    isPrivate: boolean;
+    hasSocials: boolean;
+    socials: {
+      name: string;
+      nickname: any;
+      icon: string;
+      urlPrefix?: string | undefined;
+    }[];
+  };
+  chips: {
+    hasChips: boolean;
+    isMyProfile: boolean;
+    isVerified: boolean;
+    isSponsor: boolean;
+    isBlocked: boolean;
+    roles?: {
+      id: number;
+      name: string;
+      color: string;
+    }[];
+  };
+  rating: number;
+}) => {
+  const router = useRouter();
+  return (
+    <Card className="h-fit">
+      {props.chips.hasChips && (
+        <div className="flex gap-1 overflow-x-auto scrollbar-thin">
+          {props.chips.isMyProfile && (
+            <Chip bg_color="bg-blue-500" name="Мой профиль" />
+          )}
+          {props.chips.isVerified && (
+            <Chip bg_color="bg-green-500" name="Верифицирован" />
+          )}
+          {props.chips.isSponsor && (
+            <Chip bg_color="bg-yellow-500" name="Спонсор Anixart" />
+          )}
+          {props.chips.isBlocked && (
+            <Chip bg_color="bg-red-500" name="Заблокирован" />
+          )}
+          {props.chips.roles &&
+            props.chips.roles.length > 0 &&
+            props.chips.roles.map((role: any) => (
+              <Chip
+                key={role.id}
+                bg_color={`bg-[var(--role-color)]`}
+                name={role.name}
+                style={
+                  {
+                    "--role-color": `#${role.color}`,
+                  } as React.CSSProperties
+                }
+              />
+            ))}
+        </div>
+      )}
+      <Avatar
+        alt=""
+        img={props.avatar}
+        rounded={true}
+        size={"lg"}
+        className="relative flex-col items-center justify-center sm:justify-start sm:flex-row"
+        bordered={true}
+        color={props.isOnline ? "success" : "light"}
+      >
+        <div className="space-y-1 text-2xl font-medium whitespace-pre-wrap dark:text-white">
+          <div className="text-center sm:text-left">
+            {props.login}{" "}
+            <span
+              className={`border rounded-md px-2 py-1 text-sm ${
+                props.rating > 0
+                  ? "border-green-500 text-green-500"
+                  : "border-red-500 text-red-500"
+              }`}
+            >
+              {props.rating}
+            </span>
+          </div>
+          <div className="text-sm text-gray-500 whitespace-pre-wrap sm:text-md dark:text-gray-400 ">
+            {props.status}
+          </div>
+        </div>
+      </Avatar>
+      {props.socials.hasSocials && !props.socials.isPrivate && (
+        <div className="flex items-center gap-1 overflow-x-auto scrollbar-thin">
+          {props.socials.socials
+            .filter((social: any) => {
+              if (social.nickname == "") {
+                return false;
+              }
+              return true;
+            })
+            .map((social: any) => {
+              if (social.name == "discord" && social.nickname != "")
+                return (
+                  <Button
+                    color="light"
+                    key={social.name}
+                    onClick={() => {
+                      window.navigator.clipboard.writeText(social.nickname);
+                      alert("Скопировано!");
+                    }}
+                  >
+                    <div className="flex items-center justify-center gap-2">
+                      <span
+                        className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
+                      ></span>
+                      {social.nickname}
+                    </div>
+                  </Button>
+                );
+              return (
+                <Link
+                  key={social.name}
+                  href={`${social.urlPrefix}${social.nickname}`}
+                  target="_blank"
+                >
+                  <Button color="light">
+                    <div className="flex items-center justify-center gap-2">
+                      <span
+                        className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
+                      ></span>
+                      {social.nickname}
+                    </div>
+                  </Button>
+                </Link>
+              );
+            })}
+        </div>
+      )}
+    </Card>
+  );
+};
--- a/app/components/Profile/Profile.WatchDynamic.tsx
+++ b/app/components/Profile/Profile.WatchDynamic.tsx
@ -0,0 +1,102 @@
+import { Card } from "flowbite-react";
+import ApexCharts, { ApexOptions } from "apexcharts";
+import { useEffect } from "react";
+import { unixToDate } from "#/api/utils";
+export const ProfileWatchDynamic = (props: { watchDynamic: Array<any> }) => {
+  const lastTenDays = props.watchDynamic.slice(
+    Math.max(props.watchDynamic.length - 10, 0)
+  );
+  const data = {
+    ids: lastTenDays.map((item) => item.id),
+    counts: lastTenDays.map((item) => item.count),
+    timestamps: lastTenDays.map((item) =>
+      unixToDate(item.timestamp, "dayMonth")
+    ),
+  };
+
+  const options: ApexOptions = {
+    chart: {
+      height: "100%",
+      type: "area",
+      fontFamily: "Inter, sans-serif",
+      dropShadow: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    tooltip: {
+      enabled: true,
+      x: {
+        show: false,
+      },
+    },
+    fill: {
+      type: "gradient",
+      gradient: {
+        opacityFrom: 0.55,
+        opacityTo: 0,
+        shade: "#1C64F2",
+        gradientToColors: ["#1C64F2"],
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      width: 6,
+    },
+    grid: {
+      show: true,
+      strokeDashArray: 4,
+      padding: {
+        left: 2,
+        right: 2,
+        top: 0,
+      },
+    },
+    series: [
+      {
+        name: "Серий",
+        data: data.counts,
+        color: "#1C64F2",
+      },
+    ],
+    xaxis: {
+      categories: data.timestamps,
+      labels: {
+        show: false,
+      },
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+    },
+    yaxis: {
+      show: false,
+    },
+  };
+
+  useEffect(() => {
+    if (
+      document.getElementById("area-chart") &&
+      typeof ApexCharts !== "undefined"
+    ) {
+      const chart = new ApexCharts(
+        document.getElementById("area-chart"),
+        options
+      );
+      chart.render();
+    }
+  }, []);
+
+  return (
+    <Card>
+      <h1 className="text-2xl font-bold">Динамика просмотра серий</h1>
+      <div id="area-chart"></div>
+    </Card>
+  );
+};
--- a/app/components/Profile/ProfileBannedBanner.tsx
+++ b/app/components/Profile/ProfileBannedBanner.tsx
@ -0,0 +1,28 @@
+import { unixToDate } from "#/api/utils";
+
+export const ProfileBannedBanner = (props: {
+  is_banned: boolean;
+  is_perm_banned: boolean;
+  ban_reason: string;
+  ban_expires: number;
+}) => {
+  return (
+    <>
+      {(props.is_banned || props.is_perm_banned) && (
+        <div className="flex flex-col justify-between w-full p-4 border border-red-200 rounded-md md:flex-row bg-red-50 dark:bg-red-700 dark:border-red-600">
+          <div className="mb-4 md:mb-0 md:me-4">
+            <h2 className="mb-1 text-base font-semibold text-gray-900 dark:text-white">
+              {props.is_perm_banned
+                ? "Пользователь был заблокирован администрацией навсегда"
+                : `Пользователь был заблокирован администрацией до
+              ${unixToDate(props.ban_expires, "full")}`}
+            </h2>
+            <p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-200">
+              {props.ban_reason}
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
--- a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
@ -133,7 +133,7 @@ export const ReleaseInfoInfo = (props: {
              </Table.Cell>
              <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
                {props.aired_on_date != 0 ? (
-                  unixToDate(props.aired_on_date)
+                  unixToDate(props.aired_on_date, "full")
                ) : props.year ? (
                  <>
                    {props.season && props.season != 0
--- a/app/components/ReleaseLink/ReleaseLink.Poster.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.Poster.tsx
@ -1,5 +1,4 @@
 import Link from "next/link";
-import { sinceUnixDate } from "#/api/utils";
 import { Chip } from "#/components/Chip/Chip";

 const profile_lists = {
--- a/app/pages/Bookmarks.tsx
+++ b/app/pages/Bookmarks.tsx
@ -10,7 +10,7 @@ import { ENDPOINTS } from "#/api/config";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";

-export function BookmarksPage() {
+export function BookmarksPage(props: { profile_id?: number }) {
  const token = useUserStore((state) => state.token);
  const authState = useUserStore((state) => state.state);
  const router = useRouter();
@ -18,8 +18,15 @@ export function BookmarksPage() {
  function useFetchReleases(listName: string) {
    let url: string;

-    if (token) {
-      url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?token=${token}`;
+    if (props.profile_id) {
+      url = `${ENDPOINTS.user.bookmark}/all/${props.profile_id}/${BookmarksList[listName]}/0?sort=1`;
+      if (token) {
+        url += `&token=${token}`;
+      }
+    } else {
+      if (token) {
+        url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?sort=1&token=${token}`;
+      }
    }

    const { data } = useSWR(url, fetcher);
@ -33,7 +40,7 @@ export function BookmarksPage() {
  const [abandonedData] = useFetchReleases("abandoned");

  useEffect(() => {
-    if (authState === "finished" && !token) {
+    if (authState === "finished" && !token && !props.profile_id) {
      router.push("/login?redirect=/bookmarks");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
@ -56,28 +63,44 @@ export function BookmarksPage() {
        watchingData.content.length > 0 && (
          <ReleaseCourusel
            sectionTitle="Смотрю"
-            showAllLink="/bookmarks/watching"
+            showAllLink={
+              !props.profile_id
+                ? "/bookmarks/watching"
+                : `/profile/${props.profile_id}/bookmarks/watching`
+            }
            content={watchingData.content}
          />
        )}
      {plannedData && plannedData.content && plannedData.content.length > 0 && (
        <ReleaseCourusel
          sectionTitle="В планах"
-          showAllLink="/bookmarks/planned"
+          showAllLink={
+            !props.profile_id
+              ? "/bookmarks/planned"
+              : `/profile/${props.profile_id}/bookmarks/planned`
+          }
          content={plannedData.content}
        />
      )}
      {watchedData && watchedData.content && watchedData.content.length > 0 && (
        <ReleaseCourusel
          sectionTitle="Просмотрено"
-          showAllLink="/bookmarks/watched"
+          showAllLink={
+            !props.profile_id
+              ? "/bookmarks/watched"
+              : `/profile/${props.profile_id}/bookmarks/watched`
+          }
          content={watchedData.content}
        />
      )}
      {delayedData && delayedData.content && delayedData.content.length > 0 && (
        <ReleaseCourusel
          sectionTitle="Отложено"
-          showAllLink="/bookmarks/delayed"
+          showAllLink={
+            !props.profile_id
+              ? "/bookmarks/delayed"
+              : `/profile/${props.profile_id}/bookmarks/delayed`
+          }
          content={delayedData.content}
        />
      )}
@ -86,7 +109,11 @@ export function BookmarksPage() {
        abandonedData.content.length > 0 && (
          <ReleaseCourusel
            sectionTitle="Заброшено"
-            showAllLink="/bookmarks/abandoned"
+            showAllLink={
+              !props.profile_id
+                ? "/bookmarks/abandoned"
+                : `/profile/${props.profile_id}/bookmarks/abandoned`
+            }
            content={abandonedData.content}
          />
        )}
--- a/app/pages/BookmarksCategory.tsx
+++ b/app/pages/BookmarksCategory.tsx
@ -40,11 +40,22 @@ export function BookmarksCategoryPage(props: any) {

  const getKey = (pageIndex: number, previousPageData: any) => {
    if (previousPageData && !previousPageData.content.length) return null;
-    if (token) {
-      return `${ENDPOINTS.user.bookmark}/all/${
+    let url: string;
+    if (props.profile_id) {
+      url = `${ENDPOINTS.user.bookmark}/all/${props.profile_id}/${
        BookmarksList[props.slug]
-      }/${pageIndex}?token=${token}&sort=${sort.values[selectedSort].id}`;
+      }/${pageIndex}?sort=${sort.values[selectedSort].id}`;
+      if (token) {
+        url += `&token=${token}`;
+      }
+    } else {
+      if (token) {
+        url = `${ENDPOINTS.user.bookmark}/all/${
+          BookmarksList[props.slug]
+        }/${pageIndex}?sort=${sort.values[selectedSort].id}&token=${token}`;
+      }
    }
+    return url;
  };

  const { data, error, isLoading, size, setSize } = useSWRInfinite(
@ -74,7 +85,7 @@ export function BookmarksCategoryPage(props: any) {
  }, [scrollPosition]);

  useEffect(() => {
-    if (authState === "finished" && !token) {
+    if (authState === "finished" && !token && !props.profile_id) {
      router.push(`/login?redirect=/bookmarks/${props.slug}`);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
--- a/app/pages/Profile.tsx
+++ b/app/pages/Profile.tsx
@ -2,30 +2,50 @@
 import { useUserStore } from "#/store/auth";
 import { useEffect, useState } from "react";
 import { Spinner } from "../components/Spinner/Spinner";
-import { Avatar, Card, Button, Table } from "flowbite-react";
-import { Chip } from "../components/Chip/Chip";
-import { fetchDataViaGet, unixToDate, minutesToTime } from "../api/utils";
-import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel";
 import { ENDPOINTS } from "#/api/config";
+import useSWR from "swr";
+
+import { ProfileUser } from "#/components/Profile/Profile.User";
+import { ProfileBannedBanner } from "#/components/Profile/ProfileBannedBanner";
+import { ProfilePrivacyBanner } from "#/components/Profile/Profile.PrivacyBanner";
+import { ProfileActivity } from "#/components/Profile/Profile.Activity";
+import { ProfileStats } from "#/components/Profile/Profile.Stats";
+import { ProfileWatchDynamic } from "#/components/Profile/Profile.WatchDynamic";
+import { ProfileActions } from "#/components/Profile/Profile.Actions";
+import { ProfileReleaseRatings } from "#/components/Profile/Profile.ReleaseRatings";
+import { ProfileReleaseHistory } from "#/components/Profile/Profile.ReleaseHistory";
+
+const fetcher = async (url: string) => {
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    const error = new Error(
+      `An error occurred while fetching the data. status: ${res.status}`
+    );
+    error.message = await res.json();
+    throw error;
+  }
+
+  return res.json();
+};

 export const ProfilePage = (props: any) => {
-  const authUser = useUserStore((state) => state);
+  const authUser = useUserStore();
  const [user, setUser] = useState(null);
  const [isMyProfile, setIsMyProfile] = useState(false);

+  let url = `${ENDPOINTS.user.profile}/${props.id}`;
+  if (authUser.token) {
+    url += `?token=${authUser.token}`;
+  }
+  const { data } = useSWR(url, fetcher);
+
  useEffect(() => {
-    async function _getData() {
-      let url = `${ENDPOINTS.user.profile}/${props.id}`;
-      if (authUser.token) {
-        url += `?token=${authUser.token}`;
-      }
-      const data = await fetchDataViaGet(url);
+    if (data) {
      setUser(data.profile);
      setIsMyProfile(data.is_my_profile);
    }
-    _getData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [authUser]);
+  }, [data]);

  if (!user) {
    return (
@ -47,13 +67,13 @@ export const ProfilePage = (props: any) => {
      name: "vk",
      nickname: user.vk_page,
      icon: "fa6-brands--vk",
-      urlPrefix: "https://vk.com",
+      urlPrefix: "https://vk.com/",
    },
    {
      name: "telegram",
      nickname: user.tg_page,
      icon: "fa6-brands--telegram",
-      urlPrefix: "https://t.me",
+      urlPrefix: "https://t.me/",
    },
    {
      name: "discord",
@ -64,249 +84,124 @@ export const ProfilePage = (props: any) => {
      name: "tiktok",
      nickname: user.tt_page,
      icon: "fa6-brands--tiktok",
-      urlPrefix: "https://tiktok.com",
+      urlPrefix: "https://tiktok.com/@",
    },
    {
      name: "instagram",
      nickname: user.inst_page,
      icon: "fa6-brands--instagram",
-      urlPrefix: "https://instagram.com",
+      urlPrefix: "https://instagram.com/",
    },
  ];

-  const hasChips = user.is_verified || user.is_blocked || isMyProfile;
+  const hasChips =
+    user.is_verified ||
+    user.is_blocked ||
+    (user.roles && user.roles.length > 0) ||
+    isMyProfile;
+  const isPrivacy =
+    user.is_stats_hidden || user.is_counts_hidden || user.is_social_hidden;

  return (
-    <main className="container flex flex-col gap-4 px-4 pt-4 pb-32 mx-auto overflow-hidden sm:pb-4">
-      {(user.is_banned || user.is_perm_banned) && (
-        <div className="flex flex-col justify-between w-full p-4 border border-red-200 rounded-md md:flex-row bg-red-50 dark:bg-red-700 dark:border-red-600">
-          <div className="mb-4 md:mb-0 md:me-4">
-            <h2 className="mb-1 text-base font-semibold text-gray-900 dark:text-white">
-              {user.is_perm_banned
-                ? "Пользователь был заблокирован администрацией навсегда"
-                : `Пользователь был заблокирован администрацией до
-              ${unixToDate(user.ban_expires)}`}
-            </h2>
-            <p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-200">
-              {user.ban_reason}
-            </p>
-          </div>
+    <>
+      <div className="flex flex-col gap-2">
+        <ProfileBannedBanner
+          is_banned={user.is_banned}
+          is_perm_banned={user.is_perm_banned}
+          ban_reason={user.ban_reason}
+          ban_expires={user.ban_expires}
+        />
+        <ProfilePrivacyBanner
+          is_privacy={isPrivacy}
+          is_me_blocked={user.is_me_blocked}
+        />
+      </div>
+      <div
+        className={`flex flex-wrap gap-2 ${
+          isPrivacy || user.is_banned || user.is_perm_banned ? "mt-4" : ""
+        }`}
+      >
+        <div className="flex flex-col gap-2 w-full xl:w-[50%]">
+          <ProfileUser
+            isOnline={user.is_online}
+            avatar={user.avatar}
+            login={user.login}
+            status={user.status}
+            socials={{
+              isPrivate: user.is_social_hidden,
+              hasSocials: hasSocials,
+              socials: socials,
+            }}
+            chips={{
+              hasChips: hasChips,
+              isMyProfile: isMyProfile,
+              isVerified: user.is_verified,
+              isSponsor: user.is_sponsor,
+              isBlocked: user.is_blocked,
+              roles: user.roles,
+            }}
+            rating={user.rating_score}
+          />
+          {!user.is_counts_hidden && (
+            <ProfileActivity
+              profile_id={user.id}
+              commentCount={user.comment_count}
+              videoCount={user.video_count}
+              collectionCount={user.collection_count}
+              friendsCount={user.friend_count}
+            />
+          )}
+          {!user.is_stats_hidden && (
+            <div className="flex-col hidden gap-2 xl:flex">
+              {user.votes && user.votes.length > 0 && (
+                <ProfileReleaseRatings ratings={user.votes} />
+              )}
+              {user.history && user.history.length > 0 && (
+                <ProfileReleaseHistory history={user.history} />
+              )}
+            </div>
+          )}
        </div>
-      )}
-
-      <div className="flex flex-col gap-4">
-        <Card className="max-w-full">
-          {hasChips && (
-            <div className="flex gap-2 overflow-x-auto scrollbar-thin">
-              {isMyProfile && (
-                <Chip bg_color="bg-blue-500" name="Мой профиль" />
-              )}
-              {user.is_blocked && (
-                <Chip bg_color="bg-red-500" name="Заблокирован вами" />
-              )}
-              {user.is_verified && (
-                <Chip bg_color="bg-green-500" name="Подтверждён" />
-              )}
-            </div>
+        <div className="flex flex-col w-full gap-2 xl:flex-1 xl:w-auto ">
+          {authUser.token && (
+            <ProfileActions
+              isMyProfile={isMyProfile}
+              profile_id={user.id}
+              isFriendRequestsDisallowed={user.is_friend_requests_disallowed}
+              friendStatus={user.friend_status}
+              my_profile_id={authUser.user.id}
+              token={authUser.token}
+              is_me_blocked={user.is_me_blocked}
+              is_blocked={user.is_blocked}
+            />
          )}
-          <Avatar
-            img={user.avatar}
-            rounded={true}
-            bordered={true}
-            size="lg"
-            className="flex-col justify-start space-x-0 sm:flex-row sm:space-x-4"
-          >
-            <div className="mt-2 space-y-1 font-medium sm:mt-0 dark:text-white">
-              <div className="text-xl">{user.login}</div>
-              <p className="max-w-full text-sm text-gray-500 whitespace-pre-wrap dark:text-gray-400 sm:max-w-96">
-                {user.status}
-              </p>
-            </div>
-          </Avatar>
-          {hasSocials && (
-            <div className="flex gap-1 overflow-x-auto scrollbar-thin">
-              {socials
-                .filter((social: any) => {
-                  if (social.nickname == "") {
-                    return false;
-                  }
-                  return true;
-                })
-                .map((social: any) => {
-                  if (social.name == "discord" && social.nickname != "")
-                    return (
-                      <Button color="light" key={social.name} as="a">
-                        <div className="flex items-center justify-center gap-2">
-                          <span
-                            className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
-                          ></span>
-                          {social.nickname}
-                        </div>
-                      </Button>
-                    );
-                  return (
-                    <Button
-                      color="light"
-                      key={social.name}
-                      href={`${social.urlPrefix}/${social.nickname}`}
-                      className="[&:is(a)]:hover:bg-gray-100"
-                    >
-                      <div className="flex items-center justify-center gap-2">
-                        <span
-                          className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
-                        ></span>
-                        {social.nickname}
-                      </div>
-                    </Button>
-                  );
-                })}
-            </div>
+          {!user.is_stats_hidden && (
+            <>
+              <ProfileStats
+                lists={[
+                  user.watching_count,
+                  user.plan_count,
+                  user.completed_count,
+                  user.hold_on_count,
+                  user.dropped_count,
+                ]}
+                watched_count={user.watched_episode_count}
+                watched_time={user.watched_time}
+                profile_id={user.id}
+              />
+              <ProfileWatchDynamic watchDynamic={user.watch_dynamics || []} />
+              <div className="flex flex-col gap-2 xl:hidden">
+                {user.votes && user.votes.length > 0 && (
+                  <ProfileReleaseRatings ratings={user.votes} />
+                )}
+                {user.history && user.history.length > 0 && (
+                  <ProfileReleaseHistory history={user.history} />
+                )}
+              </div>
+            </>
          )}
-        </Card>
-        <div className="flex flex-wrap gap-4">
-          <Card className="flex-1 max-w-full">
-            <h1>Активность</h1>
-            <Table>
-              <Table.Body className="divide-y">
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    Регистрация
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {unixToDate(user.register_date)}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    Был(а) в сети
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {unixToDate(user.last_activity_time)}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    Комментарий
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.comment_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    друзей
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.friend_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    видео
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.video_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    коллекций
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.collection_count}
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-          </Card>
-          <Card className="flex-1 max-w-full">
-            <h1>Статистика</h1>
-            <Table>
-              <Table.Body className="divide-y">
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--123 "></span>
-                    Просмотрено серий
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.watched_episode_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row className="hidden sm:table-row">
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--clock "></span>
-                    Время просмотра
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-pre sm:whitespace-nowrap dark:text-white">
-                    {minutesToTime(user.watched_time) ||
-                      "Нет просмотренных серий."}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row className="table-row sm:hidden">
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-pre sm:whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--clock "></span>
-                    {minutesToTime(user.watched_time) ||
-                      "Нет просмотренных серий."}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--play "></span>
-                    Смотрю
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.watching_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--note-multiple "></span>
-                    В Планах
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.plan_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--tick "></span>
-                    Просмотрено
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.completed_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--question-mark "></span>
-                    Отложено
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.hold_on_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--erase "></span>
-                    Брошено
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.dropped_count}
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-          </Card>
        </div>
      </div>
-      {user.history.length > 0 && (
-        <div className="px-4 py-2 bg-white border border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800">
-          <ReleaseCourusel
-            sectionTitle="Недавно просмотренные"
-            content={user.history}
-          />
-        </div>
-      )}
-    </main>
+    </>
  );
 };
--- a/app/profile/[id]/bookmarks/[slug]/page.tsx
+++ b/app/profile/[id]/bookmarks/[slug]/page.tsx
@ -0,0 +1,47 @@
+import { BookmarksCategoryPage } from "#/pages/BookmarksCategory";
+import { fetchDataViaGet } from "#/api/utils";
+import type { Metadata, ResolvingMetadata } from "next";
+
+const SectionTitleMapping = {
+  watching: "Смотрю",
+  planned: "В планах",
+  watched: "Просмотрено",
+  delayed: "Отложено",
+  abandoned: "Заброшено",
+};
+
+export async function generateMetadata(
+  { params },
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const id: string = params.id;
+  const profile: any = await fetchDataViaGet(
+    `https://api.anixart.tv/profile/${id}`
+  );
+  const previousOG = (await parent).openGraph;
+
+  return {
+    title: SectionTitleMapping[params.slug] + " - " + profile.profile.login,
+    description: profile.profile.status,
+    openGraph: {
+      ...previousOG,
+      images: [
+        {
+          url: profile.profile.avatar, // Must be an absolute URL
+          width: 600,
+          height: 600,
+        },
+      ],
+    },
+  };
+}
+
+export default function Index({ params }) {
+  return (
+    <BookmarksCategoryPage
+      slug={params.slug}
+      SectionTitleMapping={SectionTitleMapping}
+      profile_id={params.id}
+    />
+  );
+}
--- a/app/profile/[id]/bookmarks/page.tsx
+++ b/app/profile/[id]/bookmarks/page.tsx
@ -0,0 +1,33 @@
+import { BookmarksPage } from "#/pages/Bookmarks";
+import { fetchDataViaGet } from "#/api/utils";
+import type { Metadata, ResolvingMetadata } from "next";
+
+export async function generateMetadata(
+  { params },
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const id: string = params.id;
+  const profile: any = await fetchDataViaGet(
+    `https://api.anixart.tv/profile/${id}`
+  );
+  const previousOG = (await parent).openGraph;
+
+  return {
+    title: "Закладки - " + profile.profile.login,
+    description: profile.profile.status,
+    openGraph: {
+      ...previousOG,
+      images: [
+        {
+          url: profile.profile.avatar, // Must be an absolute URL
+          width: 600,
+          height: 600,
+        },
+      ],
+    },
+  };
+}
+
+export default function Index({ params }) {
+  return <BookmarksPage profile_id={params.id}/>;
+}
--- a/next.config.js
+++ b/next.config.js
@ -3,6 +3,7 @@ const { withPlausibleProxy } = require("next-plausible");
 module.exports = withPlausibleProxy({
  customDomain: "https://analytics.wah.su",
 })({
+  reactStrictMode: false,
  images: {
    loader: 'custom',
    loaderFile: './imageLoader.ts',
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,7 @@
      "name": "new",
      "version": "0.1.0",
      "dependencies": {
+        "apexcharts": "^3.52.0",
        "deepmerge-ts": "^7.1.0",
        "flowbite": "^2.4.1",
        "flowbite-react": "^0.10.1",
@ -1000,6 +1001,11 @@
      "dev": true,
      "peer": true
    },
+    "node_modules/@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+    },
    "node_modules/acorn": {
      "version": "8.12.1",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@ -1135,6 +1141,20 @@
        "node": ">= 8"
      }
    },
+    "node_modules/apexcharts": {
+      "version": "3.52.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.52.0.tgz",
+      "integrity": "sha512-7dg0ADKs8AA89iYMZMe2sFDG0XK5PfqllKV9N+i3hKHm3vEtdhwz8AlXGm+/b0nJ6jKiaXsqci5LfVxNhtB+dA==",
+      "dependencies": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
    "node_modules/arg": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@ -5324,6 +5344,89 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
    "node_modules/swiper": {
      "version": "11.1.4",
      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.4.tgz",
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "apexcharts": "^3.52.0",
    "deepmerge-ts": "^7.1.0",
    "flowbite": "^2.4.1",
    "flowbite-react": "^0.10.1",
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -12,7 +12,9 @@ module.exports = {
  plugins: [
    addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands"]),
    require("tailwind-scrollbar"),
-    flowbite.plugin(),
+    flowbite.plugin()({
+      charts: true,
+    }),
  ],
  darkMode: "selector",
  theme: {