From 7e9b84b69f56f7d03ad1e7e68cb68a2685e00b22 Mon Sep 17 00:00:00 2001
From: TheWander02 <48934424+thewander02@users.noreply.github.com>
Date: Tue, 8 Oct 2024 21:40:47 -0700
Subject: [PATCH] chore: finalize pre-remote switch

yes this key is long since changed.
---
 .../src/components/ui/servers/LoaderIcon.vue  |   6 +-
 .../components/ui/servers/PoweredByPyro.vue   |   2 +-
 .../src/components/ui/servers/PyroLoading.vue |  12 +-
 .../ui/servers/ServerInstallStatusPill.vue    |   8 +-
 apps/app-frontend/src/store/websocket.ts      |   6 +-
 apps/app-frontend/src/types/servers.ts        | 206 +++++++++---------
 apps/frontend/nuxt.config.ts                  |   2 +
 .../components/ui/servers/ServerGameLabel.vue |  11 +-
 .../components/ui/servers/ServerListing.vue   |   8 +-
 .../ui/servers/ServerLoaderLabel.vue          |  11 +-
 .../components/ui/servers/ServerModLabel.vue  |  25 ---
 .../ui/servers/ServerSubdomainLabel.vue       |  11 +-
 .../src/pages/servers/manage/[id].vue         |   1 -
 .../servers/manage/[id]/content/datapacks.vue |  43 +---
 .../servers/manage/[id]/content/index.vue     |   1 -
 .../src/pages/servers/manage/[id]/files.vue   |   4 +-
 .../src/pages/servers/manage/[id]/options.vue |  11 +-
 .../servers/manage/[id]/options/loader.vue    | 185 ++++++++++------
 .../servers/manage/[id]/options/network.vue   |  51 ++---
 .../servers/manage/[id]/options/startup.vue   |  16 +-
 .../src/pages/servers/new/[id]/index.vue      |   2 +-
 apps/frontend/src/stores/servers.ts           |  61 +++---
 turbo.json                                    |   1 +
 23 files changed, 377 insertions(+), 307 deletions(-)
 delete mode 100644 apps/frontend/src/components/ui/servers/ServerModLabel.vue

diff --git a/apps/app-frontend/src/components/ui/servers/LoaderIcon.vue b/apps/app-frontend/src/components/ui/servers/LoaderIcon.vue
index 3f99618b4..adcbdbc25 100644
--- a/apps/app-frontend/src/components/ui/servers/LoaderIcon.vue
+++ b/apps/app-frontend/src/components/ui/servers/LoaderIcon.vue
@@ -169,12 +169,12 @@
 </template>
 
 <script setup lang="ts">
-import { LoaderIcon } from "@modrinth/assets";
+import { LoaderIcon } from '@modrinth/assets'
 
 defineProps({
   loader: {
     type: String,
-    default: "",
+    default: '',
   },
-});
+})
 </script>
diff --git a/apps/app-frontend/src/components/ui/servers/PoweredByPyro.vue b/apps/app-frontend/src/components/ui/servers/PoweredByPyro.vue
index de1832954..1ae3cdeb2 100644
--- a/apps/app-frontend/src/components/ui/servers/PoweredByPyro.vue
+++ b/apps/app-frontend/src/components/ui/servers/PoweredByPyro.vue
@@ -6,5 +6,5 @@
 </template>
 
 <script setup lang="ts">
-import { PyroIcon } from "@modrinth/assets";
+import { PyroIcon } from '@modrinth/assets'
 </script>
diff --git a/apps/app-frontend/src/components/ui/servers/PyroLoading.vue b/apps/app-frontend/src/components/ui/servers/PyroLoading.vue
index 3c72d239b..5cc8187fe 100644
--- a/apps/app-frontend/src/components/ui/servers/PyroLoading.vue
+++ b/apps/app-frontend/src/components/ui/servers/PyroLoading.vue
@@ -11,16 +11,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { PyroIcon } from "@modrinth/assets";
+import { ref, onMounted } from 'vue'
+import { PyroIcon } from '@modrinth/assets'
 
-const showLoading = ref(false);
+const showLoading = ref(false)
 
 onMounted(() => {
   setTimeout(() => {
-    showLoading.value = true;
-  }, 5000);
-});
+    showLoading.value = true
+  }, 5000)
+})
 </script>
 
 <style>
diff --git a/apps/app-frontend/src/components/ui/servers/ServerInstallStatusPill.vue b/apps/app-frontend/src/components/ui/servers/ServerInstallStatusPill.vue
index 08a223cd7..3b8e69af2 100644
--- a/apps/app-frontend/src/components/ui/servers/ServerInstallStatusPill.vue
+++ b/apps/app-frontend/src/components/ui/servers/ServerInstallStatusPill.vue
@@ -35,11 +35,11 @@
 </template>
 
 <script setup lang="ts">
-import { XIcon } from "@modrinth/assets";
+import { XIcon } from '@modrinth/assets'
 
