backup page fixes and new impls for new apis (#3437)

* wip: backup page fixes and new impls for new apis

* wip: more progress on backup fixes, almost done

* lint

* Backups cleanup

* Don't show create warning if creating

* Fix ongoing state

* Download support

* Support ready

* Disable auto backup button

* Use auth param for download of backups

* Disable install buttons when backup is in progress, add retrying

* Make prepare button have immediate feedback, don't refresh backups in all cases

* Intl:extract & rebase fixes

* Updated changelog and fix lint

---------

Co-authored-by: Prospector <prospectordev@gmail.com>

apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue

@@ -67,37 +67,27 @@
             Removes all data on your server, including your worlds, mods, and configuration files,
             then reinstalls it with the selected version.
           </div>
+          <div class="font-bold">This does not affect your backups, which are stored off-site.</div>
         </div>
 
-        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-          <div class="flex w-full flex-row items-center justify-between">
-            <label class="w-full text-lg font-bold text-contrast" for="backup-server-mrpack">
-              Backup server
-            </label>
-            <input
-              id="backup-server-mrpack"
-              v-model="backupServer"
-              class="switch stylized-toggle shrink-0"
-              type="checkbox"
-            />
-          </div>
-          <div>Creates a backup of your server before proceeding.</div>
-        </div>
+        <BackupWarning :backup-link="`/servers/manage/${props.server?.serverId}/backups`" />
       </div>
       <div class="mt-4 flex justify-start gap-4">
         <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
-          <button :disabled="canInstall" @click="handleReinstall">
+          <button
+            v-tooltip="backupInProgress ? formatMessage(backupInProgress.tooltip) : undefined"
+            :disabled="canInstall || backupInProgress"
+            @click="handleReinstall"
+          >
             <RightArrowIcon />
             {{
-              isBackingUp
-                ? "Backing up..."
-                : isMrpackModalSecondPhase
-                  ? "Erase and install"
-                  : loadingServerCheck
-                    ? "Loading..."
-                    : isDangerous
-                      ? "Erase and install"
-                      : "Install"
+              isMrpackModalSecondPhase
+                ? "Erase and install"
+                : loadingServerCheck
+                  ? "Loading..."
+                  : isDangerous
+                    ? "Erase and install"
+                    : "Install"
             }}
           </button>
         </ButtonStyled>
@@ -124,12 +114,14 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
 import { UploadIcon, RightArrowIcon, XIcon, ServerIcon } from "@modrinth/assets";
 import type { Server } from "~/composables/pyroServers";
+import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
 
 const props = defineProps<{
   server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+  backupInProgress?: BackupInProgressReason;
 }>();
 
 const emit = defineEmits<{
@@ -139,9 +131,7 @@ const emit = defineEmits<{
 const mrpackModal = ref();
 const isMrpackModalSecondPhase = ref(false);
 const hardReset = ref(false);
-const backupServer = ref(false);
 const isLoading = ref(false);
-const isBackingUp = ref(false);
 const loadingServerCheck = ref(false);
 const mrpackFile = ref<File | null>(null);
 
@@ -156,64 +146,12 @@ const uploadMrpack = (event: Event) => {
   mrpackFile.value = target.files[0];
 };
 
-const performBackup = async (): Promise<boolean> => {
-  try {
-    const date = new Date();
-    const format = date.toLocaleString(navigator.language || "en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-      hour: "numeric",
-      minute: "numeric",
-      second: "numeric",
-      timeZoneName: "short",
-    });
-    const backupName = `Reinstallation - ${format}`;
-    isLoading.value = true;
-    const backupId = await props.server.backups?.create(backupName);
-    isBackingUp.value = true;
-    let attempts = 0;
-    while (true) {
-      attempts++;
-      if (attempts > 100) {
-        addNotification({
-          group: "server",
-          title: "Backup Failed",
-          text: "An unexpected error occurred while backing up. Please try again later.",
-        });
-        return false;
-      }
-      await props.server.refresh(["backups"]);
-      const backups = await props.server.backups?.data;
-      const backup = backupId ? backups?.find((x) => x.id === backupId) : undefined;
-      if (backup && !backup.ongoing) {
-        isBackingUp.value = false;
-        break;
-      }
-      await new Promise((resolve) => setTimeout(resolve, 5000));
-    }
-    return true;
-  } catch {
-    addNotification({
-      group: "server",
-      title: "Backup Failed",
-      text: "An unexpected error occurred while backing up. Please try again later.",
-    });
-    return false;
-  }
-};
-
 const handleReinstall = async () => {
-  if (hardReset.value && !backupServer.value && !isMrpackModalSecondPhase.value) {
+  if (hardReset.value && !isMrpackModalSecondPhase.value) {
     isMrpackModalSecondPhase.value = true;
     return;
   }
 
-  if (backupServer.value && !(await performBackup())) {
-    isLoading.value = false;
-    return;
-  }
-
   isLoading.value = true;
 
   try {
@@ -259,7 +197,6 @@ const handleReinstall = async () => {
 
 const onShow = () => {
   hardReset.value = false;
-  backupServer.value = false;
   isMrpackModalSecondPhase.value = false;
   loadingServerCheck.value = false;
   isLoading.value = false;