tweak(frontend): improve Nuxt build state generation logging and caching (#4133)

apps/frontend/nuxt.config.ts

@@ -143,8 +143,13 @@ export default defineNuxtConfig({
         state.lastGenerated &&
         new Date(state.lastGenerated).getTime() + TTL > new Date().getTime() &&
         // ...but only if the API URL is the same
-        state.apiUrl === API_URL
+        state.apiUrl === API_URL &&
+        // ...and if no errors were caught during the last generation
+        (state.errors ?? []).length === 0
       ) {
+        console.log(
+          "Tags already recently generated. Delete apps/frontend/generated/state.json to force regeneration.",
+        );
         return;
       }
 

apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue

@@ -50,35 +50,13 @@
         </div>
         <div v-else-if="generatedMessage">
           <div>
-            <ButtonStyled>
-              <button class="mb-2" @click="useSimpleEditor = !useSimpleEditor">
-                <template v-if="!useSimpleEditor">
-                  <ToggleLeftIcon aria-hidden="true" />
-                  Use simple mode
-                </template>
-                <template v-else>
-                  <ToggleRightIcon aria-hidden="true" />
-                  Use advanced mode
-                </template>
-              </button>
-            </ButtonStyled>
             <MarkdownEditor
-              v-if="!useSimpleEditor"
               v-model="message"
               :max-height="400"
               placeholder="No message generated."
               :disabled="false"
               :heading-buttons="false"
             />
-            <textarea
-              v-else
-              v-model="message"
-              type="text"
-              class="bg-bg-input h-[400px] w-full rounded-lg border border-solid border-divider px-3 py-2 font-mono text-base"
-              placeholder="No message generated."
-              autocomplete="off"
-              @input="persistState"
-            />
           </div>
         </div>
         <div v-else-if="isModpackPermissionsStage">
@@ -346,8 +324,6 @@ import {
   CheckIcon,
   KeyboardIcon,
   EyeOffIcon,
-  ToggleLeftIcon,
-  ToggleRightIcon,
 } from "@modrinth/assets";
 import {
   checklist,
@@ -392,6 +368,7 @@ import {
   type Stage,
   finalPermissionMessages,
 } from "@modrinth/moderation";
+import * as prettier from "prettier";
 import ModpackPermissionsFlow from "./ModpackPermissionsFlow.vue";
 import KeybindsModal from "./ChecklistKeybindsModal.vue";
 import { useModerationStore } from "~/store/moderation.ts";
@@ -415,7 +392,6 @@ const isModpackPermissionsStage = computed(() => {
   return currentStageObj.value.id === "modpack-permissions";
 });
 
-const useSimpleEditor = ref(false);
 const message = ref("");
 const generatedMessage = ref(false);
 const loadingMessage = ref(false);
@@ -1142,7 +1118,19 @@ async function generateMessage() {
       }
     }
 
+    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) {

packages/assets/generated-icons.ts

@@ -169,8 +169,6 @@ import _TerminalSquareIcon from './icons/terminal-square.svg?component'
 import _TestIcon from './icons/test.svg?component'
 import _TextQuoteIcon from './icons/text-quote.svg?component'
 import _TimerIcon from './icons/timer.svg?component'
-import _ToggleLeftIcon from './icons/toggle-left.svg?component'
-import _ToggleRightIcon from './icons/toggle-right.svg?component'
 import _TransferIcon from './icons/transfer.svg?component'
 import _TrashIcon from './icons/trash.svg?component'
 import _TriangleAlertIcon from './icons/triangle-alert.svg?component'
@@ -364,8 +362,6 @@ export const TerminalSquareIcon = _TerminalSquareIcon
 export const TestIcon = _TestIcon
 export const TextQuoteIcon = _TextQuoteIcon
 export const TimerIcon = _TimerIcon
-export const ToggleLeftIcon = _ToggleLeftIcon
-export const ToggleRightIcon = _ToggleRightIcon
 export const TransferIcon = _TransferIcon
 export const TrashIcon = _TrashIcon
 export const TriangleAlertIcon = _TriangleAlertIcon

packages/assets/icons/toggle-left.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-left-icon lucide-toggle-left"><circle cx="9" cy="12" r="3"/><rect width="20" height="14" x="2" y="5" rx="7"/></svg>

packages/assets/icons/toggle-right.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right-icon lucide-toggle-right"><circle cx="15" cy="12" r="3"/><rect width="20" height="14" x="2" y="5" rx="7"/></svg>