-export type StatusState = "Installing" | "Failed";
+export type StatusState = 'Installing' | 'Failed'
 
 defineProps<{
-  state: StatusState;
-}>();
+  state: StatusState
+}>()
 </script>
diff --git a/apps/app-frontend/src/store/websocket.ts b/apps/app-frontend/src/store/websocket.ts
index 8218cff64..6edb37f29 100644
--- a/apps/app-frontend/src/store/websocket.ts
+++ b/apps/app-frontend/src/store/websocket.ts
@@ -183,7 +183,11 @@ export const useWebSocketStore = defineStore('webSocket', () => {
     }
   }
 
-  async function sendPowerAction(auth: SessionToken, serverId: string, action: 'restart' | 'start' | 'stop' | 'kill') {
+  async function sendPowerAction(
+    auth: SessionToken,
+    serverId: string,
+    action: 'restart' | 'start' | 'stop' | 'kill',
+  ) {
     const connection = getOrCreateConnection(serverId)
     const actionName = action.charAt(0).toUpperCase() + action.slice(1)
     console.log(`${actionName}ing server ${serverId}`)
diff --git a/apps/app-frontend/src/types/servers.ts b/apps/app-frontend/src/types/servers.ts
index 4d668524e..2bc0e03c0 100644
--- a/apps/app-frontend/src/types/servers.ts
+++ b/apps/app-frontend/src/types/servers.ts
@@ -1,145 +1,145 @@
 export interface Mod {
-  id: string;
-  filename: string;
+  id: string
+  filename: string
   modrinth_ids: {
-    project_id: string;
-    version_id: string;
-  };
+    project_id: string
+    version_id: string
+  }
 }
 
 interface License {
-  id: string;
-  name: string;
-  url: string;
+  id: string
+  name: string
+  url: string
 }
 
 interface DonationUrl {
-  id: string;
-  platform: string;
-  url: string;
+  id: string
+  platform: string
+  url: string
 }
 
 interface GalleryItem {
-  url: string;
-  featured: boolean;
-  title: string;
-  description: string;
-  created: string;
-  ordering: number;
+  url: string
+  featured: boolean
+  title: string
+  description: string
+  created: string
+  ordering: number
 }
 
 export interface Project {
-  slug: string;
-  title: string;
-  description: string;
-  categories: string[];
-  client_side: "required" | "optional";
-  server_side: "required" | "optional";
-  body: string;
-  status: "approved" | "pending" | "rejected";
-  requested_status: "approved" | "pending" | "rejected";
-  additional_categories: string[];
-  issues_url: string;
-  source_url: string;
-  wiki_url: string;
-  discord_url: string;
-  donation_urls: DonationUrl[];
-  project_type: "mod" | "resourcepack" | "map" | "plugin";
-  downloads: number;
-  icon_url: string;
-  color: number;
-  thread_id: string;
-  monetization_status: "monetized" | "non-monetized";
-  id: string;
-  team: string;
-  body_url: string | null;
-  moderator_message: string | null;
-  published: string;
-  updated: string;
-  approved: string;
-  queued: string;
-  followers: number;
-  license: License;
-  versions: string[];
-  game_versions: string[];
-  loaders: string[];
-  gallery: GalleryItem[];
+  slug: string
+  title: string
+  description: string
+  categories: string[]
+  client_side: 'required' | 'optional'
+  server_side: 'required' | 'optional'
+  body: string
+  status: 'approved' | 'pending' | 'rejected'
+  requested_status: 'approved' | 'pending' | 'rejected'
+  additional_categories: string[]
+  issues_url: string
+  source_url: string
+  wiki_url: string
+  discord_url: string
+  donation_urls: DonationUrl[]
+  project_type: 'mod' | 'resourcepack' | 'map' | 'plugin'
+  downloads: number
+  icon_url: string
+  color: number
+  thread_id: string
+  monetization_status: 'monetized' | 'non-monetized'
+  id: string
+  team: string
+  body_url: string | null
+  moderator_message: string | null
+  published: string
+  updated: string
+  approved: string
+  queued: string
+  followers: number
+  license: License
+  versions: string[]
+  game_versions: string[]
+  loaders: string[]
+  gallery: GalleryItem[]
 }
 
 export interface Version extends Project {
-  project_id: string;
+  project_id: string
 }
 
 export interface ServerBackup {
-  id: string;
-  name: string;
-  created_at: string;
+  id: string
+  name: string
+  created_at: string
 }
 
 export interface Server {
-  server_id: string;
-  name: string;
-  state: string;
+  server_id: string
+  name: string
+  state: string
   net: {
-    ip: string;
-    port: number;
-    domain: string;
-  };
-  modpack: string | null;
-  modpack_id: string | null;
-  project: Project | null;
-  backups: ServerBackup[];
-  game: string;
-  loader: string | null;
-  loader_version: string | null;
-  mc_version: string | null;
-  mods: Mod[];
-  backup_quota: number;
-  used_backup_quota: number;
+    ip: string
+    port: number
+    domain: string
+  }
+  modpack: string | null
+  modpack_id: string | null
+  project: Project | null
+  backups: ServerBackup[]
+  game: string
+  loader: string | null
+  loader_version: string | null
+  mc_version: string | null
+  mods: Mod[]
+  backup_quota: number
+  used_backup_quota: number
 }
 
 export interface WSAuth {
-  url: string;
-  token: string;
+  url: string
+  token: string
 }
 
