Add placeholder for comments sort

src/renderer/components/watch-video-comments/watch-video-comments.css

@@ -12,6 +12,10 @@
   text-align: center;
 }
 
+.commentSort {
+  float: right;
+}
+
 .comment {
   padding: 15px;
   position: relative;

src/renderer/components/watch-video-comments/watch-video-comments.js

@@ -2,14 +2,17 @@ import Vue from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
-import CommentScraper from 'yt-comment-scraper'
+import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtTimestampCatcher from '../../components/ft-timestamp-catcher/ft-timestamp-catcher.vue'
 
+import CommentScraper from 'yt-comment-scraper'
+
 export default Vue.extend({
   name: 'WatchVideoComments',
   components: {
     'ft-card': FtCard,
     'ft-loader': FtLoader,
+    'ft-select': FtSelect,
     'ft-timestamp-catcher': FtTimestampCatcher
   },
   props: {
@@ -38,6 +41,20 @@ export default Vue.extend({
 
     invidiousInstance: function () {
       return this.$store.getters.getInvidiousInstance
+    },
+
+    sortNames: function () {
+      return [
+        this.$t('Comments.Top comments'),
+        this.$t('Comments.Newest first')
+      ]
+    },
+
+    sortValues: function () {
+      return [
+        'top',
+        'newest'
+      ]
     }
   },
   methods: {
@@ -45,6 +62,13 @@ export default Vue.extend({
       this.$emit('timestamp-event', timestamp)
     },
 
+    handleSortChange: function (sortType) {
+      console.log(sortType)
+      this.showToast({
+        message: 'Not currently implemented'
+      })
+    },
+
     getCommentData: function () {
       this.isLoading = true
       switch (this.backendPreference) {

src/renderer/components/watch-video-comments/watch-video-comments.vue

@@ -17,6 +17,15 @@
     >
       {{ $t("Comments.Click to View Comments") }}
     </h4>
+    <ft-select
+      v-if="commentData.length > 0 && !isLoading && showComments"
+      class="commentSort"
+      placeholder="Sort by"
+      :value="sortValues[0]"
+      :select-names="sortNames"
+      :select-values="sortValues"
+      @change="handleSortChange"
+    />
     <h3
       v-if="commentData.length > 0 && !isLoading && showComments"
     >

static/locales/en-US.yaml

@@ -478,6 +478,8 @@ Comments:
   There are no more comments for this video: There are no more comments for this video
   Show Comments: Show Comments
   Hide Comments: Hide Comments
+  Top comments: Top comments
+  Newest first: Newest First
   # Context: View 10 Replies, View 1 Reply
   View: View
   Hide: Hide