From e297dff0d4545ee4a6857f85a46c251b1fecfddd Mon Sep 17 00:00:00 2001
From: triphora <emmaffle@modrinth.com>
Date: Sun, 20 Nov 2022 15:49:29 -0500
Subject: [PATCH] Massively improved moderator message visibility (#754)

Co-authored-by: Prospector <prospectordev@gmail.com>
---
 components/ui/ProjectCard.vue | 23 ++++++++-
 pages/_type/_id.vue           | 87 +++++++++++++++++++++++++----------
 pages/user/_id.vue            |  6 ++-
 3 files changed, 88 insertions(+), 28 deletions(-)

diff --git a/components/ui/ProjectCard.vue b/components/ui/ProjectCard.vue
index 088eb06a3..f4c5167a7 100644
--- a/components/ui/ProjectCard.vue
+++ b/components/ui/ProjectCard.vue
@@ -12,8 +12,16 @@
             <h2 class="title">
               <nuxt-link
                 :to="`/${$getProjectTypeForUrl(type, categories)}/${id}`"
-                >{{ name }}</nuxt-link
               >
+                <IssuesIcon
+                  v-if="hasModMessage"
+                  v-tooltip="
+                    'Project has a message from the moderators. View the project to see more.'
+                  "
+                  aria-label="Project has a message from the moderators. View the project to see more."
+                />
+                {{ name }}
+              </nuxt-link>
             </h2>
             <p v-if="author" class="author">
               by
@@ -155,6 +163,7 @@ import Categories from '~/components/ui/search/Categories'
 import Badge from '~/components/ui/Badge'
 
 import InfoIcon from '~/assets/images/utils/info.svg?inline'
+import IssuesIcon from '~/assets/images/utils/issues.svg?inline'
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import EditIcon from '~/assets/images/utils/updated.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
@@ -168,6 +177,7 @@ export default {
     Categories,
     Badge,
     InfoIcon,
+    IssuesIcon,
     CalendarIcon,
     EditIcon,
     DownloadIcon,
@@ -227,6 +237,10 @@ export default {
       type: String,
       default: null,
     },
+    hasModMessage: {
+      type: Boolean,
+      default: false,
+    },
     serverSide: {
       type: String,
       required: false,
@@ -301,6 +315,13 @@ export default {
           color: var(--color-text-dark);
           font-size: var(--font-size-xl);
           word-wrap: break-word;
+
+          svg {
+            width: auto;
+            color: var(--color-badge-yellow-text);
+            height: 1.5rem;
+            margin-bottom: -0.25rem;
+          }
         }
 
         .author {
diff --git a/pages/_type/_id.vue b/pages/_type/_id.vue
index aa367a973..cf528f64e 100644
--- a/pages/_type/_id.vue
+++ b/pages/_type/_id.vue
@@ -199,28 +199,53 @@
             <VersionBadge v-else color="gray" :type="project.status" />
           </p>
           <div class="message">
+            <p v-if="project.status === 'rejected'">
+              Your project has been rejected by Modrinth's staff. In most cases,
+              you can resubmit for review after addressing the staff's message,
+              which is below. Do not resubmit until you've addressed the message
+              from the moderators!
+            </p>
             <p v-if="project.status === 'processing'">
               Your project is currently not viewable by people who are not part
               of your team. Please wait for our moderators to manually review
               your project to see if it abides by our
-              <nuxt-link to="/legal/rules">content rules!</nuxt-link>
+              <nuxt-link class="text-link" to="/legal/rules"
+                >content rules!
+              </nuxt-link>
             </p>
             <p v-if="project.status === 'draft'">
               Your project is currently not viewable by people who are not part
-              of your team. If your project is ready for review, click the
-              button below to make your mod public!
+              of your team. If you would like to publish your project, click the
+              button below to send your project in for review.
             </p>
-            <p v-if="project.moderator_message">
-              {{ project.moderator_message.message }}
-            </p>
-            <div
-              v-if="project.moderator_message && project.moderator_message.body"
-              v-highlightjs
-              class="markdown-body"
-              v-html="$xss($md.render(project.moderator_message.body))"
-            ></div>
+            <div v-if="project.moderator_message">
+              <hr class="card-divider" />
+              <div v-if="project.moderator_message.body">
+                <h3 class="card-header">
+                  Message from the Modrinth moderators:
+                </h3>
+                <p
+                  v-if="project.moderator_message.message"
+                  class="mod-message__title"
+                >
+                  {{ project.moderator_message.message }}
+                </p>
+                <div
+                  v-highlightjs
+                  class="markdown-body"
+                  v-html="$xss($md.render(project.moderator_message.body))"
+                />
+              </div>
+              <div v-else>
+                <h3 class="card-header">
+                  Message from the Modrinth moderators:
+                </h3>
+                <p>{{ project.moderator_message.message }}</p>
+              </div>
+              <hr class="card-divider" />
+            </div>
           </div>
-          <div class="buttons">
+          <div class="buttons status-buttons">
             <button
               v-if="
                 project.status === 'rejected' ||
@@ -243,7 +268,7 @@
             </button>
             <button
               v-if="project.status === 'approved'"
-              class="clear-mod-message iconified-button"
+              class="iconified-button"
               @click="clearMessage"
             >
               <ClearIcon />
@@ -261,10 +286,6 @@
               </li>
             </ul>
           </div>
-          <p v-if="project.status === 'rejected'">
-            Do not resubmit for review until you've addressed the moderator
-            message!
-          </p>
         </div>
         <div class="extra-info-desktop card">
           <template
@@ -460,9 +481,14 @@
             <div class="info">
               <div class="key">License</div>
               <div class="value uppercase">
-                <a class="text-link" :href="project.license.url || null">{{
-                  project.license.id
-                }}</a>
+                <a
+                  v-if="project.license.url"
+                  class="text-link"
+                  :href="project.license.url"
+                >
+                  {{ project.license.id }}
+                </a>
+                <span v-else>{{ project.license.id }}</span>
               </div>
             </div>
             <div
@@ -798,9 +824,14 @@
             <div class="info">
               <div class="key">License</div>
               <div class="value uppercase">
-                <a class="text-link" :href="project.license.url || null">{{
-                  project.license.id
-                }}</a>
+                <a
+                  v-if="project.license.url"
+                  class="text-link"
+                  :href="project.license.url"
+                >
+                  {{ project.license.id }}
+                </a>
+                <span v-else>{{ project.license.id }}</span>
               </div>
             </div>
             <div
@@ -1403,7 +1434,13 @@ export default {
   }
 }
 
-.clear-mod-message {
+.status-buttons {
   margin-top: var(--spacing-card-sm);
 }
+
+.mod-message__title {
+  font-weight: bold;
+  margin-bottom: var(--spacing-card-xs);
+  font-size: 1.125rem;
+}
 </style>
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index 9415a610d..32b2a03ee 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -197,11 +197,13 @@
             :client-side="project.client_side"
             :server-side="project.server_side"
             :status="
-              $auth.user &&
-              ($auth.user.role === 'admin' || $auth.user.role === 'moderator')
+              ($auth.user && $auth.user.id === user.id) ||
+              $auth.user.role === 'admin' ||
+              $auth.user.role === 'moderator'
                 ? project.status
                 : null
             "
+            :has-mod-message="project.moderator_message"
             :type="project.project_type"
           >
             <nuxt-link