Add server unzipping (#3622)

* Initial unzipping feature

* Remove explicit backup provider naming from frontend

* CF placeholder

* Use regex for CF links

* Lint

* Add unzip warning for conflicting files, fix hydration error

* Adjust conflict modal ui

* Fix old queued ops sticking around, remove conflict warning

* Add vscode "editor.detectIndentation": true

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

@@ -0,0 +1,159 @@
+<template>
+  <NewModal
+    ref="modal"
+    :header="cf ? `Installing a CurseForge pack` : `Uploading .zip contents from URL`"
+  >
+    <form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
+      <div class="flex flex-col gap-2">
+        <div class="font-bold text-contrast">
+          {{ cf ? `How to get the modpack version's URL` : "URL of .zip file" }}
+        </div>
+        <ol v-if="cf" class="mb-1 mt-0 flex flex-col gap-1 pl-8 leading-normal text-secondary">
+          <li>
+            <a
+              href="https://www.curseforge.com/minecraft/search?page=1&pageSize=40&sortBy=relevancy&class=modpacks"
+              class="inline-flex font-semibold text-[#F16436] transition-all hover:underline active:brightness-[--hover-brightness]"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Find the CurseForge modpack
+              <ExternalIcon class="ml-1 inline size-4" stroke-width="3" />
+            </a>
+            you'd like to install on your server.
+          </li>
+          <li>
+            On the modpack's page, go to the
+            <span class="font-semibold text-primary">"Files"</span> tab, and
+            <span class="font-semibold text-primary">select the version</span> of the modpack you
+            want to install.
+          </li>
+          <li>
+            <span class="font-semibold text-primary">Copy the URL</span> of the version you want to
+            install, and paste it in the box below.
+          </li>
+        </ol>
+        <p v-else class="mb-1 mt-0">Copy and paste the direct download URL of a .zip file.</p>
+        <input
+          ref="urlInput"
+          v-model="url"
+          autofocus
+          :disabled="submitted"
+          type="text"
+          data-1p-ignore
+          data-lpignore="true"
+          data-protonpass-ignore="true"
+          required
+          :placeholder="
+            cf
+              ? 'https://www.curseforge.com/minecraft/modpacks/.../files/6412259'
+              : 'https://www.example.com/.../modpack-name-1.0.2.zip'
+          "
+          autocomplete="off"
+        />
+        <div v-if="submitted && error" class="text-red">{{ error }}</div>
+      </div>
+      <BackupWarning :backup-link="`/servers/manage/${props.server.serverId}/backups`" />
+      <div class="flex justify-start gap-2">
+        <ButtonStyled color="brand">
+          <button v-tooltip="error" :disabled="submitted || !!error" type="submit">
+            <SpinnerIcon v-if="submitted" class="animate-spin" />
+            <DownloadIcon v-else class="h-5 w-5" />
+            {{ submitted ? "Installing..." : "Install" }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button type="button" @click="hide">
+            <XIcon class="h-5 w-5" />
+            {{ submitted ? "Close" : "Cancel" }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </form>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ExternalIcon, SpinnerIcon, DownloadIcon, XIcon } from "@modrinth/assets";
+import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
+import { ref, computed, nextTick } from "vue";
+import { handleError, type Server } from "~/composables/pyroServers.ts";
+
+const cf = ref(false);
+
+const props = defineProps<{
+  server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const modal = ref<typeof NewModal>();
+const urlInput = ref<HTMLInputElement | null>(null);
+const url = ref("");
+const submitted = ref(false);
+
+const trimmedUrl = computed(() => url.value.trim());
+
+const regex = /https:\/\/(www\.)?curseforge\.com\/minecraft\/modpacks\/[^/]+\/files\/\d+/;
+
+const error = computed(() => {
+  if (trimmedUrl.value.length === 0) {
+    return "URL is required.";
+  }
+  if (cf.value && !regex.test(trimmedUrl.value)) {
+    return "URL must be a CurseForge modpack version URL.";
+  } else if (!cf.value && !trimmedUrl.value.includes("/")) {
+    return "URL must be valid.";
+  }
+  return "";
+});
+
+const handleSubmit = async () => {
+  submitted.value = true;
+  if (!error.value) {
+    // hide();
+    try {
+      const dry = await props.server.fs?.extractFile(trimmedUrl.value, true, true);
+
+      if (!cf.value || dry.modpack_name) {
+        await props.server.fs?.extractFile(trimmedUrl.value, true, false, true);
+        hide();
+      } else {
+        submitted.value = false;
+        handleError(
+          new ServersError(
+            "Could not find CurseForge modpack at that URL.",
+            undefined,
+            undefined,
+            undefined,
+            {
+              context: "Error installing modpack",
+              error: `url: ${url.value}`,
+              description: "Could not find CurseForge modpack at that URL.",
+            },
+          ),
+        );
+      }
+    } catch (error) {
+      submitted.value = false;
+      console.error("Error installing:", error);
+      handleError(error);
+    }
+  }
+};
+
+const show = (isCf: boolean) => {
+  cf.value = isCf;
+  url.value = "";
+  submitted.value = false;
+  modal.value?.show();
+  nextTick(() => {
+    setTimeout(() => {
+      urlInput.value?.focus();
+    }, 100);
+  });
+};
+
+const hide = () => {
+  modal.value?.hide();
+};
+
+defineExpose({ show, hide });
+</script>