From 547cd635bf2a8449ba9e6a3dfd3e2a5edb11cd9d Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 26 Jun 2019 21:06:42 +0200
Subject: [PATCH] Display unavailable tweets

---
 public/style.css     | 26 +++++++++++++++++++-------
 src/types.nim        |  1 +
 src/views/tweet.nimf |  6 ++++++
 src/views/user.nimf  |  8 ++++----
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/public/style.css b/public/style.css
index 90e5641..c374adf 100644
--- a/public/style.css
+++ b/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;
diff --git a/src/types.nim b/src/types.nim
index 24086fe..e0fe53a 100644
--- a/src/types.nim
+++ b/src/types.nim
@@ -73,6 +73,7 @@ type
     gif*: Option[Gif]
     video*: Option[Video]
     photos*: seq[string]
+    available*: bool
 
   Tweets* = seq[Tweet]
 
diff --git a/src/views/tweet.nimf b/src/views/tweet.nimf
index a060bea..d14927f 100644
--- a/src/views/tweet.nimf
+++ b/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
diff --git a/src/views/user.nimf b/src/views/user.nimf
index fec0b80..feee12b 100644
--- a/src/views/user.nimf
+++ b/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