Implement full configuration of homepage

src/App.vue

@@ -96,23 +96,6 @@ export default {
   },
 
   data: () => ({
-    links: [
-      {
-        id: 'prefs',
-        name: 'titles.preferences',
-        to: '/preferences'
-      },
-      {
-        id: 'trending',
-        name: 'titles.trending',
-        to: '/'
-      },
-      {
-        id: 'watch-history',
-        name: 'titles.history',
-        to: '/watch-history'
-      }
-    ],
     languageOptions: [
       { value: 'zh_Hant', text: 'Chinese (Traditional)' },
       { value: 'en', text: 'English' },
@@ -132,11 +115,34 @@ export default {
     drawer: false
   }),
 
+  computed: {
+    links () {
+      return [
+        {
+          id: 'prefs',
+          name: 'titles.preferences',
+          to: '/preferences'
+        },
+        {
+          id: 'trending',
+          name: 'titles.' + this.$store.getters['prefs/getPreference']('homepage', 'trending'),
+          to: '/'
+        },
+        {
+          id: 'watch-history',
+          name: 'titles.history',
+          to: '/watch-history'
+        }
+      ]
+    }
+  },
+
   methods: {
     changeLocale (lang) {
       return changeLocale(lang)
     }
   },
+
   created () {
     this.$store.dispatch('prefs/loadState')
     this.$store.dispatch('auth/initializeAuth')

src/routes/FeedPage.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fluid>
-    <h3 class="text-h4 justify-center">{{ $t('titles.trending') }}</h3>
+    <h3 class="text-h4 justify-center">{{ $t('titles.' + feedName) }}</h3>
 
     <v-divider class="my-4" />
 
@@ -24,6 +24,7 @@ import VideoItem from '@/components/VideoItem.vue'
 export default {
   data () {
     return {
+      feedName: 'trending',
       videos: [],
       error: null,
       errorIsJSON: false
@@ -32,27 +33,39 @@ export default {
 
   metaInfo () {
     return {
-      title: this.$t('titles.trending')
+      title: this.$t('titles.' + this.feedName)
     }
   },
 
+  watch: {
+    '$route.path': 'fetchData'
+  },
   mounted () {
-    this.fetchTrending()
+    this.fetchData()
   },
   methods: {
-    async fetchTrending () {
+    async fetchData () {
       const region = this.$store.getters['prefs/getPreference']('region', 'US')
+      const selectedHomepage = this.$store.getters['prefs/getPreference']('homepage', 'trending')
       let path
 
       switch (this.$route.path) {
         case '/':
-          path = '/trending'
+          if (selectedHomepage === 'trending') {
+            path = '/trending'
+            this.feedName = 'trending'
+          } else {
+            path = '/feed'
+            this.feedName = 'feed'
+          }
           break
         case '/trending':
           path = '/trending'
+          this.feedName = 'trending'
           break
         case '/feed':
           path = '/feed'
+          this.feedName = 'feed'
           break
       }
 

src/routes/Preferences.vue

@@ -47,6 +47,22 @@ export default {
           type: 'bool',
           default: false
         },
+        {
+          id: 'homepage',
+          type: 'select',
+          label: 'Default Homepage',
+          default: 'trending',
+          options: [
+            {
+              text: 'Trending',
+              value: 'trending'
+            },
+            {
+              text: 'Feed',
+              value: 'feed'
+            }
+          ]
+        },
         {
           id: 'quality',
           type: 'select',
@@ -76,24 +92,8 @@ export default {
             text: co.name.common,
             value: co.cca2
           }))
-        },
-        {
-          id: 'homepage',
-          type: 'select',
-          label: 'Default Homepage',
-          options: [
-            {
-              text: 'Trending',
-              value: 'trending'
-            },
-            {
-              text: 'Feed',
-              value: 'feed'
-            }
-          ]
         }
       ],
-
       tableHeaders: [
         {
           text: 'Name',