[offers][feat] revamp comments section

apps/portal/src/components/offers/profile/ProfileComments.tsx

@@ -1,13 +1,7 @@
 import { signIn, useSession } from 'next-auth/react';
 import { useState } from 'react';
 import { ClipboardDocumentIcon, ShareIcon } from '@heroicons/react/24/outline';
-import {
-  Button,
-  HorizontalDivider,
-  Spinner,
-  TextArea,
-  useToast,
-} from '@tih/ui';
+import { Button, Spinner, TextArea, useToast } from '@tih/ui';
 
 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import ExpandableCommentCard from '~/components/offers/profile/comments/ExpandableCommentCard';
@@ -110,8 +104,8 @@ export default function ProfileComments({
     );
   }
   return (
-    <div className="bh-white h-fit p-4 lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto">
-      <div className="bg-white lg:sticky lg:top-0">
+    <div className="bh-white h-fit lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto">
+      <div className="border-b border-slate-200 bg-white p-4 lg:sticky lg:top-0">
         <div className="flex justify-end">
           <div className="grid w-fit grid-cols-1 space-y-2 md:grid-cols-2 md:space-y-0 md:space-x-4">
             <div className="col-span-1 flex justify-end">
@@ -169,7 +163,7 @@ export default function ProfileComments({
           </div>
         </div>
 
-        <div className="mt-2 mb-6 bg-white">
+        <div className="space-y-4">
           <h2 className="text-2xl font-bold">Discussions</h2>
           {isEditable || session?.user?.name ? (
             <div>
@@ -199,11 +193,9 @@ export default function ProfileComments({
                   />
                 </div>
               </div>
-              <HorizontalDivider />
             </div>
           ) : (
             <Button
-              className="mb-5"
               display="block"
               href={loginPageHref()}
               label="Sign in to join discussion"
@@ -212,10 +204,10 @@ export default function ProfileComments({
           )}
         </div>
       </div>
-      <section className="w-full">
-        <ul className="space-y-8" role="list">
+      <section className="w-full px-4">
+        <ul className="divide-y divide-slate-200" role="list">
           {replies?.map((reply: Reply) => (
-            <li key={reply.id}>
+            <li key={reply.id} className="py-6">
               <ExpandableCommentCard
                 comment={reply}
                 profileId={profileId}

apps/portal/src/components/offers/profile/ProfileDetails.tsx

@@ -118,7 +118,7 @@ function ProfileAnalysis({
   }
 
   return (
-    <div className="p-4">
+    <div className="space-y-4 p-4">
       {!analysis ? (
         <p>No analysis available.</p>
       ) : (

apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx

@@ -1,11 +1,11 @@
 type ProfilePhotoHolderProps = Readonly<{
-  size?: 'lg' | 'sm';
+  size?: 'lg' | 'sm' | 'xs';
 }>;
 
 export default function ProfilePhotoHolder({
   size = 'lg',
 }: ProfilePhotoHolderProps) {
-  const sizeMap = { lg: '16', sm: '12' };
+  const sizeMap = { lg: '16', sm: '12', xs: '10' };
   return (
     <span
       className={`inline-block h-${sizeMap[size]} w-${sizeMap[size]} overflow-hidden rounded-full bg-slate-100`}>

apps/portal/src/components/offers/profile/comments/CommentCard.tsx

@@ -2,6 +2,8 @@ import { signIn, useSession } from 'next-auth/react';
 import { useState } from 'react';
 import { Button, Dialog, TextArea, useToast } from '@tih/ui';
 
+import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
+
 import { timeSinceNow } from '~/utils/offers/time';
 import { trpc } from '~/utils/trpc';
 
@@ -121,14 +123,18 @@ export default function CommentCard({
 
   return (
     <div className="flex space-x-3">
-      {/* <div className="flex-shrink-0">
-        <img
-          alt=""
-          className="h-10 w-10 rounded-full"
-          src={`https://images.unsplash.com/photo-${comment.imageId}?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80`}
-        />
-      </div> */}
-      <div>
+      <div className="flex-shrink-0">
+        {user?.image ? (
+          <img
+            alt={user?.name ?? user?.email ?? 'Unknown user'}
+            className="h-10 w-10 rounded-full"
+            src={user?.image}
+          />
+        ) : (
+          <ProfilePhotoHolder size="xs" />
+        )}
+      </div>
+      <div className="w-full">
         <div className="text-sm">
           <p className="font-medium text-slate-900">
             {user?.name ?? 'unknown user'}
@@ -137,35 +143,35 @@ export default function CommentCard({
         <div className="mt-1 text-sm text-slate-700">
           <p className="break-all">{message}</p>
         </div>
-        <div className="mt-2 space-x-2 text-sm">
+        <div className="mt-2 space-x-2 text-xs">
           <span className="font-medium text-slate-500">
             {timeSinceNow(createdAt)} ago
           </span>{' '}
-          <span className="font-medium text-slate-500">&middot;</span>{' '}
           {replyLength > 0 && (
             <>
+              <span className="font-medium text-slate-500">&middot;</span>{' '}
               <button
                 className="font-medium text-slate-900"
                 type="button"
                 onClick={handleExpanded}>
                 {isExpanded ? `Hide replies` : `View replies (${replyLength})`}
               </button>
-              <span className="font-medium text-slate-500">&middot;</span>{' '}
             </>
           )}
           {!disableReply && (
             <>
+              <span className="font-medium text-slate-500">&middot;</span>{' '}
               <button
                 className="font-medium text-slate-900"
                 type="button"
                 onClick={() => setIsReplying(!isReplying)}>
                 Reply
               </button>
-              <span className="font-medium text-slate-500">&middot;</span>{' '}
             </>
           )}
           {deletable && (
             <>
+              <span className="font-medium text-slate-500">&middot;</span>{' '}
               <button
                 className="font-medium text-slate-900"
                 disabled={deleteCommentMutation.isLoading}
@@ -204,7 +210,7 @@ export default function CommentCard({
           )}
         </div>
         {!disableReply && isReplying && (
-          <div className="mt-2 mr-2">
+          <div className="mt-4 mr-2">
             <form
               onSubmit={(event) => {
                 event.preventDefault();
@@ -212,8 +218,9 @@ export default function CommentCard({
                 handleReply();
               }}>
               <TextArea
+                autoFocus={true}
                 isLabelHidden={true}
-                label="Comment"
+                label="Reply to comment"
                 placeholder="Type your reply here"
                 resize="none"
                 value={currentReply}

apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx

@@ -28,20 +28,18 @@ export default function ExpandableCommentCard({
       />
       {comment.replies && comment.replies.length > 0 && isExpanded && (
         <div className="pt-4">
-          <div className="border-l-4 border-slate-200 pl-4">
-            <ul className="space-y-4" role="list">
-              {comment.replies.map((reply) => (
-                <li key={reply.id}>
-                  <CommentCard
-                    comment={reply}
-                    disableReply={true}
-                    profileId={profileId}
-                    token={token}
-                  />
-                </li>
-              ))}
-            </ul>
-          </div>
+          <ul className="space-y-4 pl-14" role="list">
+            {comment.replies.map((reply) => (
+              <li key={reply.id}>
+                <CommentCard
+                  comment={reply}
+                  disableReply={true}
+                  profileId={profileId}
+                  token={token}
+                />
+              </li>
+            ))}
+          </ul>
         </div>
       )}
     </div>