Display unavailable tweets

public/style.css

@@ -64,6 +64,7 @@ a:hover {
 .status-body {
     flex: 1;
     min-width: 0;
+    margin-left: 58px;
 }
 
 .media-heading {
@@ -266,10 +267,6 @@ nav {
     flex-basis: 300px;
 }
 
-.status-body {
-    margin-left: 58px;
-}
-
 .avatar {
     float: left;
     margin-top: 3px;
@@ -477,16 +474,22 @@ nav {
     margin-bottom: 10px;
 }
 
-.after-tweet .status-el::before, .before-tweet .status-el::before, .thread .status-el::before {
+.thread-line .status-el::before {
     background: #8a3731;
     content: '';
     position: relative;
     width: 3px;
+    min-width: 3px;
     left: 26px;
+    border-radius: 2px;
+    margin-left: -3px;
     top: 56px;
     margin-bottom: 37px;
-    margin-left: -3px;
-    border-radius: 2px;
+}
+
+.thread-line .unavailable::before {
+    top: 40px;
+    margin-bottom: 19px;
 }
 
 .thread-last .status-el::before {
@@ -633,6 +636,15 @@ video {
     font-size: 20px;
 }
 
+.unavailable-box {
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    border: solid 1px #404040;
+    border-radius: 10px;
+    background-color: #121212;
+}
+
 .quote {
     margin-top: 10px;
     border: solid 1px #404040;

src/types.nim

@@ -73,6 +73,7 @@ type
     gif*: Option[Gif]
     video*: Option[Video]
     photos*: seq[string]
+    available*: bool
 
   Tweets* = seq[Tweet]
 

src/views/tweet.nimf

@@ -122,6 +122,7 @@
 #if divClass.len > 0:
 <div class="${divClass}">
 #end if
+#if tweet.available:
 <div class="status-el">
   <div class="status-body">
     ${renderHeading(tweet)}
@@ -140,6 +141,11 @@
     ${renderStats(tweet)}
   </div>
 </div>
+#else:
+<div class="status-el unavailable">
+  <div class="unavailable-box">This tweet is unavailable</div>
+</div>
+#end if
 #if divClass.len > 0:
 </div>
 #end if

src/views/user.nimf

@@ -111,18 +111,18 @@
 <div class="conversation" id="tweets">
   <div class="main-thread">
     #if conversation.before.len > 0:
-    <div class="before-tweet">
+    <div class="before-tweet thread-line">
       #for tweet in conversation.before:
       ${renderTweet(tweet)}
       #end for
     </div>
     #end if
     <div class="main-tweet">
-      #let afterClass = if conversation.after.len > 0: "thread" else: ""
+      #let afterClass = if conversation.after.len > 0: "thread thread-line" else: ""
       ${renderTweet(conversation.tweet, class=afterClass)}
     </div>
     #if conversation.after.len > 0:
-    <div class="after-tweet">
+    <div class="after-tweet thread-line">
       #for i, tweet in conversation.after:
       ${renderTweet(tweet, last=(i == conversation.after.high))}
       #end for
@@ -132,7 +132,7 @@
   #if conversation.replies.len > 0:
   <div class="replies">
     #for thread in conversation.replies:
-    <div class="reply thread">
+    <div class="reply thread thread-line">
       #for i, tweet in thread:
       ${renderTweet(tweet, last=(i == thread.high))}
       #end for