feat: add user profile comments preview

This reverts commit 141cb9a1ce.

.eslintrc.json

@@ -1,7 +1,3 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"],
-  "rules": {
-    "prettier/prettier": "error"
-  },
-  "plugins": ["prettier"]
+  "extends": ["next/core-web-vitals"]
 }

.flowbite-react/.gitignore

@@ -0,0 +1,2 @@
+class-list.json
+pid

.flowbite-react/config.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://unpkg.com/flowbite-react/schema.json",
+  "components": [],
+  "dark": true,
+  "prefix": "",
+  "path": "src/components",
+  "tsx": true,
+  "rsc": true
+}

.gitignore

@@ -59,3 +59,5 @@ videos/*
 !videos/*.js
 !videos/*.ts
 public/_next-video
+
+API-Trace/*

app/App.tsx

@@ -4,7 +4,7 @@ import { usePreferencesStore } from "./store/preferences";
 import { Navbar } from "./components/Navbar/NavbarUpdate";
 import { Inter } from "next/font/google";
 import { useEffect, useState } from "react";
-import { Button, Modal } from "flowbite-react";
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "flowbite-react";
 import { Spinner } from "./components/Spinner/Spinner";
 import { ChangelogModal } from "#/components/ChangelogModal/ChangelogModal";
 import PlausibleProvider from "next-plausible";
@@ -80,8 +80,8 @@ export const App = (props) => {
         show={preferencesStore.params.isFirstLaunch}
         onClose={() => preferencesStore.setParams({ isFirstLaunch: false })}
       >
-        <Modal.Header>Внимание</Modal.Header>
-        <Modal.Body>
+        <ModalHeader>Внимание</ModalHeader>
+        <ModalBody>
           <p>
             Данный сайт не связан с разработчиками приложения Anixart, это
             неофициальная имплементация веб клиента для этого приложения.
@@ -94,15 +94,15 @@ export const App = (props) => {
             На сайте могут присутствовать ошибки и не доработки, а так-же
             отсутствующий функционал.
           </p>
-        </Modal.Body>
-        <Modal.Footer>
+        </ModalBody>
+        <ModalFooter>
           <Button
             color={"blue"}
             onClick={() => preferencesStore.setParams({ isFirstLaunch: false })}
           >
             Принимаю
           </Button>
-        </Modal.Footer>
+        </ModalFooter>
       </Modal>
       {preferencesStore.flags.enableAnalytics && (
         <PlausibleProvider

app/api/config.ts

@@ -18,6 +18,15 @@ export const ENDPOINTS = {
     bookmark: `${API_PREFIX}/profile/list`,
     history: `${API_PREFIX}/history`,
     favorite: `${API_PREFIX}/favorite`,
+    blocklist: `${API_PREFIX}/profile/blocklist`,
+    friend: {
+      list: `${API_PREFIX}/profile/friend/all`,
+      add: `${API_PREFIX}/profile/friend/request/send`,
+      remove: `${API_PREFIX}/profile/friend/request/remove`,
+      hide: `${API_PREFIX}/profile/friend/request/hide`,
+      in: `${API_PREFIX}/profile/friend/requests/in`,
+      out: `${API_PREFIX}/profile/friend/requests/out`,
+    },
     settings: {
       my: `${API_PREFIX}/profile/preference/my`,
       login: {

app/api/utils.ts

@@ -212,9 +212,9 @@ export function unixToDate(
       " " +
       date.getFullYear() +
       ", " +
-      date.getHours() +
+      `${date.getHours()}`.padStart(2, "0") +
       ":" +
-      date.getMinutes()
+      `${date.getMinutes()}`.padStart(2, "0")
     );
   if (type === "dayMonth")
     return date.getDate() + " " + months[date.getMonth()];

app/components/ChangelogModal/ChangelogModal.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { Modal, Accordion } from "flowbite-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionPanel,
+  AccordionTitle,
+  Modal,
+  ModalBody,
+  ModalHeader,
+} from "flowbite-react";
 import Markdown from "markdown-to-jsx";
 import { useEffect, useState } from "react";
 import Styles from "./ChangelogModal.module.css";
@@ -37,8 +45,8 @@ export const ChangelogModal = (props: {
 
   return (
     <Modal show={props.isOpen} onClose={() => props.setIsOpen(false)}>
-      <Modal.Header>Список изменений v{props.version}</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Список изменений v{props.version}</ModalHeader>
+      <ModalBody>
         <Markdown className={Styles.markdown}>
           {currentVersionChangelog}
         </Markdown>
@@ -46,8 +54,8 @@ export const ChangelogModal = (props: {
           {props.previousVersions.length > 0 &&
             props.previousVersions.map((version) => {
               return (
-                <Accordion.Panel key={version}>
-                  <Accordion.Title
+                <AccordionPanel key={version}>
+                  <AccordionTitle
                     onClickCapture={(e) => {
                       if (!previousVersionsChangelog.hasOwnProperty(version)) {
                         _fetchVersionChangelog(version).then((data) => {
@@ -62,19 +70,19 @@ export const ChangelogModal = (props: {
                     }}
                   >
                     Список изменений v{version}
-                  </Accordion.Title>
-                  <Accordion.Content>
+                  </AccordionTitle>
+                  <AccordionContent>
                     {previousVersionsChangelog.hasOwnProperty(version) ?
                       <Markdown className={Styles.markdown}>
                         {previousVersionsChangelog[version]}
                       </Markdown>
                     : <div>Загрузка ...</div>}
-                  </Accordion.Content>
-                </Accordion.Panel>
+                  </AccordionContent>
+                </AccordionPanel>
               );
             })}
         </Accordion>
-      </Modal.Body>
+      </ModalBody>
     </Modal>
   );
 };

app/components/CollectionLink/CollectionLink.tsx

@@ -49,11 +49,13 @@ export const CollectionLink = (props: any) => {
                 {props.title}
               </p>
             </div>
-            <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-              {`${props.description.slice(0, 125)}${
-                props.description.length > 125 ? "..." : ""
-              }`}
-            </p>
+            {props.description && (
+              <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
+                {`${props.description.slice(0, 125)}${
+                  props.description.length > 125 ? "..." : ""
+                }`}
+              </p>
+            )}
           </div>
         </div>
       </div>

app/components/Comments/Comments.Add.tsx

@@ -1,4 +1,4 @@
-import { Button, Modal, ToggleSwitch, Label, Textarea } from "flowbite-react";
+import { Button, Label, Modal, ModalBody, ModalHeader, Textarea, ToggleSwitch } from "flowbite-react";
 import { CommentsComment } from "./Comments.Comment";
 import { useState } from "react";
 import { ENDPOINTS } from "#/api/config";
@@ -68,12 +68,12 @@ export const CommentsAddModal = (props: {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>
+      <ModalHeader>
         <p className="text-lg font-bold text-gray-900 lg:text-2xl dark:text-white">
           {props.isReply ? "Ответ на комментарий" : "Оставить комментарий"}
         </p>
-      </Modal.Header>
-      <Modal.Body>
+      </ModalHeader>
+      <ModalBody>
         {props.isReply && (
           <div className="mb-4">
             <CommentsComment
@@ -98,7 +98,7 @@ export const CommentsAddModal = (props: {
         <form className="flex flex-col gap-4" onSubmit={(e) => _sendComment(e)}>
           <div>
             <div className="block mb-2 sr-only">
-              <Label htmlFor="comment" value="Ваш комментарий." />
+              <Label htmlFor="comment">Ваш комментарий.</Label>
             </div>
             <Textarea
               id="comment"
@@ -132,7 +132,7 @@ export const CommentsAddModal = (props: {
             </Button>
           </div>
         </form>
-      </Modal.Body>
+      </ModalBody>
     </Modal>
   );
 };

app/components/Comments/Comments.Comment.tsx

@@ -1,7 +1,7 @@
 import { unixToDate, sinceUnixDate } from "#/api/utils";
 import { useEffect, useState } from "react";
 import { ENDPOINTS } from "#/api/config";
-import { Button, Dropdown } from "flowbite-react";
+import { Button, Dropdown, DropdownItem } from "flowbite-react";
 import Link from "next/link";
 import { CommentsAddModal } from "./Comments.Add";
 import { CommentsEditModal } from "./Comments.Edit";
@@ -183,12 +183,12 @@ export const CommentsComment = (props: {
                 <span className="w-6 h-6 bg-gray-400 iconify mdi--more-horiz hover:bg-gray-800 active:bg-gray-800"></span>
               )}
             >
-              <Dropdown.Item onClick={() => setIsEditCommentsOpen(true)}>
+              <DropdownItem onClick={() => setIsEditCommentsOpen(true)}>
                 Редактировать
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => _deleteComment()}>
+              </DropdownItem>
+              <DropdownItem onClick={() => _deleteComment()}>
                 Удалить
-              </Dropdown.Item>
+              </DropdownItem>
             </Dropdown>
           )}
         </footer>

app/components/Comments/Comments.Edit.tsx

@@ -1,4 +1,4 @@
-import { Button, Modal, ToggleSwitch, Label, Textarea } from "flowbite-react";
+import { Button, Label, Modal, ModalBody, ModalHeader, Textarea, ToggleSwitch } from "flowbite-react";
 import { useState } from "react";
 import { ENDPOINTS } from "#/api/config";
 
@@ -56,16 +56,16 @@ export const CommentsEditModal = (props: {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>
+      <ModalHeader>
         <p className="text-lg font-bold text-gray-900 lg:text-2xl dark:text-white">
           Редактировать комментарий
         </p>
-      </Modal.Header>
-      <Modal.Body>
+      </ModalHeader>
+      <ModalBody>
         <form className="flex flex-col gap-4" onSubmit={(e) => _sendComment(e)}>
           <div>
             <div className="block mb-2 sr-only">
-              <Label htmlFor="comment" value="Редактировать ваш комментарий." />
+              <Label htmlFor="comment" >Редактировать ваш комментарий.</Label>
             </div>
             <Textarea
               id="comment"
@@ -99,7 +99,7 @@ export const CommentsEditModal = (props: {
             </Button>
           </div>
         </form>
-      </Modal.Body>
+      </ModalBody>
     </Modal>
   );
 };

app/components/Comments/Comments.Main.tsx

@@ -1,4 +1,4 @@
-import { Card, Button, Modal, Spinner } from "flowbite-react";
+import { Button, Card, Modal, ModalHeader, Spinner } from "flowbite-react";
 import { CommentsComment } from "./Comments.Comment";
 import { useState, useEffect, useCallback } from "react";
 import { ENDPOINTS } from "#/api/config";
@@ -149,7 +149,7 @@ const CommentsAllModal = (props: {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>
+      <ModalHeader>
         <div className="flex flex-col gap-1">
           <h2 className="text-lg font-bold text-gray-900 lg:text-2xl dark:text-white">
             Все комментарии
@@ -158,7 +158,7 @@ const CommentsAllModal = (props: {
             всего: {isLoading ? "загрузка..." : data[0].total_count}
           </p>
         </div>
-      </Modal.Header>
+      </ModalHeader>
       <div
         className="flex flex-col gap-2 p-4 overflow-y-auto"
         onScroll={handleScroll}

app/components/CropModal/CropModal.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import Cropper, { ReactCropperElement } from "react-cropper";
 import "cropperjs/dist/cropper.css";
-import { Button, Modal } from "flowbite-react";
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "flowbite-react";
 
 type CropModalProps = {
   isOpen: boolean;
@@ -71,8 +71,8 @@ export const CropModal: React.FC<CropModalProps> = ({
       }}
       size={"7xl"}
     >
-      <Modal.Header>Обрезать изображение</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Обрезать изображение</ModalHeader>
+      <ModalBody>
         <Cropper
           src={selectedImage}
           style={{ height: 400, width: "100%" }}
@@ -95,8 +95,8 @@ export const CropModal: React.FC<CropModalProps> = ({
           </p>
           <p>Используйте колёсико мыши что-бы изменить масштаб</p>
         </div>
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         <Button
           color={"blue"}
           disabled={isActionsDisabled}
@@ -120,7 +120,7 @@ export const CropModal: React.FC<CropModalProps> = ({
         >
           Отменить
         </Button>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };

app/components/Profile/Profile.Activity.tsx

@@ -1,49 +1,112 @@
 "use client";
-import { Card } from "flowbite-react";
-import Link from "next/link";
-import { numberDeclension } from "#/api/utils";
+import { Button, ButtonGroup, Card } from "flowbite-react";
+import { ProfileActivityCollections } from "./Profile.ActivityCollections";
+import { useEffect, useState } from "react";
+import { ProfileActivityFriends } from "./Profile.ActivityFriends";
+import { ProfileActivityComment } from "./Profile.ActivityComment";
 
 export function ProfileActivity(props: {
   profile_id: number;
   commentCount: number;
-  videoCount: number;
+  commentPreview: any;
   collectionCount: number;
+  collectionPreview: any;
   friendsCount: number;
+  friendsPreview: any;
+  token: string;
+  isMyProfile: boolean;
 }) {
+  const [tab, setTab] = useState<"collections" | "comments" | "friends">(
+    "collections"
+  );
+
+  const [collections, setCollections] = useState<Record<number, any>>({});
+
+  function _setCollection(array: any[]) {
+    if (array && array.length == 0) {
+      return;
+    }
+    let _coll = array.filter((col) => {
+      if (typeof col == "number") {
+        return false;
+      }
+      return true;
+    });
+    _coll.map((col) => {
+      setCollections((prev) => {
+        return {
+          ...prev,
+          [col.id]: col,
+        };
+      });
+
+      if (
+        col.creator.collections_preview &&
+        col.creator.collections_preview.length > 0
+      ) {
+        _setCollection(col.creator.collections_preview || []);
+      }
+    });
+  }
+
+  useEffect(() => {
+    _setCollection(props.collectionPreview || []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.collectionPreview]);
+
   return (
-    <Card className="h-fit">
+    <Card className="overflow-hidden 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>
+      <ButtonGroup>
+        <Button
+          color={tab == "collections" ? "blue" : "light"}
+          onClick={() => setTab("collections")}
+        >
+          <div className="flex flex-col gap-1 sm:flex-row sm:items-center">
+            <p>Коллекции</p>
+            <p>( {props.collectionCount} )</p>
+          </div>
+        </Button>
+        <Button
+          color={tab == "comments" ? "blue" : "light"}
+          onClick={() => setTab("comments")}
+        >
+          <div className="flex flex-col gap-1 sm:flex-row sm:items-center">
+            <p>Комментарии</p>
+            <p>( {props.commentCount} )</p>
+          </div>
+        </Button>
+        <Button
+          color={tab == "friends" ? "blue" : "light"}
+          onClick={() => setTab("friends")}
+        >
+          <div className="flex flex-col gap-1 sm:flex-row sm:items-center">
+            <p>Друзья</p>
+            <p>( {props.friendsCount} )</p>
+          </div>
+        </Button>
+      </ButtonGroup>
+
+      {tab == "collections" && (
+        <ProfileActivityCollections
+          content={Object.values(collections) || []}
+          profile_id={props.profile_id}
+        />
+      )}
+      {tab == "comments" && (
+        <ProfileActivityComment
+          content={props.commentPreview || []}
+          profile_id={props.profile_id}
+        />
+      )}
+      {tab == "friends" && (
+        <ProfileActivityFriends
+          token={props.token}
+          content={props.friendsPreview || []}
+          isMyProfile={props.isMyProfile}
+          profile_id={props.profile_id}
+        />
+      )}
     </Card>
   );
 }

app/components/Profile/Profile.ActivityCollections.tsx

@@ -0,0 +1,64 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/mousewheel";
+import "swiper/css/scrollbar";
+import { Navigation, Mousewheel, Scrollbar } from "swiper/modules";
+import { CollectionLink } from "../CollectionLink/CollectionLink";
+import Link from "next/link";
+
+export const ProfileActivityCollections = (props: {
+  content: any;
+  profile_id: number;
+}) => {
+  return (
+    <div className="max-w-full">
+      <Swiper
+        modules={[Navigation, Mousewheel, Scrollbar]}
+        spaceBetween={8}
+        slidesPerView={"auto"}
+        direction={"horizontal"}
+        mousewheel={{
+          enabled: true,
+          sensitivity: 4,
+        }}
+        scrollbar={{
+          enabled: true,
+          draggable: true,
+        }}
+        allowTouchMove={true}
+        style={
+          {
+            "--swiper-scrollbar-bottom": "0",
+          } as React.CSSProperties
+        }
+      >
+        {props.content &&
+          props.content.length > 0 &&
+          props.content.map((collection) => {
+            return (
+              <SwiperSlide
+                key={`col-prev-${collection.id}`}
+                style={{ width: "fit-content" }}
+              >
+                <div className="w-[350px] xl:w-[500px] aspect-video">
+                  <CollectionLink {...collection} />
+                </div>
+              </SwiperSlide>
+            );
+          })}
+
+        {props.content && props.content.length > 0 ?
+          <SwiperSlide style={{ width: "fit-content" }}>
+            <Link href={`/profile/${props.profile_id}/collections`}>
+              <div className="w-[350px] xl:w-[500px] flex flex-col items-center justify-center 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--arrow-right dark:fill-white"></span>
+                <p>Все коллекции</p>
+              </div>
+            </Link>
+          </SwiperSlide>
+        : <p className="text-lg">У пользователя нет коллекций</p>}
+      </Swiper>
+    </div>
+  );
+};

app/components/Profile/Profile.ActivityComment.tsx

@@ -0,0 +1,92 @@
+import Link from "next/link";
+import Image from "next/image";
+import { sinceUnixDate, unixToDate } from "#/api/utils";
+
+export const ProfileActivityComment = (props: {
+  content: any;
+  profile_id: number;
+}) => {
+  return (
+    <>
+      {props.content && props.content.length > 0 ?
+        props.content.map((comment) => {
+          let isHidden = comment.isSpoiler || comment.likes_count < -5 || false;
+          return (
+            <article
+              className="px-4 py-2 text-sm bg-gray-100 rounded-lg sm:text-base dark:bg-gray-900"
+              key={`comment-${comment.id}`}
+            >
+              <footer className="flex items-center justify-between mb-2">
+                <div className="flex flex-col items-start gap-1 sm:items-center sm:flex-row">
+                  <Link
+                    href={`/profile/${comment.profile.id}`}
+                    className="inline-flex items-center mr-3 text-sm font-semibold text-gray-900 dark:text-white hover:underline"
+                  >
+                    <Image
+                      className="w-6 h-6 mr-2 rounded-full"
+                      width={24}
+                      height={24}
+                      src={comment.profile.avatar}
+                      alt=""
+                    />
+                    {comment.profile.login}
+                  </Link>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    <time
+                      dateTime={comment.timestamp.toString()}
+                      title={unixToDate(comment.timestamp, "full")}
+                    >
+                      {sinceUnixDate(comment.timestamp)}
+                    </time>
+                  </p>
+                  <p
+                    className={`text-sm font-medium border px-1 py-0.5 rounded-md text-center ml-4 min-w-8 ${
+                      comment.likes_count > 0 ?
+                        "text-green-500 dark:text-green-400 border-green-500 dark:border-green-400"
+                      : comment.likes_count < 0 ?
+                        "text-red-500 dark:text-red-400 border-red-500 dark:border-red-400"
+                      : "text-gray-500 dark:text-gray-400 border-gray-500 dark:border-gray-400"
+                    }`}
+                  >
+                    {comment.likes_count}
+                  </p>
+                </div>
+              </footer>
+              <div className="relative flex flex-col py-2">
+                {comment.release && typeof comment.release != "number" && (
+                  <Link href={`/release/${comment.release.id}`}>
+                    <p className="text-gray-900 whitespace-pre-wrap dark:text-gray-500">
+                      {!comment.isDeleted ?
+                        `К релизу: ${comment.release.title_ru || comment.release.title_alt || comment.release.title_original} (${comment.release.year || "?"}) >>`
+                      : ""}
+                    </p>
+                  </Link>
+                )}
+                <p className="text-gray-800 whitespace-pre-wrap dark:text-gray-400">
+                  {!comment.isDeleted ?
+                    comment.message
+                  : "Комментарий был удалён."}
+                </p>
+                {isHidden && (
+                  <button
+                    className="absolute top-0 bottom-0 left-0 right-0"
+                    onClick={() => isHidden == false}
+                  >
+                    <div className="min-w-full min-h-full px-2 py-1.5 rounded-md bg-black text-white bg-opacity-50 backdrop-blur-[8px] flex flex-col justify-center items-center">
+                      <p>
+                        {comment.likes_count < -5 ?
+                          "У комментария слишком низкий рейтинг."
+                        : "Данный комментарий может содержать спойлер."}
+                      </p>
+                      <p className="font-bold">Нажмите, чтобы прочитать</p>
+                    </div>
+                  </button>
+                )}
+              </div>
+            </article>
+          );
+        })
+      : <p className="text-lg">Пользователь не оставлял комментарии</p>}
+    </>
+  );
+};

app/components/Profile/Profile.ActivityFriends.tsx

@@ -0,0 +1,87 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/mousewheel";
+import "swiper/css/scrollbar";
+import { Navigation, Mousewheel, Scrollbar } from "swiper/modules";
+import Link from "next/link";
+import { Avatar, Button } from "flowbite-react";
+import { useState } from "react";
+import { ProfileFriendModal } from "./Profile.FriendsModal";
+
+export const ProfileActivityFriends = (props: {
+  content: any;
+  token: string;
+  isMyProfile: boolean;
+  profile_id: number;
+}) => {
+  const [isFriendModalOpen, setIsFriendModalOpen] = useState(false);
+
+  return (
+    <>
+      <div className="max-w-full">
+        <Swiper
+          modules={[Navigation, Mousewheel, Scrollbar]}
+          spaceBetween={8}
+          slidesPerView={"auto"}
+          direction={"horizontal"}
+          mousewheel={{
+            enabled: true,
+            sensitivity: 4,
+          }}
+          scrollbar={{
+            enabled: true,
+            draggable: true,
+          }}
+          allowTouchMove={true}
+          style={
+            {
+              "--swiper-scrollbar-bottom": "0",
+            } as React.CSSProperties
+          }
+        >
+          {props.content &&
+            props.content.length > 0 &&
+            props.content.map((profile) => {
+              return (
+                <SwiperSlide
+                  key={`friend-prev-${profile.id}`}
+                  style={{ width: "fit-content" }}
+                  className="px-2 py-4"
+                >
+                  <Link href={`/profile/${profile.id}`}>
+                    <div className="flex items-center gap-2">
+                      <Avatar
+                        img={profile.avatar}
+                        size="md"
+                        rounded={true}
+                        bordered={true}
+                        color={profile.is_online ? "success" : "light"}
+                        className="flex-shrink-0"
+                      />
+                      <p className="text-lg">{profile.login}</p>
+                    </div>
+                  </Link>
+                </SwiperSlide>
+              );
+            })}
+          {(props.content && props.content.length > 0) || props.isMyProfile ?
+            <SwiperSlide style={{ width: "fit-content" }} className="px-2 py-4">
+              <Button onClick={() => setIsFriendModalOpen(true)}>
+                <p className="text-lg">Все друзья {props.isMyProfile ? "и заявки" : ""}</p>
+                <span className="w-8 h-8 iconify mdi--arrow-right dark:fill-white"></span>
+              </Button>
+            </SwiperSlide>
+          : <p className="text-lg">У пользователя нет друзей</p>}
+        </Swiper>
+      </div>
+      <ProfileFriendModal
+        isOpen={isFriendModalOpen}
+        setIsOpen={setIsFriendModalOpen}
+        token={props.token}
+        isMyProfile={props.isMyProfile}
+        profile_id={props.profile_id}
+      ></ProfileFriendModal>
+    </>
+  );
+};

app/components/Profile/Profile.BlockedUsersModal.tsx

@@ -0,0 +1,177 @@
+import { ENDPOINTS } from "#/api/config";
+import { tryCatchAPI, unixToDate, useSWRfetcher } from "#/api/utils";
+import { Avatar, Button, Modal, ModalHeader, useThemeMode } from "flowbite-react";
+import { useCallback, useEffect, useState } from "react";
+import useSWRInfinite from "swr/infinite";
+import { Spinner } from "../Spinner/Spinner";
+import { toast } from "react-toastify";
+
+export const ProfileBlockedUsersModal = (props: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  token: string;
+  profile_id: number;
+}) => {
+  const [currentRef, setCurrentRef] = useState<any>(null);
+  const theme = useThemeMode();
+  const [actionsDisabled, setActionsDisabled] = useState(false);
+  const [unblockedUsers, setUnblockedUsers] = useState([]);
+
+  const modalRef = useCallback((ref) => {
+    setCurrentRef(ref);
+  }, []);
+
+  const getKey = (pageIndex: number, previousPageData: any) => {
+    if (previousPageData && !previousPageData.content.length) return null;
+    let url = `${ENDPOINTS.user.blocklist}/all/${pageIndex}?token=${props.token}`;
+    return url;
+  };
+
+  const { data, error, isLoading, size, setSize } = useSWRInfinite(
+    getKey,
+    useSWRfetcher,
+    { initialSize: 2 }
+  );
+
+  async function _addToBlocklist(profile_id) {
+    setActionsDisabled(true);
+
+    const tid = toast.loading(
+      unblockedUsers.includes(profile_id) ?
+        "Блокируем пользователя..."
+      : "Разблокируем пользователя...",
+      {
+        position: "bottom-center",
+        hideProgressBar: true,
+        closeOnClick: false,
+        pauseOnHover: false,
+        draggable: false,
+        theme: theme.mode == "light" ? "light" : "dark",
+      }
+    );
+
+    let url = `${ENDPOINTS.user.blocklist}`;
+    unblockedUsers.includes(profile_id) ?
+      (url += "/add/")
+    : (url += "/remove/");
+    url += `${profile_id}?token=${props.token}`;
+
+    const { data, error } = await tryCatchAPI(fetch(url));
+    if (error) {
+      toast.update(tid, {
+        render:
+          unblockedUsers.includes(profile_id) ?
+            "Ошибка блокировки"
+          : "Ошибка разблокировки",
+        type: "error",
+        autoClose: 2500,
+        isLoading: false,
+        closeOnClick: true,
+        draggable: true,
+      });
+      setActionsDisabled(false);
+      return;
+    }
+
+    toast.update(tid, {
+      render:
+        unblockedUsers.includes(profile_id) ?
+          "Пользователь заблокирован"
+        : "Пользователь разблокирован",
+      type: "success",
+      autoClose: 2500,
+      isLoading: false,
+      closeOnClick: true,
+      draggable: true,
+    });
+
+    if (unblockedUsers.includes(profile_id)) {
+      setUnblockedUsers((prev) => {
+        return prev.filter((item) => item !== profile_id);
+      });
+    } else {
+      setUnblockedUsers((prev) => {
+        return [...prev, profile_id];
+      });
+    }
+    setActionsDisabled(false);
+  }
+
+  const [content, setContent] = useState([]);
+  useEffect(() => {
+    if (data) {
+      let allReleases = [];
+      for (let i = 0; i < data.length; i++) {
+        allReleases.push(...data[i].content);
+      }
+      setContent(allReleases);
+    }
+  }, [data]);
+
+  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);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPosition]);
+  return (
+    <>
+      <Modal
+        dismissible
+        show={props.isOpen}
+        onClose={() => props.setIsOpen(false)}
+        size={"7xl"}
+      >
+        <ModalHeader>Заблокированные пользователи</ModalHeader>
+        <div
+          className="flex flex-col gap-2 p-4 overflow-y-auto"
+          onScroll={handleScroll}
+          ref={modalRef}
+        >
+          {content && content.length > 0 ?
+            content.map((user) => {
+              return (
+                <div className="flex items-center justify-between gap-2" key={`blockeduser-${user.id}`}>
+                  <div className="flex gap-2">
+                    <Avatar
+                      alt=""
+                      img={user.avatar}
+                      rounded={true}
+                      size={"md"}
+                      bordered={true}
+                      color={user.is_online ? "success" : "light"}
+                      className="flex-shrink-0"
+                    />
+                    <div className="flex flex-col gap-1">
+                      <p className="text-lg font-semibold">{user.login}</p>
+                      <p>Заблокирован: {unixToDate(user.added_date, "full")}</p>
+                    </div>
+                  </div>
+                  <Button
+                    color={!unblockedUsers.includes(user.id) ? "blue" : "red"}
+                    onClick={() => _addToBlocklist(user.id)}
+                    disabled={actionsDisabled}
+                    className="flex-grow-0 h-fit"
+                  >
+                    {!unblockedUsers.includes(user.id) ?
+                      "Разблокировать"
+                    : "Заблокировать"}
+                  </Button>
+                </div>
+              );
+            })
+          : "Нет заблокированных пользователей"}
+          {isLoading && <Spinner />}
+        </div>
+      </Modal>
+    </>
+  );
+};

app/components/Profile/Profile.EditLoginModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Modal, Textarea, useThemeMode } from "flowbite-react";
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Textarea, useThemeMode } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
 import { useSWRConfig } from "swr";
@@ -138,8 +138,8 @@ export const ProfileEditLoginModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"4xl"}
     >
-      <Modal.Header>Изменить никнейм</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Изменить никнейм</ModalHeader>
+      <ModalBody>
         {loading ?
           <div className="flex items-center justify-center py-8">
             <Spinner />
@@ -173,8 +173,8 @@ export const ProfileEditLoginModal = (props: {
             }
           </>
         }
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         {_loginData.is_change_available && (
           <Button
             color="blue"
@@ -191,7 +191,7 @@ export const ProfileEditLoginModal = (props: {
         >
           Отмена
         </Button>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };

app/components/Profile/Profile.EditModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FileInput, Label, Modal, useThemeMode } from "flowbite-react";
+import { FileInput, Label, Modal, ModalBody, ModalHeader, useThemeMode } from "flowbite-react";
 import { Spinner } from "../Spinner/Spinner";
 import useSWR from "swr";
 import { ENDPOINTS } from "#/api/config";
@@ -14,6 +14,7 @@ import { useSWRConfig } from "swr";
 import { useUserStore } from "#/store/auth";
 import { ProfileEditLoginModal } from "./Profile.EditLoginModal";
 import { toast } from "react-toastify";
+import { ProfileBlockedUsersModal } from "./Profile.BlockedUsersModal";
 
 export const ProfileEditModal = (props: {
   isOpen: boolean;
@@ -25,6 +26,7 @@ export const ProfileEditModal = (props: {
   const [statusModalOpen, setStatusModalOpen] = useState(false);
   const [socialModalOpen, setSocialModalOpen] = useState(false);
   const [loginModalOpen, setLoginModalOpen] = useState(false);
+  const [blockedModalOpen, setBlockedModalOpen] = useState(false);
   const [privacyModalSetting, setPrivacyModalSetting] = useState("none");
   const [privacySettings, setPrivacySettings] = useState({
     privacy_stats: 9,
@@ -186,6 +188,7 @@ export const ProfileEditModal = (props: {
     if (avatarModalProps.croppedImage) {
       _uploadAvatar();
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [avatarModalProps.croppedImage]);
 
   if (!prefData || !loginData || prefError || loginError) {
@@ -199,8 +202,8 @@ export const ProfileEditModal = (props: {
         onClose={() => props.setIsOpen(false)}
         size={"7xl"}
       >
-        <Modal.Header>Редактирование профиля</Modal.Header>
-        <Modal.Body>
+        <ModalHeader>Редактирование профиля</ModalHeader>
+        <ModalBody>
           {prefLoading ?
             <Spinner />
           : <div className="flex flex-col gap-4">
@@ -355,13 +358,18 @@ export const ProfileEditModal = (props: {
                     }
                   </p>
                 </button>
-                {/* <button className="p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900">
+                <button
+                  className="p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
+                  onClick={() => {
+                    setBlockedModalOpen(true);
+                  }}
+                >
                   <p className="text-lg">Блоклист</p>
                   <p className="text-base text-gray-500 dark:text-gray-400">
                     Список пользователей, которым запрещён доступ к вашей
                     странице
                   </p>
-                </button> */}
+                </button>
               </div>
               <div>
                 <div className="flex flex-col">
