From 0606bbfa0be639451941b9be318188b0350ca546 Mon Sep 17 00:00:00 2001
From: Alexey Khaov <kvakazyambra@gmail.com>
Date: Fri, 27 Jan 2023 00:42:47 +0300
Subject: [PATCH] Comments block on the feed page

---
 src/components/Author/Card.module.scss | 16 +++++++++++++
 src/components/Author/Card.tsx         |  4 +++-
 src/components/Views/Feed.module.scss  | 32 ++++++++++++++++++++++++++
 src/components/Views/Feed.tsx          | 20 ++++++++++++++--
 4 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/src/components/Author/Card.module.scss b/src/components/Author/Card.module.scss
index f406b871..f4d974f7 100644
--- a/src/components/Author/Card.module.scss
+++ b/src/components/Author/Card.module.scss
@@ -307,3 +307,19 @@
 .isSubscribing {
   opacity: 0.5;
 }
+
+.feedMode {
+  margin-bottom: 0.6rem;
+
+  .authorName {
+    @include font-size(1.2rem);
+    margin-bottom: 0;
+  }
+
+  .circlewrap {
+    height: 1.6rem;
+    margin-right: 0.4rem;
+    min-width: 1.6rem;
+    width: 1.6rem;
+  }
+}
diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx
index a821fd4c..f8618bc8 100644
--- a/src/components/Author/Card.tsx
+++ b/src/components/Author/Card.tsx
@@ -29,6 +29,7 @@ interface AuthorCardProps {
   truncateBio?: boolean
   liteButtons?: boolean
   isComments?: boolean
+  isFeedMode?: boolean
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
@@ -83,7 +84,8 @@ export const AuthorCard = (props: AuthorCardProps) => {
       classList={{
         [styles.authorPage]: props.isAuthorPage,
         [styles.authorComments]: props.isComments,
-        [styles.authorsListItem]: props.isAuthorsList
+        [styles.authorsListItem]: props.isAuthorsList,
+        [styles.feedMode]: props.isFeedMode
       }}
     >
       <Userpic
diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss
index ba101395..3806b2e8 100644
--- a/src/components/Views/Feed.module.scss
+++ b/src/components/Views/Feed.module.scss
@@ -36,6 +36,7 @@
   h4 {
     @include font-size(2.2rem);
     font-weight: bold;
+    margin-bottom: 2.4rem;
     text-transform: lowercase;
   }
 }
@@ -50,6 +51,7 @@
   background: transparentize(#2638d9, 0.95);
   display: inline-block;
   font-weight: bold;
+  line-height: 1.2;
   margin: 0 0.5em 0.5em 0;
   padding: 0.6em 1em;
   position: relative;
@@ -96,3 +98,33 @@
     border: none;
   }
 }
+
+.comment {
+  @include font-size(1.5rem);
+  line-height: 1.4;
+  margin-bottom: 2.4rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+.commentBody {
+  margin-bottom: 1.2rem;
+  line-clamp: 3;
+  -webkit-line-clamp: 3;
+}
+
+.commentArticleTitle {
+  @include font-size(1.2rem);
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+}
+
+.commentAuthor {
+  @include font-size(1.2rem);
+}
diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx
index fda077fe..335cf8f4 100644
--- a/src/components/Views/Feed.tsx
+++ b/src/components/Views/Feed.tsx
@@ -18,6 +18,7 @@ import stylesArticle from '../../styles/Article.module.scss'
 import stylesTopic from '../Feed/CardTopic.module.scss'
 import styles from './Feed.module.scss'
 import { clsx } from 'clsx'
+import Userpic from '../Author/Userpic'
 
 // const AUTHORSHIP_REACTIONS = [
 //   ReactionKind.Accept,
@@ -132,8 +133,23 @@ export const FeedView = () => {
             <section class={styles.asideSection}>
               <h4>{t('Comments')}</h4>
               <ul class={stylesArticle.comments}>
-                <For each={topComments()}>
-                  {(comment) => <Comment comment={comment} reactions={[]} compact={true} />}
+                <For each={topComments().filter((item) => item.body)}>
+                  {(comment) => {
+                    return (
+                      <li class={styles.comment}>
+                        <div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
+                        <AuthorCard
+                          author={comment.createdBy}
+                          isFeedMode={true}
+                          compact={true}
+                          hideFollow={true}
+                        />
+                        <div class={clsx('text-truncate', styles.commentArticleTitle)}>
+                          <a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
+                        </div>
+                      </li>
+                    )
+                  }}
                 </For>
               </ul>
             </section>