Add padding for responses in comments, to let threads appear

Fixes #144

plume-models/src/comments.rs

@@ -69,13 +69,17 @@ impl Comment {
             .len()
     }
 
-    pub fn to_json(&self, conn: &PgConnection) -> serde_json::Value {
+    pub fn to_json(&self, conn: &PgConnection, others: &Vec<Comment>) -> serde_json::Value {
         let mut json = serde_json::to_value(self).unwrap();
         json["author"] = self.get_author(conn).to_json(conn);
         let mentions = Mention::list_for_comment(conn, self.id).into_iter()
             .map(|m| m.get_mentioned(conn).map(|u| u.get_fqn(conn)).unwrap_or(String::new()))
             .collect::<Vec<String>>();
         json["mentions"] = serde_json::to_value(mentions).unwrap();
+        json["responses"] = json!(others.into_iter()
+            .filter(|c| c.in_response_to_id.map(|id| id == self.id).unwrap_or(false))
+            .map(|c| c.to_json(conn, others))
+            .collect::<Vec<_>>());
         json
     }
 

src/routes/comments.rs

@@ -48,19 +48,20 @@ fn create(blog_name: String, slug: String, data: LenientForm<NewCommentForm>, us
         .map_err(|errors| {
             // TODO: de-duplicate this code
             let comments = Comment::list_by_post(&*conn, post.id);
+            let comms = comments.clone();
 
             Template::render("posts/details", json!({
                 "author": post.get_authors(&*conn)[0].to_json(&*conn),
                 "post": post,
                 "blog": blog,
-                "comments": comments.into_iter().map(|c| c.to_json(&*conn)).collect::<Vec<serde_json::Value>>(),
+                "comments": &comments.into_iter().map(|c| c.to_json(&*conn, &comms)).collect::<Vec<serde_json::Value>>(),
                 "n_likes": post.get_likes(&*conn).len(),
                 "has_liked": user.has_liked(&*conn, &post),
                 "n_reshares": post.get_reshares(&*conn).len(),
                 "has_reshared": user.has_reshared(&*conn, &post),
                 "account": user,
                 "date": &post.creation_date.timestamp(),
-                "previous": form.responding_to.map(|r| Comment::get(&*conn, r).expect("Error retrieving previous comment").to_json(&*conn)),
+                "previous": form.responding_to.map(|r| Comment::get(&*conn, r).expect("Error retrieving previous comment").to_json(&*conn, &vec![])),
                 "user_fqn": user.get_fqn(&*conn),
                 "errors": errors
             }))

src/routes/posts.rs

@@ -36,19 +36,24 @@ fn details_response(blog: String, slug: String, conn: DbConn, user: Option<User>
     may_fail!(user, Blog::find_by_fqn(&*conn, blog), "Couldn't find this blog", |blog| {
         may_fail!(user, Post::find_by_slug(&*conn, slug, blog.id), "Couldn't find this post", |post| {
             let comments = Comment::list_by_post(&*conn, post.id);
+            let comms = comments.clone();
 
             Template::render("posts/details", json!({
                 "author": post.get_authors(&*conn)[0].to_json(&*conn),
                 "post": post,
                 "blog": blog,
-                "comments": comments.into_iter().map(|c| c.to_json(&*conn)).collect::<Vec<serde_json::Value>>(),
+                "comments": &comments.into_iter().filter_map(|c| if c.in_response_to_id.is_none() {
+                    Some(c.to_json(&*conn, &comms))
+                } else {
+                    None
+                }).collect::<Vec<serde_json::Value>>(),
                 "n_likes": post.get_likes(&*conn).len(),
                 "has_liked": user.clone().map(|u| u.has_liked(&*conn, &post)).unwrap_or(false),
                 "n_reshares": post.get_reshares(&*conn).len(),
                 "has_reshared": user.clone().map(|u| u.has_reshared(&*conn, &post)).unwrap_or(false),
                 "account": user,
                 "date": &post.creation_date.timestamp(),
-                "previous": query.and_then(|q| q.responding_to.map(|r| Comment::get(&*conn, r).expect("Error retrieving previous comment").to_json(&*conn))),
+                "previous": query.and_then(|q| q.responding_to.map(|r| Comment::get(&*conn, r).expect("Error retrieving previous comment").to_json(&*conn, &vec![]))),
                 "user_fqn": user.map(|u| u.get_fqn(&*conn)).unwrap_or(String::new())
             }))
         })

static/main.css

@@ -281,16 +281,21 @@ main .article-meta .comments > a.button { margin-bottom: 1em; }
 main .article-meta .comments .list {
 	display: grid;
 	margin: 0;
+	padding: 0 20%;
+	background: #ECECEC;
 }
 
 /* ~ Comment ~ */
 
 .comments .list .comment {
-	background: #ECECEC;
+	padding: 2em;
-	padding: 2em 20%;
 	font-size: 1em;
 }
 
+.comments .list > .comment {
+	border: none;
+}
+
 .comments .list .comment .author {
 	display: flex;
 	flex-direction: row;

templates/macros.html.tera

@@ -45,3 +45,16 @@
         {% endif %}
     </div>
 {% endmacro %}
+{% macro comment(comm) %}
+    <div class="comment" id="comment-{{ comm.id }}">
+        <a class="author" href="{{ comm.author.ap_url }}">
+            <span class="display-name">{{ comm.author.display_name | default(value=comm.author.username) }}</span>
+            <small>@{{ comm.author.username }}</small>
+        </a>
+        <div class="text">{{ comm.content | safe }}</div>
+        <a class="button" href="?responding_to={{ comm.id }}">{{ "Respond" | _ }}</a>
+        {% for res in comm.responses %}
+            {{ self::comment(comm=res) }}
+        {% endfor %}
+    </div>
+{% endmacro %}

templates/posts/details.html.tera

@@ -1,4 +1,5 @@
 {% extends "base" %}
+{% import "macros" as macros %}
 
 {% block title %}
 {{ post.title }}
@@ -78,20 +79,7 @@
 
             <div class="list">
                 {% for comment in comments %}
-                    {% if comment.author.display_name %}
+                    {{ macros::comment(comm=comment) }}
-                        {% set comment_author_name = comment.author.display_name %}
-                    {% else %}
-                        {% set comment_author_name = comment.author.username %}
-                    {% endif %}
-
-                    <div class="comment" id="comment-{{ comment.id }}">
-                        <a class="author" href="{{ comment.author.ap_url }}">
-                            <span class="display-name">{{ comment.author.display_name }}</span>
-                            <small>@{{ comment.author.username }}</small>
-                        </a>
-                        <div class="text">{{ comment.content | safe }}</div>
-                        <a class="button" href="?responding_to={{ comment.id }}">{{ "Respond" | _ }}</a>
-                    </div>
                 {% endfor %}
             </div>
         </div>