remove hide status setting

2026-04-06 00:32:02 +02:00 · 2026-03-13 00:29:00 +09:00
parent b10ceb9278
commit fbe290b788
7 changed files with 108 additions and 296 deletions
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -79,7 +79,8 @@
                                </TooltipWrapper>
                                <div
                                    v-else
-                                    class="flex items-center gap-1 px-2 h-[22px] whitespace-nowrap border-r border-border">
+                                    class="flex items-center gap-1 px-2 h-[22px] whitespace-nowrap border-r border-border cursor-pointer hover:bg-accent"
+                                    @click="vrcStatusStore.openStatusPage()">
                                    <span class="inline-block size-2 rounded-full shrink-0 bg-[#e6a23c]" />
                                    <span class="text-foreground text-[11px]">{{ t('status_bar.servers') }}</span>
                                </div>
@@ -349,9 +350,6 @@
    function toggleVisibility(key) {
        visibility[key] = !visibility[key];
        configRepository.setString(VISIBILITY_KEY, JSON.stringify(visibility));
-        if (key === 'servers') {
-            vrcStatusStore.setStatusBarServersVisible(visibility.servers);
-        }
    }

    // --- WebSocket message rate + sparkline ---
@@ -543,12 +541,10 @@
        }

        drawSparkline();
-        vrcStatusStore.setStatusBarServersVisible(visibility.servers);
    });

    onBeforeUnmount(() => {
        clearTimeout(serversHoverTimer);
-        vrcStatusStore.setStatusBarServersVisible(false);
    });

    watch(
--- a/src/stores/tests/vrcStatus.test.js
+++ b/src/stores/tests/vrcStatus.test.js
@@ -3,11 +3,7 @@ import { createPinia, setActivePinia } from 'pinia';

 const mocks = vi.hoisted(() => ({
    execute: vi.fn(),
-    formatDateFilter: vi.fn(() => 'formatted-time'),
-    openExternalLink: vi.fn(),
-    toastWarning: vi.fn(() => 'toast-id-1'),
-    toastSuccess: vi.fn(() => 'toast-id-2'),
-    toastDismiss: vi.fn()
+    openExternalLink: vi.fn()
 }));

 vi.mock('../../services/webapi', () => ({
@@ -23,27 +19,10 @@ 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
-    ,
-            locale: require('vue').ref('en')
-        })
-}));
-
 /**
 *
 */
