From 53b116b69d4f06ddaa99d7af4e52e1301b508073 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Thu, 22 Jun 2023 16:44:59 -0700
Subject: [PATCH] ui updates

---
 .../Board/KanbanBoardPlaceholder.vue          |   6 +-
 src/components/Board/MiniBoard.vue            |   1 +
 src/components/Game/GameHeader.vue            |   4 +-
 src/components/Game/GameInBoards.vue          |  22 +-
 src/components/Game/GameMedia.vue             |   4 +-
 src/components/Game/GamePageTile.vue          |  49 ++++
 src/components/Game/GameProgress.vue          |   9 +-
 src/components/Game/SimilarGames.vue          |  93 +++----
 src/components/GameCards/GameCardText.vue     |  18 +-
 src/components/Lists/EditListModal.vue        |   3 +-
 src/components/Lists/TierList.vue             |   4 +-
 src/components/PageHeader.vue                 | 158 +++---------
 src/components/SearchBox.vue                  |   2 +-
 src/game/pages/GamePage.vue                   | 226 ++++++++++--------
 src/notes/pages/NotesPage.vue                 |  27 ++-
 src/pages/GamesPage.vue                       |  55 +++--
 src/public/pages/HomePage.vue                 |  30 +--
 src/settings/pages/SettingsPage.vue           |   3 +-
 src/tags/pages/TagsPage.vue                   |  25 +-
 19 files changed, 354 insertions(+), 385 deletions(-)
 create mode 100644 src/components/Game/GamePageTile.vue

diff --git a/src/components/Board/KanbanBoardPlaceholder.vue b/src/components/Board/KanbanBoardPlaceholder.vue
index 4de012df..cfbce74a 100644
--- a/src/components/Board/KanbanBoardPlaceholder.vue
+++ b/src/components/Board/KanbanBoardPlaceholder.vue
@@ -1,8 +1,8 @@
 <template lang="html">
-  <div class="d-flex mx-2">
+  <div class="d-flex mx-1">
     <div
       v-for="(list, index) in board.lists"
-      :class="`ml-2 list ${getListView(list)}`"
+      :class="`mr-3 list ${getListView(list)}`"
       :key="index"
     >
       <b-card
@@ -88,8 +88,8 @@
             <b-card
               v-else
               no-body
+              :bg-variant="darkTheme ? 'dark' : 'light'"
               img-left
-
             >
               <b-card-body class="p-2">
                 <b-skeleton class="m-0" />
diff --git a/src/components/Board/MiniBoard.vue b/src/components/Board/MiniBoard.vue
index 92af761e..1b9d611c 100644
--- a/src/components/Board/MiniBoard.vue
+++ b/src/components/Board/MiniBoard.vue
@@ -199,6 +199,7 @@ $boardHeight: 200px;
   background-size: cover;
   height: $boardHeight;
   min-width: 300px;
