Move tailwind function into Utils module

Instead of accepting `List (String, Int)`, accept `List Strategy` where
`Strategy` defines whether or not the string of selectors should be applied to
the element.

I'm also renaming it `class` so I can just use `Utils.class`; `tailwind` has
little to do with the function itself.

2 files changed, 63 insertions, 17 deletions

diff --git a/scratch/habit-screens/client/src/Habits.elm b/scratch/habit-screens/client/src/Habits.elm
index 5b0fdea9e628..63cb0918abd1 100644
--- a/scratch/habit-screens/client/src/Habits.elm
+++ b/scratch/habit-screens/client/src/Habits.elm
@@ -8,6 +8,7 @@ import Set
 import State
 import Time exposing (Weekday(..))
 import UI
+import Utils exposing (Strategy(..))
 
 
 morning : List State.Habit
@@ -201,14 +202,6 @@ habitsFor weekday =
             toHabit saturday
 
         Sun ->
-
-tailwind : List ( String, Bool ) -> Attribute msg
-tailwind classes =
-    classes
-        |> List.filter (\( k, v ) -> v)
-        |> List.map (\( k, v ) -> k)
-        |> String.join " "
-        |> class
             toHabit sunday
 
 
@@ -220,8 +213,10 @@ render { today, visibleDayOfWeek, completed } =
 
         Just weekday ->
             div
-                [ class "container mx-auto py-6 px-6"
-                , tailwind [ ( "pt-20", today /= visibleDayOfWeek ) ]
+                [ Utils.class
+                    [ Always "container mx-auto py-6 px-6"
+                    , When (today /= visibleDayOfWeek) "pt-20"
+                    ]
                 ]
                 [ header []
                     [ if today /= visibleDayOfWeek then
@@ -256,25 +251,39 @@ render { today, visibleDayOfWeek, completed } =
                     (weekday
                         |> habitsFor
                         |> List.indexedMap
-                            (\i x ->
+                            (\i { label, minutesDuration } ->
+                                let
+                                    isCompleted =
+                                        Set.member i completed
+                                in
                                 li [ class "text-xl list-disc ml-6" ]
                                     [ if today == visibleDayOfWeek then
                                         UI.button
                                             [ class "py-5 px-3"
-                                            , tailwind
-                                                [ ( "line-through", Set.member i completed )
-                                                , ( "text-gray-400", Set.member i completed )
-                                                ]
                                             , onClick (State.ToggleHabit i)
                                             ]
-                                            [ text x ]
+                                            [ span
+                                                [ Utils.class
+                                                    [ Always "text-white pt-1 px-2 rounded"
+                                                    , If isCompleted "bg-gray-400" "bg-blue-500"
+                                                    ]
+                                                ]
+                                                [ text (String.fromInt minutesDuration ++ " mins") ]
+                                            , p
+                                                [ Utils.class
+                                                    [ Always "inline pl-3"
+                                                    , When isCompleted "line-through text-gray-400"
+                                                    ]
+                                                ]
+                                                [ text label ]
+                                            ]
 
                                       else
                                         UI.button
                                             [ class "py-5 px-3 cursor-not-allowed"
                                             , onClick State.DoNothing
                                             ]
-                                            [ text x ]
+                                            [ text label ]
                                     ]
                             )
                     )
diff --git a/scratch/habit-screens/client/src/Utils.elm b/scratch/habit-screens/client/src/Utils.elm
new file mode 100644
index 000000000000..23b13c224c68
--- /dev/null
+++ b/scratch/habit-screens/client/src/Utils.elm
@@ -0,0 +1,37 @@
+module Utils exposing (..)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Maybe.Extra
+
+
+type Strategy
+    = Always String
+    | When Bool String
+    | If Bool String String
+
+
+class : List Strategy -> Attribute msg
+class classes =
+    classes
+        |> List.map
+            (\strategy ->
+                case strategy of
+                    Always x ->
+                        Just x
+
+                    When True x ->
+                        Just x
+
+                    When False _ ->
+                        Nothing
+
+                    If True x _ ->
+                        Just x
+
+                    If False _ x ->
+                        Just x
+            )
+        |> Maybe.Extra.values
+        |> String.join " "
+        |> Html.Attributes.class