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

@@ -1,86 +1,45 @@
 <template>
-  <NewModal ref="modal" danger header="Deleting backup">
-    <div class="flex flex-col gap-4">
-      <div class="relative flex w-full flex-col gap-2 rounded-2xl bg-[#0e0e0ea4] p-6">
-        <div class="text-2xl font-extrabold text-contrast">
-          {{ backupName }}
-        </div>
-        <div class="flex gap-2 font-semibold text-contrast">
-          <CalendarIcon />
-          {{ formattedDate }}
-        </div>
-      </div>
-    </div>
-    <div class="mb-1 mt-4 flex justify-end gap-4">
-      <ButtonStyled color="red">
-        <button :disabled="isDeleting" @click="deleteBackup">
-          <TrashIcon />
-          Delete backup
-        </button>
-      </ButtonStyled>
-      <ButtonStyled type="transparent">
-        <button @click="hideModal">Cancel</button>
-      </ButtonStyled>
-    </div>
-  </NewModal>
+  <ConfirmModal
+    ref="modal"
+    danger
+    title="Are you sure you want to delete this backup?"
+    proceed-label="Delete backup"
+    :confirmation-text="currentBackup?.name ?? 'null'"
+    has-to-type
+    @proceed="emit('delete', currentBackup)"
+  >
+    <BackupItem
+      v-if="currentBackup"
+      :backup="currentBackup"
+      preview
+      class="border-px border-solid border-button-border"
+    />
+  </ConfirmModal>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { TrashIcon, CalendarIcon } from "@modrinth/assets";
+import { ConfirmModal } from "@modrinth/ui";
 import type { Server } from "~/composables/pyroServers";
+import BackupItem from "~/components/ui/servers/BackupItem.vue";
 
-const props = defineProps<{
-  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
-  backupId: string;
-  backupName: string;
-  backupCreatedAt: string;
+defineProps<{
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
 }>();
 
-const emit = defineEmits(["backupDeleted"]);
+const emit = defineEmits<{
+  (e: "delete", backup: Backup | undefined): void;
+}>();
 
-const modal = ref<InstanceType<typeof NewModal>>();
-const isDeleting = ref(false);
-const backupError = ref<string | null>(null);
+const modal = ref<InstanceType<typeof ConfirmModal>>();
+const currentBackup = ref<Backup | undefined>(undefined);
 
-const formattedDate = computed(() => {
-  return new Date(props.backupCreatedAt).toLocaleString("en-US", {
-    month: "numeric",
-    day: "numeric",
-    year: "2-digit",
-    hour: "numeric",
-    minute: "numeric",
-    hour12: true,
-  });
-});
-
-const hideModal = () => {
-  modal.value?.hide();
-};
-
-const deleteBackup = async () => {
-  if (!props.backupId) {
-    emit("backupDeleted", { success: false, message: "No backup selected" });
-    return;
-  }
-
-  isDeleting.value = true;
-  try {
-    await props.server.backups?.delete(props.backupId);
-    await props.server.refresh();
-    hideModal();
-    emit("backupDeleted", { success: true, message: "Backup deleted successfully" });
-  } catch (error) {
-    backupError.value = error instanceof Error ? error.message : String(error);
-    emit("backupDeleted", { success: false, message: backupError.value });
-  } finally {
-    isDeleting.value = false;
-  }
-};
+function show(backup: Backup) {
+  currentBackup.value = backup;
+  modal.value?.show();
+}
 
 defineExpose({
-  show: () => modal.value?.show(),
-  hide: hideModal,
+  show,
 });
 </script>