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>

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 {

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: {

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) {

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>

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>

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,