From d2b38dcbe2e6ef9cfce1b9648c70d8c2eb568c90 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Tue, 25 Mar 2025 20:39:25 +0500
Subject: [PATCH 01/12] refactor: set release poster to center on release page
 on mobile

BREAKING: disable all image rendering
---
 .../ReleaseInfo/ReleaseInfo.Basics.tsx        | 14 +++++-------
 app/components/ReleaseLink/ReleaseLink.tsx    | 13 ++++++-----
 app/components/ReleasePoster/Poster.tsx       | 22 +++++++++++++++++++
 3 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 app/components/ReleasePoster/Poster.tsx

diff --git a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
index c23cf4f..1bf9448 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
@@ -2,6 +2,7 @@ import { Card, Button } from "flowbite-react";
 import { useState } from "react";
 import Image from "next/image";
 import { ReleaseInfoStreaming } from "./ReleaseInfo.LicensedPlatforms";
+import { Poster } from "../ReleasePoster/Poster";
 
 export const ReleaseInfoBasics = (props: {
   release_id: number;
@@ -14,14 +15,11 @@ export const ReleaseInfoBasics = (props: {
 
   return (
     <Card className="h-full row-span-2">
-      <div className="flex flex-col w-full h-full gap-4 lg:flex-row">
-        <Image
-          className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
-          src={props.image}
-          alt=""
-          width={285}
-          height={385}
-        />
+      <div className="flex flex-col w-full h-full gap-4 lg:grid lg:grid-cols-[1fr_2fr] items-center lg:items-start justify-center lg:justify-start">
+        <div className="relative flex items-center justify-center w-full overflow-hidden rounded-lg">
+          <Poster image={props.image} className="z-10 sm:scale-95 lg:scale-100" />
+          <Poster image={props.image} className="absolute top-0 left-0 w-full scale-125 opacity-75 blur-xl brightness-75" />
+        </div>
         <div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
           <div className="flex flex-col gap-1">
             <p className="text-xl font-bold text-black md:text-2xl dark:text-white">
diff --git a/app/components/ReleaseLink/ReleaseLink.tsx b/app/components/ReleaseLink/ReleaseLink.tsx
index f81e277..3e8f0b9 100644
--- a/app/components/ReleaseLink/ReleaseLink.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.tsx
@@ -2,18 +2,21 @@ import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
 import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
 import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
 
-export const ReleaseLink = (props: {type?: "16_9"|"poster"}) => {
+export const ReleaseLink = (props: { type?: "16_9" | "poster" }) => {
   const type = props.type || "16_9";
 
   if (type == "16_9") {
     return (
       <>
-        <div className="hidden lg:block"><ReleaseLink169 {...props} /></div>
-        <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div>
+        <div>TYPE=16/9</div>
+
+        {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
+        {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
       </>
-    )
+    );
   }
   if (type == "poster") {
-    return <ReleaseLinkPoster {...props} />;
+    return <div>TYPE=POSTER</div>;
+    // return <ReleaseLinkPoster {...props} />;
   }
 };
diff --git a/app/components/ReleasePoster/Poster.tsx b/app/components/ReleasePoster/Poster.tsx
new file mode 100644
index 0000000..a7a4a56
--- /dev/null
+++ b/app/components/ReleasePoster/Poster.tsx
@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+export const Poster = (props: {
+  image: string;
+  alt?: string;
+  //   title: { ru: string; original: string };
+  //   note: string | null;
+  //   description: string;
+  type?: "image_only";
+  className?: string;
+}) => {
+  return (
+    <Image
+      className={`object-cover rounded-lg shadow-md ${props.className}`}
+      // className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
+      src={props.image}
+      alt={props.alt || ""}
+      width={285}
+      height={385}
+    />
+  );
+};

From 6cade5a7d04e1566a12a7e2a0eefde56982d96c7 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Tue, 25 Mar 2025 23:01:11 +0500
Subject: [PATCH 02/12] refactor: update style of Related Releases Card on
 Release page

---
 app/components/Chip/Chip.tsx                  |  14 +-
 .../ReleaseInfo/ReleaseInfo.Related.tsx       |   8 +-
 ....tsx => ReleaseLink.16_9FullImage_old.tsx} |   0
 ...ter.tsx => ReleaseLink.16_9Poster_old.tsx} |   2 +-
 ...ed.tsx => ReleaseLink.16_9Related_old.tsx} |   0
 ....Poster.tsx => ReleaseLink.Poster_old.tsx} |   0
 app/components/ReleaseLink/ReleaseLink.tsx    |  70 +++++++---
 .../ReleaseLink/ReleaseLinkUpdate.tsx         |  25 ++++
 app/components/ReleasePoster/Chips.tsx        |  79 +++++++++++
 app/components/ReleasePoster/Poster.tsx       |   2 +-
 .../ReleasePoster/PosterWithStuff.tsx         | 129 ++++++++++++++++++
 11 files changed, 296 insertions(+), 33 deletions(-)
 rename app/components/ReleaseLink/{ReleaseLink.16_9FullImage.tsx => ReleaseLink.16_9FullImage_old.tsx} (100%)
 rename app/components/ReleaseLink/{ReleaseLink.16_9Poster.tsx => ReleaseLink.16_9Poster_old.tsx} (99%)
 rename app/components/ReleaseLink/{ReleaseLink.16_9Related.tsx => ReleaseLink.16_9Related_old.tsx} (100%)
 rename app/components/ReleaseLink/{ReleaseLink.Poster.tsx => ReleaseLink.Poster_old.tsx} (100%)
 create mode 100644 app/components/ReleaseLink/ReleaseLinkUpdate.tsx
 create mode 100644 app/components/ReleasePoster/Chips.tsx
 create mode 100644 app/components/ReleasePoster/PosterWithStuff.tsx

diff --git a/app/components/Chip/Chip.tsx b/app/components/Chip/Chip.tsx
index a7e8e7f..bd0225c 100644
--- a/app/components/Chip/Chip.tsx
+++ b/app/components/Chip/Chip.tsx
@@ -6,26 +6,22 @@ export const Chip = (props: {
   devider?: string;
   bg_color?: string;
   style?: React.CSSProperties;
+  className?: string;
 }) => {
   return (
-    <div
-      className={`px-2 sm:px-4 py-0.5 sm:py-1 rounded-sm ${
-        props.bg_color || "bg-gray-500"
-      } ${props.icon_name ? "flex items-center justify-center gap-1" : ""}`}
-      style={props.style || {}}
-    >
+    <div className={`${props.bg_color || "bg-gray-500"} rounded-sm flex items-center justify-center ${props.className || ""}`}>
       {props.icon_name && (
         <span
-          className={`iconify w-4 h-4 sm:w-6 sm:h-6 ${props.icon_name}`}
+          className={`iconify w-4 h-4 sm:w-6 sm:h-6 ml-2 ${props.icon_name}`}
           style={
             {
-              "color": "var(--icon-color)",
+              color: "var(--icon-color)",
               "--icon-color": props.icon_color || "#fff",
             } as React.CSSProperties
           }
         ></span>
       )}
-      <p className="text-xs text-white xl:text-base">
+      <p className="px-2 py-1 text-white xl:text-base">
         {props.name}
         {props.name && props.devider ? props.devider : " "}
         {props.name_2}
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
index dbd6c40..496d342 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Card, Carousel, CustomFlowbiteTheme } from "flowbite-react";
-import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLink";
+import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLinkUpdate";
 import Link from "next/link";
 
 const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
@@ -39,7 +39,11 @@ export const ReleaseInfoRelated = (props: {
             })
             .map((release: any) => {
               return (
-                <ReleaseLink key={release.id} {...release} type={"poster"} />
+                <ReleaseLink
+                  key={release.id}
+                  {...release}
+                  settings={{ showGenres: false, showDescription: false }}
+                />
               );
             })}
         </Carousel>
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9FullImage.tsx b/app/components/ReleaseLink/ReleaseLink.16_9FullImage_old.tsx
similarity index 100%
rename from app/components/ReleaseLink/ReleaseLink.16_9FullImage.tsx
rename to app/components/ReleaseLink/ReleaseLink.16_9FullImage_old.tsx
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx b/app/components/ReleaseLink/ReleaseLink.16_9Poster_old.tsx
similarity index 99%
rename from app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx
rename to app/components/ReleaseLink/ReleaseLink.16_9Poster_old.tsx
index 384c914..5a02d6b 100644
--- a/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.16_9Poster_old.tsx
@@ -21,7 +21,7 @@ export const ReleaseLink169Poster = (props: any) => {
   }
   return (
     <Link
-      href={`/release/${props.id}`}
+      href={`/release/${props.id}`} 
       className={props.isLinkDisabled ? "pointer-events-none" : ""}
       aria-disabled={props.isLinkDisabled}
       tabIndex={props.isLinkDisabled ? -1 : undefined}
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9Related.tsx b/app/components/ReleaseLink/ReleaseLink.16_9Related_old.tsx
similarity index 100%
rename from app/components/ReleaseLink/ReleaseLink.16_9Related.tsx
rename to app/components/ReleaseLink/ReleaseLink.16_9Related_old.tsx
diff --git a/app/components/ReleaseLink/ReleaseLink.Poster.tsx b/app/components/ReleaseLink/ReleaseLink.Poster_old.tsx
similarity index 100%
rename from app/components/ReleaseLink/ReleaseLink.Poster.tsx
rename to app/components/ReleaseLink/ReleaseLink.Poster_old.tsx
diff --git a/app/components/ReleaseLink/ReleaseLink.tsx b/app/components/ReleaseLink/ReleaseLink.tsx
index 3e8f0b9..8bc9e80 100644
--- a/app/components/ReleaseLink/ReleaseLink.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.tsx
@@ -1,22 +1,52 @@
-import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
-import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
-import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
+import Link from "next/link";
+import { Poster } from "../ReleasePoster/Poster";
+import { Chip } from "../Chip/Chip";
+// import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
+// import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
+// import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
 
-export const ReleaseLink = (props: { type?: "16_9" | "poster" }) => {
-  const type = props.type || "16_9";
-
-  if (type == "16_9") {
-    return (
-      <>
-        <div>TYPE=16/9</div>
-
-        {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
-        {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
-      </>
-    );
-  }
-  if (type == "poster") {
-    return <div>TYPE=POSTER</div>;
-    // return <ReleaseLinkPoster {...props} />;
-  }
+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 ReleaseLink = (props: {
+  // type?: "16_9" | "poster";
+  image: string;
+  title_ru: string;
+  title_original: string;
+  genres?: string;
+  grade?: number;
+  id: number;
+  settings?: {
+    showGenres?: boolean;
+  };
+  profile_list_status?: number;
+  status?: {
+    name: string;
+  };
+  status_id?: number;
+}) => {
+  // const type = props.type || "16_9";
+
+  // if (type == "16_9") {
+  //   return (
+  //     <>
+  //       <div>TYPE=16/9</div>
+
+  //       {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
+  //       {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
+  //     </>
+  //   );
+  // }
+  // if (props.type == "poster") {
+  return (
+    <>You NEED to fix this. Replace import to `ReleaseLinkUpdate`</>
+  );
+  // return <ReleaseLinkPoster {...props} />;
+  // }
 };
diff --git a/app/components/ReleaseLink/ReleaseLinkUpdate.tsx b/app/components/ReleaseLink/ReleaseLinkUpdate.tsx
new file mode 100644
index 0000000..4467f96
--- /dev/null
+++ b/app/components/ReleaseLink/ReleaseLinkUpdate.tsx
@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { PosterWithStuff } from "../ReleasePoster/PosterWithStuff";
+
+export const ReleaseLink = (props: {
+  image: string;
+  title_ru: string;
+  title_original: string;
+  genres?: string;
+  grade?: number;
+  id: number;
+  settings?: {
+    showGenres?: boolean;
+  };
+  profile_list_status?: number;
+  status?: {
+    name: string;
+  };
+  status_id?: number;
+}) => {
+  return (
+    <Link href={`/release/${props.id}`}>
+      <PosterWithStuff {...props} />
+    </Link>
+  );
+};
diff --git a/app/components/ReleasePoster/Chips.tsx b/app/components/ReleasePoster/Chips.tsx
new file mode 100644
index 0000000..0787772
--- /dev/null
+++ b/app/components/ReleasePoster/Chips.tsx
@@ -0,0 +1,79 @@
+import { Chip } from "../Chip/Chip";
+
+interface ChipProps {
+  settings?: any;
+  grade?: any;
+  status?: any;
+  status_id?: any;
+  user_list?: any;
+  episodes_released?: any;
+  episodes_total?: any;
+  category?: any;
+  is_favorite?: any;
+}
+
+export const ReleaseChips = ({
+  settings,
+  grade,
+  status,
+  status_id,
+  user_list,
+  episodes_released,
+  episodes_total,
+  category,
+  is_favorite,
+}: ChipProps) => {
+  return (
+    <div
+      className={`${settings.chips.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}
+    >
+      {!settings.chips.gradeHidden && grade ?
+        <Chip
+          className="w-12"
+          bg_color={
+            grade == 0 ? "hidden"
+            : grade < 2 ?
+              "bg-red-500"
+            : grade < 3 ?
+              "bg-orange-500"
+            : grade < 4 ?
+              "bg-yellow-500"
+            : "bg-green-500"
+          }
+          name={`${grade}`}
+        />
+      : ""}
+      {!settings.chips.listHidden && user_list && (
+        <Chip bg_color={user_list.bg_color} name={user_list.name} />
+      )}
+      {!settings.chips.statusHidden && status ?
+        <Chip name={status.name} />
+      : status_id != 0 && (
+          <Chip
+            name={
+              status_id == 1 ? "Завершено"
+              : status_id == 2 ?
+                "Онгоинг"
+              : status_id == 3 && "Анонс"
+            }
+          />
+        )
+      }
+      {!settings.chips.episodesHidden && (
+        <Chip
+          name={episodes_released && episodes_released}
+          name_2={episodes_total ? episodes_total + " эп." : "? эп."}
+          devider="/"
+        />
+      )}
+      {!settings.chips.categoryHidden && category && (
+        <Chip name={category.name} />
+      )}
+      {!settings.chips.favHidden && is_favorite && (
+        <div className="flex items-center justify-center bg-pink-500 rounded-sm">
+          <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/app/components/ReleasePoster/Poster.tsx b/app/components/ReleasePoster/Poster.tsx
index a7a4a56..315e411 100644
--- a/app/components/ReleasePoster/Poster.tsx
+++ b/app/components/ReleasePoster/Poster.tsx
@@ -6,7 +6,7 @@ export const Poster = (props: {
   //   title: { ru: string; original: string };
   //   note: string | null;
   //   description: string;
-  type?: "image_only";
+//   type?: "image_only";
   className?: string;
 }) => {
   return (
diff --git a/app/components/ReleasePoster/PosterWithStuff.tsx b/app/components/ReleasePoster/PosterWithStuff.tsx
new file mode 100644
index 0000000..cf4c7a7
--- /dev/null
+++ b/app/components/ReleasePoster/PosterWithStuff.tsx
@@ -0,0 +1,129 @@
+import Link from "next/link";
+import { Poster } from "./Poster";
+import { Chip } from "../Chip/Chip";
+import { ReleaseChips } from "./Chips";
+
+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 PosterWithStuff = (props: {
+  image: string;
+  title_ru: string;
+  title_original: string;
+  description?: string;
+  genres?: string;
+  grade?: number;
+  id: number;
+  settings?: {
+    showGenres?: boolean;
+    showDescription?: boolean;
+    chips?: {
+      enabled: boolean;
+      gradeHidden?: boolean;
+      statusHidden?: boolean;
+      categoryHidden?: boolean;
+      episodesHidden?: boolean;
+      listHidden?: boolean;
+      favHidden?: boolean;
+      lastWatchedHidden?: boolean;
+    };
+  };
+  profile_list_status?: number;
+  status?: {
+    name: string;
+  };
+  category?: {
+    name: string;
+  };
+  status_id?: number;
+  episodes_released?: string;
+  episodes_total?: string;
+  is_favorite?: boolean;
+}) => {
+  const genres = [];
+  const settings = {
+    showGenres: true,
+    showDescription: true,
+    chips: {
+      enabled: true,
+      gradeHidden: false,
+      statusHidden: false,
+      categoryHidden: false,
+      episodesHidden: false,
+      listHidden: false,
+      favHidden: false,
+      lastWatchedHidden: false,
+    },
+    ...props.settings,
+  };
+  const grade = props.grade ? Number(props.grade.toFixed(1)) : null;
+  const profile_list_status = props.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 (props.genres) {
+    const genres_array = props.genres.split(",");
+    genres_array.forEach((genre) => {
+      genres.push(genre);
+    });
+  }
+
+  return (
+    <div className="relative flex items-center justify-center w-full h-full group">
+      <div className="absolute z-20 top-2 left-2 right-2">
+        <ReleaseChips
+          {...props}
+          user_list={user_list}
+          grade={grade}
+          settings={settings}
+        ></ReleaseChips>
+      </div>
+      <div className="absolute z-20 bottom-2 left-2 right-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
+        <div className="lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0 transition-transform">
+          {settings.showGenres &&
+            genres.length > 0 &&
+            genres.map((genre: string, index: number) => {
+              return (
+                <span key={`release_${props.id}_genre_${genre}_${index}`}>
+                  {index > 0 && ", "}
+                  <Link
+                    href={`/search?q=${genre}&searchBy=tag`}
+                    className="font-light text-white md:text-sm lg:text-base xl:text-lg"
+                  >
+                    {genre}
+                  </Link>
+                </span>
+              );
+            })}
+          {props.title_ru && (
+            <p className="text-xl font-bold text-white md:text-2xl">
+              {props.title_ru}
+            </p>
+          )}
+          {props.title_original && (
+            <p className="text-sm text-gray-300 md:text-base">
+              {props.title_original}
+            </p>
+          )}
+        </div>
+        {settings.showDescription && props.description && (
+            <p className="mt-2 text-sm font-light text-white lg:text-base xl:text-lg line-clamp-4">
+              {props.description}
+            </p>
+          )}
+      </div>
+      <div className="absolute w-full h-full bg-gradient-to-t from-black to-transparent"></div>
+      <Poster
+        image={props.image}
+        className="min-w-full min-h-full flex-grow-1"
+      ></Poster>
+    </div>
+  );
+};

From 4496a7280bba4b62719b038ac8027aca81800d7f Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Tue, 25 Mar 2025 23:35:20 +0500
Subject: [PATCH 03/12] refactor: related releases page

---
 .../ReleasePoster/PosterWithStuff.tsx         |   3 +-
 app/pages/Related.tsx                         | 122 ++++++++++++++++--
 2 files changed, 115 insertions(+), 10 deletions(-)

diff --git a/app/components/ReleasePoster/PosterWithStuff.tsx b/app/components/ReleasePoster/PosterWithStuff.tsx
index cf4c7a7..3af1bce 100644
--- a/app/components/ReleasePoster/PosterWithStuff.tsx
+++ b/app/components/ReleasePoster/PosterWithStuff.tsx
@@ -1,6 +1,5 @@
 import Link from "next/link";
 import { Poster } from "./Poster";
-import { Chip } from "../Chip/Chip";
 import { ReleaseChips } from "./Chips";
 
 const profile_lists = {
@@ -71,7 +70,7 @@ export const PosterWithStuff = (props: {
   if (props.genres) {
     const genres_array = props.genres.split(",");
     genres_array.forEach((genre) => {
-      genres.push(genre);
+      genres.push(genre.trim());
     });
   }
 
diff --git a/app/pages/Related.tsx b/app/pages/Related.tsx
index beb5d05..98cbfb0 100644
--- a/app/pages/Related.tsx
+++ b/app/pages/Related.tsx
@@ -5,11 +5,25 @@ import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
 import { ENDPOINTS } from "#/api/config";
-import { ReleaseLink169Related } from "#/components/ReleaseLink/ReleaseLink.16_9Related";
+// import { ReleaseLink169Related } from "#/components/ReleaseLink/ReleaseLink.16_9Related";
 import { useSWRfetcher } from "#/api/utils";
+import { Card } from "flowbite-react";
+import { Poster } from "#/components/ReleasePoster/Poster";
+import { ReleaseChips } from "#/components/ReleasePoster/Chips";
+import { PosterWithStuff } from "#/components/ReleasePoster/PosterWithStuff";
+import Link from "next/link";
 
+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" },
+};
+const YearSeason = ["_", "Зима", "Весна", "Лето", "Осень"];
 
-export function RelatedPage(props: {id: number|string, title: string}) {
+export function RelatedPage(props: { id: number | string; title: string }) {
   const token = useUserStore((state) => state.token);
 
   const getKey = (pageIndex: number, previousPageData: any) => {
@@ -52,22 +66,114 @@ export function RelatedPage(props: {id: number|string, title: string}) {
           Франшиза {props.title}
         </h1>
       </div>
-      {content && content.length > 0 ? (
+      {content && content.length > 0 ?
         <div className="flex flex-col gap-4 my-4">
           {content.map((release, index) => {
-            return <ReleaseLink169Related {...release} key={release.id} _position={index + 1} />
+            const genres = [];
+            const settings = {
+              showGenres: true,
+              showDescription: true,
+              chips: {
+                enabled: true,
+                gradeHidden: false,
+                statusHidden: false,
+                categoryHidden: false,
+                episodesHidden: false,
+                listHidden: false,
+                favHidden: false,
+                lastWatchedHidden: false,
+              },
+            };
+            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 <ReleaseLink169Related {...release} key={release.id} _position={index + 1} />
+            return (
+              <Card>
+                <div className="grid grid-cols-1 justify-center lg:grid-cols-[1fr_1fr_2fr] gap-4">
+                  <div className="flex items-center justify-center">
+                    <h1 className="inline-block text-6xl font-bold text-center text-transparent bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-500 dark:from-blue-500 dark:via-purple-400 dark:to-indigo-300 bg-clip-text ">
+                      {release.season ? YearSeason[release.season] : ""}
+                      {release.season ?
+                        <br />
+                      : ""}
+                      {release.year ? release.year : ""}
+                    </h1>
+                  </div>
+                  <div className="flex items-center justify-center lg:hidden">
+                    <div className="max-w-96">
+                      <PosterWithStuff {...release} settings={settings} />
+                    </div>
+                  </div>
+                  <div className="hidden lg:flex">
+                    <Poster image={release.image} />
+                  </div>
+                  <div className="flex-col hidden gap-2 lg:flex">
+                    <ReleaseChips
+                      {...release}
+                      user_list={user_list}
+                      grade={grade}
+                      settings={settings}
+                    />
+                    <div>
+                      {settings.showGenres &&
+                        genres.length > 0 &&
+                        genres.map((genre: string, index: number) => {
+                          return (
+                            <span
+                              key={`release_${props.id}_genre_${genre}_${index}`}
+                            >
+                              {index > 0 && ", "}
+                              <Link
+                                href={`/search?q=${genre}&searchBy=tag`}
+                                className="font-light dark:text-white md:text-sm lg:text-base xl:text-lg"
+                              >
+                                {genre}
+                              </Link>
+                            </span>
+                          );
+                        })}
+                    </div>
+                    {release.title_ru && (
+                      <p className="text-xl font-bold dark:text-white md:text-2xl">
+                        {release.title_ru}
+                      </p>
+                    )}
+                    {release.title_original && (
+                      <p className="text-sm text-gray-600 dark:text-gray-300 md:text-base">
+                        {release.title_original}
+                      </p>
+                    )}
+                    {settings.showDescription && release.description && (
+                      <p className="mt-2 text-sm font-light dark:text-white lg:text-base xl:text-lg line-clamp-2">
+                        {release.description}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </Card>
+            );
           })}
         </div>
-      ) : isLoading ? (
+      : isLoading ?
         <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
           <Spinner />
         </div>
-      ) : (
-        <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
+      : <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
           <span className="w-24 h-24 iconify-color twemoji--broken-heart"></span>
           <p>В франшизе пока ничего нет...</p>
         </div>
-      )}
+      }
       {data &&
         data[data.length - 1].current_page <
           data[data.length - 1].total_page_count && (

From 34bbcc489353c61041202577e06884e0c8abac50 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Tue, 25 Mar 2025 23:45:14 +0500
Subject: [PATCH 04/12] fix: link

---
 app/pages/Related.tsx | 120 +++++++++++++++++++++---------------------
 1 file changed, 61 insertions(+), 59 deletions(-)

diff --git a/app/pages/Related.tsx b/app/pages/Related.tsx
index 98cbfb0..af8ebf9 100644
--- a/app/pages/Related.tsx
+++ b/app/pages/Related.tsx
@@ -99,69 +99,71 @@ export function RelatedPage(props: { id: number | string; title: string }) {
             }
             // return <ReleaseLink169Related {...release} key={release.id} _position={index + 1} />
             return (
-              <Card>
-                <div className="grid grid-cols-1 justify-center lg:grid-cols-[1fr_1fr_2fr] gap-4">
-                  <div className="flex items-center justify-center">
-                    <h1 className="inline-block text-6xl font-bold text-center text-transparent bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-500 dark:from-blue-500 dark:via-purple-400 dark:to-indigo-300 bg-clip-text ">
-                      {release.season ? YearSeason[release.season] : ""}
-                      {release.season ?
-                        <br />
-                      : ""}
-                      {release.year ? release.year : ""}
-                    </h1>
-                  </div>
-                  <div className="flex items-center justify-center lg:hidden">
-                    <div className="max-w-96">
-                      <PosterWithStuff {...release} settings={settings} />
+              <Link href={`/release/${release.id}`} key={release.id}>
+                <Card>
+                  <div className="grid grid-cols-1 justify-center lg:grid-cols-[1fr_1fr_2fr] gap-4">
+                    <div className="flex items-center justify-center">
+                      <h1 className="inline-block text-6xl font-bold text-center text-transparent bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-500 dark:from-blue-500 dark:via-purple-400 dark:to-indigo-300 bg-clip-text ">
+                        {release.season ? YearSeason[release.season] : ""}
+                        {release.season ?
+                          <br />
+                        : ""}
+                        {release.year ? release.year : ""}
+                      </h1>
                     </div>
-                  </div>
-                  <div className="hidden lg:flex">
-                    <Poster image={release.image} />
-                  </div>
-                  <div className="flex-col hidden gap-2 lg:flex">
-                    <ReleaseChips
-                      {...release}
-                      user_list={user_list}
-                      grade={grade}
-                      settings={settings}
-                    />
-                    <div>
-                      {settings.showGenres &&
-                        genres.length > 0 &&
-                        genres.map((genre: string, index: number) => {
-                          return (
-                            <span
-                              key={`release_${props.id}_genre_${genre}_${index}`}
-                            >
-                              {index > 0 && ", "}
-                              <Link
-                                href={`/search?q=${genre}&searchBy=tag`}
-                                className="font-light dark:text-white md:text-sm lg:text-base xl:text-lg"
+                    <div className="flex items-center justify-center lg:hidden">
+                      <div className="max-w-96">
+                        <PosterWithStuff {...release} settings={settings} />
+                      </div>
+                    </div>
+                    <div className="hidden lg:flex">
+                      <Poster image={release.image} />
+                    </div>
+                    <div className="flex-col hidden gap-2 lg:flex">
+                      <ReleaseChips
+                        {...release}
+                        user_list={user_list}
+                        grade={grade}
+                        settings={settings}
+                      />
+                      <div>
+                        {settings.showGenres &&
+                          genres.length > 0 &&
+                          genres.map((genre: string, index: number) => {
+                            return (
+                              <span
+                                key={`release_${props.id}_genre_${genre}_${index}`}
                               >
-                                {genre}
-                              </Link>
-                            </span>
-                          );
-                        })}
+                                {index > 0 && ", "}
+                                <Link
+                                  href={`/search?q=${genre}&searchBy=tag`}
+                                  className="font-light dark:text-white md:text-sm lg:text-base xl:text-lg"
+                                >
+                                  {genre}
+                                </Link>
+                              </span>
+                            );
+                          })}
+                      </div>
+                      {release.title_ru && (
+                        <p className="text-xl font-bold dark:text-white md:text-2xl">
+                          {release.title_ru}
+                        </p>
+                      )}
+                      {release.title_original && (
+                        <p className="text-sm text-gray-600 dark:text-gray-300 md:text-base">
+                          {release.title_original}
+                        </p>
+                      )}
+                      {settings.showDescription && release.description && (
+                        <p className="mt-2 text-sm font-light dark:text-white lg:text-base xl:text-lg line-clamp-2">
+                          {release.description}
+                        </p>
+                      )}
                     </div>
-                    {release.title_ru && (
-                      <p className="text-xl font-bold dark:text-white md:text-2xl">
-                        {release.title_ru}
-                      </p>
-                    )}
-                    {release.title_original && (
-                      <p className="text-sm text-gray-600 dark:text-gray-300 md:text-base">
-                        {release.title_original}
-                      </p>
-                    )}
-                    {settings.showDescription && release.description && (
-                      <p className="mt-2 text-sm font-light dark:text-white lg:text-base xl:text-lg line-clamp-2">
-                        {release.description}
-                      </p>
-                    )}
                   </div>
-                </div>
-              </Card>
+                </Card>
+              </Link>
             );
           })}
         </div>

From e1e176c24b247d71e9dc876569e6c072b05b89cd Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 26 Mar 2025 00:08:33 +0500
Subject: [PATCH 05/12] refactor: release courusel

---
 .../ReleaseCourusel/ReleaseCourusel.tsx       |   7 +-
 .../ReleaseLink.16_9Related_old.tsx           | 136 ------------------
 app/components/ReleasePoster/Poster.tsx       |   8 +-
 .../ReleasePoster/PosterWithStuff.tsx         |  27 ++--
 app/pages/Related.tsx                         |  14 +-
 5 files changed, 24 insertions(+), 168 deletions(-)
 delete mode 100644 app/components/ReleaseLink/ReleaseLink.16_9Related_old.tsx

diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.tsx b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
index d7e333a..32a85da 100644
--- a/app/components/ReleaseCourusel/ReleaseCourusel.tsx
+++ b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
 import Link from "next/link";
 
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -42,7 +42,7 @@ export const ReleaseCourusel = (props: {
           allowTouchMove={true}
           breakpoints={{
             1800: {
-              initialSlide: 1,
+              initialSlide: 2,
               centeredSlides: true
             }
           }}
@@ -52,7 +52,8 @@ export const ReleaseCourusel = (props: {
               return (
                 <SwiperSlide
                   key={release.id}
-                  className="xl:max-w-[600px] sm:max-w-[400px] lg:aspect-video"
+                  className="max-w-64 md:max-w-96"
+                  // className="xl:max-w-[600px] sm:max-w-[400px] lg:aspect-video"
                 >
                   <ReleaseLink {...release} />
                 </SwiperSlide>
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9Related_old.tsx b/app/components/ReleaseLink/ReleaseLink.16_9Related_old.tsx
deleted file mode 100644
index aa2959f..0000000
--- a/app/components/ReleaseLink/ReleaseLink.16_9Related_old.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import Link from "next/link";
-import { sinceUnixDate } from "#/api/utils";
-import { Chip } from "#/components/Chip/Chip";
-import Image from "next/image";
-
-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" },
-};
-const YearSeason = ["_", "Зима", "Весна", "Лето", "Осень"];
-
-export const ReleaseLink169Related = (props: any) => {
-  const grade = props.grade.toFixed(1);
-  const profile_list_status = props.profile_list_status;
-  let user_list = null;
-  if (profile_list_status != null || profile_list_status != 0) {
-    user_list = profile_lists[profile_list_status];
-  }
-  return (
-    <Link
-      href={`/release/${props.id}`}
-      className={`${
-        props.isLinkDisabled ? "pointer-events-none" : ""
-      } flex gap-4 items-center justify-between mx-auto w-full max-w-[1024px]`}
-      aria-disabled={props.isLinkDisabled}
-      tabIndex={props.isLinkDisabled ? -1 : undefined}
-    >
-      <div className="items-center justify-center flex-1 hidden lg:flex">
-        <h1 className="inline-block text-6xl font-bold text-center text-transparent bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-500 dark:from-blue-500 dark:via-purple-400 dark:to-indigo-300 bg-clip-text ">
-          {props.season ? YearSeason[props.season] : ""}
-          <br/>
-          {props.year ? props.year : ""}
-        </h1>
-      </div>
-      <div className="w-full max-w-[768px] h-auto p-2 bg-gray-100 rounded-lg dark:bg-slate-800">
-        <div className="flex w-full h-full gap-2 overflow-hidden">
-          <div className="flex-shrink-0">
-            <Image
-              src={props.image}
-              height={250}
-              width={250}
-              alt={props.title || ""}
-              className="object-cover aspect-[9/16] lg:aspect-[12/16] h-auto w-24 md:w-32 lg:w-48 rounded-md"
-            />
-          </div>
-          <div className="flex flex-col flex-1 w-full h-full">
-            <div>
-              {props.genres && (
-                <p className="text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg">
-                  {props.genres}
-                </p>
-              )}
-              <p className="block text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl md:hidden">
-                {`${props.title_ru.slice(0, 47)}${
-                  props.title_ru.length > 47 ? "..." : ""
-                }`}
-              </p>
-              <p className="block text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg md:hidden">
-                {`${props.description.slice(0, 97)}${
-                  props.description.length > 97 ? "..." : ""
-                }`}
-              </p>
-              <p className="hidden text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl md:block max-w-[512px]">
-                {props.title_ru}
-              </p>
-              <p className="hidden text-xs font-light text-black dark:text-white md:text-sm:text-base xl:text-lg md:block max-w-[512px]">
-                {props.description}
-              </p>
-            </div>
-            <div className="flex flex-wrap gap-1 mt-1">
-              <Chip
-                bg_color={
-                  grade == 0
-                    ? "hidden"
-                    : grade < 2
-                    ? "bg-red-500"
-                    : grade < 3
-                    ? "bg-orange-500"
-                    : grade < 4
-                    ? "bg-yellow-500"
-                    : "bg-green-500"
-                }
-                name={grade}
-              />
-              {user_list && (
-                <Chip bg_color={user_list.bg_color} name={user_list.name} />
-              )}
-              {props.status ? (
-                <Chip name={props.status.name} />
-              ) : (
-                props.status_id != 0 && (
-                  <Chip
-                    name={
-                      props.status_id == 1
-                        ? "Завершено"
-                        : props.status_id == 2
-                        ? "Онгоинг"
-                        : props.status_id == 3 && "Анонс"
-                    }
-                  />
-                )
-              )}
-              <Chip
-                name={props.episodes_released && props.episodes_released}
-                name_2={
-                  props.episodes_total ? props.episodes_total + " эп." : "? эп."
-                }
-                devider="/"
-              />
-              {props.category && <Chip name={props.category.name} />}
-              {props.season || props.year ? (
-                <Chip
-                  bg_color="lg:hidden bg-gray-500"
-                  name={props.season ? YearSeason[props.season] : ""}
-                  name_2={props.year ? `${props.year} год` : ""}
-                  devider=" "
-                />
-              ) : (
-                ""
-              )}
-              {props.is_favorite && (
-                <div className="flex items-center justify-center bg-pink-500 rounded-sm">
-                  <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-};
diff --git a/app/components/ReleasePoster/Poster.tsx b/app/components/ReleasePoster/Poster.tsx
index 315e411..4d500cb 100644
--- a/app/components/ReleasePoster/Poster.tsx
+++ b/app/components/ReleasePoster/Poster.tsx
@@ -3,10 +3,6 @@ import Image from "next/image";
 export const Poster = (props: {
   image: string;
   alt?: string;
-  //   title: { ru: string; original: string };
-  //   note: string | null;
-  //   description: string;
-//   type?: "image_only";
   className?: string;
 }) => {
   return (
@@ -17,6 +13,10 @@ export const Poster = (props: {
       alt={props.alt || ""}
       width={285}
       height={385}
+      style={{
+        width: "100%",
+        height: "auto",
+      }}
     />
   );
 };
diff --git a/app/components/ReleasePoster/PosterWithStuff.tsx b/app/components/ReleasePoster/PosterWithStuff.tsx
index 3af1bce..f46cf2e 100644
--- a/app/components/ReleasePoster/PosterWithStuff.tsx
+++ b/app/components/ReleasePoster/PosterWithStuff.tsx
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { Poster } from "./Poster";
 import { ReleaseChips } from "./Chips";
 
@@ -75,7 +74,7 @@ export const PosterWithStuff = (props: {
   }
 
   return (
-    <div className="relative flex items-center justify-center w-full h-full group">
+    <div className="relative flex items-center justify-center w-full h-full overflow-hidden group">
       <div className="absolute z-20 top-2 left-2 right-2">
         <ReleaseChips
           {...props}
@@ -90,14 +89,12 @@ export const PosterWithStuff = (props: {
             genres.length > 0 &&
             genres.map((genre: string, index: number) => {
               return (
-                <span key={`release_${props.id}_genre_${genre}_${index}`}>
+                <span
+                  key={`release_${props.id}_genre_${genre}_${index}`}
+                  className="font-light text-white md:text-sm lg:text-base xl:text-lg"
+                >
                   {index > 0 && ", "}
-                  <Link
-                    href={`/search?q=${genre}&searchBy=tag`}
-                    className="font-light text-white md:text-sm lg:text-base xl:text-lg"
-                  >
-                    {genre}
-                  </Link>
+                  {genre}
                 </span>
               );
             })}
@@ -113,15 +110,15 @@ export const PosterWithStuff = (props: {
           )}
         </div>
         {settings.showDescription && props.description && (
-            <p className="mt-2 text-sm font-light text-white lg:text-base xl:text-lg line-clamp-4">
-              {props.description}
-            </p>
-          )}
+          <p className="mt-2 text-sm font-light text-white lg:text-base xl:text-lg line-clamp-4">
+            {props.description}
+          </p>
+        )}
       </div>
-      <div className="absolute w-full h-full bg-gradient-to-t from-black to-transparent"></div>
+      <div className="absolute w-full h-full rounded-b-lg bg-gradient-to-t from-black to-transparent"></div>
       <Poster
         image={props.image}
-        className="min-w-full min-h-full flex-grow-1"
+        className="w-auto h-auto min-w-full min-h-full flex-grow-1"
       ></Poster>
     </div>
   );
diff --git a/app/pages/Related.tsx b/app/pages/Related.tsx
index af8ebf9..1cb7343 100644
--- a/app/pages/Related.tsx
+++ b/app/pages/Related.tsx
@@ -5,7 +5,6 @@ import { useState, useEffect } from "react";
 import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
 import { ENDPOINTS } from "#/api/config";
-// import { ReleaseLink169Related } from "#/components/ReleaseLink/ReleaseLink.16_9Related";
 import { useSWRfetcher } from "#/api/utils";
 import { Card } from "flowbite-react";
 import { Poster } from "#/components/ReleasePoster/Poster";
@@ -97,7 +96,6 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                 genres.push(genre.trim());
               });
             }
-            // return <ReleaseLink169Related {...release} key={release.id} _position={index + 1} />
             return (
               <Link href={`/release/${release.id}`} key={release.id}>
                 <Card>
@@ -112,12 +110,12 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                       </h1>
                     </div>
                     <div className="flex items-center justify-center lg:hidden">
-                      <div className="max-w-96">
+                      <div className="max-w-64">
                         <PosterWithStuff {...release} settings={settings} />
                       </div>
                     </div>
                     <div className="hidden lg:flex">
-                      <Poster image={release.image} />
+                      <Poster image={release.image} className="h-auto" />
                     </div>
                     <div className="flex-col hidden gap-2 lg:flex">
                       <ReleaseChips
@@ -133,14 +131,10 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                             return (
                               <span
                                 key={`release_${props.id}_genre_${genre}_${index}`}
+                                className="font-light dark:text-white md:text-sm lg:text-base xl:text-lg"
                               >
                                 {index > 0 && ", "}
-                                <Link
-                                  href={`/search?q=${genre}&searchBy=tag`}
-                                  className="font-light dark:text-white md:text-sm lg:text-base xl:text-lg"
-                                >
-                                  {genre}
-                                </Link>
+                                {genre}
                               </span>
                             );
                           })}

From 1530fa3937a0a5c826f8d8dd71d4557666366869 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 26 Mar 2025 00:51:30 +0500
Subject: [PATCH 06/12] refactor: release section

---
 .../ReleaseCourusel/ReleaseCourusel.tsx       |  1 -
 .../ReleaseLink/ReleaseLinkUpdate.tsx         | 18 +++++++
 .../ReleaseLink.16_9FullImage_old.tsx         |  0
 .../ReleaseLink.16_9Poster_old.tsx            |  0
 .../ReleaseLink.Poster_old.tsx                |  0
 app/components/ReleaseLinkOld/ReleaseLink.tsx | 52 +++++++++++++++++++
 .../ReleaseLinkOld/ReleaseLinkUpdate.tsx      | 25 +++++++++
 app/components/ReleasePoster/Chips.tsx        | 46 ++++++++++++----
 .../ReleasePoster/PosterWithStuff.tsx         | 36 +++++--------
 .../ReleaseSection/ReleaseSection.tsx         | 23 ++++++--
 app/pages/Related.tsx                         | 22 ++------
 11 files changed, 167 insertions(+), 56 deletions(-)
 rename app/components/{ReleaseLink => ReleaseLinkOld}/ReleaseLink.16_9FullImage_old.tsx (100%)
 rename app/components/{ReleaseLink => ReleaseLinkOld}/ReleaseLink.16_9Poster_old.tsx (100%)
 rename app/components/{ReleaseLink => ReleaseLinkOld}/ReleaseLink.Poster_old.tsx (100%)
 create mode 100644 app/components/ReleaseLinkOld/ReleaseLink.tsx
 create mode 100644 app/components/ReleaseLinkOld/ReleaseLinkUpdate.tsx

diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.tsx b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
index 32a85da..69bd9ee 100644
--- a/app/components/ReleaseCourusel/ReleaseCourusel.tsx
+++ b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
@@ -53,7 +53,6 @@ export const ReleaseCourusel = (props: {
                 <SwiperSlide
                   key={release.id}
                   className="max-w-64 md:max-w-96"
-                  // className="xl:max-w-[600px] sm:max-w-[400px] lg:aspect-video"
                 >
                   <ReleaseLink {...release} />
                 </SwiperSlide>
diff --git a/app/components/ReleaseLink/ReleaseLinkUpdate.tsx b/app/components/ReleaseLink/ReleaseLinkUpdate.tsx
index 4467f96..e448809 100644
--- a/app/components/ReleaseLink/ReleaseLinkUpdate.tsx
+++ b/app/components/ReleaseLink/ReleaseLinkUpdate.tsx
@@ -5,17 +5,35 @@ export const ReleaseLink = (props: {
   image: string;
   title_ru: string;
   title_original: string;
+  description?: string;
   genres?: string;
   grade?: number;
   id: number;
   settings?: {
     showGenres?: boolean;
+    showDescription?: boolean;
+  };
+  chipsSettings?: {
+    enabled: boolean;
+    gradeHidden?: boolean;
+    statusHidden?: boolean;
+    categoryHidden?: boolean;
+    episodesHidden?: boolean;
+    listHidden?: boolean;
+    favHidden?: boolean;
+    lastWatchedHidden?: boolean;
   };
   profile_list_status?: number;
   status?: {
     name: string;
   };
+  category?: {
+    name: string;
+  };
   status_id?: number;
+  episodes_released?: string;
+  episodes_total?: string;
+  is_favorite?: boolean;
 }) => {
   return (
     <Link href={`/release/${props.id}`}>
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9FullImage_old.tsx b/app/components/ReleaseLinkOld/ReleaseLink.16_9FullImage_old.tsx
similarity index 100%
rename from app/components/ReleaseLink/ReleaseLink.16_9FullImage_old.tsx
rename to app/components/ReleaseLinkOld/ReleaseLink.16_9FullImage_old.tsx
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9Poster_old.tsx b/app/components/ReleaseLinkOld/ReleaseLink.16_9Poster_old.tsx
similarity index 100%
rename from app/components/ReleaseLink/ReleaseLink.16_9Poster_old.tsx
rename to app/components/ReleaseLinkOld/ReleaseLink.16_9Poster_old.tsx
diff --git a/app/components/ReleaseLink/ReleaseLink.Poster_old.tsx b/app/components/ReleaseLinkOld/ReleaseLink.Poster_old.tsx
similarity index 100%
rename from app/components/ReleaseLink/ReleaseLink.Poster_old.tsx
rename to app/components/ReleaseLinkOld/ReleaseLink.Poster_old.tsx
diff --git a/app/components/ReleaseLinkOld/ReleaseLink.tsx b/app/components/ReleaseLinkOld/ReleaseLink.tsx
new file mode 100644
index 0000000..8bc9e80
--- /dev/null
+++ b/app/components/ReleaseLinkOld/ReleaseLink.tsx
@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { Poster } from "../ReleasePoster/Poster";
+import { Chip } from "../Chip/Chip";
+// import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
+// import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
+// import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
+
+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 ReleaseLink = (props: {
+  // type?: "16_9" | "poster";
+  image: string;
+  title_ru: string;
+  title_original: string;
+  genres?: string;
+  grade?: number;
+  id: number;
+  settings?: {
+    showGenres?: boolean;
+  };
+  profile_list_status?: number;
+  status?: {
+    name: string;
+  };
+  status_id?: number;
+}) => {
+  // const type = props.type || "16_9";
+
+  // if (type == "16_9") {
+  //   return (
+  //     <>
+  //       <div>TYPE=16/9</div>
+
+  //       {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
+  //       {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
+  //     </>
+  //   );
+  // }
+  // if (props.type == "poster") {
+  return (
+    <>You NEED to fix this. Replace import to `ReleaseLinkUpdate`</>
+  );
+  // return <ReleaseLinkPoster {...props} />;
+  // }
+};
diff --git a/app/components/ReleaseLinkOld/ReleaseLinkUpdate.tsx b/app/components/ReleaseLinkOld/ReleaseLinkUpdate.tsx
new file mode 100644
index 0000000..4467f96
--- /dev/null
+++ b/app/components/ReleaseLinkOld/ReleaseLinkUpdate.tsx
@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { PosterWithStuff } from "../ReleasePoster/PosterWithStuff";
+
+export const ReleaseLink = (props: {
+  image: string;
+  title_ru: string;
+  title_original: string;
+  genres?: string;
+  grade?: number;
+  id: number;
+  settings?: {
+    showGenres?: boolean;
+  };
+  profile_list_status?: number;
+  status?: {
+    name: string;
+  };
+  status_id?: number;
+}) => {
+  return (
+    <Link href={`/release/${props.id}`}>
+      <PosterWithStuff {...props} />
+    </Link>
+  );
+};
diff --git a/app/components/ReleasePoster/Chips.tsx b/app/components/ReleasePoster/Chips.tsx
index 0787772..8e1784b 100644
--- a/app/components/ReleasePoster/Chips.tsx
+++ b/app/components/ReleasePoster/Chips.tsx
@@ -1,3 +1,4 @@
+import { sinceUnixDate } from "#/api/utils";
 import { Chip } from "../Chip/Chip";
 
 interface ChipProps {
@@ -10,6 +11,8 @@ interface ChipProps {
   episodes_total?: any;
   category?: any;
   is_favorite?: any;
+  last_view_episode?: any;
+  last_view_timestamp?: any;
 }
 
 export const ReleaseChips = ({
@@ -22,12 +25,24 @@ export const ReleaseChips = ({
   episodes_total,
   category,
   is_favorite,
+  last_view_episode,
+  last_view_timestamp,
 }: ChipProps) => {
+  const chipSettings = {
+    enabled: true,
+    gradeHidden: false,
+    statusHidden: false,
+    categoryHidden: false,
+    episodesHidden: false,
+    listHidden: false,
+    favHidden: false,
+    lastWatchedHidden: true,
+    ...settings,
+  };
+
   return (
-    <div
-      className={`${settings.chips.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}
-    >
-      {!settings.chips.gradeHidden && grade ?
+    <div className={`${chipSettings.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}>
+      {!chipSettings.gradeHidden && grade ?
         <Chip
           className="w-12"
           bg_color={
@@ -43,10 +58,10 @@ export const ReleaseChips = ({
           name={`${grade}`}
         />
       : ""}
-      {!settings.chips.listHidden && user_list && (
+      {!chipSettings.listHidden && user_list && (
         <Chip bg_color={user_list.bg_color} name={user_list.name} />
       )}
-      {!settings.chips.statusHidden && status ?
+      {!chipSettings.statusHidden && status ?
         <Chip name={status.name} />
       : status_id != 0 && (
           <Chip
@@ -59,21 +74,30 @@ export const ReleaseChips = ({
           />
         )
       }
-      {!settings.chips.episodesHidden && (
+      {!chipSettings.episodesHidden && (
         <Chip
           name={episodes_released && episodes_released}
           name_2={episodes_total ? episodes_total + " эп." : "? эп."}
           devider="/"
         />
       )}
-      {!settings.chips.categoryHidden && category && (
-        <Chip name={category.name} />
-      )}
-      {!settings.chips.favHidden && is_favorite && (
+      {!chipSettings.categoryHidden && category && <Chip name={category.name} />}
+      {!chipSettings.favHidden && is_favorite && (
         <div className="flex items-center justify-center bg-pink-500 rounded-sm">
           <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
         </div>
       )}
+      {!chipSettings.lastWatchedHidden && last_view_episode && (
+        <Chip
+          name={
+            last_view_episode.name ?
+              last_view_episode.name
+            : `${last_view_episode.position + 1} серия`
+          }
+          name_2={last_view_timestamp && sinceUnixDate(last_view_timestamp)}
+          devider=", "
+        />
+      )}
     </div>
   );
 };
diff --git a/app/components/ReleasePoster/PosterWithStuff.tsx b/app/components/ReleasePoster/PosterWithStuff.tsx
index f46cf2e..5f067ac 100644
--- a/app/components/ReleasePoster/PosterWithStuff.tsx
+++ b/app/components/ReleasePoster/PosterWithStuff.tsx
@@ -21,16 +21,16 @@ export const PosterWithStuff = (props: {
   settings?: {
     showGenres?: boolean;
     showDescription?: boolean;
-    chips?: {
-      enabled: boolean;
-      gradeHidden?: boolean;
-      statusHidden?: boolean;
-      categoryHidden?: boolean;
-      episodesHidden?: boolean;
-      listHidden?: boolean;
-      favHidden?: boolean;
-      lastWatchedHidden?: boolean;
-    };
+  };
+  chipsSettings?: {
+    enabled: boolean;
+    gradeHidden?: boolean;
+    statusHidden?: boolean;
+    categoryHidden?: boolean;
+    episodesHidden?: boolean;
+    listHidden?: boolean;
+    favHidden?: boolean;
+    lastWatchedHidden?: boolean;
   };
   profile_list_status?: number;
   status?: {
@@ -48,18 +48,10 @@ export const PosterWithStuff = (props: {
   const settings = {
     showGenres: true,
     showDescription: true,
-    chips: {
-      enabled: true,
-      gradeHidden: false,
-      statusHidden: false,
-      categoryHidden: false,
-      episodesHidden: false,
-      listHidden: false,
-      favHidden: false,
-      lastWatchedHidden: false,
-    },
     ...props.settings,
   };
+  const chipsSettings = props.chipsSettings || {}
+
   const grade = props.grade ? Number(props.grade.toFixed(1)) : null;
   const profile_list_status = props.profile_list_status || null;
   let user_list = null;
@@ -74,13 +66,13 @@ export const PosterWithStuff = (props: {
   }
 
   return (
-    <div className="relative flex items-center justify-center w-full h-full overflow-hidden group">
+    <div className="relative flex items-center justify-center w-full h-full overflow-hidden rounded-lg group">
       <div className="absolute z-20 top-2 left-2 right-2">
         <ReleaseChips
           {...props}
           user_list={user_list}
           grade={grade}
-          settings={settings}
+          settings={chipsSettings}
         ></ReleaseChips>
       </div>
       <div className="absolute z-20 bottom-2 left-2 right-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
diff --git a/app/components/ReleaseSection/ReleaseSection.tsx b/app/components/ReleaseSection/ReleaseSection.tsx
index 734e388..a5b85c9 100644
--- a/app/components/ReleaseSection/ReleaseSection.tsx
+++ b/app/components/ReleaseSection/ReleaseSection.tsx
@@ -1,4 +1,4 @@
-import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
 
 export const ReleaseSection = (props: {
   sectionTitle?: string;
@@ -14,7 +14,24 @@ export const ReleaseSection = (props: {
         </div>
       )}
       <div className="m-4">
-        <div className="lg:justify-center lg:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] gap-4 lg:gap-2 min-w-full flex flex-col lg:grid">
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+          {props.content.map((release) => {
+            return (
+              <div key={release.id} className="w-full h-full">
+                <ReleaseLink
+                  {...release}
+                  chipsSettings={{
+                    enabled: true,
+                    lastWatchedHidden:
+                      (props.sectionTitle &&
+                        props.sectionTitle.toLowerCase() != "история")
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+        {/* <div className="lg:justify-center lg:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] gap-4 lg:gap-2 min-w-full flex flex-col lg:grid">
           {props.content.map((release) => {
             return (
               <div key={release.id} className="w-full h-full lg:aspect-video">
@@ -23,7 +40,7 @@ export const ReleaseSection = (props: {
             );
           })}
           {props.content.length == 1 && <div></div>}
-        </div>
+        </div> */}
       </div>
     </section>
   );
diff --git a/app/pages/Related.tsx b/app/pages/Related.tsx
index 1cb7343..9865c8a 100644
--- a/app/pages/Related.tsx
+++ b/app/pages/Related.tsx
@@ -69,20 +69,6 @@ export function RelatedPage(props: { id: number | string; title: string }) {
         <div className="flex flex-col gap-4 my-4">
           {content.map((release, index) => {
             const genres = [];
-            const settings = {
-              showGenres: true,
-              showDescription: true,
-              chips: {
-                enabled: true,
-                gradeHidden: false,
-                statusHidden: false,
-                categoryHidden: false,
-                episodesHidden: false,
-                listHidden: false,
-                favHidden: false,
-                lastWatchedHidden: false,
-              },
-            };
             const grade =
               release.grade ? Number(release.grade.toFixed(1)) : null;
             const profile_list_status = release.profile_list_status || null;
@@ -111,7 +97,7 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                     </div>
                     <div className="flex items-center justify-center lg:hidden">
                       <div className="max-w-64">
-                        <PosterWithStuff {...release} settings={settings} />
+                        <PosterWithStuff {...release} />
                       </div>
                     </div>
                     <div className="hidden lg:flex">
@@ -122,11 +108,9 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                         {...release}
                         user_list={user_list}
                         grade={grade}
-                        settings={settings}
                       />
                       <div>
-                        {settings.showGenres &&
-                          genres.length > 0 &&
+                        {genres.length > 0 &&
                           genres.map((genre: string, index: number) => {
                             return (
                               <span
@@ -149,7 +133,7 @@ export function RelatedPage(props: { id: number | string; title: string }) {
                           {release.title_original}
                         </p>
                       )}
-                      {settings.showDescription && release.description && (
+                      {release.description && (
                         <p className="mt-2 text-sm font-light dark:text-white lg:text-base xl:text-lg line-clamp-2">
                           {release.description}
                         </p>

From 967b9cfbb05b6a6e38b2976f2c79d5ec8ca43893 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 26 Mar 2025 01:08:59 +0500
Subject: [PATCH 07/12] refactor: profile page recently watched

---
 .../Profile/Profile.ReleaseHistory.tsx        | 30 ++++++++++++-------
 .../ReleaseInfo/ReleaseInfo.Related.tsx       | 18 ++++++++++-
 .../ReleaseSection/ReleaseSection.tsx         | 10 -------
 3 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/app/components/Profile/Profile.ReleaseHistory.tsx b/app/components/Profile/Profile.ReleaseHistory.tsx
index e17c2d9..b579c11 100644
--- a/app/components/Profile/Profile.ReleaseHistory.tsx
+++ b/app/components/Profile/Profile.ReleaseHistory.tsx
@@ -1,25 +1,29 @@
-import { Card, Carousel, RatingStar, Rating } from "flowbite-react";
+import { Card, Carousel } from "flowbite-react";
 import type {
   FlowbiteCarouselIndicatorsTheme,
   FlowbiteCarouselControlTheme,
+  CustomFlowbiteTheme,
 } from "flowbite-react";
-import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLinkUpdate";
 
 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",
+    off: "bg-gray-400/50 hover:bg-gray-200",
+    on: "bg-gray-200",
   },
-  base: "h-3 w-3 rounded-full",
+  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 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",
+  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 = {
+const CarouselTheme: CustomFlowbiteTheme["carousel"] = {
+  root: {
+    base: "relative h-full w-full max-w-[375px]",
+  },
   indicators: CarouselIndicatorsTheme,
   control: CarouselControlsTheme,
 };
@@ -28,10 +32,16 @@ export const ProfileReleaseHistory = (props: any) => {
   return (
     <Card className="h-fit">
       <h1 className="text-2xl font-bold">Недавно просмотренные</h1>
-      <div className="max-w-[700px] min-h-[200px]">
+      <div className="flex justify-center">
         <Carousel theme={CarouselTheme}>
           {props.history.map((release) => {
-            return <ReleaseLink key={`history-${release.id}`} {...release} />;
+            return (
+              <ReleaseLink
+                key={`history-${release.id}`}
+                {...release}
+                chipsSettings={{ lastWatchedHidden: false }}
+              />
+            );
           })}
         </Carousel>
       </div>
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
index 496d342..80a5cac 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
@@ -1,13 +1,29 @@
 "use client";
 
-import { Card, Carousel, CustomFlowbiteTheme } from "flowbite-react";
+import { Card, Carousel, CustomFlowbiteTheme, FlowbiteCarouselControlTheme, FlowbiteCarouselIndicatorsTheme } 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: {
diff --git a/app/components/ReleaseSection/ReleaseSection.tsx b/app/components/ReleaseSection/ReleaseSection.tsx
index a5b85c9..b826085 100644
--- a/app/components/ReleaseSection/ReleaseSection.tsx
+++ b/app/components/ReleaseSection/ReleaseSection.tsx
@@ -31,16 +31,6 @@ export const ReleaseSection = (props: {
             );
           })}
         </div>
-        {/* <div className="lg:justify-center lg:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] gap-4 lg:gap-2 min-w-full flex flex-col lg:grid">
-          {props.content.map((release) => {
-            return (
-              <div key={release.id} className="w-full h-full lg:aspect-video">
-                <ReleaseLink {...release} />
-              </div>
-            );
-          })}
-          {props.content.length == 1 && <div></div>}
-        </div> */}
       </div>
     </section>
   );

From 5abb6e8f11b297625ce644ead0caa63b0d111a84 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 26 Mar 2025 01:47:47 +0500
Subject: [PATCH 08/12] refactor: create collection page release poster

---
 .../ReleasePoster/PosterWithStuff.tsx         |  2 +-
 app/pages/CreateCollection.tsx                | 43 ++++++++++---------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/app/components/ReleasePoster/PosterWithStuff.tsx b/app/components/ReleasePoster/PosterWithStuff.tsx
index 5f067ac..adffc49 100644
--- a/app/components/ReleasePoster/PosterWithStuff.tsx
+++ b/app/components/ReleasePoster/PosterWithStuff.tsx
@@ -66,7 +66,7 @@ export const PosterWithStuff = (props: {
   }
 
   return (
-    <div className="relative flex items-center justify-center w-full h-full overflow-hidden rounded-lg group">
+    <div className="relative w-full h-full overflow-hidden rounded-lg group">
       <div className="absolute z-20 top-2 left-2 right-2">
         <ReleaseChips
           {...props}
diff --git a/app/pages/CreateCollection.tsx b/app/pages/CreateCollection.tsx
index e943634..cd0c3b7 100644
--- a/app/pages/CreateCollection.tsx
+++ b/app/pages/CreateCollection.tsx
@@ -15,7 +15,7 @@ import {
   Modal,
   useThemeMode,
 } from "flowbite-react";
-import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLink";
+import { PosterWithStuff } from "#/components/ReleasePoster/PosterWithStuff";
 import { CropModal } from "#/components/CropModal/CropModal";
 import { b64toBlob, tryCatchAPI } from "#/api/utils";
 
@@ -462,20 +462,17 @@ export const CreateCollectionPage = () => {
           </Button>
         </div>
         <div className="m-4">
-          <div className="grid justify-center sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] grid-cols-[100%] gap-2 min-w-full">
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
             {addedReleases.map((release) => {
               return (
-                <div
-                  key={release.id}
-                  className="relative w-full h-full aspect-video group"
-                >
+                <div key={release.id} className="relative w-full h-full group">
                   <button
-                    className="absolute inset-0 z-10 text-black transition-opacity bg-white opacity-0 group-hover:opacity-75"
+                    className="absolute inset-0 z-30 text-black transition-opacity bg-white rounded-lg opacity-0 group-hover:opacity-75"
                     onClick={() => _deleteRelease(release)}
                   >
                     Удалить
                   </button>
-                  <ReleaseLink {...release} isLinkDisabled={true} />
+                  <PosterWithStuff {...release} />
                 </div>
               );
             })}
@@ -592,6 +589,9 @@ export const ReleasesEditModal = (props: {
       return;
     }
 
+    const newContent = content.filter((r) => r.id !== release.id);
+
+    setContent(newContent);
     props.setReleases([...props.releases, release]);
     props.setReleasesIds([...props.releasesIds, release.id]);
   }
@@ -611,11 +611,7 @@ export const ReleasesEditModal = (props: {
       >
         <form
           className="max-w-full mx-auto"
-          onSubmit={(e) => {
-            e.preventDefault();
-            setContent([]);
-            setQuery(e.target[0].value.trim());
-          }}
+          onSubmit={(e) => e.preventDefault()}
         >
           <label
             htmlFor="default-search"
@@ -647,30 +643,35 @@ export const ReleasesEditModal = (props: {
               className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               placeholder="Поиск аниме..."
               required
-              defaultValue={query || ""}
+              onChange={(e) => setQuery(e.target.value)}
+              value={query || ""}
             />
             <button
-              type="submit"
-              className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              type="button"
+              className="text-white absolute end-2.5 bottom-2.5 bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
+              onClick={() => {
+                setSize(0);
+                setContent([]);
+                setQuery("");
+              }}
             >
-              Поиск
+              Очистить
             </button>
           </div>
         </form>
 
-        <div className="grid grid-cols-2 gap-2 mt-2 md:grid-cols-4">
+        <div className="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
           {content.map((release) => {
             return (
               <button
+                className="text-left"
                 key={release.id}
-                className="overflow-hidden"
                 onClick={() => _addRelease(release)}
               >
-                <ReleaseLink type="poster" {...release} isLinkDisabled={true} />
+                <PosterWithStuff {...release} />
               </button>
             );
           })}
-          {content.length == 1 && <div></div>}
         </div>
         {isLoading && (
           <div className="flex items-center justify-center h-full min-h-24">

From f6b82028773b87d681e3fc93095736011b3825bf Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 26 Mar 2025 01:50:10 +0500
Subject: [PATCH 09/12] remove old stuff

---
 app/components/ReleaseLink/ReleaseLink.tsx    |  52 -------
 .../ReleaseLink.16_9FullImage_old.tsx         | 133 ------------------
 .../ReleaseLink.16_9Poster_old.tsx            | 124 ----------------
 .../ReleaseLinkOld/ReleaseLink.Poster_old.tsx |  84 -----------
 app/components/ReleaseLinkOld/ReleaseLink.tsx |  52 -------
 .../ReleaseLinkOld/ReleaseLinkUpdate.tsx      |  25 ----
 6 files changed, 470 deletions(-)
 delete mode 100644 app/components/ReleaseLink/ReleaseLink.tsx
 delete mode 100644 app/components/ReleaseLinkOld/ReleaseLink.16_9FullImage_old.tsx
 delete mode 100644 app/components/ReleaseLinkOld/ReleaseLink.16_9Poster_old.tsx
 delete mode 100644 app/components/ReleaseLinkOld/ReleaseLink.Poster_old.tsx
 delete mode 100644 app/components/ReleaseLinkOld/ReleaseLink.tsx
 delete mode 100644 app/components/ReleaseLinkOld/ReleaseLinkUpdate.tsx

diff --git a/app/components/ReleaseLink/ReleaseLink.tsx b/app/components/ReleaseLink/ReleaseLink.tsx
deleted file mode 100644
index 8bc9e80..0000000
--- a/app/components/ReleaseLink/ReleaseLink.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Link from "next/link";
-import { Poster } from "../ReleasePoster/Poster";
-import { Chip } from "../Chip/Chip";
-// import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
-// import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
-// import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
-
-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 ReleaseLink = (props: {
-  // type?: "16_9" | "poster";
-  image: string;
-  title_ru: string;
-  title_original: string;
-  genres?: string;
-  grade?: number;
-  id: number;
-  settings?: {
-    showGenres?: boolean;
-  };
-  profile_list_status?: number;
-  status?: {
-    name: string;
-  };
-  status_id?: number;
-}) => {
-  // const type = props.type || "16_9";
-
-  // if (type == "16_9") {
-  //   return (
-  //     <>
-  //       <div>TYPE=16/9</div>
-
-  //       {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
-  //       {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
-  //     </>
-  //   );
-  // }
-  // if (props.type == "poster") {
-  return (
-    <>You NEED to fix this. Replace import to `ReleaseLinkUpdate`</>
-  );
-  // return <ReleaseLinkPoster {...props} />;
-  // }
-};
diff --git a/app/components/ReleaseLinkOld/ReleaseLink.16_9FullImage_old.tsx b/app/components/ReleaseLinkOld/ReleaseLink.16_9FullImage_old.tsx
deleted file mode 100644
index b62e0ce..0000000
--- a/app/components/ReleaseLinkOld/ReleaseLink.16_9FullImage_old.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import Link from "next/link";
-import { sinceUnixDate } from "#/api/utils";
-import { Chip } from "#/components/Chip/Chip";
-import Image from "next/image";
-
-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 ReleaseLink169 = (props: any) => {
-  const grade = props.grade ? props.grade.toFixed(1) : null;
-  const profile_list_status = props.profile_list_status;
-  let user_list = null;
-  if (profile_list_status != null || profile_list_status != 0) {
-    user_list = profile_lists[profile_list_status];
-  }
-  return (
-    <Link
-      href={`/release/${props.id}`}
-      className={props.isLinkDisabled ? "pointer-events-none" : ""}
-      aria-disabled={props.isLinkDisabled}
-      tabIndex={props.isLinkDisabled ? -1 : undefined}
-    >
-      <div className="w-full aspect-video group">
-        <div
-          className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
-          style={{
-            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%)`,
-          }}
-        >
-          <Image
-            src={props.image}
-            fill={true}
-            alt={props.title || ""}
-            className="-z-[1] object-cover"
-            sizes="
-                  (max-width: 768px) 300px,
-                  (max-width: 1024px) 600px,
-                  900px
-                  "
-          />
-          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-0 top-0 p-1 sm:p-2">
-            {grade ? (
-              <Chip
-                bg_color={
-                  grade == 0
-                    ? "hidden"
-                    : grade < 2
-                    ? "bg-red-500"
-                    : grade < 3
-                    ? "bg-orange-500"
-                    : grade < 4
-                    ? "bg-yellow-500"
-                    : "bg-green-500"
-                }
-                name={grade}
-              />
-            ) : (
-              ""
-            )}
-            {user_list && (
-              <Chip bg_color={user_list.bg_color} name={user_list.name} />
-            )}
-            {props.status ? (
-              <Chip name={props.status.name} />
-            ) : (
-              props.status_id != 0 && (
-                <Chip
-                  name={
-                    props.status_id == 1
-                      ? "Завершено"
-                      : props.status_id == 2
-                      ? "Онгоинг"
-                      : props.status_id == 3 && "Анонс"
-                  }
-                />
-              )
-            )}
-            <Chip
-              name={props.episodes_released && props.episodes_released}
-              name_2={
-                props.episodes_total ? props.episodes_total + " эп." : "? эп."
-              }
-              devider="/"
-            />
-            {props.last_view_episode && (
-              <Chip
-                name={
-                  props.last_view_episode.name
-                    ? props.last_view_episode.name
-                    : `${props.last_view_episode.position + 1} серия`
-                }
-                name_2={
-                  "last_view_timestamp" in props &&
-                  sinceUnixDate(props.last_view_timestamp)
-                }
-                devider=", "
-              />
-            )}
-            {props.category && <Chip name={props.category.name} />}
-            {props.is_favorite && (
-              <div className="flex items-center justify-center bg-pink-500 rounded-sm">
-                <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
-              </div>
-            )}
-          </div>
-          <div className="absolute bottom-0 left-0 p-1 sm:p-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
-            <div className="transition-transform lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0">
-              {props.genres && (
-                <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-                  {props.genres}
-                </p>
-              )}
-              <p className="text-sm font-bold text-white md:text-base lg:text-lg xl:text-xl">
-                {props.title_ru}
-              </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>
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-};
diff --git a/app/components/ReleaseLinkOld/ReleaseLink.16_9Poster_old.tsx b/app/components/ReleaseLinkOld/ReleaseLink.16_9Poster_old.tsx
deleted file mode 100644
index 5a02d6b..0000000
--- a/app/components/ReleaseLinkOld/ReleaseLink.16_9Poster_old.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import Link from "next/link";
-import { sinceUnixDate } from "#/api/utils";
-import { Chip } from "#/components/Chip/Chip";
-import Image from "next/image";
-
-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 ReleaseLink169Poster = (props: any) => {
-  const grade = props.grade ? props.grade.toFixed(1) : null;
-  const profile_list_status = props.profile_list_status;
-  let user_list = null;
-  if (profile_list_status != null || profile_list_status != 0) {
-    user_list = profile_lists[profile_list_status];
-  }
-  return (
-    <Link
-      href={`/release/${props.id}`} 
-      className={props.isLinkDisabled ? "pointer-events-none" : ""}
-      aria-disabled={props.isLinkDisabled}
-      tabIndex={props.isLinkDisabled ? -1 : undefined}
-    >
-      <div className="w-full h-auto p-2 bg-gray-100 rounded-lg dark:bg-slate-800">
-        <div className="flex w-full h-full gap-2 overflow-hidden">
-          <div className="flex-shrink-0">
-            <Image
-              src={props.image}
-              height={250}
-              width={250}
-              alt={props.title || ""}
-              className="object-cover aspect-[9/16] h-auto w-24 md:w-32 lg:w-48 rounded-md"
-            />
-          </div>
-          <div className="flex flex-col flex-1 w-full h-full">
-            <div>
-              {props.genres && (
-                <p className="text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg">
-                  {props.genres}
-                </p>
-              )}
-              <p className="text-sm font-bold text-black dark:text-white md:text-base lg:text-lg xl:text-xl">
-                {`${props.title_ru.slice(0, 47)}${
-                  props.title_ru.length > 47 ? "..." : ""
-                }`}
-              </p>
-              <p className="text-xs font-light text-black dark:text-white md:text-sm lg:text-base xl:text-lg">
-                {`${props.description.slice(0, 97)}${
-                  props.description.length > 97 ? "..." : ""
-                }`}
-              </p>
-            </div>
-            <div className="flex flex-wrap gap-1 mt-1">
-              {grade ? <Chip
-                bg_color={
-                  grade == 0
-                    ? "hidden"
-                    : grade < 2
-                    ? "bg-red-500"
-                    : grade < 3
-                    ? "bg-orange-500"
-                    : grade < 4
-                    ? "bg-yellow-500"
-                    : "bg-green-500"
-                }
-                name={grade}
-              /> : ""}
-              {user_list && (
-                <Chip bg_color={user_list.bg_color} name={user_list.name} />
-              )}
-              {props.status ? (
-                <Chip name={props.status.name} />
-              ) : (
-                props.status_id != 0 && (
-                  <Chip
-                    name={
-                      props.status_id == 1
-                        ? "Завершено"
-                        : props.status_id == 2
-                        ? "Онгоинг"
-                        : props.status_id == 3 && "Анонс"
-                    }
-                  />
-                )
-              )}
-              <Chip
-                name={props.episodes_released && props.episodes_released}
-                name_2={
-                  props.episodes_total ? props.episodes_total + " эп." : "? эп."
-                }
-                devider="/"
-              />
-              {props.last_view_episode && (
-                <Chip
-                  name={
-                    props.last_view_episode.name
-                      ? props.last_view_episode.name
-                      : `${props.last_view_episode.position + 1} серия`
-                  }
-                  name_2={
-                    "last_view_timestamp" in props &&
-                    sinceUnixDate(props.last_view_timestamp)
-                  }
-                  devider=", "
-                />
-              )}
-              {props.category && <Chip name={props.category.name} />}
-              {props.is_favorite && (
-                <div className="flex items-center justify-center bg-pink-500 rounded-sm">
-                  <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-};
diff --git a/app/components/ReleaseLinkOld/ReleaseLink.Poster_old.tsx b/app/components/ReleaseLinkOld/ReleaseLink.Poster_old.tsx
deleted file mode 100644
index 438b7b6..0000000
--- a/app/components/ReleaseLinkOld/ReleaseLink.Poster_old.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import Link from "next/link";
-import { Chip } from "#/components/Chip/Chip";
-
-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 ReleaseLinkPoster = (props: any) => {
-  const grade = props.grade.toFixed(1);
-  const profile_list_status = props.profile_list_status;
-  let user_list = null;
-  if (profile_list_status != null || profile_list_status != 0) {
-    user_list = profile_lists[profile_list_status];
-  }
-  return (
-    <Link
-      href={`/release/${props.id}`}
-      className={props.isLinkDisabled ? "pointer-events-none" : ""}
-      aria-disabled={props.isLinkDisabled}
-      tabIndex={props.isLinkDisabled ? -1 : undefined}
-    >
-      <div
-        className="relative w-full h-64 gap-8 p-2 overflow-hidden bg-white bg-center bg-no-repeat bg-cover border border-gray-200 rounded-lg shadow-md lg:min-w-[300px] lg:min-h-[385px] lg:max-w-[300px] lg:max-h-[385px] lg:bg-top dark:border-gray-700 dark:bg-gray-800"
-        style={{
-          backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
-        }}
-      >
-        <div className="flex flex-wrap gap-1">
-          <Chip
-            bg_color={
-              props.grade.toFixed(1) == 0
-                ? "hidden"
-                : props.grade.toFixed(1) < 2
-                ? "bg-red-500"
-                : props.grade.toFixed(1) < 3
-                ? "bg-orange-500"
-                : props.grade.toFixed(1) < 4
-                ? "bg-yellow-500"
-                : "bg-green-500"
-            }
-            name={props.grade.toFixed(1)}
-          />
-          {props.status ? (
-            <Chip name={props.status.name} />
-          ) : (
-            <Chip
-              name={
-                props.status_id == 1
-                  ? "Завершено"
-                  : props.status_id == 2
-                  ? "Онгоинг"
-                  : "Анонс"
-              }
-            />
-          )}
-          <Chip
-            name={props.episodes_released && props.episodes_released}
-            name_2={
-              props.episodes_total ? props.episodes_total + " эп." : "? эп."
-            }
-            devider="/"
-          />
-        </div>
-        <div className="absolute flex flex-col gap-2 text-white bottom-4 left-2 right-2">
-          {props.title_ru && (
-            <p className="text-xl font-bold text-white md:text-2xl">
-              {props.title_ru}
-            </p>
-          )}
-          {props.title_original && (
-            <p className="text-sm text-gray-300 md:text-base">
-              {props.title_original}
-            </p>
-          )}
-        </div>
-      </div>
-    </Link>
-  );
-};
diff --git a/app/components/ReleaseLinkOld/ReleaseLink.tsx b/app/components/ReleaseLinkOld/ReleaseLink.tsx
deleted file mode 100644
index 8bc9e80..0000000
--- a/app/components/ReleaseLinkOld/ReleaseLink.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Link from "next/link";
-import { Poster } from "../ReleasePoster/Poster";
-import { Chip } from "../Chip/Chip";
-// import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
-// import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
-// import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
-
-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 ReleaseLink = (props: {
-  // type?: "16_9" | "poster";
-  image: string;
-  title_ru: string;
-  title_original: string;
-  genres?: string;
-  grade?: number;
-  id: number;
-  settings?: {
-    showGenres?: boolean;
-  };
-  profile_list_status?: number;
-  status?: {
-    name: string;
-  };
-  status_id?: number;
-}) => {
-  // const type = props.type || "16_9";
-
-  // if (type == "16_9") {
-  //   return (
-  //     <>
-  //       <div>TYPE=16/9</div>
-
-  //       {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
-  //       {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
-  //     </>
-  //   );
-  // }
-  // if (props.type == "poster") {
-  return (
-    <>You NEED to fix this. Replace import to `ReleaseLinkUpdate`</>
-  );
-  // return <ReleaseLinkPoster {...props} />;
-  // }
-};
diff --git a/app/components/ReleaseLinkOld/ReleaseLinkUpdate.tsx b/app/components/ReleaseLinkOld/ReleaseLinkUpdate.tsx
deleted file mode 100644
index 4467f96..0000000
--- a/app/components/ReleaseLinkOld/ReleaseLinkUpdate.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import Link from "next/link";
-import { PosterWithStuff } from "../ReleasePoster/PosterWithStuff";
-
-export const ReleaseLink = (props: {
-  image: string;
-  title_ru: string;
-  title_original: string;
-  genres?: string;
-  grade?: number;
-  id: number;
-  settings?: {
-    showGenres?: boolean;
-  };
-  profile_list_status?: number;
-  status?: {
-    name: string;
-  };
-  status_id?: number;
-}) => {
-  return (
-    <Link href={`/release/${props.id}`}>
-      <PosterWithStuff {...props} />
-    </Link>
-  );
-};

From ba5c149779678ff3907be88e9b7f9b3632de48fd Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 26 Mar 2025 01:57:20 +0500
Subject: [PATCH 10/12] refactor: Profile release ratings

---
 .../Profile/Profile.ReleaseRatings.tsx        | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/app/components/Profile/Profile.ReleaseRatings.tsx b/app/components/Profile/Profile.ReleaseRatings.tsx
index 6c6f978..75af80d 100644
--- a/app/components/Profile/Profile.ReleaseRatings.tsx
+++ b/app/components/Profile/Profile.ReleaseRatings.tsx
@@ -17,6 +17,7 @@ import { useCallback, useEffect, useState } from "react";
 import { ENDPOINTS } from "#/api/config";
 import useSWRInfinite from "swr/infinite";
 import { Spinner } from "../Spinner/Spinner";
+import { Poster } from "../ReleasePoster/Poster";
 
 const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
   active: {
@@ -33,6 +34,9 @@ const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
 };
 
 const CarouselTheme = {
+  root: {
+    base: "relative h-full w-full max-w-[700px]",
+  },
   indicators: CarouselIndicatorsTheme,
   control: CarouselControlsTheme,
 };
@@ -47,19 +51,15 @@ export const ProfileReleaseRatings = (props: any) => {
           Посмотреть все
         </Button>
       </div>
-      <div className="max-w-[700px] min-h-[200px]">
+      <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">
-                  <Image
-                    src={release.image}
-                    width={100}
-                    height={125}
-                    alt=""
-                    className="object-cover border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800 w-[100px] h-[125px]"
-                  />
+                  <div className="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">
@@ -155,7 +155,7 @@ const ProfileReleaseRatingsModal = (props: {
         ref={modalRef}
       >
         {isLoading && <Spinner />}
-        {content && content.length > 0 ? (
+        {content && content.length > 0 ?
           content.map((release) => {
             return (
               <Link
@@ -163,13 +163,9 @@ const ProfileReleaseRatingsModal = (props: {
                 key={`vote-modal-${release.id}`}
               >
                 <div className="flex gap-4 xl:mx-20">
-                  <Image
-                    src={release.image}
-                    width={100}
-                    height={125}
-                    alt=""
-                    className="object-cover border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800 w-[100px] h-[125px]"
-                  />
+                  <div className="flex-shrink-0 max-w-32">
+                    <Poster image={release.image} />
+                  </div>
                   <div className="flex flex-col gap-1 py-2">
                     <h2 className="text-lg">{release.title_ru}</h2>
                     <div className="flex items-center gap-1">
@@ -200,9 +196,7 @@ const ProfileReleaseRatingsModal = (props: {
               </Link>
             );
           })
-        ) : (
-          <h1>Оценок нет</h1>
-        )}
+        : <h1>Оценок нет</h1>}
       </div>
     </Modal>
   );

From ac2425ba551ae3a010b42ca86b21b13b2bd67f9b Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 26 Mar 2025 15:34:58 +0500
Subject: [PATCH 11/12] refactor: licensed platform location

---
 .../ReleaseInfo/ReleaseInfo.Basics.tsx           | 16 ++++++++++++----
 .../ReleaseInfo.LicensedPlatforms.tsx            |  8 ++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
index 1bf9448..63a576c 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
@@ -16,9 +16,18 @@ export const ReleaseInfoBasics = (props: {
   return (
     <Card className="h-full row-span-2">
       <div className="flex flex-col w-full h-full gap-4 lg:grid lg:grid-cols-[1fr_2fr] items-center lg:items-start justify-center lg:justify-start">
-        <div className="relative flex items-center justify-center w-full overflow-hidden rounded-lg">
-          <Poster image={props.image} className="z-10 sm:scale-95 lg:scale-100" />
-          <Poster image={props.image} className="absolute top-0 left-0 w-full scale-125 opacity-75 blur-xl brightness-75" />
+        <div className="flex flex-col gap-2">
+          <div className="relative flex items-center justify-center w-full overflow-hidden rounded-lg">
+            <Poster
+              image={props.image}
+              className="z-10 sm:scale-95 lg:scale-100"
+            />
+            <Poster
+              image={props.image}
+              className="absolute top-0 left-0 w-full scale-125 opacity-75 blur-xl brightness-75"
+            />
+          </div>
+          <ReleaseInfoStreaming release_id={props.release_id} />
         </div>
         <div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
           <div className="flex flex-col gap-1">
@@ -52,7 +61,6 @@ export const ReleaseInfoBasics = (props: {
           >
             {isFullDescription ? "Скрыть" : "Показать полностью"}
           </Button>
-          <ReleaseInfoStreaming release_id={props.release_id} />
         </div>
       </div>
     </Card>
diff --git a/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx b/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx
index 6a1c72b..25f4d24 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx
@@ -23,17 +23,17 @@ export const ReleaseInfoStreaming = (props: { release_id: number }) => {
       : !(data.content.length > 0) ?
         ""
       : <div>
-          <p className="mt-4 mb-1 text-lg">Официальные источники: </p>
-          <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
+          <div className="grid grid-flow-row-dense grid-cols-1 gap-1 2xl:grid-cols-2">
             {data.content.map((item: any) => {
               return (
                 <a
                   href={item.url}
+                  target="_blank"
                   key={`platform_${item.id}`}
-                  className="flex items-center gap-2 px-2 py-1 transition-colors bg-gray-100 rounded-lg hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 "
+                  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" />
-                  <p className="text-lg">{item.name}</p>
+                  <p className="text-sm line-clamp-2">{item.name}</p>
                 </a>
               );
             })}

From 07c93338cb733074cf2cd25c139fe18603b2e637 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 26 Mar 2025 15:45:25 +0500
Subject: [PATCH 12/12] fix: poster aspect ration in release carousel

---
 app/components/ReleaseCourusel/ReleaseCourusel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.tsx b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
index 69bd9ee..503c814 100644
--- a/app/components/ReleaseCourusel/ReleaseCourusel.tsx
+++ b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
@@ -52,7 +52,7 @@ export const ReleaseCourusel = (props: {
               return (
                 <SwiperSlide
                   key={release.id}
-                  className="max-w-64 md:max-w-96"
+                  className="h-full max-w-64 md:max-w-96 aspect-[384/538]"
                 >
                   <ReleaseLink {...release} />
                 </SwiperSlide>