add vrchat servers status to status bar

2026-05-06 22:46:06 +02:00 · 2026-03-09 13:30:15 +09:00
parent bc5db58b89
commit c26c562d0e
6 changed files with 661 additions and 215 deletions
@@ -5,11 +5,9 @@ const mocks = vi.hoisted(() => ({
    execute: vi.fn(),
    formatDateFilter: vi.fn(() => 'formatted-time'),
    openExternalLink: vi.fn(),
-    toast: {
-        warning: vi.fn(),
-        success: vi.fn(),
-        dismiss: vi.fn()
-    }
+    toastWarning: vi.fn(() => 'toast-id-1'),
+    toastSuccess: vi.fn(() => 'toast-id-2'),
+    toastDismiss: vi.fn()
 }));

 vi.mock('../../service/webapi', () => ({
@@ -18,21 +16,6 @@ vi.mock('../../service/webapi', () => ({
    }
 }));

-vi.mock('../../shared/utils', () => ({
-    formatDateFilter: (...args) => mocks.formatDateFilter(...args),
-    openExternalLink: (...args) => mocks.openExternalLink(...args)
-}));
-
-vi.mock('vue-sonner', () => ({
-    toast: mocks.toast
-}));
-
-vi.mock('vue-i18n', () => ({
-    useI18n: () => ({
-        t: (key) => key
-    })
-}));
-
 vi.mock('worker-timers', () => ({
    setInterval: vi.fn(),
    clearInterval: vi.fn(),
@@ -40,6 +23,28 @@ vi.mock('worker-timers', () => ({
    clearTimeout: vi.fn()
 }));

+vi.mock('vue-sonner', () => ({
+    toast: {
+        warning: (...args) => mocks.toastWarning(...args),
+        success: (...args) => mocks.toastSuccess(...args),
+        dismiss: (...args) => mocks.toastDismiss(...args)
+    }
+}));
+
+vi.mock('../../shared/utils', () => ({
+    formatDateFilter: (...args) => mocks.formatDateFilter(...args),
+    openExternalLink: (...args) => mocks.openExternalLink(...args)
+}));
+
+vi.mock('vue-i18n', () => ({
+    useI18n: () => ({
+        t: (key) => key
+    })
+}));
+
+/**
+ *
+ */
 function flushPromises() {
    return new Promise((resolve) => setTimeout(resolve, 0));
 }
@@ -77,7 +82,7 @@ describe('useVrcStatusStore.getVrcStatus', () => {
            headers: { Referer: 'https://vrcx.app' }
        });
        expect(store.lastStatus).toBe('Failed to fetch VRC status');
-        expect(mocks.toast.warning).toHaveBeenCalledTimes(1);
+        expect(store.hasIssue).toBe(true);
    });

    test('fetches summary for incident status and appends component summary', async () => {
@@ -110,7 +115,7 @@ describe('useVrcStatusStore.getVrcStatus', () => {
        );
        expect(store.lastStatus).toBe('Partial System Outage');
        expect(store.statusText).toBe('Partial System Outage: API, CDN');
-        expect(mocks.toast.warning).toHaveBeenCalled();
+        expect(store.hasIssue).toBe(true);
    });

    test('clears status when all systems are operational', async () => {
@@ -130,3 +135,130 @@ describe('useVrcStatusStore.getVrcStatus', () => {
        expect(store.statusText).toBe('');
    });
 });
+
+describe('useVrcStatusStore dual-mode notification', () => {
+    beforeEach(async () => {
+        mocks.execute.mockResolvedValue({
+            status: 200,
+            data: JSON.stringify({
+                page: { updated_at: '2026-01-01T00:00:00.000Z' },
+                status: { description: 'All Systems Operational' }
+            })
+        });
+
+        setActivePinia(createPinia());
+        useVrcStatusStore();
+        await flushPromises();
+        vi.clearAllMocks();
+    });
+
+    test('does not show toast before initialized (startup race prevention)', async () => {
+        const store = useVrcStatusStore();
+        // Do NOT call setStatusBarServersVisible — initialized remains false
+
+        mocks.execute
+            .mockResolvedValueOnce({
+                status: 200,
+                data: JSON.stringify({
+                    page: { updated_at: '2026-01-02T00:00:00.000Z' },
+                    status: { description: 'Partial System Outage' }
+                })
+            })
+            .mockResolvedValueOnce({
+                status: 200,
+                data: JSON.stringify({
+                    components: [{ name: 'API', status: 'major_outage' }]
+                })
+            });
+
+        await store.getVrcStatus();
+        await flushPromises();
+
+        expect(mocks.toastWarning).not.toHaveBeenCalled();
+    });
+
+    test('shows toast when statusBarServersVisible is false and initialized', async () => {
+        const store = useVrcStatusStore();
+        // Initialize via action (simulates StatusBar onMounted with servers=false)
+        store.setStatusBarServersVisible(false);
+
+        mocks.execute
+            .mockResolvedValueOnce({
+                status: 200,
+                data: JSON.stringify({
+                    page: { updated_at: '2026-01-02T00:00:00.000Z' },
+                    status: { description: 'Partial System Outage' }
+                })
+            })
+            .mockResolvedValueOnce({
+                status: 200,
+                data: JSON.stringify({
+                    components: [{ name: 'API', status: 'major_outage' }]
+                })
+            });
+
+        await store.getVrcStatus();
+        await flushPromises();
+
+        expect(mocks.toastWarning).toHaveBeenCalled();
+        expect(mocks.toastWarning.mock.calls[0][0]).toBe(
+            'status_bar.servers_issue'
+        );
+    });
+
+    test('does NOT show toast when statusBarServersVisible is true', async () => {
+        const store = useVrcStatusStore();
+        store.setStatusBarServersVisible(true);
+
+        mocks.execute
+            .mockResolvedValueOnce({
+                status: 200,
+                data: JSON.stringify({
+                    page: { updated_at: '2026-01-02T00:00:00.000Z' },
+                    status: { description: 'Partial System Outage' }
+                })
+            })
+            .mockResolvedValueOnce({
+                status: 200,
+                data: JSON.stringify({
+                    components: [{ name: 'API', status: 'major_outage' }]
+                })
+            });
+
+        await store.getVrcStatus();
+        await flushPromises();
+
+        expect(mocks.toastWarning).not.toHaveBeenCalled();
+    });
+
+    test('triggers toast when switching from StatusBar mode to toast mode with active issue', async () => {
+        const store = useVrcStatusStore();
+        store.setStatusBarServersVisible(true);
+
+        // Create an issue while in StatusBar mode
+        mocks.execute
+            .mockResolvedValueOnce({
+                status: 200,
+                data: JSON.stringify({
+                    page: { updated_at: '2026-01-02T00:00:00.000Z' },
+                    status: { description: 'Major Outage' }
+                })
+            })
+            .mockResolvedValueOnce({
+                status: 200,
+                data: JSON.stringify({
+                    components: [{ name: 'API', status: 'major_outage' }]
+                })
+            });
+
+        await store.getVrcStatus();
+        await flushPromises();
+        expect(mocks.toastWarning).not.toHaveBeenCalled();
+
+        // Switch to toast mode - should trigger notification
+        store.setStatusBarServersVisible(false);
+        await flushPromises();
+
+        expect(mocks.toastWarning).toHaveBeenCalledTimes(1);
+    });
+});
@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
@@ -17,10 +17,15 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
    const lastStatusSummary = ref('');
    const lastTimeFetched = ref(0);
    const pollingInterval = ref(0);
+
+    const statusBarServersVisible = ref(false);
+    const initialized = ref(false);
+
    const alertRef = ref(null);
+    const lastStatusText = ref('');
+
    const { t } = useI18n();

-    const lastStatusText = ref('');
    const statusText = computed(() => {
        if (lastStatus.value && lastStatusSummary.value) {
            return `${lastStatus.value}: ${lastStatusSummary.value}`;
@@ -28,6 +33,11 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
        return lastStatus.value;
    });

+    const hasIssue = computed(() => !!lastStatus.value);
+
+    /**
+     * @returns {void}
+     */
    function dismissAlert() {
        if (!alertRef.value) {
            return;
@@ -36,30 +46,32 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
        alertRef.value = null;
    }

-    function updateAlert() {
-        if (lastStatusText.value === statusText.value) {
-            return;
-        }
-        lastStatusText.value = statusText.value;
+    /**
+     * @returns {void}
+     */
+    function openStatusPage() {
+        openExternalLink('https://status.vrchat.com');
+    }

-        if (!statusText.value) {
-            if (alertRef.value) {
-                dismissAlert();
-                alertRef.value = toast.success(t('status.title'), {
-                    description: `${formatDateFilter(lastStatusTime.value, 'short')}: All Systems Operational`,
-                    position: 'bottom-right',
-                    action: {
-                        label: 'Open',
-                        onClick: () => openStatusPage()
-                    }
-                });
-            }
-            return;
+    /**
+     * @param {boolean} visible
+     * @returns {void}
+     */
+    function setStatusBarServersVisible(visible) {
+        statusBarServersVisible.value = visible;
+        if (!initialized.value) {
+            initialized.value = true;
        }
+    }

+    /**
+     * @param {string} text
+     * @returns {void}
+     */
+    function showWarningToast(text) {
        dismissAlert();
-        alertRef.value = toast.warning(t('status.title'), {
-            description: `${formatDateFilter(lastStatusTime.value, 'short')}: ${statusText.value}`,
+        alertRef.value = toast.warning(t('status_bar.servers_issue'), {
+            description: `${formatDateFilter(lastStatusTime.value, 'short')}: ${text}`,
            duration: Infinity,
            closeButton: true,
            position: 'bottom-right',
@@ -70,10 +82,49 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
        });
    }

-    function openStatusPage() {
-        openExternalLink('https://status.vrchat.com');
-    }
+    watch(statusText, (newVal) => {
+        if (statusBarServersVisible.value || !initialized.value) {
+            return;
+        }

+        if (lastStatusText.value === newVal) {
+            return;
+        }
+        lastStatusText.value = newVal;
+
+        if (!newVal) {
+            if (alertRef.value) {
+                dismissAlert();
+                alertRef.value = toast.success(t('status_bar.servers_issue'), {
+                    description: `${formatDateFilter(lastStatusTime.value, 'short')}: ${t('status_bar.servers_ok')}`,
+                    position: 'bottom-right',
+                    action: {
+                        label: 'Open',
+                        onClick: () => openStatusPage()
+                    }
+                });
+            }
+            return;
+        }
+
+        showWarningToast(newVal);
+    });
+
+    watch(statusBarServersVisible, (visible) => {
+        if (!visible && hasIssue.value && statusText.value) {
+            lastStatusText.value = '';
+            showWarningToast(statusText.value);
+            lastStatusText.value = statusText.value;
+        }
+        if (visible) {
+            dismissAlert();
+            lastStatusText.value = '';
+        }
+    });
+
+    /**
+     * @returns {Promise<void>}
+     */
    async function getVrcStatus() {
        const response = await webApiService.execute({
            url: `${vrcStatusApiUrl}/status.json`,
@@ -87,7 +138,6 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
            console.error('Failed to fetch VRChat status', response);
            lastStatus.value = 'Failed to fetch VRC status';
            pollingInterval.value = 2 * 60 * 1000; // 2 minutes
-            updateAlert();
            return;
        }
        const data = JSON.parse(response.data);
@@ -95,15 +145,16 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
        if (data.status.description === 'All Systems Operational') {
            lastStatus.value = '';
            pollingInterval.value = 15 * 60 * 1000; // 15 minutes
-            updateAlert();
            return;
        }
        lastStatus.value = data.status.description;
        pollingInterval.value = 2 * 60 * 1000; // 2 minutes
-        updateAlert();
        getVrcStatusSummary();
    }

+    /**
+     * @returns {Promise<void>}
+     */
    async function getVrcStatusSummary() {
        const response = await webApiService.execute({
            url: `${vrcStatusApiUrl}/summary.json`,
@@ -127,16 +178,21 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
            summary = summary.slice(0, -2);
        }
        lastStatusSummary.value = summary;
-        updateAlert();
    }

    // ran from Cef and Electron when browser is focused
+    /**
+     * @returns {void}
+     */
    function onBrowserFocus() {
        if (Date.now() - lastTimeFetched.value > 60 * 1000) {
            getVrcStatus();
        }
    }

+    /**
+     * @returns {void}
+     */
    function init() {
        getVrcStatus();
        workerTimers.setInterval(() => {
@@ -150,7 +206,13 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {

    return {
        lastStatus,
+        lastStatusTime,
+        lastStatusSummary,
        statusText,
+        hasIssue,
+        statusBarServersVisible,
+        setStatusBarServersVisible,
+        openStatusPage,
        onBrowserFocus,
        getVrcStatus
    };