feat(frontend): new install error flow, billing fix pt 1

Author: thewander02

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

@@ -1,15 +1,15 @@
 <template>
   <div class="flex flex-row items-center gap-2 rounded-lg">
     <ButtonStyled v-if="showStopButton" type="standard" color="red">
-      <button :disabled="!canTakeAction || isStartingDelay" @click="killServer">
+      <button :disabled="!canTakeAction || isStartingDelay || disabled" @click="killServer">
         <div class="flex gap-1">
           <SlashIcon class="h-5 w-5" />
           <span>{{ killButtonText }}</span>
         </div>
       </button>
     </ButtonStyled>
     <ButtonStyled v-if="showStopButton" type="standard" color="red">
-      <button :disabled="!canTakeAction || isStartingDelay" @click="stopServer">
+      <button :disabled="!canTakeAction || isStartingDelay || disabled" @click="stopServer">
         <div class="flex gap-1">
           <StopCircleIcon class="h-5 w-5" />
           <span>{{ stopButtonText }}</span>
@@ -18,7 +18,7 @@
     </ButtonStyled>
 
     <ButtonStyled type="standard" color="brand">
-      <button :disabled="!canTakeAction || isStartingDelay" @click="handleAction">
+      <button :disabled="!canTakeAction || isStartingDelay || disabled" @click="handleAction">
         <div v-if="isStartingOrRestarting" class="grid place-content-center">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path
@@ -49,6 +49,7 @@ import { ButtonStyled } from "@modrinth/ui";
 const props = defineProps<{
   isOnline: boolean;
   isActioning: boolean;
+  disabled: any;
 }>();
 
 const emit = defineEmits<{

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

@@ -1,16 +1,9 @@
 <template>
   <div class="contents">
-    <UiServersPyroError
-      v-if="error"
-      :title="errorTitle"
-      :message="errorMessage"
-      :server-id="serverData?.server_id"
-    />
     <div
       v-if="serverData && serverData.status !== 'installing'"
       data-pyro-server-manager-root
       class="mx-auto box-border flex min-h-screen w-full max-w-[1280px] flex-col gap-6 px-3 transition-all duration-300"
-      :class="error ? 'pointer-events-none select-none blur-md' : ''"
     >
       <div class="flex w-full min-w-0 flex-row items-center gap-6 pt-4">
         <UiServersServerIcon :image="serverData.image" />
@@ -34,6 +27,7 @@
                 class="flex-shrink-0"
                 :is-online="isServerRunning"
                 :is-actioning="isActioning"
+                :disabled="error"
                 @action="sendPowerAction"
               />
             </div>
@@ -63,6 +57,16 @@
       </div>
 
       <div data-pyro-mount class="h-full w-full flex-1">
+        <div
+          v-if="error"
+          class="mb-4 flex h-full w-full items-center gap-2 rounded-xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
+        >
+          <IssuesIcon class="h-8 w-8 text-red" />
+          <div class="flex flex-col gap-2">
+            {{ errorTitle }}
+            {{ errorMessage }}
+          </div>
+        </div>
         <NuxtPage
           :route="route"
           :is-connected="isConnected"
@@ -92,7 +96,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch } from "vue";
-import { LeftArrowIcon } from "@modrinth/assets";
+import { IssuesIcon, LeftArrowIcon } from "@modrinth/assets";
 import type { ServerState, Stats, WSEvent, WSInstallationResultEvent } from "~/types/servers";
 
 const socket = ref<WebSocket | null>(null);

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

@@ -519,6 +519,7 @@ import {
 } from "@modrinth/assets";
 import { calculateSavings, formatPrice, createStripeElements, getCurrency } from "@modrinth/utils";
 import { ref } from "vue";
+import { asyncComputed } from "@vueuse/core";
 import { products } from "~/generated/state.json";
 
 definePageMeta({
@@ -743,7 +744,6 @@ const [
   { data: charges, refresh: refreshCharges },
   { data: customer, refresh: refreshCustomer },
   { data: subscriptions, refresh: refreshSubscriptions },
-  { data: servers, refresh: refreshServers },
 ] = await Promise.all([
   useAsyncData("billing/payment_methods", () =>
     useBaseFetch("billing/payment_methods", { internal: true }),
@@ -753,15 +753,6 @@ const [
   useAsyncData("billing/subscriptions", () =>
     useBaseFetch("billing/subscriptions", { internal: true }),
   ),
-  useAsyncData("ServerList", async () => {
-    try {
-      const response = await usePyroFetch("servers");
-      await updateIcons(response.servers);
-      return response;
-    } catch {
-      throw new PyroFetchError("Unable to load servers");
-    }
-  }),
 ]);
 
 onMounted(() => {
@@ -780,11 +771,11 @@ async function refresh() {
   ]);
 }
 
-const pyroSubscriptions = computed(() => {
+const pyroSubscriptions = asyncComputed(() => {
   return subscriptions.value
     .filter((x) => x.status === "provisioned" && x.metadata && x.metadata.type === "pyro")
-    .map((x) => {
-      const server = servers.value.servers.find((y) => y.server_id === x.metadata.id);
+    .map(async (x) => {
+      const server = await usePyroServer(x.metadata.id, ["general"]);
       return {
         ...x,
         server,