Display quotes count on posts and add quotes list page

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

6 files changed, 55 insertions, 1 deletions

diff --git a/src/components/quotes_timeline/quotes_timeline.js b/src/components/quotes_timeline/quotes_timeline.js
new file mode 100644
index 00000000..a5f42da5
--- /dev/null
+++ b/src/components/quotes_timeline/quotes_timeline.js
@@ -0,0 +1,26 @@
+import Timeline from '../timeline/timeline.vue'
+
+const QuotesTimeline = {
+  created () {
+    this.$store.commit('clearTimeline', { timeline: 'quotes' })
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'quotes', statusId: this.statusId })
+  },
+  components: {
+    Timeline
+  },
+  computed: {
+    statusId () { return this.$route.params.id },
+    timeline () { return this.$store.state.statuses.timelines.quotes }
+  },
+  watch: {
+    statusId () {
+      this.$store.commit('clearTimeline', { timeline: 'quotes' })
+      this.$store.dispatch('startFetchingTimeline', { timeline: 'quotes', statusId: this.statusId })
+    }
+  },
+  unmounted () {
+    this.$store.dispatch('stopFetchingTimeline', 'quotes')
+  }
+}
+
+export default QuotesTimeline
diff --git a/src/components/quotes_timeline/quotes_timeline.vue b/src/components/quotes_timeline/quotes_timeline.vue
new file mode 100644
index 00000000..835abd12
--- /dev/null
+++ b/src/components/quotes_timeline/quotes_timeline.vue
@@ -0,0 +1,10 @@
+<template>
+  <Timeline
+    :title="$t('nav.quotes')"
+    :timeline="timeline"
+    :timeline-name="'quotes'"
+    :status-id="statusId"
+  />
+</template>
+
+<script src='./quotes_timeline.js'></script>
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 760c6ac1..54c4b4ff 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -398,6 +398,7 @@
       font-weight: bolder;
       font-size: 1.1em;
       line-height: 1em;
+      color: var(--selectedPostText, $fallback--text);
     }
 
     &:hover .stat-title {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index fa9d6f0b..11dc1e2e 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -506,6 +506,19 @@
                     </div>
                   </div>
                 </UserListPopover>
+                <router-link
+                  v-if="statusFromGlobalRepository.quotes_count > 0"
+                  :to="{ name: 'quotes', params: { id: status.id } }"
+                >
+                  <div
+                    class="stat-count"
+                  >
+                    <a class="stat-title">{{ $t('status.quotes') }}</a>
+                    <div class="stat-number">
+                      {{ statusFromGlobalRepository.quotes_count }}
+                    </div>
+                  </div>
+                </router-link>
                 <div class="avatar-row">
                   <AvatarList :users="combinedFavsAndRepeatsUsers" />
                 </div>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 1050b87a..6cb9d1f1 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -25,6 +25,7 @@ const Timeline = {
     'title',
     'userId',
     'listId',
+    'statusId',
     'tag',
     'embedded',
     'count',
@@ -121,6 +122,7 @@ const Timeline = {
       showImmediately,
       userId: this.userId,
       listId: this.listId,
+      statusId: this.statusId,
       tag: this.tag
     })
   },
@@ -183,6 +185,7 @@ const Timeline = {
         showImmediately: true,
         userId: this.userId,
         listId: this.listId,
+        statusId: this.statusId,
         tag: this.tag
       }).then(({ statuses }) => {
         if (statuses && statuses.length === 0) {
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 5a2a86c2..c4586b32 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -19,7 +19,8 @@ export const timelineNames = () => {
     bookmarks: 'nav.bookmarks',
     dms: 'nav.dms',
     'public-timeline': 'nav.public_tl',
-    'public-external-timeline': 'nav.twkn'
+    'public-external-timeline': 'nav.twkn',
+    quotes: 'nav.quotes'
   }
 }