Display acct as an inline block

Soapbox does not seem to include mentions in the status text anymore.
I wanted to add a "Replying to" option, but I have no clue how replies
work.

public/style.css

@@ -262,10 +262,15 @@ span.applink {
   margin-left: 2px;
 }
 
+.display-name {
+  margin-right: 4px;
+}
+
 .acct {
   font-size: 97%;
   font-weight: normal;
   color: #a0a0a0;
+  display: inline-block;
 }
 
 .acct-instance-icon {
@@ -283,6 +288,21 @@ span.applink {
   color: #ccc;
 }
 
+.status-mentions {
+  font-size: 14px;
+  color: #a0a0a0;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.status-mentions .mention {
+  margin: 0 2px;
+}
+
+.status-mentions .mention:first-of-type {
+  margin-left: 4px;
+}
+
 .status-text {
   margin-left: 60px;
   color: #efefef;

src/View/Common.elm

@@ -3,6 +3,7 @@ module View.Common
         ( accountAcctView
         , accountAvatar
         , accountAvatarLink
+        , accountDisplayName
         , accountLink
         , accountLinkSmall
         , accountLinkLarge
@@ -56,7 +57,7 @@ accountLink external account =
             [ href account.url
             , href <| "#account/" ++ account.id
             ]
-            [ text <| accountDisplayName <| account
+            [ span [ class "display-name" ] [ text <| accountDisplayName <| account ]
             , accountAcctView False account
             ]
 
@@ -74,11 +75,7 @@ accountLinkSmall external account =
             [ href account.url
             , accountHref
             ]
-            [ text <|
-                if account.display_name == "" then
-                    account.username
-                else
-                    account.display_name
+            [ text <| accountDisplayName <| account
             ]
 
 
@@ -94,11 +91,7 @@ accountLinkLarge external account =
         a
             [ href <| "#account/" ++ account.id
             ]
-            [ text <|
-                if account.display_name == "" then
-                    account.username
-                else
-                    account.display_name
+            [ text <| accountDisplayName <| account
             , br [] []
             , accountAcctView True account
             ]
@@ -117,7 +110,7 @@ instanceIconsView url =
 accountAcctView : Bool -> Account -> Html Msg
 accountAcctView showIcons account =
     let
-        acctText = text <| " @" ++ account.acct
+        acctText = text <| "@" ++ account.acct
         icons =
             if showIcons then
                 instanceIconsView <| account.url

src/View/Status.elm

@@ -207,12 +207,35 @@ statusActionsView status currentUser showApp =
             ]
 
 
+mentionView : Mention -> Html Msg
+mentionView mention =
+    a
+        [ href mention.url
+        , class "mention" ]
+        [ text <| "@" ++ mention.username
+        ]
+
+
+mentionsView : List Mention -> Html Msg
+mentionsView mentions =
+    let
+        mentionLinks =
+            List.map mentionView mentions
+    in
+        if (List.isEmpty mentions) then
+            text ""
+        else
+            div [ class "status-mentions" ]
+                ( List.append [ text "Mentioning" ] mentionLinks )
+
+
 statusContentView : String -> Status -> Html Msg
 statusContentView context status =
     case status.spoiler_text of
         "" ->
             div [ class "status-text" ]
-                [ div [] <| formatContent status.content status.mentions
+                [ mentionsView status.mentions
+                , div [] <| formatContent status.content status.mentions
                 , pollView status
                 , attachmentListView context status
                 ]
@@ -229,7 +252,8 @@ statusContentView context status =
                     , input [ onClickWithStop NoOp, type_ "checkbox", id statusId, class "spoiler-toggler" ] []
                     , label [ onClickWithStop NoOp, for statusId ] [ text "Reveal content" ]
                     , div [ class "spoiled-content" ]
-                        [ div [] <| formatContent status.content status.mentions
+                        [ mentionsView status.mentions
+                        , div [] <| formatContent status.content status.mentions
                         , pollView status
                         , attachmentListView context status
                         ]
@@ -304,7 +328,7 @@ statusView context ({ account, content, media_attachments, reblog, mentions, pin
                     , Common.accountAvatarLink False account
                     , div [ class "username" ]
                         [ a accountLinkAttributes
-                            [ text (if account.display_name=="" then account.username else account.display_name)
+                            [ span [ class "display-name" ] [ text <| Common.accountDisplayName <| account ]
                             , Common.accountAcctView True account
                             ]
                         ]