From e61a1080f737d4c4ebe0f7687fd1439de3ea71a4 Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Tue, 30 Mar 2021 21:38:12 -0700
Subject: [PATCH] Organize components, switch auth to not use session

---
 .github/ISSUE_TEMPLATE/bug_report.md        |  24 +
 .github/ISSUE_TEMPLATE/feature_request.md   |  20 +
 components/DashboardPage.vue                |  75 ---
 components/ModPage.vue                      | 685 --------------------
 components/Popup.vue                        |  48 --
 components/{ => layout}/MFooter.vue         |   0
 components/{ => ui}/Advertisement.vue       |   0
 components/{ => ui}/Categories.vue          |  28 +-
 components/{ => ui}/ConfirmPopup.vue        |   0
 components/{ => ui}/FileInput.vue           |   0
 components/{ => ui}/ProjectCard.vue         |  10 +-
 components/{ => ui/search}/Pagination.vue   |   6 +-
 components/{ => ui/search}/SearchFilter.vue |   0
 components/wrapper/ModPage.vue              |   8 +-
 layouts/error.vue                           |   2 +-
 middleware/auth.js                          |   6 +-
 pages/about.vue                             |   2 +-
 pages/dashboard/follows.vue                 |   4 +-
 pages/dashboard/misc/revoke-token.vue       |   2 +-
 pages/dashboard/moderation.vue              |   4 +-
 pages/dashboard/notifications.vue           |   3 +-
 pages/dashboard/projects.vue                |   5 +-
 pages/dashboard/settings.vue                |   2 +-
 pages/index.vue                             |   2 +-
 pages/legal/privacy.vue                     |   2 +-
 pages/legal/terms.vue                       |   2 +-
 pages/mod/_id/edit.vue                      |   4 +-
 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    |   6 +-
 pages/mod/_id/versions.vue                  |   2 +-
 pages/mod/create.vue                        |   4 +-
 pages/mods.vue                              |  10 +-
 pages/user/_id.vue                          |   6 +-
 36 files changed, 111 insertions(+), 869 deletions(-)
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
 create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md
 delete mode 100644 components/DashboardPage.vue
 delete mode 100644 components/ModPage.vue
 delete mode 100644 components/Popup.vue
 rename components/{ => layout}/MFooter.vue (100%)
 rename components/{ => ui}/Advertisement.vue (100%)
 rename components/{ => ui}/Categories.vue (85%)
 rename components/{ => ui}/ConfirmPopup.vue (100%)
 rename components/{ => ui}/FileInput.vue (100%)
 rename components/{ => ui}/ProjectCard.vue (95%)
 rename components/{ => ui/search}/Pagination.vue (94%)
 rename components/{ => ui/search}/SearchFilter.vue (100%)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 000000000..fb57da5f8
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,24 @@
+---
+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
new file mode 100644
index 000000000..e301d68ce
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
+---
+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/components/DashboardPage.vue b/components/DashboardPage.vue
deleted file mode 100644
index efce252e7..000000000
--- a/components/DashboardPage.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <div class="page-container">
-    <div class="page-contents">
-      <div class="sidebar-l">
-        <div class="card page-nav">
-          <nuxt-link :to="'/dashboard/projects'" class="tab last">
-            <ModIcon />
-            My mods
-          </nuxt-link>
-          <nuxt-link :to="'/dashboard/notifications'" class="tab last">
-            <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'
-            "
-            :to="'/dashboard/moderation'"
-            class="tab last"
-          >
-            <ModerationIcon />
-            Moderation
-          </nuxt-link>
-          <nuxt-link :to="'/dashboard/settings'" class="tab last">
-            <SettingsIcon />
-            Settings
-          </nuxt-link>
-        </div>
-        <m-footer class="footer" />
-      </div>
-      <div class="content">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-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',
-  components: {
-    ModIcon,
-    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;
-}
-</style>
diff --git a/components/ModPage.vue b/components/ModPage.vue
deleted file mode 100644
index 9cef42232..000000000
--- a/components/ModPage.vue
+++ /dev/null
@@ -1,685 +0,0 @@
-<template>
-  <div class="page-container">
-    <div class="page-contents">
-      <div class="content">
-        <div class="header">
-          <div class="icon">
-            <img
-              :src="
-                mod.icon_url
-                  ? mod.icon_url
-                  : 'https://cdn.modrinth.com/placeholder.svg'
-              "
-              alt="mod - icon"
-            />
-          </div>
-          <div class="info">
-            <h1 class="title">{{ mod.title }}</h1>
-            <p class="description">
-              {{ mod.description }}
-            </p>
-            <div class="alt-nav">
-              <p>
-                <nuxt-link to="/mods"> Mods </nuxt-link>
-                >
-                <nuxt-link :to="'/mod/' + (mod.slug ? mod.slug : mod.id)">{{
-                  mod.title
-                }}</nuxt-link>
-                <span v-if="linkBar.length > 0"> ></span>
-                <nuxt-link
-                  v-for="(link, index) in linkBar"
-                  :key="index"
-                  :to="/mod/ + (mod.slug ? mod.slug : mod.id) + '/' + link[1]"
-                  >{{ link[0] }}
-                  <span v-if="index !== linkBar.length - 1"> > </span>
-                </nuxt-link>
-              </p>
-            </div>
-          </div>
-          <div class="buttons">
-            <nuxt-link
-              v-if="this.$auth.user"
-              :to="`/report/create?id=${mod.id}&t=mod`"
-              class="iconified-button"
-            >
-              <ReportIcon />
-              Report
-            </nuxt-link>
-            <button
-              v-if="userFollows && !userFollows.includes(mod.id)"
-              class="iconified-button"
-              @click="followMod"
-            >
-              <FollowIcon />
-              Follow
-            </button>
-            <button
-              v-if="userFollows && userFollows.includes(mod.id)"
-              class="iconified-button"
-              @click="unfollowMod"
-            >
-              <FollowIcon fill="currentColor" />
-              Unfollow
-            </button>
-          </div>
-        </div>
-        <Advertisement
-          v-if="mod.status === 'approved' || mod.status === 'unlisted'"
-          :page-url="
-            'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
-          "
-        />
-        <div class="mod-navigation">
-          <div class="tabs">
-            <nuxt-link
-              :to="'/mod/' + (mod.slug ? mod.slug : mod.id)"
-              class="tab"
-            >
-              Description
-            </nuxt-link>
-            <nuxt-link
-              :to="'/mod/' + (mod.slug ? mod.slug : mod.id) + '/versions'"
-              class="tab"
-            >
-              Versions
-            </nuxt-link>
-            <nuxt-link
-              v-if="currentMember"
-              :to="'/mod/' + mod.id + '/settings'"
-              class="tab"
-            >
-              Settings
-            </nuxt-link>
-            <a
-              v-if="mod.wiki_url"
-              :href="mod.wiki_url"
-              target="_blank"
-              class="tab"
-            >
-              <ExternalIcon />
-              Wiki
-            </a>
-            <a
-              v-if="mod.issues_url"
-              :href="mod.issues_url"
-              target="_blank"
-              class="tab"
-            >
-              <ExternalIcon />
-              Issues
-            </a>
-            <a
-              v-if="mod.source_url"
-              :href="mod.source_url"
-              target="_blank"
-              class="tab"
-            >
-              <ExternalIcon />
-              Source
-            </a>
-            <a
-              v-if="mod.discord_url"
-              :href="mod.discord_url"
-              target="_blank"
-              class="tab"
-            >
-              <ExternalIcon />
-              Discord
-            </a>
-            <div class="filler" />
-          </div>
-        </div>
-        <div class="mod-content">
-          <slot />
-          <Advertisement
-            v-if="mod.status === 'approved' || mod.status === 'unlisted'"
-            :page-url="
-              'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
-            "
-          />
-        </div>
-      </div>
-      <section class="mod-info">
-        <div class="mod-stats section">
-          <div class="stat">
-            <DownloadIcon />
-            <div class="info">
-              <h4>Downloads</h4>
-              <p class="value">{{ formatNumber(mod.downloads) }}</p>
-            </div>
-          </div>
-          <div class="stat">
-            <CalendarIcon />
-            <div class="info">
-              <h4>Created</h4>
-              <p
-                v-tooltip="
-                  $dayjs(mod.published).format(
-                    '[Created on] YYYY-MM-DD [at] HH:mm A'
-                  )
-                "
-                class="value"
-              >
-                {{ $dayjs(mod.published).fromNow() }}
-              </p>
-            </div>
-          </div>
-          <div class="stat">
-            <TagIcon />
-            <div class="info">
-              <h4>Available For</h4>
-              <p class="value">
-                {{
-                  versions[0]
-                    ? versions[0].game_versions[0]
-                      ? versions[0].game_versions[
-                          versions[0].game_versions.length - 1
-                        ]
-                      : 'None'
-                    : 'None'
-                }}
-              </p>
-            </div>
-          </div>
-          <div class="stat">
-            <EditIcon />
-            <div class="info">
-              <h4>Updated</h4>
-              <p
-                v-tooltip="
-                  $dayjs(mod.updated).format(
-                    '[Updated on] YYYY-MM-DD [at] HH:mm A'
-                  )
-                "
-                class="value"
-              >
-                {{ $dayjs(mod.updated).fromNow() }}
-              </p>
-            </div>
-          </div>
-          <div class="stat">
-            <ClientIcon />
-            <div class="info">
-              <h4>Client Side</h4>
-              <p class="value capitalize">{{ mod.client_side }}</p>
-            </div>
-          </div>
-          <div class="stat">
-            <ServerIcon />
-            <div class="info">
-              <h4>Server Side</h4>
-              <p class="value capitalize">{{ mod.server_side }}</p>
-            </div>
-          </div>
-          <div class="stat">
-            <FileTextIcon />
-            <div class="info">
-              <h4>License</h4>
-              <p v-tooltip="mod.license.name" class="value ellipsis">
-                <a
-                  v-if="mod.license.url ? mod.license.url : '#'"
-                  :href="mod.license.url"
-                >
-                  {{ mod.license.id.toUpperCase() }}</a
-                >
-              </p>
-            </div>
-          </div>
-          <div class="stat">
-            <CodeIcon />
-            <div class="info">
-              <h4>Project ID</h4>
-              <p class="value">{{ mod.id }}</p>
-            </div>
-          </div>
-          <Categories :categories="mod.categories.concat(mod.loaders)" />
-        </div>
-        <div class="section">
-          <h3>Members</h3>
-          <div
-            v-for="member in members"
-            :key="member.user_id"
-            class="team-member columns"
-          >
-            <img :src="member.avatar_url" alt="profile-picture" />
-            <div class="member-info">
-              <nuxt-link :to="'/user/' + member.user_id">
-                <h4>{{ member.name }}</h4>
-              </nuxt-link>
-              <h3>{{ member.role }}</h3>
-            </div>
-          </div>
-        </div>
-        <div v-if="featuredVersions.length > 0" class="section">
-          <h3>Featured Versions</h3>
-          <div
-            v-for="version in featuredVersions"
-            :key="version.id"
-            class="featured-version"
-          >
-            <a
-              :href="findPrimary(version).url"
-              class="download"
-              @click.prevent="
-                downloadFile(
-                  findPrimary(version).hashes.sha1,
-                  findPrimary(version).url
-                )
-              "
-            >
-              <DownloadIcon />
-            </a>
-            <div class="info">
-              <div class="top">
-                <span
-                  v-if="version.version_type === 'release'"
-                  class="badge green"
-                >
-                  Release
-                </span>
-                <span
-                  v-if="version.version_type === 'beta'"
-                  class="badge yellow"
-                >
-                  Beta
-                </span>
-                <span v-if="version.version_type === 'alpha'" class="badge red">
-                  Alpha
-                </span>
-                <h4 class="title">
-                  <nuxt-link :to="'/mod/' + mod.id + '/version/' + version.id">
-                    {{ version.name }}
-                  </nuxt-link>
-                </h4>
-              </div>
-              <div class="bottom">
-                <span class="version-number limit-text-width">
-                  {{ version.version_number }} ·
-                </span>
-                <FabricIcon
-                  v-if="version.loaders.includes('fabric')"
-                  class="loader"
-                />
-                <ForgeIcon
-                  v-if="version.loaders.includes('forge')"
-                  class="loader"
-                />
-                <span
-                  v-if="version.game_versions.length > 0"
-                  class="game-version limit-text-width"
-                >
-                  ·
-                  {{ version.game_versions[version.game_versions.length - 1] }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="mod.donation_urls && mod.donation_urls.length > 0"
-          class="section"
-        >
-          <h3>Donation Links</h3>
-          <div
-            v-for="(item, index) in mod.donation_urls"
-            :key="index"
-            class="links"
-          >
-            <a :href="item.url" class="link">
-              <ExternalIcon />
-              {{ item.platform }}
-            </a>
-          </div>
-        </div>
-        <Advertisement
-          v-if="mod.status === 'approved' || mod.status === 'unlisted'"
-          format="rectangle"
-          :page-url="
-            'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
-          "
-        />
-        <m-footer class="footer" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script>
-import Categories from '@/components/Categories'
-import MFooter from '@/components/MFooter'
-
-import axios from 'axios'
-import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
-import DownloadIcon from '~/assets/images/utils/download.svg?inline'
-import EditIcon from '~/assets/images/utils/edit.svg?inline'
-import TagIcon from '~/assets/images/utils/tag.svg?inline'
-import ClientIcon from '~/assets/images/utils/client.svg?inline'
-import ServerIcon from '~/assets/images/utils/server.svg?inline'
-import FileTextIcon from '~/assets/images/utils/file-text.svg?inline'
-import CodeIcon from '~/assets/images/sidebar/mod.svg?inline'
-import ReportIcon from '~/assets/images/utils/report.svg?inline'
-import FollowIcon from '~/assets/images/utils/heart.svg?inline'
-
-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/Advertisement'
-
-export default {
-  name: 'ModPage',
-  components: {
-    Advertisement,
-    MFooter,
-    Categories,
-    ExternalIcon,
-    ForgeIcon,
-    FabricIcon,
-    DownloadIcon,
-    CalendarIcon,
-    EditIcon,
-    TagIcon,
-    ClientIcon,
-    ServerIcon,
-    FileTextIcon,
-    CodeIcon,
-    ReportIcon,
-    FollowIcon,
-  },
-  props: {
-    mod: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    featuredVersions: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    versions: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    members: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    currentMember: {
-      type: Object,
-      default() {
-        return null
-      },
-    },
-    linkBar: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    userFollows: {
-      type: Array,
-      default() {
-        return null
-      },
-    },
-  },
-  methods: {
-    formatNumber(x) {
-      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    },
-    findPrimary(version) {
-      let file = version.files.find((x) => x.primary)
-
-      if (!file) {
-        file = version.files[0]
-      }
-
-      if (!file) {
-        file = { url: `/mod/${this.mod.id}/version/${version.id}` }
-      }
-
-      return file
-    },
-    async downloadFile(hash, url) {
-      await axios.get(
-        `https://api.modrinth.com/api/v1/version_file/${hash}/download`
-      )
-
-      const elem = document.createElement('a')
-      elem.download = hash
-      elem.href = url
-      elem.click()
-    },
-    async followMod() {
-      await axios.post(
-        `https://api.modrinth.com/api/v1/mod/${this.mod.id}/follow`,
-        {},
-        this.$auth.headers
-      )
-
-      this.userFollows.push(this.mod.id)
-    },
-    async unfollowMod() {
-      await axios.delete(
-        `https://api.modrinth.com/api/v1/mod/${this.mod.id}/follow`,
-        this.$auth.headers
-      )
-
-      this.userFollows.splice(this.userFollows.indexOf(this.mod.id), 1)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.header {
-  @extend %row;
-  @extend %card-spaced-b;
-  width: 100%;
-  .icon {
-    margin: auto 0;
-    img {
-      width: 6rem;
-      height: 6rem;
-      margin: var(--spacing-card-md);
-      border-radius: var(--size-rounded-icon);
-      object-fit: contain;
-    }
-  }
-  .info {
-    @extend %column;
-    .title {
-      margin: var(--spacing-card-md) var(--spacing-card-md) 0 0;
-      color: var(--color-text-dark);
-      font-size: var(--font-size-lg);
-    }
-    .description {
-      margin: var(--spacing-card-sm) var(--spacing-card-md) 0 0;
-      color: var(--color-text-dark);
-    }
-    .alt-nav {
-      margin: var(--spacing-card-sm) var(--spacing-card-md) 0 0;
-      p {
-        margin: 0;
-      }
-    }
-  }
-  .buttons {
-    @extend %column;
-    margin: var(--spacing-card-md) var(--spacing-card-md) var(--spacing-card-md)
-      auto;
-
-    button {
-      margin: 0.2rem 0 0 0;
-    }
-  }
-}
-
-.mod-navigation {
-  @extend %card-spaced-b;
-  padding-bottom: 0.2rem;
-}
-
-.mod-info {
-  width: 30rem;
-  height: auto;
-  margin-left: var(--spacing-card-lg);
-
-  .section {
-    padding: var(--spacing-card-sm);
-    @extend %card-spaced-b;
-  }
-
-  h3 {
-    @extend %large-label;
-  }
-
-  .mod-stats {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 0;
-    p {
-      max-width: 6rem;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: '';
-      margin: 3px;
-    }
-    .stat {
-      width: 8.5rem;
-      margin: 0.75rem;
-      @extend %stat;
-
-      svg {
-        padding: 0.25rem;
-        border-radius: 50%;
-        background-color: var(--color-button-bg);
-      }
-    }
-  }
-
-  .team-member {
-    margin-left: 5px;
-    margin-bottom: 10px;
-
-    img {
-      border-radius: var(--size-rounded-icon);
-      height: 50px;
-      width: 50px;
-    }
-    .member-info {
-      max-width: 150px;
-      overflow: hidden;
-      margin: auto 0 auto 0.5rem;
-      h4 {
-        font-weight: normal;
-        margin: 0;
-      }
-      h3 {
-        margin-top: 0.1rem;
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .featured-version {
-    @extend %row;
-    padding-top: var(--spacing-card-sm);
-    padding-bottom: var(--spacing-card-sm);
-    .download {
-      display: flex;
-      align-items: center;
-      height: 2.25rem;
-      width: 2.25rem;
-      border-radius: 2rem;
-      background-color: var(--color-button-bg);
-      margin-right: var(--spacing-card-sm);
-      svg {
-        width: 1.25rem;
-        margin: auto;
-      }
-      flex-shrink: 0;
-    }
-    .info {
-      @extend %column;
-      font-size: var(--font-size-xs);
-      .top {
-        @extend %row;
-        .badge {
-          font-size: var(--font-size-xs);
-          margin-right: var(--spacing-card-sm);
-        }
-        .title {
-          margin: auto 0;
-        }
-      }
-      .bottom {
-        margin-top: 0.25rem;
-        @extend %row;
-        .loader {
-          height: 1rem;
-        }
-      }
-    }
-  }
-
-  .links {
-    padding: 0.5rem 1rem;
-
-    .link {
-      display: flex;
-      align-items: center;
-      padding: 0.25rem 0;
-
-      svg {
-        width: 1rem;
-        height: 1rem;
-        margin-right: 0.3rem;
-      }
-
-      &:hover,
-      &:focus {
-        padding-bottom: calc(0.25rem - 3px);
-        border-bottom: 3px solid var(--color-brand-disabled);
-        color: var(--color-text-medium);
-      }
-    }
-  }
-}
-
-.limit-text-width {
-  display: inline-block;
-  height: 1em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@media screen and (max-width: 550px) {
-  .title a {
-    display: none;
-  }
-}
-
-@media screen and (max-width: 800px) {
-  .mod-navigation {
-    display: block;
-    overflow-x: auto;
-    overflow-wrap: break-word;
-    overflow-y: hidden;
-  }
-}
-
-@media screen and (max-width: 1400px) {
-  .mod-info {
-    display: none;
-  }
-}
-</style>
diff --git a/components/Popup.vue b/components/Popup.vue
deleted file mode 100644
index 299b55c37..000000000
--- a/components/Popup.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div v-if="showPopup">
-    <div class="popup-overlay" />
-    <div class="popup-body">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Popup',
-  props: {
-    showPopup: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.popup-overlay {
-  top: 0;
-  left: 0;
-  z-index: 1;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-button-bg);
-  border: none;
-  opacity: 0.6;
-  overflow-x: hidden;
-}
-
-.popup-body {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2;
-  box-shadow: 0 2px 3px 1px var(--color-button-bg);
-  border-radius: 10px;
-  max-height: 80%;
-  overflow-y: auto;
-  background-color: var(--color-bg);
-}
-</style>
diff --git a/components/MFooter.vue b/components/layout/MFooter.vue
similarity index 100%
rename from components/MFooter.vue
rename to components/layout/MFooter.vue
diff --git a/components/Advertisement.vue b/components/ui/Advertisement.vue
similarity index 100%
rename from components/Advertisement.vue
rename to components/ui/Advertisement.vue
diff --git a/components/Categories.vue b/components/ui/Categories.vue
similarity index 85%
rename from components/Categories.vue
rename to components/ui/Categories.vue
index 6b7fc3aff..7a617ba8a 100644
--- a/components/Categories.vue
+++ b/components/ui/Categories.vue
@@ -60,21 +60,21 @@
 </template>
 
 <script>
-import TechCategory from '~/assets/images/categories/tech.svg?inline'
-import AdventureCategory from '~/assets/images/categories/adventure.svg?inline'
-import CursedCategory from '~/assets/images/categories/cursed.svg?inline'
-import DecorationCategory from '~/assets/images/categories/decoration.svg?inline'
-import EquipmentCategory from '~/assets/images/categories/equipment.svg?inline'
-import FoodCategory from '~/assets/images/categories/food.svg?inline'
-import LibraryCategory from '~/assets/images/categories/library.svg?inline'
-import MagicCategory from '~/assets/images/categories/magic.svg?inline'
-import MiscCategory from '~/assets/images/categories/misc.svg?inline'
-import StorageCategory from '~/assets/images/categories/storage.svg?inline'
-import UtilityCategory from '~/assets/images/categories/utility.svg?inline'
-import WorldGenCategory from '~/assets/images/categories/worldgen.svg?inline'
+import TechCategory from '~/assets/images/categories/tech.svg'
+import AdventureCategory from '~/assets/images/categories/adventure.svg'
+import CursedCategory from '~/assets/images/categories/cursed.svg'
+import DecorationCategory from '~/assets/images/categories/decoration.svg'
+import EquipmentCategory from '~/assets/images/categories/equipment.svg'
+import FoodCategory from '~/assets/images/categories/food.svg'
+import LibraryCategory from '~/assets/images/categories/library.svg'
+import MagicCategory from '~/assets/images/categories/magic.svg'
+import MiscCategory from '~/assets/images/categories/misc.svg'
+import StorageCategory from '~/assets/images/categories/storage.svg'
+import UtilityCategory from '~/assets/images/categories/utility.svg'
+import WorldGenCategory from '~/assets/images/categories/worldgen.svg'
 
-import ForgeLoader from '~/assets/images/categories/forge.svg?inline'
-import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
+import ForgeLoader from '~/assets/images/categories/forge.svg'
+import FabricLoader from '~/assets/images/categories/fabric.svg'
 
 export default {
   name: 'Categories',
diff --git a/components/ConfirmPopup.vue b/components/ui/ConfirmPopup.vue
similarity index 100%
rename from components/ConfirmPopup.vue
rename to components/ui/ConfirmPopup.vue
diff --git a/components/FileInput.vue b/components/ui/FileInput.vue
similarity index 100%
rename from components/FileInput.vue
rename to components/ui/FileInput.vue
diff --git a/components/ProjectCard.vue b/components/ui/ProjectCard.vue
similarity index 95%
rename from components/ProjectCard.vue
rename to components/ui/ProjectCard.vue
index 28491a8f3..8244fb83f 100644
--- a/components/ProjectCard.vue
+++ b/components/ui/ProjectCard.vue
@@ -103,12 +103,12 @@
 </template>
 
 <script>
-import Categories from '@/components/Categories'
+import Categories from '~/components/ui/Categories'
 
-import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
-import DownloadIcon from '~/assets/images/utils/download.svg?inline'
-import EditIcon from '~/assets/images/utils/edit.svg?inline'
-import TagIcon from '~/assets/images/utils/tag.svg?inline'
+import CalendarIcon from '~/assets/images/utils/calendar.svg'
+import DownloadIcon from '~/assets/images/utils/download.svg'
+import EditIcon from '~/assets/images/utils/edit.svg'
+import TagIcon from '~/assets/images/utils/tag.svg'
 
 export default {
   name: 'ProjectCard',
diff --git a/components/Pagination.vue b/components/ui/search/Pagination.vue
similarity index 94%
rename from components/Pagination.vue
rename to components/ui/search/Pagination.vue
index b0ef7ff5d..f6b2e3c19 100644
--- a/components/Pagination.vue
+++ b/components/ui/search/Pagination.vue
@@ -43,9 +43,9 @@
 </template>
 
 <script>
-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'
+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'
 
 export default {
   name: 'Pagination',
diff --git a/components/SearchFilter.vue b/components/ui/search/SearchFilter.vue
similarity index 100%
rename from components/SearchFilter.vue
rename to components/ui/search/SearchFilter.vue
diff --git a/components/wrapper/ModPage.vue b/components/wrapper/ModPage.vue
index 7046e1025..a3c3a3a7e 100644
--- a/components/wrapper/ModPage.vue
+++ b/components/wrapper/ModPage.vue
@@ -345,10 +345,10 @@
 </template>
 
 <script>
-import Categories from '@/components/Categories'
-import MFooter from '@/components/MFooter'
-
 import axios from 'axios'
+import Categories from '~/components/ui/Categories'
+import MFooter from '~/components/layout/MFooter'
+
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import EditIcon from '~/assets/images/utils/edit.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/Advertisement'
+import Advertisement from '~/components/ui/Advertisement'
 
 export default {
   name: 'ModPage',
diff --git a/layouts/error.vue b/layouts/error.vue
index 80ea2b9f0..00e238b82 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import MFooter from '@/components/MFooter'
+import MFooter from '~/components/layout/MFooter'
 
 export default {
   components: {
diff --git a/middleware/auth.js b/middleware/auth.js
index ee800dc7e..1938ddc4f 100644
--- a/middleware/auth.js
+++ b/middleware/auth.js
@@ -6,10 +6,14 @@ 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', {
@@ -32,7 +36,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.fullPath}`
+      `https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com${context.route.path}`
     )
   }
 }
diff --git a/pages/about.vue b/pages/about.vue
index 98134b87e..eed5b7363 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import MFooter from '@/components/MFooter'
+import MFooter from '~/components/layout/MFooter'
 
 export default {
   components: {
diff --git a/pages/dashboard/follows.vue b/pages/dashboard/follows.vue
index 2543e335b..0fa8a4646 100644
--- a/pages/dashboard/follows.vue
+++ b/pages/dashboard/follows.vue
@@ -47,8 +47,8 @@
 <script>
 import axios from 'axios'
 
-import ModCard from '@/components/ProjectCard'
-import DashboardPage from '@/components/DashboardPage'
+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'
 
diff --git a/pages/dashboard/misc/revoke-token.vue b/pages/dashboard/misc/revoke-token.vue
index 1723a333d..6644cb80e 100644
--- a/pages/dashboard/misc/revoke-token.vue
+++ b/pages/dashboard/misc/revoke-token.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import DashboardPage from '@/components/DashboardPage'
+import DashboardPage from '@/components/wrapper/DashboardPage'
 export default {
   components: {
     DashboardPage,
diff --git a/pages/dashboard/moderation.vue b/pages/dashboard/moderation.vue
index b07407333..f0d666bf0 100644
--- a/pages/dashboard/moderation.vue
+++ b/pages/dashboard/moderation.vue
@@ -88,8 +88,8 @@
 <script>
 import axios from 'axios'
 
-import ModCard from '@/components/ProjectCard'
-import DashboardPage from '@/components/DashboardPage'
+import DashboardPage from '@/components/wrapper/DashboardPage'
+import ModCard from '~/components/ui/ProjectCard'
 import Security from '~/assets/images/illustrations/security.svg?inline'
 
 export default {
diff --git a/pages/dashboard/notifications.vue b/pages/dashboard/notifications.vue
index e3b1b305b..99df15a77 100644
--- a/pages/dashboard/notifications.vue
+++ b/pages/dashboard/notifications.vue
@@ -52,7 +52,8 @@
 
 <script>
 import axios from 'axios'
-import DashboardPage from '@/components/DashboardPage'
+
+import DashboardPage from '@/components/wrapper/DashboardPage'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 
 export default {
diff --git a/pages/dashboard/projects.vue b/pages/dashboard/projects.vue
index a4376f5e9..5c30e7845 100644
--- a/pages/dashboard/projects.vue
+++ b/pages/dashboard/projects.vue
@@ -47,8 +47,9 @@
 
 <script>
 import axios from 'axios'
-import ModCard from '@/components/ProjectCard'
-import DashboardPage from '@/components/DashboardPage'
+
+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 {
diff --git a/pages/dashboard/settings.vue b/pages/dashboard/settings.vue
index 053c9025d..ab0d7375e 100644
--- a/pages/dashboard/settings.vue
+++ b/pages/dashboard/settings.vue
@@ -112,7 +112,7 @@
 </template>
 
 <script>
-import DashboardPage from '@/components/DashboardPage'
+import DashboardPage from '@/components/wrapper/DashboardPage'
 import axios from 'axios'
 
 export default {
diff --git a/pages/index.vue b/pages/index.vue
index a5ac20c45..40cf9a22c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -179,7 +179,7 @@ fetch('https://api.modrinth.com/api/v1/mod').then(res => res.json()).then(data =
 </template>
 
 <script>
-import MFooter from '@/components/MFooter'
+import MFooter from '~/components/layout/MFooter'
 
 export default {
   components: {
diff --git a/pages/legal/privacy.vue b/pages/legal/privacy.vue
index f043dd159..382390ae2 100644
--- a/pages/legal/privacy.vue
+++ b/pages/legal/privacy.vue
@@ -182,7 +182,7 @@
 </template>
 
 <script>
-import MFooter from '@/components/MFooter'
+import MFooter from '~/components/layout/MFooter'
 
 export default {
   components: {
diff --git a/pages/legal/terms.vue b/pages/legal/terms.vue
index d973c7d4f..55605881f 100644
--- a/pages/legal/terms.vue
+++ b/pages/legal/terms.vue
@@ -155,7 +155,7 @@
 </template>
 
 <script>
-import MFooter from '@/components/MFooter'
+import MFooter from '~/components/layout/MFooter'
 
 export default {
   components: {
diff --git a/pages/mod/_id/edit.vue b/pages/mod/_id/edit.vue
index 2cd71b1df..3169b05d1 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/MFooter'
-import FileInput from '@/components/FileInput'
+import MFooter from '~/components/layout/MFooter'
+import FileInput from '~/components/ui/FileInput'
 
 export default {
   components: {
diff --git a/pages/mod/_id/index.vue b/pages/mod/_id/index.vue
index 25c5678d8..fc3b2f559 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/ModPage'
+import ModPage from '@/components/wrapper/ModPage'
 
 export default {
   components: { ModPage },
diff --git a/pages/mod/_id/newversion.vue b/pages/mod/_id/newversion.vue
index 53e35b2ad..75ee06235 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/ModPage'
+import ModPage from '@/components/wrapper/ModPage'
 
 export default {
   components: {
diff --git a/pages/mod/_id/settings.vue b/pages/mod/_id/settings.vue
index e1117a31e..a48b33a6f 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/ModPage'
+import ModPage from '@/components/wrapper/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 ca11a99fc..db4e61ab8 100644
--- a/pages/mod/_id/version/_version/edit.vue
+++ b/pages/mod/_id/version/_version/edit.vue
@@ -116,7 +116,7 @@
 <script>
 import axios from 'axios'
 
-import ModPage from '@/components/ModPage'
+import ModPage from '@/components/wrapper/ModPage'
 import Multiselect from 'vue-multiselect'
 
 export default {
diff --git a/pages/mod/_id/version/_version/index.vue b/pages/mod/_id/version/_version/index.vue
index 4ba193c83..19d9c107e 100644
--- a/pages/mod/_id/version/_version/index.vue
+++ b/pages/mod/_id/version/_version/index.vue
@@ -147,10 +147,10 @@
 <script>
 import axios from 'axios'
 
-import ModPage from '@/components/ModPage'
+import ModPage from '@/components/wrapper/ModPage'
 
-import Categories from '@/components/Categories'
-import FileInput from '@/components/FileInput'
+import Categories from '~/components/ui/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'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
diff --git a/pages/mod/_id/versions.vue b/pages/mod/_id/versions.vue
index 2579f9db5..5e6b3aba0 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/ModPage'
+import ModPage from '@/components/wrapper/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 52831fbd6..6eb64ebe5 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/MFooter'
-import FileInput from '@/components/FileInput'
+import MFooter from '~/components/layout/MFooter'
+import FileInput from '~/components/ui/FileInput'
 
 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 054488951..1a4f5ff91 100644
--- a/pages/mods.vue
+++ b/pages/mods.vue
@@ -289,11 +289,11 @@
 <script>
 import Multiselect from 'vue-multiselect'
 import axios from 'axios'
-import SearchResult from '@/components/ProjectCard'
-import Pagination from '@/components/Pagination'
-import SearchFilter from '@/components/SearchFilter'
+import SearchResult from '~/components/ui/ProjectCard'
+import Pagination from '~/components/ui/search/Pagination'
+import SearchFilter from '~/components/ui/search/SearchFilter'
 
-import MFooter from '@/components/MFooter'
+import MFooter from '~/components/layout/MFooter'
 import TechCategory from '~/assets/images/categories/tech.svg?inline'
 import AdventureCategory from '~/assets/images/categories/adventure.svg?inline'
 import CursedCategory from '~/assets/images/categories/cursed.svg?inline'
@@ -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/Advertisement'
+import Advertisement from '~/components/ui/Advertisement'
 
 export default {
   auth: false,
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index c7bc32292..0873ae874 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -83,13 +83,13 @@
 
 <script>
 import axios from 'axios'
-import SearchResult from '@/components/ProjectCard'
-import MFooter from '@/components/MFooter'
+import SearchResult from '~/components/ui/ProjectCard'
+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/Advertisement'
+import Advertisement from '~/components/ui/Advertisement'
 
 export default {
   auth: false,