Add interrelationship icon (#15149)

* Add interrelationship icon

* Fix arrow for rtl

* Fix to predefined color

app/controllers/relationships_controller.rb

@@ -5,6 +5,7 @@ class RelationshipsController < ApplicationController
 
   before_action :authenticate_user!
   before_action :set_accounts, only: :show
+  before_action :set_relationships, only: :show
   before_action :set_body_classes
 
   helper_method :following_relationship?, :followed_by_relationship?, :mutual_relationship?
@@ -28,6 +29,10 @@ class RelationshipsController < ApplicationController
     @accounts = RelationshipFilter.new(current_account, filter_params).results.page(params[:page]).per(40)
   end
 
+  def set_relationships
+    @relationships = AccountRelationshipsPresenter.new(@accounts.pluck(:id), current_user.account_id)
+  end
+
   def form_account_batch_params
     params.require(:form_account_batch).permit(:action, account_ids: [])
   end

app/helpers/application_helper.rb

@@ -89,6 +89,16 @@ module ApplicationHelper
     end
   end
 
+  def interrelationships_icon(relationships, account_id)
+    if relationships.following[account_id] && relationships.followed_by[account_id]
+      fa_icon('exchange', title: I18n.t('relationships.mutual'), class: 'fa-fw active passive')
+    elsif relationships.following[account_id]
+      fa_icon(locale_direction == 'ltr' ? 'arrow-right' : 'arrow-left', title: I18n.t('relationships.following'), class: 'fa-fw active')
+    elsif relationships.followed_by[account_id]
+      fa_icon(locale_direction == 'ltr' ? 'arrow-left' : 'arrow-right', title: I18n.t('relationships.followers'), class: 'fa-fw passive')
+    end
+  end
+
   def custom_emoji_tag(custom_emoji, animate = true)
     if animate
       image_tag(custom_emoji.image.url, class: 'emojione', alt: ":#{custom_emoji.shortcode}:")

app/javascript/styles/mastodon/variables.scss

@@ -36,6 +36,8 @@ $dark-text-color: $ui-base-lighter-color !default;
 $secondary-text-color: $ui-secondary-color !default;
 $highlight-text-color: $ui-highlight-color !default;
 $action-button-color: $ui-base-lighter-color !default;
+$passive-text-color: $gold-star !default;
+$active-passive-text-color: $success-green !default;
 // For texts on inverted backgrounds
 $inverted-text-color: $ui-base-color !default;
 $lighter-text-color: $ui-base-lighter-color !default;

app/javascript/styles/mastodon/widgets.scss

@@ -446,6 +446,26 @@
     vertical-align: initial !important;
   }
 
+  &__interrelationships {
+    width: 21px;
+  }
+
+  .fa {
+    font-size: 16px;
+
+    &.active {
+      color: $highlight-text-color;
+    }
+
+    &.passive {
+      color: $passive-text-color;
+    }
+
+    &.active.passive {
+      color: $active-passive-text-color;
+    }
+  }
+
   @media screen and (max-width: $no-gap-breakpoint) {
     tbody td.optional {
       display: none;

app/views/relationships/_account.html.haml

@@ -5,6 +5,8 @@
     %table.accounts-table
       %tbody
         %tr
+          %td.accounts-table__interrelationships
+            = interrelationships_icon(@relationships, account.id)
           %td= account_link_to account
           %td.accounts-table__count.optional
             = number_to_human account.statuses_count, strip_insignificant_zeros: true