From d7f1029b5428e20dceab4582ce37ddd40c48ba54 Mon Sep 17 00:00:00 2001
From: IMB11 <hendersoncal117@gmail.com>
Date: Fri, 8 Aug 2025 20:37:06 +0100
Subject: [PATCH] feat: add simple mode editor to the moderation checklist
 (#4127)

* fix: remove prettier, not needed.

* feat: simple/advanced mode for the checklist
---
 .../checklist/ModerationChecklist.vue         | 40 ++++++++++++-------
 packages/assets/generated-icons.ts            |  4 ++
 packages/assets/icons/toggle-left.svg         |  1 +
 packages/assets/icons/toggle-right.svg        |  1 +
 4 files changed, 32 insertions(+), 14 deletions(-)
 create mode 100644 packages/assets/icons/toggle-left.svg
 create mode 100644 packages/assets/icons/toggle-right.svg

diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
index 0bb5c736..63180dfb 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
@@ -50,13 +50,35 @@
         </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">
@@ -324,6 +346,8 @@ import {
   CheckIcon,
   KeyboardIcon,
   EyeOffIcon,
+  ToggleLeftIcon,
+  ToggleRightIcon,
 } from "@modrinth/assets";
 import {
   checklist,
@@ -368,7 +392,6 @@ 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";
@@ -392,6 +415,7 @@ const isModpackPermissionsStage = computed(() => {
   return currentStageObj.value.id === "modpack-permissions";
 });
 
+const useSimpleEditor = ref(false);
 const message = ref("");
 const generatedMessage = ref(false);
 const loadingMessage = ref(false);
@@ -1118,19 +1142,7 @@ 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;
-    }
+    message.value = fullMessage;
 
     generatedMessage.value = true;
   } catch (error) {
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index f0104415..88958ec0 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -169,6 +169,8 @@ 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'
@@ -362,6 +364,8 @@ 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
diff --git a/packages/assets/icons/toggle-left.svg b/packages/assets/icons/toggle-left.svg
new file mode 100644
index 00000000..8ac77cfa
--- /dev/null
+++ b/packages/assets/icons/toggle-left.svg
@@ -0,0 +1 @@
+<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>
\ No newline at end of file
diff --git a/packages/assets/icons/toggle-right.svg b/packages/assets/icons/toggle-right.svg
new file mode 100644
index 00000000..7321f07f
--- /dev/null
+++ b/packages/assets/icons/toggle-right.svg
@@ -0,0 +1 @@
+<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>
\ No newline at end of file