From 0155607ed32542794ea1d27a7171531df13e14ac Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Tue, 25 Jun 2019 12:57:19 +0200
Subject: [PATCH] Display lines between threads

---
 README.md           |  1 -
 public/style.css    | 20 +++++++++++++++++++-
 src/views/user.nimf | 15 +++++++++------
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 7d5512a..5565cfc 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,6 @@ is on implementing missing features.
 
 ## Todo (roughly in this order)
 
-- Line connecting posts in threads
 - "Show Thread" button
 - Twitter "Cards" (link previews)
 - Nitter link previews
diff --git a/public/style.css b/public/style.css
index c59cff4..90e5641 100644
--- a/public/style.css
+++ b/public/style.css
@@ -472,11 +472,29 @@ nav {
     letter-spacing: .01em;
 }
 
-.thread {
+.reply {
     background-color: #161616;
     margin-bottom: 10px;
 }
 
+.after-tweet .status-el::before, .before-tweet .status-el::before, .thread .status-el::before {
+    background: #8a3731;
+    content: '';
+    position: relative;
+    width: 3px;
+    left: 26px;
+    top: 56px;
+    margin-bottom: 37px;
+    margin-left: -3px;
+    border-radius: 2px;
+}
+
+.thread-last .status-el::before {
+    background: unset;
+    width: 0;
+    margin: 0;
+}
+
 .panel {
     margin: auto;
     font-size: 130%;
diff --git a/src/views/user.nimf b/src/views/user.nimf
index efea08a..6be21c5 100644
--- a/src/views/user.nimf
+++ b/src/views/user.nimf
@@ -113,13 +113,15 @@
       #end for
     </div>
     #end if
+    #let afterClass = if conversation.after.len > 0: "thread" else: ""
     <div class="main-tweet">
-      ${renderTweet(conversation.tweet)}
+      ${renderTweet(conversation.tweet, class=afterClass)}
     </div>
     #if conversation.after.len > 0:
     <div class="after-tweet">
-      #for tweet in conversation.after:
-      ${renderTweet(tweet)}
+      #for i, tweet in conversation.after:
+      #let class = if i == conversation.after.high: "thread-last" else: ""
+      ${renderTweet(tweet, class=class)}
       #end for
     </div>
     #end if
@@ -127,9 +129,10 @@
   #if conversation.replies.len > 0:
   <div class="replies">
     #for thread in conversation.replies:
-    <div class="thread">
-      #for tweet in thread:
-      ${renderTweet(tweet)}
+    <div class="reply thread">
+      #for i, tweet in thread:
+      #let class = if i == thread.high: "thread-last" else: ""
+      ${renderTweet(tweet, class=class)}
       #end for
     </div>
     #end for