fix: checklist conditional message issues + MD formatting (#3989)

2025-07-13 21:23:06 +01:00
parent 058185c7fd
commit c1b95ede07
15 changed files with 160 additions and 105 deletions
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -197,13 +197,13 @@
  }

  > :where(
-      input + *,
-      .input-group + *,
-      .textarea-wrapper + *,
-      .chips + *,
-      .resizable-textarea-wrapper + *,
-      .input-div + *
-    ) {
+    input + *,
+    .input-group + *,
+    .textarea-wrapper + *,
+    .chips + *,
+    .resizable-textarea-wrapper + *,
+    .input-div + *
+  ) {
    &:not(:empty) {
      margin-block-start: var(--spacing-card-md);
    }
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -115,10 +115,12 @@ html {
  --shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);

  --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
-  --shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
+  --shadow-raised:
+    0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
    1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
    4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
-  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+  --shadow-floating:
+    hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;

  --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
@@ -150,8 +152,8 @@ html {
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.2695) 100%
  );
-  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16),
-    inset 2px 2px 64px rgba(255, 255, 255, 0.45);
+  --landing-blob-shadow:
+    2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(255, 255, 255, 0.45);

  --landing-card-bg: rgba(255, 255, 255, 0.8);
  --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
@@ -251,13 +253,15 @@ html {

  --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
  --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
-  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+  --shadow-floating:
+    hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

  --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;

  --landing-maze-bg: url("https://cdn.modrinth.com/landing-new/landing.webp");
-  --landing-maze-gradient-bg: linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
+  --landing-maze-gradient-bg:
+    linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
    url("https://cdn.modrinth.com/landing-new/landing-lower.webp");
  --landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);

@@ -284,7 +288,8 @@ html {
    rgba(44, 48, 79, 0.35) 0%,
    rgba(32, 35, 50, 0.2695) 100%
  );
-  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);
+  --landing-blob-shadow:
+    2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);

  --landing-card-bg: rgba(59, 63, 85, 0.15);
  --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
