From 16776b206da23b9fb90e07d90e5c8a121a62055b Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Sun, 3 Oct 2021 12:54:31 +0530
Subject: [PATCH] Fixes issue & relayout

---
 src/App.vue                    | 50 ++++++++++++++--------------------
 src/routes/TrendingPage.vue    |  4 +--
 src/store/watched-videos-db.js |  6 ++--
 3 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2d4e7ff..51e0485 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,36 +5,26 @@
       color="primary"
       dark
     >
-      <!-- Someone help me fix this horrid design -->
-      <v-container class="py-2 fill-height">
-        <v-row>
-          <v-col md="6">
-            <v-btn
-              text
-              link
-              v-for="link in links"
-              :key="link.id"
-              :to="link.to"
-              class="mr-1"
-            >
-              {{ $t(link.name) }}
-            </v-btn>
-          </v-col>
-          <v-col md="1">
-            <v-select
-              dense
-              :items="languageOptions"
-              label="Language"
-              :value="$i18n.locale"
-              @input="changeLocale"
-              outlined
-            />
-          </v-col>
-          <v-col md="5">
-            <SearchMenu />
-          </v-col>
-        </v-row>
-      </v-container>
+      <v-btn
+        text
+        link
+        v-for="link in links"
+        :key="link.id"
+        :to="link.to"
+        class="mr-1"
+      >
+        {{ $t(link.name) }}
+      </v-btn>
+      <v-select
+        dense
+        :items="languageOptions"
+        label="Language"
+        :value="$i18n.locale"
+        @input="changeLocale"
+        outlined
+        class="mt-6"
+      />
+      <SearchMenu />
     </v-app-bar>
 
     <v-main class="grey lighten-3">
diff --git a/src/routes/TrendingPage.vue b/src/routes/TrendingPage.vue
index 04978da..8b97cac 100644
--- a/src/routes/TrendingPage.vue
+++ b/src/routes/TrendingPage.vue
@@ -5,7 +5,7 @@
     <v-divider class="my-4" />
 
     <v-row v-for="(row, rowId) in chunkedByFour" :key="rowId">
-      <v-col md="3" v-for="(video, videoId) in row" :key="videoId">
+      <v-col md="2" v-for="(video, videoId) in row" :key="videoId">
         <VideoItem :video="video" />
       </v-col>
     </v-row>
@@ -47,7 +47,7 @@ export default {
   },
   computed: {
     chunkedByFour () {
-      return _chunk(this.videos, 4)
+      return _chunk(this.videos, 6)
     }
   },
   components: {
diff --git a/src/store/watched-videos-db.js b/src/store/watched-videos-db.js
index 8a946f1..0cfe416 100644
--- a/src/store/watched-videos-db.js
+++ b/src/store/watched-videos-db.js
@@ -13,8 +13,10 @@ export const WatchedVideosDB = new PouchDB('WatchedVideosDB', {
 export async function addWatchedVideo (videoObj, currentUrl) {
   return WatchedVideosDB.put({
     _id: generateRandomID(),
-    video: videoObj,
-    url: currentUrl,
+    video: {
+      ...videoObj,
+      url: currentUrl
+    },
     timestamp: new Date()
   })
 }