Group discussion ux improvements

web/components/groups/discussion.tsx

@@ -33,6 +33,7 @@ export function Discussion(props: {
   const [scrollToMessageRef, setScrollToMessageRef] =
     useState<HTMLDivElement | null>(null)
   const [replyToUsername, setReplyToUsername] = useState('')
+  const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
   const router = useRouter()
 
   useEffect(() => {
@@ -40,8 +41,9 @@ export function Discussion(props: {
   }, [scrollToMessageRef])
 
   useEffect(() => {
-    scrollToBottomRef?.scrollIntoView()
+    if (!isSubmitting)
-  }, [isSubmitting, scrollToBottomRef])
+      scrollToBottomRef?.scrollTo({ top: scrollToBottomRef?.scrollHeight || 0 })
+  }, [scrollToBottomRef, isSubmitting])
 
   useEffect(() => {
     const elementInUrl = router.asPath.split('#')[1]
@@ -65,6 +67,7 @@ export function Discussion(props: {
     setMessageText('')
     setIsSubmitting(false)
     setReplyToUsername('')
+    inputRef?.focus()
   }
 
   return (
@@ -73,8 +76,9 @@ export function Discussion(props: {
         className={
           'max-h-[65vh] w-full space-y-2 overflow-x-hidden overflow-y-scroll'
         }
+        ref={setScrollToBottomRef}
       >
-        {messages.map((message, i) => (
+        {messages.map((message) => (
           <GroupMessage
             user={user}
             key={message.id}
@@ -85,8 +89,6 @@ export function Discussion(props: {
             setRef={
               scrollToMessageId === message.id
                 ? setScrollToMessageRef
-                : i === messages.length - 1
-                ? setScrollToBottomRef
                 : undefined
             }
           />
@@ -116,6 +118,7 @@ export function Discussion(props: {
               submitComment={submitMessage}
               isSubmitting={isSubmitting}
               enterToSubmit={true}
+              setRef={setInputRef}
             />
           </div>
         </div>
@@ -128,58 +131,62 @@ const GroupMessage = memo(function GroupMessage_(props: {
   user: User | null | undefined
   comment: Comment
   group: Group
-  truncate?: boolean
-  smallAvatar?: boolean
   onReplyClick?: (comment: Comment) => void
   setRef?: (ref: HTMLDivElement) => void
   highlight?: boolean
 }) {
-  const { comment, truncate, onReplyClick, group, setRef, highlight, user } =
+  const { comment, onReplyClick, group, setRef, highlight, user } = props
-    props
   const { text, userUsername, userName, userAvatarUrl, createdTime } = comment
+  const isCreatorsComment = user && comment.userId === user.id
   return (
-    <Row
+    <Col
       ref={setRef}
       className={clsx(
-        comment.userId === user?.id ? 'mr-2 self-end' : ' ml-2',
+        isCreatorsComment ? 'mr-2 self-end' : ' ml-2',
-        'w-fit space-x-1.5 rounded-md bg-white p-2 px-4 transition-all duration-1000 sm:space-x-3',
+        'w-fit max-w-md gap-1 space-x-3 rounded-md bg-white p-2 p-2 px-4 text-sm text-gray-500 transition-all duration-1000',
         highlight ? `-m-1 bg-indigo-500/[0.2] p-2` : ''
       )}
     >
+      <Row className={'items-center'}>
+        {!isCreatorsComment && (
+          <Col>
             <Avatar
-        className={'ml-1'}
+              className={'mx-2 ml-0'}
               size={'sm'}
               username={userUsername}
               avatarUrl={userAvatarUrl}
             />
-      <div className="w-full">
+          </Col>
-        <div className="mt-0.5 pl-0.5 text-sm text-gray-500">
+        )}
-          <UserLink
+        {!isCreatorsComment ? (
-            className="text-gray-500"
+          <UserLink username={userUsername} name={userName} />
-            username={userUsername}
+        ) : (
-            name={userName}
+          <span>{'You'}</span>
-          />{' '}
+        )}
         <CopyLinkDateTimeComponent
           prefix={'group'}
           slug={group.slug}
           createdTime={createdTime}
           elementId={comment.id}
         />
-        </div>
+      </Row>
+      <Row className={'text-black'}>
         <TruncatedComment
           comment={text}
           moreHref={groupPath(group.slug)}
-          shouldTruncate={truncate}
+          shouldTruncate={false}
         />
-        {onReplyClick && (
+      </Row>
+      {!isCreatorsComment && onReplyClick && (
         <button
-            className={'text-xs font-bold text-gray-500 hover:underline'}
+          className={
+            'self-start py-1 text-xs font-bold text-gray-500 hover:underline'
+          }
           onClick={() => onReplyClick(comment)}
         >
           Reply
         </button>
       )}
-      </div>
+    </Col>
-    </Row>
   )
 })