Pyro Integration

.gitignore

@@ -56,4 +56,8 @@ generated
 # app testing dir
 app-playground-data/*
 
+# soley because i need the PORT to be 3002 due to WSL stuff
+.env
+apps/frontend/.env
+
 .astro

apps/app/capabilities/plugins.json

@@ -2,9 +2,7 @@
   "identifier": "plugins",
   "description": "",
   "local": true,
-  "windows": [
-    "main"
-  ],
+  "windows": ["main"],
   "permissions": [
     "dialog:allow-open",
     "dialog:allow-confirm",

apps/frontend/.eslintrc.cjs

@@ -1,4 +1,7 @@
 module.exports = {
   root: true,
   extends: ["../../packages/eslint-config-custom/nuxt.js"],
+  rules: {
+    "import/no-unresolved": "off",
+  },
 };

apps/frontend/nuxt.config.ts

@@ -176,7 +176,6 @@ export default defineNuxtConfig({
         $fetch(`${API_URL}projects_random?count=60`, headers),
         $fetch(`${API_URL}search?limit=3&query=leave&index=relevance`, headers),
         $fetch(`${API_URL}search?limit=3&query=&index=updated`, headers),
-        // TODO: dehardcode
         $fetch(`${API_URL.replace("/v2/", "/_internal/")}billing/products`, headers),
       ]);
 
@@ -321,8 +320,10 @@ export default defineNuxtConfig({
     apiBaseUrl: process.env.BASE_URL ?? globalThis.BASE_URL ?? getApiUrl(),
     // @ts-ignore
     rateLimitKey: process.env.RATE_LIMIT_IGNORE_KEY ?? globalThis.RATE_LIMIT_IGNORE_KEY,
+    pyroBaseUrl: process.env.PYRO_BASE_URL,
     public: {
       apiBaseUrl: getApiUrl(),
+      pyroBaseUrl: process.env.PYRO_BASE_URL,
       siteUrl: getDomain(),
       production: isProduction(),
       featureFlagOverrides: getFeatureFlagOverrides(),
@@ -361,7 +362,7 @@ export default defineNuxtConfig({
       },
     },
   },
-  modules: ["@vintl/nuxt", "@nuxtjs/turnstile"],
+  modules: ["@vintl/nuxt", "@nuxtjs/turnstile", "@pinia/nuxt"],
   vintl: {
     defaultLocale: "en-US",
     locales: [
@@ -462,6 +463,7 @@ function getDomain() {
       return "https://modrinth.com";
     }
   } else {
-    return "http://localhost:3000";
+    const port = process.env.PORT || 3000;
+    return `http://localhost:${port}`;
   }
 }

apps/frontend/package.json

@@ -16,6 +16,7 @@
     "@formatjs/cli": "^6.2.12",
     "@nuxt/devtools": "^1.3.3",
     "@nuxtjs/turnstile": "^0.8.0",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^20.1.0",
     "@vintl/compact-number": "^2.0.5",
     "@vintl/how-ago": "^3.0.1",
@@ -38,8 +39,13 @@
     "@modrinth/assets": "workspace:*",
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
+    "@pinia/nuxt": "^0.5.1",
     "@vintl/vintl": "^4.4.1",
+    "@vueuse/core": "^11.1.0",
+    "ace-builds": "^1.36.2",
+    "ansi-to-html": "^0.7.2",
     "dayjs": "^1.11.7",
+    "dompurify": "^3.1.7",
     "floating-vue": "2.0.0-beta.20",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.7.0",
@@ -48,9 +54,12 @@
     "jszip": "^3.10.1",
     "markdown-it": "14.1.0",
     "pathe": "^1.1.2",
+    "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
-    "vue-multiselect": "3.0.0",
+    "vue-multiselect": "3.0.0-alpha.2",
+    "vue-typed-virtual-list": "^1.0.10",
+    "vue3-ace-editor": "^2.2.4",
     "vue3-apexcharts": "^1.5.2",
     "xss": "^1.0.14"
   }

apps/frontend/src/components/ui/Checkbox.vue

@@ -119,7 +119,7 @@ export default {
   }
 
   svg {
-    color: var(--color-brand-inverted);
+    color: var(--color-accent-contrast, var(--color-brand-inverted));
     stroke-width: 0.2rem;
     height: 0.8rem;
     width: 0.8rem;

apps/frontend/src/components/ui/CopyCode.vue

@@ -45,7 +45,7 @@ export default {
   margin: 0;
   padding: 0.25rem 0.5rem;
   background-color: var(--color-code-bg);
-  width: min-content;
+  width: fit-content;
   border-radius: 10px;
   user-select: text;
   transition:
@@ -55,7 +55,6 @@ export default {
     outline 0.2s ease-in-out;
 
   span {
-    max-width: 10rem;
     overflow: hidden;
     text-overflow: ellipsis;
   }

apps/frontend/src/components/ui/NavTabs.vue

@@ -1,6 +1,7 @@
 <template>
   <nav
-    class="experimental-styles-within relative flex w-fit overflow-clip rounded-full bg-bg-raised p-1 text-sm font-bold"
+    ref="scrollContainer"
+    class="experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
   >
     <NuxtLink
       v-for="(link, index) in filteredLinks"
@@ -18,7 +19,9 @@
       <span class="text-nowrap">{{ link.label }}</span>
     </NuxtLink>
     <div
-      :class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${subpageSelected ? 'bg-button-bg' : 'bg-brand-highlight'}`"
+      :class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${
+        subpageSelected ? 'bg-button-bg' : 'bg-brand-highlight'
+      }`"
       :style="{
         left: sliderLeftPx,
         top: sliderTopPx,
@@ -32,6 +35,8 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed, watch, onMounted } from "vue";
+
 const route = useNativeRoute();
 
 interface Tab {
@@ -47,12 +52,13 @@ const props = defineProps<{
   query?: string;
 }>();
 
+const scrollContainer = ref<HTMLElement | null>(null);
+
 const sliderLeft = ref(4);
 const sliderTop = ref(4);
 const sliderRight = ref(4);
 const sliderBottom = ref(4);
 const activeIndex = ref(-1);
-const oldIndex = ref(-1);
 const subpageSelected = ref(false);
 
 const filteredLinks = computed(() =>
@@ -63,6 +69,8 @@ const sliderTopPx = computed(() => `${sliderTop.value}px`);
 const sliderRightPx = computed(() => `${sliderRight.value}px`);
 const sliderBottomPx = computed(() => `${sliderBottom.value}px`);
 
+const tabLinkElements = ref();
+
 function pickLink() {
   let index = -1;
   subpageSelected.value = false;
@@ -86,16 +94,13 @@ function pickLink() {
   if (activeIndex.value !== -1) {
     startAnimation();
   } else {
-    oldIndex.value = -1;
     sliderLeft.value = 0;
     sliderRight.value = 0;
   }
 }
 
-const tabLinkElements = ref();
-
 function startAnimation() {
-  const el = tabLinkElements.value[activeIndex.value].$el;
+  const el = tabLinkElements.value[activeIndex.value]?.$el;
 
   if (!el || !el.offsetParent) return;
 
@@ -141,21 +146,19 @@ function startAnimation() {
 }
 
 onMounted(() => {
-  window.addEventListener("resize", pickLink);
   pickLink();
 });
 
-onUnmounted(() => {
-  window.removeEventListener("resize", pickLink);
-});
-
-watch(route, () => pickLink());
+watch(
+  () => route.path,
+  () => pickLink(),
+);
 </script>
+
 <style scoped>
 .navtabs-transition {
-  /* Delay on opacity is to hide any jankiness as the page loads */
   transition:
