From 339d4150b1377388dabdfe6bd6674763aa94142b Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Fri, 4 Apr 2025 05:26:08 +0500
Subject: [PATCH 1/4] feat: collection activity preview

---
 .../CollectionLink/CollectionLink.tsx         | 12 +--
 app/components/Profile/Profile.Activity.tsx   | 84 +++++++++++++++++--
 .../Profile/Profile.ActivityCollections.tsx   | 64 ++++++++++++++
 app/pages/Profile.tsx                         |  1 +
 4 files changed, 150 insertions(+), 11 deletions(-)
 create mode 100644 app/components/Profile/Profile.ActivityCollections.tsx

diff --git a/app/components/CollectionLink/CollectionLink.tsx b/app/components/CollectionLink/CollectionLink.tsx
index 4b45fe8..61371e1 100644
--- a/app/components/CollectionLink/CollectionLink.tsx
+++ b/app/components/CollectionLink/CollectionLink.tsx
@@ -49,11 +49,13 @@ export const CollectionLink = (props: any) => {
                 {props.title}
               </p>
             </div>
-            <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-              {`${props.description.slice(0, 125)}${
-                props.description.length > 125 ? "..." : ""
-              }`}
-            </p>
+            {props.description && (
+              <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
+                {`${props.description.slice(0, 125)}${
+                  props.description.length > 125 ? "..." : ""
+                }`}
+              </p>
+            )}
           </div>
         </div>
       </div>
diff --git a/app/components/Profile/Profile.Activity.tsx b/app/components/Profile/Profile.Activity.tsx
index 8768363..365a5f1 100644
--- a/app/components/Profile/Profile.Activity.tsx
+++ b/app/components/Profile/Profile.Activity.tsx
@@ -1,19 +1,91 @@
 "use client";
-import { Card } from "flowbite-react";
-import Link from "next/link";
-import { numberDeclension } from "#/api/utils";
+import { Button, ButtonGroup, Card } from "flowbite-react";
+// import Link from "next/link";
+// import { numberDeclension } from "#/api/utils";
+import { ProfileActivityCollections } from "./Profile.ActivityCollections";
+import { useEffect, useState } from "react";
+import { CollectionCourusel } from "../CollectionCourusel/CollectionCourusel";
 
 export function ProfileActivity(props: {
   profile_id: number;
   commentCount: number;
   videoCount: number;
   collectionCount: number;
+  collectionPreview: any;
   friendsCount: number;
 }) {
+  const [tab, setTab] = useState<
+    "collections" | "comments" | "friends" | "videos"
+  >("collections");
+
+  const [collections, setCollections] = useState<Record<number, any>>({});
+
+  function _setCollection(array: any[]) {
+    if (array && array.length == 0) {
+      return;
+    }
+    let _coll = array.filter((col) => {
+      if (typeof col == "number") {
+        return false;
+      }
+      return true;
+    });
+    _coll.map((col) => {
+      setCollections((prev) => {
+        return {
+          ...prev,
+          [col.id]: col,
+        };
+      });
+
+      if (
+        col.creator.collections_preview &&
+        col.creator.collections_preview.length > 0
+      ) {
+        _setCollection(col.creator.collections_preview || []);
+      }
+    });
+  }
+
+  useEffect(() => {
+    _setCollection(props.collectionPreview || []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.collectionPreview]);
+
   return (
-    <Card className="h-fit">
+    <Card className="overflow-hidden h-fit">
       <h1 className="text-2xl font-bold">Активность</h1>
-      <div className="flex items-center gap-4 text-lg">
+      <ButtonGroup>
+        <Button
+          color={tab == "collections" ? "blue" : "light"}
+          onClick={() => setTab("collections")}
+        >
+          Коллекции | {props.collectionCount}
+        </Button>
+        <Button
+          color={tab == "comments" ? "blue" : "light"}
+          onClick={() => setTab("comments")}
+        >
+          Комментарии
+        </Button>
+        <Button
+          color={tab == "friends" ? "blue" : "light"}
+          onClick={() => setTab("friends")}
+        >
+          Друзья
+        </Button>
+      </ButtonGroup>
+
+      {tab == "collections" && (
+        <ProfileActivityCollections
+          content={Object.values(collections) || []}
+          profile_id={props.profile_id}
+        />
+      )}
+      {tab == "comments" && <>comments</>}
+      {tab == "friends" && <>friends</>}
+
+      {/* <div className="flex items-center gap-4 text-lg">
         <div>
           <p>
             {props.commentCount}{" "}
@@ -43,7 +115,7 @@ export function ProfileActivity(props: {
             {numberDeclension(props.commentCount, "друзей", "друга", "друзей")}
           </p>
         </div>
-      </div>
+      </div> */}
     </Card>
   );
 }
diff --git a/app/components/Profile/Profile.ActivityCollections.tsx b/app/components/Profile/Profile.ActivityCollections.tsx
new file mode 100644
index 0000000..5224144
--- /dev/null
+++ b/app/components/Profile/Profile.ActivityCollections.tsx
@@ -0,0 +1,64 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/mousewheel";
+import "swiper/css/scrollbar";
+import { Navigation, Mousewheel, Scrollbar } from "swiper/modules";
+import { CollectionLink } from "../CollectionLink/CollectionLink";
+import Link from "next/link";
+
+export const ProfileActivityCollections = (props: {
+  content: any;
+  profile_id: number;
+}) => {
+  return (
+    <div className="max-w-full">
+      <Swiper
+        modules={[Navigation, Mousewheel, Scrollbar]}
+        spaceBetween={8}
+        slidesPerView={"auto"}
+        direction={"horizontal"}
+        mousewheel={{
+          enabled: true,
+          sensitivity: 4,
+        }}
+        scrollbar={{
+          enabled: true,
+          draggable: true,
+        }}
+        allowTouchMove={true}
+        style={
+          {
+            "--swiper-scrollbar-bottom": "0",
+          } as React.CSSProperties
+        }
+      >
+        {props.content &&
+          props.content.length > 0 &&
+          props.content.map((collection) => {
+            console.log(collection);
+            return (
+              <SwiperSlide
+                key={`col-prev-${collection.id}`}
+                style={{ width: "fit-content" }}
+              >
+                <Link href={`/collection/${collection.id}`}>
+                  <div className="w-[400px] xl:w-[500px] aspect-video">
+                    <CollectionLink {...collection} />
+                  </div>
+                </Link>
+              </SwiperSlide>
+            );
+          })}
+        <SwiperSlide style={{ width: "fit-content" }}>
+          <Link href={`/profile/${props.profile_id}/collections`}>
+            <div className="w-[400px] xl:w-[500px] aspect-video flex flex-col items-center justify-center w-full gap-2 text-black transition-colors bg-gray-100 border hover:bg-gray-200 border-gray-50 hover:border-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-500 aspect-video group dark:bg-gray-600 dark:text-white">
+              <span className="w-8 h-8 iconify mdi--arrow-right dark:fill-white"></span>
+              <p>Все коллекции</p>
+            </div>
+          </Link>
+        </SwiperSlide>
+      </Swiper>
+    </div>
+  );
+};
diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx
index 77ce5f1..eca09e0 100644
--- a/app/pages/Profile.tsx
+++ b/app/pages/Profile.tsx
@@ -131,6 +131,7 @@ export const ProfilePage = (props: any) => {
               commentCount={user.comment_count}
               videoCount={user.video_count}
               collectionCount={user.collection_count}
+              collectionPreview={user.collections_preview || []}
               friendsCount={user.friend_count}
             />
           )}

From 2fce051a54bfb2ecdf18f847335cb59705651999 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Fri, 4 Apr 2025 05:29:36 +0500
Subject: [PATCH 2/4] feat: add counts to activity

---
 app/components/Profile/Profile.Activity.tsx | 43 +++++----------------
 1 file changed, 9 insertions(+), 34 deletions(-)

diff --git a/app/components/Profile/Profile.Activity.tsx b/app/components/Profile/Profile.Activity.tsx
index 365a5f1..341a7c5 100644
--- a/app/components/Profile/Profile.Activity.tsx
+++ b/app/components/Profile/Profile.Activity.tsx
@@ -66,13 +66,19 @@ export function ProfileActivity(props: {
           color={tab == "comments" ? "blue" : "light"}
           onClick={() => setTab("comments")}
         >
-          Комментарии
+          Комментарии | {props.commentCount}
         </Button>
         <Button
           color={tab == "friends" ? "blue" : "light"}
           onClick={() => setTab("friends")}
         >
-          Друзья
+          Друзья | {props.friendsCount}
+        </Button>
+        <Button
+          color={tab == "videos" ? "blue" : "light"}
+          onClick={() => setTab("videos")}
+        >
+          Видео | {props.videoCount}
         </Button>
       </ButtonGroup>
 
@@ -84,38 +90,7 @@ export function ProfileActivity(props: {
       )}
       {tab == "comments" && <>comments</>}
       {tab == "friends" && <>friends</>}
-
-      {/* <div className="flex items-center gap-4 text-lg">
-        <div>
-          <p>
-            {props.commentCount}{" "}
-            {numberDeclension(
-              props.commentCount,
-              "комментарий",
-              "комментария",
-              "комментариев"
-            )}
-          </p>
-          <p className="mt-2">{props.videoCount} видео</p>
-        </div>
-        <div>
-          <Link href={`/profile/${props.profile_id}/collections`}>
-            <p className="border-b-2 border-gray-300 border-solid dark:border-gray-400 hover:border-gray-500 dark:hover:border-gray-200">
-              {props.collectionCount}{" "}
-              {numberDeclension(
-                props.commentCount,
-                "коллекция",
-                "коллекции",
-                "коллекций"
-              )}
-            </p>
-          </Link>
-          <p className="mt-2">
-            {props.friendsCount}{" "}
-            {numberDeclension(props.commentCount, "друзей", "друга", "друзей")}
-          </p>
-        </div>
-      </div> */}
+      {tab == "videos" && <>videos</>}
     </Card>
   );
 }

From 0cd74983f3650b676269374fe86f8721bbb1a5b2 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Fri, 4 Apr 2025 05:58:13 +0500
Subject: [PATCH 3/4] feat: add user friends preview

---
 app/components/Profile/Profile.Activity.tsx   |  4 +-
 .../Profile/Profile.ActivityCollections.tsx   |  1 -
 .../Profile/Profile.ActivityFriends.tsx       | 68 +++++++++++++++++++
 app/pages/Profile.tsx                         |  1 +
 4 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 app/components/Profile/Profile.ActivityFriends.tsx

diff --git a/app/components/Profile/Profile.Activity.tsx b/app/components/Profile/Profile.Activity.tsx
index 341a7c5..9438cec 100644
--- a/app/components/Profile/Profile.Activity.tsx
+++ b/app/components/Profile/Profile.Activity.tsx
@@ -5,6 +5,7 @@ import { Button, ButtonGroup, Card } from "flowbite-react";
 import { ProfileActivityCollections } from "./Profile.ActivityCollections";
 import { useEffect, useState } from "react";
 import { CollectionCourusel } from "../CollectionCourusel/CollectionCourusel";
+import { ProfileActivityFriends } from "./Profile.ActivityFriends";
 
 export function ProfileActivity(props: {
   profile_id: number;
@@ -13,6 +14,7 @@ export function ProfileActivity(props: {
   collectionCount: number;
   collectionPreview: any;
   friendsCount: number;
+  friendsPreview: any;
 }) {
   const [tab, setTab] = useState<
     "collections" | "comments" | "friends" | "videos"
@@ -89,7 +91,7 @@ export function ProfileActivity(props: {
         />
       )}
       {tab == "comments" && <>comments</>}
-      {tab == "friends" && <>friends</>}
+      {tab == "friends" && <ProfileActivityFriends content={props.friendsPreview || []} />}
       {tab == "videos" && <>videos</>}
     </Card>
   );
diff --git a/app/components/Profile/Profile.ActivityCollections.tsx b/app/components/Profile/Profile.ActivityCollections.tsx
index 5224144..882965b 100644
--- a/app/components/Profile/Profile.ActivityCollections.tsx
+++ b/app/components/Profile/Profile.ActivityCollections.tsx
@@ -36,7 +36,6 @@ export const ProfileActivityCollections = (props: {
         {props.content &&
           props.content.length > 0 &&
           props.content.map((collection) => {
-            console.log(collection);
             return (
               <SwiperSlide
                 key={`col-prev-${collection.id}`}
diff --git a/app/components/Profile/Profile.ActivityFriends.tsx b/app/components/Profile/Profile.ActivityFriends.tsx
new file mode 100644
index 0000000..50aa264
--- /dev/null
+++ b/app/components/Profile/Profile.ActivityFriends.tsx
@@ -0,0 +1,68 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/mousewheel";
+import "swiper/css/scrollbar";
+import { Navigation, Mousewheel, Scrollbar } from "swiper/modules";
+import { CollectionLink } from "../CollectionLink/CollectionLink";
+import Link from "next/link";
+import { Avatar, Button } from "flowbite-react";
+
+export const ProfileActivityFriends = (props: { content: any }) => {
+  return (
+    <div className="max-w-full">
+      <Swiper
+        modules={[Navigation, Mousewheel, Scrollbar]}
+        spaceBetween={8}
+        slidesPerView={"auto"}
+        direction={"horizontal"}
+        mousewheel={{
+          enabled: true,
+          sensitivity: 4,
+        }}
+        scrollbar={{
+          enabled: true,
+          draggable: true,
+        }}
+        allowTouchMove={true}
+        style={
+          {
+            "--swiper-scrollbar-bottom": "0",
+          } as React.CSSProperties
+        }
+      >
+        {props.content &&
+          props.content.length > 0 &&
+          props.content.map((profile) => {
+            return (
+              <SwiperSlide
+                key={`friend-prev-${profile.id}`}
+                style={{ width: "fit-content" }}
+                className="px-2 py-4"
+              >
+                <Link href={`/profile/${profile.id}`}>
+                  <div className="flex items-center gap-2">
+                    <Avatar
+                      img={profile.avatar}
+                      size="md"
+                      rounded={true}
+                      bordered={true}
+                      color={profile.is_online ? "success" : "light"}
+                      className="flex-shrink-0"
+                    />
+                    <p className="text-lg">{profile.login}</p>
+                  </div>
+                </Link>
+              </SwiperSlide>
+            );
+          })}
+        <SwiperSlide style={{ width: "fit-content" }} className="px-2 py-4">
+          <Button>
+            <p className="text-lg">Все друзья</p>
+            <span className="w-8 h-8 iconify mdi--arrow-right dark:fill-white"></span>
+          </Button>
+        </SwiperSlide>
+      </Swiper>
+    </div>
+  );
+};
diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx
index eca09e0..5721be6 100644
--- a/app/pages/Profile.tsx
+++ b/app/pages/Profile.tsx
@@ -133,6 +133,7 @@ export const ProfilePage = (props: any) => {
               collectionCount={user.collection_count}
               collectionPreview={user.collections_preview || []}
               friendsCount={user.friend_count}
+              friendsPreview={user.friends_preview || []}
             />
           )}
           {!user.is_stats_hidden && (

From 0730b7c7d453ad86743cc76e3ec1b09c32081d39 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Fri, 4 Apr 2025 06:04:23 +0500
Subject: [PATCH 4/4] add empty states

---
 .../Profile/Profile.ActivityCollections.tsx   | 19 +++++++++++--------
 .../Profile/Profile.ActivityFriends.tsx       | 14 ++++++++------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/app/components/Profile/Profile.ActivityCollections.tsx b/app/components/Profile/Profile.ActivityCollections.tsx
index 882965b..42e0fe7 100644
--- a/app/components/Profile/Profile.ActivityCollections.tsx
+++ b/app/components/Profile/Profile.ActivityCollections.tsx
@@ -49,14 +49,17 @@ export const ProfileActivityCollections = (props: {
               </SwiperSlide>
             );
           })}
-        <SwiperSlide style={{ width: "fit-content" }}>
-          <Link href={`/profile/${props.profile_id}/collections`}>
-            <div className="w-[400px] xl:w-[500px] aspect-video flex flex-col items-center justify-center w-full gap-2 text-black transition-colors bg-gray-100 border hover:bg-gray-200 border-gray-50 hover:border-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-500 aspect-video group dark:bg-gray-600 dark:text-white">
-              <span className="w-8 h-8 iconify mdi--arrow-right dark:fill-white"></span>
-              <p>Все коллекции</p>
-            </div>
-          </Link>
-        </SwiperSlide>
+
+        {props.content && props.content.length > 0 ?
+          <SwiperSlide style={{ width: "fit-content" }}>
+            <Link href={`/profile/${props.profile_id}/collections`}>
+              <div className="w-[400px] xl:w-[500px] aspect-video flex flex-col items-center justify-center w-full gap-2 text-black transition-colors bg-gray-100 border hover:bg-gray-200 border-gray-50 hover:border-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-500 aspect-video group dark:bg-gray-600 dark:text-white">
+                <span className="w-8 h-8 iconify mdi--arrow-right dark:fill-white"></span>
+                <p>Все коллекции</p>
+              </div>
+            </Link>
+          </SwiperSlide>
+        : <p className="text-lg">У пользователя нет коллекций</p>}
       </Swiper>
     </div>
   );
diff --git a/app/components/Profile/Profile.ActivityFriends.tsx b/app/components/Profile/Profile.ActivityFriends.tsx
index 50aa264..78e2ac2 100644
--- a/app/components/Profile/Profile.ActivityFriends.tsx
+++ b/app/components/Profile/Profile.ActivityFriends.tsx
@@ -56,12 +56,14 @@ export const ProfileActivityFriends = (props: { content: any }) => {
               </SwiperSlide>
             );
           })}
-        <SwiperSlide style={{ width: "fit-content" }} className="px-2 py-4">
-          <Button>
-            <p className="text-lg">Все друзья</p>
-            <span className="w-8 h-8 iconify mdi--arrow-right dark:fill-white"></span>
-          </Button>
-        </SwiperSlide>
+        {props.content && props.content.length > 0 ?
+          <SwiperSlide style={{ width: "fit-content" }} className="px-2 py-4">
+            <Button>
+              <p className="text-lg">Все друзья</p>
+              <span className="w-8 h-8 iconify mdi--arrow-right dark:fill-white"></span>
+            </Button>
+          </SwiperSlide>
+        : <p className="text-lg">У пользователя нет друзей</p>}
       </Swiper>
     </div>
   );