@@ -387,7 +395,7 @@ export const ProfileEditModal = (props: {
               </div>
             </div>
           }
-        </Modal.Body>
+        </ModalBody>
       </Modal>
       {props.token ?
         <>
@@ -431,6 +439,12 @@ export const ProfileEditModal = (props: {
             setLogin={setLogin}
             profile_id={props.profile_id}
           />
+          <ProfileBlockedUsersModal
+            isOpen={blockedModalOpen}
+            setIsOpen={setBlockedModalOpen}
+            token={props.token}
+            profile_id={props.profile_id}
+          />
         </>
       : ""}
     </>

app/components/Profile/Profile.EditPrivacyModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Modal, useThemeMode } from "flowbite-react";
+import { Modal, ModalBody, ModalHeader, useThemeMode } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useState } from "react";
 import { toast } from "react-toastify";
@@ -98,8 +98,8 @@ export const ProfileEditPrivacyModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"4xl"}
     >
-      <Modal.Header>{setting_text[props.setting]}</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>{setting_text[props.setting]}</ModalHeader>
+      <ModalBody>
         {props.setting != "none" ?
           <>
             <div className="flex flex-col gap-2">
@@ -202,7 +202,7 @@ export const ProfileEditPrivacyModal = (props: {
             </div>
           </>
         : ""}
-      </Modal.Body>
+      </ModalBody>
     </Modal>
   );
 };

