Add followers/following tabs

lib/pleroma/web/router.ex

@@ -759,7 +759,8 @@ defmodule Pleroma.Web.Router do
   end
 
   scope "/", Pleroma.Web.ActivityPub do
-    pipe_through([:activitypub_client])
+    # Note: html format is supported only if static FE is enabled
+    pipe_through([:activitypub_client, :accepts_html_xml_json, :static_fe])
 
     get("/api/ap/whoami", ActivityPubController, :whoami)
     get("/users/:nickname/inbox", ActivityPubController, :read_inbox)

lib/pleroma/web/static_fe/static_fe_controller.ex

@@ -60,15 +60,22 @@ def show(%{assigns: %{username_or_id: username_or_id, tab: tab}} = conn, params)
       params = case tab do
         "posts" ->
           Map.put(params, :exclude_replies, true)
-        "with_replies" -> params
         "media" ->
           Map.put(params, :only_media, true)
+        _ -> params
       end
 
-      timeline =
-        user
-        |> ActivityPub.fetch_user_activities(_reading_user = nil, params)
-        |> Enum.map(&represent/1)
+
+      timeline = case tab do
+        tab when tab in ["posts", "with_replies", "media"] ->
+          user
+          |> ActivityPub.fetch_user_activities(_reading_user = nil, params)
+          |> Enum.map(&represent/1)
+        "following" ->
+          User.get_friends(user)
+        "followers" ->
+          User.get_followers(user)
+      end
 
       prev_page_id =
         (params["min_id"] || params["max_id"]) &&

lib/pleroma/web/templates/static_fe/static_fe/_user_card.html.eex

@@ -0,0 +1,21 @@
+<div class="user-card">
+  <div class="left-side">
+    <a href="<%= (@user.uri || @user.ap_id) %>" rel="author noopener">
+      <div class="avatar">
+        <img
+          class="u-photo" width="48" height="48"
+          src="<%= User.avatar_url(@user) |> MediaProxy.url %>"
+          title="<%= @user.nickname %>" alt="<%= @user.nickname %>"
+        />
+      </div>
+    </a>
+  </div>
+  <div class="right-side">
+    <div class="username">
+      <%= raw Formatter.emojify(@user.name, @user.emoji) %>
+    </div>
+    <a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
+      @<%= @user.nickname %>
+    </a>
+  </div>
+</div>

lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex

@@ -1,5 +1,5 @@
 <div class="panel profile">
-  <div class="user-card">
+  <div class="user-header">
     <div class="user-banner"></div>
     <div class="user-info">
       <div class="container">
@@ -81,6 +81,20 @@
         With Replies
       </button>
     </a>
+    <%= unless @user.hide_follows do %>
+    <a href="<%= (@user.uri || @user.ap_id) %>/following">
+      <button class="button-default tab <%= if @tab == "following" do %>active<% end %>">
+        Following
+      </button>
+    </a>
+    <% end %>
+    <%= unless @user.hide_followers do %>
+    <a href="<%= (@user.uri || @user.ap_id) %>/followers">
+      <button class="button-default tab <%= if @tab == "followers" do %>active<% end %>">
+        Followers
+      </button>
+    </a>
+    <% end %>
     <a href="<%= (@user.uri || @user.ap_id) %>/media">
       <button class="button-default tab <%= if @tab == "media" do %>active<% end %>">
         Media
@@ -91,9 +105,15 @@
   <%= link "Show newer", to: "?min_id=" <> @prev_page_id, class: "load-posts" %>
   <% end %>
   <div class="activity-stream">
+    <%= if @tab in ["posts", "with_replies", "media"] do %>
     <%= for activity <- @timeline do %>
     <%= render("_notice.html", Map.put(activity, :selected, false)) %>
     <% end %>
+    <% else %>
+    <%= for user <- @timeline do %>
+    <%= render("_user_card.html", %{user: user}) %>
+    <% end %>
+    <% end %>
   </div>
   <%= if @next_page_id do %>
   <%= link "Show older", to: "?max_id=" <> @next_page_id, class: "load-posts" %>

priv/static/static-fe/static-fe.css

@@ -347,7 +347,7 @@ .user-banner {
     z-index: -2;
 }
 
-.user-card {
+.user-header {
     position: relative;
     z-index: 1;
 }
@@ -507,6 +507,11 @@ .reply-to-link:hover {
     text-decoration: underline;
 }
 
+.user-card {
+    display: flex;
+    padding: 0.75em;
+}
+
 .tab-switcher {
     display: flex;
     padding-top: 5px;