@@ -360,8 +365,9 @@ body {
  // Defaults
  background-color: var(--color-bg);
  color: var(--color-text);
-  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
-    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --font-standard:
+    Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell,
+    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-family: var(--font-standard);
  font-size: 16px;
--- a/apps/frontend/src/components/ui/moderation/NewModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/NewModerationChecklist.vue
@@ -382,6 +382,7 @@ import type {
 import ModpackPermissionsFlow from "./ModpackPermissionsFlow.vue";
 import KeybindsModal from "./ChecklistKeybindsModal.vue";
 import { finalPermissionMessages } from "@modrinth/moderation/data/modpack-permissions-stage";
+import prettier from "prettier";

 const keybindsModal = ref<InstanceType<typeof KeybindsModal>>();

@@ -923,16 +924,28 @@ async function processAction(
      conditionalAction.messageVariants,
      selectedActionIds,
      allValidActionIds,
+      stageIndex,
    );
+
+    let message: string;
+    let weight: number;
+
    if (matchingVariant) {
-      const message = (await matchingVariant.message()) as string;
-      messageParts.push({
-        weight: matchingVariant.weight,
-        content: processMessage(message, action, stageIndex, textInputValues.value),
-        actionId,
-        stageIndex,
-      });
+      message = (await matchingVariant.message()) as string;
+      weight = matchingVariant.weight;
+    } else if (conditionalAction.fallbackMessage) {
+      message = (await conditionalAction.fallbackMessage()) as string;
+      weight = conditionalAction.fallbackWeight ?? 0;
+    } else {
+      return;
    }
+
+    messageParts.push({
+      weight,
+      content: processMessage(message, action, stageIndex, textInputValues.value),
+      actionId,
+      stageIndex,
+    });
  } else if (action.type === "dropdown") {
    const dropdownAction = action as DropdownAction;
    const selectedIndex = state.value ?? 0;
@@ -1077,7 +1090,20 @@ async function generateMessage() {
      }
    }

-    message.value = fullMessage;
+    try {
+      const formattedMessage = await prettier.format(fullMessage, {
+        parser: "markdown",
+        printWidth: 80,
+        proseWrap: "always",
+        tabWidth: 2,
+        useTabs: false,
+      });
+      message.value = formattedMessage;
+    } catch (formattingError) {
+      console.warn("Failed to format markdown, using original:", formattingError);
+      message.value = fullMessage;
+    }
+
    generatedMessage.value = true;
  } catch (error) {
    console.error("Error generating message:", error);
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -31,9 +31,9 @@
                class="flex cursor-pointer items-center gap-1 bg-transparent p-0"
                @click="
                  versionFilter &&
-                    (unlockFilterAccordion.isOpen
-                      ? unlockFilterAccordion.close()
-                      : unlockFilterAccordion.open())
+                  (unlockFilterAccordion.isOpen
+                    ? unlockFilterAccordion.close()
+                    : unlockFilterAccordion.open())
                "
              >
                <TagItem
--- a/apps/frontend/src/composables/servers/servers-fetch.ts
+++ b/apps/frontend/src/composables/servers/servers-fetch.ts
@@ -112,7 +112,8 @@ export async function useServersFetch<T>(
      const response = await $fetch<T>(fullUrl, {
        method,
        headers,
-        body: body && contentType === "application/json" ? JSON.stringify(body) : body ?? undefined,
+        body:
+          body && contentType === "application/json" ? JSON.stringify(body) : (body ?? undefined),
        timeout: 10000,
      });

--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -29,12 +29,11 @@
            class="settings-header__icon"
          />
          <div class="settings-header__text">
-            <h1 class="wrap-as-needed">
-              {{ project.title }}
-            </h1>
+            <h1 class="wrap-as-needed">{{ project.title }}</h1>
            <ProjectStatusBadge :status="project.status" />
          </div>
        </div>
+
        <h2>Project settings</h2>
        <NavStack>
          <NavStackItem
@@ -111,6 +110,7 @@
        </NavStack>
      </aside>
    </div>
+
    <div class="normal-page__content">
      <ProjectMemberHeader
        v-if="currentMember"
@@ -145,6 +145,7 @@
      />
    </div>
  </div>
+
  <div v-else class="experimental-styles-within">
    <NewModal ref="settingsModal">
      <template #title>
@@ -174,9 +175,11 @@
        <div
          class="animation-ring-3 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-40"
        ></div>
+
        <div
          class="animation-ring-2 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight opacity-60"
        ></div>
+
        <div
          class="animation-ring-1 flex items-center justify-center rounded-full border-4 border-solid border-brand bg-brand-highlight"
        >
@@ -219,8 +222,7 @@
                  :href="`modrinth://mod/${project.slug}`"
                  @click="() => installWithApp()"
                >
-                  <ModrinthIcon aria-hidden="true" />
-                  Install with Modrinth App
+                  <ModrinthIcon aria-hidden="true" /> Install with Modrinth App
                  <ExternalIcon aria-hidden="true" />
                </a>
              </ButtonStyled>
@@ -240,6 +242,7 @@
              <div class="flex h-[2px] w-full rounded-2xl bg-button-bg"></div>
            </div>
          </div>
+
          <div class="mx-auto flex w-fit flex-col gap-2">
            <ButtonStyled v-if="project.game_versions.length === 1">
              <div class="disabled button-like">
@@ -327,8 +330,7 @@
                      }
                    "
                  >
-                    {{ gameVersion }}
-                    <CheckIcon v-if="userSelectedGameVersion === gameVersion" />
+                    {{ gameVersion }} <CheckIcon v-if="userSelectedGameVersion === gameVersion" />
                  </button>
                </ButtonStyled>
              </ScrollablePanel>
@@ -419,7 +421,6 @@
              </ScrollablePanel>
            </Accordion>
          </div>
-
          <AutomaticAccordion div class="flex flex-col gap-2">
            <VersionSummary
              v-if="filteredRelease"
@@ -489,11 +490,11 @@
                :color="route.name === 'type-id-version-version' ? `standard` : `brand`"
              >
                <button @click="(event) => downloadModal.show(event)">
-                  <DownloadIcon aria-hidden="true" />
-                  Download
+                  <DownloadIcon aria-hidden="true" /> Download
                </button>
              </ButtonStyled>
            </div>
+
            <div class="contents sm:hidden">
              <ButtonStyled
                size="large"
@@ -558,9 +559,11 @@
                      </button>
                    </ButtonStyled>
                  </div>
+
                  <p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
                    Modrinth Servers is the easiest way to play with your friends without hassle!
                  </p>
+
                  <p class="m-0 text-wrap text-sm font-bold text-primary">
                    Starting at $5<span class="text-xs"> / month</span>
                  </p>
@@ -625,6 +628,7 @@
                        {{ option.name }}
                      </Checkbox>
                    </div>
+
                    <div v-else class="menu-text">
                      <p class="popout-text">No collections found.</p>
                    </div>
@@ -632,8 +636,7 @@
                      class="btn collection-button"
                      @click="(event) => $refs.modal_collection.show(event)"
                    >
-                      <PlusIcon aria-hidden="true" />
-                      Create new collection
+                      <PlusIcon aria-hidden="true" /> Create new collection
                    </button>
                  </template>
                </PopoutMenu>
@@ -716,25 +719,14 @@
                :dropdown-id="`${baseId}-more-options`"
              >
                <MoreVerticalIcon aria-hidden="true" />
-                <template #analytics>
-                  <ChartIcon aria-hidden="true" />
-                  Analytics
-                </template>
+                <template #analytics> <ChartIcon aria-hidden="true" /> Analytics </template>
                <template #moderation-checklist>
-                  <ScaleIcon aria-hidden="true" />
-                  Review project
-                </template>
-                <template #report>
-                  <ReportIcon aria-hidden="true" />
-                  Report
-                </template>
-                <template #copy-id>
-                  <ClipboardCopyIcon aria-hidden="true" />
-                  Copy ID
+                  <ScaleIcon aria-hidden="true" /> Review project
                </template>
+                <template #report> <ReportIcon aria-hidden="true" /> Report </template>
+                <template #copy-id> <ClipboardCopyIcon aria-hidden="true" /> Copy ID </template>
                <template #copy-permalink>
-                  <ClipboardCopyIcon aria-hidden="true" />
-                  Copy permanent link
+                  <ClipboardCopyIcon aria-hidden="true" /> Copy permanent link
                </template>
              </OverflowMenu>
            </ButtonStyled>
@@ -760,6 +752,7 @@
          updates unless the author decides to unarchive the project.
        </MessageBanner>
      </div>
+
      <div class="normal-page__sidebar">
        <ProjectSidebarCompatibility
          :project="project"
@@ -789,6 +782,7 @@
        />
        <div class="card flex-card experimental-styles-within">
          <h2>{{ formatMessage(detailsMessages.title) }}</h2>
+
          <div class="details-list">
            <div class="details-list__item">
              <BookTextIcon aria-hidden="true" />
@@ -817,53 +811,48 @@
                <span v-else>{{ licenseIdDisplay }}</span>
              </div>
            </div>
+
            <div
              v-if="project.approved"
              v-tooltip="$dayjs(project.approved).format('MMMM D, YYYY [at] h:mm A')"
              class="details-list__item"
            >
              <CalendarIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.published, { date: publishedDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.published, { date: publishedDate }) }}</div>
            </div>