+  text-align: left;
 }
 
 .board {
diff --git a/src/components/Game/GameHeader.vue b/src/components/Game/GameHeader.vue
index c0bb97be..9d958708 100644
--- a/src/components/Game/GameHeader.vue
+++ b/src/components/Game/GameHeader.vue
@@ -32,11 +32,11 @@
 
       <b-dropdown
         :class="['d-md-none', { 'mr-2': !isVerticalNav }]"
-        :variant="darkTheme ? 'secondary' : 'light'"
+        :variant="darkTheme ? 'black' : 'light'"
         no-caret
       >
         <template #button-content>
-          <i class="fa-solid fa-ellipsis fa-fw" />
+          <i class="fa-solid fa-ellipsis" />
         </template>
         <b-dropdown-item-button @click="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })">
           Add note
diff --git a/src/components/Game/GameInBoards.vue b/src/components/Game/GameInBoards.vue
index d85b0df3..643bc06d 100644
--- a/src/components/Game/GameInBoards.vue
+++ b/src/components/Game/GameInBoards.vue
@@ -1,25 +1,13 @@
 <template lang="html">
   <!-- TODO: add menu: allow to remove game from board, view board, edit board, etc... -->
-  <div v-if="user && boardsWithGame.length" class="mt-5">
-    <h3>Found in these boards: </h3>
-
+  <div v-if="user && boardsWithGame.length">
     <div class="board-grid">
-      <b-dropdown
+      <mini-board
         v-for="board in boardsWithGame"
         :key="board.id"
-        variant="transparent"
-        toggle-class="p-0"
-        no-caret
-      >
-        <template #button-content>
-          <mini-board
-            :board="board"
-          />
-        </template>
-        <b-dropdown-item disabled>Remove game from board</b-dropdown-item>
-        <b-dropdown-item :to="{ name: 'board.edit', params: { id: board.id } }">Edit board</b-dropdown-item>
-        <b-dropdown-item @click="handleBoardClick(board.id)">View board</b-dropdown-item>
-      </b-dropdown>
+        :board="board"
+        @click.native="handleBoardClick(board.id)"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/Game/GameMedia.vue b/src/components/Game/GameMedia.vue
index 14c30f87..579ecebe 100644
--- a/src/components/Game/GameMedia.vue
+++ b/src/components/Game/GameMedia.vue
@@ -1,6 +1,6 @@
 <!-- TODO: fix set as wallpaper logic -->
 <template lang="html">
-  <div>
+  <section>
     <masonry
       v-if="activeIndex === null"
       gutter="8px"
@@ -149,7 +149,7 @@
         </modal-header>
       </template>
     </b-modal> -->
-  </div>
+  </section>
 </template>
 
 <script>
diff --git a/src/components/Game/GamePageTile.vue b/src/components/Game/GamePageTile.vue
new file mode 100644
index 00000000..acc618a6
--- /dev/null
+++ b/src/components/Game/GamePageTile.vue
@@ -0,0 +1,49 @@
+<template>
+  <div :class="full ? 'full-tile w-100' : 'half-tile'">
+    <section :class="['p-3 rounded my-3 m-3', darkTheme ? 'bg-dark text-light' : 'bg-light']">
+      <h3>{{ title }}</h3>
+
+      <div :class="['rounded', { 'half-height-scrollable': !full }]">
+        <slot />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  props: {
+    title: String,
+    full: Boolean,
+  },
+
+  computed: {
+    ...mapGetters(['darkTheme']),
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.half-tile {
+  width: 50vw;
+  height: 50vh;
+  overflow: hidden !important;
+
+  @media(max-width: 768px) {
+    width: auto;
+    overflow: auto !important;
+  }
+}
+
+.full-tile {
+  width: 100vw;
+  overflow: auto !important;
+}
+
+.half-height-scrollable {
+  height: calc(50vh - 94px);
+  overflow: auto;
+}
+</style>
diff --git a/src/components/Game/GameProgress.vue b/src/components/Game/GameProgress.vue
index ab4f983b..0c763720 100644
--- a/src/components/Game/GameProgress.vue
+++ b/src/components/Game/GameProgress.vue
@@ -82,10 +82,9 @@ export default {
 
         await this.$store.dispatch('SAVE_PROGRESSES_NO_MERGE');
         this.progress = 0;
-        this.$bus.$emit('ALERT', { message: 'Progress deleted' });
+        this.$bvToast.toast('Progress deleted');
       } catch (e) {
-        this.$bus.$emit('ALERT', { type: 'error', message: 'Error deleting progress' });
-        this.$bvToast.toast('There was an error deleting your progress', { title: `${name} progress`, variant: 'error' });
+        this.$bvToast.toast('There was an error deleting your progress', { variant: 'error' });
       }
 
       this.editing = false;
@@ -103,10 +102,10 @@ export default {
 
         await this.$store.dispatch('SAVE_PROGRESSES');
 
-        this.$bus.$emit('ALERT', { type: 'success', message: 'Progress saved' });
+        this.$bvToast.toast('Progress saved');
       } catch (e) {
         this.saving = false;
-        this.$bus.$emit('ALERT', { type: 'error', message: 'Error saving progress' });
+        this.$bvToast.toast('There was an error saving your progress', { variant: 'error' });
       }
 
       this.editing = false;
diff --git a/src/components/Game/SimilarGames.vue b/src/components/Game/SimilarGames.vue
index 0232ee02..a3d8f179 100644
--- a/src/components/Game/SimilarGames.vue
+++ b/src/components/Game/SimilarGames.vue
@@ -1,78 +1,52 @@
-<template lang="html">
-  <section v-if="similarGames.length" class="mt-3">
-    <div class="d-flex align-items-center justify-content-between mb-2 w-100">
-      <h3>You may also like</h3>
-
-      <b-button-group v-if="pages > 1">
-        <b-button :disabled="!showPrevButton" @click="page = page - 1">
-          <i class="fa-solid fa-chevron-left" />
-        </b-button>
-
-        <b-button :disabled="!showNextButton" @click="page = page + 1">
-          <i class="fa-solid fa-chevron-right" />
-        </b-button>
-      </b-button-group>
-    </div>
-
-    <div class="game-grid">
-      <router-link
-        v-for="game in slicedSimilarGames"
-        :key="game.id"
-        :to="{ name: 'game', params: { id: game.id, slug: game.slug } }"
+<template>
+  <section v-if="similarGames.length">
+    <div class="media-grid rounded">
+      <masonry
+        gutter="8px"
+        :cols="{ default: 4, 1200: 3, 768: 3, 480: 2 }"
       >
-        <b-img
-          fluid
-          rounded
-          :src="$options.getImageUrl(game)"
-          :alt="game.name"
-          img-top
+        <game-card-search
+          v-for="game in similarGames"
+          :game="game"
+          :key="game.id"
         />
-      </router-link>
+      </masonry>
     </div>
+
+    <!-- <router-link
+      v-for="game in similarGames"
+      :key="game.id"
+      :to="{ name: 'game', params: { id: game.id, slug: game.slug } }"
+    >
+      <b-img
+        fluid
+        rounded
+        :src="$options.getImageUrl(game)"
+        :alt="game.name"
+        img-top
+      />
+    </router-link> -->
   </section>
 </template>
 
 <script>
+import GameCardSearch from '@/components/GameCards/GameCardSearch';
 import { mapState } from 'vuex';
 import { getImageUrl } from '@/utils';
-import { GAME_CAROUSEL_PAGE_SIZE } from '@/constants';
 
 export default {
-  getImageUrl,
-
-  data() {
-    return {
-      page: 0,
-    }
+  components: {
+    GameCardSearch,
   },
 
+  getImageUrl,
+
   computed: {
     ...mapState(['game']),
 
-    showNextButton() {
-      return this.page < this.pages - 1;
-    },
-
-    showPrevButton() {
-      return this.page > 0;
-    },
-
-    pages() {
-      const gameCount = this.similarGames?.length;
-
-      if (!gameCount) return;
-
-      return Math.ceil(gameCount / GAME_CAROUSEL_PAGE_SIZE);
-    },
-
     similarGames() {
       return this.game?.similar_games || [];
     },
-
-    slicedSimilarGames() {
-      const offset = GAME_CAROUSEL_PAGE_SIZE * this.page;
-      return this.similarGames?.slice(offset, offset + GAME_CAROUSEL_PAGE_SIZE);
-    },
   },
 
   watch: {
@@ -86,3 +60,10 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.media-grid {
+  height: calc(50vh - 94px);
+  overflow: auto;
+}
+</style>
diff --git a/src/components/GameCards/GameCardText.vue b/src/components/GameCards/GameCardText.vue
index 0944e640..f681d4cb 100644
--- a/src/components/GameCards/GameCardText.vue
+++ b/src/components/GameCards/GameCardText.vue
@@ -1,8 +1,8 @@
 <template lang="html">
   <b-card
     no-body
-    :bg-variant="darkTheme ? 'dark' : 'white'"
-    :text-variant="darkTheme ? 'white' : 'dark'"
+    :bg-variant="darkTheme ? 'black' : 'white'"
+    :text-variant="darkTheme ? 'white' : 'black'"
     class="cursor-pointer"
   >
     <b-row no-gutters v-if="game && game.name">
@@ -29,6 +29,20 @@
             Note
           </b-link>
 
+          <template v-if="tagsApplied.length === 1">
+            <b-button
+              v-for="({ bgColor, textColor, name }) in tagsApplied"
+              :key="name"
+              rounded
+              class="mr-1 mb-1 py-0 px-1"
+              size="sm"
+              variant="transparent"
+              :style="`background-color: ${bgColor}; color: ${textColor}`"
+            >
+              <small>{{ name }}</small>
+            </b-button>
+          </template>
+
           <b-link
             v-if="tagsApplied.length"
             :id="`${gameId}-${listIndex}`"
diff --git a/src/components/Lists/EditListModal.vue b/src/components/Lists/EditListModal.vue
index 0b71d99e..d949e232 100644
--- a/src/components/Lists/EditListModal.vue
+++ b/src/components/Lists/EditListModal.vue
@@ -236,12 +236,11 @@ export default {
           this.saving = false;
 
           this.$bvToast.toast('There was an error deleting list', { variant: 'danger' });
-          this.$bus.$emit('ALERT', { type: 'error', message: 'Error deleting list' });
         });
 
       this.saving = false;
       this.$bvModal.hide('edit-list-modal');
-      this.$bus.$emit('ALERT', { type: 'success', message: 'List deleted' });
+      this.$bvToast.toast('List deleted');
     },
 
     async saveList() {
diff --git a/src/components/Lists/TierList.vue b/src/components/Lists/TierList.vue
index 181541b8..fcd0c140 100644
--- a/src/components/Lists/TierList.vue
+++ b/src/components/Lists/TierList.vue
@@ -144,9 +144,9 @@ export default {
         await this.$store.dispatch('SAVE_GAME_BOARD', board);
         await this.$store.dispatch('LOAD_BOARD', board.id);
         await this.$store.dispatch('LOAD_IGDB_GAMES', [gameId]);
-        this.$bus.$emit('ALERT', { type: 'success', message: 'Game added' });
+        this.$bvToast.toast('Game added');
       } catch (e) {
-        // this.$bvToast.toast(`There was an error adding "${this.game.name}"`, { title: list.name, variant: 'danger' });
+        this.$bvToast.toast('There was an error adding game', { variant: 'danger' });
       }
     },
 
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 89e1f11f..bbe6124a 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -1,50 +1,40 @@
-<!-- TODO: remove alert, use toast, style toast -->
 <!-- // LanguageSettings,
 // SteamSettingsPage,
 // import SteamSettingsPage from '@/pages/SteamSettingsPage';
 // import LanguageSettings from '@/components/Settings/LanguageSettings'; -->
+<!-- TODO: allow to collapse menu -->
 
 <template lang="html">
-  <div class="page-header position-relative">
-    <header :class="[darkTheme ? 'bg-dark' : 'bg-white', isVerticalNav ? 'py-3 px-2' : 'px-3 py-2', `nav-${navPosition}`]">
-      <!-- TODO: allow to collapse menu -->
-      <div :class="['alert', alertType, { visible }]">
-        <div class="d-flex align-items-center">
-          <i :class="['fa-solid fa-info text-white mr-2', alertIcon]" />
-          <strong>{{ alert.message }}</strong>
-        </div>
-      </div>
+  <header :class="[darkTheme ? 'bg-dark' : 'bg-white', isVerticalNav ? 'p-2' : 'px-3 py-2', `nav-${navPosition}`]">
+    <main-menu :class="isVerticalNav ? ' mb-2' : ''" />
 
-      <main-menu :class="isVerticalNav ? ' mb-2' : ''" />
+    <portal-target
+      v-if="!isVerticalNav"
+      class="ml-3"
+      name="pageTitle"
+      multiple
+    />
 
-      <portal-target
-        v-if="!isVerticalNav"
-        class="ml-3"
-        name="pageTitle"
-        multiple
-      />
+    <div :class="['align-items-center d-flex ml-auto', isVerticalNav ? 'h-100 flex-column' : '']">
+        <portal-target name="headerActions" multiple />
 
-      <div :class="['align-items-center d-flex ml-auto', isVerticalNav ? 'h-100 flex-column' : '']">
-          <portal-target name="headerActions" multiple />
+        <b-button
+          :variant="darkTheme ? 'black' : 'light'"
+          :class="isVerticalNav ? 'mt-auto mb-2' : ''"
+          :to="{ name: 'search' }"
+        >
+          <i class="fa fa-search" aria-hidden="true" />
+        </b-button>
 
-          <b-button
-            :variant="darkTheme ? 'black' : 'light'"
-            :class="isVerticalNav ? 'mt-auto mb-2' : ''"
-            :to="{ name: 'search' }"
-          >
-            <i class="fa fa-fw fa-search" aria-hidden="true" />
-          </b-button>
-
-          <b-button
-            v-if="!user"
-            class="ml-2"
-            variant="black"
-            :to="{ name: 'auth' }"
-          >
-            Get started — it's free!
-          </b-button>
-      </div>
-    </header>
+        <b-button
+          v-if="!user"
+          class="ml-2"
+          variant="black"
+          :to="{ name: 'auth' }"
+        >
+          Get started — it's free!
+        </b-button>
+    </div>
     <!-- <b-collapse id="header">
 
     </b-collapse> -->
@@ -58,7 +48,7 @@
     >
       <i class="fa-solid fa-caret-down" />
     </b-button> -->
-  </div>
+  </header>
 </template>
 
 <script>
@@ -70,29 +60,10 @@ export default {
     MainMenu,
   },
 
-  data() {
-    return {
-      alert: {},
-      visible: false,
-    }
-  },
-
-  mounted() {
-    this.$bus.$on('ALERT', this.setAlert);
-  },
-
-  destroyed() {
-    this.$bus.$off('ALERT');
-  },
-
   computed: {
     ...mapState(['user', 'settings']),
     ...mapGetters(['darkTheme', 'navPosition', 'isVerticalNav']),
 
-    alertType() {
-      return this.alert?.type;
-    },
-
     isTopNav() {
       return this.navPosition === 'top';
     },
@@ -104,24 +75,6 @@ export default {
     isSearchPage() {
       return this.$route.name === 'search';
     },
-
-    alertIcon() {
-      if (this.alertType === 'error') return 'fa-triangle-exclamation';
-      if (this.alertType === 'success') return 'fa-check';
-
-      return 'fa-info';
-    },
-  },
-
-  methods: {
-    setAlert(alert) {
-      this.alert = alert;
-      this.visible = true;
-
-      setTimeout(() => {
-        this.visible = false;
-      }, 2000);
-    },
   },
 };
 </script>
@@ -158,52 +111,11 @@ header {
   }
 }
 
-.header-toggle {
-  position: absolute;
-  padding: 0;
-  width: 30px;
-  left: calc(50vw - 15px);
-  background: var(--light);
-}
-
-.alert {
-  position: fixed;
-  height: 40px;
-  // max-width: calc(100%  - 2rem);
-  // min-width: 240px;
-  // width: auto;
-  z-index: 3;
-  margin: 1rem;
-  display: flex;
-  align-items: center;
-  background: var(--light);
-  right: -75vw;
-  transition: right 300ms ease 0s;
-  width: 340px;
-
-  @media(max-width: 1024px) {
-    width: 50vw;
-  }
-
-  @media(max-width: 780px) {
-    width: 50vw;
-  }
-
-  @media(max-width: 480px) {
-    width: calc(100vw - 1rem - 42px);
-    right: -100vw;
-  }
-
-  &.visible {
-    right: -2rem;
-  }
-
-  &.success {
-    background: var(--success);
-  }
-
-  &.error {
-    background: var(--danger);
-  }
-}
+// .header-toggle {
+//   position: absolute;
+//   padding: 0;
+//   width: 30px;
+//   left: calc(50vw - 15px);
+//   background: var(--light);
+// }
 </style>
diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue
index ddba25f5..64ed94fe 100644
--- a/src/components/SearchBox.vue
+++ b/src/components/SearchBox.vue
@@ -16,7 +16,7 @@
 
       <i
         v-else
-        class="fas fa-search fa-fw"
+        class="fas fa-search"
         aria-hidden
       />
     </b-button>
diff --git a/src/game/pages/GamePage.vue b/src/game/pages/GamePage.vue
index 78d9e9c0..08ae8eb0 100644
--- a/src/game/pages/GamePage.vue
+++ b/src/game/pages/GamePage.vue
@@ -1,5 +1,15 @@
 <template lang="html">
+  <div v-if="!loading && !game" class="pt-5">
+    <div class="d-flex justify-content-center align-items-center">
+      <h1 class="mr-3 pr-3 align-top border-right border-danger inline-block align-content-center text-danger">404</h1>
+      <div class="inline-block align-middle">
+        <h2 class="font-weight-normal lead text-danger">Game was not found.</h2>
+      </div>
+    </div>
+  </div>
+
   <section
+    v-else
     :class="[{ 'text-light': darkTheme && hasWallpaper, 'pt-3': !hasArtworks }, 'game-page pb-5']"
     :style="background && this.darkTheme ? `background-image: url(${background})` : ''"
   >
@@ -217,17 +227,6 @@
           class="pt-3"
         >
           <b-row>
-            <b-alert
-              v-if="note"
-              v-html="note"
-              show
-              class="cursor-pointer mt-3"
-              variant="warning"
-              @click.native="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })"
-            />
-
-            <game-progress />
-
             <b-col cols="6" sm="4" md="3" lg="12" v-if="gameGenres">
               <h4 class="mt-3">Genres: </h4>
 
@@ -363,58 +362,6 @@
               </div>
             </b-col> -->
 
-            <b-col cols="6" sm="4" md="3" lg="12" v-if="gameRemasters">
-              <h4>Remasters</h4>
-
-              <router-link
-                v-for="remaster in gameRemasters"
-                :key="remaster.id"
-                :to="{ name: 'game', params: { id: remaster.id, slug: remaster.slug } }"
-              >
-                <b-img
-                  :src="$options.getImageUrl(remaster)"
-                  :alt="remaster.name"
-                  rounded
-                  width="120"
-                  fluid
-                />
-              </router-link>
-            </b-col>
-
-            <b-col cols="6" sm="4" md="3" lg="12" v-if="gameRemakes" class="text-left mt-3">
-              <h4>Remakes</h4>
-
-              <router-link
-                v-for="remake in gameRemakes"
-                :key="remake.id"
-                :to="{ name: 'game', params: { id: remake.id, slug: remake.slug } }"
-              >
-                <b-img
-                  :src="$options.getImageUrl(remake)"
-                  :alt="remake.name"
-                  rounded
-                  width="120"
-                  fluid
-                />
-              </router-link>
-            </b-col>
-
-            <b-col cols="6" sm="4" md="3" lg="12" v-if="parentGame" class="mt-3 text-left">
-              <h4>Original game</h4>
-
-              <router-link
-                :to="{ name: 'game', params: { id: parentGame.id, slug: parentGame.slug } }"
-              >
-                <b-img
-                  :src="$options.getImageUrl(parentGame)"
-                  :alt="parentGame.name"
-                  rounded
-                  width="120"
-                  fluid
-                />
-              </router-link>
-            </b-col>
-
             <b-col
               v-if="gameLinks.length"
               cols="6"
@@ -459,30 +406,6 @@
         v-html="legalNotice"
       />
 
-      <div v-if="gamePorts" class="text-left mt-3">
-        <h3>Ports</h3>
-
-        <div class="game-grid">
-          <router-link
-            v-for="port in gamePorts"
-            :key="port.id"
-            :to="{ name: 'game', params: { id: port.id, slug: port.slug } }"
-          >
-            <b-img
-              :src="$options.getImageUrl(port)"
-              :alt="port.name"
-              rounded
-              fluid
-            />
-          </router-link>
-        </div>
-      </div>
-
-      <game-in-boards />
-      <game-bundles />
-      <game-collection />
-      <similar-games />
-
       <!-- <timeline
         v-if="twitterHandle"
         :id="twitterHandle"
@@ -492,18 +415,110 @@
       </timeline> -->
     </b-container>
 
-    <b-row>
-      <game-media />
-    </b-row>
+    <game-page-tile full>
+      <b-row>
+        <b-col>
+          <b-alert
+            v-if="note"
+            v-html="note"
+            show
+            class="cursor-pointer mt-3"
+            variant="warning"
+            @click.native="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })"
+          />
+        </b-col>
 
-    <div v-if="!loading && !game" class="pt-5">
-      <div class="d-flex justify-content-center align-items-center" id="main">
-        <h1 class="mr-3 pr-3 align-top border-right inline-block align-content-center">404</h1>
-        <div class="inline-block align-middle">
-          <h2 class="font-weight-normal lead" id="desc">Game was not found.</h2>
+        <b-col>
+          <game-progress />
+        </b-col>
+      </b-row>
+    </game-page-tile>
+
+    <div class="d-flex flex-column flex-md-row">
+      <game-page-tile title="Game screenshots">
+        <game-media v-if="!loading" />
+      </game-page-tile>
+
+      <game-page-tile title="Similar games">
+        <similar-games />
+        <game-bundles />
+        <game-collection />
+        <span v-if="parentGame">
+          <h4>Original game</h4>
+
+          <router-link
+            :to="{ name: 'game', params: { id: parentGame.id, slug: parentGame.slug } }"
+          >
+            <b-img
+              :src="$options.getImageUrl(parentGame)"
+              :alt="parentGame.name"
+              rounded
+              width="120"
+              fluid
+            />
+          </router-link>
+        </span>
+
+        <div v-if="gameRemasters">
+          <h4>Remasters</h4>
+
+          <router-link
+            v-for="remaster in gameRemasters"
+            :key="remaster.id"
+            :to="{ name: 'game', params: { id: remaster.id, slug: remaster.slug } }"
+          >
+            <b-img
+              :src="$options.getImageUrl(remaster)"
+              :alt="remaster.name"
+              rounded
+              width="120"
+              fluid
+            />
+          </router-link>
         </div>
-      </div>
+
+        <span v-if="gameRemakes">
+          <h4>Remakes</h4>
+
+          <router-link
+            v-for="remake in gameRemakes"
+            :key="remake.id"
+            :to="{ name: 'game', params: { id: remake.id, slug: remake.slug } }"
+          >
+            <b-img
+              :src="$options.getImageUrl(remake)"
+              :alt="remake.name"
+              rounded
+              width="120"
+              fluid
+            />
+          </router-link>
+        </span>
+
+        <div v-if="gamePorts" class="text-left mt-3">
+          <h3>Ports</h3>
+
+          <div class="game-grid">
+            <router-link
+              v-for="port in gamePorts"
+              :key="port.id"
+              :to="{ name: 'game', params: { id: port.id, slug: port.slug } }"
+            >
+              <b-img
+                :src="$options.getImageUrl(port)"
+                :alt="port.name"
+                rounded
+                fluid
+              />
+            </router-link>
+          </div>
+        </div>
+      </game-page-tile>
     </div>
+
+    <game-page-tile title="Found in these boards" full>
+      <game-in-boards v-if="!loading" />
+    </game-page-tile>
   </section>
 </template>
 
@@ -514,6 +529,7 @@ import { WEBSITE_CATEGORIES, GAME_CATEGORIES, PLATFORMS } from '@/constants';
 // import AmazonLinks from '@/components/Game/AmazonLinks';
 // import GameDetails from '@/components/Game/GameDetails';
 import GameMedia from '@/components/Game/GameMedia';
+import GamePageTile from '@/components/Game/GamePageTile';
 import GameInBoards from '@/components/Game/GameInBoards';
 import GameProgress from '@/components/Game/GameProgress';
 import GameTagsModal from '@/components/Game/GameTagsModal';
@@ -539,6 +555,7 @@ export default {
     // AmazonLinks,
     // GameDetails,
     GameMedia,
+    GamePageTile,
     GameInBoards,
     GameRatings,
     // GameSpeedruns,
@@ -936,8 +953,15 @@ export default {
 }
 
 .has-artworks {
-  @media(min-width: 768px) {
-    margin-top: -22vh;
+  margin-top: -22vh;
+
+  @media(max-width: 1024px) {
+    margin-top: -10vh;
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  @media(max-width: 767px) {
+    margin: 0;
   }
 }
 </style>
@@ -1095,4 +1119,10 @@ export default {
     99% {top: -60px; visibility: hidden;}
     100% {top: 30px; visibility: hidden;}
   }
+
+  .half-tile {
+    width: 50vw;
+    height: 50vh;
+    overflow: hidden !important;
+  }
 </style>
diff --git a/src/notes/pages/NotesPage.vue b/src/notes/pages/NotesPage.vue
index 5c1398e5..990ad304 100644
--- a/src/notes/pages/NotesPage.vue
+++ b/src/notes/pages/NotesPage.vue
@@ -1,28 +1,31 @@
 <template lang="html">
   <b-container>
-    <page-title :title="$t('notes.title')" />
+    <page-title :title="$t('notes.title')">
+      <game-selector
+        v-if="!isEmpty"
+        title="Select game to add a note"
+        :variant="darkTheme ? 'success' : 'primary'"
+        :class="{ 'mr-3': !isVerticalNav }"
+        @select-game="createNote"
+      >
+      <i class="d-sm-none fa-solid fa-plus" />
+      <span class="d-none d-sm-inline">Create note</span>
+      </game-selector>
+    </page-title>
 
     <b-spinner v-if="loading" class="spinner-centered" />
 
     <template v-else>
       <portal to="headerActions">
         <game-selector
-          v-if="!isEmpty"
+          v-if="!isEmpty && !isVerticalNav"
           title="Select game to add a note"
-          size="md"
           :variant="darkTheme ? 'success' : 'primary'"
           :class="{ 'mr-3': !isVerticalNav }"
           @select-game="createNote"
         >
-          <i
-            v-if="isVerticalNav"
-            class="fa-solid fa-plus fa-fw"
-          />
-
-          <template v-else>
-            <i class="d-sm-none fa-solid fa-plus" />
-            <span class="d-none d-sm-inline">Create note</span>
-          </template>
+        <i class="d-sm-none fa-solid fa-plus" />
+        <span class="d-none d-sm-inline">Create note</span>
         </game-selector>
       </portal>
 
diff --git a/src/pages/GamesPage.vue b/src/pages/GamesPage.vue
index 225e6a68..7a9c5eeb 100644
--- a/src/pages/GamesPage.vue
+++ b/src/pages/GamesPage.vue
@@ -1,42 +1,41 @@
 <template lang="html">
   <div>
-    <page-title title="Games">
-      <b-button
-        v-if="isVerticalNav"
-        @click="toggleView"
-        class="mr-3"
-        variant="light"
-      >
-        <i v-if="view === 'grid'" class="fa-solid fa-list" />
-        <i v-else class="fa-solid fa-table-cells" />
-      </b-button>
-    </page-title>
-
     <b-container class="px-0">
-      <!-- TODO: add sorting -->
-      <!-- TODO: add more views -->
-      <!-- TODO: add filtering -->
-      <!-- TODO: add filtering -->
-
-      <portal to="headerActions">
+      <portal
+        v-if="!isVerticalNav"
+        to="headerActions"
+      >
         <b-button
-          v-if="!isVerticalNav"
           @click="toggleView"
           class="mr-3"
-          variant="dark"
+          :variant="darkTheme ? 'black' : 'light'"
         >
           <i :class="`fa-solid ${view === 'grid' ? 'fa-list' : 'fa-table-cells'}`" />
         </b-button>
-
-        <!-- <b-button class="mr-3">
-          Sort
-        </b-button>
-
-        <b-button class="mr-3">
-          Filter
-        </b-button> -->
       </portal>
 
+      <page-title title="Games">
+        <b-button
+          v-if="isVerticalNav"
+          @click="toggleView"
+          :variant="darkTheme ? 'dark' : 'light'"
+        >
+          <i v-if="view === 'grid'" class="fa-solid fa-list" />
+          <i v-else class="fa-solid fa-table-cells" />
+        </b-button>
+      </page-title>
+      <!-- TODO: add sorting -->
+      <!-- TODO: add filtering -->
+      <!-- TODO: add filtering -->
+
+      <!-- <b-button class="mr-3">
+        Sort
+      </b-button>
+
+      <b-button class="mr-3">
+        Filter
+      </b-button> -->
+
       <empty-state
         v-if="!user"
         illustration="games"
diff --git a/src/public/pages/HomePage.vue b/src/public/pages/HomePage.vue
index c374393d..dcbc87eb 100644
--- a/src/public/pages/HomePage.vue
+++ b/src/public/pages/HomePage.vue
@@ -4,7 +4,7 @@
       <page-title :title="user ? 'Boards' : 'Gamebrary'">
         <b-button
           v-if="user && isVerticalNav"
-          :variant="darkTheme ? 'secondary' : 'light'"
+          :variant="darkTheme ? 'success' : 'primary'"
           class="mr-2"
           :to="{ name: 'create.board' }"
         >
@@ -14,29 +14,17 @@
       </page-title>
 
       <portal to="headerActions">
-        <b-button-group
+        <b-button
           v-if="user"
           :class="isVerticalNav ? 'mt-2' : 'mr-3'"
-          :vertical="isVerticalNav"
+          @click="showPublic = !showPublic"
+          v-b-tooltip.hover
+          variant="black"
+          :title="showPublic ? 'My boards' : 'All boards'"
         >
-          <b-button
-            @click="showPublic = false"
-            :variant="showPublic ? offVariant : 'primary'"
-            v-b-tooltip.hover
-            title="My boards"
-          >
-            <i class="fa-solid fa-user fa-fw" />
-          </b-button>
-
-          <b-button
-            @click="showPublic = true"
-            :variant="showPublic ? 'primary' : offVariant"
-            v-b-tooltip.hover
-            title="All boards"
-          >
-            <i class="fa-solid fa-users fa-fw" />
-          </b-button>
-        </b-button-group>
+          <i v-if="showPublic" class="fa-solid fa-user" />
+          <i v-else class="fa-solid fa-users" />
+        </b-button>
       </portal>
 
       <div
diff --git a/src/settings/pages/SettingsPage.vue b/src/settings/pages/SettingsPage.vue
index 24d38073..d28fc3ca 100644
--- a/src/settings/pages/SettingsPage.vue
+++ b/src/settings/pages/SettingsPage.vue
@@ -147,7 +147,8 @@ export default {
 
       // TODO: commit first then save settings, to allow unauthed use
       await this.$store.dispatch('SAVE_SETTINGS', payload)
-        .catch(() => {
+        .catch((e) => {
+          console.log(e);
           this.$bvToast.toast('There was an error saving your settings', { variant: 'danger' });
           this.saving = false;
         });
diff --git a/src/tags/pages/TagsPage.vue b/src/tags/pages/TagsPage.vue
index 2168a058..2c1c9e7f 100644
--- a/src/tags/pages/TagsPage.vue
+++ b/src/tags/pages/TagsPage.vue
@@ -1,19 +1,24 @@
 <template lang="html">
   <section>
     <b-container>
-      <page-title title="Tags" />
-
-      <portal v-if="!loading && tags.length > 0" to="headerActions">
+      <page-title title="Tags">
         <b-button
-          :class="{ 'mr-3': !isVerticalNav}"
           :variant="darkTheme ? 'success' : 'primary'"
           :to="{ name: 'tag.create' }"
         >
-          <i
-            v-if="isVerticalNav"
-            class="fa-solid fa-plus fa-fw"
-          />
-          <span v-else>Add tag</span>
+          <i class="d-sm-none fa-solid fa-plus" />
+          <span class="d-none d-sm-inline">Add tag</span>
+        </b-button>
+      </page-title>
+
+      <portal v-if="!isVerticalNav && !loading && tags.length > 0" to="headerActions">
+        <b-button
+          :variant="darkTheme ? 'success' : 'primary'"
+          :to="{ name: 'tag.create' }"
+          class="mr-3"
+        >
+          <i class="d-sm-none fa-solid fa-plus" />
+          <span class="d-none d-sm-inline">Add tag</span>
         </b-button>
       </portal>
 
@@ -29,7 +34,7 @@
           variant="primary"
           :to="{ name: 'tag.create' }"
         >
-          Create a tag
+          Add tag
         </b-button>
        </empty-state>