Choose sort via dropdown

www/elm.json

@@ -7,6 +7,7 @@
     "dependencies": {
         "direct": {
             "NoRedInk/elm-json-decode-pipeline": "1.0.0",
+            "PaackEng/elm-ui-dropdown": "3.3.0",
             "avh4/elm-color": "1.0.0",
             "damienklinnert/elm-spinner": "3.0.2",
             "elm/browser": "1.0.2",

www/src/Pages/Collection.elm

@@ -7,6 +7,7 @@ import Browser.Navigation
 import Card
 import Color
 import Dict
+import Dropdown
 import Element as E
 import Element.Background as Background
 import Element.Border as Border
@@ -44,6 +45,11 @@ decodeStatistics =
         |> JDP.required "value" Json.Decode.float
 
 
+type SortBy
+    = PriceDescending
+    | RarityDescending
+
+
 type alias Criteria =
     { query : String
     , sortBy : String
@@ -56,6 +62,7 @@ type alias Model =
     , url : Url.Url
     , device : E.Device
     , spinner : Spinner.Model
+    , sortDropdown : Dropdown.State SortBy
     , criteria : Criteria
     , cardPage : CardPage
     , activeCard : Maybe Card.Copy
@@ -69,6 +76,8 @@ type Msg
     | ViewportChanged UI.Dimensions
     | LinkClicked Browser.UrlRequest
     | SpinnerMsg Spinner.Msg
+    | DropdownMsg (Dropdown.Msg SortBy)
+    | SortSelected (Maybe SortBy)
     | UpdateCriteria CriteriaMsg
     | Search
     | GetPage Url.Url
@@ -195,6 +204,7 @@ init key url device symbols =
       , url = url
       , device = device
       , spinner = Spinner.init
+      , sortDropdown = Dropdown.init "sort-dropdown"
       , criteria = criteria
       , cardPage = Loading Paginated.empty
       , activeCard = Nothing
@@ -245,6 +255,29 @@ update msg model =
         SpinnerMsg msg_ ->
             ( { model | spinner = Spinner.update msg_ model.spinner }, Cmd.none )
 
+        DropdownMsg msg_ ->
+            let
+                ( updated, cmd ) =
+                    Dropdown.update sortDropdown msg_ model model.sortDropdown
+            in
+            ( { model | sortDropdown = updated }, cmd )
+
+        SortSelected sortBy ->
+            let
+                sortKey s =
+                    case s of
+                        PriceDescending ->
+                            "price"
+
+                        RarityDescending ->
+                            "rarity"
+
+                newValue : String
+                newValue =
+                    Maybe.withDefault PriceDescending sortBy |> sortKey
+            in
+            update (UpdateCriteria (UpdateSortBy newValue)) model
+
         UpdateCriteria msg_ ->
             let
                 newCriteria =
@@ -337,19 +370,77 @@ searchBar model =
                 }
             ]
         , E.row [ E.spacing 10 ]
-            [ Input.radio [ E.padding 10 ]
+            [ Dropdown.view sortDropdown model model.sortDropdown ]
-                { onChange = UpdateCriteria << UpdateSortBy
-                , selected = Just model.criteria.sortBy
-                , label = Input.labelLeft [ Font.color UI.colors.text ] (E.text "Sort by")
-                , options =
-                    [ Input.option "price" <| E.el [ Font.color UI.colors.text ] <| E.text "Price DESC"
-                    , Input.option "rarity" <| E.el [ Font.color UI.colors.text ] <| E.text "Rarity DESC"
-                    ]
-                }
-            ]
         ]
 
 
+sortDropdown =
+    let
+        fromString s =
+            case s of
+                "price" ->
+                    PriceDescending
+
+                "rarity" ->
+                    RarityDescending
+
+                _ ->
+                    PriceDescending
+
+        toString s =
+            case s of
+                PriceDescending ->
+                    "Price DESC"
+
+                RarityDescending ->
+                    "Rarity DESC"
+
+        selectAttrs =
+            [ Background.color UI.colors.secondary
+            , Border.width 1
+            , Border.rounded 5
+            , Border.color UI.colors.background
+            , E.paddingXY 16 8
+            , E.spacing 10
+            , E.width E.fill
+            , E.pointer
+            ]
+
+        listAttrs =
+            [ Background.color UI.colors.secondary
+            , Border.width 1
+            , Border.roundEach { topLeft = 0, topRight = 0, bottomLeft = 5, bottomRight = 5 }
+            , E.width E.fill
+            , E.spacing 5
+            , E.pointer
+            ]
+
+        itemToPrompt sortBy =
+            E.text ("Sort By " ++ toString sortBy)
+
+        itemToElement selected highlighted sortBy =
+            E.el
+                [ E.padding 8
+                , E.spacing 10
+                , E.width E.fill
+                , E.mouseOver [ Background.color UI.colors.primary ]
+                ]
+            <|
+                E.text <|
+                    toString sortBy
+    in
+    Dropdown.basic
+        { itemsFromModel = always [ PriceDescending, RarityDescending ]
+        , selectionFromModel = .criteria >> .sortBy >> fromString >> Just
+        , dropdownMsg = DropdownMsg
+        , onSelectMsg = SortSelected
+        , itemToPrompt = itemToPrompt
+        , itemToElement = itemToElement
+        }
+        |> Dropdown.withSelectAttributes selectAttrs
+        |> Dropdown.withListAttributes listAttrs
+
+
 viewCardBrowser : Model -> E.Element Msg
 viewCardBrowser model =
     let