Add non-functional follow/unfollow buttons

The buttons currently send a post request to two new routes, /follow and
/unfollow, which immediately redirect back to the referrer. They do not
modify the list of followers, but do accurately change based on whether
or not the viewed profile is currently in the list of followers.

src/nitter.nim

@@ -10,7 +10,7 @@ import types, config, prefs, formatters, redis_cache, http_pool, tokens
 import views/[general, about]
 import routes/[
   home, preferences, timeline, status, media, search, rss, list, debug,
-  unsupported, embed, resolver, router_utils]
+  unsupported, embed, resolver, router_utils, follow]
 
 const instancesUrl = "https://github.com/zedeus/nitter/wiki/Instances"
 const issuesUrl = "https://github.com/zedeus/nitter/issues"
@@ -88,6 +88,7 @@ routes:
       &"Instance has been rate limited.<br>Use {link} or try again later.", cfg)
 
   extend home, ""
+  extend follow, ""
   extend unsupported, ""
   extend preferences, ""
   extend resolver, ""

src/routes/follow.nim

@@ -0,0 +1,12 @@
+import jester
+import asyncdispatch, strutils, options, router_utils
+import ".."/[prefs, types, utils, redis_cache]
+
+export follow
+
+proc createFollowRouter*(cfg: Config) =
+  router follow:
+    post "/follow":
+      redirect(refPath())
+    post "/unfollow":
+      redirect(refPath())

src/sass/profile/card.scss

@@ -13,9 +13,12 @@
     width: 100%;
 }
 
-.profile-card-tabs-name {
+.profile-card-tabs-name-and-follow {
     @include breakable;
-    max-width: 100%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 }
 
 .profile-card-username {
@@ -34,6 +37,10 @@
     max-width: 100%;
 }
 
+.profile-card-follow-button {
+    float: none;
+}
+
 .profile-card-avatar {
     display: inline-block;
     position: relative;

src/views/profile.nim

@@ -12,7 +12,7 @@ proc renderStat(num: int; class: string; text=""): VNode =
     span(class="profile-stat-num"):
       text insertSep($num, ',')
 
-proc renderUserCard*(user: User; prefs: Prefs): VNode =
+proc renderUserCard*(user: User; prefs: Prefs; path: string): VNode =
   buildHtml(tdiv(class="profile-card")):
     tdiv(class="profile-card-info"):
       let
@@ -24,9 +24,15 @@ proc renderUserCard*(user: User; prefs: Prefs): VNode =
       a(class="profile-card-avatar", href=url, target="_blank"):
         genImg(user.getUserPic(size))
 
-      tdiv(class="profile-card-tabs-name"):
-        linkUser(user, class="profile-card-fullname")
-        linkUser(user, class="profile-card-username")
+      tdiv(class="profile-card-tabs-name-and-follow"):
+        tdiv():
+          linkUser(user, class="profile-card-fullname")
+          linkUser(user, class="profile-card-username")
+        let following = isFollowing(user.username, prefs.following)
+        if not following:
+          buttonReferer "/follow", "Follow", path, "profile-card-follow-button"
+        else:
+          buttonReferer "/unfollow", "Unfollow", path, "profile-card-follow-button"
 
     tdiv(class="profile-card-extra"):
       if user.bio.len > 0:
@@ -106,7 +112,7 @@ proc renderProfile*(profile: var Profile; prefs: Prefs; path: string): VNode =
 
     let sticky = if prefs.stickyProfile: " sticky" else: ""
     tdiv(class=(&"profile-tab{sticky}")):
-      renderUserCard(profile.user, prefs)
+      renderUserCard(profile.user, prefs, path)
       if profile.photoRail.len > 0:
         renderPhotoRail(profile)
 

src/views/renderutils.nim

@@ -94,3 +94,7 @@ proc getAvatarClass*(prefs: Prefs): string =
     "avatar"
   else:
     "avatar round"
+
+proc isFollowing*(name, following: string): bool =
+  let following = following.split(",")
+  return name in following