From 6f58e9e7bb36a5a781ba1685e8c77ea1e15eb93f Mon Sep 17 00:00:00 2001
From: Geometrically <18202329+Geometrically@users.noreply.github.com>
Date: Tue, 20 Dec 2022 11:15:31 -0700
Subject: [PATCH] Redo version page (#777)

* Redo version page

* More work on editing page

* Make saving work

* Finish version editing

* Version creation (base)

* Add creation buttons

* Add file uploader to versions page

* Add version file parsing

* Finish PR

* Fix version page responsiveness and use more consistent card design

* Whoops that wasn't supposed to be there

* Fixes + allow whole page dragging

* Re-add lost merge data

* Remove debug line

* Move back to list btm

Co-authored-by: Prospector <prospectordev@gmail.com>
---
 assets/images/utils/file.svg  |    1 +
 assets/images/utils/hash.svg  |    1 +
 assets/styles/components.scss |   63 +-
 assets/styles/global.scss     |    4 +-
 assets/styles/layout.scss     |   49 +-
 components/ui/DropArea.vue    |   82 ++
 components/ui/FileInput.vue   |   65 +-
 generated/.gitkeep            |    0
 layouts/default.vue           |   23 +-
 package-lock.json             |  179 +++-
 package.json                  |    3 +
 pages/_type/_id.vue           |  713 ++++---------
 pages/_type/_id/edit.vue      |    8 +-
 pages/_type/_id/gallery.vue   |    7 +-
 pages/_type/_id/index.vue     |    8 +-
 pages/_type/_id/version.vue   | 1886 ++++++++++++++++++---------------
 pages/_type/_id/versions.vue  |   76 +-
 pages/user/_id.vue            |   53 +-
 plugins/fileUtils.js          |  214 +++-
 19 files changed, 1922 insertions(+), 1513 deletions(-)
 create mode 100644 assets/images/utils/file.svg
 create mode 100644 assets/images/utils/hash.svg
 create mode 100644 components/ui/DropArea.vue
 delete mode 100644 generated/.gitkeep

diff --git a/assets/images/utils/file.svg b/assets/images/utils/file.svg
new file mode 100644
index 000000000..09dcf7612
--- /dev/null
+++ b/assets/images/utils/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
diff --git a/assets/images/utils/hash.svg b/assets/images/utils/hash.svg
new file mode 100644
index 000000000..e7ed57c05
--- /dev/null
+++ b/assets/images/utils/hash.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 39c7807fe..e194e2d1d 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -381,25 +381,25 @@ tr.button-transparent {
   background-color: transparent;
   border-radius: var(--size-rounded-sm);
 
-    &:focus-visible:not(&:disabled) > *,
-    &:hover:not(&:disabled) > * {
-      cursor: pointer;
-      filter: brightness(0.85);
-      background-color: var(--color-raised-bg);
-    }
+  &:focus-visible:not(&:disabled) > *,
+  &:hover:not(&:disabled) > * {
+    cursor: pointer;
+    filter: brightness(0.85);
+    background-color: var(--color-raised-bg);
+  }
 
-    &:active:not(&:disabled) > * {
-      filter: brightness(0.8);
-      background-color: var(--color-raised-bg);
-    }
+  &:active:not(&:disabled) > * {
+    filter: brightness(0.8);
+    background-color: var(--color-raised-bg);
+  }
 
-    &:disabled > *,
-    &[disabled] > * {
-      cursor: not-allowed;
-      filter: grayscale(50%);
-      opacity: 0.5;
-      box-shadow: none;
-    }
+  &:disabled > *,
+  &[disabled] > * {
+    cursor: not-allowed;
+    filter: grayscale(50%);
+    opacity: 0.5;
+    box-shadow: none;
+  }
 }
 
 .button-within {
@@ -886,6 +886,7 @@ textarea.known-error {
 }
 
 .known-errors {
+  min-height: 0;
   color: var(--color-special-red);
 
   ul {
@@ -999,6 +1000,7 @@ h1 {
         color: var(--color-special-red);
       }
     }
+
     .label__description {
       display: block;
       margin-block-end: var(--spacing-card-sm);
@@ -1067,11 +1069,14 @@ h1 {
     width: 15rem;
   }
 
-  >,
-  .extend-styling> {
-    input + *,
-    .input-group + * {
-      margin-block-start: var(--spacing-card-md);
+  > :where(input + *, .input-group + *) {
+    margin-block-start: var(--spacing-card-md);
+  }
+
+  .input-group {
+    .multiselect, input {
+      width: auto;
+      flex-basis: 0;
     }
   }
 
@@ -1146,6 +1151,13 @@ h1 {
   margin-right: 0;
 }
 
+.full-width-inputs {
+  .multiselect, input, .iconified-input {
+    width: 100%;
+    flex-basis: 100%;
+  }
+}
+
 input,
 button {
   &:disabled {
@@ -1356,3 +1368,10 @@ button {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 }
+
+.sr-only {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 0aaf134c2..ea55a9b39 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -72,7 +72,7 @@ html {
   --color-banner-side: hsl(357, 78%, 40%);
 
   --color-block-quote: var(--color-tooltip-bg);
-  --color-header-underline: var(--color-tooltip-text);
+  --color-header-underline: var(--color-divider-dark);
   --color-hr: var(--color-text);
 
   --color-table-border: #dfe2e5;
@@ -156,7 +156,7 @@ html {
   --color-banner-side: hsl(357, 78%, 40%);
 
   --color-block-quote: var(--color-code-bg);
-  --color-header-underline: var(--color-tooltip-text);
+  --color-header-underline: var(--color-divider-dark);
   --color-hr: var(--color-text);
 
   --color-table-border: #4f5864;
diff --git a/assets/styles/layout.scss b/assets/styles/layout.scss
index 2b5b4abf2..c9a88b796 100644
--- a/assets/styles/layout.scss
+++ b/assets/styles/layout.scss
@@ -38,9 +38,26 @@
 }
 
 .normal-page {
-  display: flex;
-  flex-direction: column;
-  margin: 0 0.75rem;
+  display: grid;
+  padding: 0 0.75rem;
+
+  grid-template:
+    'sidebar'
+    'content'
+    'info'
+    / 100%;
+
+  .normal-page__sidebar {
+    grid-area: sidebar;
+  }
+
+  .normal-page__info {
+    grid-area: info;
+  }
+
+  .normal-page__content {
+    grid-area: content;
+  }
 }
 
 .site-header {
@@ -49,13 +66,22 @@
 
 @media (min-width: 1024px) {
   .normal-page {
-    flex-direction: row;
     margin: 0 auto;
     max-width: 80rem;
     column-gap: 0.75rem;
 
+    grid-template:
+      'sidebar content' auto
+      'info content' auto
+      'dummy content' 1fr
+      / 20rem 1fr;
+
     &.alt-layout {
-      flex-direction: row-reverse;
+      grid-template:
+      'content sidebar' auto
+      'content info' auto
+      'content dummy' 1fr
+      / 1fr 20rem;
     }
   }
 
@@ -65,11 +91,12 @@
   }
 
   .normal-page__content {
-    width: 60rem;
-    max-width: 60rem;
-  }
-
-  .site-header {
-    margin: 0 auto;
+    max-width: calc(60rem - .75rem);
+  }
+}
+
+@media (min-width: 80rem) {
+  .normal-page__content {
+    width: calc(60rem - .75rem);
   }
 }
diff --git a/components/ui/DropArea.vue b/components/ui/DropArea.vue
new file mode 100644
index 000000000..375f6d000
--- /dev/null
+++ b/components/ui/DropArea.vue
@@ -0,0 +1,82 @@
+<template>
+  <div
+    ref="drop_area"
+    class="drop-area"
+    @drop.stop.prevent="
+      (event) => {
+        $refs.drop_area.style.visibility = 'hidden'
+
+        if (event.dataTransfer && event.dataTransfer.files) {
+          $emit('change', event.dataTransfer.files)
+        }
+      }
+    "
+    @dragenter.prevent="allowDrag"
+    @dragover.prevent="allowDrag"
+    @dragleave.prevent="$refs.drop_area.style.visibility = 'hidden'"
+  />
+</template>
+
+<script>
+export default {
+  name: 'DropArea',
+  props: {
+    accept: {
+      type: String,
+      default: '',
+    },
+  },
+  mounted() {
+    document.addEventListener('dragenter', () => {
+      this.$refs.drop_area.style.visibility = 'visible'
+    })
+  },
+  methods: {
+    allowDrag(event) {
+      const file = event.dataTransfer?.items[0]
+
+      if (
+        file &&
+        this.accept
+          .split(',')
+          .reduce(
+            (acc, t) => acc || file.type.startsWith(t) || file.type === t,
+            false
+          )
+      ) {
+        // Adds file dropping indicator
+        event.dataTransfer.dropEffect = 'copy'
+        event.preventDefault()
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.drop-area {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  visibility: hidden;
+  background-color: hsla(0, 0%, 0%, 0.5);
+  transition: visibility 0.2s ease-in-out, background-color 0.1s ease-in-out;
+  display: flex;
+
+  &::before {
+    --indent: 4rem;
+
+    content: ' ';
+    position: relative;
+    top: var(--indent);
+    left: var(--indent);
+    width: calc(100% - (2 * var(--indent)));
+    height: calc(100% - (2 * var(--indent)));
+    border-radius: 1rem;
+    border: 0.25rem dashed var(--color-button-bg);
+  }
+}
+</style>
diff --git a/components/ui/FileInput.vue b/components/ui/FileInput.vue
index 6c546b2cc..affaad9cc 100644
--- a/components/ui/FileInput.vue
+++ b/components/ui/FileInput.vue
@@ -1,31 +1,26 @@
 <template>
-  <div class="columns">
-    <label
-      class="iconified-button"
-      @drop.prevent="handleDrop"
-      @dragover.prevent
-    >
-      <UploadIcon v-if="showIcon" />
-      {{ prompt }}
-      <input
-        type="file"
-        :multiple="multiple"
-        :accept="accept"
-        @change="handleChange"
-      />
-    </label>
-  </div>
+  <label
+    :class="{ 'long-style': longStyle }"
+    @drop.prevent="handleDrop"
+    @dragover.prevent
+  >
+    <slot></slot>
+    {{ prompt }}
+    <input
+      type="file"
+      :multiple="multiple"
+      :accept="accept"
+      @change="handleChange"
+    />
+  </label>
 </template>
 
 <script>
 import { fileIsValid } from '~/plugins/fileUtils'
-import UploadIcon from '~/assets/images/utils/upload.svg?inline'
 
 export default {
   name: 'FileInput',
-  components: {
-    UploadIcon,
-  },
+  components: {},
   props: {
     prompt: {
       type: String,
@@ -54,6 +49,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    longStyle: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -92,22 +91,22 @@ label {
   svg {
     height: 1rem;
   }
-}
 
-input {
-  display: none;
-}
-
-.known-error label {
-  border-color: var(--color-special-red) !important;
-  background-color: var(--color-warning-bg) !important;
-
-  span {
-    border-color: var(--color-special-red);
+  input {
+    display: none;
   }
 
-  &::placeholder {
-    color: var(--color-warning-text);
+  &.long-style {
+    display: flex;
+    padding: 1.5rem 2rem;
+    justify-content: center;
+    align-items: center;
+    grid-gap: 0.5rem;
+    background-color: var(--color-button-bg);
+    border-radius: var(--size-rounded-sm);
+    border: dashed 0.3rem var(--color-text);
+    cursor: pointer;
+    color: var(--color-text-dark);
   }
 }
 </style>
diff --git a/generated/.gitkeep b/generated/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/layouts/default.vue b/layouts/default.vue
index 867cefea3..1b53bc5f1 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="layout" :class="{ 'expanded-mobile-nav': isBrowseMenuOpen }">
+  <div
+    ref="main_page"
+    class="layout"
+    :class="{ 'expanded-mobile-nav': isBrowseMenuOpen }"
+  >
     <header class="site-header" role="presentation">
       <section class="navbar card columns" role="navigation">
         <section class="skip column" role="presentation">
@@ -581,7 +585,7 @@ export default {
     margin-bottom: var(--spacing-card-md);
     max-width: 100vw;
 
-    @media screen and (min-width: 1024px) {
+    @media screen and (min-width: 1280px) {
       border-radius: var(--size-rounded-sm);
       max-width: 1280px;
       margin-left: auto;
@@ -793,15 +797,6 @@ export default {
                 &.nuxt-link-exact-active {
                   color: var(--color-button-text-active);
                   background-color: var(--color-button-bg);
-
-                  .profile-link {
-                    .username {
-                      margin-block: 0.7rem;
-                    }
-                    .prompt {
-                      display: none;
-                    }
-                  }
                 }
               }
 
@@ -1024,12 +1019,6 @@ export default {
             color: var(--color-brand-inverted);
             background-color: var(--color-brand);
 
-            .profile-link {
-              .prompt {
-                display: none;
-              }
-            }
-
             .beta-badge {
               background-color: var(--color-brand-inverted);
               color: var(--color-text-dark);
diff --git a/package-lock.json b/package-lock.json
index 322d41e5d..f9692070b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "knossos",
       "version": "1.0.0",
       "dependencies": {
+        "@iarna/toml": "^2.2.5",
         "@nuxtjs/axios": "^5.13.1",
         "@nuxtjs/dayjs": "^1.2.0",
         "@nuxtjs/markdownit": "^2.0.0",
@@ -16,6 +17,8 @@
         "cookie-universal-nuxt": "^2.1.5",
         "core-js": "^3.9.1",
         "highlight.js": "^10.3.2",
+        "js-yaml": "^4.1.0",
+        "jszip": "^3.10.1",
         "nuxt": "^2.15.3",
         "sass": "^1.32.12",
         "v-tooltip": "^2.0.3",
@@ -1709,6 +1712,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -1734,6 +1750,11 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@iarna/toml": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
+      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz",
@@ -5320,6 +5341,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/cosmiconfig/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/cosmiconfig/node_modules/resolve-from": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
@@ -6871,6 +6904,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/eslint/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -8395,6 +8441,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "node_modules/immutable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -9083,17 +9134,21 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "^2.0.1"
       },
       "bin": {
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/js-yaml/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -9146,6 +9201,17 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/kind-of": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
@@ -9205,6 +9271,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -13904,6 +13978,18 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/svgo/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/svgo/node_modules/nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
@@ -17708,6 +17794,16 @@
           "requires": {
             "type-fest": "^0.20.2"
           }
+        },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
         }
       }
     },
@@ -17733,6 +17829,11 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@iarna/toml": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
+      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz",
@@ -20609,6 +20710,15 @@
             "resolve-from": "^3.0.0"
           }
         },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
         "resolve-from": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
@@ -21489,6 +21599,16 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -22925,6 +23045,11 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "immutable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -23412,12 +23537,18 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "requires": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "^2.0.1"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        }
       }
     },
     "jsesc": {
@@ -23460,6 +23591,17 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "kind-of": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
@@ -23510,6 +23652,14 @@
         "type-check": "~0.4.0"
       }
     },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -27247,6 +27397,15 @@
           "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
           "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
         },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
         "nth-check": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
diff --git a/package.json b/package.json
index 3131a77c2..4f8a013c1 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "fix": "eslint --fix --ext .js,.vue --ignore-path .eslintignore ."
   },
   "dependencies": {
+    "@iarna/toml": "^2.2.5",
     "@nuxtjs/axios": "^5.13.1",
     "@nuxtjs/dayjs": "^1.2.0",
     "@nuxtjs/markdownit": "^2.0.0",
@@ -21,6 +22,8 @@
     "cookie-universal-nuxt": "^2.1.5",
     "core-js": "^3.9.1",
     "highlight.js": "^10.3.2",
+    "js-yaml": "^4.1.0",
+    "jszip": "^3.10.1",
     "nuxt": "^2.15.3",
     "sass": "^1.32.12",
     "v-tooltip": "^2.0.3",
diff --git a/pages/_type/_id.vue b/pages/_type/_id.vue
index b50f837e2..67b963125 100644
--- a/pages/_type/_id.vue
+++ b/pages/_type/_id.vue
@@ -9,6 +9,7 @@
       </div>
     </Modal>
     <ModalReport
+      v-if="$auth.user"
       ref="modal_project_report"
       :item-id="project.id"
       item-type="project"
@@ -286,253 +287,249 @@
             </ul>
           </div>
         </div>
-        <div class="extra-info-desktop card">
-          <template
-            v-if="
-              project.issues_url ||
-              project.source_url ||
-              project.wiki_url ||
-              project.discord_url ||
-              project.donation_urls.length > 0
+      </article>
+      <div class="card normal-page__info">
+        <template
+          v-if="
+            project.issues_url ||
+            project.source_url ||
+            project.wiki_url ||
+            project.discord_url ||
+            project.donation_urls.length > 0
+          "
+        >
+          <h3 class="card-header">External resources</h3>
+          <div class="links">
+            <a
+              v-if="project.issues_url"
+              :href="project.issues_url"
+              class="title"
+              :target="$external()"
+            >
+              <IssuesIcon aria-hidden="true" />
+              <span>Issues</span>
+            </a>
+            <a
+              v-if="project.source_url"
+              :href="project.source_url"
+              class="title"
+              :target="$external()"
+            >
+              <CodeIcon aria-hidden="true" />
+              <span>Source</span>
+            </a>
+            <a
+              v-if="project.wiki_url"
+              :href="project.wiki_url"
+              class="title"
+              :target="$external()"
+            >
+              <WikiIcon aria-hidden="true" />
+              <span>Wiki</span>
+            </a>
+            <a
+              v-if="project.discord_url"
+              :href="project.discord_url"
+              :target="$external()"
+            >
+              <DiscordIcon class="shrink" aria-hidden="true" />
+              <span>Discord</span>
+            </a>
+            <a
+              v-for="(donation, index) in project.donation_urls"
+              :key="index"
+              :href="donation.url"
+              :target="$external()"
+            >
+              <BuyMeACoffeeLogo
+                v-if="donation.id === 'bmac'"
+                aria-hidden="true"
+              />
+              <PatreonIcon
+                v-else-if="donation.id === 'patreon'"
+                aria-hidden="true"
+              />
+              <KoFiIcon
+                v-else-if="donation.id === 'ko-fi'"
+                aria-hidden="true"
+              />
+              <PayPalIcon
+                v-else-if="donation.id === 'paypal'"
+                aria-hidden="true"
+              />
+              <OpenCollectiveIcon
+                v-else-if="donation.id === 'open-collective'"
+                aria-hidden="true"
+              />
+              <HeartIcon v-else-if="donation.id === 'github'" />
+              <UnknownIcon v-else />
+              <span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
+              <span v-else-if="donation.id === 'patreon'">Patreon</span>
+              <span v-else-if="donation.id === 'paypal'">PayPal</span>
+              <span v-else-if="donation.id === 'ko-fi'">Ko-fi</span>
+              <span v-else-if="donation.id === 'github'">GitHub Sponsors</span>
+              <span v-else>Donate</span>
+            </a>
+          </div>
+          <hr class="card-divider" />
+        </template>
+        <template v-if="featuredVersions.length > 0">
+          <div class="featured-header">
+            <h3 class="card-header">Featured versions</h3>
+            <nuxt-link
+              v-if="project.versions.length > 0 || currentMember"
+              :to="`/${project.project_type}/${
+                project.slug ? project.slug : project.id
+              }/versions`"
+              class="goto-link"
+            >
+              See all
+              <ChevronRightIcon
+                class="featured-header-chevron"
+                aria-hidden="true"
+              />
+            </nuxt-link>
+          </div>
+          <div
+            v-for="version in featuredVersions"
+            :key="version.id"
+            class="featured-version button-transparent"
+            @click="
+              $router.push(
+                `/${project.project_type}/${
+                  project.slug ? project.slug : project.id
+                }/version/${encodeURI(version.displayUrlEnding)}`
+              )
             "
           >
-            <h3 class="card-header">External resources</h3>
-            <div class="links">
-              <a
-                v-if="project.issues_url"
-                :href="project.issues_url"
-                class="title"
-                :target="$external()"
-              >
-                <IssuesIcon aria-hidden="true" />
-                <span>Issues</span>
-              </a>
-              <a
-                v-if="project.source_url"
-                :href="project.source_url"
-                class="title"
-                :target="$external()"
-              >
-                <CodeIcon aria-hidden="true" />
-                <span>Source</span>
-              </a>
-              <a
-                v-if="project.wiki_url"
-                :href="project.wiki_url"
-                class="title"
-                :target="$external()"
-              >
-                <WikiIcon aria-hidden="true" />
-                <span>Wiki</span>
-              </a>
-              <a
-                v-if="project.discord_url"
-                :href="project.discord_url"
-                :target="$external()"
-              >
-                <DiscordIcon class="shrink" aria-hidden="true" />
-                <span>Discord</span>
-              </a>
-              <a
-                v-for="(donation, index) in project.donation_urls"
-                :key="index"
-                :href="donation.url"
-                :target="$external()"
-              >
-                <BuyMeACoffeeLogo
-                  v-if="donation.id === 'bmac'"
-                  aria-hidden="true"
-                />
-                <PatreonIcon
-                  v-else-if="donation.id === 'patreon'"
-                  aria-hidden="true"
-                />
-                <KoFiIcon
-                  v-else-if="donation.id === 'ko-fi'"
-                  aria-hidden="true"
-                />
-                <PayPalIcon
-                  v-else-if="donation.id === 'paypal'"
-                  aria-hidden="true"
-                />
-                <OpenCollectiveIcon
-                  v-else-if="donation.id === 'open-collective'"
-                  aria-hidden="true"
-                />
-                <HeartIcon v-else-if="donation.id === 'github'" />
-                <UnknownIcon v-else />
-                <span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
-                <span v-else-if="donation.id === 'patreon'">Patreon</span>
-                <span v-else-if="donation.id === 'paypal'">PayPal</span>
-                <span v-else-if="donation.id === 'ko-fi'">Ko-fi</span>
-                <span v-else-if="donation.id === 'github'"
-                  >GitHub Sponsors</span
-                >
-                <span v-else>Donate</span>
-              </a>
-            </div>
-            <hr class="card-divider" />
-          </template>
-          <template v-if="featuredVersions.length > 0">
-            <div class="featured-header">
-              <h3 class="card-header">Featured versions</h3>
+            <a
+              v-tooltip="
+                findPrimary(version).filename +
+                ' (' +
+                $formatBytes(findPrimary(version).size) +
+                ')'
+              "
+              :href="findPrimary(version).url"
+              class="download download-button square-button brand-button"
+              :title="`Download ${version.name}`"
+              @click.stop="(event) => event.stopPropagation()"
+            >
+              <DownloadIcon aria-hidden="true" />
+            </a>
+            <div class="info">
               <nuxt-link
-                v-if="project.versions.length > 0 || currentMember"
                 :to="`/${project.project_type}/${
                   project.slug ? project.slug : project.id
-                }/versions`"
-                class="goto-link"
+                }/version/${encodeURI(version.displayUrlEnding)}`"
+                class="top"
               >
-                See all
-                <ChevronRightIcon
-                  class="featured-header-chevron"
-                  aria-hidden="true"
-                />
+                {{ version.name }}
               </nuxt-link>
-            </div>
-            <div
-              v-for="version in featuredVersions"
-              :key="version.id"
-              class="featured-version button-transparent"
-              @click="
-                $router.push(
-                  `/${project.project_type}/${
-                    project.slug ? project.slug : project.id
-                  }/version/${encodeURI(version.displayUrlEnding)}`
-                )
-              "
-            >
-              <a
-                v-tooltip="
-                  findPrimary(version).filename +
-                  ' (' +
-                  $formatBytes(findPrimary(version).size) +
-                  ')'
-                "
-                :href="findPrimary(version).url"
-                class="download square-button brand-button"
-                :title="`Download ${version.name}`"
-                @click.stop="(event) => event.stopPropagation()"
+              <div
+                v-if="version.game_versions.length > 0"
+                class="game-version item"
               >
-                <DownloadIcon aria-hidden="true" />
-              </a>
-              <div class="info">
-                <nuxt-link
-                  :to="`/${project.project_type}/${
-                    project.slug ? project.slug : project.id
-                  }/version/${encodeURI(version.displayUrlEnding)}`"
-                  class="top"
-                >
-                  {{ version.name }}
-                </nuxt-link>
-                <div
-                  v-if="version.game_versions.length > 0"
-                  class="game-version item"
-                >
-                  {{
-                    version.loaders.map((x) => $formatCategory(x)).join(', ')
-                  }}
-                  {{ $formatVersion(version.game_versions) }}
-                </div>
-                <Badge
-                  v-if="version.version_type === 'release'"
-                  type="release"
-                  color="green"
-                />
-                <Badge
-                  v-else-if="version.version_type === 'beta'"
-                  type="beta"
-                  color="orange"
-                />
-                <Badge
-                  v-else-if="version.version_type === 'alpha'"
-                  type="alpha"
-                  color="red"
-                />
+                {{ version.loaders.map((x) => $formatCategory(x)).join(', ') }}
+                {{ $formatVersion(version.game_versions) }}
               </div>
-            </div>
-            <hr class="card-divider" />
-          </template>
-          <h3 class="card-header">Project members</h3>
-          <div
-            v-for="member in members"
-            :key="member.user.id"
-            class="team-member columns button-transparent"
-            @click="$router.push('/user/' + member.user.username)"
-          >
-            <Avatar
-              :src="member.avatar_url"
-              :alt="member.username"
-              size="sm"
-              circle
-            />
-
-            <div class="member-info">
-              <nuxt-link :to="'/user/' + member.user.username" class="name">
-                <p>{{ member.name }}</p>
-              </nuxt-link>
-              <p class="role">{{ member.role }}</p>
+              <Badge
+                v-if="version.version_type === 'release'"
+                type="release"
+                color="green"
+              />
+              <Badge
+                v-else-if="version.version_type === 'beta'"
+                type="beta"
+                color="orange"
+              />
+              <Badge
+                v-else-if="version.version_type === 'alpha'"
+                type="alpha"
+                color="red"
+              />
             </div>
           </div>
           <hr class="card-divider" />
-          <h3 class="card-header">Technical information</h3>
-          <div class="infos">
-            <div class="info">
-              <div class="key">License</div>
-              <div class="value lowercase">
-                <a
-                  v-if="project.license.url"
-                  class="text-link"
-                  :href="project.license.url"
-                >
-                  {{ licenseIdDisplay }}
-                </a>
-                <a
-                  v-else-if="
-                    project.license.id === 'LicenseRef-All-Rights-Reserved' ||
-                    !project.license.id.includes('LicenseRef')
-                  "
-                  class="text-link"
-                  @click="getLicenseData()"
-                >
-                  {{ licenseIdDisplay }}
-                </a>
-                <span v-else>{{ licenseIdDisplay }}</span>
-              </div>
+        </template>
+        <h3 class="card-header">Project members</h3>
+        <div
+          v-for="member in members"
+          :key="member.user.id"
+          class="team-member columns button-transparent"
+          @click="$router.push('/user/' + member.user.username)"
+        >
+          <Avatar
+            :src="member.avatar_url"
+            :alt="member.username"
+            size="sm"
+            circle
+          />
+
+          <div class="member-info">
+            <nuxt-link :to="'/user/' + member.user.username" class="name">
+              <p>{{ member.name }}</p>
+            </nuxt-link>
+            <p class="role">{{ member.role }}</p>
+          </div>
+        </div>
+        <hr class="card-divider" />
+        <h3 class="card-header">Technical information</h3>
+        <div class="infos">
+          <div class="info">
+            <div class="key">License</div>
+            <div class="value lowercase">
+              <a
+                v-if="project.license.url"
+                class="text-link"
+                :href="project.license.url"
+              >
+                {{ licenseIdDisplay }}
+              </a>
+              <a
+                v-else-if="
+                  project.license.id === 'LicenseRef-All-Rights-Reserved' ||
+                  !project.license.id.includes('LicenseRef')
+                "
+                class="text-link"
+                @click="getLicenseData()"
+              >
+                {{ licenseIdDisplay }}
+              </a>
+              <span v-else>{{ licenseIdDisplay }}</span>
             </div>
-            <div
-              v-if="
-                project.project_type !== 'resourcepack' &&
-                project.project_type !== 'plugin'
-              "
-              class="info"
-            >
-              <div class="key">Client side</div>
-              <div class="value">
-                {{ project.client_side }}
-              </div>
+          </div>
+          <div
+            v-if="
+              project.project_type !== 'resourcepack' &&
+              project.project_type !== 'plugin'
+            "
+            class="info"
+          >
+            <div class="key">Client side</div>
+            <div class="value">
+              {{ project.client_side }}
             </div>
-            <div
-              v-if="
-                project.project_type !== 'resourcepack' &&
-                project.project_type !== 'plugin'
-              "
-              class="info"
-            >
-              <div class="key">Server side</div>
-              <div class="value">
-                {{ project.server_side }}
-              </div>
+          </div>
+          <div
+            v-if="
+              project.project_type !== 'resourcepack' &&
+              project.project_type !== 'plugin'
+            "
+            class="info"
+          >
+            <div class="key">Server side</div>
+            <div class="value">
+              {{ project.server_side }}
             </div>
-            <div class="info">
-              <div class="key">Project ID</div>
-              <div class="value lowercase">
-                <CopyCode :text="project.id" />
-              </div>
+          </div>
+          <div class="info">
+            <div class="key">Project ID</div>
+            <div class="value lowercase">
+              <CopyCode :text="project.id" />
             </div>
           </div>
         </div>
-      </article>
+      </div>
       <section class="normal-page__content">
         <div
           v-if="project.status === 'unlisted'"
@@ -637,252 +634,6 @@
           :all-members.sync="allMembers"
           :dependencies.sync="dependencies"
         />
-        <div class="extra-info-mobile card">
-          <template
-            v-if="
-              project.issues_url ||
-              project.source_url ||
-              project.wiki_url ||
-              project.discord_url ||
-              project.donation_urls.length > 0
-            "
-          >
-            <h3 class="card-header">External resources</h3>
-            <div class="links">
-              <a
-                v-if="project.issues_url"
-                :href="project.issues_url"
-                class="title"
-                :target="$external()"
-              >
-                <IssuesIcon aria-hidden="true" />
-                <span>Issues</span>
-              </a>
-              <a
-                v-if="project.source_url"
-                :href="project.source_url"
-                class="title"
-                :target="$external()"
-              >
-                <CodeIcon aria-hidden="true" />
-                <span>Source</span>
-              </a>
-              <a
-                v-if="project.wiki_url"
-                :href="project.wiki_url"
-                class="title"
-                :target="$external()"
-              >
-                <WikiIcon aria-hidden="true" />
-                <span>Wiki</span>
-              </a>
-              <a
-                v-if="project.discord_url"
-                :href="project.discord_url"
-                :target="$external()"
-              >
-                <DiscordIcon class="shrink" aria-hidden="true" />
-                <span>Discord</span>
-              </a>
-              <a
-                v-for="(donation, index) in project.donation_urls"
-                :key="index"
-                :href="donation.url"
-                :target="$external()"
-              >
-                <BuyMeACoffeeLogo
-                  v-if="donation.id === 'bmac'"
-                  aria-hidden="true"
-                />
-                <PatreonIcon
-                  v-else-if="donation.id === 'patreon'"
-                  aria-hidden="true"
-                />
-                <KoFiIcon
-                  v-else-if="donation.id === 'ko-fi'"
-                  aria-hidden="true"
-                />
-                <PayPalIcon
-                  v-else-if="donation.id === 'paypal'"
-                  aria-hidden="true"
-                />
-                <OpenCollectiveIcon
-                  v-else-if="donation.id === 'open-collective'"
-                  aria-hidden="true"
-                />
-                <HeartIcon v-else-if="donation.id === 'github'" />
-                <UnknownIcon v-else />
-                <span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
-                <span v-else-if="donation.id === 'patreon'">Patreon</span>
-                <span v-else-if="donation.id === 'paypal'">PayPal</span>
-                <span v-else-if="donation.id === 'ko-fi'">Ko-fi</span>
-                <span v-else-if="donation.id === 'github'"
-                  >GitHub Sponsors</span
-                >
-                <span v-else>Donate</span>
-              </a>
-            </div>
-            <hr class="card-divider" />
-          </template>
-          <template v-if="featuredVersions.length > 0">
-            <div class="featured-header">
-              <h3 class="card-header">Featured versions</h3>
-              <nuxt-link
-                v-if="project.versions.length > 0 || currentMember"
-                :to="`/${project.project_type}/${
-                  project.slug ? project.slug : project.id
-                }/versions`"
-                class="goto-link"
-              >
-                See all
-                <ChevronRightIcon
-                  class="featured-header-chevron"
-                  aria-hidden="true"
-                />
-              </nuxt-link>
-            </div>
-            <div
-              v-for="version in featuredVersions"
-              :key="version.id"
-              class="featured-version button-transparent"
-              @click="
-                $router.push(
-                  `/${project.project_type}/${
-                    project.slug ? project.slug : project.id
-                  }/version/${encodeURI(version.displayUrlEnding)}`
-                )
-              "
-            >
-              <a
-                v-tooltip="
-                  findPrimary(version).filename +
-                  ' (' +
-                  $formatBytes(findPrimary(version).size) +
-                  ')'
-                "
-                :href="findPrimary(version).url"
-                class="download square-button brand-button"
-                :title="`Download ${version.name}`"
-                @click.stop="(event) => event.stopPropagation()"
-              >
-                <DownloadIcon aria-hidden="true" />
-              </a>
-              <div class="info">
-                <nuxt-link
-                  :to="`/${project.project_type}/${
-                    project.slug ? project.slug : project.id
-                  }/version/${encodeURI(version.displayUrlEnding)}`"
-                  class="top"
-                >
-                  {{ version.name }}
-                </nuxt-link>
-                <div
-                  v-if="version.game_versions.length > 0"
-                  class="game-version item"
-                >
-                  {{
-                    version.loaders.map((x) => $formatCategory(x)).join(', ')
-                  }}
-                  {{ $formatVersion(version.game_versions) }}
-                </div>
-                <Badge
-                  v-if="version.version_type === 'release'"
-                  type="release"
-                  color="green"
-                />
-                <Badge
-                  v-else-if="version.version_type === 'beta'"
-                  type="beta"
-                  color="orange"
-                />
-                <Badge
-                  v-else-if="version.version_type === 'alpha'"
-                  type="alpha"
-                  color="red"
-                />
-              </div>
-            </div>
-            <hr class="card-divider" />
-          </template>
-          <h3 class="card-header">Project members</h3>
-          <div
-            v-for="member in members"
-            :key="member.user.id"
-            class="team-member columns button-transparent"
-            @click="$router.push('/user/' + member.user.username)"
-          >
-            <Avatar
-              :src="member.avatar_url"
-              :alt="member.username"
-              size="sm"
-              circle
-            />
-
-            <div class="member-info">
-              <nuxt-link :to="'/user/' + member.user.username" class="name">
-                <p>{{ member.name }}</p>
-              </nuxt-link>
-              <p class="role">{{ member.role }}</p>
-            </div>
-          </div>
-          <hr class="card-divider" />
-          <h3 class="card-header">Technical information</h3>
-          <div class="infos">
-            <div class="info">
-              <div class="key">License</div>
-              <div class="value lowercase">
-                <a
-                  v-if="project.license.url"
-                  class="text-link"
-                  :href="project.license.url"
-                >
-                  {{ licenseIdDisplay }}
-                </a>
-                <a
-                  v-else-if="
-                    project.license.id === 'LicenseRef-All-Rights-Reserved' ||
-                    !project.license.id.includes('LicenseRef')
-                  "
-                  class="text-link"
-                  @click="getLicenseData()"
-                >
-                  {{ licenseIdDisplay }}
-                </a>
-                <span v-else>{{ licenseIdDisplay }}</span>
-              </div>
-            </div>
-            <div
-              v-if="
-                project.project_type !== 'resourcepack' &&
-                project.project_type !== 'plugin'
-              "
-              class="info"
-            >
-              <div class="key">Client side</div>
-              <div class="value">
-                {{ project.client_side }}
-              </div>
-            </div>
-            <div
-              v-if="
-                project.project_type !== 'resourcepack' &&
-                project.project_type !== 'plugin'
-              "
-              class="info"
-            >
-              <div class="key">Server side</div>
-              <div class="value">
-                {{ project.server_side }}
-              </div>
-            </div>
-            <div class="info">
-              <div class="key">Project ID</div>
-              <div class="value lowercase">
-                <CopyCode :text="project.id" />
-              </div>
-            </div>
-          </div>
-        </div>
       </section>
     </div>
   </div>
@@ -1205,7 +956,7 @@ export default {
     async submitForReview() {
       if (
         this.project.body === '' ||
-        this.project.versions.length < 1 ||
+        this.versions.length < 1 ||
         this.project.client_side === 'unknown' ||
         this.project.server_side === 'unknown'
       ) {
@@ -1475,16 +1226,6 @@ export default {
   .content {
     max-width: calc(1280px - 21rem);
   }
-
-  .extra-info-mobile {
-    display: none;
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  .extra-info-desktop {
-    display: none;
-  }
 }
 
 .status-buttons {
diff --git a/pages/_type/_id/edit.vue b/pages/_type/_id/edit.vue
index 39903a0a8..d0d526bfa 100644
--- a/pages/_type/_id/edit.vue
+++ b/pages/_type/_id/edit.vue
@@ -203,11 +203,13 @@
         :max-size="262144"
         :show-icon="true"
         accept="image/png,image/jpeg,image/gif,image/webp"
-        class="choose-image"
+        class="choose-image iconified-button"
         prompt="Choose image"
         :disabled="(currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS"
         @change="showPreviewImage"
-      />
+      >
+        <UploadIcon />
+      </FileInput>
       <button
         class="iconified-button"
         :disabled="(currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS"
@@ -551,6 +553,7 @@ import PlusIcon from '~/assets/images/utils/plus.svg?inline'
 import SaveIcon from '~/assets/images/utils/save.svg?inline'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
 import RevertIcon from '~/assets/images/utils/undo.svg?inline'
+import UploadIcon from '~/assets/images/utils/upload.svg?inline'
 
 import Chips from '~/components/ui/Chips'
 import FileInput from '~/components/ui/FileInput'
@@ -570,6 +573,7 @@ export default {
     SaveIcon,
     TrashIcon,
     RevertIcon,
+    UploadIcon,
   },
   props: {
     project: {
diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue
index d7817f1b7..826d51088 100644
--- a/pages/_type/_id/gallery.vue
+++ b/pages/_type/_id/gallery.vue
@@ -237,8 +237,11 @@
             :max-size="5242880"
             accept="image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp"
             prompt="Choose image or drag it here"
+            class="iconified-button"
             @change="(files) => showPreviewImage(files, index)"
-          />
+          >
+            <UploadIcon />
+          </FileInput>
           <div class="gallery-buttons">
             <div class="delete-button-container">
               <button
@@ -268,6 +271,7 @@ import CheckIcon from '~/assets/images/utils/check.svg?inline'
 import ExternalIcon from '~/assets/images/utils/external.svg?inline'
 import ExpandIcon from '~/assets/images/utils/expand.svg?inline'
 import ContractIcon from '~/assets/images/utils/contract.svg?inline'
+import UploadIcon from '~/assets/images/utils/upload.svg?inline'
 
 import FileInput from '~/components/ui/FileInput'
 import Checkbox from '~/components/ui/Checkbox'
@@ -287,6 +291,7 @@ export default {
     ExternalIcon,
     ExpandIcon,
     ContractIcon,
+    UploadIcon,
   },
   auth: false,
   beforeRouteLeave(to, from, next) {
diff --git a/pages/_type/_id/index.vue b/pages/_type/_id/index.vue
index b31aa9124..941a8ae61 100644
--- a/pages/_type/_id/index.vue
+++ b/pages/_type/_id/index.vue
@@ -20,10 +20,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.markdown-body {
-  max-width: calc(
-    60rem - 2 * var(--spacing-card-lg) - 9px
-  ); // $2.50 to anyone who can figure out why the 9px is needed
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/pages/_type/_id/version.vue b/pages/_type/_id/version.vue
index fe64f9117..9cfbb2c4d 100644
--- a/pages/_type/_id/version.vue
+++ b/pages/_type/_id/version.vue
@@ -1,44 +1,133 @@
 <template>
-  <div v-if="version">
-    <div v-if="showKnownErrors" class="known-errors card">
-      <ul>
-        <li v-if="version.version_number === ''">
-          Your version must have a version number.
-        </li>
-        <li v-if="version.game_versions.length === 0">
-          Your version must have the supported Minecraft versions selected.
-        </li>
-        <li v-if="newFiles.length === 0 && version.files.length === 0">
-          Your version must have a file uploaded.
-        </li>
-        <li
-          v-if="
-            version.loaders.length === 0 &&
-            project.project_type !== 'resourcepack'
-          "
+  <div v-if="version" class="version-page">
+    <ModalConfirm
+      ref="modal_confirm"
+      title="Are you sure you want to delete this version?"
+      description="This will remove this version forever (like really forever)."
+      :has-to-type="false"
+      proceed-label="Delete"
+      @proceed="deleteVersion()"
+    />
+    <ModalReport
+      v-if="$auth.user"
+      ref="modal_version_report"
+      :item-id="version.id"
+      item-type="version"
+    />
+    <div class="version-page__title universal-card">
+      <div class="version-header">
+        <template v-if="isEditing">
+          <input
+            v-model="version.name"
+            type="text"
+            placeholder="Enter a version title..."
+            maxlength="256"
+          />
+        </template>
+        <h2 :class="{ 'sr-only': isEditing }">
+          {{ version.name }}
+        </h2>
+        <div v-if="version.featured" class="featured">
+          <StarIcon aria-hidden="true" />
+          Featured
+        </div>
+        <div
+          v-else-if="featuredVersions.find((x) => x.id === version.id)"
+          class="featured"
         >
-          Your version must have the supported mod loaders selected.
-        </li>
-      </ul>
-    </div>
-    <div class="content card">
-      <ModalConfirm
-        ref="modal_confirm"
-        title="Are you sure you want to delete this version?"
-        description="This will remove this version forever (like really forever)."
-        :has-to-type="false"
-        proceed-label="Delete"
-        @proceed="deleteVersion()"
-      />
-      <ModalReport
-        ref="modal_version_report"
-        :item-id="version.id"
-        item-type="version"
-      />
-      <div class="columns">
+          <StarIcon aria-hidden="true" />
+          Auto-featured
+        </div>
+      </div>
+      <div v-if="fieldErrors && showKnownErrors" class="known-errors">
+        <ul>
+          <li v-if="version.version_number === ''">
+            Your version must have a version number.
+          </li>
+          <li v-if="version.game_versions.length === 0">
+            Your version must have the supported Minecraft versions selected.
+          </li>
+          <li
+            v-if="
+              newFiles.length === 0 &&
+              version.files.length === 0 &&
+              !replaceFile
+            "
+          >
+            Your version must have a file uploaded.
+          </li>
+          <li
+            v-if="
+              version.loaders.length === 0 &&
+              project.project_type !== 'resourcepack'
+            "
+          >
+            Your version must have the supported mod loaders selected.
+          </li>
+        </ul>
+      </div>
+      <div v-if="isCreating" class="input-group">
+        <button
+          class="iconified-button brand-button"
+          :disabled="!$nuxt.$loading"
+          @click="createVersion"
+        >
+          <PlusIcon aria-hidden="true" />
+          Create
+        </button>
+        <nuxt-link
+          v-if="$auth.user"
+          :to="`/${project.project_type}/${
+            project.slug ? project.slug : project.id
+          }/versions`"
+          class="iconified-button"
+        >
+          <CrossIcon aria-hidden="true" />
+          Cancel
+        </nuxt-link>
+      </div>
+      <div v-else-if="isEditing" class="input-group">
+        <button
+          class="iconified-button brand-button"
+          :disabled="!$nuxt.$loading"
+          @click="saveEditedVersion"
+        >
+          <SaveIcon aria-hidden="true" />
+          Save
+        </button>
+        <button
+          class="iconified-button"
+          @click="version.featured = !version.featured"
+        >
+          <StarIcon aria-hidden="true" />
+          <template v-if="!version.featured"> Feature version </template>
+          <template v-else> Unfeature version </template>
+        </button>
+        <nuxt-link
+          v-if="currentMember"
+          class="action iconified-button"
+          :to="`/${project.project_type}/${
+            project.slug ? project.slug : project.id
+          }/version/${encodeURI(version.displayUrlEnding)}`"
+        >
+          <CrossIcon aria-hidden="true" />
+          Discard changes
+        </nuxt-link>
+      </div>
+      <div v-else class="input-group">
+        <a
+          v-if="primaryFile"
+          v-tooltip="
+            primaryFile.filename + ' (' + $formatBytes(primaryFile.size) + ')'
+          "
+          :href="primaryFile.url"
+          class="iconified-button brand-button"
+          :title="`Download ${primaryFile.filename}`"
+        >
+          <DownloadIcon aria-hidden="true" />
+          Download
+        </a>
         <nuxt-link
-          v-if="mode === 'version'"
-          class="iconified-button back-button"
           :to="`${
             $nuxt.context.from &&
             ($nuxt.context.from.name === 'type-id-changelog' ||
@@ -48,635 +137,549 @@
                   project.slug ? project.slug : project.id
                 }/versions`
           }`"
+          class="iconified-button"
         >
           <BackIcon aria-hidden="true" />
           Back to list
         </nuxt-link>
+        <button
+          v-if="$auth.user"
+          class="iconified-button"
+          @click="$refs.modal_version_report.show()"
+        >
+          <ReportIcon aria-hidden="true" />
+          Report
+        </button>
+        <a v-if="!$auth.user" class="iconified-button" :href="authUrl">
+          <ReportIcon aria-hidden="true" />
+          Report
+        </a>
+        <nuxt-link
+          v-if="currentMember"
+          class="action iconified-button"
+          :to="`/${project.project_type}/${
+            project.slug ? project.slug : project.id
+          }/version/${encodeURI(version.displayUrlEnding)}/edit`"
+        >
+          <EditIcon aria-hidden="true" />
+          Edit
+        </nuxt-link>
+        <button
+          v-if="currentMember"
+          class="iconified-button danger-button"
+          @click="$refs.modal_confirm.show()"
+        >
+          <TrashIcon aria-hidden="true" />
+          Delete
+        </button>
       </div>
-      <div>
-        <div v-if="mode === 'version'" class="version-header">
-          <h2>{{ version.name }}</h2>
-
-          <div v-if="version.featured" class="featured">
-            <StarIcon aria-hidden="true" />
-            Featured
-          </div>
-          <div
-            v-else-if="featuredVersions.find((x) => x.id === version.id)"
-            class="featured"
-          >
-            <StarIcon aria-hidden="true" />
-            Auto-featured
-          </div>
+    </div>
+    <div class="version-page__changelog universal-card">
+      <h3>Changelog</h3>
+      <template v-if="isEditing">
+        <span
+          >This editor supports
+          <a
+            class="text-link"
+            href="https://guides.github.com/features/mastering-markdown/"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Markdown</a
+          >. HTML can also be used inside your changelog, not including styles,
+          scripts, and iframes.
+        </span>
+        <Chips
+          v-model="changelogViewMode"
+          class="separator"
+          :items="['source', 'preview']"
+        />
+        <div
+          v-if="changelogViewMode === 'source'"
+          class="resizable-textarea-wrapper"
+        >
+          <textarea id="body" v-model="version.changelog" maxlength="65536" />
         </div>
         <div
-          v-if="mode === 'edit' || mode === 'create'"
-          class="version-data-inputs"
-        >
-          <input
-            v-model="version.name"
-            class="full-width-input"
-            type="text"
-            placeholder="Enter an optional version name..."
-            maxlength="64"
-          />
-          <Checkbox v-model="version.featured" label="Featured" />
-          <hr class="card-divider" />
+          v-if="changelogViewMode === 'preview'"
+          v-highlightjs
+          class="markdown-body"
+          v-html="
+            version.changelog
+              ? $xss($md.render(version.changelog))
+              : 'No changelog specified.'
+          "
+        ></div>
+      </template>
+      <div
+        v-else
+        v-highlightjs
+        class="markdown-body"
+        v-html="
+          version.changelog
+            ? $xss($md.render(version.changelog))
+            : 'No changelog specified.'
+        "
+      ></div>
+    </div>
+    <div
+      v-if="version.dependencies.length > 0 || isEditing"
+      class="version-page__dependencies universal-card"
+    >
+      <h3>Dependencies</h3>
+      <div
+        v-for="(dependency, index) in version.dependencies.filter(
+          (x) => !x.file_name
+        )"
+        :key="index"
+        class="dependency"
+        :class="{ 'button-transparent': !isEditing }"
+        @click="!isEditing ? $router.push(dependency.link) : {}"
+      >
+        <Avatar
+          :src="dependency.project ? dependency.project.icon_url : null"
+          alt="dependency-icon"
+          size="sm"
+        />
+        <nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
+          <span class="project-title">
+            {{
+              dependency.project ? dependency.project.title : 'Unknown Project'
+            }}
+          </span>
+          <span v-if="dependency.version">
+            Version {{ dependency.version.version_number }} is
+            {{ dependency.dependency_type }}
+          </span>
+          <span v-else class="dep-type">
+            {{ dependency.dependency_type }}
+          </span>
+        </nuxt-link>
+        <div v-else class="info">
+          <span class="project-title">
+            {{
+              dependency.project ? dependency.project.title : 'Unknown Project'
+            }}
+          </span>
+          <span v-if="dependency.version">
+            Version {{ dependency.version.version_number }} is
+            {{ dependency.dependency_type }}
+          </span>
+          <span v-else class="dep-type">
+            {{ dependency.dependency_type }}
+          </span>
         </div>
-        <div v-if="mode === 'edit'" class="header-buttons button-group columns">
-          <h3 class="column-grow-1">Edit version</h3>
-          <nuxt-link
-            v-if="$auth.user"
-            :to="`/${project.project_type}/${
-              project.slug ? project.slug : project.id
-            }/version/${encodeURI(version.displayUrlEnding)}`"
-            class="iconified-button"
-          >
-            <CrossIcon aria-hidden="true" />
-            Cancel
-          </nuxt-link>
+        <button
+          v-if="isEditing"
+          class="iconified-button"
+          @click="version.dependencies.splice(index, 1)"
+        >
+          <TrashIcon />
+          Remove
+        </button>
+      </div>
+      <div
+        v-for="(dependency, index) in version.dependencies.filter(
+          (x) => x.file_name
+        )"
+        :key="index"
+        class="dependency"
+      >
+        <Avatar :src="null" alt="dependency-icon" size="sm" />
+        <div class="info">
+          <span class="project-title">
+            {{ dependency.file_name }}
+          </span>
+          <span>Added via overrides</span>
+        </div>
+      </div>
+      <div
+        v-if="isEditing && project.project_type !== 'modpack'"
+        class="add-dependency"
+      >
+        <h4>Add dependency</h4>
+        <div class="input-group">
+          <Multiselect
+            v-model="dependencyAddMode"
+            class="input"
+            :options="['project', 'version']"
+            :custom-label="
+              (value) => value.charAt(0).toUpperCase() + value.slice(1)
+            "
+            :searchable="false"
+            :close-on-select="true"
+            :show-labels="false"
+            :allow-empty="false"
+          />
+          <input
+            v-model="newDependencyId"
+            type="text"
+            :placeholder="`Enter the ${dependencyAddMode} ID${
+              dependencyAddMode === 'project' ? '/slug' : ''
+            }`"
+            @keyup.enter="
+              addDependency(
+                dependencyAddMode,
+                newDependencyId,
+                newDependencyType
+              )
+            "
+          />
+          <Multiselect
+            v-model="newDependencyType"
+            class="input"
+            :options="['required', 'optional', 'incompatible', 'embedded']"
+            :custom-label="
+              (value) => value.charAt(0).toUpperCase() + value.slice(1)
+            "
+            :searchable="false"
+            :close-on-select="true"
+            :show-labels="false"
+            :allow-empty="false"
+          />
+        </div>
+        <div class="input-group">
           <button
             class="iconified-button brand-button"
-            @click="saveEditedVersion"
-          >
-            <SaveIcon aria-hidden="true" />
-            Save
-          </button>
-        </div>
-        <div
-          v-else-if="mode === 'create'"
-          class="header-buttons button-group columns"
-        >
-          <h3 class="column-grow-1">Create version</h3>
-          <nuxt-link
-            v-if="$auth.user"
-            :to="`/${project.project_type}/${
-              project.slug ? project.slug : project.id
-            }/versions`"
-            class="iconified-button"
-          >
-            <CrossIcon aria-hidden="true" />
-            Cancel
-          </nuxt-link>
-          <button class="iconified-button brand-button" @click="createVersion">
-            <CheckIcon aria-hidden="true" />
-            Create
-          </button>
-        </div>
-        <div v-else class="button-group">
-          <a
-            v-if="primaryFile"
-            v-tooltip="
-              primaryFile.filename + ' (' + $formatBytes(primaryFile.size) + ')'
+            @click="
+              addDependency(
+                dependencyAddMode,
+                newDependencyId,
+                newDependencyType
+              )
             "
-            :href="primaryFile.url"
-            class="bold-button iconified-button brand-button"
-            :title="`Download ${primaryFile.filename}`"
           >
-            <DownloadIcon aria-hidden="true" />
-            Download
-          </a>
+            <PlusIcon />
+            Add dependency
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="version-page__files universal-card">
+      <h3>Files</h3>
+      <div v-if="isEditing && replaceFile" class="file primary">
+        <FileIcon />
+        <span class="filename">
+          <strong>{{ replaceFile.name }}</strong>
+          <span class="file-size">({{ $formatBytes(replaceFile.size) }})</span>
+        </span>
+        <FileInput
+          class="iconified-button raised-button"
+          prompt="Replace"
+          :accept="acceptFileFromProjectType(project.project_type)"
+          :max-size="524288000"
+          should-always-reset
+          @change="(x) => (replaceFile = x[0])"
+        >
+          <TransferIcon />
+        </FileInput>
+      </div>
+      <div
+        v-for="(file, index) in version.files"
+        :key="file.hashes.sha1"
+        :class="{
+          file: true,
+          primary: primaryFile.hashes.sha1 === file.hashes.sha1,
+        }"
+      >
+        <FileIcon />
+        <span class="filename">
+          <strong>{{ file.filename }}</strong>
+          <span class="file-size">({{ $formatBytes(file.size) }})</span>
+        </span>
+        <FileInput
+          v-if="isEditing && primaryFile.hashes.sha1 === file.hashes.sha1"
+          class="iconified-button raised-button"
+          prompt="Replace"
+          :accept="acceptFileFromProjectType(project.project_type)"
+          :max-size="524288000"
+          should-always-reset
+          @change="
+            (x) => {
+              deleteFiles.push(file.hashes.sha1)
+              version.files.splice(index, 1)
+              replaceFile = x[0]
+            }
+          "
+        >
+          <TransferIcon />
+        </FileInput>
+        <button
+          v-else-if="isEditing"
+          class="iconified-button raised-button"
+          @click="
+            deleteFiles.push(file.hashes.sha1)
+            version.files.splice(index, 1)
+          "
+        >
+          <TrashIcon />
+          Remove
+        </button>
+        <a
+          v-else
+          :href="file.url"
+          class="iconified-button raised-button"
+          :title="`Download ${file.filename}`"
+          tabindex="0"
+        >
+          <DownloadIcon />
+          Download
+        </a>
+      </div>
+      <template v-if="isEditing">
+        <div v-for="(file, index) in newFiles" :key="index" class="file">
+          <FileIcon />
+          <span class="filename">
+            <strong>{{ file.name }}</strong>
+            <span class="file-size">({{ $formatBytes(file.size) }})</span>
+          </span>
           <button
-            v-if="$auth.user"
-            class="action iconified-button"
-            @click="$refs.modal_version_report.show()"
+            class="iconified-button raised-button"
+            @click="newFiles.splice(index, 1)"
           >
-            <ReportIcon aria-hidden="true" />
-            Report
-          </button>
-          <a v-else class="action iconified-button" :href="authUrl">
-            <ReportIcon aria-hidden="true" />
-            Report
-          </a>
-          <nuxt-link
-            v-if="currentMember"
-            class="action iconified-button"
-            :to="`/${project.project_type}/${
-              project.slug ? project.slug : project.id
-            }/version/${encodeURI(version.displayUrlEnding)}/edit`"
-            @click.prevent="mode = 'edit'"
-          >
-            <EditIcon aria-hidden="true" />
-            Edit
-          </nuxt-link>
-          <button
-            v-if="currentMember"
-            class="action iconified-button danger-button"
-            @click="$refs.modal_confirm.show()"
-          >
-            <TrashIcon aria-hidden="true" />
-            Delete
+            <TrashIcon />
+            Remove
           </button>
         </div>
-        <section v-if="mode === 'edit' || mode === 'create'">
-          <h3>Changelog</h3>
-          <Chips
-            v-model="changelogViewMode"
-            class="separator"
-            :items="['source', 'preview']"
-          />
-          <div
-            v-if="changelogViewMode === 'source'"
-            class="resizable-textarea-wrapper"
-          >
-            <textarea id="body" v-model="version.changelog" spellcheck="true" />
-          </div>
-          <div
-            v-if="changelogViewMode === 'preview'"
-            v-highlightjs
-            class="markdown-body"
-            v-html="
-              version.changelog
-                ? $xss($md.render(version.changelog))
-                : 'No changelog specified.'
-            "
-          ></div>
-        </section>
-        <section v-else>
-          <h3>Changelog</h3>
-          <div
-            v-highlightjs
-            class="markdown-body"
-            v-html="
-              version.changelog
-                ? $xss($md.render(version.changelog))
-                : 'No changelog specified.'
-            "
-          ></div>
-          <hr class="card-divider" />
-        </section>
-        <section>
-          <h3>Metadata</h3>
-          <div :class="'data-wrapper ' + mode">
-            <div class="data">
-              <p class="title">Release channel</p>
-              <Multiselect
-                v-if="mode === 'edit' || mode === 'create'"
-                v-model="version.version_type"
-                class="input"
-                placeholder="Select one"
-                :options="['release', 'beta', 'alpha']"
-                :custom-label="
-                  (value) => value.charAt(0).toUpperCase() + value.slice(1)
-                "
-                :searchable="false"
-                :close-on-select="true"
-                :show-labels="false"
-                :allow-empty="false"
-              />
-              <VersionBadge
-                v-else-if="version.version_type === 'release'"
-                class="value"
-                type="release"
-                color="green"
-              />
-              <VersionBadge
-                v-else-if="version.version_type === 'beta'"
-                class="value"
-                type="beta"
-                color="orange"
-              />
-              <VersionBadge
-                v-else-if="version.version_type === 'alpha'"
-                class="value"
-                type="alpha"
-                color="red"
-              />
-            </div>
-            <div v-if="project.project_type !== 'resourcepack'" class="data">
-              <p class="title">
-                Loaders<span
-                  v-if="mode === 'edit' || mode === 'create'"
-                  class="required"
-                  >*</span
-                >
-              </p>
-              <multiselect
-                v-if="mode === 'edit' || mode === 'create'"
-                v-model="version.loaders"
-                :options="
-                  $tag.loaders
-                    .filter((x) =>
-                      x.supported_project_types.includes(
-                        project.actualProjectType.toLowerCase()
-                      )
-                    )
-                    .map((it) => it.name)
-                "
-                :custom-label="(value) => $formatCategory(value)"
-                :loading="$tag.loaders.length === 0"
-                :multiple="true"
-                :searchable="false"
-                :show-no-results="false"
-                :close-on-select="false"
-                :clear-on-select="false"
-                :show-labels="false"
-                :limit="6"
-                :hide-selected="true"
-                placeholder="Choose loaders..."
-              />
-              <p v-else class="value">
-                {{ version.loaders.map((x) => $formatCategory(x)).join(', ') }}
-              </p>
-            </div>
-            <div v-if="mode === 'version'" class="data">
-              <p class="title">Downloads</p>
-              <p class="value">{{ $formatNumber(version.downloads) }}</p>
-            </div>
-            <div class="data">
-              <p class="title">
-                Version number<span
-                  v-if="mode === 'edit' || mode === 'create'"
-                  class="required"
-                  >*</span
-                >
-              </p>
-              <input
-                v-if="mode === 'edit' || mode === 'create'"
-                v-model="version.version_number"
-                type="text"
-                placeholder="Enter the version number..."
-                maxlength="32"
-              />
-              <p v-else class="value">{{ version.version_number }}</p>
-            </div>
-            <div class="data">
-              <p class="title">
-                Minecraft versions<span
-                  v-if="mode === 'edit' || mode === 'create'"
-                  class="required"
-                  >*</span
-                >
-              </p>
-              <div v-if="mode === 'edit' || mode === 'create'">
-                <multiselect
-                  v-model="version.game_versions"
-                  :options="
-                    showSnapshots
-                      ? $tag.gameVersions.map((x) => x.version)
-                      : $tag.gameVersions
-                          .filter((it) => it.version_type === 'release')
-                          .map((x) => x.version)
-                  "
-                  :loading="$tag.gameVersions.length === 0"
-                  :multiple="true"
-                  :searchable="true"
-                  :show-no-results="false"
-                  :close-on-select="false"
-                  :clear-on-select="false"
-                  :show-labels="false"
-                  :limit="6"
-                  :hide-selected="true"
-                  placeholder="Choose versions..."
-                />
-                <Checkbox
-                  v-model="showSnapshots"
-                  label="Include snapshots"
-                  description="Include snapshots"
-                  style="margin-top: 0.5rem"
-                  :border="false"
-                />
-              </div>
-              <p v-else class="value">
-                {{ $formatVersion(version.game_versions) }}
-              </p>
-            </div>
-            <div v-if="mode === 'version'" class="data">
-              <p class="title">Published</p>
-              <p class="value">
-                {{ $dayjs(version.date_published).format('MMM D, YYYY') }}
-                <span
-                  v-if="members.find((x) => x.user.id === version.author_id)"
-                >
-                  by
-                  <nuxt-link
-                    class="text-link"
-                    :to="
-                      '/user/' +
-                      members.find((x) => x.user.id === version.author_id).user
-                        .username
-                    "
-                    >{{
-                      members.find((x) => x.user.id === version.author_id).user
-                        .username
-                    }}</nuxt-link
-                  >
-                </span>
-              </p>
-            </div>
-            <div v-if="mode === 'version'" class="data">
-              <p class="title">Version ID</p>
-              <p class="value"><CopyCode :text="version.id" /></p>
-            </div>
-          </div>
-          <hr class="card-divider" />
-        </section>
-        <section
-          v-if="
-            (mode === 'version' &&
-              version.dependencies.filter((x) => !x.file_name).length > 0) ||
-            ((mode === 'edit' || mode === 'create') &&
-              project.project_type.toLowerCase() !== 'modpack')
-          "
-        >
-          <h3>Dependencies</h3>
-          <div class="dependencies">
-            <div
-              v-for="(dependency, index) in version.dependencies.filter(
-                (x) => !x.file_name
-              )"
-              :key="index"
-              class="dependency"
-            >
-              <Avatar
-                :src="dependency.project ? dependency.project.icon_url : null"
-                alt="dependency-icon"
-                size="sm"
-              />
-              <div class="info">
-                <nuxt-link
-                  :to="
-                    dependency.project
-                      ? dependency.version
-                        ? `/${dependency.project.project_type}/${
-                            dependency.project.slug
-                              ? dependency.project.slug
-                              : dependency.project.id
-                          }/version/${encodeURI(
-                            dependency.version.version_number
-                          )}`
-                        : `/${dependency.project.project_type}/${
-                            dependency.project.slug
-                              ? dependency.project.slug
-                              : dependency.project.id
-                          }/`
-                      : ''
-                  "
-                >
-                  <h4 class="title">
-                    {{
-                      dependency.project
-                        ? dependency.project.title
-                        : 'Unknown Project'
-                    }}
-                  </h4>
-                  <p v-if="dependency.version" class="version-number">
-                    Version {{ dependency.version.version_number }} is
-                    {{ dependency.dependency_type }}
-                  </p>
-                  <p v-else>
-                    {{ dependency.dependency_type }}
-                  </p>
-                </nuxt-link>
-                <div class="bottom">
-                  <button
-                    v-if="mode === 'edit' || mode === 'create'"
-                    class="iconified-button"
-                    @click="version.dependencies.splice(index, 1)"
-                  >
-                    <TrashIcon /> Remove
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            v-if="mode === 'edit' || mode === 'create'"
-            class="edit-dependency"
-          >
-            <h4>Add dependency</h4>
-            <Chips
-              v-model="dependencyAddMode"
-              class="separator"
-              :items="['project', 'version']"
-            />
-            <div class="edit-info">
-              <input
-                v-model="newDependencyId"
-                type="text"
-                oninput="this.value = this.value.replace(' ', '')"
-                :placeholder="`Enter the ${dependencyAddMode} ID${
-                  dependencyAddMode === 'project' ? '/slug' : ''
-                }`"
-                @keyup.enter="addDependency"
-              />
-              <Multiselect
-                v-model="newDependencyType"
-                class="input"
-                placeholder="Select one"
-                :options="['required', 'optional', 'incompatible', 'embedded']"
-                :custom-label="
-                  (value) => value.charAt(0).toUpperCase() + value.slice(1)
-                "
-                :searchable="false"
-                :close-on-select="true"
-                :show-labels="false"
-                :allow-empty="false"
-              />
-              <button class="iconified-button" @click="addDependency">
-                <PlusIcon />
-                Add
-              </button>
-            </div>
-          </div>
-          <hr class="card-divider" />
-        </section>
-        <section
-          v-if="
-            version.dependencies.filter((x) => x.file_name).length > 0 &&
-            mode === 'version'
-          "
-        >
-          <div>
-            <h3>External Dependencies</h3>
-            <InfoIcon
-              v-tooltip="
-                'Mods not part of the Modrinth platform but depended on by this project'
-              "
-            />
-          </div>
-          <div class="external-dependency">
-            <div
-              v-for="(dependency, index) in version.dependencies.filter(
-                (x) => x.file_name
-              )"
-              :key="index"
-              class="external-dependency"
-            >
-              <p v-if="dependency.file_name">
-                {{ decodeURIComponent(dependency.file_name) }}
-              </p>
-            </div>
-          </div>
-          <hr class="card-divider" />
-        </section>
-        <section
-          v-if="
-            version.files.length > 0 || mode === 'edit' || mode === 'create'
-          "
-        >
-          <h3>
-            Files<span
-              v-if="mode === 'edit' || mode === 'create'"
-              class="required"
-              >*</span
-            >
-          </h3>
-          <div
-            v-for="(file, index) in version.files"
-            :key="file.hashes.sha1"
-            class="file"
-          >
-            <p class="filename">
-              {{ file.filename }}
-            </p>
-            <div
-              v-if="primaryFile.hashes.sha1 === file.hashes.sha1"
-              class="featured"
-            >
-              <StarIcon aria-hidden="true" />
-              Primary
-            </div>
-            <a
-              :href="file.url"
-              class="action iconified-button"
-              :title="`Download ${file.filename}`"
-              tabindex="0"
-            >
-              <DownloadIcon aria-hidden="true" />
-              Download
-            </a>
-            <p v-if="mode === 'version'">({{ $formatBytes(file.size) }})</p>
-            <button
-              v-if="mode === 'edit'"
-              class="action iconified-button"
-              @click="
-                deleteFiles.push(file.hashes.sha1)
-                version.files.splice(index, 1)
-              "
-            >
-              <TrashIcon aria-hidden="true" />
-              Remove
-            </button>
-            <button
-              v-if="
-                mode === 'edit' && primaryFile.hashes.sha1 !== file.hashes.sha1
-              "
-              class="action iconified-button"
-              @click="primaryFile = file"
-            >
-              <StarIcon aria-hidden="true" />
-              Make primary
-            </button>
-          </div>
-          <div v-if="mode === 'edit' || mode === 'create'">
-            <div
-              v-for="(file, index) in newFiles"
-              :key="index + 'new'"
-              class="file"
-            >
-              <p class="filename">{{ file.name }}</p>
-              <button
-                class="action iconified-button"
-                @click="newFiles.splice(index, 1)"
-              >
-                <TrashIcon aria-hidden="true" />
-                Remove
-              </button>
-            </div>
-          </div>
+        <div class="additional-files">
+          <h4>Upload additional files</h4>
+          <span>Used for files such as sources or Javadocs.</span>
           <FileInput
-            v-if="mode === 'edit' || mode === 'create'"
+            prompt="Drag and drop to upload or click to select"
             multiple
-            should-always-reset
-            class="choose-files"
-            :accept="
-              project.actualProjectType.toLowerCase() === 'modpack'
-                ? '.mrpack,application/x-modrinth-modpack+zip'
-                : project.project_type.toLowerCase() === 'mod'
-                ? '.jar,actualProjectType/java-archive'
-                : '*'
-            "
-            prompt="Choose files or drag them here"
+            long-style
+            :accept="acceptFileFromProjectType(project.project_type)"
             :max-size="524288000"
             @change="(x) => x.forEach((y) => newFiles.push(y))"
+          >
+            <UploadIcon />
+          </FileInput>
+        </div>
+      </template>
+    </div>
+    <div class="version-page__metadata">
+      <div class="universal-card full-width-inputs">
+        <h3>Metadata</h3>
+        <div>
+          <h4>Release channel</h4>
+          <Multiselect
+            v-if="isEditing"
+            v-model="version.version_type"
+            class="input"
+            placeholder="Select one"
+            :options="['release', 'beta', 'alpha']"
+            :custom-label="
+              (value) => value.charAt(0).toUpperCase() + value.slice(1)
+            "
+            :searchable="false"
+            :close-on-select="true"
+            :show-labels="false"
+            :allow-empty="false"
           />
-          <span v-if="mode === 'edit' || mode === 'create'">
-            You may upload multiple files, but this should only be used for
-            cases like sources or Javadocs.
-            <p
-              v-if="project.project_type.toLowerCase() === 'modpack'"
-              aria-label="Warning"
-            >
-              Modpack support is currently in alpha, and you may encounter
-              issues. Our documentation includes instructions on
-              <a
-                href="https://docs.modrinth.com/docs/modpacks/creating_modpacks/"
-                target="_blank"
-                class="text-link"
-                >creating modpacks</a
-              >. Join us on
-              <a
-                href="https://discord.gg/EUHuJHt"
-                target="_blank"
-                class="text-link"
-                >Discord</a
-              >
-              for support.
-            </p>
+          <template v-else>
+            <VersionBadge
+              v-if="version.version_type === 'release'"
+              class="value"
+              type="release"
+              color="green"
+            />
+            <VersionBadge
+              v-else-if="version.version_type === 'beta'"
+              class="value"
+              type="beta"
+              color="orange"
+            />
+            <VersionBadge
+              v-else-if="version.version_type === 'alpha'"
+              class="value"
+              type="alpha"
+              color="red"
+            />
+          </template>
+        </div>
+        <div>
+          <h4>Version number</h4>
+          <div v-if="isEditing" class="iconified-input">
+            <label class="hidden" for="version-number">Version number</label>
+            <HashIcon aria-hidden="true" />
+            <input
+              id="version-number"
+              v-model="version.version_number"
+              type="text"
+              autocomplete="off"
+              maxlength="54"
+            />
+          </div>
+          <span v-else>{{ version.version_number }}</span>
+        </div>
+        <div v-if="project.project_type !== 'resourcepack'">
+          <h4>Loaders</h4>
+          <Multiselect
+            v-if="isEditing"
+            v-model="version.loaders"
+            :options="
+              $tag.loaders
+                .filter((x) =>
+                  x.supported_project_types.includes(
+                    project.actualProjectType.toLowerCase()
+                  )
+                )
+                .map((it) => it.name)
+            "
+            :custom-label="(value) => $formatCategory(value)"
+            :loading="$tag.loaders.length === 0"
+            :multiple="true"
+            :searchable="false"
+            :show-no-results="false"
+            :close-on-select="false"
+            :clear-on-select="false"
+            :show-labels="false"
+            :limit="6"
+            :hide-selected="true"
+            placeholder="Choose loaders..."
+          />
+          <Categories
+            v-else
+            :categories="version.loaders"
+            :type="project.actualProjectType"
+          />
+        </div>
+        <div>
+          <h4>Game versions</h4>
+          <template v-if="isEditing">
+            <multiselect
+              v-model="version.game_versions"
+              :options="
+                showSnapshots
+                  ? $tag.gameVersions.map((x) => x.version)
+                  : $tag.gameVersions
+                      .filter((it) => it.version_type === 'release')
+                      .map((x) => x.version)
+              "
+              :loading="$tag.gameVersions.length === 0"
+              :multiple="true"
+              :searchable="true"
+              :show-no-results="false"
+              :close-on-select="false"
+              :clear-on-select="false"
+              :show-labels="false"
+              :limit="6"
+              :hide-selected="true"
+              placeholder="Choose versions..."
+            />
+            <Checkbox
+              v-model="showSnapshots"
+              label="Include snapshots"
+              description="Include snapshots"
+              style="margin-top: 0.5rem"
+              :border="false"
+            />
+          </template>
+          <span v-else>{{ $formatVersion(version.game_versions) }}</span>
+        </div>
+        <div v-if="!isEditing">
+          <h4>Downloads</h4>
+          <span>{{ version.downloads }}</span>
+        </div>
+        <div v-if="!isEditing">
+          <h4>Publication date</h4>
+          <span>
+            {{
+              $dayjs(version.date_published).format(
+                'MMMM D, YYYY [at] h:mm:ss A'
+              )
+            }}
           </span>
-        </section>
+        </div>
+        <div v-if="!isEditing">
+          <h4>Publisher</h4>
+          <div
+            class="team-member columns button-transparent"
+            @click="
+              $router.push('/user/' + version.author_member.user.username)
+            "
+          >
+            <Avatar
+              :src="version.author_member.avatar_url"
+              :alt="version.author_member.user.username"
+              size="sm"
+              circle
+            />
+
+            <div class="member-info">
+              <nuxt-link
+                :to="'/user/' + version.author_member.user.username"
+                class="name"
+              >
+                <p>{{ version.author_member.name }}</p>
+              </nuxt-link>
+              <p class="role">{{ version.author_member.role }}</p>
+            </div>
+          </div>
+        </div>
+        <div v-if="!isEditing">
+          <h4>Version ID</h4>
+          <CopyCode :text="version.id" />
+        </div>
       </div>
-      <NuxtChild v-show="false" :mode.sync="mode" />
     </div>
   </div>
-  <div v-else></div>
 </template>
 <script>
 import Multiselect from 'vue-multiselect'
-import FileInput from '~/components/ui/FileInput'
+import {
+  acceptFileFromProjectType,
+  inferVersionInfo,
+} from '~/plugins/fileUtils'
 
-import InfoIcon from '~/assets/images/utils/info.svg?inline'
-import TrashIcon from '~/assets/images/utils/trash.svg?inline'
-import SaveIcon from '~/assets/images/utils/save.svg?inline'
-import PlusIcon from '~/assets/images/utils/plus.svg?inline'
-import CrossIcon from '~/assets/images/utils/x.svg?inline'
-import EditIcon from '~/assets/images/utils/edit.svg?inline'
-import DownloadIcon from '~/assets/images/utils/download.svg?inline'
-import ReportIcon from '~/assets/images/utils/report.svg?inline'
-import BackIcon from '~/assets/images/utils/left-arrow.svg?inline'
-import StarIcon from '~/assets/images/utils/star.svg?inline'
-import CheckIcon from '~/assets/images/utils/check.svg?inline'
 import VersionBadge from '~/components/ui/Badge'
-import Checkbox from '~/components/ui/Checkbox'
-import Chips from '~/components/ui/Chips'
+import Avatar from '~/components/ui/Avatar'
+import CopyCode from '~/components/ui/CopyCode'
+import Categories from '~/components/ui/search/Categories'
 import ModalConfirm from '~/components/ui/ModalConfirm'
 import ModalReport from '~/components/ui/ModalReport'
-import CopyCode from '~/components/ui/CopyCode'
-import Avatar from '~/components/ui/Avatar'
+import Chips from '~/components/ui/Chips'
+import Checkbox from '~/components/ui/Checkbox'
+import FileInput from '~/components/ui/FileInput'
+
+import FileIcon from '~/assets/images/utils/file.svg?inline'
+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'
+import StarIcon from '~/assets/images/utils/star.svg?inline'
+import ReportIcon from '~/assets/images/utils/report.svg?inline'
+import SaveIcon from '~/assets/images/utils/save.svg?inline'
+import CrossIcon from '~/assets/images/utils/x.svg?inline'
+import HashIcon from '~/assets/images/utils/hash.svg?inline'
+import PlusIcon from '~/assets/images/utils/plus.svg?inline'
+import TransferIcon from '~/assets/images/utils/transfer.svg?inline'
+import UploadIcon from '~/assets/images/utils/upload.svg?inline'
+import BackIcon from '~/assets/images/utils/left-arrow.svg?inline'
 
 export default {
   components: {
+    FileInput,
+    Checkbox,
+    Chips,
+    Categories,
+    DownloadIcon,
+    EditIcon,
+    TrashIcon,
+    StarIcon,
+    FileIcon,
+    ReportIcon,
+    SaveIcon,
+    CrossIcon,
+    HashIcon,
+    PlusIcon,
+    TransferIcon,
+    UploadIcon,
+    BackIcon,
+    VersionBadge,
     Avatar,
     CopyCode,
     ModalConfirm,
     ModalReport,
-    FileInput,
-    Chips,
-    Checkbox,
-    VersionBadge,
-    DownloadIcon,
-    TrashIcon,
-    EditIcon,
-    ReportIcon,
-    BackIcon,
-    StarIcon,
-    CheckIcon,
     Multiselect,
-    SaveIcon,
-    PlusIcon,
-    CrossIcon,
-    InfoIcon,
   },
   props: {
     project: {
@@ -718,19 +721,22 @@ export default {
   },
   data() {
     return {
-      mode: 'version',
       primaryFile: {},
       version: {},
 
-      changelogViewMode: 'source',
+      isEditing: false,
+      isCreating: false,
 
       dependencyAddMode: 'project',
-      newDependencyId: '',
       newDependencyType: 'required',
+      newDependencyId: '',
+
+      changelogViewMode: 'source',
+      showSnapshots: false,
 
       newFiles: [],
       deleteFiles: [],
-      showSnapshots: false,
+      replaceFile: null,
 
       showKnownErrors: false,
     }
@@ -743,7 +749,7 @@ export default {
       return {}
     }
     const title = `${
-      this.mode === 'create' ? 'Create Version' : this.version.name
+      this.isCreating ? 'Create Version' : this.version.name
     } - ${this.project.title}`
     const description = `Download ${this.project.title} ${
       this.version.version_number
@@ -782,6 +788,17 @@ export default {
     }
   },
   computed: {
+    fieldErrors() {
+      return (
+        this.version.version_number === '' ||
+        this.version.game_versions.length === 0 ||
+        (this.version.loaders.length === 0 &&
+          this.project.project_type !== 'resourcepack') ||
+        (this.newFiles.length === 0 &&
+          this.version.files.length === 0 &&
+          !this.replaceFile)
+      )
+    },
     authUrl() {
       return `${process.env.authURLBase}auth/init?url=${process.env.domain}${this.$route.path}`
     },
@@ -794,32 +811,38 @@ export default {
     },
   },
   methods: {
-    checkFields() {
-      return !(
-        this.version.version_number === '' ||
-        this.version.game_versions.length === 0 ||
-        (this.version.loaders.length === 0 &&
-          this.project.project_type !== 'resourcepack') ||
-        (this.newFiles.length === 0 && this.version.files.length === 0)
-      )
-    },
+    acceptFileFromProjectType,
     reset() {
+      this.primaryFile = {}
+      this.version = {}
+
       this.changelogViewMode = 'source'
+
+      this.showSnapshots = false
+
       this.dependencyAddMode = 'project'
       this.newDependencyId = ''
       this.newDependencyType = 'required'
 
-      this.primaryFile = {}
-      this.version = {}
       this.newFiles = []
       this.deleteFiles = []
+      this.replaceFile = null
+
+      this.isEditing = false
+      this.isCreating = false
+
+      this.showKnownErrors = false
     },
     async setVersion() {
       this.reset()
-      const path = this.$route.name.split('-')
-      this.mode = path[path.length - 1]
 
-      if (this.mode === 'create') {
+      const path = this.$route.name.split('-')
+      const mode = path[path.length - 1]
+
+      if (mode === 'create') {
+        this.isCreating = true
+        this.isEditing = true
+
         this.version = {
           id: 'none',
           project_id: this.project.id,
@@ -836,8 +859,41 @@ export default {
           loaders: [],
           featured: false,
         }
+        // For navigation from versions page / upload file prompt
+        if (this.$route.params.newPrimaryFile) {
+          this.replaceFile = this.$route.params.newPrimaryFile
 
+          try {
+            const inferredData = await inferVersionInfo(
+              this.replaceFile,
+              this.project,
+              this.$tag.gameVersions
+            )
+
+            if (
+              inferredData.dependencies &&
+              inferredData.dependencies.length > 0
+            ) {
+              await Promise.all(
+                inferredData.dependencies.map((x) =>
+                  this.addDependency(x.target, x.identifier, x.type, true)
+                )
+              )
+            }
+
+            delete inferredData.dependencies
+
+            this.version = {
+              ...this.version,
+              ...inferredData,
+            }
+          } catch (err) {
+            console.error('Error parsing version file data', err)
+          }
+        }
         return
+      } else if (mode === 'edit') {
+        this.isEditing = true
       }
 
       this.version = this.versions.find(
@@ -861,11 +917,9 @@ export default {
       this.primaryFile =
         this.version.files.find((file) => file.primary) ?? this.version.files[0]
 
-      if (!this.version.changelog && this.version.changelog_url) {
-        this.version.changelog = (
-          await this.$axios.get(this.version.changelog_url)
-        ).data
-      }
+      this.version.author_member = this.members.find(
+        (x) => x.user.id === this.version.author_id
+      )
 
       for (const dependency of this.version.dependencies) {
         dependency.version = this.dependencies.versions.find(
@@ -883,28 +937,45 @@ export default {
             (x) => x.id === dependency.project_id
           )
         }
+
+        dependency.link = dependency.project
+          ? `/${dependency.project.project_type}/${
+              dependency.project.slug ?? dependency.project.id
+            }${
+              dependency.version
+                ? `/version/${encodeURI(dependency.version.version_number)}`
+                : ''
+            }`
+          : ''
       }
     },
-    async addDependency() {
+    async addDependency(
+      dependencyAddMode,
+      newDependencyId,
+      newDependencyType,
+      hideErrors
+    ) {
       try {
-        if (this.dependencyAddMode === 'project') {
-          const project = (
-            await this.$axios.get(`project/${this.newDependencyId}`)
-          ).data
+        if (dependencyAddMode === 'project') {
+          const project = (await this.$axios.get(`project/${newDependencyId}`))
+            .data
 
           this.version.dependencies.push({
             project,
             project_id: project.id,
-            dependency_type: this.newDependencyType,
+            dependency_type: newDependencyType,
+            link: `/${project.project_type}/${project.slug ?? project.id}`,
           })
+
           this.$emit('update:dependencies', {
             projects: this.dependencies.projects.concat([project]),
             versions: this.dependencies.versions,
           })
-        } else if (this.dependencyAddMode === 'version') {
+        } else if (dependencyAddMode === 'version') {
           const version = (
             await this.$axios.get(`version/${this.newDependencyId}`)
           ).data
+
           const project = (
             await this.$axios.get(`project/${version.project_id}`)
           ).data
@@ -915,37 +986,60 @@ export default {
             version_id: version.id,
             project_id: project.id,
             dependency_type: this.newDependencyType,
+            link: `/${project.project_type}/${
+              project.slug ?? project.id
+            }/version/${encodeURI(version.version_number)}`,
           })
+
           this.$emit('update:dependencies', {
             projects: this.dependencies.projects.concat([project]),
             versions: this.dependencies.versions.concat([version]),
           })
         }
-      } catch {
-        this.$notify({
-          group: 'main',
-          title: 'Invalid Dependency',
-          text: 'The specified dependency does not exist',
-          type: 'error',
-        })
-      }
 
-      this.newDependencyId = ''
+        this.newDependencyId = ''
+      } catch {
+        if (!hideErrors) {
+          this.$notify({
+            group: 'main',
+            title: 'Invalid Dependency',
+            text: 'The specified dependency could not be found',
+            type: 'error',
+          })
+        }
+      }
     },
     async saveEditedVersion() {
       this.$nuxt.$loading.start()
 
-      if (!this.checkFields()) {
+      if (this.fieldErrors) {
         this.showKnownErrors = true
+
         this.$nuxt.$loading.finish()
         return
       }
-      this.showKnownErrors = false
 
       try {
-        if (this.newFiles.length > 0) {
+        if (this.replaceFile) {
+          const reader = new FileReader()
+          reader.onloadend = async function (event) {
+            const hash = await crypto.subtle.digest(
+              'SHA-1',
+              event.target.result
+            )
+            this.primaryFile.hashes.sha1 = [...new Uint8Array(hash)]
+              .map((x) => x.toString(16).padStart(2, '0'))
+              .join('')
+          }
+
+          reader.readAsArrayBuffer(this.replaceFile)
+        }
+
+        if (this.newFiles.length > 0 || this.replaceFile) {
           const formData = new FormData()
+
           formData.append('data', JSON.stringify({}))
+
           for (let i = 0; i < this.newFiles.length; i++) {
             formData.append(
               this.newFiles[i].name.concat('-' + i),
@@ -954,6 +1048,14 @@ export default {
             )
           }
 
+          if (this.replaceFile) {
+            formData.append(
+              this.replaceFile.name.concat('-' + this.newFiles.length),
+              new Blob([this.replaceFile]),
+              this.replaceFile.name
+            )
+          }
+
           await this.$axios({
             url: `version/${this.version.id}/file`,
             method: 'POST',
@@ -965,6 +1067,22 @@ export default {
           })
         }
 
+        await this.$axios.patch(
+          `version/${this.version.id}`,
+          {
+            name: this.version.name || this.version.version_number,
+            version_number: this.version.version_number,
+            changelog: this.version.changelog,
+            version_type: this.version.version_type,
+            dependencies: this.version.dependencies,
+            game_versions: this.version.game_versions,
+            loaders: this.version.loaders,
+            primary_file: ['sha1', this.primaryFile.hashes.sha1],
+            featured: this.version.featured,
+          },
+          this.$defaultHeaders()
+        )
+
         for (const hash of this.deleteFiles) {
           await this.$axios.delete(
             `version_file/${hash}`,
@@ -972,20 +1090,10 @@ export default {
           )
         }
 
-        this.version.primary_file = ['sha1', this.primaryFile.hashes.sha1]
-        const copyVersion = JSON.parse(JSON.stringify(this.version))
-        delete copyVersion.downloads
-        copyVersion.name = copyVersion.name || copyVersion.version_number
-        await this.$axios.patch(
-          `version/${this.version.id}`,
-          copyVersion,
-          this.$defaultHeaders()
-        )
-
-        const [version, featuredVersions] = (
+        const [versions, featuredVersions] = (
           await Promise.all([
             this.$axios.get(
-              `version/${this.version.id}`,
+              `project/${this.version.project_id}/version`,
               this.$defaultHeaders()
             ),
             this.$axios.get(
@@ -995,22 +1103,17 @@ export default {
           ])
         ).map((it) => it.data)
 
-        const editedVersions = this.versions
-        const index = this.versions.findIndex((x) => x.id === this.version.id)
-        editedVersions.splice(index, 1, version)
-
-        const newEditedVersions = this.$computeVersions(editedVersions)
-
+        const newEditedVersions = this.$computeVersions(versions)
         this.$emit('update:versions', newEditedVersions)
         this.$emit('update:featuredVersions', featuredVersions)
 
-        this.newFiles = []
-        this.deleteFiles = []
-
         await this.$router.replace(
           `/${this.project.project_type}/${
             this.project.slug ? this.project.slug : this.project.id
-          }/version/${encodeURI(newEditedVersions[index].displayUrlEnding)}`
+          }/version/${encodeURI(
+            newEditedVersions.find((x) => x.id === this.version.id)
+              .displayUrlEnding
+          )}`
         )
       } catch (err) {
         this.$notify({
@@ -1026,16 +1129,19 @@ export default {
     async createVersion() {
       this.$nuxt.$loading.start()
 
-      if (!this.checkFields()) {
+      if (this.fieldErrors) {
         this.showKnownErrors = true
+
         this.$nuxt.$loading.finish()
         return
       }
-      this.showKnownErrors = false
 
       const formData = new FormData()
 
       const fileParts = this.newFiles.map((f, idx) => `${f.name}-${idx}`)
+      if (this.replaceFile) {
+        fileParts.unshift(this.replaceFile.name.concat('-primary'))
+      }
 
       if (this.project.project_type === 'resourcepack') {
         this.version.loaders = ['minecraft']
@@ -1056,6 +1162,14 @@ export default {
 
       formData.append('data', JSON.stringify(newVersion))
 
+      if (this.replaceFile) {
+        formData.append(
+          this.replaceFile.name.concat('-primary'),
+          new Blob([this.replaceFile]),
+          this.replaceFile.name
+        )
+      }
+
       for (let i = 0; i < this.newFiles.length; i++) {
         formData.append(
           fileParts[i],
@@ -1077,12 +1191,22 @@ export default {
           })
         ).data
 
-        const newProject = JSON.parse(JSON.stringify(this.project))
-        newProject.versions = newProject.versions.concat([data.id])
-        const newVersions = this.$computeVersions(this.versions.concat([data]))
+        const [versions, featuredVersions] = (
+          await Promise.all([
+            this.$axios.get(
+              `project/${this.version.project_id}/version`,
+              this.$defaultHeaders()
+            ),
+            this.$axios.get(
+              `project/${this.version.project_id}/version?featured=true`,
+              this.$defaultHeaders()
+            ),
+          ])
+        ).map((it) => it.data)
 
-        await this.$emit('update:project', newProject)
-        await this.$emit('update:versions', newVersions)
+        const newCreatedVersions = this.$computeVersions(versions)
+        this.$emit('update:versions', newCreatedVersions)
+        this.$emit('update:featuredVersions', featuredVersions)
 
         await this.$router.push(
           `/${this.project.project_type}/${
@@ -1098,6 +1222,7 @@ export default {
         })
         window.scrollTo({ top: 0, behavior: 'smooth' })
       }
+
       this.$nuxt.$loading.finish()
     },
     async deleteVersion() {
@@ -1109,7 +1234,7 @@ export default {
       )
 
       await this.$router.replace(
-        `/${this.project.project_type}/${this.project.id}`
+        `/${this.project.project_type}/${this.project.id}/versions`
       )
       this.$nuxt.$loading.finish()
     },
@@ -1118,190 +1243,215 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.content {
-  max-width: calc(100% - (2 * var(--spacing-card-lg)));
-}
+.version-page {
+  display: grid;
 
-.required {
-  color: var(--color-special-red);
-}
+  grid-template:
+    'title' auto
+    'changelog' auto
+    'dependencies' auto
+    'metadata' auto
+    'files' auto
+    / 1fr;
 
-.version-header {
-  display: flex;
-  align-items: center;
-  margin: 1rem 0;
+  column-gap: var(--spacing-card-md);
 
-  h2 {
-    margin: 0 0.75rem 0 0;
-    font-size: var(--font-size-xl);
-  }
-}
+  .version-page__title {
+    grid-area: title;
 
-section {
-  margin: 1rem 0;
-
-  .separator {
-    margin: var(--spacing-card-sm) 0;
-  }
-
-  .choose-files {
-    margin-bottom: var(--spacing-card-sm);
-  }
-}
-
-.header-buttons {
-  justify-content: right;
-}
-
-.buttons {
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: 0.5rem;
-
-  @media screen and (min-width: 1024px) {
-    margin-left: auto;
-  }
-}
-
-.version-data-inputs {
-  margin: 0.5rem 0;
-}
-
-.data-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-
-  @media screen and (min-width: 800px) {
-    flex-direction: row;
-  }
-
-  .data {
-    flex-basis: calc(33.333333% - 0.5rem);
-
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-
-    .title {
-      font-weight: bold;
-      margin-bottom: 0.25rem;
-    }
-
-    p {
-      margin: 0;
-    }
-  }
-
-  &.edit,
-  &.create {
-    .data {
-      flex-basis: calc(50% - 0.5rem);
-
-      input {
-        margin: 0;
-        width: 100%;
-      }
-    }
-  }
-}
-
-.dependencies {
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: 2rem;
-  row-gap: 1rem;
-
-  .dependency {
-    align-items: center;
-    display: flex;
-    gap: 0.25rem;
-
-    @media screen and (min-width: 800px) {
-      flex-basis: 30%;
-    }
-
-    .info {
+    .version-header {
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      padding: 0.25rem;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 1rem;
+      gap: var(--spacing-card-md);
 
-      p {
+      h2,
+      input[type='text'] {
         margin: 0;
+        font-size: var(--font-size-2xl);
+        font-weight: bold;
       }
 
-      .title {
-        margin: 0 0.25rem 0 0;
+      input[type='text'] {
+        max-width: 100%;
+        min-width: 0;
+        flex-grow: 1;
+        width: 2rem;
+      }
+
+      .featured {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-card-xs);
+
+        svg {
+          height: 1.45rem;
+        }
+      }
+    }
+
+    .known-errors {
+      margin-bottom: 1rem;
+    }
+  }
+
+  h3 {
+    font-size: var(--font-size-lg);
+    margin: 0 0 0.5rem 0;
+  }
+
+  .version-page__changelog {
+    grid-area: changelog;
+  }
+
+  .version-page__dependencies {
+    grid-area: dependencies;
+
+    .dependency {
+      align-items: center;
+      display: flex;
+      gap: var(--spacing-card-sm);
+      padding: var(--spacing-card-sm);
+
+      .info {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-card-xs);
+
+        .project-title {
+          font-weight: bold;
+        }
+
+        .dep-type {
+          text-transform: capitalize;
+        }
+      }
+
+      button {
+        margin-left: auto;
+      }
+    }
+
+    .add-dependency {
+      h4 {
+        margin-bottom: var(--spacing-card-sm);
+      }
+
+      .input-group {
+        &:not(:last-child) {
+          margin-bottom: var(--spacing-card-sm);
+        }
+
+        .multiselect {
+          width: 8rem;
+          flex-grow: 1;
+        }
+
+        input {
+          flex-grow: 2;
+        }
+      }
+    }
+  }
+
+  .version-page__files {
+    grid-area: files;
+
+    .file {
+      --text-color: var(--color-button-text);
+      --background-color: var(--color-button-bg);
+
+      &.primary {
+        --background-color: var(--color-brand-highlight);
+        --text-color: var(--color-button-text-active);
+      }
+
+      display: flex;
+      align-items: center;
+
+      font-weight: 500;
+      color: var(--text-color);
+      background-color: var(--background-color);
+      padding: var(--spacing-card-sm) var(--spacing-card-bg);
+      border-radius: var(--size-rounded-sm);
+
+      svg {
+        min-width: 1.1rem;
+        min-height: 1.1rem;
+        margin-right: 0.5rem;
+      }
+
+      .filename {
+        word-wrap: break-word;
+        overflow-wrap: anywhere;
+      }
+
+      .file-size {
+        font-weight: 400;
+        white-space: nowrap;
+      }
+
+      .iconified-button {
+        margin-left: auto;
+      }
+
+      &:not(:nth-child(2)) {
+        margin-top: 0.5rem;
+      }
+    }
+
+    .additional-files {
+      h4 {
+        margin-bottom: 0.5rem;
+      }
+      label {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+
+  .version-page__metadata {
+    grid-area: metadata;
+
+    h4 {
+      margin: 1rem 0 0.25rem 0;
+    }
+
+    .team-member {
+      align-items: center;
+      padding: 0.25rem 0.5rem;
+
+      .member-info {
+        overflow: hidden;
+        margin: auto 0 auto 0.75rem;
+
+        .name {
+          font-weight: bold;
+        }
+
+        p {
+          font-size: var(--font-size-sm);
+          margin: 0.2rem 0;
+        }
       }
     }
   }
 }
 
-.external-dependency {
-  p {
-    margin: 0.25rem 0;
+@media (min-width: 1200px) {
+  .version-page {
+    grid-template:
+      'title title' auto
+      'changelog metadata' auto
+      'dependencies metadata' auto
+      'files metadata' auto
+      'dummy metadata' 1fr
+      / 1fr 20rem;
   }
 }
 
-.edit-dependency {
-  h4 {
-    margin: 0 0 0.25rem 0;
-  }
-
-  .edit-info {
-    display: flex;
-    flex-wrap: wrap;
-    row-gap: 0.25rem;
-
-    .multiselect {
-      max-width: 10rem;
-    }
-
-    .iconified-button {
-      min-height: 2.5rem;
-    }
-
-    input,
-    .multiselect,
-    .iconified-button {
-      margin: 0 0.5rem 0 0;
-    }
-  }
-}
-
-.file {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25rem;
-  flex-wrap: wrap;
-  row-gap: 0.25rem;
-
-  * {
-    margin-left: 0.25rem;
-  }
-  .filename {
-    margin: 0;
-    font-weight: bold;
-  }
-}
-
-.featured {
-  display: flex;
-  align-items: center;
-
-  svg {
-    height: 1rem;
-    width: auto;
-    margin-right: 0.25rem;
-  }
-}
-
-.options {
-  margin-bottom: var(--spacing-card-sm);
-}
-
-.full-width-input {
-  width: 100%;
-  margin-bottom: 0.5rem;
+.separator {
+  margin: var(--spacing-card-sm) 0;
 }
 </style>
diff --git a/pages/_type/_id/versions.vue b/pages/_type/_id/versions.vue
index 0ebb7502d..30fbe1bf8 100644
--- a/pages/_type/_id/versions.vue
+++ b/pages/_type/_id/versions.vue
@@ -1,10 +1,22 @@
 <template>
   <div class="content">
     <div v-if="currentMember" class="card header-buttons">
-      <nuxt-link to="version/create" class="brand-button iconified-button">
-        <PlusIcon />
-        Create a version
-      </nuxt-link>
+      <FileInput
+        :max-size="524288000"
+        :accept="acceptFileFromProjectType(project.project_type)"
+        prompt="Upload a version"
+        class="brand-button iconified-button"
+        @change="handleFiles"
+      >
+        <UploadIcon />
+      </FileInput>
+      <span class="indicator">
+        <InfoIcon /> Click to choose a file or drag one onto this page
+      </span>
+      <DropArea
+        :accept="acceptFileFromProjectType(project.project_type)"
+        @change="handleFiles"
+      />
     </div>
     <VersionFilterControl
       class="card"
@@ -45,7 +57,14 @@
         >
           <DownloadIcon aria-hidden="true" />
         </a>
-        <span class="version__title">{{ version.name }}</span>
+        <nuxt-link
+          :to="`/${project.project_type}/${
+            project.slug ? project.slug : project.id
+          }/version/${encodeURI(version.displayUrlEnding)}`"
+          class="version__title"
+        >
+          {{ version.name }}
+        </nuxt-link>
         <div class="version__metadata">
           <VersionBadge
             v-if="version.version_type === 'release'"
@@ -88,17 +107,24 @@
   </div>
 </template>
 <script>
-import PlusIcon from '~/assets/images/utils/plus.svg?inline'
+import { acceptFileFromProjectType } from '~/plugins/fileUtils'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
+import UploadIcon from '~/assets/images/utils/upload.svg?inline'
+import InfoIcon from '~/assets/images/utils/info.svg?inline'
 import VersionBadge from '~/components/ui/Badge'
+import FileInput from '~/components/ui/FileInput'
 import VersionFilterControl from '~/components/ui/VersionFilterControl'
+import DropArea from '~/components/ui/DropArea.vue'
 
 export default {
   components: {
-    PlusIcon,
+    DropArea,
     DownloadIcon,
+    UploadIcon,
+    InfoIcon,
     VersionBadge,
     VersionFilterControl,
+    FileInput,
   },
   auth: false,
   props: {
@@ -167,9 +193,20 @@ export default {
     }
   },
   methods: {
+    acceptFileFromProjectType,
     updateVersions(updatedVersions) {
       this.filteredVersions = updatedVersions
     },
+    handleFiles(files) {
+      this.$router.push({
+        name: 'type-id-version-create',
+        params: {
+          type: this.project.project_type,
+          id: this.project.slug ? this.project.slug : this.project.id,
+          newPrimaryFile: files[0],
+        },
+      })
+    },
   },
 }
 </script>
@@ -177,7 +214,15 @@ export default {
 <style lang="scss" scoped>
 .header-buttons {
   display: flex;
-  justify-content: right;
+  align-items: center;
+  gap: 1rem;
+
+  .indicator {
+    display: flex;
+    gap: 0.5ch;
+    align-items: center;
+    color: var(--color-text-inactive);
+  }
 }
 
 .all-versions {
@@ -215,7 +260,10 @@ export default {
 
   .version-button {
     display: grid;
-    grid-template: 'download title supports stats' 'download metadata supports stats';
+    grid-template:
+      'download title supports stats'
+      'download metadata supports stats'
+      'download dummy supports stats';
     grid-template-columns: calc(2.25rem + var(--spacing-card-sm)) 1fr 1fr 1fr;
     column-gap: var(--spacing-card-sm);
     justify-content: left;
@@ -287,4 +335,14 @@ export default {
     }
   }
 }
+
+.modal-create {
+  padding: var(--spacing-card-bg);
+
+  .input-group {
+    width: fit-content;
+    margin-left: auto;
+    margin-top: 1.5rem;
+  }
+}
 </style>
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index bf5adfb79..6ef1be06f 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -23,10 +23,12 @@
               :max-size="262144"
               :show-icon="true"
               accept="image/png,image/jpeg,image/gif,image/webp"
-              class="choose-image"
+              class="choose-image iconified-button"
               prompt="Upload avatar"
               @change="showPreviewImage"
-            />
+            >
+              <UploadIcon />
+            </FileInput>
             <button
               v-else-if="$auth.user && $auth.user.id === user.id"
               class="iconified-button"
@@ -269,6 +271,7 @@ import SaveIcon from '~/assets/images/utils/save.svg?inline'
 import GridIcon from '~/assets/images/utils/grid.svg?inline'
 import ListIcon from '~/assets/images/utils/list.svg?inline'
 import ImageIcon from '~/assets/images/utils/image.svg?inline'
+import UploadIcon from '~/assets/images/utils/upload.svg?inline'
 import FileInput from '~/components/ui/FileInput'
 import ModalReport from '~/components/ui/ModalReport'
 import ModalCreation from '~/components/ui/ModalCreation'
@@ -302,6 +305,7 @@ export default {
     GridIcon,
     ListIcon,
     ImageIcon,
+    UploadIcon,
   },
   async asyncData(data) {
     try {
@@ -322,52 +326,13 @@ export default {
       }
 
       let gitHubUser = {}
-      let versions = []
 
       try {
-        const [gitHubUserData, versionsData] = (
-          await Promise.all([
-            data.$axios.get(`https://api.github.com/user/` + user.github_id),
-            data.$axios.get(
-              `versions?ids=${JSON.stringify(
-                [].concat.apply(
-                  [],
-                  projects.map((x) => x.versions)
-                )
-              )}`
-            ),
-          ])
-        ).map((it) => it.data)
-
-        gitHubUser = gitHubUserData
-        versions = versionsData
+        gitHubUser = (
+          await data.$axios.get(`https://api.github.com/user/` + user.github_id)
+        ).data
       } catch {}
 
-      for (const version of versions) {
-        const projectIndex = projects.findIndex(
-          (x) => x.id === version.project_id
-        )
-
-        if (projects[projectIndex].loaders) {
-          for (const loader of version.loaders) {
-            if (!projects[projectIndex].loaders.includes(loader)) {
-              projects[projectIndex].loaders.push(loader)
-            }
-          }
-        } else {
-          projects[projectIndex].loaders = version.loaders
-        }
-      }
-
-      for (const project of projects) {
-        project.categories = project.categories.concat(project.loaders)
-
-        project.project_type = data.$getProjectTypeForUrl(
-          project.project_type,
-          project.categories
-        )
-      }
-
       return {
         user,
         projects,
diff --git a/plugins/fileUtils.js b/plugins/fileUtils.js
index 9d2b94483..14ceedfa7 100644
--- a/plugins/fileUtils.js
+++ b/plugins/fileUtils.js
@@ -1,3 +1,6 @@
+import JSZip from 'jszip'
+import TOML from '@iarna/toml'
+import yaml from 'js-yaml'
 import { formatBytes } from '~/plugins/shorthands'
 
 /**
@@ -7,7 +10,7 @@ import { formatBytes } from '~/plugins/shorthands'
  * @param validationOptions.maxSize the max file size in bytes
  * @param validationOptions.alertOnInvalid if an alert should pop up describing
  * each validation error
- * @returns `true` if the file is valid; `false` otherise
+ * @returns `true` if the file is valid; `false` otherwise
  */
 export const fileIsValid = (file, validationOptions) => {
   const { maxSize, alertOnInvalid } = validationOptions
@@ -25,3 +28,212 @@ export const fileIsValid = (file, validationOptions) => {
 
   return true
 }
+
+export const acceptFileFromProjectType = (projectType) => {
+  switch (projectType) {
+    case 'mod':
+      return '.jar,.zip,.litemod,application/java-archive,application/zip'
+    case 'plugin':
+      return '.jar,.zip,application/java-archive,application/zip'
+    case 'resourcepack':
+      return '.zip,application/zip'
+    case 'shader':
+      return '.zip,application/zip'
+    case 'modpack':
+      return '.mrpack,application/x-modrinth-modpack+zip'
+    default:
+      return '*'
+  }
+}
+
+export const inferVersionInfo = async function (
+  rawFile,
+  project,
+  gameVersions
+) {
+  function versionType(number) {
+    if (number.includes('alpha')) {
+      return 'alpha'
+    } else if (
+      number.includes('beta') ||
+      number.match(/[^A-z](rc)[^A-z]/) || // includes `rc`
+      number.match(/[^A-z](pre)[^A-z]/) // includes `pre`
+    ) {
+      return 'beta'
+    } else {
+      return 'release'
+    }
+  }
+
+  // TODO: This func does not handle accurate semver parsing. We should eventually
+  function gameVersionRange(gameVersionString, gameVersions) {
+    if (!gameVersionString) {
+      return []
+    }
+
+    // Truncate characters after `-` & `+`
+    const gameString = gameVersionString.replace(/-|\+.*$/g, '')
+
+    let prefix = ''
+    if (gameString.includes('~')) {
+      // Include minor versions
+      // ~1.2.3 -> 1.2
+      prefix = gameString.replace('~', '').split('.').slice(0, 2).join('.')
+    } else if (gameString.includes('>=')) {
+      // Include minor versions
+      // >=1.2.3 -> 1.2
+      prefix = gameString.replace('>=', '').split('.').slice(0, 2).join('.')
+    } else if (gameString.includes('^')) {
+      // Include major versions
+      // ^1.2.3 -> 1
+      prefix = gameString.replace('^', '').split('.')[0]
+    } else if (gameString.includes('x')) {
+      // Include versions that match `x.x.x`
+      // 1.2.x -> 1.2
+      prefix = gameString.replace(/\.x$/, '')
+    } else {
+      // Include exact version
+      // 1.2.3 -> 1.2.3
+      prefix = gameString
+    }
+
+    const simplified = gameVersions
+      .filter((it) => it.version_type === 'release')
+      .map((it) => it.version)
+    return simplified.filter((version) => version.startsWith(prefix))
+  }
+
+  const inferFunctions = {
+    // Forge 1.13+
+    'META-INF/mods.toml': (file, zip) => {
+      const metadata = TOML.parse(file)
+
+      console.log(JSON.stringify(metadata))
+
+      // TODO: Parse minecraft version ranges, handle if version is set to value from manifest
+      if (metadata.mods && metadata.mods.length > 0) {
+        return {
+          name: `${project.title} ${metadata.mods[0].version}`,
+          version_number: metadata.mods[0].version,
+          version_type: versionType(metadata.mods[0].version),
+          loaders: ['forge'],
+        }
+      } else {
+        return {}
+      }
+    },
+    // Old Forge
+    'mcmod.info': (file) => {
+      const metadata = JSON.parse(file)
+
+      return {
+        name: metadata.version ? `${project.title} ${metadata.version}` : '',
+        version_number: metadata.version,
+        version_type: versionType(metadata.version),
+        loaders: ['forge'],
+        game_versions: gameVersions
+          .filter(
+            (x) =>
+              x.version.startsWith(metadata.mcversion) &&
+              x.version_type === 'release'
+          )
+          .map((x) => x.version),
+      }
+    },
+    // Fabric
+    'fabric.mod.json': (file) => {
+      const metadata = JSON.parse(file)
+
+      return {
+        name: `${project.title} ${metadata.version}`,
+        version_number: metadata.version,
+        loaders: ['fabric'],
+        version_type: versionType(metadata.version),
+        game_versions: metadata.depends
+          ? gameVersionRange(metadata.depends.minecraft, gameVersions)
+          : [],
+      }
+    },
+    // Quilt
+    'quilt.mod.json': (file) => {
+      const metadata = JSON.parse(file)
+
+      return {
+        name: `${project.title} ${metadata.quilt_loader.version}`,
+        version_number: metadata.quilt_loader.version,
+        loaders: ['quilt'],
+        version_type: versionType(metadata.quilt_loader.version),
+        game_versions: metadata.quilt_loader.depends
+          ? gameVersionRange(
+              metadata.depends.find((x) => x.id === 'minecraft')
+                ? metadata.depends.find((x) => x.id === 'minecraft').versions
+                : [],
+              gameVersions
+            )
+          : [],
+      }
+    },
+    // Bukkit + Other Forks
+    'plugin.yml': (file) => {
+      const metadata = yaml.load(file)
+
+      return {
+        name: `${project.title} ${metadata.version}`,
+        version_number: metadata.version,
+        version_type: versionType(metadata.version),
+        // We don't know which fork of Bukkit users are using
+        loaders: [],
+        game_versions: gameVersions
+          .filter(
+            (x) =>
+              x.version.startsWith(metadata['api-version']) &&
+              x.version_type === 'release'
+          )
+          .map((x) => x.version),
+      }
+    },
+    // Bungeecord + Waterfall
+    'bungee.yml': (file) => {
+      const metadata = yaml.load(file)
+
+      return {
+        name: `${project.title} ${metadata.version}`,
+        version_number: metadata.version,
+        version_type: versionType(metadata.version),
+        loaders: ['bungeecord'],
+      }
+    },
+    // Modpacks
+    'modrinth.index.json': (file) => {
+      const metadata = JSON.parse(file)
+
+      const loaders = []
+      if ('forge' in metadata.dependencies) loaders.push('forge')
+      if ('fabric-loader' in metadata.dependencies) loaders.push('fabric')
+      if ('quilt-loader' in metadata.dependencies) loaders.push('quilt')
+
+      return {
+        name: `${project.title} ${metadata.versionId}`,
+        version_number: metadata.versionId,
+        version_type: versionType(metadata.versionId),
+        loaders,
+        game_versions: gameVersions
+          .filter((x) => x.version === metadata.dependencies.minecraft)
+          .map((x) => x.version),
+      }
+    },
+  }
+
+  const zipReader = new JSZip()
+
+  const zip = await zipReader.loadAsync(rawFile)
+
+  for (const fileName in inferFunctions) {
+    const file = zip.file(fileName)
+
+    if (file !== null) {
+      const text = await file.async('text')
+      return inferFunctions[fileName](text, zip)
+    }
+  }
+}