Display usernames in notifications Mastodon-like

src/View/Common.elm

@@ -3,6 +3,7 @@ module View.Common
         ( accountAvatar
         , accountAvatarLink
         , accountLink
+        , accountLinkSmall
         , appLink
         , closeablePanelheading
         , icon
@@ -45,6 +46,27 @@ accountLink external account =
             [ text <| "@" ++ account.acct ]
 
 
+accountLinkSmall : Bool -> Account -> Html Msg
+accountLinkSmall external account =
+    let
+        accountHref =
+            if external then
+                target "_blank"
+            else
+                href <| "#account/" ++ account.id
+    in
+        a
+            [ href account.url
+            , accountHref
+            ]
+            [ text <|
+                if account.display_name == "" then
+                    account.username
+                else
+                    account.display_name
+            ]
+
+
 accountAvatarLink : Bool -> Account -> Html Msg
 accountAvatarLink external account =
     let

src/View/Notification.elm

@@ -81,7 +81,7 @@ notificationHeading accountsAndDate str iconType =
             , p [ class "status-info-text" ] <|
                 List.intersperse (text " ")
                     [ Common.icon iconType
-                    , span [] <| List.intersperse (text ", ") (List.map (Common.accountLink False) firstAccounts)
+                    , span [] <| List.intersperse (text ", ") (List.map (Common.accountLinkSmall False) firstAccounts)
                     , text finalStr
                     ]
             ]
@@ -112,7 +112,18 @@ notificationFollowView currentUser { accounts } =
             div [ class "status follow-profile" ]
                 [ Common.accountAvatarLink False account
                 , div [ class "username" ]
-                    [ Common.accountLink False account
+                    [
+                    a
+                        [ href <| "#account/" ++ account.id
+                        ]
+                        [ text <|
+                            if account.display_name == "" then
+                                account.username
+                            else
+                                account.display_name
+                        , br [] []
+                        , span [ class "acct" ] [ text <| "@" ++ account.acct ]
+                        ]
                     , span [ class "btn-sm follow-profile-date" ]
                         [ Common.icon "time", text <| Common.formatDate created_at ]
                     ]