Merge commit '175b90be5a42e5bfd3289ffdfbf7b201404f82a8' into beta

apps/frontend/src/pages/[type]/[id].vue

@@ -951,14 +951,7 @@ import {
   useRelativeTime,
 } from "@modrinth/ui";
 import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
-import {
-  formatCategory,
-  formatProjectType,
-  isRejected,
-  isStaff,
-  isUnderReview,
-  renderString,
-} from "@modrinth/utils";
+import { formatCategory, formatProjectType, renderString } from "@modrinth/utils";
 import dayjs from "dayjs";
 import { Tooltip } from "floating-vue";
 import { useLocalStorage } from "@vueuse/core";
@@ -1646,9 +1639,7 @@ const navLinks = computed(() => {
     {
       label: formatMessage(messages.moderationTab),
       href: `${projectUrl}/moderation`,
-      shown:
-        !!currentMember.value &&
-        (isRejected(project.value) || isUnderReview(project.value) || isStaff(auth.value.user)),
+      shown: !!currentMember.value,
     },
   ];
 });

apps/frontend/src/pages/[type]/[id]/moderation.vue

@@ -76,8 +76,15 @@
       <p>
         This is a private conversation thread with the Modrinth moderators. They may message you
         with issues concerning this project. This thread is only checked when you submit your
-        project for review. For additional inquiries, contact
-        <a href="https://support.modrinth.com">Modrinth Support</a>.
+        project for review. For additional inquiries, please go to the
+        <a class="text-link" href="https://support.modrinth.com" target="_blank">
+          Modrinth Help Center
+        </a>
+        and click the green bubble to contact support.
+      </p>
+      <p v-if="isApproved(project)" class="warning">
+        <IssuesIcon /> The moderators do not actively monitor this chat. However, they may still see
+        messages here if there is a problem with your project.
       </p>
       <ConversationThread
         v-if="thread"

apps/frontend/src/pages/admin/billing/[id].vue

@@ -58,6 +58,41 @@
       </div>
     </div>
   </NewModal>
+  <NewModal ref="modifyModal">
+    <template #title>
+      <span class="text-lg font-extrabold text-contrast">Modify charge</span>
+    </template>
+    <div class="flex flex-col gap-3">
+      <div class="flex flex-col gap-2">
+        <label for="cancel" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-contrast">
+            Cancel server
+            <span class="text-brand-red">*</span>
+          </span>
+          <span>
+            Whether or not the subscription should be cancelled. Submitting this as "true" will
+            cancel the subscription, while submitting it as "false" will force another charge
+            attempt to be made.
+          </span>
+        </label>
+        <Toggle id="cancel" v-model="cancel" />
+      </div>
+      <div class="flex gap-2">
+        <ButtonStyled color="brand">
+          <button :disabled="modifying" @click="modifyCharge">
+            <CheckIcon aria-hidden="true" />
+            Modify charge
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button @click="modifyModal.hide()">
+            <XIcon aria-hidden="true" />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
   <div class="page experimental-styles-within">
     <div
       class="mb-4 flex items-center justify-between border-0 border-b border-solid border-divider pb-4"
@@ -201,6 +236,12 @@
                     Refund options
                   </button>
                 </ButtonStyled>
+                <ButtonStyled v-else-if="charge.status === 'failed'" color="red" color-fill="text">
+                  <button @click="showModifyModal(subscription)">
+                    <CurrencyIcon />
+                    Modify charge
+                  </button>
+                </ButtonStyled>
               </div>
             </div>
           </div>
@@ -234,7 +275,6 @@ import { products } from "~/generated/state.json";
 import ModrinthServersIcon from "~/components/ui/servers/ModrinthServersIcon.vue";
 
 const route = useRoute();
-const data = useNuxtApp();
 const vintl = useVIntl();
 
 const { formatMessage } = vintl;
@@ -304,6 +344,10 @@ const refundTypes = ref(["full", "partial", "none"]);
 const refundAmount = ref(0);
 const unprovision = ref(true);
 
+const modifying = ref(false);
+const modifyModal = ref();
+const cancel = ref(false);
+
 function showRefundModal(charge) {
   selectedCharge.value = charge;
   refundType.value = "full";
@@ -312,6 +356,12 @@ function showRefundModal(charge) {
   refundModal.value.show();
 }
 
+function showModifyModal(charge) {
+  selectedCharge.value = charge;
+  cancel.value = false;
+  modifyModal.value.show();
+}
+
 async function refundCharge() {
   refunding.value = true;
   try {
@@ -327,8 +377,7 @@ async function refundCharge() {
     await refreshCharges();
     refundModal.value.hide();
   } catch (err) {
-    data.$notify({
-      group: "main",
+    addNotification({
       title: "Error refunding",
       text: err.data?.description ?? err,
       type: "error",
@@ -337,6 +386,32 @@ async function refundCharge() {
   refunding.value = false;
 }
 
+async function modifyCharge() {
+  modifying.value = true;
+  try {
+    await useBaseFetch(`billing/subscription/${selectedCharge.value.id}`, {
+      method: "PATCH",
+      body: JSON.stringify({
+        cancelled: cancel.value,
+      }),
+      internal: true,
+    });
+    addNotification({
+      title: "Resubscription request submitted",
+      text: "If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.",
+      type: "success",
+    });
+    await refreshCharges();
+  } catch (err) {
+    addNotification({
+      title: "Error reattempting charge",
+      text: err.data?.description ?? err,
+      type: "error",
+    });
+  }
+  modifying.value = false;
+}
+
 const chargeStatuses = {
   open: {
     color: "bg-blue",

apps/frontend/src/pages/collection/[id].vue

@@ -40,7 +40,6 @@
                       @change="showPreviewImage"
                     >
                       <UploadIcon aria-hidden="true" />
-                      {{ formatMessage(messages.uploadIconButton) }}
                     </FileInput>
                     <Button
                       v-if="!deletedIcon && (previewImage || collection.icon_url)"
@@ -479,10 +478,6 @@ const messages = defineMessages({
     id: "collection.label.updated-at",
     defaultMessage: "Updated {ago}",
   },
-  uploadIconButton: {
-    id: "collection.button.upload-icon",
-    defaultMessage: "Upload icon",
-  },
 });
 
 const data = useNuxtApp();

apps/frontend/src/pages/servers/manage/index.vue

@@ -96,16 +96,7 @@
         <UiServersServerListing
           v-for="server in filteredData"
           :key="server.server_id"
-          :server_id="server.server_id"
-          :name="server.name"
-          :status="server.status"
-          :game="server.game"
-          :loader="server.loader"
-          :loader_version="server.loader_version"
-          :mc_version="server.mc_version"
-          :upstream="server.upstream"
-          :net="server.net"
-          :flows="server.flows"
+          v-bind="server"
         />
         <LazyUiServersServerListingSkeleton v-if="isPollingForNewServers" />
       </ul>

apps/frontend/src/pages/settings/billing/index.vue

@@ -208,15 +208,7 @@
             <div class="flex flex-col gap-2">
               <UiServersServerListing
                 v-if="subscription.serverInfo"
-                :server_id="subscription.serverInfo.server_id"
-                :name="subscription.serverInfo.name"
-                :status="subscription.serverInfo.status"
-                :game="subscription.serverInfo.game"
-                :loader="subscription.serverInfo.loader"
-                :loader_version="subscription.serverInfo.loader_version"
-                :mc_version="subscription.serverInfo.mc_version"
-                :upstream="subscription.serverInfo.upstream"
-                :net="subscription.serverInfo.net"
+                v-bind="subscription.serverInfo"
               />
               <div v-else class="w-fit">
                 <p>