feat: Add poll results to a status (#1219)

src/routes/_components/status/Status.html

@@ -31,6 +31,9 @@
   {#if showMedia }
     <StatusMediaAttachments {...params} on:recalculateHeight />
   {/if}
+  {#if showPoll}
+    <StatusPoll {...params} />
+  {/if}
   {#if isStatusInOwnThread}
     <StatusDetails {...params} />
   {/if}
@@ -58,6 +61,7 @@
         "sidebar content      content       content"
         "sidebar card         card          card"
         "sidebar media-grp    media-grp     media-grp"
+        "sidebar poll         poll          poll"
         "media   media        media         media"
         "....... toolbar      toolbar       toolbar"
         "compose compose      compose       compose";
@@ -92,6 +96,7 @@
       "card        card"
       "media-grp   media-grp"
       "media       media"
+      "poll        poll"
       "details     details"
       "toolbar     toolbar"
       "compose     compose";
@@ -119,6 +124,7 @@
   import StatusSpoiler from './StatusSpoiler.html'
   import StatusComposeBox from './StatusComposeBox.html'
   import StatusMentions from './StatusMentions.html'
+  import StatusPoll from './StatusPoll.html'
   import Shortcut from '../shortcut/Shortcut.html'
   import { store } from '../../_store/store'
   import { goto } from '../../../../__sapper__/client'
@@ -170,6 +176,7 @@
       StatusMediaAttachments,
       StatusContent,
       StatusCard,
+      StatusPoll,
       StatusSpoiler,
       StatusComposeBox,
       StatusMentions,
@@ -261,6 +268,9 @@
         originalStatus.card &&
         originalStatus.card.title
       ),
+      showPoll: ({ originalStatus, isStatusInNotification }) => (
+        !isStatusInNotification && originalStatus.poll
+      ),
       showMedia: ({ originalStatus, isStatusInNotification }) => (
         !isStatusInNotification &&
         originalStatus.media_attachments &&

src/routes/_components/status/StatusPoll.html

@@ -0,0 +1,42 @@
+<div class="poll" >
+  {#each options as option}
+  <div class="option">
+    <div>{option.title} ({option.share}%)</div>
+    <svg height="2px" width="100%">
+      <line x1="0" y1="0" x2="{option.share}%" y2="0" />
+    </svg>
+  </div>
+  {/each}
+
+</div>
+<style>
+  .poll {
+    grid-area: poll;
+    margin: 10px 10px 10px 5px;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+  }
+
+  .option {
+    display: flex;
+    flex-direction: column;
+    stroke: var(--svg-fill);
+    stroke-width:2;
+  }
+
+  .option:not(:last-child) {
+    margin-bottom: 3px;
+  }
+
+</style>
+<script>
+  export default {
+    computed: {
+      poll: ({ originalStatus }) => originalStatus.poll,
+      options: ({ poll }) => poll.options.map(({ title, votes_count: votesCount }) => ({
+        title,
+        share: poll.votes_count ? Math.round(votesCount / poll.votes_count * 100) : 0
+      }))
+    }
+  }
+</script>