Display quote toots

This only works with QOTO, but making it work with Pleroma should be
pretty easy.

public/style.css

@@ -321,6 +321,29 @@ span.applink {
   text-overflow: ellipsis;
 }
 
+.status-quote {
+    border: 2px solid #272b30;
+    border-radius: 15px;
+    padding: 8px;
+    margin-bottom: 8px;
+}
+
+.status-quote .avatar {
+    width: 40px;
+}
+
+.status-quote .display-name {
+    color: #c8c8c8;
+}
+
+.status-quote, .status-quote .status-text {
+    font-size: 14px !important;
+}
+
+.status-quote .status-text, .status-quote .username {
+    margin-left: 50px;
+}
+
 .follow-profile-date {
   font-weight: normal;
 }

src/Mastodon/Decoder.elm

@@ -14,6 +14,7 @@ module Mastodon.Decoder
         , mentionDecoder
         , notificationDecoder
         , tagDecoder
+        , quoteDecoder
         , reblogDecoder
         , relationshipDecoder
         , hashtagHistoryDecoder
@@ -217,6 +218,11 @@ tagDecoder =
         |> Pipe.required "url" Decode.string
 
 
+quoteDecoder : Decode.Decoder Quote
+quoteDecoder =
+    Decode.map Quote (Decode.lazy (\_ -> statusDecoder))
+
+
 reblogDecoder : Decode.Decoder Reblog
 reblogDecoder =
     Decode.map Reblog (Decode.lazy (\_ -> statusDecoder))
@@ -297,6 +303,7 @@ statusDecoder =
         |> Pipe.required "in_reply_to_id" (Decode.nullable statusIdDecoder)
         |> Pipe.required "media_attachments" (Decode.list attachmentDecoder)
         |> Pipe.required "mentions" (Decode.list mentionDecoder)
+        |> Pipe.optional "quote" (Decode.lazy (\_ -> Decode.nullable quoteDecoder)) Nothing
         |> Pipe.optional "reblog" (Decode.lazy (\_ -> Decode.nullable reblogDecoder)) Nothing
         |> Pipe.optional "reblogged" (Decode.nullable Decode.bool) Nothing
         |> Pipe.required "reblogs_count" Decode.int

src/Mastodon/Helper.elm

@@ -1,6 +1,7 @@
 module Mastodon.Helper
     exposing
-        ( extractReblog
+        ( extractQuote
+        , extractReblog
         , aggregateNotifications
         , addNotificationToAggregates
         , extractStatusId
@@ -14,6 +15,11 @@ import List.Extra exposing (groupWhile, uniqueBy)
 import Mastodon.Model exposing (..)
 
 
+extractQuote : Status -> Maybe Quote
+extractQuote status =
+    status.quote
+
+
 extractReblog : Status -> Status
 extractReblog status =
     case status.reblog of

src/Mastodon/Model.elm

@@ -17,6 +17,7 @@ module Mastodon.Model
         , Mention
         , Notification
         , NotificationAggregate
+        , Quote(..)
         , Reblog(..)
         , Relationship
         , Tag
@@ -214,6 +215,10 @@ type alias NotificationAggregate =
     }
 
 
+type Quote
+    = Quote Status
+
+
 type Reblog
     = Reblog Status
 
@@ -290,6 +295,7 @@ type alias Status =
     , in_reply_to_id : Maybe StatusId
     , media_attachments : List Attachment
     , mentions : List Mention
+    , quote : Maybe Quote
     , reblog : Maybe Reblog
     , reblogged : Maybe Bool
     , reblogs_count : Int

src/View/Status.elm

@@ -216,6 +216,21 @@ mentionView mention =
         ]
 
 
+quoteView : Status -> Html Msg
+quoteView status =
+    let
+        quote =
+            Mastodon.Helper.extractQuote status
+    in
+        case quote of
+            Just (Quote quote) ->
+                div [ class "status-quote" ]
+                    [ statusView "quote" quote True ]
+
+            Nothing ->
+                text ""
+
+
 mentionsView : List Mention -> Html Msg
 mentionsView mentions =
     let
@@ -238,6 +253,7 @@ statusContentView context status =
                 , div [] <| formatContent status.content status.mentions
                 , pollView status
                 , attachmentListView context status
+                , quoteView status
                 ]
 
         spoiler ->
@@ -256,6 +272,7 @@ statusContentView context status =
                         , div [] <| formatContent status.content status.mentions
                         , pollView status
                         , attachmentListView context status
+                        , quoteView status
                         ]
                     ]