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()
-  }, [isSubmitting, scrollToBottomRef])
+    if (!isSubmitting)
+      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 } =
-    props
+  const { comment, onReplyClick, group, setRef, highlight, user } = 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',
-        'w-fit space-x-1.5 rounded-md bg-white p-2 px-4 transition-all duration-1000 sm:space-x-3',
+        isCreatorsComment ? 'mr-2 self-end' : ' ml-2',
+        '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` : ''
       )}
     >
-      <Avatar
-        className={'ml-1'}
-        size={'sm'}
-        username={userUsername}
-        avatarUrl={userAvatarUrl}
-      />
-      <div className="w-full">
-        <div className="mt-0.5 pl-0.5 text-sm text-gray-500">
-          <UserLink
-            className="text-gray-500"
-            username={userUsername}
-            name={userName}
-          />{' '}
-          <CopyLinkDateTimeComponent
-            prefix={'group'}
-            slug={group.slug}
-            createdTime={createdTime}
-            elementId={comment.id}
-          />
-        </div>
+      <Row className={'items-center'}>
+        {!isCreatorsComment && (
+          <Col>
+            <Avatar
+              className={'mx-2 ml-0'}
+              size={'sm'}
+              username={userUsername}
+              avatarUrl={userAvatarUrl}
+            />
+          </Col>
+        )}
+        {!isCreatorsComment ? (
+          <UserLink username={userUsername} name={userName} />
+        ) : (
+          <span>{'You'}</span>
+        )}
+        <CopyLinkDateTimeComponent
+          prefix={'group'}
+          slug={group.slug}
+          createdTime={createdTime}
+          elementId={comment.id}
+        />
+      </Row>
+      <Row className={'text-black'}>
         <TruncatedComment
           comment={text}
           moreHref={groupPath(group.slug)}
-          shouldTruncate={truncate}
+          shouldTruncate={false}
         />
-        {onReplyClick && (
-          <button
-            className={'text-xs font-bold text-gray-500 hover:underline'}
-            onClick={() => onReplyClick(comment)}
-          >
-            Reply
-          </button>
-        )}
-      </div>
-    </Row>
+      </Row>
+      {!isCreatorsComment && onReplyClick && (
+        <button
+          className={
+            'self-start py-1 text-xs font-bold text-gray-500 hover:underline'
+          }
+          onClick={() => onReplyClick(comment)}
+        >
+          Reply
+        </button>
+      )}
+    </Col>
   )
 })