+
            <div
              v-else
              v-tooltip="$dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')"
              class="details-list__item"
            >
              <CalendarIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.created, { date: createdDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.created, { date: createdDate }) }}</div>
            </div>
+
            <div
              v-if="project.status === 'processing' && project.queued"
              v-tooltip="$dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')"
              class="details-list__item"
            >
              <ScaleIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.submitted, { date: submittedDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.submitted, { date: submittedDate }) }}</div>
            </div>
+
            <div
              v-if="versions.length > 0 && project.updated"
              v-tooltip="$dayjs(project.updated).format('MMMM D, YYYY [at] h:mm A')"
              class="details-list__item"
            >
              <VersionIcon aria-hidden="true" />
-              <div>
-                {{ formatMessage(detailsMessages.updated, { date: updatedDate }) }}
-              </div>
+              <div>{{ formatMessage(detailsMessages.updated, { date: updatedDate }) }}</div>
            </div>
          </div>
        </div>
      </div>
+
      <div class="normal-page__content">
-        <div class="overflow-x-auto">
-          <NavTabs :links="navLinks" class="mb-4" />
-        </div>
+        <div class="overflow-x-auto"><NavTabs :links="navLinks" class="mb-4" /></div>
        <NuxtPage
          v-model:project="project"
          v-model:versions="versions"
