Merge branch 'feat_collections' into V3

2025-04-05 07:44:38 +00:00 · 2024-08-17 22:53:55 +05:00 · 2024-08-17 22:53:55 +05:00 · 6fcb91f92d
commit 6fcb91f92d
parent dbe9eba23f 45a4720344
32 changed files with 1712 additions and 69 deletions
--- a/TODO.md
+++ b/TODO.md
@ -17,9 +17,8 @@
 ### Коллекции

 - [ ] Создание коллекции
- [ ] Просмотр страницы коллекции
+- [ ] Редактирование коллекции
 - [ ] Добавление \ Удаление аниме в\из коллекции
- [ ] Добавление \ Удаление коллекции в\из избранное
 - [ ] Просмотр комментариев и комментирование

 ### Страница аниме тайтла
--- a/app/api/[...endpoint]/route.ts
+++ b/app/api/[...endpoint]/route.ts
@ -1,6 +1,7 @@
 import { NextResponse, NextRequest } from "next/server";
 import { fetchDataViaGet, fetchDataViaPost } from "../utils";
 import { API_URL } from "../config";
+import { buffer } from "stream/consumers";

 export async function GET(
  req: NextRequest,
@ -25,14 +26,24 @@ export async function POST(
 ) {
  const { endpoint } = params;
  let API_V2: boolean | string =
-  req.nextUrl.searchParams.get("API_V2") || false;
+    req.nextUrl.searchParams.get("API_V2") || false;
  if (API_V2 === "true") {
    req.nextUrl.searchParams.delete("API_V2");
  }
  const query = req.nextUrl.searchParams.toString();
  const url = `${API_URL}/${endpoint.join("/")}${query ? `?${query}` : ""}`;
-  const body = JSON.stringify( await req.json());
+  let body;
+  const ReqContentTypeHeader = req.headers.get("Content-Type") || "";
+  let ResContentTypeHeader = "";

-  const response = await fetchDataViaPost(url, body, API_V2);
+  if (ReqContentTypeHeader.split(";")[0] == "multipart/form-data") {
+    ResContentTypeHeader = ReqContentTypeHeader;
+    body = await req.arrayBuffer();
+  } else {
+    ResContentTypeHeader = "application/json; charset=UTF-8";
+    body = JSON.stringify(await req.json());
+  }
+
+  const response = await fetchDataViaPost(url, body, API_V2, ResContentTypeHeader);
  return NextResponse.json(response);
 }
--- a/app/api/config.ts
+++ b/app/api/config.ts
@ -21,4 +21,15 @@ export const ENDPOINTS = {
    addHistory: `${API_PREFIX}/history/add`,
    markWatched: `${API_PREFIX}/episode/watch`,
  },
+  collection: {
+    base: `${API_PREFIX}/collection`,
+    list: `${API_PREFIX}/collection/list`,
+    create: `${API_PREFIX}/collectionMy/create`,
+    delete: `${API_PREFIX}/collectionMy/delete`,
+    edit: `${API_PREFIX}/collectionMy/edit`,
+    editImage: `${API_PREFIX}/collectionMy/editImage`,
+    releaseInCollections: `${API_PREFIX}/collection/all/release`,
+    userCollections: `${API_PREFIX}/collection/all/profile`,
+    favoriteCollections: `${API_PREFIX}/collectionFavorite`,
+  }
 };
