From af8fc537040573a7e8417b8b0a0891ae93b302c9 Mon Sep 17 00:00:00 2001
From: Redblueflame <contact@redblueflame.com>
Date: Wed, 31 Mar 2021 19:09:18 +0200
Subject: [PATCH] Layout refactor (#150)

* Revert recent commits

* Move things around, and do preparation work for nested page systems.

* Fixed issue on side bar not appearing
---
 .github/ISSUE_TEMPLATE/bug_report.md          | 24 ------------
 .github/ISSUE_TEMPLATE/feature_request.md     | 20 ----------
 assets/styles/components.scss                 | 12 ++++++
 components/{ui => }/Advertisement.vue         |  0
 components/{wrapper => layout}/ModPage.vue    | 11 +++---
 components/ui/ConfirmPopup.vue                |  5 ---
 components/ui/{search => }/Pagination.vue     |  6 +--
 components/ui/Popup.vue                       |  1 +
 components/ui/ProjectCard.vue                 |  8 +++-
 components/ui/{ => search}/Categories.vue     |  0
 middleware/auth.js                            |  6 +--
 package-lock.json                             |  1 +
 .../DashboardPage.vue => pages/dashboard.vue  | 19 ++++------
 pages/dashboard/follows.vue                   | 38 ++++++++-----------
 pages/dashboard/misc/revoke-token.vue         | 24 ++++++------
 pages/dashboard/moderation.vue                | 27 +++++++------
 pages/dashboard/notifications.vue             | 11 +++---
 pages/dashboard/projects.vue                  |  7 +---
 pages/dashboard/settings.vue                  |  8 ++--
 pages/mod/_id/edit.vue                        |  2 +-
 pages/mod/_id/index.vue                       |  2 +-
 pages/mod/_id/newversion.vue                  |  2 +-
 pages/mod/_id/settings.vue                    |  2 +-
 pages/mod/_id/version/_version/edit.vue       |  2 +-
 pages/mod/_id/version/_version/index.vue      |  4 +-
 pages/mod/_id/versions.vue                    |  2 +-
 pages/mod/create.vue                          |  2 +-
 pages/mods.vue                                |  4 +-
 pages/user/_id.vue                            |  2 +-
 29 files changed, 100 insertions(+), 152 deletions(-)
 delete mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
 delete mode 100644 .github/ISSUE_TEMPLATE/feature_request.md
 rename components/{ui => }/Advertisement.vue (100%)
 rename components/{wrapper => layout}/ModPage.vue (98%)
 rename components/ui/{search => }/Pagination.vue (94%)
 rename components/ui/{ => search}/Categories.vue (100%)
 rename components/wrapper/DashboardPage.vue => pages/dashboard.vue (84%)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index fb57da5f8..000000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve labrinth
-title: ''
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Additional context**
-Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index e301d68ce..000000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: feature request
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 85a731baa..6edba8b63 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -408,3 +408,15 @@
   }
 
 }
+
+.section-header {
+  @extend %card;
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+  margin-bottom: var(--spacing-card-md);
+  h3 {
+    margin: auto 0;
+    color: var(--color-text-dark);
+    font-weight: var(--font-weight-extrabold);
+  }
+}
+
diff --git a/components/ui/Advertisement.vue b/components/Advertisement.vue
similarity index 100%
rename from components/ui/Advertisement.vue
rename to components/Advertisement.vue
diff --git a/components/wrapper/ModPage.vue b/components/layout/ModPage.vue
similarity index 98%
rename from components/wrapper/ModPage.vue
rename to components/layout/ModPage.vue
index a3c3a3a7e..658288904 100644
--- a/components/wrapper/ModPage.vue
+++ b/components/layout/ModPage.vue
@@ -8,7 +8,7 @@
               :src="
                 mod.icon_url
                   ? mod.icon_url
-                  : 'https://cdn.modrinth.com/placeholder.svg'
+                  : 'https://cdn.modrinth.com/placeholder.svg?inline'
               "
               alt="mod - icon"
             />