app/components/Profile/Profile.EditSocialModal.tsx

@@ -1,6 +1,15 @@
 "use client";
 
-import { Button, Modal, Label, TextInput, useThemeMode } from "flowbite-react";
+import {
+  Button,
+  Label,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  TextInput,
+  useThemeMode,
+} from "flowbite-react";
 import { Spinner } from "../Spinner/Spinner";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
@@ -164,8 +173,8 @@ export const ProfileEditSocialModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"4xl"}
     >
-      <Modal.Header>Соц. сети</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Соц. сети</ModalHeader>
+      <ModalBody>
         <p className="p-2 text-gray-400 border-2 border-gray-200 rounded-md dark:border-gray-500 dark:text-gray-300">
           Укажите ссылки на свои социальные сети, чтобы другие пользователи
           могли с вами связаться
@@ -177,7 +186,7 @@ export const ProfileEditSocialModal = (props: {
         : <div className="flex flex-col gap-4 py-4">
             <div>
               <div className="block mb-2">
-                <Label htmlFor="vk-page" value="ВКонтакте" />
+                <Label htmlFor="vk-page">ВКонтакте</Label>
               </div>
               <TextInput
                 id="vk-page"
@@ -189,7 +198,7 @@ export const ProfileEditSocialModal = (props: {
             </div>
             <div>
               <div className="block mb-2">
-                <Label htmlFor="tg-page" value="Telegram" />
+                <Label htmlFor="tg-page">Telegram</Label>
               </div>
               <TextInput
                 id="tg-page"
@@ -201,7 +210,7 @@ export const ProfileEditSocialModal = (props: {
             </div>
             <div>
               <div className="block mb-2">
-                <Label htmlFor="discord-page" value="Discord" />
+                <Label htmlFor="discord-page">Discord</Label>
               </div>
               <TextInput
                 id="discord-page"
@@ -213,7 +222,7 @@ export const ProfileEditSocialModal = (props: {
             </div>
             <div>
               <div className="block mb-2">
-                <Label htmlFor="inst-page" value="Instagram" />
+                <Label htmlFor="inst-page">Instagram</Label>
               </div>
               <TextInput
                 id="inst-page"
@@ -225,7 +234,7 @@ export const ProfileEditSocialModal = (props: {
             </div>
             <div>
               <div className="block mb-2">
-                <Label htmlFor="tt-page" value="TikTok" />
+                <Label htmlFor="tt-page">TikTok</Label>
               </div>
               <TextInput
                 id="tt-page"
@@ -237,8 +246,8 @@ export const ProfileEditSocialModal = (props: {
             </div>
           </div>
         }
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         <Button
           color="blue"
           onClick={() => _setSocialSetting()}
@@ -253,7 +262,7 @@ export const ProfileEditSocialModal = (props: {
         >
           Отмена
         </Button>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };

app/components/Profile/Profile.EditStatusModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Modal, Textarea, useThemeMode } from "flowbite-react";
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Textarea, useThemeMode } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
 import { useSWRConfig } from "swr";
@@ -96,8 +96,8 @@ export const ProfileEditStatusModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"4xl"}
     >
-      <Modal.Header>Изменить статус</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Изменить статус</ModalHeader>
+      <ModalBody>
         <Textarea
           disabled={loading}
           rows={3}
@@ -111,8 +111,8 @@ export const ProfileEditStatusModal = (props: {
         <p className="text-sm text-right text-gray-500 dark:text-gray-300">
           {_stringLength}/80
         </p>
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         <Button
           color="blue"
           onClick={() => _setStatusSetting()}
@@ -123,7 +123,7 @@ export const ProfileEditStatusModal = (props: {
         <Button color="red" onClick={() => props.setIsOpen(false)}>
           Отмена
         </Button>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };

app/components/Profile/Profile.FriendsModal.tsx

@@ -0,0 +1,346 @@
+import { ENDPOINTS } from "#/api/config";
+import { tryCatchAPI, unixToDate, useSWRfetcher } from "#/api/utils";
+import {
+  Avatar,
+  Button,
+  Modal,
+  ModalHeader,
+  useThemeMode,
+} from "flowbite-react";
+import { useCallback, useEffect, useState } from "react";
+import useSWRInfinite from "swr/infinite";
+import { Spinner } from "../Spinner/Spinner";
+import { toast } from "react-toastify";
+import useSWR, { mutate } from "swr";
+import Link from "next/link";
+
+export const ProfileFriendModal = (props: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  token: string;
+  isMyProfile: boolean;
+  profile_id: number;
+}) => {
+  const [currentRef, setCurrentRef] = useState<any>(null);
+  const theme = useThemeMode();
+  const [actionsDisabled, setActionsDisabled] = useState(false);
+  // const [requestInUsers, setRequestInUsers] = useState([]);
+  // const [requestOutUsers, setRequestOutUsers] = useState([]);
+  const [friends, setFriends] = useState([]);
+
+  const modalRef = useCallback((ref) => {
+    setCurrentRef(ref);
+  }, []);
+
+  const useFetchRequests = (url: string) => {
+    const { data, error, isLoading } = useSWR(url, useSWRfetcher);
+    return [data, error, isLoading];
+  };
+
+  const [requestInUsersData, requestInUsersError, requestInUsersIsLoading] =
+    useFetchRequests(
+      props.isMyProfile ?
+        `${ENDPOINTS.user.friend.in}/last?token=${props.token}&count=8`
+      : ""
+    );
+
+  const [requestOutUsersData, requestOutUsersError, requestOutUsersIsLoading] =
+    useFetchRequests(
+      props.isMyProfile ?
+        `${ENDPOINTS.user.friend.out}/last?token=${props.token}&count=8`
+      : ""
+    );
+
+  async function _hideRequestIn(profile_id) {
+    const tid = toast.loading("Скрываем заявку...", {
+      position: "bottom-center",
+      hideProgressBar: true,
+      closeOnClick: false,
+      pauseOnHover: false,
+      draggable: false,
+      theme: theme.mode == "light" ? "light" : "dark",
+    });
+
+    let url = `${ENDPOINTS.user.friend.hide}/${profile_id}?token=${props.token}`;
+    const { data, error } = await tryCatchAPI(fetch(url));
+    if (error) {
+      toast.update(tid, {
+        render: "Ошибка скрытия заявки",
+        type: "error",
+        autoClose: 2500,
+        isLoading: false,
+        closeOnClick: true,
+        draggable: true,
+      });
+      return;
+    }
+
+    toast.update(tid, {
+      render: "Заявка скрыта",
+      type: "success",
+      autoClose: 2500,
+      isLoading: false,
+      closeOnClick: true,
+      draggable: true,
+    });
+    mutate(`${ENDPOINTS.user.friend.in}/last?token=${props.token}&count=8`);
+  }
+
+  async function _acceptRequestIn(profile_id) {
+    const tid = toast.loading("Принимаем запрос...", {
+      position: "bottom-center",
+      hideProgressBar: true,
+      closeOnClick: false,
+      pauseOnHover: false,
+      draggable: false,
+      theme: theme.mode == "light" ? "light" : "dark",
+    });
+
+    let url = `${ENDPOINTS.user.friend.add}/${profile_id}?token=${props.token}`;
+    const { data, error } = await tryCatchAPI(fetch(url));
+    if (error) {
+      toast.update(tid, {
+        render: "Ошибка приёма запроса",
+        type: "error",
+        autoClose: 2500,
+        isLoading: false,
+        closeOnClick: true,
+        draggable: true,
+      });
+      return;
+    }
+
+    toast.update(tid, {
+      render: "Запрос принят",
+      type: "success",
+      autoClose: 2500,
+      isLoading: false,
+      closeOnClick: true,
+      draggable: true,
+    });
+    mutate(`${ENDPOINTS.user.friend.in}/last?token=${props.token}&count=8`);
+  }
+
+  async function _cancelRequestOut(profile_id) {
+    const tid = toast.loading("Отменяем запрос...", {
+      position: "bottom-center",
+      hideProgressBar: true,
+      closeOnClick: false,
+      pauseOnHover: false,
+      draggable: false,
+      theme: theme.mode == "light" ? "light" : "dark",
+    });
+
+    let url = `${ENDPOINTS.user.friend.remove}/${profile_id}?token=${props.token}`;
+    const { data, error } = await tryCatchAPI(fetch(url));
+    if (error) {
+      toast.update(tid, {
+        render: "Ошибка отмена запроса",
+        type: "error",
+        autoClose: 2500,
+        isLoading: false,
+        closeOnClick: true,
+        draggable: true,
+      });
+      return;
+    }
+
+    toast.update(tid, {
+      render: "Запрос отменён",
+      type: "success",
+      autoClose: 2500,
+      isLoading: false,
+      closeOnClick: true,
+      draggable: true,
+    });
+    mutate(`${ENDPOINTS.user.friend.out}/last?token=${props.token}&count=8`);
+  }
+
+  const getKey = (pageIndex: number, previousPageData: any) => {
+    if (previousPageData && !previousPageData.content.length) return null;
+    let url = `${ENDPOINTS.user.friend.list}/${props.profile_id}/${pageIndex}?token=${props.token}`;
+    return url;
+  };
+
+  const { data, error, isLoading, size, setSize } = useSWRInfinite(
+    getKey,
+    useSWRfetcher,
+    { initialSize: 2 }
+  );
+
+  useEffect(() => {
+    if (data) {
+      let allFriends = [];
+      for (let i = 0; i < data.length; i++) {
+        allFriends.push(...data[i].content);
+      }
+      setFriends(allFriends);
+    }
+  }, [data]);
+
+  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);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPosition]);
+
+  return (
+    <>
+      <Modal
+        dismissible
+        show={props.isOpen}
+        onClose={() => props.setIsOpen(false)}
+        size={"4xl"}
+      >
+        <ModalHeader>Друзья</ModalHeader>
+        <div
+          className="flex flex-col gap-4 p-4 overflow-y-auto"
+          onScroll={handleScroll}
+          ref={modalRef}
+        >
+          {props.isMyProfile && (
+            <>
+              <div className="flex flex-col gap-2">
+                <p className="text-lg font-semibold">Входящие заявки</p>
+                {(
+                  requestInUsersData &&
+                  requestInUsersData.content &&
+                  requestInUsersData.content.length > 0
+                ) ?
+                  requestInUsersData.content.map((user) => {
+                    return (
+                      <div
+                        className="flex items-center justify-between gap-2"
+                        key={`friend_req_in-${user.id}`}
+                      >
+                        <Link href={`/profile/${user.id}`}>
+                          <div className="flex gap-2">
+                            <Avatar
+                              alt=""
+                              img={user.avatar}
+                              rounded={true}
+                              size={"md"}
+                              bordered={true}
+                              color={user.is_online ? "success" : "light"}
+                              className="flex-shrink-0"
+                            />
+                            <div className="flex flex-col gap-1">
+                              <p className="text-lg font-semibold">
+                                {user.login}
+                              </p>
+                              <p>Друзей: {user.friend_count}</p>
+                            </div>
+                          </div>
+                        </Link>
+                        <div className="flex gap-2">
+                          <Button
+                            color="blue"
+                            onClick={() => _acceptRequestIn(user.id)}
+                          >
+                            Принять
+                          </Button>
+                          <Button
+                            color="light"
+                            onClick={() => _hideRequestIn(user.id)}
+                          >
+                            Скрыть
+                          </Button>
+                        </div>
+                      </div>
+                    );
+                  })
+                : <p className="text-sm">Нет входящих заявок</p>}
+              </div>
+              <div className="flex flex-col gap-2">
+                <p className="text-lg font-semibold">Исходящие заявки</p>
+                {(
+                  requestOutUsersData &&
+                  requestOutUsersData.content &&
+                  requestOutUsersData.content.length > 0
+                ) ?
+                  requestOutUsersData.content.map((user) => {
+                    return (
+                      <div
+                        className="flex items-center justify-between gap-2"
+                        key={`friend_req_out-${user.id}`}
+                      >
+                        <Link href={`/profile/${user.id}`}>
+                          <div className="flex gap-2">
+                            <Avatar
+                              alt=""
+                              img={user.avatar}
+                              rounded={true}
+                              size={"md"}
+                              bordered={true}
+                              color={user.is_online ? "success" : "light"}
+                              className="flex-shrink-0"
+                            />
+                            <div className="flex flex-col gap-1">
+                              <p className="text-lg font-semibold">
+                                {user.login}
+                              </p>
+                              <p>Друзей: {user.friend_count}</p>
+                            </div>
+                          </div>
+                        </Link>
+                        <div className="flex gap-2">
+                          <Button
+                            color="light"
+                            onClick={() => _cancelRequestOut(user.id)}
+                          >
+                            Отменить
+                          </Button>
+                        </div>
+                      </div>
+                    );
+                  })
+                : <p className="text-sm">Нет исходящих заявок</p>}
+              </div>
+            </>
+          )}
+          <div className="flex flex-col gap-2">
+            <p className="text-lg font-semibold">Все друзья</p>
+            {friends && friends.length > 0 ?
+              friends.map((user) => {
+                return (
+                  <div
+                    className="flex items-center justify-between gap-2"
+                    key={`friend-${user.id}`}
+                  >
+                    <Link href={`/profile/${user.id}`}>
+                      <div className="flex gap-2">
+                        <Avatar
+                          alt=""
+                          img={user.avatar}
+                          rounded={true}
+                          size={"md"}
+                          bordered={true}
+                          color={user.is_online ? "success" : "light"}
+                          className="flex-shrink-0"
+                        />
+                        <div className="flex flex-col gap-1">
+                          <p className="text-lg font-semibold">{user.login}</p>
+                          <p>Друзей: {user.friend_count}</p>
+                        </div>
+                      </div>
+                    </Link>
+                  </div>
+                );
+              })
+            : <p className="text-sm">Нет друзей</p>}
+          </div>
+          {isLoading && <Spinner />}
+        </div>
+      </Modal>
+    </>
+  );
+};

app/components/Profile/Profile.ReleaseHistory.tsx

@@ -1,49 +1,79 @@
-import { Card, Carousel } from "flowbite-react";
-import type {
-  FlowbiteCarouselIndicatorsTheme,
-  FlowbiteCarouselControlTheme,
-  CustomFlowbiteTheme,
-} from "flowbite-react";
-import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
+import { Card } from "flowbite-react";
 
-const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
-  active: {
-    off: "bg-gray-400/50 hover:bg-gray-200",
-    on: "bg-gray-200",
-  },
-  base: "h-3 w-3 rounded-full max-w-[300px]",
-  wrapper: "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3",
-};
+import { ReleaseChips } from "../ReleasePoster/Chips";
+import { Poster } from "../ReleasePoster/Poster";
+import Link from "next/link";
 
-const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
-  base: "inline-flex h-8 w-8 items-center justify-center rounded-full group-focus:outline-none group-focus:ring-4 bg-gray-400/30 group-hover:bg-gray-400/60 group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
-  icon: "h-5 w-5 text-gray-400 sm:h-6 sm:w-6",
-};
-
-const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
-  root: {
-    base: "relative h-full w-full max-w-[375px]",
-  },
-  indicators: CarouselIndicatorsTheme,
-  control: CarouselControlsTheme,
+const profile_lists = {
+  // 0: "Не смотрю",
+  1: { name: "Смотрю", bg_color: "bg-green-500" },
+  2: { name: "В планах", bg_color: "bg-purple-500" },
+  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
+  4: { name: "Отложено", bg_color: "bg-yellow-500" },
+  5: { name: "Брошено", bg_color: "bg-red-500" },
 };
 
 export const ProfileReleaseHistory = (props: any) => {
   return (
     <Card className="h-fit">
       <h1 className="text-2xl font-bold">Недавно просмотренные</h1>
-      <div className="flex justify-center">
-        <Carousel theme={CarouselTheme}>
-          {props.history.map((release) => {
-            return (
-              <ReleaseLink
-                key={`history-${release.id}`}
-                {...release}
-                chipsSettings={{ lastWatchedHidden: false }}
-              />
-            );
-          })}
-        </Carousel>
+      <div className="flex flex-col gap-4">
+        {props.history.map((release) => {
+          const genres = [];
+          const grade = release.grade ? Number(release.grade.toFixed(1)) : null;
+          const profile_list_status = release.profile_list_status || null;
+          let user_list = null;
+          if (profile_list_status != null || profile_list_status != 0) {
+            user_list = profile_lists[profile_list_status];
+          }
+          if (release.genres) {
+            const genres_array = release.genres.split(",");
+            genres_array.forEach((genre) => {
+              genres.push(genre.trim());
+            });
+          }
+          return (
+            <Link href={`/release/${release.id}`} key={`history-${release.id}`}>
+              <div className="flex gap-2">
+                <div className="flex-shrink-0 w-32">
+                  <Poster image={release.image} className="h-auto" />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <ReleaseChips
+                    {...release}
+                    user_list={user_list}
+                    grade={grade}
+                    settings={{ lastWatchedHidden: false }}
+                  />
+                  <div>
+                    {genres.length > 0 &&
+                      genres.map((genre: string, index: number) => {
+                        return (
+                          <span
+                            key={`release_${props.id}_genre_${genre}_${index}`}
+                            className="text-sm font-light dark:text-white"
+                          >
+                            {index > 0 && ", "}
+                            {genre}
+                          </span>
+                        );
+                      })}
+                  </div>
+                  {release.title_ru && (
+                    <p className="text-lg font-bold dark:text-white">
+                      {release.title_ru}
+                    </p>
+                  )}
+                  {release.title_original && (
+                    <p className="text-sm text-gray-600 dark:text-gray-300">
+                      {release.title_original}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </Link>
+          );
+        })}
       </div>
     </Card>
   );

app/components/Profile/Profile.ReleaseRatings.tsx

@@ -1,16 +1,5 @@
-import {
-  Card,
-  Carousel,
-  RatingStar,
-  Rating,
-  Modal,
-  Button,
-} from "flowbite-react";
-import type {
-  FlowbiteCarouselIndicatorsTheme,
-  FlowbiteCarouselControlTheme,
-} from "flowbite-react";
-import Image from "next/image";
+import { Button, Card, Modal, ModalHeader, Rating, RatingStar } from "flowbite-react";
+
 import { unixToDate, useSWRfetcher } from "#/api/utils";
 import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
@@ -19,28 +8,6 @@ import useSWRInfinite from "swr/infinite";
 import { Spinner } from "../Spinner/Spinner";
 import { Poster } from "../ReleasePoster/Poster";
 
-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 = {
-  root: {
-    base: "relative h-full w-full max-w-[700px]",
-  },
-  indicators: CarouselIndicatorsTheme,
-  control: CarouselControlsTheme,
-};
-
 export const ProfileReleaseRatings = (props: any) => {
   const [modal, setModal] = useState(false);
   return (
@@ -51,33 +18,31 @@ export const ProfileReleaseRatings = (props: any) => {
           Посмотреть все
         </Button>
       </div>
-      <div className="flex min-h-[200px] items-center justify-center">
-        <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">
-                  <div className="max-w-32">
-                    <Poster image={release.image} />
-                  </div>
-                  <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 className="flex flex-col w-full gap-4">
+        {props.ratings.map((release) => {
+          return (
+            <Link href={`/release/${release.id}`} key={`vote-${release.id}`}>
+              <div className="flex gap-2">
+                <div className="max-w-32">
+                  <Poster image={release.image} />
                 </div>
-              </Link>
-            );
-          })}
-        </Carousel>
+                <div className="flex flex-col gap-1">
+                  <h2 className="text-lg font-bold dark:text-white">{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>
+          );
+        })}
       </div>
       <ProfileReleaseRatingsModal
         profile_id={props.profile_id}
@@ -148,7 +113,7 @@ const ProfileReleaseRatingsModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"4xl"}
     >
-      <Modal.Header>Оценки</Modal.Header>
+      <ModalHeader>Оценки</ModalHeader>
       <div
         className="flex flex-col gap-2 p-4 overflow-y-auto"
         onScroll={handleScroll}

app/components/Profile/Profile.Role.tsx

@@ -0,0 +1,15 @@
+interface UserRoleProps {
+  name: string;
+  color: string;
+}
+
+export const UserRole = ({ name, color }: UserRoleProps) => {
+  return (
+    <div
+      className={`text-[var(--color)] border border-[var(--color)] rounded-md`}
+      style={{ "--color": `#${color}` } as React.CSSProperties}
+    >
+      <p className="px-1.5 py-0.5">{name}</p>
+    </div>
+  );
+};

app/components/Profile/Profile.Social.tsx

@@ -0,0 +1,20 @@
+interface UserSocialProps {
+  icon: string;
+  url?: string;
+  nickname: string;
+  color: string;
+}
+
+export const UserSocial = ({ nickname, icon, color }: UserSocialProps) => {
+  return (
+    <div
+      className={`border border-[var(--color)] rounded-md`}
+      style={{ "--color": `#${color}` } as React.CSSProperties}
+    >
+      <div className="flex gap-1 items-center px-1.5 py-1">
+          <span className={`iconify w-6 h-6 bg-[var(--color)] ${icon}`}></span>
+          <p>{nickname}</p>
+      </div>
+    </div>
+  );
+};

app/components/Profile/Profile.User.tsx

@@ -1,145 +1,154 @@
 "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;
+import { Avatar, Card, useThemeMode } from "flowbite-react";
+import { UserRole } from "./Profile.Role";
+import { UserSocial } from "./Profile.Social";
+import Link from "next/link";
+
+interface ProfileUserProps {
   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();
+  roles: {
+    id: number;
+    name: string;
+    color: string;
+  }[];
+  isMyProfile: boolean;
+  isSponsor: boolean;
+  isBlocked: boolean;
+  isVerified: boolean;
+  isOnline: boolean;
+  socials: {
+    vk: string;
+    tg: string;
+    tt: string;
+    inst: string;
+    discord: string;
+  };
+  is_social_hidden: boolean;
+}
+
+export const ProfileUser = ({
+  avatar,
+  login,
+  status,
+  rating,
+  roles,
+  isMyProfile,
+  isVerified,
+  isOnline,
+  isSponsor,
+  isBlocked,
+  socials,
+  is_social_hidden,
+}: ProfileUserProps) => {
+  const theme = useThemeMode().mode;
+
   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
-                }
-              />
-            ))}
+    <Card>
+      {(isMyProfile ||
+        isVerified ||
+        isSponsor ||
+        isBlocked ||
+        roles.length > 0) && (
+        <div className="flex flex-wrap gap-2">
+          {isMyProfile && <UserRole name="Мой профиль" color="3f83f8" />}
+          {isBlocked && <UserRole name="Заблокирован" color="f56565" />}
+          {isVerified && <UserRole name="Верифицирован" color="0e9f6e" />}
+          {isSponsor && <UserRole name="Спонсор Anixart" color="ecc94b" />}
+          {roles.map((role) => (
+            <UserRole key={role.id} name={role.name} color={role.color} />
+          ))}
         </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}{" "}
+      <div className="flex flex-col items-center gap-4 sm:items-start sm:flex-row">
+        <Avatar
+          alt=""
+          img={avatar}
+          rounded={true}
+          size={"lg"}
+          bordered={true}
+          color={isOnline ? "success" : "light"}
+          className="flex-shrink-0"
+        />
+        <div className="flex flex-col gap-2">
+          <p className="flex items-center gap-2 text-2xl font-semibold">
+            {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"
+              className={`border rounded-md px-2 py-1 min-w-8 text-sm flex items-center justify-center ${
+                rating > 0 ?
+                  "border-green-500 text-green-500"
+                : "border-red-500 text-red-500"
               }`}
             >
-              {props.rating}
+              {rating}
             </span>
-          </div>
-          <div className="text-sm text-gray-500 whitespace-pre-wrap sm:text-md dark:text-gray-400 ">
-            {props.status}
-          </div>
+          </p>
+          <p className="text-sm whitespace-pre-wrap sm:text-md">{status}</p>
         </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>
-      )}
+      </div>
+      {!is_social_hidden &&
+        (socials.vk ||
+          socials.tg ||
+          socials.discord ||
+          socials.tt ||
+          socials.inst) && (
+          <div className="flex flex-wrap gap-2">
+            {socials.vk && (
+              <Link href={`https://vk.com/${socials.vk}`} target="_blank">
+                <UserSocial
+                  nickname={socials.vk}
+                  icon="fa6-brands--vk"
+                  url={`https://vk.com/${socials.vk}`}
+                  color="4a76a8"
+                />
+              </Link>
+            )}
+            {socials.tg && (
+              <Link href={`https://t.me/${socials.tg}`} target="_blank">
+                <UserSocial
+                  nickname={socials.tg}
+                  icon="fa6-brands--telegram"
+                  url={`https://t.me/${socials.tg}`}
+                  color="2aabee"
+                />
+              </Link>
+            )}
+            {socials.tt && (
+              <Link href={`https://tiktok.com/@${socials.tt}`} target="_blank">
+                <UserSocial
+                  nickname={socials.tt}
+                  icon="fa6-brands--tiktok"
+                  url={`https://tiktok.com/@${socials.tt}`}
+                  color={theme == "light" ? "000000" : "ffffff"}
+                />
+              </Link>
+            )}
+            {socials.inst && (
+              <Link
+                href={`https://instagram.com/${socials.inst}`}
+                target="_blank"
+              >
+                <UserSocial
+                  nickname={socials.inst}
+                  icon="fa6-brands--instagram"
+                  url={`https://instagram.com/${socials.inst}`}
+                  color="c32aa3"
+                />
+              </Link>
+            )}
+            {socials.discord && (
+              <UserSocial
+                nickname={socials.discord}
+                icon="fa6-brands--discord"
+                url={`https://discord.com/${socials.discord}`}
+                color="5865f2"
+              />
+            )}
+          </div>
+        )}
     </Card>
   );
 };

app/components/Profile/Profile.WatchDynamic.tsx

@@ -28,6 +28,7 @@ export const ProfileWatchDynamic = (props: { watchDynamic: Array<any> }) => {
     },
     tooltip: {
       enabled: true,
+      theme:"dark",
       x: {
         show: false,
       },

app/components/ReleaseInfo/ReleaseInfo.Info.tsx

@@ -1,4 +1,4 @@
-import { Card, Table } from "flowbite-react";
+import { Card, Table, TableBody, TableCell, TableRow } from "flowbite-react";
 import { ReleaseInfoSearchLink } from "#/components/ReleaseInfo/ReleaseInfo.SearchLink";
 import { unixToDate, minutesToTime } from "#/api/utils";
 const weekDay = [
@@ -30,9 +30,9 @@ export const ReleaseInfoInfo = (props: {
   return (
     <Card>
       <Table>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell className="py-0">
+        <TableBody>
+          <TableRow>
+            <TableCell className="py-0">
               {props.country ?
                 props.country.toLowerCase() == "япония" ?
                   <span className="w-8 h-8 iconify-color twemoji--flag-for-japan"></span>
@@ -40,45 +40,45 @@ export const ReleaseInfoInfo = (props: {
 
               : <span className="w-8 h-8 iconify-color twemoji--flag-for-united-nations "></span>
               }
-            </Table.Cell>
-            <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            </TableCell>
+            <TableCell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
               {props.country && props.country}
               {(props.aired_on_date != 0 || props.year) && ", "}
               {props.season && props.season != 0 ?
                 `${YearSeason[props.season]} `
               : ""}
               {props.year && `${props.year} г.`}
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell className="py-0">
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="py-0">
               <span className="w-8 h-8 iconify-color mdi--animation-play-outline dark:invert"></span>
-            </Table.Cell>
-            <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            </TableCell>
+            <TableCell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
               {props.episodes.released ? props.episodes.released : "?"}
               {"/"}
               {props.episodes.total ? props.episodes.total + " эп. " : "? эп. "}
               {props.duration != 0 &&
                 `по ${minutesToTime(props.duration, "daysHours")}`}
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell className="py-0">
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="py-0">
               <span className="w-8 h-8 iconify-color mdi--calendar-outline dark:invert"></span>
-            </Table.Cell>
-            <Table.Cell className="font-medium text-gray-900 dark:text-white">
+            </TableCell>
+            <TableCell className="font-medium text-gray-900 dark:text-white">
               {props.category}
               {", "}
               {props.broadcast == 0 ?
                 props.status.toLowerCase()
               : `выходит ${weekDay[props.broadcast]}`}
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell className="py-0">
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="py-0">
               <span className="w-8 h-8 iconify-color mdi--people-group-outline dark:invert"></span>
-            </Table.Cell>
-            <Table.Cell className="font-medium text-gray-900 dark:text-white">
+            </TableCell>
+            <TableCell className="font-medium text-gray-900 dark:text-white">
               {props.studio && (
                 <>
                   {"Студия: "}
@@ -117,13 +117,13 @@ export const ReleaseInfoInfo = (props: {
                   />
                 </>
               )}
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell className="py-0">
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="py-0">
               <span className="w-8 h-8 iconify-color mdi--tag-outline dark:invert"></span>
-            </Table.Cell>
-            <Table.Cell className="font-medium text-gray-900 dark:text-white">
+            </TableCell>
+            <TableCell className="font-medium text-gray-900 dark:text-white">
               {props.genres &&
                 props.genres.split(", ").map((genre: string, index: number) => {
                   return (
@@ -133,14 +133,14 @@ export const ReleaseInfoInfo = (props: {
                     </div>
                   );
                 })}
-            </Table.Cell>
-          </Table.Row>
+            </TableCell>
+          </TableRow>
           {props.status.toLowerCase() == "анонс" && (
-            <Table.Row>
-              <Table.Cell className="py-0">
+            <TableRow>
+              <TableCell className="py-0">
                 <span className="w-8 h-8 iconify-color mdi--clock-outline dark:invert"></span>
-              </Table.Cell>
-              <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              </TableCell>
+              <TableCell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 {props.aired_on_date != 0 ?
                   unixToDate(props.aired_on_date, "full")
                 : props.year ?
@@ -151,10 +151,10 @@ export const ReleaseInfoInfo = (props: {
                     {props.year && `${props.year} г.`}
                   </>
                 : "Скоро"}
-              </Table.Cell>
-            </Table.Row>
+              </TableCell>
+            </TableRow>
           )}
-        </Table.Body>
+        </TableBody>
       </Table>
     </Card>
   );

app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx

@@ -14,7 +14,7 @@ export const ReleaseInfoStreaming = (props: { release_id: number }) => {
       setData(await response.json());
     };
     _getData();
-  }, []);
+  }, [props.release_id]);
 
   return (
     <>
@@ -32,7 +32,8 @@ export const ReleaseInfoStreaming = (props: { release_id: number }) => {
                   key={`platform_${item.id}`}
                   className="flex items-center gap-2 px-4 py-2 transition-colors bg-gray-100 rounded-lg hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 "
                 >
-                  <img src={item.icon} className="w-6 h-6 rounded-full" />
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img alt="" src={item.icon} className="w-6 h-6 rounded-full" />
                   <p className="text-sm line-clamp-2">{item.name}</p>
                 </a>
               );

app/components/ReleaseInfo/ReleaseInfo.Rating.tsx

@@ -1,20 +1,26 @@
 import {
-  Card,
-  Rating,
-  Flowbite,
   Button,
-  CustomFlowbiteTheme,
+  Card,
   Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Rating,
+  RatingAdvanced,
+  RatingStar,
+  RatingAdvancedTheme,
 } from "flowbite-react";
 import { numberDeclension } from "#/api/utils";
 import { useState } from "react";
 import { ENDPOINTS } from "#/api/config";
 
-const RatingTheme: CustomFlowbiteTheme = {
-  ratingAdvanced: {
-    progress: {
-      base: "mx-4 h-5 w-3/4 rounded bg-gray-200 dark:bg-gray-700",
-    },
+const CustomRatingTheme: RatingAdvancedTheme = {
+  base: "flex items-center",
+  label: "text-sm font-medium text-cyan-600 dark:text-cyan-500",
+  progress: {
+    base: "mx-4 h-5 w-3/4 rounded bg-gray-200 dark:bg-gray-700",
+    fill: "h-5 rounded bg-yellow-400",
+    label: "text-sm font-medium text-cyan-600 dark:text-cyan-500",
   },
 };
 export const ReleaseInfoRating = (props: {
@@ -39,7 +45,7 @@ export const ReleaseInfoRating = (props: {
       <Card>
         <div className="flex flex-col gap-2 sm:items-center sm:flex-row">
           <Rating>
-            <Rating.Star />
+            <RatingStar />
             <p className="ml-2 text-sm font-bold dark:text-white">
               {props.grade.toFixed(2)} из 5
             </p>
@@ -48,7 +54,7 @@ export const ReleaseInfoRating = (props: {
             <>
               <span className="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400 hidden lg:block" />
               <div className="flex items-center gap-2">
-                {vote ? (
+                {vote ?
                   <>
                     <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
                       ваша оценка: {vote}
@@ -62,8 +68,7 @@ export const ReleaseInfoRating = (props: {
                       изменить
                     </Button>
                   </>
-                ) : (
-                  <Button
+                : <Button
                     size={"xs"}
                     className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
                     color="inline"
@@ -71,7 +76,7 @@ export const ReleaseInfoRating = (props: {
                   >
                     оценить
                   </Button>
-                )}
+                }
               </div>
             </>
           )}
@@ -80,47 +85,50 @@ export const ReleaseInfoRating = (props: {
           {props.votes.total}{" "}
           {numberDeclension(props.votes.total, "голос", "голоса", "голосов")}
         </p>
-        <Flowbite theme={{ theme: RatingTheme }}>
-          <Rating.Advanced
-            percentFilled={Math.floor(
-              (props.votes["5"] / props.votes.total) * 100
-            )}
-            className="mb-2"
-          >
-            5
-          </Rating.Advanced>
-          <Rating.Advanced
-            percentFilled={Math.floor(
-              (props.votes["4"] / props.votes.total) * 100
-            )}
-            className="mb-2"
-          >
-            4
-          </Rating.Advanced>
-          <Rating.Advanced
-            percentFilled={Math.floor(
-              (props.votes["3"] / props.votes.total) * 100
-            )}
-            className="mb-2"
-          >
-            3
-          </Rating.Advanced>
-          <Rating.Advanced
-            percentFilled={Math.floor(
-              (props.votes["2"] / props.votes.total) * 100
-            )}
-            className="mb-2"
-          >
-            2
-          </Rating.Advanced>
-          <Rating.Advanced
-            percentFilled={Math.floor(
-              (props.votes["1"] / props.votes.total) * 100
-            )}
-          >
-            1
-          </Rating.Advanced>
-        </Flowbite>
+        <RatingAdvanced
+          theme={CustomRatingTheme}
+          percentFilled={Math.floor(
+            (props.votes["5"] / props.votes.total) * 100
+          )}
+          className="mb-2"
+        >
+          5
+        </RatingAdvanced>
+        <RatingAdvanced
+          theme={CustomRatingTheme}
+          percentFilled={Math.floor(
+            (props.votes["4"] / props.votes.total) * 100
+          )}
+          className="mb-2"
+        >
+          4
+        </RatingAdvanced>
+        <RatingAdvanced
+          theme={CustomRatingTheme}
+          percentFilled={Math.floor(
+            (props.votes["3"] / props.votes.total) * 100
+          )}
+          className="mb-2"
+        >
+          3
+        </RatingAdvanced>
+        <RatingAdvanced
+          theme={CustomRatingTheme}
+          percentFilled={Math.floor(
+            (props.votes["2"] / props.votes.total) * 100
+          )}
+          className="mb-2"
+        >
+          2
+        </RatingAdvanced>
+        <RatingAdvanced
+          theme={CustomRatingTheme}
+          percentFilled={Math.floor(
+            (props.votes["1"] / props.votes.total) * 100
+          )}
+        >
+          1
+        </RatingAdvanced>
       </Card>
       <ReleaseInfoRatingModal
         isOpen={isRatingModalOpen}
@@ -178,8 +186,8 @@ const ReleaseInfoRatingModal = (props: {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>Оценка</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Оценка</ModalHeader>
+      <ModalBody>
         <div>
           <div className="block sm:hidden">
             <Rating size="md" className="justify-center">
@@ -191,7 +199,7 @@ const ReleaseInfoRatingModal = (props: {
                   onMouseOut={() => setCurElement(0)}
                   onClick={() => setVote(element)}
                 >
-                  <Rating.Star
+                  <RatingStar
                     filled={index + 1 <= curElement || index + 1 <= vote}
                   />
                 </Button>
@@ -208,7 +216,7 @@ const ReleaseInfoRatingModal = (props: {
                   onMouseOut={() => setCurElement(0)}
                   onClick={() => setVote(element)}
                 >
-                  <Rating.Star
+                  <RatingStar
                     filled={index + 1 <= curElement || index + 1 <= vote}
                   />
                 </Button>
@@ -216,8 +224,8 @@ const ReleaseInfoRatingModal = (props: {
             </Rating>
           </div>
         </div>
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         <div className="flex gap-1 ml-auto">
           <Button
             disabled={isSending}
@@ -241,7 +249,7 @@ const ReleaseInfoRatingModal = (props: {
             Оценить
           </Button>
         </div>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };

app/components/ReleaseInfo/ReleaseInfo.Related.tsx

@@ -1,31 +1,9 @@
 "use client";
 
-import { Card, Carousel, CustomFlowbiteTheme, FlowbiteCarouselControlTheme, FlowbiteCarouselIndicatorsTheme } from "flowbite-react";
+import { Card, Carousel } from "flowbite-react";
 import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLinkUpdate";
 import Link from "next/link";
 
-const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
-  active: {
-    off: "bg-gray-400/50 hover:bg-gray-200",
-    on: "bg-gray-200",
-  },
-  base: "h-3 w-3 rounded-full max-w-[300px]",
-  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 group-focus:outline-none group-focus:ring-4 bg-gray-400/30 group-hover:bg-gray-400/60 group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
-  icon: "h-5 w-5 text-gray-400 sm:h-6 sm:w-6",
-};
-
-const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
-  root: {
-    base: "relative h-full w-full max-w-[300px]",
-  },
-  indicators: CarouselIndicatorsTheme,
-  control: CarouselControlsTheme,
-};
-
 export const ReleaseInfoRelated = (props: {
   release_id: number;
   related: any;
@@ -45,7 +23,7 @@ export const ReleaseInfoRelated = (props: {
         )}
       </div>
       <div className="flex justify-center mt-2">
-        <Carousel pauseOnHover={true} theme={CarouselTheme}>
+        <Carousel pauseOnHover={true}>
           {props.related_releases
             .filter((release: any) => {
               if (release.id == props.release_id) {

app/components/ReleaseInfo/ReleaseInfo.UserList.tsx

@@ -5,7 +5,7 @@ import useSWRInfinite from "swr/infinite";
 import { useCallback, useEffect, useState } from "react";
 import { tryCatchAPI, useSWRfetcher } from "#/api/utils";
 import { toast } from "react-toastify";
-import { useThemeMode } from "flowbite-react";
+import { DropdownItem, ModalHeader, useThemeMode } from "flowbite-react";
 
 const lists = [
   { list: 0, name: "Не смотрю" },
@@ -174,12 +174,12 @@ export const ReleaseInfoUserList = (props: {
               disabled={listEventDisabled}
             >
               {lists.map((list) => (
-                <Dropdown.Item
+                <DropdownItem
                   key={list.list}
                   onClick={() => _addToList(list.list)}
                 >
                   {list.name}
-                </Dropdown.Item>
+                </DropdownItem>
               ))}
             </Dropdown>
             <Button
@@ -321,7 +321,7 @@ const AddReleaseToCollectionModal = (props: {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>Выбор коллекции</Modal.Header>
+      <ModalHeader>Выбор коллекции</ModalHeader>
       <div
         className="flex flex-col gap-2 p-4 overflow-y-auto"
         onScroll={handleScroll}

app/components/ReleasePlayer/EpisodeSelector.tsx

@@ -67,7 +67,10 @@ export const EpisodeSelector = (props: {
           enabled: true,
           sensitivity: 4,
         }}
-        scrollbar={true}
+        scrollbar={{
+          enabled: true,
+          draggable: true,
+        }}
         allowTouchMove={true}
         style={
           {
@@ -79,6 +82,7 @@ export const EpisodeSelector = (props: {
           <SwiperSlide
             key={`episode_${episode.position}`}
             style={{ maxWidth: "fit-content" }}
+            className="pb-2"
           >
             <Button
               color={

app/components/ReleasePlayer/ReleasePlayer.tsx

@@ -3,7 +3,7 @@
 import { Spinner } from "#/components/Spinner/Spinner";
 import { useUserStore } from "#/store/auth";
 import { useUserPlayerPreferencesStore } from "#/store/player";
-import { Card, Dropdown, Button } from "flowbite-react";
+import { Button, Card, Dropdown, DropdownItem } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useState, useEffect } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
@@ -270,14 +270,14 @@ export const ReleasePlayer = (props: { id: number }) => {
               theme={DropdownTheme}
             >
               {voiceoverInfo.map((voiceover: any) => (
-                <Dropdown.Item
+                <DropdownItem
                   key={`voiceover_${voiceover.id}`}
                   onClick={() =>
                     setSelectedVoiceoverAndSaveAsPreferred(voiceover)
                   }
                 >
                   {voiceover.name}
-                </Dropdown.Item>
+                </DropdownItem>
               ))}
             </Dropdown>
             <Dropdown
@@ -286,12 +286,12 @@ export const ReleasePlayer = (props: { id: number }) => {
               theme={DropdownTheme}
             >
               {sourcesInfo.map((source: any) => (
-                <Dropdown.Item
+                <DropdownItem
                   key={`source_${source.id}`}
                   onClick={() => setSelectedPlayerAndSaveAsPreferred(source)}
                 >
                   {source.name}
-                </Dropdown.Item>
+                </DropdownItem>
               ))}
             </Dropdown>
           </div>
@@ -314,9 +314,12 @@ export const ReleasePlayer = (props: { id: number }) => {
               direction={"horizontal"}
               mousewheel={{
                 enabled: true,
-                sensitivity: 2,
+                sensitivity: 4,
+              }}
+              scrollbar={{
+                enabled: true,
+                draggable: true,
               }}
-              scrollbar={true}
               allowTouchMove={true}
               style={
                 {
@@ -328,6 +331,7 @@ export const ReleasePlayer = (props: { id: number }) => {
                 <SwiperSlide
                   key={`episode_${episode.position}`}
                   style={{ maxWidth: "fit-content" }}
+                  className="pb-2"
                 >
                   <Button
                     color={

app/components/ReleasePlayer/ReleasePlayerCustom.tsx

@@ -212,7 +212,8 @@ export const ReleasePlayerCustom = (props: {
       }
     };
     __getInfo();
-  }, []);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.id, props.token]);
 
   useEffect(() => {
     const __getInfo = async () => {
@@ -244,6 +245,7 @@ export const ReleasePlayerCustom = (props: {
     if (voiceover.selected) {
       __getInfo();
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [voiceover.selected]);
 
   useEffect(() => {
@@ -284,6 +286,7 @@ export const ReleasePlayerCustom = (props: {
     if (source.selected) {
       __getInfo();
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [source.selected]);
 
   useEffect(() => {
@@ -346,6 +349,7 @@ export const ReleasePlayerCustom = (props: {
       setPlayerError(null);
       __getInfo();
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [episode.selected]);
 
   return (
@@ -433,7 +437,7 @@ export const ReleasePlayerCustom = (props: {
               }
             </div>
 
-        : <iframe src={playerProps.src} className="w-full aspect-video" />}
+        : <iframe src={playerProps.src} className="w-full aspect-video" allowFullScreen={true} />}
       </div>
 
       <div>

app/components/ReleasePlayer/SourceSelector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Dropdown } from "flowbite-react";
+import { Dropdown, DropdownItem } from "flowbite-react";
 import { numberDeclension } from "#/api/utils";
 import { useUserPlayerPreferencesStore } from "#/store/player";
 
@@ -20,7 +20,7 @@ const DropdownTrigger = ({ name }: Source) => {
   );
 };
 
-const DropdownItem = ({ name, episodes_count }: Source) => {
+const DropdownItemInternal = ({ name, episodes_count }: Source) => {
   return (
     <div className="flex flex-col gap-2 cursor-pointer">
       <div className="flex items-center gap-2">
@@ -55,7 +55,7 @@ export const SourceSelector = (props: {
       )}
     >
       {props.availableSource.map((source: Source) => (
-        <Dropdown.Item
+        <DropdownItem
           key={`source_${source.id}`}
           onClick={() => {
             playerPreferenceStore.setPreferredPlayer(
@@ -68,8 +68,8 @@ export const SourceSelector = (props: {
             });
           }}
         >
-          <DropdownItem {...source} />
-        </Dropdown.Item>
+          <DropdownItemInternal {...source} />
+        </DropdownItem>
       ))}
     </Dropdown>
   );

app/components/ReleasePlayer/VoiceoverSelector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Dropdown } from "flowbite-react";
+import { Dropdown, DropdownItem } from "flowbite-react";
 import { numberDeclension } from "#/api/utils";
 import { useUserPlayerPreferencesStore } from "#/store/player";
 
@@ -16,7 +16,8 @@ interface Voiceover {
 const DropdownTrigger = ({ icon, name, pinned }: Voiceover) => {
   return (
     <div className="flex items-center gap-2 cursor-pointer">
-      {icon && <img className="w-6 h-6 rounded-full" src={icon}></img>}
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      {icon && <img alt="" className="w-6 h-6 rounded-full" src={icon}></img>}
       <p>{name}</p>
       {pinned && (
         <span className="h-6 bg-gray-700 dark:bg-gray-300 iconify material-symbols--push-pin"></span>
@@ -26,7 +27,7 @@ const DropdownTrigger = ({ icon, name, pinned }: Voiceover) => {
   );
 };
 
-const DropdownItem = ({
+const DropdownItemInternal = ({
   icon,
   name,
   pinned,
@@ -36,7 +37,8 @@ const DropdownItem = ({
   return (
     <div className="flex flex-col gap-2 cursor-pointer">
       <div className="flex items-center gap-2">
-        {icon && <img className="w-6 h-6 rounded-full" src={icon}></img>}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        {icon && <img alt="" className="w-6 h-6 rounded-full" src={icon}></img>}
         <p>{name}</p>
         {pinned && (
           <span className="h-6 iconify material-symbols--push-pin"></span>
@@ -80,7 +82,7 @@ export const VoiceoverSelector = (props: {
       )}
     >
       {props.availableVoiceover.map((voiceover: Voiceover) => (
-        <Dropdown.Item
+        <DropdownItem
           className="w-fit"
           key={`voiceover_${voiceover.id}`}
           onClick={() => {
@@ -94,8 +96,8 @@ export const VoiceoverSelector = (props: {
             });
           }}
         >
-          <DropdownItem {...voiceover} />
-        </Dropdown.Item>
+          <DropdownItemInternal {...voiceover} />
+        </DropdownItem>
       ))}
     </Dropdown>
   );

app/components/SettingsModal/SettingsModal.tsx

@@ -4,12 +4,16 @@ import { CURRENT_APP_VERSION } from "#/api/config";
 import { useUserStore } from "#/store/auth";
 import { usePreferencesStore } from "#/store/preferences";
 import {
-  Modal,
   Button,
-  useThemeMode,
-  ToggleSwitch,
-  HR,
+  ButtonGroup,
   Dropdown,
+  DropdownItem,
+  HR,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ToggleSwitch,
+  useThemeMode,
 } from "flowbite-react";
 import Link from "next/link";
 
@@ -54,8 +58,8 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
       show={props.isOpen}
       onClose={() => props.setIsOpen(false)}
     >
-      <Modal.Header>Настройки</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Настройки</ModalHeader>
+      <ModalBody>
         <div className="space-y-6">
           <div className="flex items-center gap-2">
             <span className="w-6 h-6 iconify material-symbols--palette-outline"></span>
@@ -63,20 +67,20 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
           </div>
           <div className="flex items-center justify-between">
             <p className=" dark:text-white">Тема</p>
-            <Button.Group>
+            <ButtonGroup>
               <Button
-                color={computedMode == "light" ? "blue" : "gray"}
+                color={computedMode == "light" ? "blue" : "light"}
                 onClick={() => setMode("light")}
               >
                 Светлая
               </Button>
               <Button
-                color={computedMode == "dark" ? "blue" : "gray"}
+                color={computedMode == "dark" ? "blue" : "light"}
                 onClick={() => setMode("dark")}
               >
                 Темная
               </Button>
-            </Button.Group>
+            </ButtonGroup>
           </div>
           <div className="flex items-center justify-between">
             <p className=" dark:text-white max-w-96">
@@ -85,15 +89,6 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
             </p>
             <ToggleSwitch
               color="blue"
-              theme={{
-                toggle: {
-                  checked: {
-                    color: {
-                      blue: "border-blue-700 bg-blue-700",
-                    },
-                  },
-                },
-              }}
               onChange={() =>
                 preferenceStore.setParams({
                   skipToCategory: {
@@ -121,7 +116,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                 >
                   {Object.keys(HomeCategory).map((key) => {
                     return (
-                      <Dropdown.Item
+                      <DropdownItem
                         key={key}
                         onClick={() =>
                           preferenceStore.setParams({
@@ -133,7 +128,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                         }
                       >
                         {HomeCategory[key]}
-                      </Dropdown.Item>
+                      </DropdownItem>
                     );
                   })}
                 </Dropdown>
@@ -152,7 +147,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                 >
                   {Object.keys(BookmarksCategory).map((key) => {
                     return (
-                      <Dropdown.Item
+                      <DropdownItem
                         key={key}
                         onClick={() =>
                           preferenceStore.setParams({
@@ -164,7 +159,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                         }
                       >
                         {BookmarksCategory[key]}
-                      </Dropdown.Item>
+                      </DropdownItem>
                     );
                   })}
                 </Dropdown>
@@ -182,7 +177,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
               {Object.keys(NavbarTitles).map(
                 (key: "always" | "links" | "selected" | "never") => {
                   return (
-                    <Dropdown.Item
+                    <DropdownItem
                       className={`${key == "links" ? "hidden lg:flex" : ""}`}
                       key={`navbar-titles-${key}`}
                       onClick={() =>
@@ -192,7 +187,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                       }
                     >
                       {NavbarTitles[key]}
-                    </Dropdown.Item>
+                    </DropdownItem>
                   );
                 }
               )}
@@ -211,7 +206,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                   : "Нет"
                 }
               >
-                <Dropdown.Item
+                <DropdownItem
                   onClick={() =>
                     preferenceStore.setFlags({
                       showFifthButton: null,
@@ -219,10 +214,10 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                   }
                 >
                   Не показывать
-                </Dropdown.Item>
+                </DropdownItem>
                 {Object.keys(FifthButton).map((key) => {
                   return (
-                    <Dropdown.Item
+                    <DropdownItem
                       key={`navbar-fifthbutton-${key}`}
                       onClick={() =>
                         preferenceStore.setFlags({
@@ -231,7 +226,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                       }
                     >
                       {FifthButton[key]}
-                    </Dropdown.Item>
+                    </DropdownItem>
                   );
                 })}
               </Dropdown>
@@ -246,15 +241,6 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
             <p className=" dark:text-white">Показывать список изменений</p>
             <ToggleSwitch
               color="blue"
-              theme={{
-                toggle: {
-                  checked: {
-                    color: {
-                      blue: "border-blue-700 bg-blue-700",
-                    },
-                  },
-                },
-              }}
               onChange={() =>
                 preferenceStore.setFlags({
                   showChangelog: !preferenceStore.flags.showChangelog,
@@ -272,15 +258,6 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
             </div>
             <ToggleSwitch
               color="blue"
-              theme={{
-                toggle: {
-                  checked: {
-                    color: {
-                      blue: "border-blue-700 bg-blue-700",
-                    },
-                  },
-                },
-              }}
               onChange={() =>
                 preferenceStore.setFlags({
                   enableAnalytics: !preferenceStore.flags.enableAnalytics,
@@ -303,15 +280,6 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
             </div>
             <ToggleSwitch
               color="blue"
-              theme={{
-                toggle: {
-                  checked: {
-                    color: {
-                      blue: "border-blue-700 bg-blue-700",
-                    },
-                  },
-                },
-              }}
               onChange={() =>
                 preferenceStore.setParams({
                   experimental: {
@@ -340,7 +308,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
             </div>
           </Link>
         </div>
-      </Modal.Body>
+      </ModalBody>
     </Modal>
   );
 };

app/pages/About.tsx

@@ -15,7 +15,6 @@ import {
   AccordionPanel,
   AccordionTitle,
 } from "flowbite-react";
-import { version } from "node:os";
 import Link from "next/link";
 
 export const AboutPage = () => {

app/pages/BookmarksCategory.tsx

@@ -5,7 +5,7 @@ import { Spinner } from "#/components/Spinner/Spinner";
 import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
-import { Dropdown, Button } from "flowbite-react";
+import { Button, ButtonGroup, Dropdown, DropdownItem } from "flowbite-react";
 import { sort } from "./common";
 import { ENDPOINTS } from "#/api/config";
 import { BookmarksList, useSWRfetcher } from "#/api/utils";
@@ -151,7 +151,7 @@ export function BookmarksCategoryPage(props: any) {
         </form>
       : ""}
       <div className="m-4 overflow-auto">
-        <Button.Group>
+        <ButtonGroup>
           <Button
             className="whitespace-nowrap"
             disabled={props.slug == "watching"}
@@ -222,7 +222,7 @@ export function BookmarksCategoryPage(props: any) {
           >
             {props.SectionTitleMapping["abandoned"]}
           </Button>
-        </Button.Group>
+        </ButtonGroup>
       </div>
       <div className="flex items-center 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">
@@ -237,7 +237,7 @@ export function BookmarksCategoryPage(props: any) {
           theme={DropdownTheme}
         >
           {sort.values.map((item, index) => (
-            <Dropdown.Item key={index} onClick={() => setSelectedSort(index)}>
+            <DropdownItem key={index} onClick={() => setSelectedSort(index)}>
               <span
                 className={`w-6 h-6 iconify ${
                   sort.values[index].value.split("_")[1] == "descending" ?
@@ -246,7 +246,7 @@ export function BookmarksCategoryPage(props: any) {
                 }`}
               ></span>
               {item.name}
-            </Dropdown.Item>
+            </DropdownItem>
           ))}
         </Dropdown>
       </div>

app/pages/CreateCollection.tsx

@@ -5,14 +5,15 @@ import { useEffect, useState, useCallback } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import { ENDPOINTS } from "#/api/config";
 import {
-  Card,
   Button,
+  Card,
   Checkbox,
-  TextInput,
-  Textarea,
   FileInput,
   Label,
   Modal,
+  ModalHeader,
+  Textarea,
+  TextInput,
   useThemeMode,
 } from "flowbite-react";
 import { PosterWithStuff } from "#/components/ReleasePoster/PosterWithStuff";
@@ -33,6 +34,7 @@ export const CreateCollectionPage = () => {
     if (userStore.state === "finished" && !userStore.token) {
       router.push("/login?redirect=/collections/create");
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userStore]);
 
   const [edit, setEdit] = useState(false);
@@ -388,10 +390,9 @@ export const CreateCollectionPage = () => {
           </Label>
           <div className="flex-1">
             <div className="block mb-2">
-              <Label
-                htmlFor="title"
-                value="Название (минимум 10, максимум 60 символов)"
-              />
+              <Label htmlFor="title">
+                Название (минимум 10, максимум 60 символов)
+              </Label>
             </div>
             <TextInput
               id="title"
@@ -408,10 +409,9 @@ export const CreateCollectionPage = () => {
               {stringLength.title}/60
             </p>
             <div className="block mt-2 mb-2">
-              <Label
-                htmlFor="description"
-                value="Описание (максимум 1000 символов)"
-              />
+              <Label htmlFor="description">
+                Описание (максимум 1000 символов)
+              </Label>
             </div>
             <Textarea
               rows={4}
@@ -434,7 +434,7 @@ export const CreateCollectionPage = () => {
                   checked={isPrivate}
                   onChange={(e) => setIsPrivate(e.target.checked)}
                 />
-                <Label htmlFor="private" value="Приватная коллекция" />
+                <Label htmlFor="private">Приватная коллекция</Label>
               </div>
             </div>
             <Button
@@ -603,7 +603,7 @@ export const ReleasesEditModal = (props: {
       onClose={() => props.setIsOpen(false)}
       size={"7xl"}
     >
-      <Modal.Header>Изменить релизы в коллекции</Modal.Header>
+      <ModalHeader>Изменить релизы в коллекции</ModalHeader>
       <div
         onScroll={handleScroll}
         ref={modalRef}

app/pages/Favorites.tsx

@@ -5,7 +5,7 @@ import { Spinner } from "#/components/Spinner/Spinner";
 import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
-import { Dropdown, Button } from "flowbite-react";
+import { Button, Dropdown, DropdownItem } from "flowbite-react";
 import { sort } from "./common";
 import { ENDPOINTS } from "#/api/config";
 import { useRouter } from "next/navigation";
@@ -126,7 +126,7 @@ export function FavoritesPage() {
           theme={DropdownTheme}
         >
           {sort.values.map((item, index) => (
-            <Dropdown.Item key={index} onClick={() => setSelectedSort(index)}>
+            <DropdownItem key={index} onClick={() => setSelectedSort(index)}>
               <span
                 className={`w-6 h-6 iconify ${
                   sort.values[index].value.split("_")[1] == "descending"
@@ -135,7 +135,7 @@ export function FavoritesPage() {
                 }`}
               ></span>
               {item.name}
-            </Dropdown.Item>
+            </DropdownItem>
           ))}
         </Dropdown>
       </div>

app/pages/IndexCategory.tsx

@@ -5,7 +5,7 @@ import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
 import { _FetchHomePageReleases } from "#/api/utils";
-import { Button } from "flowbite-react";
+import { Button, ButtonGroup } from "flowbite-react";
 import { useRouter } from "next/navigation";
 
 export function IndexCategoryPage(props) {
@@ -53,13 +53,13 @@ export function IndexCategoryPage(props) {
   return (
     <>
       <div className="mb-4 overflow-auto">
-        <Button.Group>
+        <ButtonGroup>
           <Button className="whitespace-nowrap" disabled={props.slug == "last"} color="light" onClick={() => router.push("/home/last")}>{props.SectionTitleMapping["last"]}</Button>
           <Button className="whitespace-nowrap" disabled={props.slug == "finished"} color="light" onClick={() => router.push("/home/finished")}>{props.SectionTitleMapping["finished"]}</Button>
           <Button className="whitespace-nowrap" disabled={props.slug == "ongoing"} color="light" onClick={() => router.push("/home/ongoing")}>{props.SectionTitleMapping["ongoing"]}</Button>
           <Button className="whitespace-nowrap" disabled={props.slug == "announce"} color="light" onClick={() => router.push("/home/announce")}>{props.SectionTitleMapping["announce"]}</Button>
           <Button className="whitespace-nowrap" disabled={props.slug == "films"} color="light" onClick={() => router.push("/home/films")}>{props.SectionTitleMapping["films"]}</Button>
-        </Button.Group>
+        </ButtonGroup>
       </div>
       {content && content.length > 0 ? (
         <ReleaseSection

app/pages/Profile.tsx

@@ -59,53 +59,6 @@ export const ProfilePage = (props: any) => {
     );
   }
 
-  const hasSocials =
-    user.vk_page != "" ||
-    user.tg_page != "" ||
-    user.tt_page != "" ||
-    user.inst_page != "" ||
-    user.discord_page != "" ||
-    false;
-  const socials = [
-    {
-      name: "vk",
-      nickname: user.vk_page,
-      icon: "fa6-brands--vk",
-      urlPrefix: "https://vk.com/",
-    },
-    {
-      name: "telegram",
-      nickname: user.tg_page,
-      icon: "fa6-brands--telegram",
-      urlPrefix: "https://t.me/",
-    },
-    {
-      name: "discord",
-      nickname: user.discord_page,
-      icon: "fa6-brands--discord",
-    },
-    {
-      name: "tiktok",
-      nickname: user.tt_page,
-      icon: "fa6-brands--tiktok",
-      urlPrefix: "https://tiktok.com/@",
-    },
-    {
-      name: "instagram",
-      nickname: user.inst_page,
-      icon: "fa6-brands--instagram",
-      urlPrefix: "https://instagram.com/",
-    },
-  ];
-
-  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 (
     <>
       <div className="flex flex-col gap-2">
@@ -116,61 +69,48 @@ export const ProfilePage = (props: any) => {
           ban_expires={user.ban_expires}
         />
         <ProfilePrivacyBanner
-          is_privacy={isPrivacy}
+          is_privacy={
+            user.is_stats_hidden ||
+            user.is_counts_hidden ||
+            user.is_social_hidden
+          }
           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" : ""
-        }`}
+        className={`grid grid-cols-1 gap-2 lg:grid-cols-2 ${
+          (
+            user.is_banned ||
+            user.is_perm_banned ||
+            user.is_stats_hidden ||
+            user.is_counts_hidden ||
+            user.is_social_hidden
+          ) ?
+            "mt-4"
+          : ""
+        } mb-4`}
       >
-        <div className="flex flex-col gap-2 w-full xl:w-[50%]">
+        <div className="flex flex-col gap-2">
           <ProfileUser
-            isOnline={user.is_online}
-            avatar={user.avatar}
-            login={user.login}
-            status={user.status}
+            avatar={user.avatar || ""}
+            login={user.login || ""}
+            status={user.status || ""}
+            roles={user.roles || []}
+            rating={user.rating_score || 0}
+            isMyProfile={isMyProfile || false}
+            isVerified={user.is_verified || false}
+            isOnline={user.is_online || false}
+            isSponsor={user.is_sponsor || false}
+            isBlocked={user.is_blocked || false}
             socials={{
-              isPrivate: user.is_social_hidden,
-              hasSocials: hasSocials,
-              socials: socials,
+              vk: user.vk_page || null,
+              tg: user.tg_page || null,
+              tt: user.tt_page || null,
+              inst: user.inst_page || null,
+              discord: user.discord_page || null,
             }}
-            chips={{
-              hasChips: hasChips,
-              isMyProfile: isMyProfile,
-              isVerified: user.is_verified,
-              isSponsor: user.is_sponsor,
-              isBlocked: user.is_blocked,
-              roles: user.roles,
-            }}
-            rating={user.rating_score}
+            is_social_hidden={user.is_social_hidden}
           />
-          {!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}
-                  token={authUser.token}
-                  profile_id={user.id}
-                />
-              )}
-              {user.history && user.history.length > 0 && (
-                <ProfileReleaseHistory history={user.history} />
-              )}
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col w-full gap-2 xl:flex-1 xl:w-auto ">
           {authUser.token && (
             <ProfileActions
               isMyProfile={isMyProfile}
@@ -185,6 +125,32 @@ export const ProfilePage = (props: any) => {
               edit_setIsOpen={setIsOpen}
             />
           )}
+          {!user.is_counts_hidden && (
+            <ProfileActivity
+              profile_id={user.id}
+              commentCount={user.comment_count}
+              commentPreview={user.release_comments_preview || []}
+              collectionCount={user.collection_count}
+              collectionPreview={user.collections_preview || []}
+              friendsCount={user.friend_count}
+              friendsPreview={user.friends_preview || []}
+              token={authUser.token}
+              isMyProfile={isMyProfile || false}
+            />
+          )}
+          {!user.is_stats_hidden && (
+            <div className="flex-col hidden gap-2 lg:flex">
+              {user.votes && user.votes.length > 0 && (
+                <ProfileReleaseRatings
+                  ratings={user.votes}
+                  token={authUser.token}
+                  profile_id={user.id}
+                />
+              )}
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col gap-2">
           {!user.is_stats_hidden && (
             <>
               <ProfileStats
@@ -200,7 +166,7 @@ export const ProfilePage = (props: any) => {
                 profile_id={user.id}
               />
               <ProfileWatchDynamic watchDynamic={user.watch_dynamics || []} />
-              <div className="flex flex-col gap-2 xl:hidden">
+              <div className="flex flex-col gap-2 lg:hidden">
                 {user.votes && user.votes.length > 0 && (
                   <ProfileReleaseRatings
                     ratings={user.votes}
@@ -208,10 +174,10 @@ export const ProfilePage = (props: any) => {
                     profile_id={user.id}
                   />
                 )}
-                {user.history && user.history.length > 0 && (
-                  <ProfileReleaseHistory history={user.history} />
-                )}
               </div>
+              {user.history && user.history.length > 0 && (
+                <ProfileReleaseHistory history={user.history} />
+              )}
             </>
           )}
         </div>

app/pages/Search.tsx

@@ -8,7 +8,7 @@ import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
 import { useUserStore } from "../store/auth";
-import { Button, Dropdown, Modal } from "flowbite-react";
+import { Button, Dropdown, DropdownItem, Modal, ModalBody, ModalFooter, ModalHeader } from "flowbite-react";
 import { CollectionsSection } from "#/components/CollectionsSection/CollectionsSection";
 import { UserSection } from "#/components/UserSection/UserSection";
 import { useSWRfetcher } from "#/api/utils";
@@ -360,8 +360,8 @@ const FiltersModal = (props: {
 
   return (
     <Modal show={props.isOpen} onClose={() => _cancel()}>
-      <Modal.Header>Фильтры</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Фильтры</ModalHeader>
+      <ModalBody>
         <div className="my-4">
           <div className="flex items-center justify-between">
             <p className="font-bold dark:text-white">Искать в</p>
@@ -376,12 +376,12 @@ const FiltersModal = (props: {
                   return <></>;
                 } else {
                   return (
-                    <Dropdown.Item
+                    <DropdownItem
                       onClick={() => setWhere(item)}
                       key={`where--${item}`}
                     >
                       {WhereMapping[item]}
-                    </Dropdown.Item>
+                    </DropdownItem>
                   );
                 }
               })}
@@ -395,12 +395,12 @@ const FiltersModal = (props: {
               <Dropdown label={ListsMapping[list].name} color="blue">
                 {Object.keys(ListsMapping).map((item) => {
                   return (
-                    <Dropdown.Item
+                    <DropdownItem
                       onClick={() => setList(item)}
                       key={`list--${item}`}
                     >
                       {ListsMapping[item].name}
-                    </Dropdown.Item>
+                    </DropdownItem>
                   );
                 })}
               </Dropdown>
@@ -414,20 +414,20 @@ const FiltersModal = (props: {
               <Dropdown label={TagMapping[searchBy].name} color="blue">
                 {Object.keys(TagMapping).map((item) => {
                   return (
-                    <Dropdown.Item
+                    <DropdownItem
                       onClick={() => setSearchBy(item)}
                       key={`tag--${item}`}
                     >
                       {TagMapping[item].name}
-                    </Dropdown.Item>
+                    </DropdownItem>
                   );
                 })}
               </Dropdown>
             </div>
           </div>
         : ""}
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
         <div className="flex justify-end w-full gap-2">
           <Button color="red" onClick={() => _cancel()}>
             Отменить
@@ -436,7 +436,7 @@ const FiltersModal = (props: {
             Применить
           </Button>
         </div>
-      </Modal.Footer>
+      </ModalFooter>
     </Modal>
   );
 };

next.config.js

@@ -1,8 +1,7 @@
 const { withPlausibleProxy } = require("next-plausible");
-
-module.exports = withPlausibleProxy({
-  customDomain: "https://analytics.wah.su",
-})({
+const withFlowbiteReact = require("flowbite-react/plugin/nextjs");
+/** @type {import('next').NextConfig} */
+const NextConfig = {
   reactStrictMode: false,
   images: {
     unoptimized: true,
@@ -10,68 +9,74 @@ module.exports = withPlausibleProxy({
   async headers() {
     return [
       {
-        source: '/bookmarks/:slug*',
+        source: "/bookmarks/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/collection/:slug*',
+        source: "/collection/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/home/:slug*',
+        source: "/home/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/profile/:slug*',
+        source: "/profile/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/release/:slug*',
+        source: "/release/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/related/:slug*',
+        source: "/related/:slug*",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
       {
-        source: '/search',
+        source: "/search",
         headers: [
           {
-            key: 'Cache-Control',
-            value: 's-maxage=2592000, stale-while-revalidate=86400',
+            key: "Cache-Control",
+            value: "s-maxage=2592000, stale-while-revalidate=86400",
           },
         ],
       },
     ];
   },
-});
+};
+
+const config = withPlausibleProxy({
+  customDomain: "https://analytics.wah.su",
+})(withFlowbiteReact(NextConfig));
+
+module.exports = config;

package.json

@@ -6,18 +6,20 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "postinstall": "flowbite-react patch"
   },
   "dependencies": {
     "apexcharts": "^3.52.0",
     "deepmerge-ts": "^7.1.0",
     "flowbite": "^2.4.1",
-    "flowbite-react": "^0.10.1",
+    "flowbite-react": "^0.11.7",
     "hls-video-element": "^1.5.0",
     "markdown-to-jsx": "^7.4.7",
     "media-chrome": "^4.8.0",
-    "next": "^14.2.13",
+    "next": "^14.2.26",
     "next-plausible": "^3.12.1",
+    "prettier": "^3.5.3",
     "react": "^18",
     "react-cropper": "^2.3.3",
     "react-dom": "^18",
@@ -39,8 +41,6 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
-    "prettier": "^3.5.3",
-    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1"
   }
 }

tailwind.config.js

@@ -1,5 +1,9 @@
 const { addIconSelectors } = require("@iconify/tailwind");
-import flowbite from "flowbite-react/tailwind";
+const flowbiteReact = require("flowbite-react/plugin/tailwindcss");
+
+flowbiteReact.config = {
+  charts: true,
+}
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -7,14 +11,11 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    flowbite.content(),
+    ".flowbite-react\\class-list.json"
   ],
   plugins: [
     addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands"]),
-    require("tailwind-scrollbar"),
-    flowbite.plugin()({
-      charts: true,
-    }),
+    flowbiteReact
   ],
   darkMode: "selector",
   theme: {
@@ -43,4 +44,4 @@ module.exports = {
       },
     },
   },
-};
+};