fix(frontend): fix wave 1

Author: thewander02

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

@@ -49,13 +49,11 @@
 </template>
 
 <script setup lang="ts">
-import { Button, Checkbox } from "@modrinth/ui";
+import { Button } from "@modrinth/ui";
 import { EditIcon, TrashIcon } from "@modrinth/assets";
 
 const emit = defineEmits(["toggle", "delete", "edit"]);
 
-const selected = ref(false);
-
 defineProps<{
   data: {
     name?: string;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full w-full flex-col overflow-clip p-2 pb-4">
+  <div class="flex h-[400px] w-full flex-col overflow-clip p-2 pb-4">
     <div class="iconified-input w-full">
       <label class="hidden" for="search">Search</label>
       <SearchIcon aria-hidden="true" />
@@ -150,6 +150,9 @@ const loadMore = async () => {
 const { reset } = useInfiniteScroll(scrollContainer, async () => {
   if (page.value <= pages.value) {
     await loadMore();
+    console.log("loading more");
+    console.log(page.value);
+    console.log(pages.value);
   }
 });
 

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

@@ -1,25 +1,39 @@
 <template>
-  <div v-if="subdomain" v-tooltip="'Change custom URL'" class="flex flex-row items-center gap-4">
+  <div
+    v-if="subdomain"
+    v-tooltip="'Copy subdomain'"
+    class="flex flex-row items-center gap-4 hover:cursor-pointer"
+  >
     <div class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>
     <div class="flex flex-row items-center gap-2">
       <LinkIcon />
-      <NuxtLink
-        :to="serverId ? `/servers/manage/${serverId}/options/network` : ''"
+      <div
         class="text-sm font-semibold"
         :class="serverId ? 'hover:underline' : ''"
+        @click="copySubdomain"
       >
         {{ subdomain }}.modrinth.gg
-      </NuxtLink>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { LinkIcon } from "@modrinth/assets";
-defineProps<{
+const props = defineProps<{
   subdomain: string;
 }>();
 
+const copySubdomain = () => {
+  navigator.clipboard.writeText(props.subdomain + ".modrinth.gg");
+  addNotification({
+    group: "servers",
+    title: "Subdomain copied",
+    text: "Your subdomain has been copied to your clipboard.",
+    type: "success",
+  });
+};
+
 const route = useNativeRoute();
 const serverId = computed(() => route.params.id as string);
 </script>

apps/frontend/src/pages/servers/manage/[id]/options/loader.vue

@@ -87,7 +87,7 @@
                     v-tooltip="'Current installed Modpack version'"
                     class="rounded-full bg-bg-green p-1 px-2 text-sm font-semibold text-brand"
                   >
-                    v{{ currentVersion?.version_number }}
+                    {{ currentVersion?.version_number }}
                   </span>
                 </h1>
                 <span class="text-md font-semibold text-secondary">

apps/frontend/src/pages/servers/manage/[id]/options/network.vue

@@ -139,8 +139,6 @@
 </template>
 
 <script setup lang="ts">
-// currently broken, will fix
-
 import { PlusIcon, TrashIcon, EditIcon, VersionIcon, SaveIcon } from "@modrinth/assets";
 import { ButtonStyled, Modal, Button } from "@modrinth/ui";
 import type { Server } from "~/composables/pyroServers";
@@ -157,7 +155,7 @@ const serverSubdomain = ref(data?.value?.net?.domain ?? "");
 const serverPrimaryPort = ref(data?.value?.net?.port ?? 0);
 
 const network = computed(() => props.server.network);
-const allocations = ref(network.value?.allocations);
+const allocations = computed(() => network.value?.allocations);
 
 const newAllocationModal = ref();
 const editAllocationModal = ref();
@@ -172,10 +170,17 @@ const addNewAllocation = async () => {
   try {
     await props.server.network?.reserveAllocation(newAllocationName.value);
 
-    await props.server.refresh();
-
     newAllocationModal.value.hide();
     newAllocationName.value = "";
+
+    await props.server.refresh();
+
+    addNotification({
+      group: "serverOptions",
+      type: "success",
+      title: "Allocation reserved",
+      text: "Your allocation has been reserved.",
+    });
   } catch (error) {
     console.error("Failed to reserve new allocation:", error);
   }
@@ -192,18 +197,32 @@ const editAllocation = async () => {
   try {
     await props.server.network?.updateAllocation(newAllocationPort.value, newAllocationName.value);
 
-    await props.server.refresh();
-
     editAllocationModal.value.hide();
     newAllocationName.value = "";
+
+    await props.server.refresh();
+
+    addNotification({
+      group: "serverOptions",
+      type: "success",
+      title: "Allocation updated",
+      text: "Your allocation has been updated.",
+    });
   } catch (error) {
     console.error("Failed to reserve new allocation:", error);
   }
 };
 
 const removeAllocation = async (port: number) => {
   await props.server.network?.deleteAllocation(port);
+
   await props.server.refresh();
+  addNotification({
+    group: "serverOptions",
+    type: "success",
+    title: "Allocation removed",
+    text: "Your allocation has been removed.",
+  });
 };
 
 const saveNetwork = async () => {
@@ -251,6 +270,5 @@ const saveNetwork = async () => {
 
 const resetNetwork = () => {
   serverSubdomain.value = data?.value?.net?.domain ?? "";
-  allocations.value = network.value?.allocations ?? [];
 };
 </script>