Further filtering tweaks

public/style.css

@@ -56,9 +56,11 @@ i.fas, i.fab {
 }
 
 .category-tile:hover {
+    color: var(--dark-blue);
+}
+
+.category-tile.active {
     color: var(--white);
-    background-color: var(--light-blue);
-    border-radius: 5px;
 }
 
 /* Intro */

src/Pages/Top.elm

@@ -2,7 +2,7 @@ module Pages.Top exposing (Model, Msg, Params, page)
 
 import Enum exposing (Enum)
 import Html exposing (Html, a, button, div, form, h2, h3, h5, i, img, input, label, li, option, p, select, span, text, ul)
-import Html.Attributes exposing (alt, class, for, href, id, src, style, value)
+import Html.Attributes exposing (alt, class, classList, for, href, id, src, style, value)
 import Html.Attributes.Aria exposing (ariaLabel)
 import Html.Events exposing (onClick, onInput)
 import Http
@@ -76,10 +76,10 @@ type Category
 categories : Enum Category
 categories =
     Enum.create
-        [ ( "Apps", Apps )
+        [ ( "(Everything)", All )
+        , ( "Apps", Apps )
         , ( "Utilities", Utilities )
         , ( "Development", Development )
-        , ( "All", All )
         ]
 
 
@@ -349,9 +349,16 @@ viewApp app =
         ]
 
 
-viewCategories : ( String, Category ) -> Html Msg
+viewCategory : Model -> ( String, Category ) -> Html Msg
-viewCategories category =
+viewCategory model category =
-    div [ class "category-tile", onClick (FilterCategory (Tuple.first category)) ] [ text (Tuple.first category) ]
+    div
+        [ classList
+            [ ( "category-tile", True )
+            , ( "active", categories.toString (Maybe.withDefault All model.filter_category) == Tuple.first category )
+            ]
+        , onClick (FilterCategory (Tuple.first category))
+        ]
+        [ text (Tuple.first category) ]
 
 
 viewApps : Model -> Html Msg
@@ -378,13 +385,13 @@ viewApps model =
                     [ h2 [ class "app-headings" ] [ text "Finding things" ]
                     , form []
                         [ div []
-                            [ h3 [] [ text "Categories" ]
-                            , div [] (List.map viewCategories categories.list)
-                            ]
-                        , div []
                             [ h3 [] [ text "Search" ]
                             , input [ ariaLabel "search", id "text", onInput FilterText ] []
                             ]
+                        , div []
+                            [ h3 [] [ text "Categories" ]
+                            , div [] (List.map (viewCategory model) categories.list)
+                            ]
                         , div []
                             [ h3 [] [ text "Status" ]
                             , label [ for "level" ] [ text "Minimum score:" ]
@@ -406,20 +413,23 @@ viewApps model =
                                 []
                             ]
                         ]
-                    , div [ id "intro", class "card" ] [ div [ class "card-body" ] [ 
+                    , div [ id "intro", class "card" ]
-                            h2 [ class "app-headings card-title" ] [ text "Co-op Cloud Recipe Catalogue" ]
+                        [ div [ class "card-body" ]
-                            , text "You can use these recipes (" 
+                            [ h2 [ class "app-headings card-title" ] [ text "Co-op Cloud Recipe Catalogue" ]
-                            , a [ href
+                            , text "You can use these recipes ("
-                            "https://docs.coopcloud.tech/glossary/#recipe" ] [
+                            , a
-                                text "What's a recipe?"
+                                [ href
-                            ]
+                                    "https://docs.coopcloud.tech/glossary/#recipe"
+                                ]
+                                [ text "What's a recipe?"
+                                ]
                             , text ") with "
-                            , a [ href "https://coopcloud.tech" ] [
+                            , a [ href "https://coopcloud.tech" ]
-                                text "Co-op Cloud"
+                                [ text "Co-op Cloud"
-                            ]
+                                ]
                             , text "."
+                            ]
                         ]
-                    ]
                     , div [ class "row" ]
                         (List.map viewApp
                             (model.results

src/Shared.elm

@@ -70,8 +70,8 @@ view { page, toMsg } model =
     , body =
         [ div [ class "background" ]
             [ nav
-                [ class "navbar navbar-expand-lg sticky-top font-weight-bold" ]
+                [ class "navbar navbar-expand-lg sticky-top" ]
-                [ a [ class "navbar-text", href (Route.toString Route.Top) ]
+                [ a [ class "font-weight-bold navbar-text", href (Route.toString Route.Top) ]
                     [ img
                         [ src "/logo-2.png"
                         , class "d-inline-block align-top mr-2"