More VRC status checking

src/app.scss

@@ -1063,3 +1063,7 @@ i.x-status-icon.red {
     color: var(--el-color-info-dark-2);
     background-color: var(--el-bg-color);
 }
+
+.el-alert__title {
+    padding: 5px;
+}

src/components/VrcStatus.vue

@@ -1,20 +1,39 @@
 <template>
-    <el-alert
+    <el-alert v-if="statusText" type="warning" show-icon center :closable="true" @close="onAlertClose">
-        v-if="lastStatus"
+        <template #title>
-        :title="lastStatus"
+            <span @click="openStatusPage" class="status-text">
-        type="warning"
+                {{ statusText }}
-        show-icon
+            </span>
-        center
+        </template>
-        :closable="true"
+    </el-alert>
-        @close="onAlertClose"></el-alert>
 </template>
 <script setup>
     import { storeToRefs } from 'pinia';
     import { useVrcStatusStore } from '../stores';
+    import { openExternalLink } from '../shared/utils';
 
-    const { lastStatus, isAlertClosed } = storeToRefs(useVrcStatusStore());
+    const { statusText, isAlertClosed } = storeToRefs(useVrcStatusStore());
+
+    isAlertClosed.value = false;
 
     function onAlertClose() {
         isAlertClosed.value = true;
     }
+
+    function openStatusPage() {
+        if (isAlertClosed.value) {
+            return;
+        }
+        openExternalLink('https://status.vrchat.com');
+    }
 </script>
+
+<style scoped>
+    .status-text {
+        cursor: pointer;
+    }
+
+    .status-text:hover {
+        text-decoration: underline;
+    }
+</style>

src/stores/vrcStatus.js

@@ -1,15 +1,23 @@
 import { defineStore } from 'pinia';
 import webApiService from '../service/webapi';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 
 export const useVrcStatusStore = defineStore('VrcStatus', () => {
     const vrcStatusApiUrl = 'https://status.vrchat.com/api/v2';
 
     const lastStatus = ref('');
+    const lastStatusSummary = ref('');
     const lastTimeFetched = ref(0);
     const isAlertClosed = ref(false);
     const pollingInterval = ref(0);
 
+    const statusText = computed(() => {
+        if (lastStatusSummary.value) {
+            return `${lastStatus.value}: ${lastStatusSummary.value}`;
+        }
+        return lastStatus.value;
+    });
+
     async function getVrcStatus() {
         const response = await webApiService.execute({
             url: `${vrcStatusApiUrl}/status.json`,
@@ -27,6 +35,28 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
         }
         lastStatus.value = data.status.description;
         pollingInterval.value = 2 * 60 * 1000; // 2 minutes
+        getVrcStatusSummary();
+    }
+
+    async function getVrcStatusSummary() {
+        const response = await webApiService.execute({
+            url: `${vrcStatusApiUrl}/summary.json`,
+            method: 'GET',
+            headers: {
+                Referer: 'https://vrcx.app'
+            }
+        });
+        const data = JSON.parse(response.data);
+        let summary = '';
+        for (const component of data.components) {
+            if (component.status !== 'operational') {
+                summary += `${component.name}, `;
+            }
+        }
+        if (summary.endsWith(', ')) {
+            summary = summary.slice(0, -2);
+        }
+        lastStatusSummary.value = summary;
     }
 
     // ran from Cef and Electron when browser is focused
@@ -51,7 +81,7 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
     init();
 
     return {
-        lastStatus,
+        statusText,
         isAlertClosed,
         onBrowserFocus,
         getVrcStatus