refactor: apollo client creation + WIP subscriptions

components/UserProfile.ce.vue

@@ -66,12 +66,8 @@ onBeforeMount(() => {
   if (typeof props.server === 'object') { // Handles the testing dev Vue component
     serverStore.setServer(props.server);
   } else if (typeof props.server === 'string') { // Handle web component
-    try {
-      const parsedServerProp = JSON.parse(props.server);
-      serverStore.setServer(parsedServerProp);
-    } catch (e) {
-      console.error(e);
-    }
+    const parsedServerProp = JSON.parse(props.server);
+    serverStore.setServer(parsedServerProp);
   }
   /**
    * Listen for callbacks, if we receive one that needs to be acted upon the store will display

components/UserProfile/DropdownConnectStatus.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/vue/24/solid';
+
+type ApiOnlineStatus = 'online'|'offline';
+const onlineStatus = ref<ApiOnlineStatus>('online');
+const apiLoading = ref(false);
+
 import { useQuery } from '@vue/apollo-composable';
 
 import {
@@ -16,10 +21,6 @@ const result = computed(() => useFragment(TEST_FRAGMENT, newResult.value?.cloud)
 watch(result, (newVal, oldVal) => {
   console.log('result', newVal, oldVal);
 });
-
-type ApiOnlineStatus = 'online'|'offline';
-const onlineStatus = ref<ApiOnlineStatus>('online');
-const apiLoading = ref(false);
 </script>
 
 <template>

components/UserProfile/DropdownItem.vue

@@ -1,3 +1,4 @@
+
 <script setup lang="ts">
 import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
 import type { ServerStateDataAction } from '~/types/server';
@@ -5,7 +6,7 @@ import type { UserProfileLink } from '~/types/userProfile';
 
 export interface Props {
   item: ServerStateDataAction | UserProfileLink;
-  rounded: boolean;
+  rounded?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {