Fix #118: Render a draft char counter. (#119)

src/Model.elm

@@ -35,6 +35,7 @@ defaultDraft =
     , spoilerText = Nothing
     , sensitive = False
     , visibility = "public"
+    , statusLength = 0
     , autoState = Autocomplete.empty
     , autoAtPosition = Nothing
     , autoQuery = ""
@@ -275,6 +276,7 @@ updateDraft draftMsg currentUser model =
                     newDraft =
                         { draft
                             | status = status
+                            , statusLength = String.length status
                             , autoCursorPosition = selectionStart
                             , autoAtPosition = atPosition
                             , autoQuery = query

src/Types.elm

@@ -114,6 +114,7 @@ type alias Draft =
     , spoilerText : Maybe String
     , sensitive : Bool
     , visibility : String
+    , statusLength : Int
 
     -- Autocomplete values
     , autoState : Autocomplete.State

src/View/Common.elm

@@ -12,7 +12,6 @@ import Html.Attributes exposing (..)
 import Mastodon.Model exposing (..)
 import Types exposing (..)
 import View.Events exposing (..)
-import View.Formatter exposing (formatContent)
 
 
 accountLink : Account -> Html Msg

src/View/Draft.elm

@@ -113,9 +113,6 @@ draftReplyToView draft =
 draftView : Model -> Html Msg
 draftView ({ draft, currentUser } as model) =
     let
-        hasSpoiler =
-            draft.spoilerText /= Nothing
-
         visibilityOptionView ( visibility, description ) =
             option [ value visibility ]
                 [ text <| visibility ++ ": " ++ description ]
@@ -125,6 +122,17 @@ draftView ({ draft, currentUser } as model) =
                 viewAutocompleteMenu model.draft
             else
                 text ""
+
+        ( hasSpoiler, charCount ) =
+            case draft.spoilerText of
+                Just spoilerText ->
+                    ( True, (String.length spoilerText) + draft.statusLength )
+
+                Nothing ->
+                    ( False, draft.statusLength )
+
+        limitExceeded =
+            charCount > 500
     in
         div [ class "panel panel-default" ]
             [ div [ class "panel-heading" ]
@@ -250,9 +258,19 @@ draftView ({ draft, currentUser } as model) =
                             , onClick (DraftEvent ClearDraft)
                             ]
                             [ text "Clear" ]
+                        , button
+                            [ type_ "button"
+                            , class <|
+                                if limitExceeded then
+                                    "btn btn-danger active"
+                                else
+                                    "btn btn-default active"
+                            ]
+                            [ text <| toString charCount ]
                         , button
                             [ type_ "submit"
                             , class "btn btn-primary"
+                            , disabled limitExceeded
                             ]
                             [ text "Toot!" ]
                         ]