@@ -137,130 +116,3 @@ 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);
-    });
-});
--- a/src/stores/settings/appearance.js
+++ b/src/stores/settings/appearance.js
@@ -109,7 +109,6 @@ export const useAppearanceSettingsStore = defineStore(

        const isDataTableStriped = ref(false);
        const showPointerOnHover = ref(false);
-        const showStatusBar = ref(true);
        const tableLimitsDialog = ref({
            visible: false,
            maxTableSize: 500,
@@ -168,7 +167,6 @@ export const useAppearanceSettingsStore = defineStore(
                navIsCollapsedConfig,
                dataTableStripedConfig,
                showPointerOnHoverConfig,
-                showStatusBarConfig,
                appFontFamilyConfig,
                lastDarkThemeConfig
            ] = await Promise.all([
@@ -232,7 +230,6 @@ export const useAppearanceSettingsStore = defineStore(
                configRepository.getBool('VRCX_navIsCollapsed', false),
                configRepository.getBool('VRCX_dataTableStriped', false),
                configRepository.getBool('VRCX_showPointerOnHover', false),
-                configRepository.getBool('VRCX_showStatusBar', true),
                configRepository.getString(
                    'VRCX_fontFamily',
                    APP_FONT_DEFAULT_KEY
@@ -333,7 +330,6 @@ export const useAppearanceSettingsStore = defineStore(
            isNavCollapsed.value = navIsCollapsedConfig;
            isDataTableStriped.value = dataTableStripedConfig;
            showPointerOnHover.value = showPointerOnHoverConfig;
-            showStatusBar.value = showStatusBarConfig;

            applyPointerHoverClass();

@@ -567,13 +563,6 @@ export const useAppearanceSettingsStore = defineStore(
                showInstanceIdInLocation.value
            );
        }
-        /**
-         *
-         */
-        function setShowStatusBar() {
-            showStatusBar.value = !showStatusBar.value;
-            configRepository.setBool('VRCX_showStatusBar', showStatusBar.value);
-        }
        /**
         *
         */
@@ -1105,7 +1094,6 @@ export const useAppearanceSettingsStore = defineStore(
            isNavCollapsed,
            isDataTableStriped,
            showPointerOnHover,
-            showStatusBar,
            tableLimitsDialog,
            TABLE_MAX_SIZE_MIN,
            TABLE_MAX_SIZE_MAX,
@@ -1116,7 +1104,6 @@ export const useAppearanceSettingsStore = defineStore(
            setDisplayVRCPlusIconsAsAvatar,
            setHideNicknames,
            setShowInstanceIdInLocation,
-            setShowStatusBar,
            setIsAgeGatedInstancesVisible,
            setSortFavorites,
            setInstanceUsersSortAlphabetical,
--- a/src/stores/vrcStatus.js
+++ b/src/stores/vrcStatus.js
@@ -1,9 +1,7 @@
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { defineStore } from 'pinia';
-import { toast } from 'vue-sonner';
-import { useI18n } from 'vue-i18n';

-import { formatDateFilter, openExternalLink } from '../shared/utils';
+import { openExternalLink } from '../shared/utils';

 import webApiService from '../services/webapi';

@@ -18,14 +16,6 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
    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 statusText = computed(() => {
        if (lastStatus.value && lastStatusSummary.value) {
            return `${lastStatus.value}: ${lastStatusSummary.value}`;
@@ -35,17 +25,6 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {

    const hasIssue = computed(() => !!lastStatus.value);

-    /**
-     * @returns {void}
-     */
-    function dismissAlert() {
-        if (!alertRef.value) {
-            return;
-        }
-        toast.dismiss(alertRef.value);
-        alertRef.value = null;
-    }
-
    /**
     * @returns {void}
     */
@@ -53,75 +32,6 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
        openExternalLink('https://status.vrchat.com');
    }

-    /**
-     * @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_bar.servers_issue'), {
-            description: `${formatDateFilter(lastStatusTime.value, 'short')}: ${text}`,
-            duration: Infinity,
-            closeButton: true,
-            position: 'bottom-right',
-            action: {
-                label: 'Open',
-                onClick: () => openStatusPage()
-            }
-        });
-    }
-
-    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>}
     */
@@ -210,8 +120,6 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
        lastStatusSummary,
        statusText,
        hasIssue,
-        statusBarServersVisible,
-        setStatusBarServersVisible,
        openStatusPage,
        onBrowserFocus,
        getVrcStatus
--- a/src/views/Layout/MainLayout.vue
+++ b/src/views/Layout/MainLayout.vue
@@ -53,7 +53,7 @@
                    </ResizablePanelGroup>
                </SidebarInset>
            </SidebarProvider>
-            <StatusBar v-if="showStatusBar" />
+            <StatusBar />
        </div>

        <!-- ## Dialogs ## -->
@@ -119,7 +119,7 @@
    const router = useRouter();

    const appearanceSettingsStore = useAppearanceSettingsStore();
-    const { navWidth, isNavCollapsed, showStatusBar } = storeToRefs(appearanceSettingsStore);
+    const { navWidth, isNavCollapsed } = storeToRefs(appearanceSettingsStore);

    const sidebarOpen = computed(() => !isNavCollapsed.value);

--- a/src/views/Layout/tests/MainLayout.test.js
+++ b/src/views/Layout/tests/MainLayout.test.js
@@ -2,38 +2,113 @@ import { describe, expect, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { ref } from 'vue';

-const mocks = vi.hoisted(() => ({ replace: vi.fn(), setNavCollapsed: vi.fn(), setNavWidth: vi.fn() }));
+const mocks = vi.hoisted(() => ({
+    replace: vi.fn(),
+    setNavCollapsed: vi.fn(),
+    setNavWidth: vi.fn()
+}));

 vi.mock('pinia', async (i) => ({ ...(await i()), storeToRefs: (s) => s }));
-vi.mock('vue-router', () => ({ useRouter: () => ({ replace: (...a) => mocks.replace(...a) }) }));
-vi.mock('../../../services/watchState', () => ({ watchState: { isLoggedIn: false } }));
-vi.mock('../../../stores', () => ({ useAppearanceSettingsStore: () => ({ navWidth: ref(240), isNavCollapsed: ref(false), showStatusBar: ref(false), setNavCollapsed: (...a) => mocks.setNavCollapsed(...a), setNavWidth: (...a) => mocks.setNavWidth(...a) }) }));
-vi.mock('../../../composables/useMainLayoutResizable', () => ({ useMainLayoutResizable: () => ({ asideDefaultSize: 30, asideMinSize: 0, asideMaxPx: 480, mainDefaultSize: 70, handleLayout: vi.fn(), isAsideCollapsed: () => false, isAsideCollapsedStatic: false, isSideBarTabShow: ref(true) }) }));
-vi.mock('../../../components/ui/resizable', () => ({ ResizablePanelGroup: { template: '<div><slot :layout="[]" /></div>' }, ResizablePanel: { template: '<div><slot /></div>' }, ResizableHandle: { template: '<div />' } }));
-vi.mock('../../../components/ui/sidebar', () => ({ SidebarProvider: { template: '<div><slot /></div>' }, SidebarInset: { template: '<div><slot /></div>' } }));
-vi.mock('../../../components/nav-menu/NavMenu.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../Sidebar/Sidebar.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../../components/StatusBar.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../../components/dialogs/MainDialogContainer.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../../components/FullscreenImagePreview.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../../components/dialogs/ChooseFavoriteGroupDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../../components/dialogs/LaunchDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../Settings/dialogs/LaunchOptionsDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../Favorites/dialogs/FriendImportDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../Favorites/dialogs/WorldImportDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../Favorites/dialogs/AvatarImportDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../../components/dialogs/GroupDialog/GroupMemberModerationDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../../components/dialogs/InviteGroupDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../Settings/dialogs/VRChatConfigDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../Settings/dialogs/PrimaryPasswordDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../../components/dialogs/SendBoopDialog.vue', () => ({ default: { template: '<div />' } }));
-vi.mock('../../Settings/dialogs/ChangelogDialog.vue', () => ({ default: { template: '<div />' } }));
+vi.mock('vue-router', () => ({
+    useRouter: () => ({ replace: (...a) => mocks.replace(...a) })
+}));
+vi.mock('../../../services/watchState', () => ({
+    watchState: { isLoggedIn: false }
+}));
+vi.mock('../../../stores', () => ({
+    useAppearanceSettingsStore: () => ({
+        navWidth: ref(240),
+        isNavCollapsed: ref(false),
+        setNavCollapsed: (...a) => mocks.setNavCollapsed(...a),
+        setNavWidth: (...a) => mocks.setNavWidth(...a)
+    })
+}));
+vi.mock('../../../composables/useMainLayoutResizable', () => ({
+    useMainLayoutResizable: () => ({
+        asideDefaultSize: 30,
+        asideMinSize: 0,
+        asideMaxPx: 480,
+        mainDefaultSize: 70,
+        handleLayout: vi.fn(),
+        isAsideCollapsed: () => false,
+        isAsideCollapsedStatic: false,
+        isSideBarTabShow: ref(true)
+    })
+}));
+vi.mock('../../../components/ui/resizable', () => ({
+    ResizablePanelGroup: { template: '<div><slot :layout="[]" /></div>' },
+    ResizablePanel: { template: '<div><slot /></div>' },
+    ResizableHandle: { template: '<div />' }
+}));
+vi.mock('../../../components/ui/sidebar', () => ({
+    SidebarProvider: { template: '<div><slot /></div>' },
+    SidebarInset: { template: '<div><slot /></div>' }
+}));
+vi.mock('../../../components/nav-menu/NavMenu.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../Sidebar/Sidebar.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../../components/StatusBar.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../../components/dialogs/MainDialogContainer.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../../components/FullscreenImagePreview.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../../components/dialogs/ChooseFavoriteGroupDialog.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../../components/dialogs/LaunchDialog.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../Settings/dialogs/LaunchOptionsDialog.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../Favorites/dialogs/FriendImportDialog.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../Favorites/dialogs/WorldImportDialog.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../Favorites/dialogs/AvatarImportDialog.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock(
+    '../../../components/dialogs/GroupDialog/GroupMemberModerationDialog.vue',
+    () => ({ default: { template: '<div />' } })
+);
+vi.mock('../../../components/dialogs/InviteGroupDialog.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../Settings/dialogs/VRChatConfigDialog.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../Settings/dialogs/PrimaryPasswordDialog.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../../components/dialogs/SendBoopDialog.vue', () => ({
+    default: { template: '<div />' }
+}));
+vi.mock('../../Settings/dialogs/ChangelogDialog.vue', () => ({
+    default: { template: '<div />' }
+}));

 import MainLayout from '../MainLayout.vue';

 describe('MainLayout.vue', () => {
    it('redirects to login when not logged in', () => {
-        mount(MainLayout, { global: { stubs: { RouterView: { template: '<div />' }, KeepAlive: { template: '<div><slot /></div>' } } } });
+        mount(MainLayout, {
+            global: {
+                stubs: {
+                    RouterView: { template: '<div />' },
+                    KeepAlive: { template: '<div><slot /></div>' }
+                }
+            }
+        });
        expect(mocks.replace).toHaveBeenCalledWith({ name: 'login' });
    });
 });
--- a/src/views/Settings/components/Tabs/AppearanceTab.vue
+++ b/src/views/Settings/components/Tabs/AppearanceTab.vue
@@ -82,10 +82,6 @@
                :label="t('view.settings.appearance.appearance.show_instance_id')"
                :value="showInstanceIdInLocation"
                @change="setShowInstanceIdInLocation" />
-            <simple-switch
-                :label="t('view.settings.appearance.appearance.show_status_bar')"
-                :value="showStatusBar"
-                @change="setShowStatusBar" />
            <simple-switch
                :label="t('view.settings.appearance.appearance.nicknames')"
                :value="!hideNicknames"
@@ -393,8 +389,7 @@
        notificationIconDot,
        tablePageSizes,
        isDataTableStriped,
-        showPointerOnHover,
-        showStatusBar
+        showPointerOnHover
    } = storeToRefs(appearanceSettingsStore);

    const appLanguageDisplayName = computed(() => getLanguageName(String(appLanguage.value)));
@@ -403,7 +398,6 @@
        setDisplayVRCPlusIconsAsAvatar,
        setHideNicknames,
        setShowInstanceIdInLocation,
-        setShowStatusBar,
        setIsAgeGatedInstancesVisible,
        setInstanceUsersSortAlphabetical,
        setDtHour12,