-    all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
+    all 150ms cubic-bezier(0.4, 0, 0.2, 1),
     opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
 }
 </style>

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

@@ -0,0 +1,95 @@
+<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>
+      <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"
+      />
+      <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>
+        </span>
+      </div>
+    </div>
+    <div class="mb-1 mt-4 flex justify-start gap-4">
+      <ButtonStyled color="brand">
+        <button :disabled="isCreating" @click="createBackup">
+          <PlusIcon />
+          Create backup
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hideModal">
+          <XIcon />
+          Cancel
+        </button>
+      </ButtonStyled>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { PlusIcon, XIcon, InfoIcon } from "@modrinth/assets";
+import type { Server } from "~/composables/pyroServers";
+
+const props = defineProps<{
+  server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
+}>();
+
+const emit = defineEmits(["backupCreated"]);
+
+const modal = ref<InstanceType<typeof NewModal>>();
+const input = ref<HTMLInputElement>();
+const isCreating = 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 focusInput = () => {
+  nextTick(() => {
+    setTimeout(() => {
+      input.value?.focus();
+    }, 100);
+  });
+};
+
+const hideModal = () => {
+  modal.value?.hide();
+  backupName.value = "";
+};
+
+const createBackup = async () => {
+  if (!backupName.value.trim()) {
+    backupName.value = `Backup #${newBackupAmount.value}`;
+  }
+
+  isCreating.value = true;
+  try {
+    await props.server.backups?.create(backupName.value);
+    await props.server.refresh();
+    hideModal();
+    emit("backupCreated", { success: true, message: "Backup created successfully" });
+  } catch (error) {
+    backupError.value = error instanceof Error ? error.message : String(error);
+    emit("backupCreated", { success: false, message: backupError.value });
+  } finally {
+    isCreating.value = false;
+  }
+};
+
+defineExpose({
+  show: () => modal.value?.show(),
+  hide: hideModal,
+});
+</script>