Add sorting to decklist

src/Main.elm

@@ -110,6 +110,7 @@ type Msg
     | ToggleSignalsChart
     | ToggleSignalsDeltaChart
     | ToggleDeckList
+    | SetDeckSortMethod Deck.DeckSortMethod
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -169,6 +170,9 @@ update msg model =
                     in
                     ( Ready { mdl | toolboxAccordion = { deckListAccordion | deckList = not mdl.toolboxAccordion.deckList } }, Cmd.none )
 
+                SetDeckSortMethod method ->
+                    ( Ready { mdl | deckSortOrder = method }, Cmd.none )
+
         Error mdl ->
             ( Error mdl, Cmd.none )
 
@@ -285,6 +289,27 @@ viewDeckList model =
         viewCard card =
             li [ class "flex items-center gap-2 text-white justify-between" ]
                 [ span [ class "truncate" ] [ text card.details.name ], viewManaCost card ]
+
+        viewSortButton : Deck.DeckSortMethod -> Html Msg
+        viewSortButton m =
+            button
+                [ onClick (SetDeckSortMethod m)
+                , classList
+                    [ ( "text-xs text-left grow shrink text-white hover:underline hover:font-medium", True )
+                    , ( "underline font-medium", m == model.deckSortOrder )
+                    ]
+                ]
+                [ text <|
+                    case m of
+                        Deck.SortByPickNumber ->
+                            "Pick number"
+
+                        Deck.SortByName ->
+                            "Name"
+
+                        Deck.SortByCMC ->
+                            "CMC"
+                ]
     in
     div [ class "mb-2 w-full" ]
         [ button
@@ -302,7 +327,13 @@ viewDeckList model =
             ]
         , if model.toolboxAccordion.deckList then
             div [ class "py-2" ]
-                [ div [ class "max-h-[400px] overflow-y-auto pr-2" ] [ decklist ]
+                [ div [ class "text-white text-xs" ] [ text "Sort by:" ]
+                , div [ class "flex gap-2" ]
+                    [ viewSortButton Deck.SortByPickNumber
+                    , viewSortButton Deck.SortByName
+                    , viewSortButton Deck.SortByCMC
+                    ]
+                , div [ class "max-h-[400px] overflow-y-auto py-2 pr-2" ] [ decklist ]
                 ]
 
           else