--- a/app/api/utils.ts
+++ b/app/api/utils.ts
@ -28,11 +28,16 @@ export const fetchDataViaGet = async (
 export const fetchDataViaPost = async (
  url: string,
  body: string,
-  API_V2: string | boolean = false
+  API_V2: string | boolean = false,
+  contentType: string = ""
 ) => {
  if (API_V2) {
    HEADERS["API-Version"] = "v2";
  }
+  if (contentType != "") {
+    HEADERS["Content-Type"] = contentType;
+  }
+
  try {
    const response = await fetch(url, {
      method: "POST",
@ -116,8 +121,22 @@ const months = [

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

 export const getSeasonFromUnix = (unix: number) => {
@ -148,7 +167,9 @@ export function sinceUnixDate(unixInSeconds: number) {
  if (dateDifferenceSeconds < 86400) return `${hours} ${hoursName} назад`;
  if (dateDifferenceSeconds < 2592000) return `${days} ${daysName} назад`;

-  return date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear();
+  return (
+    date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear()
+  );
 }

 export function minutesToTime(min: number) {
@ -248,3 +269,31 @@ export const SortList = {
  alphabet_descending: 5,
  alphabet_ascending: 6,
 };
+
+export function b64toBlob(
+  b64Data: string,
+  contentType: string,
+  sliceSize?: number
+) {
+  contentType = contentType || "";
+  sliceSize = sliceSize || 512;
+
+  var byteCharacters = atob(b64Data);
+  var byteArrays = [];
+
+  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+    var slice = byteCharacters.slice(offset, offset + sliceSize);
+
+    var byteNumbers = new Array(slice.length);
+    for (var i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i);
+    }
+
+    var byteArray = new Uint8Array(byteNumbers);
+
+    byteArrays.push(byteArray);
+  }
+
+  var blob = new Blob(byteArrays, { type: contentType });
+  return blob;
+}
--- a/app/collection/[id]/page.tsx
+++ b/app/collection/[id]/page.tsx
@ -0,0 +1,35 @@
+import { ViewCollectionPage } from "#/pages/ViewCollection";
+import { fetchDataViaGet } from "#/api/utils";
+import type { Metadata, ResolvingMetadata } from "next";
+
+export async function generateMetadata(
+  { params },
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const id = params.id;
+  const collection = await fetchDataViaGet(
+    `https://api.anixart.tv/collection/${id}`
+  );
+  const previousOG = (await parent).openGraph;
+
+  return {
+    title: collection.collection
+      ? "коллекция - " + collection.collection.title
+      : "Приватная коллекция",
+    description: collection.collection && collection.collection.description,
+    openGraph: {
+      ...previousOG,
+      images: [
+        {
+          url: collection.collection && collection.collection.image, // Must be an absolute URL
+          width: 600,
+          height: 800,
+        },
+      ],
+    },
+  };
+}
+
+export default async function Collections({ params }) {
+  return <ViewCollectionPage id={params.id} />;
+}
--- a/app/collections/create/page.tsx
+++ b/app/collections/create/page.tsx
@ -0,0 +1,18 @@
+import { CreateCollectionPage } from "#/pages/CreateCollection";
+import dynamic from "next/dynamic";
+
+export const metadata = {
+  title: "Создание коллекции",
+  description: "Создание новой коллекции",
+};
+
+const CreateCollectionDynamic = dynamic(
+  () => Promise.resolve(CreateCollectionPage),
+  {
+    ssr: false,
+  }
+);
+
+export default function Collections() {
+  return <CreateCollectionDynamic />;
+}
--- a/app/collections/favorites/page.tsx
+++ b/app/collections/favorites/page.tsx
@ -0,0 +1,10 @@
+import { CollectionsFullPage } from "#/pages/CollectionsFull";
+
+export const metadata = {
+  title: "Избранные коллекции",
+  description: "Просмотр избранных коллекций",
+};
+
+export default function Collections() {
+  return <CollectionsFullPage type="favorites" title="Избранные коллекции" />;
+}
--- a/app/collections/page.tsx
+++ b/app/collections/page.tsx
@ -0,0 +1,10 @@
+import { CollectionsPage } from "#/pages/Collections";
+
+export const metadata = {
+  title: "Коллекции",
+  description: "Просмотр и управление коллекциями",
+}
+
+export default function Collections() {
+  return <CollectionsPage />;
+}
--- a/app/components/AddCollectionLink/AddCollectionLink.tsx
+++ b/app/components/AddCollectionLink/AddCollectionLink.tsx
@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export const AddCollectionLink = (props: any) => {
+  return (
+    <Link href={`/collections/create`}>
+      <div className="flex flex-col items-center justify-center w-full gap-2 text-black transition-colors bg-gray-100 border hover:bg-gray-200 border-gray-50 hover:border-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-500 aspect-video group dark:bg-gray-600 dark:text-white">
+        <span className="w-8 h-8 iconify mdi--plus-circle dark:fill-white"></span>
+        <p>Новая коллекция</p>
+      </div>
+    </Link>
+  );
+};
--- a/app/components/Chip/Chip.tsx
+++ b/app/components/Chip/Chip.tsx
@ -1,12 +1,29 @@
 export const Chip = (props: {
+  icon_name?: string;
+  icon_color?: string;
  name?: string;
  name_2?: string;
  devider?: string;
  bg_color?: string;
 }) => {
  return (
-    <div className={`rounded-sm ${props.bg_color || "bg-gray-500"}`}>
-      <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
+    <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" : ""}`}
+    >
+      {props.icon_name && (
+        <span
+          className={`iconify w-4 h-4 sm:w-6 sm:h-6 ${props.icon_name}`}
+          style={
+            {
+              "color": "var(--icon-color)",
+              "--icon-color": props.icon_color || "#fff",
+            } as React.CSSProperties
+          }
+        ></span>
+      )}
+      <p className="text-xs text-white xl:text-base">
        {props.name}
        {props.name && props.devider ? props.devider : " "}
        {props.name_2}
--- a/app/components/CollectionCourusel/CollectionCourusel.module.css
+++ b/app/components/CollectionCourusel/CollectionCourusel.module.css
@ -0,0 +1,15 @@
+.swiper-button:global(.swiper-button-disabled) {
+  opacity: 0 !important;
+}
+
+.section .swiper-button {
+  display: none !important;
+}
+
+@media (hover: hover) {
+  .section:hover .swiper-button {
+    display: flex !important;
+    width: 64px;
+    height: 64px;
+  }
+}
--- a/app/components/CollectionCourusel/CollectionCourusel.tsx
+++ b/app/components/CollectionCourusel/CollectionCourusel.tsx
@ -0,0 +1,97 @@
+"use client";
+import { useEffect } from "react";
+import { CollectionLink } from "../CollectionLink/CollectionLink";
+import { AddCollectionLink } from "../AddCollectionLink/AddCollectionLink";
+import Link from "next/link";
+
+import Styles from "./CollectionCourusel.module.css";
+import Swiper from "swiper";
+import "swiper/css";
+import "swiper/css/navigation";
+import { Navigation } from "swiper/modules";
+
+export const CollectionCourusel = (props: {
+  sectionTitle: string;
+  showAllLink?: string;
+  content: any;
+  isMyCollections?: boolean;
+}) => {
+  useEffect(() => {
+    const options: any = {
+      direction: "horizontal",
+      spaceBetween: 8,
+      allowTouchMove: true,
+      slidesPerView: "auto",
+      navigation: {
+        enabled: false,
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+      breakpoints: {
+        450: {
+          navigation: {
+            enabled: true,
+          },
+        },
+      },
+      modules: [Navigation],
+    };
+    new Swiper(".swiper", options);
+  }, []);
+
+  return (
+    <section className={`${Styles.section}`}>
+      <div className="flex justify-between px-4 py-2 border-b-2 border-black dark:border-white">
+        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
+          {props.sectionTitle}
+        </h1>
+        {props.showAllLink && (
+          <Link href={props.showAllLink}>
+            <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="m-4">
+        <div className="swiper">
+          <div className="swiper-wrapper">
+            {props.isMyCollections && (
+              <div className="swiper-slide" style={{ width: "fit-content" }}>
+                <div className="xl:w-[600px] sm:w-[400px] w-[80vw] aspect-video">
+                  <AddCollectionLink />
+                </div>
+              </div>
+            )}
+            {props.content.map((collection) => {
+              return (
+                <div
+                  className="swiper-slide"
+                  key={collection.id}
+                  style={{ width: "fit-content" }}
+                >
+                  <div className="xl:w-[600px] sm:w-[400px] w-[80vw] aspect-video">
+                    <CollectionLink {...collection} />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <div
+            className={`swiper-button-prev ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-left aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`}
+            style={
+              { "--swiper-navigation-size": "64px" } as React.CSSProperties
+            }
+          ></div>
+          <div
+            className={`swiper-button-next ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-right aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`}
+            style={
+              { "--swiper-navigation-size": "64px" } as React.CSSProperties
+            }
+          ></div>
+        </div>
+      </div>
+    </section>
+  );
+};
--- a/app/components/CollectionInfo/CollectionInfo.Basics.tsx
+++ b/app/components/CollectionInfo/CollectionInfo.Basics.tsx
@ -0,0 +1,47 @@
+import { Card, Button, Avatar } from "flowbite-react";
+import { useState } from "react";
+import { unixToDate } from "#/api/utils";
+import Link from "next/link";
+
+export const CollectionInfoBasics = (props: {
+  image: string;
+  title: string;
+  description: string;
+  authorAvatar: string;
+  authorLogin: string;
+  authorId: number;
+  creationDate: number;
+  updateDate: number;
+}) => {
+  return (
+    <Card className="flex-1 w-full">
+      <div className="flex flex-col items-end justify-between sm:items-center sm:flex-row">
+        <div className="flex flex-col gap-1">
+          <p>создана: {unixToDate(props.creationDate, "full")}</p>
+          <p>обновлена: {unixToDate(props.updateDate, "full")}</p>
+        </div>
+        <Link href={`/profile/${props.authorId}`}>
+          <Avatar
+            img={props.authorAvatar}
+            rounded={true}
+            bordered={true}
+            size="md"
+            className="flex-row-reverse gap-2"
+          >
+            <div className="font-medium dark:text-white">
+              <div className="text-lg">{props.authorLogin}</div>
+              <div className="text-right text-gray-500">Автор</div>
+            </div>
+          </Avatar>
+        </Link>
+      </div>
+      <div className="min-w-full aspect-video">
+        <img src={props.image} className="w-full rounded-lg" />
+      </div>
+      <div className="flex flex-col gap-1">
+        <p className="text-xl font-bold">{props.title}</p>
+        <p className="whitespace-pre-wrap">{props.description}</p>
+      </div>
+    </Card>
+  );
+};
--- a/app/components/CollectionInfo/CollectionInfoControls.tsx
+++ b/app/components/CollectionInfo/CollectionInfoControls.tsx
@ -0,0 +1,78 @@
+"use client";
+import { Card, Button } from "flowbite-react";
+import { useState } from "react";
+import { useUserStore } from "#/store/auth";
+import { ENDPOINTS } from "#/api/config";
+import { useRouter } from "next/navigation";
+
+export const CollectionInfoControls = (props: {
+  isFavorite: boolean;
+  id: number;
+  authorId: number;
+  isPrivate: boolean;
+}) => {
+  const [isFavorite, setIsFavorite] = useState(props.isFavorite);
+  const userStore = useUserStore();
+  const router = useRouter();
+
+  async function _addToFavorite() {
+    if (userStore.user) {
+      setIsFavorite(!isFavorite);
+      if (isFavorite) {
+        fetch(
+          `${ENDPOINTS.collection.favoriteCollections}/delete/${props.id}?token=${userStore.token}`
+        );
+      } else {
+        fetch(
+          `${ENDPOINTS.collection.favoriteCollections}/add/${props.id}?token=${userStore.token}`
+        );
+      }
+    }
+  }
+
+  async function _deleteCollection() {
+    if (userStore.user) {
+      fetch(
+        `${ENDPOINTS.collection.delete}/${props.id}?token=${userStore.token}`
+      );
+      router.push("/collections");
+    }
+  }
+
+  return (
+    <Card className="w-full h-fit ">
+      <Button color={"blue"} onClick={() => _addToFavorite()}>
+        <span
+          className={`iconify w-6 h-6 mr-2 ${
+            isFavorite ? "mdi--heart" : "mdi--heart-outline"
+          }`}
+        ></span>
+        {!isFavorite ? "Добавить в избранное" : "Убрать из избранного"}
+      </Button>
+      {props.isPrivate && (
+        <p>Это приватная коллекция, доступ к ней имеете только вы</p>
+      )}
+      {userStore.user && userStore.user.id == props.authorId && (
+        <div className="flex flex-wrap gap-2">
+          <Button
+            color={"blue"}
+            className="w-full sm:max-w-64"
+            onClick={() =>
+              router.push("/collections/create?mode=edit&id=" + props.id)
+            }
+          >
+            <span className="w-6 h-6 mr-2 iconify mdi--pencil"></span>{" "}
+            Редактировать
+          </Button>
+          <Button
+            color={"red"}
+            className="w-full sm:max-w-64"
+            onClick={() => _deleteCollection()}
+          >
+            <span className="w-6 h-6 mr-2 iconify mdi--trash"></span> Удалить
+          </Button>
+        </div>
+      )}
+    </Card>
+  );
+};
--- a/app/components/CollectionInfo/CollectionInfoLists.tsx
+++ b/app/components/CollectionInfo/CollectionInfoLists.tsx
@ -0,0 +1,58 @@
+import { Card } from "flowbite-react";
+
+export const CollectionInfoLists = (props: {
+  completed: number;
+  planned: number;
+  abandoned: number;
+  delayed: number;
+  watching: number;
+  total: number;
+}) => {
+  return (
+    <Card className="w-full h-fit ">
+      <div
+        className="flex w-full h-8 overflow-hidden rounded-md"
+        style={
+          {
+            "--width-of-one": "5",
+            "--watching-percent": `calc(var(--width-of-one) * (${props.watching} / ${props.total} * 100%))`,
+            "--planned-percent": `calc(var(--width-of-one) * (${props.planned} / ${props.total} * 100%))`,
+            "--watched-percent": `calc(var(--width-of-one) * (${props.completed} / ${props.total} * 100%))`,
+            "--delayed-percent": `calc(var(--width-of-one) * (${props.delayed} / ${props.total} * 100%))`,
+            "--abandoned-percent": `calc(var(--width-of-one) * (${props.abandoned} / ${props.total} * 100%))`,
+            "--no-list-percent": `calc(var(--width-of-one) * (${props.total - (props.watching + props.planned + props.completed + props.delayed + props.abandoned)} / ${props.total} * 100%))`,
+          } as React.CSSProperties
+        }
+      >
+        <div className={`bg-green-500 w-[var(--watching-percent)]`}></div>
+        <div className={`bg-purple-500 w-[var(--planned-percent)]`}></div>
+        <div className={`bg-blue-500 w-[var(--watched-percent)]`}></div>
+        <div className={`bg-yellow-300 w-[var(--delayed-percent)]`}></div>
+        <div className={`bg-red-500 w-[var(--abandoned-percent)]`}></div>
+        <div className={`bg-gray-400 w-[var(--no-list-percent)]`}></div>
+      </div>
+      <div className="flex flex-wrap w-full gap-4">
+        <p>
+          <span className="inline-block w-3 h-3 mr-2 bg-green-500 rounded-sm"></span>
+          Смотрю <span className="font-bold">{props.watching}</span>
+        </p>
+        <p>
+          <span className="inline-block w-3 h-3 mr-2 bg-purple-500 rounded-sm"></span>
+          В планах <span className="font-bold">{props.planned}</span>
+        </p>
+        <p>
+          <span className="inline-block w-3 h-3 mr-2 bg-blue-500 rounded-sm"></span>
+          Просмотрено <span className="font-bold">{props.completed}</span>
+        </p>
+        <p>
+          <span className="inline-block w-3 h-3 mr-2 bg-yellow-300 rounded-sm"></span>
+          Отложено <span className="font-bold">{props.delayed}</span>
+        </p>
+        <p>
+          <span className="inline-block w-3 h-3 mr-2 bg-red-500 rounded-sm"></span>
+          Брошено <span className="font-bold">{props.abandoned}</span>
+        </p>
+      </div>
+    </Card>
+  );
+};
--- a/app/components/CollectionLink/CollectionLink.tsx
+++ b/app/components/CollectionLink/CollectionLink.tsx
@ -0,0 +1,36 @@
+import Link from "next/link";
+import { sinceUnixDate } from "#/api/utils";
+import { Chip } from "#/components/Chip/Chip";
+
+export const CollectionLink = (props: any) => {
+  return (
+    <Link href={`/collection/${props.id}`}>
+      <div className="w-full aspect-video group">
+        <div
+          className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
+          style={{
+            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
+          }}
+        >
+          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
+            <Chip icon_name="material-symbols--favorite" name_2={props.favorites_count} />
+            <Chip icon_name="material-symbols--comment" name_2={props.comment_count} />
+            {props.is_private && (
+              <div className="flex items-center justify-center bg-yellow-400 rounded-sm">
+                <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--lock"></span>
+              </div>
+            )}
+            {props.is_favorite && (
+              <div className="flex items-center justify-center bg-pink-500 rounded-sm">
+                <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
+              </div>
+            )}
+          </div>
+          <p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
+            {props.title}
+          </p>
+        </div>
+      </div>
+    </Link>
+  );
+};
--- a/app/components/CollectionsSection/CollectionsSection.tsx
+++ b/app/components/CollectionsSection/CollectionsSection.tsx
@ -0,0 +1,33 @@
+import { CollectionLink } from "../CollectionLink/CollectionLink";
+import { AddCollectionLink } from "../AddCollectionLink/AddCollectionLink";
+
+export const CollectionsSection = (props: {
+  sectionTitle?: string;
+  content: any;
+  isMyCollections?: boolean;
+}) => {
+  return (
+    <section>
+      {props.sectionTitle && (
+        <div className="flex justify-between px-4 py-2 border-b-2 border-black dark:border-white">
+          <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
+            {props.sectionTitle}
+          </h1>
+        </div>
+      )}
+      <div className="m-4">
+        <div className="grid justify-center sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] grid-cols-[100%] gap-2">
+          {props.isMyCollections && <AddCollectionLink />}
+          {props.content.map((collection) => {
+            return (
+              <div key={collection.id} className="w-full h-full aspect-video">
+                <CollectionLink {...collection} />
+              </div>
+            );
+          })}
+          {props.content.length == 1 && !props.isMyCollections && <div></div>}
+        </div>
+      </div>
+    </section>
+  );
+};
--- a/app/components/CropModal/CropModal.tsx
+++ b/app/components/CropModal/CropModal.tsx
@ -0,0 +1,93 @@
+import React, { useRef } from "react";
+import Cropper, { ReactCropperElement } from "react-cropper";
+import "cropperjs/dist/cropper.css";
+import { Button, Modal } from "flowbite-react";
+
+type Props = {
+  src: string;
+  setSrc: (src: string) => void;
+  setTempSrc: (src: string) => void;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  height: number;
+  width: number;
+  aspectRatio: number;
+  guides: boolean;
+  quality: number;
+  forceAspect?: boolean;
+};
+
+export const CropModal: React.FC<Props> = (props) => {
+  const cropperRef = useRef<ReactCropperElement>(null);
+
+  const getCropData = () => {
+    if (typeof cropperRef.current?.cropper !== "undefined") {
+      props.setSrc(
+        cropperRef.current?.cropper
+          .getCroppedCanvas({
+            width: props.width,
+            height: props.height,
+            maxWidth: props.width,
+            maxHeight: props.height,
+          })
+          .toDataURL("image/jpeg", props.quality)
+      );
+      props.setTempSrc("");
+    }
+  };
+
+  return (
+    <Modal
+      dismissible
+      show={props.isOpen}
+      onClose={() => props.setIsOpen(false)}
+      size={"7xl"}
+    >
+      <Modal.Header>Обрезать изображение</Modal.Header>
+      <Modal.Body>
+        <Cropper
+          src={props.src}
+          style={{ height: 400, width: "100%" }}
+          responsive={true}
+          // Cropper.js options
+          initialAspectRatio={props.aspectRatio}
+          aspectRatio={props.forceAspect ? props.aspectRatio : undefined}
+          guides={props.guides}
+          ref={cropperRef}
+        />
+
+        <div className="mt-4">
+          <h2 className="font-bold text-md">Управление</h2>
+          <p>Тяните за углы что-бы выбрать область</p>
+          <p>
+            Нажмите 2 раза на пустое место, что бы поменять режим выбора области
+            на перемещение и обратно
+          </p>
+          <p>Используйте колёсико мыши что-бы изменить масштаб</p>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          color={"blue"}
+          onClick={() => {
+            getCropData();
+            props.setIsOpen(false);
+          }}
+        >
+          Сохранить
+        </Button>
+        <Button
+          color={"red"}
+          onClick={() => {
+            props.setSrc(null);
+            props.setTempSrc(null);
+            // props.setImageData(null);
+            props.setIsOpen(false);
+          }}
+        >
+          Удалить
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
--- a/app/components/Navbar/Navbar.tsx
+++ b/app/components/Navbar/Navbar.tsx
@ -56,6 +56,15 @@ export const Navbar = () => {
    },
    {
      id: 5,
+      icon: "material-symbols--collections-bookmark-outline",
+      iconActive: "material-symbols--collections-bookmark",
+      title: "Коллекции",
+      href: "/collections",
+      withAuthOnly: true,
+      mobileMenu: true,
+    },
+    {
+      id: 6,
      icon: "material-symbols--history",
      iconActive: "material-symbols--history",
      title: "История",
--- a/app/components/ReleaseLink/ReleaseLink.16_9.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.16_9.tsx
@ -19,11 +19,19 @@ export const ReleaseLink169 = (props: any) => {
    user_list = profile_lists[profile_list_status];
  }
  return (
-    <Link href={`/release/${props.id}`}>
+    <Link
+      href={`/release/${props.id}`}
+      className={props.isLinkDisabled ? "pointer-events-none" : ""}
+      aria-disabled={props.isLinkDisabled}
+      tabIndex={props.isLinkDisabled ? -1 : undefined}
+    >
      <div className="w-full aspect-video group">
-        <div className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] " style={{
+        <div
+          className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
+          style={{
            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
-          }}>
+          }}
+        >
          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
            <Chip
              bg_color={
--- a/app/components/ReleaseLink/ReleaseLink.Poster.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.Poster.tsx
@ -19,62 +19,65 @@ export const ReleaseLinkPoster = (props: any) => {
    user_list = profile_lists[profile_list_status];
  }
  return (
-    <Link href={`/release/${props.id}`}>
-      <div className="flex flex-col w-full h-full gap-4 lg:flex-row">
-        <div
-          className="relative w-full h-64 gap-8 p-4 overflow-hidden bg-white bg-center bg-no-repeat bg-cover border border-gray-200 rounded-lg shadow-md lg:min-w-[300px] lg:min-h-[385px] lg:max-w-[300px] lg:max-h-[385px] lg:bg-top dark:border-gray-700 dark:bg-gray-800"
-          style={{
-            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
-          }}
-        >
-          <div className="flex flex-wrap gap-1">
+    <Link
+      href={`/release/${props.id}`}
+      className={props.isLinkDisabled ? "pointer-events-none" : ""}
+      aria-disabled={props.isLinkDisabled}
+      tabIndex={props.isLinkDisabled ? -1 : undefined}
+    >
+      <div
+        className="relative w-full h-64 gap-8 p-2 overflow-hidden bg-white bg-center bg-no-repeat bg-cover border border-gray-200 rounded-lg shadow-md lg:min-w-[300px] lg:min-h-[385px] lg:max-w-[300px] lg:max-h-[385px] lg:bg-top dark:border-gray-700 dark:bg-gray-800"
+        style={{
+          backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
+        }}
+      >
+        <div className="flex flex-wrap gap-1">
+          <Chip
+            bg_color={
+              props.grade.toFixed(1) == 0
+                ? "hidden"
+                : props.grade.toFixed(1) < 2
+                ? "bg-red-500"
+                : props.grade.toFixed(1) < 3
+                ? "bg-orange-500"
+                : props.grade.toFixed(1) < 4
+                ? "bg-yellow-500"
+                : "bg-green-500"
+            }
+            name={props.grade.toFixed(1)}
+          />
+          {props.status ? (
+            <Chip name={props.status.name} />
+          ) : (
            <Chip
-              bg_color={
-                props.grade.toFixed(1) == 0
-                  ? "hidden"
-                  : props.grade.toFixed(1) < 2
-                  ? "bg-red-500"
-                  : props.grade.toFixed(1) < 3
-                  ? "bg-orange-500"
-                  : props.grade.toFixed(1) < 4
-                  ? "bg-yellow-500"
-                  : "bg-green-500"
+              name={
+                props.status_id == 1
+                  ? "Завершено"
+                  : props.status_id == 2
+                  ? "Онгоинг"
+                  : "Анонс"
              }
-              name={props.grade.toFixed(1)}
            />
-            {props.status ? (
-              <Chip name={props.status.name} />
-            ) : (
-              <Chip
-                name={
-                  props.status_id == 1
-                    ? "Завершено"
-                    : props.status_id == 2
-                    ? "Онгоинг"
-                    : "Анонс"
-                }
-              />
-            )}
-            <Chip
-              name={props.episodes_released && props.episodes_released}
-              name_2={
-                props.episodes_total ? props.episodes_total + " эп." : "? эп."
-              }
-              devider="/"
-            />
-          </div>
-          <div className="absolute flex flex-col gap-2 text-white bottom-4">
-            {props.title_ru && (
-              <p className="text-xl font-bold text-white md:text-2xl">
-                {props.title_ru}
-              </p>
-            )}
-            {props.title_original && (
-              <p className="text-sm text-gray-300 md:text-base">
-                {props.title_original}
-              </p>
-            )}
-          </div>
+          )}
+          <Chip
+            name={props.episodes_released && props.episodes_released}
+            name_2={
+              props.episodes_total ? props.episodes_total + " эп." : "? эп."
+            }
+            devider="/"
+          />
+        </div>
+        <div className="absolute flex flex-col gap-2 text-white bottom-4 left-2 right-2">
+          {props.title_ru && (
+            <p className="text-xl font-bold text-white md:text-2xl">
+              {props.title_ru}
+            </p>
+          )}
+          {props.title_original && (
+            <p className="text-sm text-gray-300 md:text-base">
+              {props.title_original}
+            </p>
+          )}
        </div>
      </div>
    </Link>
--- a/app/components/ReleaseSection/ReleaseSection.tsx
+++ b/app/components/ReleaseSection/ReleaseSection.tsx
@ -1,6 +1,9 @@
 import { ReleaseLink } from "../ReleaseLink/ReleaseLink";

-export const ReleaseSection = (props: {sectionTitle?: string, content: any}) => {
+export const ReleaseSection = (props: {
+  sectionTitle?: string;
+  content: any;
+}) => {
  return (
    <section>
      {props.sectionTitle && (
@ -19,6 +22,7 @@ export const ReleaseSection = (props: {sectionTitle?: string, content: any}) =>
              </div>
            );
          })}
+          {props.content.length == 1 && <div></div>}
        </div>
      </div>
    </section>
--- a/app/pages/Collections.tsx
+++ b/app/pages/Collections.tsx
@ -0,0 +1,68 @@
+"use client";
+import useSWR from "swr";
+import { CollectionCourusel } from "#/components/CollectionCourusel/CollectionCourusel";
+import { Spinner } from "#/components/Spinner/Spinner";
+const fetcher = (...args: any) =>
+  fetch([...args] as any).then((res) => res.json());
+import { useUserStore } from "#/store/auth";
+import { ENDPOINTS } from "#/api/config";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export function CollectionsPage() {
+  const userStore = useUserStore();
+  const router = useRouter();
+
+  function useFetchReleases(section: string) {
+    let url: string;
+
+    if (userStore.token && userStore.user) {
+      if (section == "userCollections") {
+        url = `${ENDPOINTS.collection.userCollections}/${userStore.user.id}/0?token=${userStore.token}`;
+      } else if (section == "userFavoriteCollections") {
+        url = `${ENDPOINTS.collection.favoriteCollections}/all/0?token=${userStore.token}`;
+      }
+    }
+
+    const { data } = useSWR(url, fetcher);
+    return [data];
+  }
+
+  const [userCollections] = useFetchReleases("userCollections");
+  const [favoriteCollections] = useFetchReleases("userFavoriteCollections");
+
+  useEffect(() => {
+    if (userStore.state === "finished" && !userStore.token) {
+      router.push("/login?redirect=/collections");
+    }
+  }, [userStore.state, userStore.token]);
+
+  return (
+    <main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+      {userStore.state === "loading" &&
+        (!userCollections || !favoriteCollections) && (
+          <div className="flex items-center justify-center min-w-full min-h-screen">
+            <Spinner />
+          </div>
+        )}
+
+      {userCollections && userCollections.content && (
+        <CollectionCourusel
+          sectionTitle="Мои коллекции"
+          showAllLink={`/profile/${userStore.user.id}/collections`}
+          content={userCollections.content}
+          isMyCollections={true}
+        />
+      )}
+      {favoriteCollections &&
+        favoriteCollections.content &&
+        favoriteCollections.content.length > 0 && (
+          <CollectionCourusel
+            sectionTitle="Избранные коллекции"
+            showAllLink="/collections/favorites"
+            content={favoriteCollections.content}
+          />
+        )}
+    </main>
+  );
+}
--- a/app/pages/CollectionsFull.tsx
+++ b/app/pages/CollectionsFull.tsx
@ -0,0 +1,116 @@
+"use client";
+import useSWRInfinite from "swr/infinite";
+import { CollectionsSection } from "#/components/CollectionsSection/CollectionsSection";
+import { Spinner } from "#/components/Spinner/Spinner";
+import { useState, useEffect } from "react";
+import { useScrollPosition } from "#/hooks/useScrollPosition";
+import { useUserStore } from "../store/auth";
+import { Button } from "flowbite-react";
+import { ENDPOINTS } from "#/api/config";
+import { useRouter } from "next/navigation";
+
+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 function CollectionsFullPage(props: {
+  type: "favorites" | "profile" | "release";
+  title: string;
+  profile_id?: number;
+  release_id?: number;
+}) {
+  const userStore = useUserStore();
+  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
+  const router = useRouter();
+
+  const getKey = (pageIndex: number, previousPageData: any) => {
+    if (previousPageData && !previousPageData.content.length) return null;
+    if (userStore.token) {
+      if (props.type == "favorites") {
+        return `${ENDPOINTS.collection.favoriteCollections}/all/${pageIndex}?token=${userStore.token}`;
+      } else if (props.type == "profile") {
+        return `${ENDPOINTS.collection.userCollections}/${props.profile_id}/${pageIndex}?token=${userStore.token}`;
+      } else if (props.type == "release") {
+        return `${ENDPOINTS.collection.releaseInCollections}/${props.release_id}/${pageIndex}?token=${userStore.token}`;
+      }
+    }
+  };
+
+  const { data, error, isLoading, size, setSize } = useSWRInfinite(
+    getKey,
+    fetcher,
+    { initialSize: 2 }
+  );
+
+  const [content, setContent] = useState(null);
+  useEffect(() => {
+    if (data) {
+      let allReleases = [];
+      for (let i = 0; i < data.length; i++) {
+        allReleases.push(...data[i].content);
+      }
+      setContent(allReleases);
+      setIsLoadingEnd(true);
+    }
+  }, [data]);
+
+  const scrollPosition = useScrollPosition();
+  useEffect(() => {
+    if (scrollPosition >= 98 && scrollPosition <= 99) {
+      setSize(size + 1);
+    }
+  }, [scrollPosition]);
+
+  useEffect(() => {
+    if (userStore.state === "finished" && !userStore.token) {
+      router.push(`/login?redirect=/collections/favorites`);
+    }
+  }, [userStore.state, userStore.token]);
+
+  return (
+    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+      {content && content.length > 0 ? (
+        <CollectionsSection
+          sectionTitle={props.title}
+          content={content}
+          isMyCollections={
+            props.type == "profile" && props.profile_id == userStore.user.id
+          }
+        />
+      ) : !isLoadingEnd || isLoading ? (
+        <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
+          <span className="w-24 h-24 iconify-color twemoji--broken-heart"></span>
+          <p>Тут пока ничего нет...</p>
+        </div>
+      )}
+      {data &&
+        data[data.length - 1].current_page <
+          data[data.length - 1].total_page_count && (
+          <Button
+            className="w-full"
+            color={"light"}
+            onClick={() => setSize(size + 1)}
+          >
+            <div className="flex items-center gap-2">
+              <span className="w-6 h-6 iconify mdi--plus-circle "></span>
+              <span className="text-lg">Загрузить ещё</span>
+            </div>
+          </Button>
+        )}
+    </main>
+  );
+}
--- a/app/pages/CreateCollection.tsx
+++ b/app/pages/CreateCollection.tsx
@ -0,0 +1,556 @@
+"use client";
+import useSWRInfinite from "swr/infinite";
+import { useUserStore } from "#/store/auth";
+import { useEffect, useState, useCallback } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { ENDPOINTS } from "#/api/config";
+import {
+  Card,
+  Button,
+  Checkbox,
+  TextInput,
+  Textarea,
+  FileInput,
+  Label,
+  Modal,
+} from "flowbite-react";
+import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLink";
+import { CropModal } from "#/components/CropModal/CropModal";
+import { b64toBlob } from "#/api/utils";
+
+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 CreateCollectionPage = () => {
+  const userStore = useUserStore();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const [edit, setEdit] = useState(false);
+
+  // const [imageData, setImageData] = useState<File | Blob>(null);
+  const [imageUrl, setImageUrl] = useState<string>(null);
+  const [tempImageUrl, setTempImageUrl] = useState<string>(null);
+  const [isPrivate, setIsPrivate] = useState(false);
+  const [collectionInfo, setCollectionInfo] = useState({
+    title: "",
+    description: "",
+  });
+  const [stringLength, setStringLength] = useState({
+    title: 0,
+    description: 0,
+  });
+  const [addedReleases, setAddedReleases] = useState([]);
+  const [addedReleasesIds, setAddedReleasesIds] = useState([]);
+  const [releasesEditModalOpen, setReleasesEditModalOpen] = useState(false);
+  const [cropModalOpen, setCropModalOpen] = useState(false);
+
+  const collection_id = searchParams.get("id") || null;
+  const mode = searchParams.get("mode") || null;
+
+  const [isSending, setIsSending] = useState(false);
+
+  useEffect(() => {
+    async function _checkMode() {
+      if (mode === "edit" && collection_id) {
+        setIsSending(true);
+        const res = await fetch(
+          `${ENDPOINTS.collection.base}/${collection_id}?token=${userStore.token}`
+        );
+        const data = await res.json();
+
+        let addedReleasesIdsArray = [];
+        let addedReleasesArray = [];
+
+        for (let i = 0; i < 4; i++) {
+          const res = await fetch(
+            `${ENDPOINTS.collection.base}/${collection_id}/releases/${i}?token=${userStore.token}`
+          );
+          const data = await res.json();
+
+          if (data.content.length > 0) {
+            data.content.forEach((release) => {
+              if (!addedReleasesIds.includes(release.id)) {
+                addedReleasesIdsArray.push(release.id);
+                addedReleasesArray.push(release);
+              }
+            });
+          } else {
+            setAddedReleases(addedReleasesArray);
+            setAddedReleasesIds(addedReleasesIdsArray);
+            break;
+          }
+        }
+
+        if (
+          mode === "edit" &&
+          userStore.user.id == data.collection.creator.id
+        ) {
+          setEdit(true);
+
+          setCollectionInfo({
+            title: data.collection.title,
+            description: data.collection.description,
+          });
+          setStringLength({
+            title: data.collection.title.length,
+            description: data.collection.description.length,
+          });
+
+          setIsPrivate(data.collection.is_private);
+          setImageUrl(data.collection.image);
+
+          setIsSending(false);
+        }
+      }
+    }
+    if (userStore.user) {
+      _checkMode();
+    }
+  }, [userStore.user]);
+
+  const handleFileRead = (e, fileReader) => {
+    const content = fileReader.result;
+    setTempImageUrl(content);
+  };
+
+  const handleFilePreview = (file) => {
+    const fileReader = new FileReader();
+    fileReader.onloadend = (e) => {
+      handleFileRead(e, fileReader);
+    };
+    fileReader.readAsDataURL(file);
+  };
+
+  function handleInput(e) {
+    const regex = /[^a-zA-Zа-яА-Я0-9_.,:()!? \[\]]/g;
+    setCollectionInfo({
+      ...collectionInfo,
+      [e.target.name]: e.target.value.replace(regex, ""),
+    });
+    setStringLength({
+      ...stringLength,
+      [e.target.name]: e.target.value.replace(regex, "").length,
+    });
+  }
+
+  function submit(e) {
+    e.preventDefault();
+
+    async function _createCollection() {
+      const url =
+        mode === "edit"
+          ? `${ENDPOINTS.collection.edit}/${collection_id}?token=${userStore.token}`
+          : `${ENDPOINTS.collection.create}?token=${userStore.token}`;
+
+      const res = await fetch(url, {
+        method: "POST",
+        body: JSON.stringify({
+          ...collectionInfo,
+          is_private: isPrivate,
+          private: isPrivate,
+          releases: addedReleasesIds,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (data.code == 5) {
+        alert("Вы превысили допустимый еженедельный лимит создания коллекций!");
+        return;
+      }
+
+      if (imageUrl && !imageUrl.startsWith("http")) {
+        let block = imageUrl.split(";");
+        let contentType = block[0].split(":")[1];
+        let realData = block[1].split(",")[1];
+        const blob = b64toBlob(realData, contentType);
+
+        const formData = new FormData();
+        formData.append("image", blob, "cropped.jpg");
+        formData.append("name", "image");
+        const uploadRes = await fetch(
+          `${ENDPOINTS.collection.editImage}/${data.collection.id}?token=${userStore.token}`,
+          {
+            method: "POST",
+            body: formData,
+          }
+        );
+        const uploadData = await uploadRes.json();
+      }
+
+      router.push(`/collection/${data.collection.id}`);
+    }
+
+    if (
+      collectionInfo.title.length >= 10 &&
+      addedReleasesIds.length >= 1 &&
+      userStore.token
+    ) {
+      // setIsSending(true);
+      _createCollection();
+    } else if (collectionInfo.title.length < 10) {
+      alert("Необходимо ввести название коллекции не менее 10 символов");
+    } else if (!userStore.token) {
+      alert("Для создания коллекции необходимо войти в аккаунт");
+    } else if (addedReleasesIds.length < 1) {
+      alert("Необходимо добавить хотя бы один релиз в коллекцию");
+    }
+  }
+
+  function _deleteRelease(release: any) {
+    let releasesArray = [];
+    let idsArray = [];
+
+    for (let i = 0; i < addedReleases.length; i++) {
+      if (addedReleases[i].id != release.id) {
+        releasesArray.push(addedReleases[i]);
+        idsArray.push(addedReleasesIds[i]);
+      }
+    }
+
+    setAddedReleases(releasesArray);
+    setAddedReleasesIds(idsArray);
+  }
+
+  return (
+    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+      <Card>
+        <p className="text-xl font-bold">
+          {edit ? "Редактирование коллекции" : "Создание коллекции"}
+        </p>
+        <form
+          className="flex flex-col w-full gap-2 lg:items-center lg:flex-row"
+          onSubmit={(e) => submit(e)}
+        >
+          <Label
+            htmlFor="dropzone-file"
+            className="flex flex-col items-center w-full sm:max-w-[600px] h-[337px] border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+          >
+            <div className="flex flex-col items-center justify-center max-w-[595px] h-[inherit] rounded-[inherit] pt-5 pb-6 overflow-hidden">
+              {!imageUrl ? (
+                <>
+                  <svg
+                    className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 20 16"
+                  >
+                    <path
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+                    />
+                  </svg>
+                  <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                    <span className="font-semibold">Нажмите для загрузки</span>{" "}
+                    или перетащите файл
+                  </p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                    PNG или JPG (Макс. 600x337 пикселей)
+                  </p>
+                </>
+              ) : (
+                <img
+                  src={imageUrl}
+                  className="object-cover w-[inherit] h-[inherit]"
+                />
+              )}
+            </div>
+            <FileInput
+              id="dropzone-file"
+              className="hidden"
+              accept="image/jpg, image/jpeg, image/png"
+              onChange={(e) => {
+                handleFilePreview(e.target.files[0]);
+                setCropModalOpen(true);
+              }}
+            />
+          </Label>
+          <div className="flex-1">
+            <div className="block mb-2">
+              <Label
+                htmlFor="title"
+                value="Название (минимум 10, максимум 60 символов)"
+              />
+            </div>
+            <TextInput
+              id="title"
+              name="title"
+              type="text"
+              sizing="md"
+              className="w-full"
+              required={true}
+              onChange={(e) => handleInput(e)}
+              value={collectionInfo.title}
+              maxLength={60}
+            />
+            <p className="text-sm text-gray-500 dark:text-gray-300">
+              {stringLength.title}/60
+            </p>
+            <div className="block mt-2 mb-2">
+              <Label
+                htmlFor="description"
+                value="Описание (максимум 1000 символов)"
+              />
+            </div>
+            <Textarea
+              rows={4}
+              id="description"
+              className="w-full"
+              name="description"
+              onChange={(e) => handleInput(e)}
+              value={collectionInfo.description}
+              maxLength={1000}
+            />
+            <p className="text-sm text-gray-500 dark:text-gray-300">
+              {stringLength.description}/1000
+            </p>
+            <div className="mt-2">
+              <div className="flex items-center gap-1">
+                <Checkbox
+                  id="private"
+                  name="private"
+                  color="blue"
+                  checked={isPrivate}
+                  onChange={(e) => setIsPrivate(e.target.checked)}
+                />
+                <Label htmlFor="private" value="Приватная коллекция" />
+              </div>
+            </div>
+            <Button
+              color={"blue"}
+              className="mt-4"
+              type="submit"
+              disabled={isSending}
+            >
+              {edit ? "Обновить" : "Создать"}
+            </Button>
+          </div>
+        </form>
+      </Card>
+      <div className="mt-4">
+        <div className="flex justify-between px-4 py-2 border-b-2 border-black dark:border-white">
+          <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
+            {"Релизов в коллекции: " + addedReleases.length}/100
+          </h1>
+          <Button
+            color={"blue"}
+            size={"xs"}
+            onClick={() => setReleasesEditModalOpen(!releasesEditModalOpen)}
+          >
+            Добавить
+          </Button>
+        </div>
+        <div className="m-4">
+          <div className="grid justify-center sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] grid-cols-[100%] gap-2 min-w-full">
+            {addedReleases.map((release) => {
+              return (
+                <div
+                  key={release.id}
+                  className="relative w-full h-full aspect-video group"
+                >
+                  <button
+                    className="absolute inset-0 z-10 text-black transition-opacity bg-white opacity-0 group-hover:opacity-75"
+                    onClick={() => _deleteRelease(release)}
+                  >
+                    Удалить
+                  </button>
+                  <ReleaseLink {...release} isLinkDisabled={true} />
+                </div>
+              );
+            })}
+            {addedReleases.length == 1 && <div></div>}
+          </div>
+        </div>
+      </div>
+      <ReleasesEditModal
+        isOpen={releasesEditModalOpen}
+        setIsOpen={setReleasesEditModalOpen}
+        releases={addedReleases}
+        releasesIds={addedReleasesIds}
+        setReleases={setAddedReleases}
+        setReleasesIds={setAddedReleasesIds}
+      />
+      <CropModal
+        src={tempImageUrl}
+        setSrc={setImageUrl}
+        setTempSrc={setTempImageUrl}
+        // setImageData={setImageData}
+        aspectRatio={600 / 337}
+        guides={false}
+        quality={100}
+        isOpen={cropModalOpen}
+        setIsOpen={setCropModalOpen}
+        forceAspect={true}
+        width={600}
+        height={337}
+      />
+    </main>
+  );
+};
+
+export const ReleasesEditModal = (props: {
+  isOpen: boolean;
+  setIsOpen: any;
+  releases: any;
+  setReleases: any;
+  releasesIds: any;
+  setReleasesIds: any;
+}) => {
+  const [query, setQuery] = useState("");
+
+  const getKey = (pageIndex: number, previousPageData: any) => {
+    if (previousPageData && !previousPageData.releases.length) return null;
+
+    const url = new URL("/api/search", window.location.origin);
+    url.searchParams.set("page", pageIndex.toString());
+    if (!query) return null;
+    url.searchParams.set("q", query);
+    return url.toString();
+  };
+
+  const { data, error, isLoading, size, setSize } = useSWRInfinite(
+    getKey,
+    fetcher,
+    { initialSize: 2, revalidateFirstPage: false }
+  );
+
+  const [content, setContent] = useState([]);
+  useEffect(() => {
+    if (data) {
+      let allReleases = [];
+      for (let i = 0; i < data.length; i++) {
+        allReleases.push(...data[i].releases);
+      }
+      setContent(allReleases);
+    }
+  }, [data]);
+
+  const [currentRef, setCurrentRef] = useState<any>(null);
+  const modalRef = useCallback((ref) => {
+    setCurrentRef(ref);
+  }, []);
+
+  const [scrollPosition, setScrollPosition] = useState(0);
+  function handleScroll() {
+    const height = currentRef.scrollHeight - currentRef.clientHeight;
+    const windowScroll = currentRef.scrollTop;
+    const scrolled = (windowScroll / height) * 100;
+    setScrollPosition(Math.floor(scrolled));
+  }
+  useEffect(() => {
+    if (scrollPosition >= 95 && scrollPosition <= 96) {
+      setSize(size + 1);
+    }
+  }, [scrollPosition]);
+
+  function _addRelease(release: any) {
+    if (props.releasesIds.length == 100) {
+      alert("Достигнуто максимальное количество релизов в коллекции - 100");
+      return;
+    }
+
+    if (props.releasesIds.includes(release.id)) {
+      alert("Релиз уже добавлен в коллекцию");
+      return;
+    }
+
+    props.setReleases([...props.releases, release]);
+    props.setReleasesIds([...props.releasesIds, release.id]);
+  }
+
+  return (
+    <Modal
+      dismissible
+      show={props.isOpen}
+      onClose={() => props.setIsOpen(false)}
+      size={"7xl"}
+    >
+      <Modal.Header>Изменить релизы в коллекции</Modal.Header>
+      <div
+        onScroll={handleScroll}
+        ref={modalRef}
+        className="px-4 py-4 overflow-auto"
+      >
+        <form
+          className="max-w-full mx-auto"
+          onSubmit={(e) => {
+            e.preventDefault();
+            props.setReleases([]);
+            setQuery(e.target[0].value.trim());
+          }}
+        >
+          <label
+            htmlFor="default-search"
+            className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
+          >
+            Поиск
+          </label>
+          <div className="relative">
+            <div className="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3">
+              <svg
+                className="w-4 h-4 text-gray-500 dark:text-gray-400"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+                />
+              </svg>
+            </div>
+            <input
+              type="search"
+              id="default-search"
+              className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              placeholder="Поиск аниме..."
+              required
+              defaultValue={query || ""}
+            />
+            <button
+              type="submit"
+              className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              Поиск
+            </button>
+          </div>
+        </form>
+
+        <div className="flex flex-wrap gap-1 mt-2">
+          {content.map((release) => {
+            return (
+              <button
+                key={release.id}
+                className=""
+                onClick={() => _addRelease(release)}
+              >
+                <ReleaseLink type="poster" {...release} isLinkDisabled={true} />
+              </button>
+            );
+          })}
+          {content.length == 1 && <div></div>}
+        </div>
+      </div>
+    </Modal>
+  );
+};
--- a/app/pages/ViewCollection.tsx
+++ b/app/pages/ViewCollection.tsx
@ -0,0 +1,136 @@
+"use client";
+import useSWRInfinite from "swr/infinite";
+import useSWR from "swr";
+import { Spinner } from "#/components/Spinner/Spinner";
+import { useState, useEffect } from "react";
+import { useScrollPosition } from "#/hooks/useScrollPosition";
+import { useUserStore } from "../store/auth";
+import { Button, Card } from "flowbite-react";
+import { ENDPOINTS } from "#/api/config";
+import { useRouter } from "next/navigation";
+import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection";
+
+import { CollectionInfoBasics } from "#/components/CollectionInfo/CollectionInfo.Basics";
+import { CollectionInfoLists } from "#/components/CollectionInfo/CollectionInfoLists";
+import { CollectionInfoControls } from "#/components/CollectionInfo/CollectionInfoControls";
+
+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 ViewCollectionPage = (props: { id: number }) => {
+  const userStore = useUserStore();
+  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
+  const router = useRouter();
+
+  function useFetchCollectionInfo() {
+    let url: string = `${ENDPOINTS.collection.base}/${props.id}`;
+
+    if (userStore.token) {
+      url += `?token=${userStore.token}`;
+    }
+
+    const { data, isLoading } = useSWR(url, fetcher);
+    return [data, isLoading];
+  }
+  const getKey = (pageIndex: number, previousPageData: any) => {
+    if (previousPageData && !previousPageData.content.length) return null;
+    let url: string = `${ENDPOINTS.collection.base}/${props.id}/releases/${pageIndex}`;
+    if (userStore.token) {
+      url += `?token=${userStore.token}`;
+    }
+    return url;
+  };
+
+  const [collectionInfo, collectionInfoIsLoading] = useFetchCollectionInfo();
+
+  const { data, error, isLoading, size, setSize } = useSWRInfinite(
+    getKey,
+    fetcher,
+    { initialSize: 2 }
+  );
+
+  const [content, setContent] = useState(null);
+  useEffect(() => {
+    if (data) {
+      let allReleases = [];
+      for (let i = 0; i < data.length; i++) {
+        allReleases.push(...data[i].content);
+      }
+      setContent(allReleases);
+      setIsLoadingEnd(true);
+    }
+  }, [data]);
+
+  const scrollPosition = useScrollPosition();
+  useEffect(() => {
+    if (scrollPosition >= 98 && scrollPosition <= 99) {
+      setSize(size + 1);
+    }
+  }, [scrollPosition]);
+
+  return (
+    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+      {collectionInfoIsLoading ? (
+        <div className="flex items-center justify-center w-full h-screen">
+          <Spinner />
+        </div>
+      ) : (
+        collectionInfo && (
+          <>
+            <div className="flex flex-col flex-wrap gap-4 px-2 pb-2 sm:flex-row">
+              <CollectionInfoBasics
+                image={collectionInfo.collection.image}
+                title={collectionInfo.collection.title}
+                description={collectionInfo.collection.description}
+                authorAvatar={collectionInfo.collection.creator.avatar}
+                authorLogin={collectionInfo.collection.creator.login}
+                authorId={collectionInfo.collection.creator.id}
+                creationDate={collectionInfo.collection.creation_date}
+                updateDate={collectionInfo.collection.last_update_date}
+              />
+              {userStore.token && !isLoading && (
+                <div className="flex flex-col gap-4 w-full max-w-full lg:max-w-[48%]">
+                  <CollectionInfoLists
+                    completed={collectionInfo.completed_count}
+                    planned={collectionInfo.plan_count}
+                    abandoned={collectionInfo.dropped_count}
+                    delayed={collectionInfo.hold_on_count}
+                    watching={collectionInfo.watching_count}
+                    total={data[0].total_count}
+                  />
+                  <CollectionInfoControls
+                    isFavorite={collectionInfo.collection.is_favorite}
+                    id={collectionInfo.collection.id}
+                    authorId={collectionInfo.collection.creator.id}
+                    isPrivate={collectionInfo.collection.is_private}
+                  />
+                </div>
+              )}
+            </div>
+            {isLoading || !content || !isLoadingEnd ? (
+              <div className="flex items-center justify-center w-full h-screen">
+                <Spinner />
+              </div>
+            ) : (
+              <ReleaseSection
+                sectionTitle={"Релизов в коллекции: " + data[0].total_count}
+                content={content}
+              />
+            )}
+          </>
+        )
+      )}
+    </main>
+  );
+};
--- a/app/profile/[id]/collections/page.tsx
+++ b/app/profile/[id]/collections/page.tsx
@ -0,0 +1,42 @@
+import { CollectionsFullPage } from "#/pages/CollectionsFull";
+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 async function Collections({ params }) {
+  const profile: any = await fetchDataViaGet(
+    `https://api.anixart.tv/profile/${params.id}`
+  );
+  return (
+    <CollectionsFullPage
+      type="profile"
+      title={`Коллекции пользователя ${profile.profile.login}`}
+      profile_id={params.id}
+    />
+  );
+}
--- a/app/release/[id]/collections/page.tsx
+++ b/app/release/[id]/collections/page.tsx
@ -0,0 +1,40 @@
+import { CollectionsFullPage } from "#/pages/CollectionsFull";
+import { fetchDataViaGet } from "#/api/utils";
+import type { Metadata, ResolvingMetadata } from "next";
+
+export async function generateMetadata(
+  { params },
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const id = params.id;
+  const release = await fetchDataViaGet(`https://api.anixart.tv/release/${id}`);
+  const previousOG = (await parent).openGraph;
+
+  return {
+    title: release.release.title_ru + " - в коллекциях",
+    description: release.release.description,
+    openGraph: {
+      ...previousOG,
+      images: [
+        {
+          url: release.release.image, // Must be an absolute URL
+          width: 600,
+          height: 800,
+        },
+      ],
+    },
+  };
+}
+
+export default async function Collections({ params }) {
+  const release: any = await fetchDataViaGet(
+    `https://api.anixart.tv/release/${params.id}`
+  );
+  return (
+    <CollectionsFullPage
+      type="release"
+      title={release.release.title_ru + " в коллекциях"}
+      release_id={params.id}
+    />
+  );
+}
--- a/app/store/auth.ts
+++ b/app/store/auth.ts
@ -5,7 +5,7 @@ import { getJWT, removeJWT, fetchDataViaGet } from "#/api/utils";
 interface userState {
  _hasHydrated: boolean;
  isAuth: boolean;
-  user: Object | null;
+  user: any | null;
  token: string | null;
  state: string;
  login: (user: Object, token: string) => void;
--- a/package-lock.json
+++ b/package-lock.json
@ -14,6 +14,7 @@
        "markdown-to-jsx": "^7.4.7",
        "next": "14.2.5",
        "react": "^18",
+        "react-cropper": "^2.3.3",
        "react-dom": "^18",
        "swiper": "^11.1.4",
        "swr": "^2.2.5",
@ -1685,6 +1686,11 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/cropperjs": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
+      "integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA=="
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -4563,6 +4569,17 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-cropper": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/react-cropper/-/react-cropper-2.3.3.tgz",
+      "integrity": "sha512-zghiEYkUb41kqtu+2jpX2Ntigf+Jj1dF9ew4lAobPzI2adaPE31z0p+5TcWngK6TvmWQUwK3lj4G+NDh1PDQ1w==",
+      "dependencies": {
+        "cropperjs": "^1.5.13"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.2"
+      }
+    },
    "node_modules/react-dom": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "markdown-to-jsx": "^7.4.7",
    "next": "14.2.5",
    "react": "^18",
+    "react-cropper": "^2.3.3",
    "react-dom": "^18",
    "swiper": "^11.1.4",
    "swr": "^2.2.5",
--- a/public/changelog/3.1.0.md
+++ b/public/changelog/3.1.0.md
@ -0,0 +1,14 @@
+# 3.1.0
+
+## Добавлено
+
+- Создание коллекций
+- Просмотр избранных и собственных коллекций
+- Просмотр страницы коллекции
+- Добавление коллекции в избранное
+- Управление своими коллекциями
+
+## Изменено
+
+- Вид элемента меню в навигации
+- Расположение элементов навигации на мобильных устройствах теперь по середине