Ensure server status info is always passed to "My servers" page (#4071)

This took an insanely long time to debug and figure out you would not believe

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

@@ -66,6 +66,27 @@
       <UiServersPanelSpinner />
       Your server's hardware is currently being upgraded and will be back online shortly.
     </div>
+    <div
+      v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
+      class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
+    >
+      <div class="flex flex-row gap-2">
+        <UiServersIconsPanelErrorIcon class="!size-5" /> Your server has been cancelled. Please
+        update your billing information or contact Modrinth Support for more information.
+      </div>
+      <CopyCode :text="`${props.server_id}`" class="ml-auto" />
+    </div>
+    <div
+      v-else-if="status === 'suspended' && suspension_reason"
+      class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
+    >
+      <div class="flex flex-row gap-2">
+        <UiServersIconsPanelErrorIcon class="!size-5" /> Your server has been suspended:
+        {{ suspension_reason }}. Please update your billing information or contact Modrinth Support
+        for more information.
+      </div>
+      <CopyCode :text="`${props.server_id}`" class="ml-auto" />
+    </div>
     <div
       v-else-if="status === 'suspended'"
       class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
@@ -87,7 +108,8 @@ import { Avatar, CopyCode } from "@modrinth/ui";
 
 const props = defineProps<Partial<Server>>();
 
-if (props.server_id) {
+if (props.server_id && props.status === "available") {
+  // Necessary only to get server icon
   await useModrinthServers(props.server_id, ["general"]);
 }
 
@@ -109,11 +131,6 @@ if (props.upstream) {
 }
 
 const image = useState<string | undefined>(`server-icon-${props.server_id}`, () => undefined);
-
-if (import.meta.server && projectData.value?.icon_url) {
-  await useModrinthServers(props.server_id!, ["general"]);
-}
-
 const iconUrl = computed(() => projectData.value?.icon_url || undefined);
 const isConfiguring = computed(() => props.flows?.intro);
 </script>

apps/frontend/src/pages/servers/manage/index.vue

@@ -96,16 +96,7 @@
         <UiServersServerListing
           v-for="server in filteredData"
           :key="server.server_id"
-          :server_id="server.server_id"
-          :name="server.name"
-          :status="server.status"
-          :game="server.game"
-          :loader="server.loader"
-          :loader_version="server.loader_version"
-          :mc_version="server.mc_version"
-          :upstream="server.upstream"
-          :net="server.net"
-          :flows="server.flows"
+          v-bind="server"
         />
         <LazyUiServersServerListingSkeleton v-if="isPollingForNewServers" />
       </ul>

apps/frontend/src/pages/settings/billing/index.vue

@@ -208,15 +208,7 @@
             <div class="flex flex-col gap-2">
               <UiServersServerListing
                 v-if="subscription.serverInfo"
-                :server_id="subscription.serverInfo.server_id"
-                :name="subscription.serverInfo.name"
-                :status="subscription.serverInfo.status"
-                :game="subscription.serverInfo.game"
-                :loader="subscription.serverInfo.loader"
-                :loader_version="subscription.serverInfo.loader_version"
-                :mc_version="subscription.serverInfo.mc_version"
-                :upstream="subscription.serverInfo.upstream"
-                :net="subscription.serverInfo.net"
+                v-bind="subscription.serverInfo"
               />
               <div v-else class="w-fit">
                 <p>