Add tabs to the user profile

static/main.css

@@ -799,3 +799,7 @@ figcaption {
     color: #7765E3;
     border-bottom: 1px solid #7765E3;
 }
+
+.user-summary {
+    margin: 2em 0px;
+}

templates/users/details.html.tera

@@ -14,9 +14,9 @@
 {% block content %}
     {% include "users/header" %}
 
-    <div>
+    {% set user_link = ['/@', user.fqn] %}
-        {{ user.summary | safe }}
+    {% set followers_link = ['/@', user.fqn, 'followers'] %}
-    </div>
+    {{ macros::tabs(links=[ user_link | join(sep='/'), followers_link | join(sep='/')], titles=['Articles', 'Followers'], selected=1) }}
 
     {% if recents | length != 0 %}
         <h2>

templates/users/followers.html.tera

@@ -8,7 +8,10 @@
 {% block content %}
     {% include "users/header" %}
 
-    <h2>{{ "Followers" | _ }}</h2>
+    {% set user_link = ['/@', user.fqn] %}
+    {% set followers_link = ['/@', user.fqn, 'followers'] %}
+    {{ macros::tabs(links=[ user_link | join(sep='/'), followers_link | join(sep='/')], titles=['Articles', 'Followers'], selected=2) }}
+
     <div class="cards">
     {% for follower in followers %}
         <div class="card">

templates/users/header.html.tera

@@ -15,12 +15,11 @@
                 <span class="badge">{{ "It is you" | _ }}</span>
             {% endif %}
         </h1>
+        {% if is_self %}
+            <a href="/@/{{ user.username }}/edit" class="button inline-block">{{ "Edit your profile" | _ }}</a>
+        {% endif %}
     </div>
 
-    {% if is_self %}
-        <a href="/@/{{ user.username }}/edit" class="button inline-block">{{ "Edit your profile" | _ }}</a>
-    {% endif %}
-
     {% if is_remote %}
         <a class="inline-block button" href="{{ user.ap_url }}" target="_blank">{{ "Open on {{ instance_url }}" | _(instance_url=instance_url) }}</a>
     {% endif %}
@@ -35,6 +34,7 @@
     {% endif %}
 </div>
 
-<div>
+
-    <a href="/@/{{ user.fqn }}/followers/">{{ "{{ count }} followers" | _n(singular="One follower", count=n_followers) }}</a>
+<div class="user-summary">
+    {{ user.summary | safe }}
 </div>