Projects overhaul for creators (#827)

* Projects page

* Continue work on bulk edit

* editLinks is now bulkEdit

* Bulk Edit Links completed

* Edit URL clear fields.

* Create project button + other bulk buttons.

* Pagination (w/o reactivity.)

* Apply suggestions from code review

Co-authored-by: triphora <emmaffle@modrinth.com>

* Sorting fixed, broken page count though?

* Only make editable projects selectable + remove delete button

* Shorthand

* Start using computed

* Fix pagination

* Add Pagination Switching

* Final Style Changes

* Cleanup

* Action Affects dropdown

* Switch to checkbox swizzle

* Projects dashboard, the most hellish thing I have ever worked on

* Rewrite project dashboard without tables

* why's that there

* Fix mod message icon

* New project settings page

* Remove extra slash

* Bulk project route and improve styling of links UI

* Remove beta label from Monetization

* Relevant page links in project settings

* Don't vertically center header rows

* Improve error messages, add remove project icon button, add saving feedback, begin project checklist, fix license settings

* Remove contextual link from project settings, disable WIP checklist

* Fix bulk edit

* Project checklist, add featured gallery image to project pages, fix random bugs

* Remove old check

* Remove icon border on grid mode and hide project status card when unnecessary

* Fix build

* Make checklist progress smaller and add collapsing

* Remove uneven gap on nav cards

* Improve wrapping of checklist

* Replace project settings header link with status

* Fix bugs + status stuff

* Fix warns + compile error

* Update wording

* Hide environment type nag for project types without it

* Make member dropdown match

Co-authored-by: mineblock11 <93472213+mineblock11@users.noreply.github.com>
Co-authored-by: triphora <emmaffle@modrinth.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

plugins/shorthands.js

@@ -31,11 +31,14 @@ export default (ctx, inject) => {
   inject('formatProjectType', formatProjectType)
   inject('formatCategory', formatCategory)
   inject('formatCategoryHeader', formatCategoryHeader)
+  inject('formatProjectStatus', formatProjectStatus)
   inject('computeVersions', (versions) => {
     const visitedVersions = []
     const returnVersions = []
 
-    for (const version of versions.reverse()) {
+    for (const version of versions.sort(
+      (a, b) => ctx.$dayjs(a.date_published) - ctx.$dayjs(b.date_published)
+    )) {
       if (visitedVersions.includes(version.version_number)) {
         visitedVersions.push(version.version_number)
         version.displayUrlEnding = version.id
@@ -47,18 +50,23 @@ export default (ctx, inject) => {
       returnVersions.push(version)
     }
 
-    return returnVersions.reverse().map((version, index) => {
-      const nextVersion = returnVersions[index + 1]
-      if (
-        nextVersion &&
-        version.changelog &&
-        nextVersion.changelog === version.changelog
-      ) {
-        return { duplicate: true, ...version }
-      } else {
-        return { duplicate: false, ...version }
-      }
-    })
+    return returnVersions
+      .reverse()
+      .map((version, index) => {
+        const nextVersion = returnVersions[index + 1]
+        if (
+          nextVersion &&
+          version.changelog &&
+          nextVersion.changelog === version.changelog
+        ) {
+          return { duplicate: true, ...version }
+        } else {
+          return { duplicate: false, ...version }
+        }
+      })
+      .sort(
+        (a, b) => ctx.$dayjs(b.date_published) - ctx.$dayjs(a.date_published)
+      )
   })
   inject('getProjectTypeForDisplay', (type, categories) => {
     if (type === 'mod') {
@@ -115,6 +123,26 @@ export default (ctx, inject) => {
     }
   })
   inject('cycleValue', cycleValue)
+  const sortedCategories = ctx.store.state.tag.categories
+    .slice()
+    .sort((a, b) => {
+      const headerCompare = a.header.localeCompare(b.header)
+      if (headerCompare !== 0) {
+        return headerCompare
+      }
+      if (a.header === 'resolutions' && b.header === 'resolutions') {
+        return a.name.replace(/\D/g, '') - b.name.replace(/\D/g, '')
+      } else if (
+        a.header === 'performance impact' &&
+        b.header === 'performance impact'
+      ) {
+        const x = ['potato', 'low', 'medium', 'high', 'screenshot']
+
+        return x.indexOf(a.name) - x.indexOf(b.name)
+      }
+      return 0
+    })
+  inject('sortedCategories', sortedCategories)
 }
 
 export const formatNumber = (number) => {
@@ -158,7 +186,7 @@ export const formatBytes = (bytes, decimals = 2) => {
 }
 
 export const capitalizeString = (name) => {
-  return name.charAt(0).toUpperCase() + name.slice(1)
+  return name ? name.charAt(0).toUpperCase() + name.slice(1) : name
 }
 
 export const formatWallet = (name) => {
@@ -205,6 +233,10 @@ export const formatCategory = (name) => {
     return 'PBR'
   } else if (name === 'datapack') {
     return 'Data Pack'
+  } else if (name === 'colored-lighting') {
+    return 'Colored Lighting'
+  } else if (name === 'optifine') {
+    return 'OptiFine'
   }
 
   return capitalizeString(name)
@@ -214,6 +246,16 @@ export const formatCategoryHeader = (name) => {
   return capitalizeString(name)
 }
 
+export const formatProjectStatus = (name) => {
+  if (name === 'approved') {
+    return 'Listed'
+  } else if (name === 'processing') {
+    return 'Under review'
+  }
+
+  return capitalizeString(name)
+}
+
 export const formatVersions = (versionArray, store) => {
   const allVersions = store.state.tag.gameVersions.slice().reverse()
   const allReleases = allVersions.filter((x) => x.version_type === 'release')