Display lines between threads

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

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%;

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