feat: add recently watched widget

app/components/Profile/Profile.ReleaseHistory.tsx

@@ -0,0 +1,40 @@
+import { Card, Carousel, RatingStar, Rating } from "flowbite-react";
+import type {
+  FlowbiteCarouselIndicatorsTheme,
+  FlowbiteCarouselControlTheme,
+} from "flowbite-react";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
+
+const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
+  active: {
+    off: "bg-gray-300/50 hover:bg-gray-400 dark:bg-gray-400/50 dark:hover:bg-gray-200",
+    on: "bg-gray-600 dark:bg-gray-200",
+  },
+  base: "h-3 w-3 rounded-full",
+  wrapper: "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3",
+};
+
+const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
+  base: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-600/30 group-hover:bg-gray-600/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-gray-600 dark:bg-gray-400/30 dark:group-hover:bg-gray-400/60 dark:group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
+  icon: "h-5 w-5 text-gray-600 dark:text-gray-400 sm:h-6 sm:w-6",
+};
+
+const CarouselTheme = {
+  indicators: CarouselIndicatorsTheme,
+  control: CarouselControlsTheme,
+};
+
+export const ProfileReleaseHistory = (props: any) => {
+  return (
+    <Card className="h-fit">
+      <h1 className="text-2xl font-bold">Недавно просмотренные</h1>
+      <div className="max-w-[700px] min-h-[200px]">
+        <Carousel theme={CarouselTheme}>
+          {props.history.map((release) => {
+            return <ReleaseLink key={`history-${release.id}`} {...release} />;
+          })}
+        </Carousel>
+      </div>
+    </Card>
+  );
+};

app/components/Profile/Profile.ReleaseRatings.tsx

@@ -1,7 +1,11 @@
 import { Card, Carousel, RatingStar, Rating } from "flowbite-react";
-import type { FlowbiteCarouselIndicatorsTheme, FlowbiteCarouselControlTheme } from "flowbite-react";
+import type {
+  FlowbiteCarouselIndicatorsTheme,
+  FlowbiteCarouselControlTheme,
+} from "flowbite-react";
 import Image from "next/image";
 import { unixToDate } from "#/api/utils";
+import Link from "next/link";
 
 const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
   active: {
@@ -13,14 +17,14 @@ const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
 };
 
 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",
+  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"
+  icon: "h-5 w-5 text-gray-600 dark:text-gray-400 sm:h-6 sm:w-6",
-}
+};
 
 const CarouselTheme = {
-    indicators: CarouselIndicatorsTheme,
+  indicators: CarouselIndicatorsTheme,
-    control: CarouselControlsTheme
+  control: CarouselControlsTheme,
-}
+};
 
 export const ProfileReleaseRatings = (props: any) => {
   return (
@@ -30,31 +34,30 @@ export const ProfileReleaseRatings = (props: any) => {
         <Carousel theme={CarouselTheme}>
           {props.ratings.map((release) => {
             return (
-              <div
+              <Link href={`/release/${release.id}`} key={`vote-${release.id}`}>
-                className="flex gap-4 mx-20"
+                <div className="flex gap-4 xl:mx-20">
-                key={`vote-${release.id}`}
+                  <Image
-              >
+                    src={release.image}
-                <Image
+                    width={100}
-                  src={release.image}
+                    height={150}
-                  width={100}
+                    alt=""
-                  height={150}
+                    className="border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800"
-                  alt=""
+                  />
-                  className="border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800"
+                  <div className="py-4 flex flex-col gap-1">
-                />
+                    <h2 className="text-lg">{release.title_ru}</h2>
-                <div className="py-4 flex flex-col gap-1">
+                    <Rating size="md">
-                  <h2 className="text-lg">{release.title_ru}</h2>
+                      <RatingStar filled={release.my_vote >= 1} />
-                  <Rating size="md">
+                      <RatingStar filled={release.my_vote >= 2} />
-                    <RatingStar filled={release.my_vote >= 1} />
+                      <RatingStar filled={release.my_vote >= 3} />
-                    <RatingStar filled={release.my_vote >= 2} />
+                      <RatingStar filled={release.my_vote >= 4} />
-                    <RatingStar filled={release.my_vote >= 3} />
+                      <RatingStar filled={release.my_vote >= 5} />
-                    <RatingStar filled={release.my_vote >= 4} />
+                    </Rating>
-                    <RatingStar filled={release.my_vote >= 5} />
+                    <h2 className="text-md text-gray-500 dark:text-gray-400">
-                  </Rating>
+                      {unixToDate(release.voted_at, "full")}
-                  <h2 className="text-md text-gray-500 dark:text-gray-400">
+                    </h2>
-                    {unixToDate(release.voted_at, "full")}
+                  </div>
-                  </h2>
                 </div>
-              </div>
+              </Link>
             );
           })}
         </Carousel>

app/components/ReleaseLink/ReleaseLink.Poster.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { sinceUnixDate } from "#/api/utils";
 import { Chip } from "#/components/Chip/Chip";
 
 const profile_lists = {

app/pages/Profile.tsx

@@ -13,6 +13,7 @@ import { ProfileStats } from "#/components/Profile/Profile.Stats";
 import { ProfileWatchDynamic } from "#/components/Profile/Profile.WatchDynamic";
 import { ProfileActions } from "#/components/Profile/Profile.Actions";
 import { ProfileReleaseRatings } from "#/components/Profile/Profile.ReleaseRatings";
+import { ProfileReleaseHistory } from "#/components/Profile/Profile.ReleaseHistory";
 
 export const ProfilePage = (props: any) => {
   const authUser = useUserStore((state) => state);
@@ -104,7 +105,7 @@ export const ProfilePage = (props: any) => {
           isPrivacy || user.is_banned || user.is_perm_banned ? "mt-4" : ""
         }`}
       >
-        <div className="flex flex-col gap-2 w-[50%]">
+        <div className="flex flex-col gap-2 w-full xl:w-[50%]">
           <ProfileUser
             isOnline={user.is_online}
             avatar={user.avatar}
@@ -135,10 +136,17 @@ export const ProfilePage = (props: any) => {
             />
           )}
           {!user.is_stats_hidden && (
-            <ProfileReleaseRatings ratings={user.votes} />
+            <div className="hidden xl:flex flex-col gap-2">
+              {user.votes && user.votes.length > 0 && (
+                <ProfileReleaseRatings ratings={user.votes} />
+              )}
+              {user.history && user.history.length > 0 && (
+                <ProfileReleaseHistory history={user.history} />
+              )}
+            </div>
           )}
         </div>
-        <div className="flex flex-col gap-2 flex-1">
+        <div className="flex flex-col gap-2 w-full xl:flex-1 xl:w-auto ">
           <ProfileActions
             isMyProfile={isMyProfile}
             profile_id={user.id}
@@ -158,6 +166,14 @@ export const ProfilePage = (props: any) => {
                 watched_time={user.watched_time}
               />
               <ProfileWatchDynamic watchDynamic={user.watch_dynamics || []} />
+              <div className="xl:hidden flex flex-col gap-2">
+                {user.votes && user.votes.length > 0 && (
+                  <ProfileReleaseRatings ratings={user.votes} />
+                )}
+                {user.history && user.history.length > 0 && (
+                  <ProfileReleaseHistory history={user.history} />
+                )}
+              </div>
             </>
           )}
         </div>