@@ -38,7 +38,7 @@
           </div>
           <div class="buttons">
             <nuxt-link
-              v-if="this.$auth.user && this.$auth.user.id"
+              v-if="this.$auth.user"
               :to="`/report/create?id=${mod.id}&t=mod`"
               class="iconified-button"
             >
@@ -346,7 +346,7 @@
 
 <script>
 import axios from 'axios'
-import Categories from '~/components/ui/Categories'
+import Categories from '~/components/ui/search/Categories'
 import MFooter from '~/components/layout/MFooter'
 
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
@@ -364,7 +364,7 @@ import ExternalIcon from '~/assets/images/utils/external.svg?inline'
 
 import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
 import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
-import Advertisement from '~/components/ui/Advertisement'
+import Advertisement from '~/components/Advertisement'
 
 export default {
   name: 'ModPage',
@@ -676,10 +676,11 @@ export default {
     overflow-y: hidden;
   }
 }
-
+/*
 @media screen and (max-width: 1400px) {
   .mod-info {
     display: none;
   }
 }
+*/
 </style>
diff --git a/components/ui/ConfirmPopup.vue b/components/ui/ConfirmPopup.vue
index dfc661da9..d4afc6e95 100644
--- a/components/ui/ConfirmPopup.vue
+++ b/components/ui/ConfirmPopup.vue
@@ -35,13 +35,8 @@
 </template>
 
 <script>