-export type ServerState = "running" | "stopped" | "crashed";
+export type ServerState = 'running' | 'stopped' | 'crashed'
 export type WebsocketEventType =
-  | "log"
-  | "auth"
-  | "stats"
-  | "power-state"
-  | "auth-expiring"
-  | "auth-incorrect"
-  | (string & {});
+  | 'log'
+  | 'auth'
+  | 'stats'
+  | 'power-state'
+  | 'auth-expiring'
+  | 'auth-incorrect'
+  | (string & {})
 
 export interface WSEvent {
-  event: WebsocketEventType;
-  message: string;
-  state: ServerState;
+  event: WebsocketEventType
+  message: string
+  state: ServerState
 }
 
 export interface Servers {
-  servers: Server[];
+  servers: Server[]
 }
 
 export interface Stats {
   current: {
-    cpu_percent: number;
-    ram_usage_bytes: number;
-    ram_total_bytes: number;
-    storage_usage_bytes: number;
-    storage_total_bytes: number;
-  };
+    cpu_percent: number
+    ram_usage_bytes: number
+    ram_total_bytes: number
+    storage_usage_bytes: number
+    storage_total_bytes: number
+  }
   past: {
-    cpu_percent: number;
-    ram_usage_bytes: number;
-    ram_total_bytes: number;
-    storage_usage_bytes: number;
-    storage_total_bytes: number;
-  };
+    cpu_percent: number
+    ram_usage_bytes: number
+    ram_total_bytes: number
+    storage_usage_bytes: number
+    storage_total_bytes: number
+  }
   graph: {
-    cpu: number[];
-    ram: number[];
-  };
+    cpu: number[]
+    ram: number[]
+  }
 }
diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts
index 41d265cf8..ce66951ae 100644
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -324,10 +324,12 @@ export default defineNuxtConfig({
     rateLimitKey: process.env.RATE_LIMIT_IGNORE_KEY ?? globalThis.RATE_LIMIT_IGNORE_KEY,
     pyroBaseUrl: process.env.PYRO_BASE_URL,
     prodOverride: process.env.PROD_OVERRIDE,
+    masterKey: process.env.PYRO_MASTER_KEY,
     public: {
       apiBaseUrl: getApiUrl(),
       pyroBaseUrl: process.env.PYRO_BASE_URL,
       prodOverride: process.env.PROD_OVERRIDE,
+      masterKey: process.env.PYRO_MASTER_KEY,
       siteUrl: getDomain(),
       production: isProduction(),
       featureFlagOverrides: getFeatureFlagOverrides(),
diff --git a/apps/frontend/src/components/ui/servers/ServerGameLabel.vue b/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
index 76881aa79..2b74356fb 100644
--- a/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
@@ -1,9 +1,13 @@
 <template>
   <div v-if="game" class="flex flex-row items-center gap-2">
     <GameIcon aria-hidden="true" class="size-5 text-secondary" />
-    <span class="text-sm font-semibold">
+    <NuxtLink
+      :to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
+      class="text-sm font-semibold"
+      :class="serverId ? 'hover:underline' : ''"
+    >
       {{ game[0].toUpperCase() + game.slice(1) }} {{ mcVersion }}
-    </span>
+    </NuxtLink>
   </div>
 </template>
 
@@ -14,4 +18,7 @@ defineProps<{
   game: string;
   mcVersion: string;
 }>();
+
+const route = useNativeRoute();
+const serverId = route.params.id as string;
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerListing.vue b/apps/frontend/src/components/ui/servers/ServerListing.vue
index 249c17bf9..358ded9b4 100644
--- a/apps/frontend/src/components/ui/servers/ServerListing.vue
+++ b/apps/frontend/src/components/ui/servers/ServerListing.vue
@@ -56,14 +56,16 @@
           :loader="loader!"
           :loader-version="loader_version ?? ''"
         />
-        <UiServersServerModLabel v-if="showModLabel" :mods="mods || []" />
+        <UiServersServerSubdomainLabel
+          v-if="showSubdomainLabel"
+          :subdomain="props.net?.domain ?? ''"
+        />
       </div>
     </div>
   </NuxtLink>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
 import { ChevronRightIcon } from "@modrinth/assets";
 import type { StatusState } from "./ServerInstallStatusPill.vue";
 import type { Project, Server } from "~/types/servers";
@@ -81,7 +83,7 @@ const status = computed(() => ({
 
 const showGameLabel = computed(() => !!props.game);
 const showLoaderLabel = computed(() => !!props.loader);
-const showModLabel = computed(() => (props.mods?.length ?? 0) > 0);
+const showSubdomainLabel = computed(() => !!props.net?.domain);
 
 const { data: projectData } = await useLazyAsyncData<Project>(
   `server-project-${props.server_id}`,
diff --git a/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue b/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
index b303eefe3..a72480c56 100644
--- a/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
@@ -3,9 +3,13 @@
     <div class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
     <div class="flex flex-row items-center gap-2">
       <UiServersLoaderIcon :loader="loader" class="[&&]:size-5" />
-      <span class="text-sm font-semibold capitalize">
+      <NuxtLink
+        :to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
+        class="text-sm font-semibold"
+        :class="serverId ? 'hover:underline' : ''"
+      >
         {{ loader }} <span v-if="loaderVersion">{{ loaderVersion }}</span>
-      </span>
+      </NuxtLink>
     </div>
   </div>
 </template>
@@ -15,4 +19,7 @@ defineProps<{
   loader: string;
   loaderVersion: string;
 }>();
+
+const route = useNativeRoute();
+const serverId = route.params.id as string;
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerModLabel.vue b/apps/frontend/src/components/ui/servers/ServerModLabel.vue
deleted file mode 100644
index 74336bb7f..000000000
--- a/apps/frontend/src/components/ui/servers/ServerModLabel.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <div v-if="modsCount > 0" class="h-6 w-0.5 bg-button-border"></div>
-    <div v-if="modsCount > 0" class="flex flex-row items-center gap-2">
-      <BoxIcon />
-      <span class="text-sm font-semibold">
-        {{ modsCount }}
-        <span v-if="modsCount === 1">Mod</span>
-        <span v-else>Mods</span>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { BoxIcon } from "@modrinth/assets";
-import type { Mod } from "~/types/servers";
-
-const props = defineProps<{
-  mods: Mod[];
-}>();
-
-const modsCount = computed(() => props.mods?.length ?? 0);
-</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
index aed75c58c..a02f7fd17 100644
--- a/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
@@ -3,7 +3,13 @@
     <div class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
     <div class="flex flex-row items-center gap-2">
       <LinkIcon />
-      <span class="text-sm font-semibold"> {{ subdomain }}.modrinth.gg </span>
+      <NuxtLink
+        :to="serverId ? `/servers/manage/${serverId}/options/network` : ''"
+        class="text-sm font-semibold"
+        :class="serverId ? 'hover:underline' : ''"
+      >
+        {{ subdomain }}.modrinth.gg
+      </NuxtLink>
     </div>
   </div>
 </template>
@@ -13,4 +19,7 @@ import { LinkIcon } from "@modrinth/assets";
 defineProps<{
   subdomain: string;
 }>();
+
+const route = useNativeRoute();
+const serverId = computed(() => route.params.id as string);
 </script>
diff --git a/apps/frontend/src/pages/servers/manage/[id].vue b/apps/frontend/src/pages/servers/manage/[id].vue
index 007136487..96670e4f5 100644
--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -32,7 +32,6 @@
               :loader="serverData.loader!"
               :loader-version="serverData.loader_version ?? ''"
             />
-            <UiServersServerModLabel v-if="showModLabel" :mods="serverData.mods" />
             <UiServersServerSubdomainLabel
               v-if="serverData.net.domain"
               :subdomain="serverData.net.domain"
diff --git a/apps/frontend/src/pages/servers/manage/[id]/content/datapacks.vue b/apps/frontend/src/pages/servers/manage/[id]/content/datapacks.vue
index ec7c83947..1181f88c1 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/content/datapacks.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/content/datapacks.vue
@@ -1,40 +1,19 @@
 <template>
-  <Modal ref="addModModal" header="">
-    <div class="h-[500px]">
-      <UiServersPyroModal header="Add Datapack" data="data" @modal="addModModal.hide()">
-        <UiServersProjectSelect type="datapack" />
-      </UiServersPyroModal>
+  <div class="flex h-full w-full flex-col px-4">
+    <div class="card flex items-center justify-between gap-2 px-3">
+      <h2 class="m-0 text-2xl font-bold text-contrast">Datapacks</h2>
+      <ButtonStyled color="brand">
+        <button v-tooltip="'Add a mod'">
+          <PlusIcon />
+          Add Datapack
+        </button>
+      </ButtonStyled>
     </div>
-  </Modal>
-  <div class="flex h-full w-full flex-col">
-    <div
-      class="flex items-center justify-between gap-2 border-0 border-b border-solid border-bg-raised p-3"
-    >
-      <h2 class="m-0 text-2xl font-bold text-contrast">DataPacks</h2>
-      <Button icon-only transparent @click="addModModal.show()">
-        <PlusIcon class="h-10 w-10 text-contrast" />
-      </Button>
-    </div>
-    <div
-      v-if="data && status == 'success'"
-      class="flex h-full w-full flex-col overflow-y-scroll"
-    ></div>
-    <UiServersPyroLoading v-else />
+    soon tm
   </div>
 </template>
 
 <script setup lang="ts">
 import { PlusIcon } from "@modrinth/assets";
-import { Button, Modal } from "@modrinth/ui";
-
-const serverStore = useServerStore();
-const route = useNativeRoute();
-const serverId = route.params.id as string;
-
-const addModModal = ref();
-
-const { data, status } = await useLazyAsyncData("content-datapacks-data", async () => {
-  await serverStore.fetchServerData(serverId);
-  return serverStore.getServerData(serverId);
-});
+import { ButtonStyled } from "@modrinth/ui";
 </script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
index baf7512ca..c6c71ef78 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
@@ -51,7 +51,6 @@
 <script setup lang="ts">
 import { PlusIcon, ChevronRightIcon } from "@modrinth/assets";
 import { ButtonStyled, Modal, DropdownSelect } from "@modrinth/ui";
-import { ref, computed } from "vue";
 
 interface Mod {
   name?: string;
diff --git a/apps/frontend/src/pages/servers/manage/[id]/files.vue b/apps/frontend/src/pages/servers/manage/[id]/files.vue
index 969bb5658..33af73792 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/files.vue
@@ -202,14 +202,14 @@
         </div>
       </div>
 
-      <div v-if="isEditing" class="h-full w-full flex-grow overflow-visible">
+      <div v-if="isEditing" class="h-full w-full flex-grow">
         <component
           :is="VAceEditor"
           v-model:value="fileContent"
           lang="json"
           theme="one_dark"
           :print-margin="false"
-          style="height: 100%"
+          style="height: 750px"
         />
       </div>
       <div
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options.vue b/apps/frontend/src/pages/servers/manage/[id]/options.vue
index 3571a3278..f5414fa1c 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options.vue
@@ -3,7 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { CogIcon, FileIcon, ListIcon, TextQuoteIcon, VersionIcon } from "@modrinth/assets";
+import {
+  CogIcon,
+  FileIcon,
+  ListIcon,
+  LoaderIcon,
+  TextQuoteIcon,
+  VersionIcon,
+} from "@modrinth/assets";
 
 const route = useNativeRoute();
 const serverId = route.params.id.toString();
@@ -15,7 +22,7 @@ useHead({
 
 const navLinks = [
   { icon: CogIcon, label: "General", href: `/servers/manage/${serverId}/options` },
-  { icon: CogIcon, label: "Loader", href: `/servers/manage/${serverId}/options/loader` },
+  { icon: LoaderIcon, label: "Loader", href: `/servers/manage/${serverId}/options/loader` },
   { icon: TextQuoteIcon, label: "Startup", href: `/servers/manage/${serverId}/options/startup` },
   { icon: VersionIcon, label: "Network", href: `/servers/manage/${serverId}/options/network` },
   { icon: ListIcon, label: "Properties", href: `/servers/manage/${serverId}/options/properties` },
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
index 03ae2f977..f4702d8c5 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
@@ -115,80 +115,135 @@
           </p>
         </div>
         <div class="flex w-full flex-col gap-4 rounded-xl bg-table-alternateRow p-2 pr-4">
-          <div class="flex items-center gap-2">
-            <Button
-              v-tooltip="'Reinstall the server as vanilla with no mods'"
-              icon-only
-              :class="data.loader === 'Vanilla' ? '[&&]:bg-bg-green' : ''"
-              @click="selectLoader('Vanilla')"
-            >
-              <UiServersLoaderIcon
-                loader="Vanilla"
-                class="[&&]:size-10"
-                :class="data.loader === 'Vanilla' ? 'text-brand' : ''"
-              />
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <div
+                class="rounded-xl bg-button-bg p-2"
+                :class="data.loader === 'Vanilla' ? '[&&]:bg-bg-green' : ''"
+              >
+                <UiServersLoaderIcon
+                  loader="Vanilla"
+                  class="[&&]:size-10"
+                  :class="data.loader === 'Vanilla' ? 'text-brand' : ''"
+                />
+              </div>
+              <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Vanilla</h1>
+              <span
+                v-if="data.loader === 'Vanilla'"
+                class="rounded-full bg-bg-green p-1 px-2 text-sm font-semibold text-brand"
+              >
+                Current
+              </span>
+            </div>
+
+            <Button @click="selectLoader('Vanilla')">
+              {{ data.loader === "Vanilla" ? "Reinstall" : "Install" }}
+              <ChevronRightIcon />
             </Button>
-            <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Vanilla</h1>
           </div>
-          <div class="flex items-center gap-2">
-            <Button
-              v-tooltip="'Reinstall the server with th fabric modloader'"
-              icon-only
-              :class="data.loader === 'Fabric' ? '[&&]:bg-bg-green' : ''"
-              @click="selectLoader('Fabric')"
-            >
-              <UiServersLoaderIcon
-                loader="Fabric"
-                class="[&&]:size-10"
-                :class="data.loader === 'Fabric' ? 'text-brand' : ''"
-              />
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <div
+                class="rounded-xl bg-button-bg p-2"
+                :class="data.loader === 'Fabric' ? '[&&]:bg-bg-green' : ''"
+              >
+                <UiServersLoaderIcon
+                  loader="Fabric"
+                  class="[&&]:size-10"
+                  :class="data.loader === 'Fabric' ? 'text-brand' : ''"
+                />
+              </div>
+              <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Fabric</h1>
+              <span
+                v-if="data.loader === 'Fabric'"
+                class="rounded-full bg-bg-green p-1 px-2 text-sm font-semibold text-brand"
+              >
+                Current
+              </span>
+            </div>
+
+            <Button @click="selectLoader('Fabric')">
+              {{ data.loader === "Fabric" ? "Reinstall" : "Install" }}
+              <ChevronRightIcon />
             </Button>
-            <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Fabric</h1>
           </div>
-          <div class="flex items-center gap-2">
-            <Button
-              v-tooltip="'Reinstall the server with the quilt modloader'"
-              icon-only
-              :class="data.loader === 'Quilt' ? '[&&]:bg-bg-green' : ''"
-              @click="selectLoader('Quilt')"
-            >
-              <UiServersLoaderIcon
-                loader="Quilt"
-                class="[&&]:size-10"
-                :class="data.loader === 'Quilt' ? 'text-brand' : ''"
-              />
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <div
+                class="rounded-xl bg-button-bg p-2"
+                :class="data.loader === 'Quilt' ? '[&&]:bg-bg-green' : ''"
+              >
+                <UiServersLoaderIcon
+                  loader="Quilt"
+                  class="[&&]:size-10"
+                  :class="data.loader === 'Quilt' ? 'text-brand' : ''"
+                />
+              </div>
+              <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Quilt</h1>
+              <span
+                v-if="data.loader === 'Quilt'"
+                class="rounded-full bg-bg-green p-1 px-2 text-sm font-semibold text-brand"
+              >
+                Current
+              </span>
+            </div>
+
+            <Button @click="selectLoader('Quilt')">
+              {{ data.loader === "Quilt" ? "Reinstall" : "Install" }}
+              <ChevronRightIcon />
             </Button>
-            <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Quilt</h1>
           </div>
-          <div class="flex items-center gap-2">
-            <Button
-              v-tooltip="'Reinstall the server with the forge modloader'"
-              icon-only
-              :class="data.loader === 'Forge' ? '[&&]:bg-bg-green' : ''"
-              @click="selectLoader('Forge')"
-            >
-              <UiServersLoaderIcon
-                loader="Forge"
-                class="[&&]:size-10"
-                :class="data.loader === 'Forge' ? 'text-brand' : ''"
-              />
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <div
+                class="rounded-xl bg-button-bg p-2"
+                :class="data.loader === 'Forge' ? '[&&]:bg-bg-green' : ''"
+              >
+                <UiServersLoaderIcon
+                  loader="Forge"
+                  class="[&&]:size-10"
+                  :class="data.loader === 'Forge' ? 'text-brand' : ''"
+                />
+              </div>
+              <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Forge</h1>
+              <span
+                v-if="data.loader === 'Forge'"
+                class="rounded-full bg-bg-green p-1 px-2 text-sm font-semibold text-brand"
+              >
+                Current
+              </span>
+            </div>
+
+            <Button @click="selectLoader('Forge')">
+              {{ data.loader === "Forge" ? "Reinstall" : "Install" }}
+              <ChevronRightIcon />
             </Button>
-            <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Forge</h1>
           </div>
-          <div class="flex items-center gap-2">
-            <Button
-              v-tooltip="'Reinstall the server with the neoforge modloader'"
-              icon-only
-              :class="data.loader === 'Neoforge' ? '[&&]:bg-bg-green' : ''"
-              @click="selectLoader('Neoforge')"
-            >
-              <UiServersLoaderIcon
-                loader="Neoforge"
-                class="[&&]:size-10"
-                :class="data.loader === 'Neoforge' ? 'text-brand' : ''"
-              />
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <div
+                class="rounded-xl bg-button-bg p-2"
+                :class="data.loader === 'Neoforge' ? '[&&]:bg-bg-green' : ''"
+              >
+                <UiServersLoaderIcon
+                  loader="Neoforge"
+                  class="[&&]:size-10"
+                  :class="data.loader === 'Neoforge' ? 'text-brand' : ''"
+                />
+              </div>
+              <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Neoforge</h1>
+              <span
+                v-if="data.loader === 'Neoforge'"
+                class="rounded-full bg-bg-green p-1 px-2 text-sm font-semibold text-brand"
+              >
+                Current
+              </span>
+            </div>
+
+            <Button @click="selectLoader('Neoforge')">
+              {{ data.loader === "Neoforge" ? "Reinstall" : "Install" }}
+              <ChevronRightIcon />
             </Button>
-            <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Neoforge</h1>
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
index 9abc72886..577498244 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
@@ -1,4 +1,16 @@
 <template>
+  <Modal ref="newAllocationModal" header="New Allocation">
+    <div class="flex flex-col gap-4">
+      <label for="allocation-name" class="flex flex-col gap-2">
+        <span class="text-lg font-bold text-contrast">Allocation Name</span>
+        <input id="allocation-name" v-model="newAllocationName" class="w-full" />
+      </label>
+    </div>
+    <div class="button-row">
+      <Button @click="newAllocationModal.hide()"> Cancel </Button>
+      <Button color="primary" @click="addNewAllocation"> Create </Button>
+    </div>
+  </Modal>
   <div class="relative h-full w-full overflow-y-auto">
     <div v-if="data" class="flex h-full w-full flex-col justify-between gap-4 px-4">
       <div class="flex h-full flex-col">
@@ -75,24 +87,6 @@
         :reset="resetNetwork"
       />
     </div>
-
-    <!-- New Allocation Modal -->
-    <Modal v-model:show="showNewAllocationModal">
-      <template #title>New Allocation</template>
-      <template #content>
-        <div class="flex flex-col gap-4">
-          <label for="allocation-name" class="flex flex-col gap-2">
-            <span class="text-lg font-bold text-contrast">Allocation Name</span>
-            <input id="allocation-name" v-model="newAllocationName" class="w-full" />
-          </label>
-        </div>
-      </template>
-      <template #footer>
-        <ButtonStyled type="standard" color="brand" @click="addNewAllocation">
-          <button>Add Allocation</button>
-        </ButtonStyled>
-      </template>
-    </Modal>
   </div>
 </template>
 
@@ -115,21 +109,20 @@ const serverSubdomain = ref(data?.value?.net?.domain ?? "");
 const serverPrimaryPort = ref(data?.value?.net?.port ?? 0);
 
 const allocations = ref(data?.value?.net?.allocations ?? []);
-const showNewAllocationModal = ref(false);
+const newAllocationModal = ref();
 const newAllocationName = ref("");
 
 const hasUnsavedChanges = computed(() => serverSubdomain.value !== data?.value?.net?.domain);
 
 const openNewAllocationModal = () => {
-  showNewAllocationModal.value = true;
-  newAllocationName.value = "";
+  newAllocationModal.value.show();
 };
 
 const addNewAllocation = async () => {
   if (!newAllocationName.value) return;
 
   try {
-    const response = await serverStore.reserveNewAllocation(serverId);
+    const response = await serverStore.reserveAllocation(serverId, newAllocationName.value);
     const newPort = response.port;
 
     allocations.value.push({
@@ -137,7 +130,7 @@ const addNewAllocation = async () => {
       port: newPort,
     });
 
-    showNewAllocationModal.value = false;
+    newAllocationModal.value.hide();
     newAllocationName.value = "";
   } catch (error) {
     console.error("Failed to reserve new allocation:", error);
@@ -164,8 +157,16 @@ const saveNetwork = async () => {
       });
       return;
     }
-    await serverStore.changeSubdomain(serverId, serverSubdomain.value);
-    await serverStore.updateAllocations(serverId, allocations.value);
+    if (serverSubdomain.value !== data?.value?.net?.domain) {
+      await serverStore.changeSubdomain(serverId, serverSubdomain.value);
+    }
+    if (serverPrimaryPort.value !== data?.value?.net?.port) {
+      await serverStore.updateAllocation(
+        serverId,
+        serverPrimaryPort.value,
+        newAllocationName.value,
+      );
+    }
     await new Promise((resolve) => setTimeout(resolve, 500));
     // @ts-ignore
     app.$notify({
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
index 4fb32599e..6eea763a8 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
@@ -21,8 +21,9 @@
               <span> The version of Java that your server will run on. </span>
             </label>
             <DropdownSelect
+              v-model="jdkVersion"
               name="version"
-              :options="['Java 8', 'Java 11', 'Java 16', 'Java 17', 'Java 21', 'Java 22']"
+              :options="['Java 21', 'Java 17', 'Java 11', 'Java 8']"
               placeholder="Java Version"
             />
           </div>
@@ -32,8 +33,9 @@
               <span> The runtime that your server will run on. </span>
             </label>
             <DropdownSelect
+              v-model="jdkBuild"
               name="runtime"
-              :options="['OpenJDK', 'Corretto', 'OpenJ9', 'Adoptium', 'GraalVM']"
+              :options="['Corretto', 'Adoptium', 'GraalVM']"
               placeholder="Runtime"
             />
           </div>
@@ -60,12 +62,22 @@ const serverStore = useServerStore();
 
 const data = computed(() => serverStore.serverData[serverId]);
 
+const invocation = ref();
+const jdkVersion = ref();
+const jdkBuild = ref();
+
 const isUpdating = ref(false);
 const hasUnsavedChanges = ref(false);
 
 const saveStartup = async () => {
   try {
     isUpdating.value = true;
+    await serverStore.updateStartupSettings(
+      serverId,
+      invocation.value,
+      jdkVersion.value,
+      jdkBuild.value,
+    );
     await new Promise((resolve) => setTimeout(resolve, 500));
     // @ts-ignore
     app.$notify({
diff --git a/apps/frontend/src/pages/servers/new/[id]/index.vue b/apps/frontend/src/pages/servers/new/[id]/index.vue
index 98b866446..035edd485 100644
--- a/apps/frontend/src/pages/servers/new/[id]/index.vue
+++ b/apps/frontend/src/pages/servers/new/[id]/index.vue
@@ -137,7 +137,7 @@ const createServer = async () => {
       Accept: "application/json",
       "ngrok-skip-browser-warning": "true",
       "X-Pinggy-No-Screen": "true",
-      "X-Master-Key": "IytvaAQD3BgancASUHKjlUn3dXG4Gz6c8v2bIHrO2uytV4kqLujCt292FqEXWXb1",
+      "X-Master-Key": import.meta.server ? config.pyroMasterKey : config.public.pyroMasterKey,
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Methods": "*",
       "User-Agent": "Pyro/1.0 (https://pyro.host)",
diff --git a/apps/frontend/src/stores/servers.ts b/apps/frontend/src/stores/servers.ts
index cd7851abc..07ad706f5 100644
--- a/apps/frontend/src/stores/servers.ts
+++ b/apps/frontend/src/stores/servers.ts
@@ -367,9 +367,39 @@ export const useServerStore = defineStore("servers", {
       }
     },
 
-    async reserveNewAllocation(serverId: string): Promise<Allocation> {
+    async getStartupSettings(serverId: string) {
       try {
-        return await usePyroFetch<Allocation>(`servers/${serverId}/allocations`, {
+        await usePyroFetch(`servers/${serverId}/startup`, {
+          method: "GET",
+        });
+      } catch (error) {
+        console.error("Error updating startup settings:", error);
+        this.error = error instanceof Error ? error : new Error("An unknown error occurred");
+        throw this.error;
+      }
+    },
+
+    async updateStartupSettings(
+      serverId: string,
+      invocation: string,
+      jdkVersion: "lts8" | "lts11" | "lts17" | "lts21",
+      jdkBuild: "corretto" | "temurin" | "graal",
+    ) {
+      try {
+        await usePyroFetch(`servers/${serverId}/startup`, {
+          method: "POST",
+          body: { invocation, jdk_version: jdkVersion, jdk_build: jdkBuild },
+        });
+      } catch (error) {
+        console.error("Error updating startup settings:", error);
+        this.error = error instanceof Error ? error : new Error("An unknown error occurred");
+        throw this.error;
+      }
+    },
+
+    async reserveAllocation(serverId: string, name: string): Promise<Allocation> {
+      try {
+        return await usePyroFetch<Allocation>(`servers/${serverId}/allocations?name=${name}`, {
           method: "POST",
         });
       } catch (error) {
@@ -379,20 +409,11 @@ export const useServerStore = defineStore("servers", {
       }
     },
 
-    async updateAllocations(serverId: string, allocations: Allocation[]) {
+    async updateAllocation(serverId: string, port: number, name: string) {
       try {
-        await usePyroFetch(`servers/${serverId}/allocations`, {
+        await usePyroFetch(`servers/${serverId}/allocations/${port}?name=${name}`, {
           method: "PUT",
-          body: { allocations },
         });
-
-        if (this.serverData[serverId]) {
-          this.serverData[serverId].net.allocations = allocations;
-        } else {
-          console.warn(
-            `Attempting to update allocations for non-existent server data. Server ID: ${serverId}`,
-          );
-        }
       } catch (error) {
         console.error("Error updating allocations:", error);
         this.error = error instanceof Error ? error : new Error("An unknown error occurred");
@@ -400,21 +421,11 @@ export const useServerStore = defineStore("servers", {
       }
     },
 
-    async deleteAllocation(serverId: string, allocationPort: number) {
+    async deleteAllocation(serverId: string, port: number) {
       try {
-        await usePyroFetch(`servers/${serverId}/allocations/${allocationPort}`, {
+        await usePyroFetch(`servers/${serverId}/allocations/${port}`, {
           method: "DELETE",
         });
-
-        if (this.serverData[serverId]) {
-          this.serverData[serverId].net.allocations = this.serverData[
-            serverId
-          ].net.allocations.filter((allocation) => allocation.port !== allocationPort);
-        } else {
-          console.warn(
-            `Attempting to delete allocation for non-existent server data. Server ID: ${serverId}`,
-          );
-        }
       } catch (error) {
         console.error("Error deleting allocation:", error);
         this.error = error instanceof Error ? error : new Error("An unknown error occurred");
diff --git a/turbo.json b/turbo.json
index b780b6467..0b90a1ca4 100644
--- a/turbo.json
+++ b/turbo.json
@@ -18,6 +18,7 @@
         "STRIPE_PUBLISHABLE_KEY",
         "PYRO_BASE_URL",
         "PROD_OVERRIDE",
+        "PYRO_MASTER_KEY",
         "PORT"
       ]
     },