Rewrite Parity (#647)

* Rewrite Parity

* Update SEO, fix modals, add dashes to changelog

* Edit create version title

* Cache tags, SEO for search/partial noscript support, notifications fix

* Deploy?

* Fix vercel config

* Fix it again

* Finish user editing

* Remove broken docker build

* Switch reports to modals

* Update project card

* Navbar line animation in most places

* Add chips

* Move to navlink query params

* remove autogen file

* Add copy code

* Fix webkit text box outlines, port report modal

* Update error page

* Switch to avatar component

* Make keyboard nav work

* Fix team member spacing

* improve project ID display (#676)

* Bug fixes

* Update OG site title

* More fixes

* Design tweaks

* Fix card wrapping on mobile

* Darken light theme color a little

* Sidebar navigation for settings, notifications, and moderation

* Change follow icon from a heart to a bell

* Revert "Change follow icon from a heart to a bell"

This reverts commit e30b46ec5d93c57df847be88eba123c7419dd03b.

* Change follows icon in settings

* AaaaUUUUUUUGghghhhhhhhh

* Project sidebar transparent button animations

* Update file input button styling and change icon remove button text

* Fix environments filter condition being inverted

* Remove -> revert

* Improve readability of warning banners on light mode

* Fix mobile menu button colors

* Clean up notifications page more

* Creator dashboard and monetization work

* Add processing fees declarations and acknowledgement box

* Beta badges

* Downgrade Nuxt Vercel Builder

* Update the style of button groups to be more consistent

* More button consistency

* Remove desktop navbar on mobile

* Update home page progress indicators

* Fix page jumping (Thanks @stairman06)

* Make checkbox checked style consistent with other selection indicators

* More home page updates

* Properly reset NavRows

* Move filters menu on mobile

* Stylized checkbox updated to match active styling

* Filters icon

* Respect prefers-reduced-motion

* Add most backend payouts changes (untested)

* Finish tested payouts code

* Allow monetization unenrolling

* No longer use brand color for active highlights on standard nav elements

* More consistent button group on project page

* Rounded tables

* Fix some things (#716)

* Team member fixes + re-add changelog/versions stuff

* Remove dummy data

* The great CSS refactor

* Remove commented out css

* Give modals the legacy label styles and update profile edit labels

* Fix active chip size

* Remove shadow from selected chip

* Require email set for CMP

* Update styles of notifications to universal-card

* Equivalent exchange, trading some jank for some less bad jank

* Fix all gallery buttons being missing when there is only 1 image

* Update project creation modal

* Make beta badge less bright

* Beta badge heading styling

* Update withdraw processing fees info

* Remove redundant label

* be

* Fix inverted logic

* 2% is 0.02

* Add toggle to turn off alpha modpacks banner

* Why warning button?

* Add more footer links (#719)

* Add more footer links

* Move twitter

* Make items on user pages less comically large and move ad above navigation

* Bump text down a little on home page

* Update favicon colors

* Remove task list package and change default description to use bullet points

* I don't remember why I made this important but let's not

* Ah, yes

* this doesn't actually need to be important

* Align items in input groups

* Adjust some spacings and clear creation modal on opening

* Versions now clickable

* Add link to edit page to default description

* Improve monetization information text

* Make wrapped text inputs not shrink

* Make chips work better

* smol margin on clear mod message button

* Allow non-authenticated users to access settings

* Remove settings anchors

* Fix versions page button style on firefox

* Add advanced rendering toggle

* Update slug input and icon card in project edit page

* Legal sidebar

* h1 at beginning of description no longer has top margin

* Use universal card for legal pages

* Update email addresses on legal pages

* Update various page titles and descriptions for consistency

* Various fixes and consolidation to API URL retrieval

Prevents a bug where it's possible to generate the tags under one API, switch the API, and still have tags leftover from the old API

Also finally fixes staging URL being jank

* Make the theme button show regardless of login state

Also remove the change theme from the user dropdown because it's very redundant with the several other ways of changing theme

* Make mobile profile dropdown ordering consistent with desktop

* Change the base url back

* Revert "Change the base url back"

This reverts commit c1da89fddb83776b39f626eab33c8dc67f8a75e4.

* constantize

* Tiny fixes (#722)

* Box-shadow chip outlines

* Show settings when signed out

* mods -> projects

* space

* Beta badge border

* Slug input overflow fix, scrollable

* 🙈 it will all be okay 🙊 this is just temporary 🙉 😭😭 forgive me

* Fix minor bugs

* fix moderation  page

* More fixes

* Temp fix for download button

* BEGONE TABLES

* Fix download button

Co-authored-by: Ryan Cao <70191398+ryanccn@users.noreply.github.com>
Co-authored-by: Prospector <prospectordev@gmail.com>
Co-authored-by: stairman06 <36215135+stairman06@users.noreply.github.com>
Co-authored-by: triphora <emmaffle@modrinth.com>

pages/moderation.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="page-container">
-    <Popup v-if="currentProject" :show-popup="true">
-      <div class="moderation-popup">
-        <h2>Moderation form</h2>
+  <div>
+    <Modal ref="modal" header="Moderation Form">
+      <div v-if="currentProject !== null" class="moderation-modal">
         <p>
           Both of these fields are optional, but can be used to communicate
           problems with a project's team members. The body supports markdown
@@ -37,46 +36,63 @@
           placeholder="Enter the message..."
         />
         <h3>Body</h3>
-        <ThisOrThat v-model="bodyViewMode" :items="['source', 'preview']" />
-        <div v-if="bodyViewMode === 'source'" class="textarea-wrapper">
+        <div class="textarea-wrapper">
+          <Chips
+            v-model="bodyViewMode"
+            class="separator"
+            :items="['source', 'preview']"
+          />
           <textarea
+            v-if="bodyViewMode === 'source'"
             id="body"
             v-model="currentProject.moderation_message_body"
           />
+          <div
+            v-else
+            v-highlightjs
+            class="markdown-body preview"
+            v-html="$xss($md.render(currentProject.moderation_message_body))"
+          ></div>
         </div>
-        <div
-          v-if="bodyViewMode === 'preview'"
-          v-highlightjs
-          class="markdown-body"
-          v-html="$xss($md.render(currentProject.moderation_message_body))"
-        ></div>
         <div class="buttons">
-          <button class="iconified-button" @click="currentProject = null">
+          <button
+            class="iconified-button"
+            @click="
+              $refs.modal.hide()
+              currentProject = null
+            "
+          >
             <CrossIcon />
             Cancel
           </button>
-          <button
-            class="iconified-button brand-button-colors"
-            @click="saveProject"
-          >
+          <button class="iconified-button brand-button" @click="saveProject">
             <CheckIcon />
             Confirm
           </button>
         </div>
       </div>
-    </Popup>
-    <div class="page-contents">
-      <div class="content">
-        <h1>Moderation</h1>
-        <ThisOrThat
-          v-model="selectedType"
-          class="card"
-          :items="moderationTypes"
-        />
+    </Modal>
+    <div class="normal-page">
+      <div class="normal-page__sidebar">
+        <aside class="universal-card">
+          <h1>Moderation</h1>
+          <NavStack>
+            <NavStackItem link="" label="All"> </NavStackItem>
+            <NavStackItem
+              v-for="type in moderationTypes"
+              :key="type"
+              :link="'?type=' + type"
+              :label="$formatProjectType(type) + 's'"
+            >
+            </NavStackItem>
+          </NavStack>
+        </aside>
+      </div>
+      <div class="normal-page__content">
         <div class="projects">
           <ProjectCard
-            v-for="project in selectedType !== 'all'
-              ? projects.filter((x) => x.project_type === selectedType)
+            v-for="project in $route.query.type !== undefined
+              ? projects.filter((x) => x.project_type === $route.query.type)
               : projects"
             :id="project.slug || project.id"
             :key="project.id"
@@ -115,49 +131,48 @@
           </ProjectCard>
         </div>
         <div
-          v-if="selectedType === 'report' || selectedType === 'all'"
+          v-if="
+            $route.query.type === 'report' || $route.query.type === undefined
+          "
           class="reports"
         >
           <div
-            v-for="(report, index) in reports"
-            :key="report.id"
-            class="report card"
+            v-for="(item, index) in reports"
+            :key="index"
+            class="card report"
           >
-            <div class="header">
-              <h5 class="title">
-                Report for {{ report.item_type }}
-                <nuxt-link
-                  :to="
-                    '/' +
-                    report.item_type +
-                    '/' +
-                    report.item_id.replace(/\W/g, '')
-                  "
-                  >{{ report.item_id }}
-                </nuxt-link>
-              </h5>
-              <p
+            <div class="info">
+              <div class="title">
+                <h3>
+                  {{ item.item_type }}
+                  <a :href="item.url">{{ item.item_id }}</a>
+                </h3>
+                reported by
+                <a :href="`/user/${item.reporter}`">{{ item.reporter }}</a>
+              </div>
+              <div
+                v-highlightjs
+                class="markdown-body"
+                v-html="$xss($md.render(item.body))"
+              />
+              <Badge :type="`Marked as ${item.report_type}`" color="yellow" />
+            </div>
+            <div class="actions">
+              <button class="iconified-button" @click="deleteReport(index)">
+                <TrashIcon /> Delete report
+              </button>
+              <span
                 v-tooltip="
-                  $dayjs(report.created).format(
+                  $dayjs(item.created).format(
                     '[Created at] YYYY-MM-DD [at] HH:mm A'
                   )
                 "
-                class="date"
+                class="stat"
               >
-                Created {{ $dayjs(report.created).fromNow() }}
-              </p>
-              <button
-                class="delete iconified-button"
-                @click="deleteReport(index)"
-              >
-                Delete
-              </button>
+                <CalendarIcon />
+                Created {{ $dayjs(item.created).fromNow() }}
+              </span>
             </div>
-            <div
-              v-highlightjs
-              class="markdown-body"
-              v-html="$xss($md.render(report.body))"
-            ></div>
           </div>
         </div>
         <div v-if="reports.length === 0 && projects.length === 0" class="error">
@@ -171,27 +186,35 @@
 </template>
 
 <script>
-import ThisOrThat from '~/components/ui/ThisOrThat'
+import Chips from '~/components/ui/Chips'
 import ProjectCard from '~/components/ui/ProjectCard'
-import Popup from '~/components/ui/Popup'
+import Modal from '~/components/ui/Modal'
 import Badge from '~/components/ui/Badge'
 
 import CheckIcon from '~/assets/images/utils/check.svg?inline'
 import UnlistIcon from '~/assets/images/utils/eye-off.svg?inline'
 import CrossIcon from '~/assets/images/utils/x.svg?inline'
+import TrashIcon from '~/assets/images/utils/trash.svg?inline'
+import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import Security from '~/assets/images/illustrations/security.svg?inline'
+import NavStack from '~/components/ui/NavStack'
+import NavStackItem from '~/components/ui/NavStackItem'
 
 export default {
   name: 'Moderation',
   components: {
-    ThisOrThat,
+    NavStack,
+    NavStackItem,
+    Chips,
     ProjectCard,
     CheckIcon,
     CrossIcon,
     UnlistIcon,
-    Popup,
+    Modal,
     Badge,
     Security,
+    TrashIcon,
+    CalendarIcon,
   },
   async asyncData(data) {
     const [projects, reports] = (
@@ -201,10 +224,76 @@ export default {
       ])
     ).map((it) => it.data)
 
+    const newReports = await Promise.all(
+      reports.map(async (report) => {
+        try {
+          report.item_id = report.item_id?.replace
+            ? report.item_id.replace(/"/g, '')
+            : report.item_id
+          let url = ''
+
+          if (report.item_type === 'user') {
+            const user = (
+              await data.$axios.get(
+                `user/${report.item_id}`,
+                data.$defaultHeaders()
+              )
+            ).data
+            url = `/user/${user.username}`
+            report.item_id = user.username
+          } else if (report.item_type === 'project') {
+            const project = (
+              await data.$axios.get(
+                `project/${report.item_id}`,
+                data.$defaultHeaders()
+              )
+            ).data
+            report.item_id = project.slug || report.item_id
+            url = `/${project.project_type}/${report.item_id}`
+          } else if (report.item_type === 'version') {
+            const version = (
+              await data.$axios.get(
+                `version/${report.item_id}`,
+                data.$defaultHeaders()
+              )
+            ).data
+            const project = (
+              await data.$axios.get(
+                `project/${version.project_id}`,
+                data.$defaultHeaders()
+              )
+            ).data
+            report.item_id = version.version_number || report.item_id
+            url = `/${project.project_type}/${
+              project.slug || project.id
+            }/version/${report.item_id}`
+          }
+
+          report.reporter = (
+            await data.$axios.get(
+              `user/${report.reporter}`,
+              data.$defaultHeaders()
+            )
+          ).data.username
+
+          return {
+            ...report,
+            moderation_type: 'report',
+            url,
+          }
+        } catch (err) {
+          return {
+            ...report,
+            url: 'error',
+            moderation_type: 'report',
+          }
+        }
+      })
+    )
+
     return {
       projects,
-      reports,
-      selectedType: 'all',
+      reports: newReports,
     }
   },
   data() {
@@ -218,7 +307,7 @@ export default {
   },
   computed: {
     moderationTypes() {
-      const obj = { all: true }
+      const obj = {}
 
       for (const project of this.projects) {
         obj[project.project_type] = true
@@ -238,6 +327,7 @@ export default {
       project.newStatus = status
 
       this.currentProject = project
+      this.$refs.modal.show()
     },
     async saveProject() {
       this.$nuxt.$loading.start()
@@ -262,6 +352,7 @@ export default {
           1
         )
         this.currentProject = null
+        this.$refs.modal.hide()
       } catch (err) {
         this.$notify({
           group: 'main',
@@ -299,7 +390,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.moderation-popup {
+.moderation-modal {
   width: auto;
   padding: var(--spacing-card-md) var(--spacing-card-lg);
 
@@ -313,6 +404,19 @@ export default {
     }
   }
 
+  .textarea-wrapper {
+    margin-top: 0.5rem;
+    height: 15rem;
+
+    .preview {
+      overflow-y: auto;
+    }
+  }
+
+  .separator {
+    margin: var(--spacing-card-sm) 0;
+  }
+
   .buttons {
     display: flex;
     margin-top: 0.5rem;
@@ -325,28 +429,70 @@ export default {
 
 h1 {
   color: var(--color-text-dark);
-  margin: 0 0 1rem 1.5rem;
 }
 
 .report {
-  .header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+
+  > div {
     display: flex;
-    align-items: center;
-    flex-direction: row;
-    justify-content: center;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .info {
+    display: flex;
+    flex-wrap: wrap;
+
     .title {
-      font-size: var(--font-size-lg);
-      margin: 0 0.5rem 0 0;
+      display: flex;
+      align-items: baseline;
+      gap: 0.25rem;
+      flex-wrap: wrap;
+
+      h3 {
+        margin: 0;
+        text-transform: capitalize;
+
+        a {
+          text-transform: none;
+        }
+      }
+
+      a {
+        text-decoration: underline;
+      }
     }
+  }
+
+  .actions {
+    min-width: fit-content;
+
     .iconified-button {
       margin-left: auto;
+      width: fit-content;
+    }
+
+    .stat {
+      margin-top: auto;
+      display: flex;
+      align-items: center;
+      grid-gap: 0.5rem;
+
+      svg {
+        width: 1em;
+      }
     }
   }
 }
 
 @media screen and (min-width: 1024px) {
   .page-contents {
-    max-width: calc(1280px - 20rem) !important;
+    max-width: 800px;
   }
 }
 </style>