chore: relationship modals

Author: VulpoTheDev

apps/web/src/app/(profile)/profile/[handle]/(user)/(overview)/panels/InformationPanel.tsx

@@ -7,7 +7,7 @@ export default function InformationPanel({ user }: { user: UserType }) {
   return (
     <Group
       title={`About ${user.displayName ? user.displayName : user.handle}`}
-      potentialActions={<Button size="small">Edit</Button>}
+      potentialActions={<Button size="small" href="/settings/profile">Edit</Button>}
       containerStyle="border-padding"
     >
       <Field

apps/web/src/components/Modals/RelationsModal.tsx

@@ -0,0 +1,78 @@
+import Image from "next/image"
+import React, { useState } from "react"
+import { cn } from "@mav/shared/utils"
+import { InputField } from "@mav/ui/components/fields"
+import type { Variant } from "@/types/characters"
+import Checkbox from "../layouts/Forms/Checkbox"
+import { Button } from "@headlessui/react"
+import { LuFolderPlus, LuXCircle, LuCheckCircle } from "react-icons/lu"
+import colors from "tailwindcss/colors"
+import Modal from "../layouts/Modal"
+import { start } from "repl"
+import { UserType } from "@/types/users"
+import { USER_DEFAULT_AVATAR } from "@/utils/constants"
+
+export default function RelationModal({
+  followers,
+  following,
+  displayRelationsModal,
+  toggleRelationsModal,
+  startingTab
+}: {
+  followers: UserType[]
+  following: UserType[]
+  displayRelationsModal: boolean
+  toggleRelationsModal: (type?: string) => void,
+  startingTab: string
+}) {
+  const [tab, setTab] = useState(startingTab)
+  return (
+    <Modal
+      state={displayRelationsModal}
+      toggler={toggleRelationsModal}
+      className="w-full md:w-[600px] h-full md:h-[500px] p-5"
+    >
+      <Modal.Body>
+        <div className="flex flex-row gap-x-4 ">
+          <span className={cn(tab == 'follower' && 'border border-b-2  border-500 text-500', ' text-lg cursor-pointer')} onClick={() => setTab("follower")}>Followers</span>
+          <span className={cn(tab == 'following' && 'border border-b-2 border-500 text-500', 'text-lg cursor-pointer')} onClick={() => setTab("following")}>Following</span>
+        </div>
+        <div className="flex flex-col gap-y-2 mt-5">
+          {tab == "follower" && (
+            <div className="flex flex-col gap-y-2">
+              {followers.map((follower, index) => (
+                <div key={index} className="flex flex-row items-center gap-x-2">
+                  <Image
+                    src={follower.avatarUrl || USER_DEFAULT_AVATAR}
+                    alt={follower.handle}
+                    width={40}
+                    height={40}
+                    className="rounded-full"
+                  />
+                  <span>{follower.displayName}</span>
+                </div>
+              ))}
+            </div>
+          )}
+          {tab == "following" && (
+            <div className="flex flex-col gap-y-2">
+              {following.map((followee, index) => (
+                <div key={index} className="flex flex-row items-center gap-x-2">
+                  <Image
+                    src={followee.avatarUrl || USER_DEFAULT_AVATAR}
+                    alt={followee.handle}
+                    width={40}
+                    height={40}
+                    className="rounded-full"
+                  />
+                  <span>{followee.displayName}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </Modal.Body>
+
+    </Modal>
+  )
+}

apps/web/src/components/layouts/Mastheads/ProfileMasthead.tsx

@@ -4,6 +4,8 @@ import Image from "next/image"
 import { Button } from "@mav/ui/components/buttons"
 import { Masthead, type MastheadTabItems } from "@mav/ui/components/layouts"
 import { LuCat, LuFileEdit, LuHeart, LuHome } from "react-icons/lu"
+import { useState } from "react"
+import RelationModal from "@/components/Modals/RelationsModal"
 
 interface ProfileMastheadProps {
   handle: string
@@ -13,6 +15,7 @@ interface ProfileMastheadProps {
   profileBio: string
   followerCount: number
   followingCount: number
+  isOwnProfile?: boolean
 }
 
 const profileTabs = [
@@ -35,6 +38,13 @@ const profileTabs = [
 ] satisfies MastheadTabItems
 
 export function ProfileMasthead(props: Partial<ProfileMastheadProps>) {
+  const [displayRelationsModal, setDisplayRelationsModal] = useState(false)
+  const toggleRelationsModal = (type?: string) => {
+    setStartingRelationTab(type || "follower")
+    setDisplayRelationsModal(!displayRelationsModal)
+  }
+
+  const [startingRelationTab, setStartingRelationTab] = useState("follower")
   return (
     <Masthead>
       <Masthead.Banner src={props.bannerUrl} />
@@ -49,27 +59,31 @@ export function ProfileMasthead(props: Partial<ProfileMastheadProps>) {
             <span className="text-4xl">
               {props.displayName || props.handle}
             </span>
-            <Button href="/settings/profile" icon={<LuFileEdit size={18} />}>
-              Edit Profile
-            </Button>
+            {props.isOwnProfile ?? (
+
+              <Button href="/settings/profile">
+                Edit Profile
+              </Button>
+            )}
           </Masthead.Layer>
           <Masthead.Layer>
             <div className="flex gap-x-4">
               <span className="text-lg">
                 {props.handle ? `@${props.handle}` : ""}
               </span>
-              <span className="text-lg">
-                {props.followerCount || "???"} followers
+              <span className="text-lg" onClick={() => toggleRelationsModal("followers")}>
+                {props.followerCount} followers
               </span>
-              <span className="text-lg">
-                {props.followingCount || "???"} following
+              <span className="text-lg" onClick={() => toggleRelationsModal("following")}>
+                {props.followingCount} following
               </span>
             </div>
           </Masthead.Layer>
           <Masthead.Layer>{props.profileBio}</Masthead.Layer>
         </Masthead.Details>
       </Masthead.Wrapper>
       <Masthead.Tabs baseURL={`/@${props.handle}/`} items={profileTabs} />
+      <RelationModal followers={[]} following={[]} displayRelationsModal={displayRelationsModal} toggleRelationsModal={toggleRelationsModal} startingTab={startingRelationTab} />
     </Masthead>
   )
 }

packages/ui/components/comments/UserComment.tsx

@@ -90,7 +90,7 @@ export function UserComment(props: React.PropsWithChildren<CommentProps>) {
             size="small"
             className="absolute right-2 top-2 rounded-full p-0 transition-none"
             variant="tritery"
-            icon={<LuMoreVertical size={14} />}
+            icon={<LuMoreVertical size={14} />}     
           />
           {/* Comment contents */}
           <div data-mav-comment-contents="" className="mt-1 font-normal">