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/BackupCreateModal.vue

@@ -1,29 +1,32 @@
 <template>
   <NewModal ref="modal" header="Creating backup" @show="focusInput">
     <div class="flex flex-col gap-2 md:w-[600px]">
-      <div class="font-semibold text-contrast">Name</div>
+      <label for="backup-name-input">
+        <span class="text-lg font-semibold text-contrast"> Name </span>
+      </label>
       <input
+        id="backup-name-input"
         ref="input"
         v-model="backupName"
         type="text"
         class="bg-bg-input w-full rounded-lg p-4"
-        placeholder="e.g. Before 1.21"
-        maxlength="64"
+        :placeholder="`Backup #${newBackupAmount}`"
+        maxlength="48"
       />
-      <div class="flex items-center gap-2">
-        <InfoIcon class="hidden sm:block" />
-        <span class="text-sm text-secondary">
-          If left empty, the backup name will default to
-          <span class="font-semibold"> Backup #{{ newBackupAmount }}</span>
+      <div v-if="nameExists && !isCreating" class="flex items-center gap-1">
+        <IssuesIcon class="hidden text-orange sm:block" />
+        <span class="text-sm text-orange">
+          You already have a backup named '<span class="font-semibold">{{ trimmedName }}</span
+          >'
         </span>
       </div>
       <div v-if="isRateLimited" class="mt-2 text-sm text-red">
         You're creating backups too fast. Please wait a moment before trying again.
       </div>
     </div>
-    <div class="mb-1 mt-4 flex justify-start gap-4">
+    <div class="mt-2 flex justify-start gap-2">
       <ButtonStyled color="brand">
-        <button :disabled="isCreating" @click="createBackup">
+        <button :disabled="isCreating || nameExists" @click="createBackup">
           <PlusIcon />
           Create backup
         </button>
@@ -41,24 +44,30 @@
 <script setup lang="ts">
 import { ref, nextTick, computed } from "vue";
 import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { PlusIcon, XIcon, InfoIcon } from "@modrinth/assets";
+import { IssuesIcon, PlusIcon, XIcon } from "@modrinth/assets";
 
 const props = defineProps<{
   server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
 }>();
 
-const emit = defineEmits(["backupCreated"]);
-
 const modal = ref<InstanceType<typeof NewModal>>();
 const input = ref<HTMLInputElement>();
 const isCreating = ref(false);
 const isRateLimited = ref(false);
-const backupError = ref<string | null>(null);
 const backupName = ref("");
 const newBackupAmount = computed(() =>
   props.server.backups?.data?.length === undefined ? 1 : props.server.backups?.data?.length + 1,
 );
 
+const trimmedName = computed(() => backupName.value.trim());
+
+const nameExists = computed(() => {
+  if (!props.server.backups?.data) return false;
+  return props.server.backups.data.some(
+    (backup) => backup.name.trim().toLowerCase() === trimmedName.value.toLowerCase(),
+  );
+});
+
 const focusInput = () => {
   nextTick(() => {
     setTimeout(() => {
@@ -67,30 +76,38 @@ const focusInput = () => {
   });
 };
 
+function show() {
+  backupName.value = "";
+  isCreating.value = false;
+  modal.value?.show();
+}
+
 const hideModal = () => {
   modal.value?.hide();
-  backupName.value = "";
 };
 
 const createBackup = async () => {
-  if (!backupName.value.trim()) {
+  if (backupName.value.trim().length === 0) {
     backupName.value = `Backup #${newBackupAmount.value}`;
   }
 
   isCreating.value = true;
   isRateLimited.value = false;
   try {
-    await props.server.backups?.create(backupName.value);
-    await props.server.refresh();
+    await props.server.backups?.create(trimmedName.value);
     hideModal();
-    emit("backupCreated", { success: true, message: "Backup created successfully" });
+    await props.server.refresh();
   } catch (error) {
     if (error instanceof PyroFetchError && error.statusCode === 429) {
       isRateLimited.value = true;
-      backupError.value = "You're creating backups too fast.";
+      addNotification({
+        type: "error",
+        title: "Error creating backup",
+        text: "You're creating backups too fast.",
+      });
     } else {
-      backupError.value = error instanceof Error ? error.message : String(error);
-      emit("backupCreated", { success: false, message: backupError.value });
+      const message = error instanceof Error ? error.message : String(error);
+      addNotification({ type: "error", title: "Error creating backup", text: message });
     }
   } finally {
     isCreating.value = false;
@@ -98,7 +115,7 @@ const createBackup = async () => {
 };
 
 defineExpose({
-  show: () => modal.value?.show(),
+  show,
   hide: hideModal,
 });
 </script>