style: re-work add post button in navbar. feat: add actions modal to post component

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { SignedIn, SignedOut, currentUser } from '@clerk/nextjs';
 import Link from 'next/link';
-import { BiSolidMessageSquareAdd } from 'react-icons/bi';
+import { BiPlus, BiSolidMessageSquare } from 'react-icons/bi';
 import ThemeButton from './ThemeButton';
 import UserButton from './UserButton';
 
@@ -36,12 +36,15 @@ export default async function Navbar() {
             <Link href={`/profile/${user?.id}`}>Profile</Link>
           </li>
           <li>
-            <Link
-              href='/posts/add'
-              className='text-primary-accent'
-            >
-              <BiSolidMessageSquareAdd className='w-10 h-10' />
-            </Link>
+            <div className='mx-4'>
+              <Link
+                href='/posts/add'
+                className='relative'
+              >
+                <BiSolidMessageSquare className='absolute w-10 h-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-primary-accent' />
+                <BiPlus className='absolute w-5 h-5 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white' />
+              </Link>
+            </div>
           </li>
         </SignedIn>
       </ul>

src/components/Post.tsx

@@ -1,9 +1,15 @@
 import { PostWithUserDto } from '@/app/types';
 import { Text } from '@codemirror/state';
 import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+import { BiDotsHorizontalRounded } from 'react-icons/bi';
+import { GoDotFill } from 'react-icons/go';
 import PostContent from './PostContent';
 
 export default function Post({ post }: { post: PostWithUserDto }) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const [modalOpen, setModalOpen] = useState(false);
   const username = post.user.clerkUsername ?? post.user._id;
   const createdPostDate = new Date(post._creationTime);
   const postYear = createdPostDate.getFullYear();
@@ -21,8 +27,27 @@ export default function Post({ post }: { post: PostWithUserDto }) {
 
   // TODO: Add reply and like buttons
 
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        modalOpen &&
+        modalRef.current &&
+        modalRef.current.contains(e.target as Node) === false
+      ) {
+        setModalOpen(false);
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, [modalOpen]);
+
+  function handleDeleteClick() {
+    throw new Error('Function not implemented.');
+  }
+
   return (
-    <div className='flex w-full h-full gap-4 p-8 bg-white dark:bg-secondary-gray'>
+    <div className='flex w-full gap-4 p-8 bg-white dark:bg-secondary-gray'>
       <div>
         <Image
           alt='user profile image'
@@ -32,17 +57,46 @@ export default function Post({ post }: { post: PostWithUserDto }) {
           className='rounded-full object-cover border-4 border-primary-accent'
         />
       </div>
-      <div className='flex flex-col gap-2'>
-        <div className='flex items-center gap-2'>
-          <div>{username}</div>
-          <div className='text-xs'>{`${postMonth} ${dayOfMonth}, ${postYear}`}</div>
+      <div className='flex flex-1 flex-col gap-2'>
+        <div className='flex items-center justify-between gap-2'>
+          <div className='flex items-center gap-2'>
+            <div>{username}</div>
+            <GoDotFill className='w-3 h-3' />
+            <div className='text-xs'>
+              {`${postMonth} ${dayOfMonth}, ${postYear}`}
+            </div>
+          </div>
+          <div className='relative'>
+            <button onClick={() => setModalOpen(!modalOpen)}>
+              <BiDotsHorizontalRounded />
+            </button>
+            <div
+              ref={modalRef}
+              className={`${
+                modalOpen ? '' : 'hidden'
+              } max-w-min whitespace-nowrap absolute top-5 right-0 rounded-md py-2 pl-4 pr-10 shadow-md bg-white dark:bg-primary-gray`}
+            >
+              <ul>
+                <li>
+                  <Link href={`/posts/${post._id}/edit`}>Edit post</Link>
+                </li>
+                <li className='text-red-600'>
+                  <button
+                    onClick={handleDeleteClick}
+                    type='button'
+                  >
+                    Delete post
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
         <div>
           <PostContent content={Text.of(post.content).toString()} />
         </div>
         <div></div>
       </div>
-      <div></div>
     </div>
   );
 }

src/components/UserPosts.tsx

@@ -19,7 +19,9 @@ export default function UserPosts({ user }: { user: UserDto }) {
 
   const postsWithUser = pager.results.map(post => ({ ...post, user }));
 
-  if (postsWithUser.length == 0) {
+  console.log(postsWithUser);
+
+  if (pager.isLoading === false && postsWithUser.length == 0) {
     return (
       <div className='flex flex-col items-center justify-center border-t border-gray-600 w-full h-full'>
         <div className='flex flex-col items-center gap-2'>
@@ -38,17 +40,19 @@ export default function UserPosts({ user }: { user: UserDto }) {
   }
 
   return (
-    <div className='flex flex-col items-center w-full h-full'>
-      {postsWithUser.map(post => (
-        <div
-          key={post._id}
-          className='w-full h-full border border-b-0 border-gray-600 last:border-b'
-        >
-          <Post post={post} />
-        </div>
-      ))}
+    <div className='flex flex-col items-center w-full'>
+      <div className='flex flex-col items-center w-full'>
+        {postsWithUser.map(post => (
+          <div
+            key={post._id}
+            className='w-full border border-t-0 border-gray-600 first:border-t last:rounded-b-md p-1'
+          >
+            <Post post={post} />
+          </div>
+        ))}
+      </div>
       {pager.isLoading ? (
-        <div className='flex items-center gap-2 p-5'>
+        <div className='flex w-full items-center justify-center gap-2 p-5 border-t border-gray-600'>
           <SpinningLoader className='animate-spin w-5 h-5' />
           Loading...
         </div>