@@ -881,6 +870,7 @@
          @delete-version="deleteVersion"
        />
      </div>
+
      <div class="normal-page__ultimate-sidebar">
        <!-- Uncomment this to enable the old moderation checklist. -->
        <!-- <ModerationChecklist
@@ -895,6 +885,7 @@
      </div>
    </div>
  </div>
+
  <div
    v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
    class="moderation-checklist"
@@ -908,6 +899,7 @@
    />
  </div>
 </template>
+
 <script setup>
 import {
  BookmarkIcon,
@@ -1570,8 +1562,6 @@ async function copyPermalink() {

 const collapsedChecklist = ref(false);

-console.log(project.value.id);
-
 const showModerationChecklist = useLocalStorage(
  `show-moderation-checklist-${project.value.id}`,
  false,
@@ -1663,6 +1653,7 @@ const navLinks = computed(() => {
  ];
 });
 </script>
+
 <style lang="scss" scoped>
 .settings-header {
  display: flex;
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -1421,7 +1421,8 @@ useSeoMeta({
          width: 25rem;
          height: 25rem;
          opacity: 0.75;
-          background: radial-gradient(
+          background:
+            radial-gradient(
              50% 50% at 50% 50%,
              rgba(5, 206, 69, 0.19) 0%,
              rgba(15, 19, 49, 0.25) 100%
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -266,12 +266,12 @@ const getRangeOfMethod = (method) => {

 const maxWithdrawAmount = computed(() => {
  const interval = selectedMethod.value.interval;
-  return interval?.standard ? interval.standard.max : interval?.fixed?.values.slice(-1)[0] ?? 0;
+  return interval?.standard ? interval.standard.max : (interval?.fixed?.values.slice(-1)[0] ?? 0);
 });

 const minWithdrawAmount = computed(() => {
  const interval = selectedMethod.value.interval;
-  return interval?.standard ? interval.standard.min : interval?.fixed?.values?.[0] ?? fees.value;
+  return interval?.standard ? interval.standard.min : (interval?.fixed?.values?.[0] ?? fees.value);
 });

 const withdrawAccount = computed(() => {
--- a/apps/frontend/src/pages/plus.vue
+++ b/apps/frontend/src/pages/plus.vue
@@ -149,7 +149,8 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .main-hero {
-  background: linear-gradient(360deg, rgba(199, 138, 255, 0.2) 10.92%, var(--color-bg) 100%),
+  background:
+    linear-gradient(360deg, rgba(199, 138, 255, 0.2) 10.92%, var(--color-bg) 100%),
    var(--color-accent-contrast);
  margin-top: -5rem;
  padding: 11.25rem 1rem 8rem;
--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -1020,7 +1020,7 @@ const nodeUnavailableDetails = computed(() => [
  {
    label: "Error message",
    value: nodeAccessible.value
-      ? server.moduleErrors?.general?.error.message ?? "Unknown"
+      ? (server.moduleErrors?.general?.error.message ?? "Unknown")
      : "Unable to reach node. Ping test failed.",
    type: "block" as const,
  },
@@ -1277,7 +1277,8 @@ useHead({
  background-repeat: no-repeat;
  filter: blur(1rem);
  content: "";
-  background-image: linear-gradient(
+  background-image:
+    linear-gradient(
      to bottom,
      rgba(from var(--color-raised-bg) r g b / 0.2),
      rgb(from var(--color-raised-bg) r g b / 0.8)
--- a/apps/frontend/src/pages/servers/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/files.vue
@@ -101,7 +101,7 @@
                  <span :class="{ invisible: 'current_file' in op && !op.current_file }">
                    {{
                      "current_file" in op
-                        ? op.current_file?.split("/")?.pop() ?? "unknown"
+                        ? (op.current_file?.split("/")?.pop() ?? "unknown")
                        : "unknown"
                    }}
                  </span>