Improve public account cards (#6559)

- Add follow/unfollow/remote follow buttons
- Format the bio properly
- Always show username@domain, even for local accounts

app/controllers/follower_accounts_controller.rb

@@ -7,7 +7,9 @@ class FollowerAccountsController < ApplicationController
     @follows = Follow.where(target_account: @account).recent.page(params[:page]).per(FOLLOW_PER_PAGE).preload(:account)
 
     respond_to do |format|
-      format.html
+      format.html do
+        @relationships = AccountRelationshipsPresenter.new(@follows.map(&:account_id), current_user.account_id) if user_signed_in?
+      end
 
       format.json do
         render json: collection_presenter,

app/controllers/following_accounts_controller.rb

@@ -7,7 +7,9 @@ class FollowingAccountsController < ApplicationController
     @follows = Follow.where(account: @account).recent.page(params[:page]).per(FOLLOW_PER_PAGE).preload(:target_account)
 
     respond_to do |format|
-      format.html
+      format.html do
+        @relationships = AccountRelationshipsPresenter.new(@follows.map(&:target_account_id), current_user.account_id) if user_signed_in?
+      end
 
       format.json do
         render json: collection_presenter,

app/javascript/styles/mastodon/accounts.scss

@@ -97,32 +97,6 @@
     }
   }
 
-  .controls {
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    z-index: 2;
-
-    .icon-button {
-      color: rgba($white, 0.8);
-      text-decoration: none;
-      font-size: 13px;
-      line-height: 13px;
-      font-weight: 500;
-
-      .fa {
-        font-weight: 400;
-        margin-right: 5px;
-      }
-
-      &:hover,
-      &:active,
-      &:focus {
-        color: $white;
-      }
-    }
-  }
-
   .roles {
     margin-bottom: 30px;
     padding: 0 15px;
@@ -226,6 +200,40 @@
   }
 }
 
+.card,
+.account-grid-card {
+  .controls {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    z-index: 2;
+
+    .icon-button {
+      color: rgba($white, 0.8);
+      text-decoration: none;
+      font-size: 13px;
+      line-height: 13px;
+      font-weight: 500;
+
+      .fa {
+        font-weight: 400;
+        margin-right: 5px;
+      }
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $white;
+      }
+    }
+  }
+}
+
+.account-grid-card .controls {
+  left: auto;
+  right: 15px;
+}
+
 .pagination {
   padding: 30px 0;
   text-align: center;
@@ -411,13 +419,14 @@
       font-weight: 400;
     }
 
-    .note {
+    .account__header__content {
       padding: 10px 15px;
       padding-top: 15px;
-      box-sizing: border-box;
       color: lighten($ui-base-color, 26%);
       word-wrap: break-word;
-      min-height: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 5.5em;
     }
   }
 }

app/views/accounts/_follow_button.html.haml

@@ -0,0 +1,23 @@
+- relationships ||= nil
+
+- unless account.memorial? || account.moved?
+  - if user_signed_in?
+    - requested = relationships ? relationships.requested[account.id].present? : current_account.requested?(account)
+    - following = relationships ? relationships.following[account.id].present? : current_account.following?(account)
+
+  - if user_signed_in? && current_account.id != account.id && !requested
+    .controls
+      - if following
+        = link_to account_unfollow_path(account), data: { method: :post }, class: 'icon-button' do
+          = fa_icon 'user-times'
+          = t('accounts.unfollow')
+      - else
+        = link_to account_follow_path(account), data: { method: :post }, class: 'icon-button' do
+          = fa_icon 'user-plus'
+          = t('accounts.follow')
+  - elsif !user_signed_in?
+    .controls
+      .remote-follow
+        = link_to account_remote_follow_path(account), class: 'icon-button' do
+          = fa_icon 'user-plus'
+          = t('accounts.remote_follow')

app/views/accounts/_grid_card.html.haml

@@ -1,9 +1,12 @@
 .account-grid-card
   .account-grid-card__header{ style: "background-image: url(#{account.header.url(:original)})" }
+    = render 'accounts/follow_button', account: account, relationships: @relationships
   .account-grid-card__avatar
     .avatar= image_tag account.avatar.url(:original)
   .name
     = link_to TagManager.instance.url_for(account) do
       %span.display_name.emojify= display_name(account)
-      %span.username @#{account.acct}
+      %span.username
-  %p.note.emojify= truncate(strip_tags(account.note), length: 150)
+        @#{account.local? ? account.local_username_and_domain : account.acct}
+        = fa_icon('lock') if account.locked?
+  .account__header__content.p-note.emojify= Formatter.instance.simplified_format(account)

app/views/accounts/_header.html.haml

@@ -1,23 +1,6 @@
 .card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" }
   .card__illustration
-    - unless account.memorial? || account.moved?
+    = render 'accounts/follow_button', account: account
-      - if user_signed_in? && current_account.id != account.id && !current_account.requested?(account)
-        .controls
-          - if current_account.following?(account)
-            = link_to account_unfollow_path(account), data: { method: :post }, class: 'icon-button' do
-              = fa_icon 'user-times'
-              = t('accounts.unfollow')
-          - else
-            = link_to account_follow_path(account), data: { method: :post }, class: 'icon-button' do
-              = fa_icon 'user-plus'
-              = t('accounts.follow')
-      - elsif !user_signed_in?
-        .controls
-          .remote-follow
-            = link_to account_remote_follow_path(account), class: 'icon-button' do
-              = fa_icon 'user-plus'
-              = t('accounts.remote_follow')
-
     .avatar= image_tag account.avatar.url(:original), class: 'u-photo'
 
   .card__bio