3 files changed, 90 insertions, 0 deletions
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
new file mode 100644
index 00000000..a4a0c724
--- /dev/null
+++ b/src/components/mentions_line/mentions_line.js
@@ -0,0 +1,37 @@
+import MentionLink from 'src/components/mention_link/mention_link.vue'
+import { mapGetters } from 'vuex'
+
+export const MENTIONS_LIMIT = 5
+
+const MentionsLine = {
+  name: 'MentionsLine',
+  props: {
+    mentions: {
+      required: true,
+      type: Array
+    }
+  },
+  data: () => ({ expanded: false }),
+  components: {
+    MentionLink
+  },
+  computed: {
+    mentionsComputed () {
+      return this.mentions.slice(0, MENTIONS_LIMIT)
+    },
+    extraMentions () {
+      return this.mentions.slice(MENTIONS_LIMIT)
+    },
+    manyMentions () {
+      return this.extraMentions.length > 0
+    },
+    ...mapGetters(['mergedConfig'])
+  },
+  methods: {
+    toggleShowMore () {
+      this.expanded = !this.expanded
+    }
+  }
+}
+
+export default MentionsLine
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
new file mode 100644
index 00000000..9a622e75
--- /dev/null
+++ b/src/components/mentions_line/mentions_line.scss
@@ -0,0 +1,13 @@
+.MentionsLine {
+  word-break: break-all;
+
+  .mention-link:not(:first-child)::before {
+    content: ' ';
+  }
+
+  .showMoreLess {
+    margin-left: 0.5em;
+    white-space: normal;
+    color: var(--link);
+  }
+}
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
new file mode 100644
index 00000000..64c19bf1
--- /dev/null
+++ b/src/components/mentions_line/mentions_line.vue
@@ -0,0 +1,40 @@
+<template>
+  <span class="MentionsLine">
+    <MentionLink
+      v-for="mention in mentionsComputed"
+      :key="mention.index"
+      class="mention-link"
+      :content="mention.content"
+      :url="mention.url"
+    /><span
+      v-if="manyMentions"
+      class="extraMentions"
+    >
+      <span
+        v-if="expanded"
+        class="fullExtraMentions"
+      >{{ ' ' }}<MentionLink
+        v-for="mention in extraMentions"
+        :key="mention.index"
+        class="mention-link"
+        :content="mention.content"
+        :url="mention.url"
+      />
+      </span><button
+        v-if="!expanded"
+        class="button-unstyled showMoreLess"
+        @click="toggleShowMore"
+      >
+        {{ $t('status.plus_more', { number: extraMentions.length }) }}
+      </button><button
+        v-if="expanded"
+        class="button-unstyled showMoreLess"
+        @click="toggleShowMore"
+      >
+        {{ $t('general.show_less') }}
+      </button>
+    </span>
+  </span>
+</template>
+<script src="./mentions_line.js"></script>
+<style lang="scss" src="./mentions_line.scss" />