it works™.

public/style.css

@@ -70,6 +70,7 @@ body {
 .notifications-panel .btn-group-justified .btn {
   border-radius: 0;
   border-bottom: 0;
+  outline: 0;
 }
 
 .notification.reblog,

src/Model.elm

@@ -644,6 +644,9 @@ update msg model =
             }
                 ! []
 
+        FilterNotifications filter ->
+            { model | notificationFilter = filter } ! []
+
         ScrollColumn ScrollTop column ->
             model ! [ Command.scrollColumnToTop column ]
 

src/Types.elm

@@ -62,6 +62,7 @@ type Msg
     | CloseThread
     | DeleteStatus Int
     | DraftEvent DraftMsg
+    | FilterNotifications NotificationFilter
     | FollowAccount Int
     | LoadAccount Int
     | MastodonEvent MastodonMsg

src/View.elm

@@ -500,6 +500,30 @@ notificationEntryView currentUser notification =
         ]
 
 
+notificationFilterView : NotificationFilter -> Html Msg
+notificationFilterView filter =
+    let
+        filterBtn tooltip iconName event =
+            button
+                [ class <|
+                    if filter == event then
+                        "btn btn-primary"
+                    else
+                        "btn btn-default"
+                , title tooltip
+                , onClick <| FilterNotifications event
+                ]
+                [ icon iconName ]
+    in
+        justifiedButtonGroup
+            [ filterBtn "All notifications" "asterisk" NotificationAll
+            , filterBtn "Mentions" "share-alt" NotificationOnlyMentions
+            , filterBtn "Boosts" "fire" NotificationOnlyBoosts
+            , filterBtn "Favorites" "star" NotificationOnlyFavourites
+            , filterBtn "Follows" "user" NotificationOnlyFollows
+            ]
+
+
 notificationListView : CurrentUser -> NotificationFilter -> List NotificationAggregate -> Html Msg
 notificationListView currentUser filter notifications =
     div [ class "col-md-3 column" ]
@@ -507,40 +531,12 @@ notificationListView currentUser filter notifications =
             [ a
                 [ href "", onClickWithPreventAndStop <| ScrollColumn ScrollTop "notifications" ]
                 [ div [ class "panel-heading" ] [ icon "bell", text "Notifications" ] ]
-            , justifiedButtonGroup
+            , notificationFilterView filter
-                [ button
-                    [ type_ "button"
-                    , class "btn btn-primary"
-                    , title "All notifications"
-                    ]
-                    [ icon "asterisk" ]
-                , button
-                    [ type_ "button"
-                    , class "btn btn-default"
-                    , title "Mentions"
-                    ]
-                    [ icon "share-alt" ]
-                , button
-                    [ type_ "button"
-                    , class "btn btn-default"
-                    , title "Boosts"
-                    ]
-                    [ icon "fire" ]
-                , button
-                    [ type_ "button"
-                    , class "btn btn-default"
-                    , title "Favorites"
-                    ]
-                    [ icon "star" ]
-                , button
-                    [ type_ "button"
-                    , class "btn btn-default"
-                    , title "Follows"
-                    ]
-                    [ icon "user" ]
-                ]
             , ul [ id "notifications", class "list-group timeline" ] <|
-                List.map (notificationEntryView currentUser) notifications
+                (notifications
+                    |> filterNotifications filter
+                    |> List.map (notificationEntryView currentUser)
+                )
             ]
         ]
 

src/ViewHelper.elm

@@ -6,6 +6,7 @@ module ViewHelper
         , onClickWithPrevent
         , onClickWithPreventAndStop
         , toVirtualDom
+        , filterNotifications
         )
 
 import Html exposing (..)
@@ -14,7 +15,7 @@ import Html.Events exposing (onWithOptions)
 import HtmlParser
 import Json.Decode as Decode
 import String.Extra exposing (replace)
-import Mastodon.Model
+import Mastodon.Model exposing (..)
 import Types exposing (..)
 
 
@@ -49,7 +50,7 @@ onClickWithStop msg =
 -- Views
 
 
-formatContent : String -> List Mastodon.Model.Mention -> List (Html Msg)
+formatContent : String -> List Mention -> List (Html Msg)
 formatContent content mentions =
     content
         |> replace " ?" " ?"
@@ -61,12 +62,12 @@ formatContent content mentions =
 
 {-| Converts nodes to virtual dom nodes.
 -}
-toVirtualDom : List Mastodon.Model.Mention -> List HtmlParser.Node -> List (Html Msg)
+toVirtualDom : List Mention -> List HtmlParser.Node -> List (Html Msg)
 toVirtualDom mentions nodes =
     List.map (toVirtualDomEach mentions) nodes
 
 
-createLinkNode : List ( String, String ) -> List HtmlParser.Node -> List Mastodon.Model.Mention -> Html Msg
+createLinkNode : List ( String, String ) -> List HtmlParser.Node -> List Mention -> Html Msg
 createLinkNode attrs children mentions =
     let
         maybeMention =
@@ -96,7 +97,7 @@ getHrefLink attrs =
         |> List.head
 
 
-getMentionForLink : List ( String, String ) -> List Mastodon.Model.Mention -> Maybe Mastodon.Model.Mention
+getMentionForLink : List ( String, String ) -> List Mention -> Maybe Mention
 getMentionForLink attrs mentions =
     case getHrefLink attrs of
         Just href ->
@@ -108,7 +109,7 @@ getMentionForLink attrs mentions =
             Nothing
 
 
-toVirtualDomEach : List Mastodon.Model.Mention -> HtmlParser.Node -> Html Msg
+toVirtualDomEach : List Mention -> HtmlParser.Node -> Html Msg
 toVirtualDomEach mentions node =
     case node of
         HtmlParser.Element "a" attrs children ->
@@ -127,3 +128,29 @@ toVirtualDomEach mentions node =
 toAttribute : ( String, String ) -> Attribute msg
 toAttribute ( name, value ) =
     attribute name value
+
+
+filterNotifications : NotificationFilter -> List NotificationAggregate -> List NotificationAggregate
+filterNotifications filter notifications =
+    let
+        applyFilter { type_ } =
+            case filter of
+                NotificationAll ->
+                    True
+
+                NotificationOnlyMentions ->
+                    type_ == "mention"
+
+                NotificationOnlyBoosts ->
+                    type_ == "reblog"
+
+                NotificationOnlyFavourites ->
+                    type_ == "favourite"
+
+                NotificationOnlyFollows ->
+                    type_ == "follow"
+    in
+        if filter == NotificationAll then
+            notifications
+        else
+            List.filter applyFilter notifications