Better follow notifications. (#38)

- improve the follow notification layout and displayed information of followers
- fixes an issue with them not being actually aggregated
- fixes a bug where reblog action button was highlighted when it was actually a fave

public/style.css

@@ -3,11 +3,15 @@ body {
   padding-top: 10px;
 }
 
-.status {
+.status, .follow-profile {
   min-height: 50px;
   clear: both;
 }
 
+.follow-profile .status-text {
+  opacity: .8;
+}
+
 .nsfw {
   background: #493438;
 }
@@ -23,10 +27,6 @@ body {
   line-height: 1.6em;
 }
 
-.status-info > .avatars {
-  margin-bottom: 8px;
-}
-
 .status-info > .avatars img {
   width: 24px;
   height: 24px;
@@ -34,6 +34,11 @@ body {
   border-radius: 2px;
 }
 
+.status-info-text {
+  clear: left;
+  padding-top: 6px;
+}
+
 .notification.reblog,
 .notification.favourite {
   opacity: .75;
@@ -56,8 +61,6 @@ body {
   float: left;
   width: 50px;
   border-radius: 5%;
-  margin-right: .10px;
-  margin-bottom: 10px;
   margin-top: 2px;
 }
 

src/Mastodon.elm

@@ -462,9 +462,6 @@ aggregateNotifications notifications =
                 _ ->
                     False
 
-        sameAccount n1 n2 =
-            n1.account.id == n2.account.id
-
         extractAggregate statusGroup =
             let
                 accounts =
@@ -488,7 +485,7 @@ aggregateNotifications notifications =
         [ notifications |> only "reblog" |> groupWhile sameStatus |> aggregate
         , notifications |> only "favourite" |> groupWhile sameStatus |> aggregate
         , notifications |> only "mention" |> groupWhile sameStatus |> aggregate
-        , notifications |> only "follow" |> groupWhile sameAccount |> aggregate
+        , notifications |> only "follow" |> groupWhile (\_ _ -> True) |> aggregate
         ]
             |> List.concat
             |> List.sortBy .created_at

src/View.elm

@@ -61,7 +61,7 @@ accountAvatarLink account =
         , ViewHelper.onClickWithPreventAndStop (OnLoadUserAccount account.id)
         , title <| "@" ++ account.username
         ]
-        [ img [ src account.avatar ] [] ]
+        [ img [ class "avatar", src account.avatar ] [] ]
 
 
 attachmentPreview : Maybe Bool -> Mastodon.Attachment -> Html Msg
@@ -167,8 +167,7 @@ statusView ({ account, content, media_attachments, reblog, mentions } as status)
 
             Nothing ->
                 div [ class "status" ]
-                    [ a accountLinkAttributes
-                        [ img [ class "avatar", src account.avatar ] [] ]
+                    [ accountAvatarLink account
                     , div [ class "username" ]
                         [ a accountLinkAttributes
                             [ text account.display_name
@@ -241,7 +240,7 @@ statusActionsView status =
             "btn btn-sm btn-default"
 
         ( reblogClasses, reblogEvent ) =
-            case status.favourited of
+            case status.reblogged of
                 Just True ->
                     ( baseBtnClasses ++ " reblogged", Unreblog target.id )
 
@@ -311,7 +310,7 @@ notificationHeading : List Mastodon.Account -> String -> String -> Html Msg
 notificationHeading accounts str iconType =
     div [ class "status-info" ]
         [ div [ class "avatars" ] <| List.map accountAvatarLink accounts
-        , p [] <|
+        , p [ class "status-info-text" ] <|
             List.intersperse (text " ")
                 [ icon iconType
                 , span [] <| List.intersperse (text ", ") (List.map accountLink accounts)
@@ -339,8 +338,18 @@ notificationStatusView status { type_, accounts } =
 
 notificationFollowView : Mastodon.NotificationAggregate -> Html Msg
 notificationFollowView { accounts } =
-    div [ class "notification follow" ]
-        [ notificationHeading accounts "started following you" "user" ]
+    let
+        profileView account =
+            div [ class "status follow-profile" ]
+                [ accountAvatarLink account
+                , div [ class "username" ] [ accountLink account ]
+                , p [ class "status-text" ] <| ViewHelper.formatContent account.note []
+                ]
+    in
+        div [ class "notification follow" ]
+            [ notificationHeading accounts "started following you" "user"
+            , div [ class "" ] <| List.map profileView accounts
+            ]
 
 
 notificationEntryView : Mastodon.NotificationAggregate -> Html Msg