-import Popup from '~/components/ui/Popup'
-
 export default {
   name: 'ConfirmPopup',
-  components: {
-    Popup,
-  },
   props: {
     confirmationText: {
       type: String,
diff --git a/components/ui/search/Pagination.vue b/components/ui/Pagination.vue
similarity index 94%
rename from components/ui/search/Pagination.vue
rename to components/ui/Pagination.vue
index f6b2e3c19..b0ef7ff5d 100644
--- a/components/ui/search/Pagination.vue
+++ b/components/ui/Pagination.vue
@@ -43,9 +43,9 @@
 </template>
 
 <script>
-import GapIcon from '~/assets/images/utils/gap.svg'
-import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg'
-import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
+import GapIcon from '~/assets/images/utils/gap.svg?inline'
+import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg?inline'
+import RightArrowIcon from '~/assets/images/utils/right-arrow.svg?inline'
 
 export default {
   name: 'Pagination',
diff --git a/components/ui/Popup.vue b/components/ui/Popup.vue
index bd6d49dcb..299b55c37 100644
--- a/components/ui/Popup.vue
+++ b/components/ui/Popup.vue
@@ -32,6 +32,7 @@ export default {
   opacity: 0.6;
   overflow-x: hidden;
 }
+
 .popup-body {
   position: fixed;
   top: 50%;
diff --git a/components/ui/ProjectCard.vue b/components/ui/ProjectCard.vue
index 851b64736..ddba6e8b7 100644
--- a/components/ui/ProjectCard.vue
+++ b/components/ui/ProjectCard.vue
@@ -3,7 +3,11 @@
     <div class="icon">
       <nuxt-link v-if="isModrinth" :to="'/mod/' + id">
         <img
-          :src="iconUrl ? iconUrl : 'https://cdn.modrinth.com/placeholder.svg'"
+          :src="
+            iconUrl
+              ? iconUrl
+              : 'https://cdn.modrinth.com/placeholder.svg?inline'
+          "
           :alt="name"
         />
       </nuxt-link>
@@ -103,7 +107,7 @@
 </template>
 
 <script>
-import Categories from '~/components/ui/Categories'
+import Categories from '~/components/ui/search/Categories'
 
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
diff --git a/components/ui/Categories.vue b/components/ui/search/Categories.vue
similarity index 100%
rename from components/ui/Categories.vue
rename to components/ui/search/Categories.vue
diff --git a/middleware/auth.js b/middleware/auth.js
index 1938ddc4f..ee800dc7e 100644
--- a/middleware/auth.js
+++ b/middleware/auth.js
@@ -6,14 +6,10 @@ export default async function (context) {
     }
 
     if (context.route.query.code) {
-      const date = new Date()
-      date.setFullYear(new Date().getFullYear() + 1)
-
       context.app.$cookies.set('auth-token', context.route.query.code, {
         secure: true,
         sameSite: 'Strict',
         httpOnly: true,
-        expires: date,
       })
 
       await context.store.dispatch('auth/fetchUser', {
@@ -36,7 +32,7 @@ export default async function (context) {
 
   if (!context.$auth.user) {
     return context.redirect(
-      `https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com${context.route.path}`
+      `https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com${context.route.fullPath}`
     )
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 63b509903..35bd2d1cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "knossos",
       "version": "1.0.0",
       "dependencies": {
         "@nuxtjs/axios": "^5.12.5",
diff --git a/components/wrapper/DashboardPage.vue b/pages/dashboard.vue
similarity index 84%
rename from components/wrapper/DashboardPage.vue
rename to pages/dashboard.vue
index cf5746df6..7bd2da1fb 100644
--- a/components/wrapper/DashboardPage.vue
+++ b/pages/dashboard.vue
@@ -11,6 +11,10 @@
             <NotificationsIcon />
             Notifications
           </nuxt-link>
+          <nuxt-link :to="'/dashboard/follows'" class="tab last">
+            <FollowIcon />
+            Followed Mods
+          </nuxt-link>
           <nuxt-link
             v-if="
               $auth.user.role === 'admin' || $auth.user.role === 'moderator'
@@ -29,7 +33,7 @@
         <m-footer class="footer" />
       </div>
       <div class="content">
-        <slot />
+        <NuxtChild />
       </div>
     </div>
   </div>
@@ -39,6 +43,7 @@ import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
 import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
 import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
 import NotificationsIcon from '~/assets/images/sidebar/notifications.svg?inline'
+import FollowIcon from '~/assets/images/utils/heart.svg?inline'
 
 export default {
   name: 'DashboardPage',
@@ -47,22 +52,12 @@ export default {
     ModerationIcon,
     SettingsIcon,
     NotificationsIcon,
+    FollowIcon,
   },
 }
 </script>
 
 <style lang="scss" scoped>
-.section-header {
-  @extend %card;
-  padding: var(--spacing-card-md) var(--spacing-card-lg);
-  margin-bottom: var(--spacing-card-md);
-  h3 {
-    margin: auto 0;
-    color: var(--color-text-dark);
-    font-weight: var(--font-weight-extrabold);
-  }
-}
-
 .footer {
   padding-top: 0;
 }
diff --git a/pages/dashboard/follows.vue b/pages/dashboard/follows.vue
index 0fa8a4646..3135af400 100644
--- a/pages/dashboard/follows.vue
+++ b/pages/dashboard/follows.vue
@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header">
       <h3 class="column-grow-1">Followed mods</h3>
     </div>
@@ -9,18 +9,18 @@
         :id="mod.id"
         :key="mod.id"
         :author="mod.author"
-        :name="mod.title"
-        :description="mod.description"
-        :latest-version="mod.latest_version"
-        :created-at="mod.published"
-        :updated-at="mod.updated"
-        :downloads="mod.downloads.toString()"
-        :icon-url="mod.icon_url"
         :author-url="mod.author_url"
-        :page-url="mod.page_url"
         :categories="mod.categories"
+        :created-at="mod.published"
+        :description="mod.description"
+        :downloads="mod.downloads.toString()"
         :edit-mode="true"
+        :icon-url="mod.icon_url"
         :is-modrinth="true"
+        :latest-version="mod.latest_version"
+        :name="mod.title"
+        :page-url="mod.page_url"
+        :updated-at="mod.updated"
       >
         <div class="buttons">
           <button
@@ -34,27 +34,26 @@
       </ModCard>
     </div>
     <div v-else class="error">
-      <FollowIllustration class="icon"></FollowIllustration><br />
+      <FollowIllustration class="icon"></FollowIllustration>
+      <br />
       <span class="text"
         >You don't have any followed mods. <br />
-        Why don't you <nuxt-link to="/mods" class="link">search</nuxt-link> for
+        Why don't you <nuxt-link class="link" to="/mods">search</nuxt-link> for
         new ones?</span
       >
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
 
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import ModCard from '~/components/ui/ProjectCard'
 import FollowIcon from '~/assets/images/utils/heart.svg?inline'
 import FollowIllustration from '~/assets/images/illustrations/follow_illustration.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     ModCard,
     FollowIcon,
     FollowIllustration,
@@ -76,17 +75,9 @@ export default {
   },
   methods: {
     async unfavMod(index) {
-      const config = {
-        headers: {
-          Authorization: this.$auth.getToken('local')
-            ? this.$auth.getToken('local')
-            : '',
-        },
-      }
-
       await axios.delete(
         `https://api.modrinth.com/api/v1/mod/${this.mods[index].id}/follow`,
-        config
+        this.$auth.headers
       )
 
       this.mods.splice(index, 1)
@@ -111,6 +102,7 @@ export default {
   margin-left: auto;
   padding: 0.5rem;
 }
+
 .error {
   display: flex;
   flex-direction: column;
diff --git a/pages/dashboard/misc/revoke-token.vue b/pages/dashboard/misc/revoke-token.vue
index 6644cb80e..5b5e455ba 100644
--- a/pages/dashboard/misc/revoke-token.vue
+++ b/pages/dashboard/misc/revoke-token.vue
@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header columns">
       <h3 class="column-grow-1">Revoke your Modrinth token</h3>
     </div>
@@ -23,10 +23,11 @@
       <ol>
         <li>
           <a
-            target="_blank"
             href="https://github.com/settings/connections/applications/3acffb2e808d16d4b226"
-            >Head to the Modrinth Application page on GitHub.</a
+            target="_blank"
           >
+            Head to the Modrinth Application page on GitHub.
+          </a>
           Make sure to be logged into the GitHub account you used for Modrinth!
         </li>
         <li>
@@ -36,22 +37,19 @@
       </ol>
       <p>Once you have completed the steps, press the continue button below.</p>
       <p>
-        <strong
-          >This will log you out of Modrinth, however when you log back in your
-          token will be regenerated.</strong
-        >
+        <strong>
+          This will log you out of Modrinth, however when you log back in your
+          token will be regenerated.
+        </strong>
       </p>
       <button @click="logout">Continue</button>
     </section>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
-import DashboardPage from '@/components/wrapper/DashboardPage'
 export default {
-  components: {
-    DashboardPage,
-  },
+  components: {},
   methods: {
     async logout() {
       this.$cookies.set('auth-token-reset', true)
@@ -103,10 +101,12 @@ label {
     flex: 3;
     height: fit-content;
   }
+
   button {
     :hover {
       cursor: pointer;
     }
+
     height: fit-content;
     flex: 1;
   }
diff --git a/pages/dashboard/moderation.vue b/pages/dashboard/moderation.vue
index f0d666bf0..06b93f6ee 100644
--- a/pages/dashboard/moderation.vue
+++ b/pages/dashboard/moderation.vue
@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header">
       <h3 class="column-grow-1">Mods</h3>
     </div>
@@ -9,19 +9,19 @@
         :id="mod.id"
         :key="mod.id"
         :author="mod.author"
-        :name="mod.title"
-        :description="mod.description"
-        :latest-version="mod.latest_version"
-        :created-at="mod.published"
-        :updated-at="mod.updated"
-        :downloads="mod.downloads.toString()"
-        :icon-url="mod.icon_url"
         :author-url="mod.author_url"
-        :page-url="mod.page_url"
         :categories="mod.categories"
+        :created-at="mod.published"
+        :description="mod.description"
+        :downloads="mod.downloads.toString()"
         :edit-mode="true"
-        :status="mod.status"
+        :icon-url="mod.icon_url"
         :is-modrinth="true"
+        :latest-version="mod.latest_version"
+        :name="mod.title"
+        :page-url="mod.page_url"
+        :status="mod.status"
+        :updated-at="mod.updated"
       >
         <div class="buttons">
           <button
@@ -79,22 +79,21 @@
       </div>
     </div>
     <div v-else class="error">
-      <Security class="icon"></Security><br />
+      <Security class="icon"></Security>
+      <br />
       <span class="text">You are up-to-date!</span>
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
 
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import ModCard from '~/components/ui/ProjectCard'
 import Security from '~/assets/images/illustrations/security.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     ModCard,
     Security,
   },
diff --git a/pages/dashboard/notifications.vue b/pages/dashboard/notifications.vue
index 99df15a77..23a0eb21e 100644
--- a/pages/dashboard/notifications.vue
+++ b/pages/dashboard/notifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header columns">
       <h3 class="column-grow-1">My notifications</h3>
     </div>
@@ -44,21 +44,19 @@
       </div>
     </div>
     <div v-else class="error">
-      <UpToDate class="icon"></UpToDate><br />
+      <UpToDate class="icon"></UpToDate>
+      <br />
       <span class="text">You are up-to-date!</span>
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
-
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     UpToDate,
   },
   async asyncData(data) {
@@ -136,6 +134,7 @@ export default {
     margin: 0;
   }
 }
+
 .error {
   display: flex;
   flex-direction: column;
diff --git a/pages/dashboard/projects.vue b/pages/dashboard/projects.vue
index 5c30e7845..daac711bf 100644
--- a/pages/dashboard/projects.vue
+++ b/pages/dashboard/projects.vue
@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header columns">
       <h3 class="column-grow-1">My mods</h3>
       <nuxt-link class="brand-button column" to="/mod/create">
@@ -42,19 +42,16 @@
         <nuxt-link class="link" to="/mod/create">create one</nuxt-link>?</span
       >
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
-
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import ModCard from '~/components/ui/ProjectCard'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     ModCard,
     UpToDate,
   },
diff --git a/pages/dashboard/settings.vue b/pages/dashboard/settings.vue
index ab0d7375e..c5fb6cf21 100644
--- a/pages/dashboard/settings.vue
+++ b/pages/dashboard/settings.vue
@@ -1,6 +1,6 @@
 /* eslint-disable vue/attribute-hyphenation */
 <template>
-  <DashboardPage>
+  <div>
     <ConfirmPopup
       ref="delete_popup"
       title="Are you sure you want to delete your account?"
@@ -108,16 +108,16 @@
         </div>
       </label>
     </section>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import axios from 'axios'
+import ConfirmPopup from '~/components/ui/ConfirmPopup'
 
 export default {
   components: {
-    DashboardPage,
+    ConfirmPopup,
   },
   fetch() {
     this.username = this.$auth.user.username
diff --git a/pages/mod/_id/edit.vue b/pages/mod/_id/edit.vue
index 3169b05d1..e3717298e 100644
--- a/pages/mod/_id/edit.vue
+++ b/pages/mod/_id/edit.vue
@@ -304,8 +304,8 @@
 import axios from 'axios'
 import Multiselect from 'vue-multiselect'
 
-import MFooter from '~/components/layout/MFooter'
 import FileInput from '~/components/ui/FileInput'
+import MFooter from '~/components/layout/MFooter'
 
 export default {
   components: {
diff --git a/pages/mod/_id/index.vue b/pages/mod/_id/index.vue
index fc3b2f559..b4e29f534 100644
--- a/pages/mod/_id/index.vue
+++ b/pages/mod/_id/index.vue
@@ -17,7 +17,7 @@
 
 <script>
 import axios from 'axios'
-import ModPage from '@/components/wrapper/ModPage'
+import ModPage from '~/components/layout/ModPage'
 
 export default {
   components: { ModPage },
diff --git a/pages/mod/_id/newversion.vue b/pages/mod/_id/newversion.vue
index 75ee06235..4a6eb890e 100644
--- a/pages/mod/_id/newversion.vue
+++ b/pages/mod/_id/newversion.vue
@@ -129,7 +129,7 @@
 import axios from 'axios'
 
 import Multiselect from 'vue-multiselect'
-import ModPage from '@/components/wrapper/ModPage'
+import ModPage from '~/components/layout/ModPage'
 
 export default {
   components: {
diff --git a/pages/mod/_id/settings.vue b/pages/mod/_id/settings.vue
index a48b33a6f..8d7500f7c 100644
--- a/pages/mod/_id/settings.vue
+++ b/pages/mod/_id/settings.vue
@@ -248,7 +248,7 @@
 
 <script>
 import axios from 'axios'
-import ModPage from '@/components/wrapper/ModPage'
+import ModPage from '~/components/layout/ModPage'
 
 import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
 
diff --git a/pages/mod/_id/version/_version/edit.vue b/pages/mod/_id/version/_version/edit.vue
index db4e61ab8..36a4ddd95 100644
--- a/pages/mod/_id/version/_version/edit.vue
+++ b/pages/mod/_id/version/_version/edit.vue
@@ -116,8 +116,8 @@
 <script>
 import axios from 'axios'
 
-import ModPage from '@/components/wrapper/ModPage'
 import Multiselect from 'vue-multiselect'
+import ModPage from '~/components/layout/ModPage'
 
 export default {
   components: {
diff --git a/pages/mod/_id/version/_version/index.vue b/pages/mod/_id/version/_version/index.vue
index 19d9c107e..ac3ca3896 100644
--- a/pages/mod/_id/version/_version/index.vue
+++ b/pages/mod/_id/version/_version/index.vue
@@ -147,9 +147,9 @@
 <script>
 import axios from 'axios'
 
-import ModPage from '@/components/wrapper/ModPage'
+import ModPage from '~/components/layout/ModPage'
 
-import Categories from '~/components/ui/Categories'
+import Categories from '~/components/ui/search/Categories'
 import FileInput from '~/components/ui/FileInput'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
 import EditIcon from '~/assets/images/utils/edit.svg?inline'
diff --git a/pages/mod/_id/versions.vue b/pages/mod/_id/versions.vue
index 5e6b3aba0..e5091e24d 100644
--- a/pages/mod/_id/versions.vue
+++ b/pages/mod/_id/versions.vue
@@ -92,7 +92,7 @@
 <script>
 import axios from 'axios'
 
-import ModPage from '@/components/wrapper/ModPage'
+import ModPage from '~/components/layout/ModPage'
 
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
diff --git a/pages/mod/create.vue b/pages/mod/create.vue
index 6eb64ebe5..2f37538b0 100644
--- a/pages/mod/create.vue
+++ b/pages/mod/create.vue
@@ -502,8 +502,8 @@
 import axios from 'axios'
 import Multiselect from 'vue-multiselect'
 
-import MFooter from '~/components/layout/MFooter'
 import FileInput from '~/components/ui/FileInput'
+import MFooter from '~/components/layout/MFooter'
 
 import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
 import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
diff --git a/pages/mods.vue b/pages/mods.vue
index 1a4f5ff91..f7b0498d7 100644
--- a/pages/mods.vue
+++ b/pages/mods.vue
@@ -290,7 +290,7 @@
 import Multiselect from 'vue-multiselect'
 import axios from 'axios'
 import SearchResult from '~/components/ui/ProjectCard'
-import Pagination from '~/components/ui/search/Pagination'
+import Pagination from '~/components/ui/Pagination'
 import SearchFilter from '~/components/ui/search/SearchFilter'
 
 import MFooter from '~/components/layout/MFooter'
@@ -313,7 +313,7 @@ import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
 import SearchIcon from '~/assets/images/utils/search.svg?inline'
 import ExitIcon from '~/assets/images/utils/exit.svg?inline'
 
-import Advertisement from '~/components/ui/Advertisement'
+import Advertisement from '~/components/Advertisement'
 
 export default {
   auth: false,
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index 0873ae874..a5085aeae 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -89,7 +89,7 @@ import MFooter from '~/components/layout/MFooter'
 import ReportIcon from '~/assets/images/utils/report.svg?inline'
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
-import Advertisement from '~/components/ui/Advertisement'
+import Advertisement from '~/components/Advertisement'
 
 export default {
   auth: false,