add mentions outside of content warnings (#393)

Fixes #389

routes/_components/status/Status.html

@@ -18,6 +18,9 @@
   {#if spoilerText}
     <StatusSpoiler {...params} on:recalculateHeight />
   {/if}
+  {#if !showContent}
+    <StatusMentions {...params} />
+  {/if}
   {#if showContent || contentPreloaded}
     <StatusContent {...params} shown={showContent}/>
   {/if}
@@ -44,6 +47,7 @@
         "sidebar author-name  author-handle relative-date"
         "sidebar spoiler      spoiler       spoiler"
         "sidebar spoiler-btn  spoiler-btn   spoiler-btn"
+        "sidebar mentions     mentions      mentions"
         "sidebar content      content       content"
         "media   media        media         media"
         "....... toolbar      toolbar       toolbar"
@@ -67,6 +71,7 @@
       "sidebar     author-handle"
       "spoiler     spoiler"
       "spoiler-btn spoiler-btn"
+      "mentions    mentions"
       "content     content"
       "media       media"
       "details     details"
@@ -98,6 +103,7 @@
   import StatusContent from './StatusContent.html'
   import StatusSpoiler from './StatusSpoiler.html'
   import StatusComposeBox from './StatusComposeBox.html'
+  import StatusMentions from './StatusMentions.html'
   import { store } from '../../_store/store'
   import { goto } from 'sapper/runtime.js'
   import { registerClickDelegate } from '../../_utils/delegate'
@@ -136,7 +142,8 @@
       StatusMediaAttachments,
       StatusContent,
       StatusSpoiler,
-      StatusComposeBox
+      StatusComposeBox,
+      StatusMentions
     },
     data: () => ({
       notification: void 0,

routes/_components/status/StatusMentions.html

@@ -0,0 +1,30 @@
+{#if mentions.length}
+  <div class="status-mentions">
+    <p>
+      {#each mentions as mention, i}
+        {#if i > 0}
+          &nbsp;
+        {/if}
+        <a href="/accounts/{mention.id}"
+           title="@{mention.acct}"
+           focus-key="status-mention-link-{uuid}-{mention.id}">
+          @{mention.acct}
+        </a>
+      {/each}
+    </p>
+  </div>
+{/if}
+<style>
+  .status-mentions {
+    grid-area: mentions;
+    margin: 10px 0 10px 5px;
+    font-size: 0.9em;
+  }
+</style>
+<script>
+  export default {
+    computed: {
+      mentions: ({ originalStatus }) => originalStatus.mentions || []
+    }
+  }
+</script>