Add tabs to the different feeds

static/main.css

@@ -780,3 +780,22 @@ figcaption {
 .avatar.padded {
     margin-right: 2rem;
 }
+
+/** Tabs **/
+
+.tabs {
+    border-bottom: 1px solid #DADADA;
+    padding: 0px;
+    margin: auto 20% 2em;
+}
+
+.tabs a {
+    display: inline-block;
+    color: #242424;
+    padding: 1em;
+}
+
+.tabs a.selected {
+    color: #7765E3;
+    border-bottom: 1px solid #7765E3;
+}

templates/instance/federated.html.tera

@@ -8,6 +8,12 @@
 {% block content %}
     <h1>{{ "All the articles of the Fediverse" | _ }}</h1>
 
+    {% if account %}
+        {{ macros::tabs(links=['/', '/feed', '/federated', '/local'], titles=['Latest articles', 'Your feed', 'Federated feed', 'Local feed'], selected=3) }}
+    {% else %}
+        {{ macros::tabs(links=['/', '/federated', '/local'], titles=['Latest articles', 'Federated feed', 'Local feed'], selected=2) }}
+    {% endif %}
+
     <div class="cards">
         {% for article in articles %}
             {{ macros::post_card(article=article) }}

templates/instance/feed.html.tera

@@ -10,6 +10,8 @@
         {{ "Your feed" | _ }}
     </h1>
 
+    {{ macros::tabs(links=['/', '/feed', '/federated', '/local'], titles=['Latest articles', 'Your feed', 'Federated feed', 'Local feed'], selected=2) }}
+
     {% if articles | length > 0 %}
         <div class="cards">
             {% for article in articles %}

templates/instance/index.html.tera

@@ -8,14 +8,19 @@
 {% block content %}
     <h1>{{ "Welcome on {{ instance_name | escape }}" | _(instance_name=instance.name) }}</h1>
 
-    <h2>{{ "Latest articles" | _ }}</h2>
+    {% if account %}
+        {{ macros::tabs(links=['/', '/feed', '/federated', '/local'], titles=['Latest articles', 'Your feed', 'Federated feed', 'Local feed'], selected=1) }}
+    {% else %}
+        {{ macros::tabs(links=['/', '/federated', '/local'], titles=['Latest articles', 'Federated feed', 'Local feed'], selected=1) }}
+    {% endif %}
+
     <div class="cards">
         {% for article in recents %}
             {{ macros::post_card(article=article) }}
         {% endfor %}
     </div>
     {{ macros::paginate(page=page, total=n_pages) }}
-    
+
     <section class="spaced">
         <div class="cards">
             <div class="presentation card">

templates/instance/local.html.tera

@@ -8,6 +8,12 @@
 {% block content %}
     <h1>{{ "Articles from {{ instance.name }}" | _(instance=instance) }}</h1>
 
+    {% if account %}
+        {{ macros::tabs(links=['/', '/feed', '/federated', '/local'], titles=['Latest articles', 'Your feed', 'Federated feed', 'Local feed'], selected=4) }}
+    {% else %}
+        {{ macros::tabs(links=['/', '/federated', '/local'], titles=['Latest articles', 'Federated feed', 'Local feed'], selected=3) }}
+    {% endif %}
+
     <div class="cards">
         {% for article in articles %}
             {{ macros::post_card(article=article) }}

templates/macros.html.tera

@@ -63,3 +63,11 @@
         {% endfor %}
     </div>
 {% endmacro %}
+{% macro tabs(links, titles, selected) %}
+    <div class="tabs">
+        {% for link in links %}
+            {% set idx = loop.index0 %}
+            <a href="{{ link }}" {% if loop.index == selected %}class="selected"{% endif %}>{{ titles[idx] | _ }}</a>
+        {% endfor %}
+    </div>
+{% endmacro %}