feat: add tools tab

2026-04-06 00:32:02 +02:00 · 2025-08-27 13:04:37 +09:00
parent d92818edea
commit 1b9fd75f97
16 changed files with 439 additions and 118 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,6 +45,7 @@
                "pug": "^3.0.3",
                "pug-plain-loader": "^1.1.0",
                "raw-loader": "^4.0.2",
+                "remixicon": "^4.6.0",
                "sass": "^1.90.0",
                "sass-loader": "^16.0.5",
                "vue": "^2.7.16",
@@ -17224,6 +17225,13 @@
                "node": ">= 0.10"
            }
        },
+        "node_modules/remixicon": {
+            "version": "4.6.0",
+            "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.6.0.tgz",
+            "integrity": "sha512-bKM5odjqE1yzVxEZGJE7F79WHhNrJFIKHXR+GG+P1IWXn8AnJZhl8SbIRDJsNAvIqx4VPkNwjuHfc42tutMDpQ==",
+            "dev": true,
+            "license": "Apache-2.0"
+        },
        "node_modules/remove-trailing-separator": {
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
        "pug": "^3.0.3",
        "pug-plain-loader": "^1.1.0",
        "raw-loader": "^4.0.2",
+        "remixicon": "^4.6.0",
        "sass": "^1.90.0",
        "sass-loader": "^16.0.5",
        "vue": "^2.7.16",
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,6 +19,7 @@
    import Notification from './views/Notifications/Notification.vue';
    import FriendList from './views/FriendList/FriendList.vue';
    import Charts from './views/Charts/Charts.vue';
+    import Tools from './views/Tools/Tools.vue';
    import Profile from './views/Profile/Profile.vue';
    import Settings from './views/Settings/Settings.vue';

@@ -59,6 +60,7 @@
            Notification,
            FriendList,
            Charts,
+            Tools,
            Profile,
            Settings,

--- a/src/app.pug
+++ b/src/app.pug
@@ -33,6 +33,8 @@ doctype html

        Charts

+        Tools
+
        Profile

        Settings
--- a/src/bootstrap.js
+++ b/src/bootstrap.js
@@ -3,6 +3,8 @@ import '@fontsource/noto-sans-jp';
 import '@fontsource/noto-sans-sc';
 import '@fontsource/noto-sans-tc';

+import 'remixicon/fonts/remixicon.css';
+
 import Vue from 'vue';
 import { PiniaVuePlugin } from 'pinia';
 import { DataTables } from 'vue-data-tables';
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -42,18 +42,19 @@
    import { useUiStore, useVRCXUpdaterStore } from '../stores';

    const navItems = [
-        { index: 'feed', icon: 'el-icon-news', tooltip: 'nav_tooltip.feed' },
-        { index: 'gameLog', icon: 'el-icon-s-data', tooltip: 'nav_tooltip.game_log' },
-        { index: 'playerList', icon: 'el-icon-tickets', tooltip: 'nav_tooltip.player_list' },
-        { index: 'search', icon: 'el-icon-search', tooltip: 'nav_tooltip.search' },
-        { index: 'favorite', icon: 'el-icon-star-off', tooltip: 'nav_tooltip.favorites' },
-        { index: 'friendLog', icon: 'el-icon-notebook-2', tooltip: 'nav_tooltip.friend_log' },
-        { index: 'moderation', icon: 'el-icon-finished', tooltip: 'nav_tooltip.moderation' },
-        { index: 'notification', icon: 'el-icon-bell', tooltip: 'nav_tooltip.notification' },
-        { index: 'friendList', icon: 'el-icon-s-management', tooltip: 'nav_tooltip.friend_list' },
-        { index: 'charts', icon: 'el-icon-data-analysis', tooltip: 'nav_tooltip.charts' },
-        { index: 'profile', icon: 'el-icon-user', tooltip: 'nav_tooltip.profile' },
-        { index: 'settings', icon: 'el-icon-s-tools', tooltip: 'nav_tooltip.settings' }
+        { index: 'feed', icon: 'ri-rss-line', tooltip: 'nav_tooltip.feed' },
+        { index: 'gameLog', icon: 'ri-history-line', tooltip: 'nav_tooltip.game_log' },
+        { index: 'playerList', icon: 'ri-group-3-line', tooltip: 'nav_tooltip.player_list' },
+        { index: 'search', icon: 'ri-search-line', tooltip: 'nav_tooltip.search' },
+        { index: 'favorite', icon: 'ri-star-line', tooltip: 'nav_tooltip.favorites' },
+        { index: 'friendLog', icon: 'ri-contacts-book-3-line', tooltip: 'nav_tooltip.friend_log' },
+        { index: 'moderation', icon: 'ri-user-forbid-line', tooltip: 'nav_tooltip.moderation' },
+        { index: 'notification', icon: 'ri-notification-2-line', tooltip: 'nav_tooltip.notification' },
+        { index: 'friendList', icon: 'ri-contacts-book-2-line', tooltip: 'nav_tooltip.friend_list' },
+        { index: 'charts', icon: 'ri-bar-chart-line', tooltip: 'nav_tooltip.charts' },
+        { index: 'tools', icon: 'ri-tools-line', tooltip: 'nav_tooltip.tools' },
+        { index: 'profile', icon: 'ri-user-line', tooltip: 'nav_tooltip.profile' },
+        { index: 'settings', icon: 'ri-settings-3-line', tooltip: 'nav_tooltip.settings' }
    ];

    const VRCXUpdaterStore = useVRCXUpdaterStore();
@@ -63,3 +64,16 @@
    const { menuActiveIndex, notifiedMenus } = storeToRefs(uiStore);
    const { selectMenu } = uiStore;
 </script>
+
+<style scoped>
+    .el-menu-item i[class*='ri-'] {
+        font-size: 19px;
+        width: 24px;
+        height: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        vertical-align: middle;
+    }
+</style>
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -1890,13 +1890,12 @@
    const { friendLogTable } = storeToRefs(useFriendStore());
    const { getFriendRequest, handleFriendDelete } = useFriendStore();
    const { previousImagesDialogVisible, previousImagesTable } = storeToRefs(useGalleryStore());
-    const { clearInviteImageUpload, showGalleryDialog, checkPreviousImageAvailable, showFullscreenImageDialog } =
-        useGalleryStore();
+    const { clearInviteImageUpload, checkPreviousImageAvailable, showFullscreenImageDialog } = useGalleryStore();
    const { isGameRunning } = storeToRefs(useGameStore());
    const { logout } = useAuthStore();
    const { cachedConfig } = storeToRefs(useAuthStore());
    const { applyPlayerModeration, handlePlayerModerationDelete } = useModerationStore();
-    const { shiftHeld } = storeToRefs(useUiStore());
+    const { shiftHeld, menuActiveIndex } = storeToRefs(useUiStore());

    watch(
        () => userDialog.value.loading,
@@ -2296,7 +2295,9 @@
        } else if (command === 'Previous Instances') {
            showPreviousInstancesUserDialog(D.ref);
        } else if (command === 'Manage Gallery') {
-            showGalleryDialog();
+            // redirect to tools tab
+            userDialog.value.visible = false;
+            menuActiveIndex.value = 'tools';
        } else if (command === 'Invite To Group') {
            showInviteGroupDialog('', D.id);
            // } else if (command === 'Send Boop') {
--- a/src/localization/en/en.json
+++ b/src/localization/en/en.json
@@ -12,6 +12,7 @@
        "notification": "Notification",
        "friend_list": "Friend List",
        "charts": "Charts",
+        "tools": "Tools",
        "profile": "Profile",
        "settings": "Settings"
    },
--- a/src/views/Profile/Profile.vue
+++ b/src/views/Profile/Profile.vue
@@ -529,7 +529,6 @@
        inviteRequestMessageTable,
        inviteRequestResponseMessageTable
    } = storeToRefs(useInviteStore());
-    const { showGalleryDialog } = useGalleryStore();
    const { menuActiveIndex } = storeToRefs(useUiStore());
    const { directAccessWorld } = useSearchStore();
    const { logout } = useAuthStore();
@@ -550,6 +549,11 @@

    const visits = ref(0);

+    // redirect to tools tab
+    function showGalleryDialog() {
+        menuActiveIndex.value = 'tools';
+    }
+
    function getVisits() {
        miscRequest.getVisits().then((args) => {
            visits.value = args.json;
--- a/src/views/Settings/Settings.vue
+++ b/src/views/Settings/Settings.vue
@@ -628,6 +628,7 @@
                        :label="t('view.settings.appearance.user_dialog.vrcx_memos')"
                        :value="!hideUserMemos"
                        @change="setHideUserMemos" />
+                    <!-- redirect to tools tab -->
                    <div class="options-container-item">
                        <span class="name">{{
                            t('view.settings.appearance.user_dialog.export_vrcx_memos_into_vrchat_notes')
@@ -641,6 +642,7 @@
                            >{{ t('view.settings.appearance.user_dialog.export_notes') }}</el-button
                        >
                    </div>
+                    <!-- redirect to tools tab end -->
                </div>
                <!--//- Appearance | Friend Log-->
                <div class="options-container">
@@ -1264,6 +1266,7 @@

            <!--//- "Pictures" Tab-->
            <el-tab-pane lazy :label="t('view.settings.category.pictures')">
+                <!-- redirect to tools tab -->
                <div class="options-container" style="margin-top: 0">
                    <span class="header">{{ t('view.settings.category.pictures') }}</span>
                    <div class="options-container-item" style="margin-top: 15px">
@@ -1274,6 +1277,7 @@
                        </el-button-group>
                    </div>
                </div>
+                <!-- redirect to tools tab end -->

                <div class="options-container">
                    <span class="header">{{ t('view.settings.pictures.pictures.open_folder') }}</span>
@@ -1845,9 +1849,7 @@
            </el-tab-pane>
        </el-tabs>
        <OpenSourceSoftwareNoticeDialog :ossDialog.sync="ossDialog" />
-        <NoteExportDialog :isNoteExportDialogVisible.sync="isNoteExportDialogVisible" />
        <NotificationPositionDialog :isNotificationPositionDialogVisible.sync="isNotificationPositionDialogVisible" />
-        <ScreenshotMetadataDialog :screenshotMetadataDialog="screenshotMetadataDialog" />
        <RegistryBackupDialog />
        <YouTubeApiDialog :isYouTubeApiDialogVisible.sync="isYouTubeApiDialogVisible" />
        <FeedFiltersDialog :feedFiltersDialogMode.sync="feedFiltersDialogMode" />
@@ -1886,9 +1888,7 @@
    } from '../../stores';
    import { photonEventTableTypeFilterList } from '../../shared/constants';
    import OpenSourceSoftwareNoticeDialog from './dialogs/OpenSourceSoftwareNoticeDialog.vue';
-    import NoteExportDialog from './dialogs/NoteExportDialog.vue';
    import NotificationPositionDialog from './dialogs/NotificationPositionDialog.vue';
-    import ScreenshotMetadataDialog from './dialogs/ScreenshotMetadataDialog.vue';
    import RegistryBackupDialog from './dialogs/RegistryBackupDialog.vue';
    import YouTubeApiDialog from './dialogs/YouTubeApiDialog.vue';
    import ChangelogDialog from './dialogs/ChangelogDialog.vue';
@@ -2179,20 +2179,10 @@
    ]);

    const ossDialog = ref(false);
-    const isNoteExportDialogVisible = ref(false);
    const feedFiltersDialogMode = ref('');
    const isNotificationPositionDialogVisible = ref(false);

    const isYouTubeApiDialogVisible = ref(false);
-    const screenshotMetadataDialog = ref({
-        visible: false,
-        loading: false,
-        search: '',
-        searchType: 'Player Name',
-        searchTypes: ['Player Name', 'Player ID', 'World  Name', 'World  ID'],
-        metadata: {},
-        isUploading: false
-    });

    const zoomLevel = ref(100);

@@ -2224,16 +2214,18 @@
        feedFiltersDialogMode.value = 'wrist';
    }

+    // redirect to tools tab
    function showNoteExportDialog() {
-        isNoteExportDialogVisible.value = true;
+        menuActiveIndex.value = 'tools';
    }

    function showNotificationPositionDialog() {
        isNotificationPositionDialogVisible.value = true;
    }

+    // redirect to tools tab
    function showScreenshotMetadataDialog() {
-        screenshotMetadataDialog.value.visible = true;
+        menuActiveIndex.value = 'tools';
    }

    function openVrcxAppDataFolder() {
--- a/src/views/Sidebar/Sidebar.vue
+++ b/src/views/Sidebar/Sidebar.vue
@@ -78,11 +78,9 @@
                        ({{ groupInstances.length }})
                    </span>
                </template>
-                <el-button class="group-calendar-button" icon="el-icon-date" circle @click="openGroupCalendarDialog" />
                <GroupsSidebar :group-instances="groupInstances" :group-order="inGameGroupOrder" />
            </el-tab-pane>
        </el-tabs>
-        <GroupCalendarDialog :visible="isGroupCalendarDialogVisible" @close="isGroupCalendarDialogVisible = false" />
    </div>
 </template>

@@ -100,7 +98,6 @@
    } from '../../stores';
    import FriendsSidebar from './components/FriendsSidebar.vue';
    import GroupsSidebar from './components/GroupsSidebar.vue';
-    import GroupCalendarDialog from '../../components/dialogs/GroupDialog/GroupCalendarDialog.vue';

    const { friends, isRefreshFriendsLoading, onlineFriendCount } = storeToRefs(useFriendStore());
    const { refreshFriendsList, confirmDeleteFriend } = useFriendStore();
@@ -110,15 +107,9 @@
    const { quickSearchItems } = storeToRefs(useSearchStore());
    const { inGameGroupOrder, groupInstances } = storeToRefs(useGroupStore());

-    const isGroupCalendarDialogVisible = ref(false);
-
    const isSideBarTabShow = computed(() => {
        return !(menuActiveIndex.value === 'friendList' || menuActiveIndex.value === 'charts');
    });
-
-    function openGroupCalendarDialog() {
-        isGroupCalendarDialogVisible.value = true;
-    }
 </script>

 <style scoped>
--- a/src/views/Tools/Tools.vue
+++ b/src/views/Tools/Tools.vue
@@ -0,0 +1,242 @@
+<template>
+    <div id="chart" class="x-container" v-show="menuActiveIndex === 'tools'">
+        <div class="options-container" style="margin-top: 0">
+            <span class="header">Tools</span>
+
+            <div class="tool-categories">
+                <div class="tool-category">
+                    <div class="category-header" @click="toggleCategory('group')">
+                        <i class="el-icon-arrow-right" :class="{ rotate: !categoryCollapsed['group'] }"></i>
+                        <span class="category-title">Group</span>
+                    </div>
+                    <div class="tools-grid" v-show="!categoryCollapsed['group']">
+                        <el-card :body-style="{ padding: '0px' }" class="tool-card">
+                            <div class="tool-content" @click="showGroupCalendarDialog">
+                                <div class="tool-icon">
+                                    <i class="ri-calendar-event-line"></i>
+                                </div>
+                                <div class="tool-info">
+                                    <div class="tool-name">Calendar</div>
+                                    <div class="tool-description">Group Events Calendar</div>
+                                </div>
+                            </div>
+                        </el-card>
+                    </div>
+                </div>
+
+                <div class="tool-category">
+                    <div class="category-header" @click="toggleCategory('image')">
+                        <i class="el-icon-arrow-right" :class="{ rotate: !categoryCollapsed['image'] }"></i>
+                        <span class="category-title">Image</span>
+                    </div>
+                    <div class="tools-grid" v-show="!categoryCollapsed['image']">
+                        <el-card :body-style="{ padding: '0px' }" class="tool-card">
+                            <div class="tool-content" @click="showScreenshotMetadataDialog">
+                                <div class="tool-icon">
+                                    <i class="ri-screenshot-2-line"></i>
+                                </div>
+                                <div class="tool-info">
+                                    <div class="tool-name">Screenshot Management</div>
+                                    <div class="tool-description">Manage screenshots and view metadata</div>
+                                </div>
+                            </div>
+                        </el-card>
+                        <el-card :body-style="{ padding: '0px' }" class="tool-card">
+                            <div class="tool-content" @click="showGalleryDialog">
+                                <div class="tool-icon">
+                                    <i class="ri-multi-image-line"></i>
+                                </div>
+                                <div class="tool-info">
+                                    <div class="tool-name">VRC+ Images & Inventory Management</div>
+                                    <div class="tool-description">Manage VRC+ Images & Inventory</div>
+                                </div>
+                            </div>
+                        </el-card>
+                    </div>
+                </div>
+
+                <div class="tool-category">
+                    <div class="category-header" @click="toggleCategory('user')">
+                        <i class="el-icon-arrow-right" :class="{ rotate: !categoryCollapsed['user'] }"></i>
+                        <span class="category-title">User</span>
+                    </div>
+                    <div class="tools-grid" v-show="!categoryCollapsed['user']">
+                        <el-card :body-style="{ padding: '0px' }" class="tool-card">
+                            <div class="tool-content" @click="showNoteExportDialog">
+                                <div class="tool-icon">
+                                    <i class="ri-user-shared-line"></i>
+                                </div>
+                                <div class="tool-info">
+                                    <div class="tool-name">Export User Notes</div>
+                                    <div class="tool-description">Export VRCX user memos to VRChat notes</div>
+                                </div>
+                            </div>
+                        </el-card>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <GroupCalendarDialog :visible="isGroupCalendarDialogVisible" @close="isGroupCalendarDialogVisible = false" />
+        <ScreenshotMetadataDialog
+            :isScreenshotMetadataDialogVisible="isScreenshotMetadataDialogVisible"
+            @close="isScreenshotMetadataDialogVisible = false" />
+        <NoteExportDialog
+            :isNoteExportDialogVisible="isNoteExportDialogVisible"
+            @close="isNoteExportDialogVisible = false" />
+    </div>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n-bridge';
+    import { useUiStore, useGalleryStore } from '../../stores';
+    import GroupCalendarDialog from './dialogs/GroupCalendarDialog.vue';
+    import ScreenshotMetadataDialog from './dialogs/ScreenshotMetadataDialog.vue';
+    import NoteExportDialog from './dialogs/NoteExportDialog.vue';
+
+    const { t } = useI18n();
+
+    const uiStore = useUiStore();
+    const { showGalleryDialog } = useGalleryStore();
+    const { menuActiveIndex } = storeToRefs(uiStore);
+
+    const categoryCollapsed = ref({
+        group: false,
+        image: false,
+        user: false
+    });
+
+    const isGroupCalendarDialogVisible = ref(false);
+    const isScreenshotMetadataDialogVisible = ref(false);
+    const isNoteExportDialogVisible = ref(false);
+
+    const showGroupCalendarDialog = () => {
+        isGroupCalendarDialogVisible.value = true;
+    };
+
+    const showScreenshotMetadataDialog = () => {
+        isScreenshotMetadataDialogVisible.value = true;
+    };
+
+    const showNoteExportDialog = () => {
+        isNoteExportDialogVisible.value = true;
+    };
+
+    const toggleCategory = (category) => {
+        categoryCollapsed.value[category] = !categoryCollapsed.value[category];
+    };
+</script>
+
+<style lang="scss" scoped>
+    .tool-categories {
+        margin-top: 20px;
+        padding: 0 20px;
+    }
+
+    .tool-category {
+        margin-bottom: 24px;
+
+        .category-header {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            padding: 8px 12px;
+            border-radius: 6px;
+            margin-bottom: 12px;
+            background-color: var(--el-color-primary-light-9);
+            transition: all 0.2s ease;
+
+            &:hover {
+                background-color: var(--el-color-primary-light-8);
+            }
+
+            .el-icon-arrow-right {
+                font-size: 14px;
+                margin-right: 8px;
+                transition: transform 0.3s;
+                color: var(--el-color-primary);
+            }
+
+            .category-title {
+                font-size: 16px;
+                font-weight: 600;
+                color: var(--el-color-primary);
+            }
+        }
+    }
+
+    .tools-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+        margin-left: 16px;
+    }
+
+    .tool-card {
+        transition: all 0.3s ease;
+        position: relative;
+        overflow: visible;
+        border-radius: 8px;
+        cursor: pointer;
+
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        ::v-deep .el-card__body {
+            overflow: visible;
+        }
+
+        .tool-content {
+            display: flex;
+            align-items: center;
+            padding: 20px 16px;
+
+            .tool-icon {
+                width: 56px;
+                height: 56px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: var(--el-color-primary-light-9);
+                border-radius: 12px;
+                margin-right: 20px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+                i {
+                    font-size: 28px;
+                    color: var(--el-color-primary);
+                }
+            }
+
+            .tool-info {
+                flex: 1;
+
+                .tool-name {
+                    font-size: 18px;
+                    font-weight: 600;
+                    color: var(--el-text-color-primary);
+                    margin-bottom: 4px;
+                }
+
+                .tool-description {
+                    font-size: 14px;
+                    color: var(--el-text-color-secondary);
+                    opacity: 0.8;
+                }
+            }
+        }
+    }
+
+    ::v-deep .el-card {
+        border-radius: 8px;
+        width: 100%;
+        overflow: visible;
+    }
+
+    .rotate {
+        transform: rotate(90deg);
+    }
+</style>
--- a/src/components/dialogs/GroupDialog/GroupCalendarEventCard.vue
+++ b/src/components/dialogs/GroupDialog/GroupCalendarEventCard.vue
@@ -65,6 +65,7 @@
        mode: {
            type: String,
            required: true,
+            // @ts-ignore
            validator: (value) => ['timeline', 'grid'].includes(value)
        },
        isFollowing: {
--- a/src/components/dialogs/GroupDialog/GroupCalendarDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupCalendarDialog.vue
@@ -49,7 +49,7 @@
                                        :class="{
                                            'has-events': filteredCalendar[formatDateKey(date)]?.length
                                        }">
-                                        {{ dayjs(date).format('D') }}
+                                        {{ dayjs(date).local().format('D') }}
                                        <div
                                            v-if="filteredCalendar[formatDateKey(date)]?.length"
                                            class="calendar-event-badge"
@@ -80,10 +80,13 @@
                    <div class="groups-grid" v-loading="isLoading">
                        <div v-if="filteredGroupEvents.length" class="groups-container">
                            <div v-for="group in filteredGroupEvents" :key="group.groupId" class="group-row">
-                                <div class="group-header" @click="showGroupDialog(group.groupId)">
+                                <div class="group-header" @click="toggleGroup(group.groupId)">
+                                    <i
+                                        class="el-icon-arrow-right"
+                                        :class="{ rotate: !groupCollapsed[group.groupId] }"></i>
                                    {{ group.groupName }}
                                </div>
-                                <div class="events-row">
+                                <div class="events-row" v-show="!groupCollapsed[group.groupId]">
                                    <GroupCalendarEventCard
                                        v-for="event in group.events"
                                        :key="event.id"
@@ -111,11 +114,10 @@
    import dayjs from 'dayjs';
    import { groupRequest } from '../../../api';
    import { useGroupStore } from '../../../stores';
-    import GroupCalendarEventCard from './GroupCalendarEventCard.vue';
+    import GroupCalendarEventCard from '../components/GroupCalendarEventCard.vue';
    import { replaceBioSymbols } from '../../../shared/utils';

    const { cachedGroups } = storeToRefs(useGroupStore());
-    const { showGroupDialog } = useGroupStore();

    const { t } = useI18n();

@@ -132,13 +134,15 @@
    const followingCalendar = ref([]);
    const selectedDay = ref(new Date());
    const isLoading = ref(false);
-    const viewMode = ref('timeline'); // 'timeline' | 'grid'
+    const viewMode = ref('timeline');
    const searchQuery = ref('');
+    const groupCollapsed = ref({});

    watch(
        () => props.visible,
        async (newVisible) => {
            if (newVisible) {
+                selectedDay.value = new Date();
                isLoading.value = true;
                await Promise.all([getCalendarData(), getFollowingCalendarData()])
                    .catch((error) => {
@@ -172,6 +176,74 @@
        }
    );

+    const groupedByGroupEvents = computed(() => {
+        const currentMonth = dayjs(selectedDay.value).month();
+        const currentYear = dayjs(selectedDay.value).year();
+
+        const currentMonthEvents = calendar.value.filter((event) => {
+            const eventDate = dayjs(event.startsAt);
+            return eventDate.month() === currentMonth && eventDate.year() === currentYear;
+        });
+
+        const groupMap = new Map();
+        currentMonthEvents.forEach((event) => {
+            const groupId = event.ownerId;
+            if (!groupMap.has(groupId)) {
+                groupMap.set(groupId, []);
+            }
+            groupMap.get(groupId).push(event);
+        });
+
+        Array.from(groupMap.values()).forEach((events) => {
+            events.sort((a, b) => (dayjs(a.startsAt).isBefore(dayjs(b.startsAt)) ? -1 : 1));
+        });
+
+        return Array.from(groupMap.entries()).map(([groupId, events]) => ({
+            groupId,
+            groupName: getGroupName(events[0]),
+            events: events
+        }));
+    });
+
+    const filteredGroupEvents = computed(() => {
+        const hasSearch = searchQuery.value.trim();
+        return !hasSearch
+            ? groupedByGroupEvents.value
+            : groupedByGroupEvents.value.filter((group) => {
+                  if (group.groupName.toLowerCase().includes(searchQuery.value.toLowerCase())) return true;
+
+                  return group.events.some(
+                      (event) =>
+                          event.title?.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+                          event.description?.toLowerCase().includes(searchQuery.value.toLowerCase())
+                  );
+              });
+    });
+
+    watch(
+        [filteredGroupEvents, searchQuery],
+        ([groups, search]) => {
+            const newCollapsed = { ...groupCollapsed.value };
+            let hasChanged = false;
+            const hasSearch = search.trim();
+
+            groups.forEach((group) => {
+                if (!(group.groupId in newCollapsed)) {
+                    newCollapsed[group.groupId] = false;
+                    hasChanged = true;
+                } else if (hasSearch) {
+                    newCollapsed[group.groupId] = false;
+                    hasChanged = true;
+                }
+            });
+
+            if (hasChanged) {
+                groupCollapsed.value = newCollapsed;
+            }
+        },
+        { immediate: true }
+    );
+
    const filteredCalendar = computed(() => {
        const result = {};
        calendar.value.forEach((item) => {
@@ -231,49 +303,6 @@
            .sort((a, b) => dayjs(a.startsAt).diff(dayjs(b.startsAt)));
    });

-    const groupedByGroupEvents = computed(() => {
-        const currentMonth = dayjs(selectedDay.value).month();
-        const currentYear = dayjs(selectedDay.value).year();
-
-        const currentMonthEvents = calendar.value.filter((event) => {
-            const eventDate = dayjs(event.startsAt);
-            return eventDate.month() === currentMonth && eventDate.year() === currentYear;
-        });
-
-        const groupMap = new Map();
-        currentMonthEvents.forEach((event) => {
-            const groupId = event.ownerId;
-            if (!groupMap.has(groupId)) {
-                groupMap.set(groupId, []);
-            }
-            groupMap.get(groupId).push(event);
-        });
-
-        Array.from(groupMap.values()).forEach((events) => {
-            events.sort((a, b) => (dayjs(a.startsAt).isBefore(dayjs(b.startsAt)) ? -1 : 1));
-        });
-
-        return Array.from(groupMap.entries()).map(([groupId, events]) => ({
-            groupId,
-            groupName: getGroupName(events[0]),
-            events: events
-        }));
-    });
-
-    const filteredGroupEvents = computed(() => {
-        if (!searchQuery.value.trim()) return groupedByGroupEvents.value;
-
-        const query = searchQuery.value.toLowerCase();
-        return groupedByGroupEvents.value.filter((group) => {
-            if (group.groupName.toLowerCase().includes(query)) return true;
-
-            return group.events.some(
-                (event) =>
-                    event.title?.toLowerCase().includes(query) || event.description?.toLowerCase().includes(query)
-            );
-        });
-    });
-
    const formatDateKey = (date) => dayjs(date).format('YYYY-MM-DD');

    function getGroupName(event) {
@@ -315,6 +344,13 @@
        viewMode.value = viewMode.value === 'timeline' ? 'grid' : 'timeline';
    }

+    function toggleGroup(groupId) {
+        groupCollapsed.value = {
+            ...groupCollapsed.value,
+            [groupId]: !groupCollapsed.value[groupId]
+        };
+    }
+
    function closeDialog() {
        emit('close');
    }
@@ -447,7 +483,7 @@
        display: flex;
        flex-direction: column;
        .search-container {
-            padding: 16px 20px;
+            padding: 2px 20px 12px 20px;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            justify-content: flex-end;
@@ -463,22 +499,24 @@
            .groups-container {
                overflow: visible;
                .group-row {
-                    margin-bottom: 24px;
+                    margin-bottom: 18px;
                    overflow: visible;
                    .group-header {
                        font-size: 16px;
                        font-weight: bold;
                        color: var(--el-text-color-primary);
-                        padding: 8px 12px 12px 12px;
-                        margin-bottom: 16px;
+                        padding: 4px 12px 10px 12px;
                        cursor: pointer;
-                        transition: all 0.3s ease;
                        border-radius: 4px;
-                        margin: 0 -12px 16px -12px;
-                        &:hover {
+                        margin: 0 -12px 10px -12px;
+                        display: flex;
+                        align-items: center;
+
+                        .el-icon-arrow-right {
+                            font-size: 14px;
+                            margin-right: 8px;
+                            transition: transform 0.3s;
                            color: var(--el-color-primary);
-                            background-color: var(--el-color-primary-light-9);
-                            transform: translateX(4px);
                        }
                    }
                    .events-row {
@@ -499,4 +537,8 @@
            }
        }
    }
+
+    .rotate {
+        transform: rotate(90deg);
+    }
 </style>
--- a/src/views/Settings/dialogs/NoteExportDialog.vue
+++ b/src/views/Settings/dialogs/NoteExportDialog.vue
@@ -139,7 +139,7 @@
        errors.value = '';
    }

-    const emit = defineEmits(['update:isNoteExportDialogVisible']);
+    const emit = defineEmits(['close']);

    function updateNoteExportDialog() {
        const data = [];
@@ -196,6 +196,6 @@
    }

    function closeDialog() {
-        emit('update:isNoteExportDialogVisible', false);
+        emit('close');
    }
 </script>
--- a/src/views/Settings/dialogs/ScreenshotMetadataDialog.vue
+++ b/src/views/Settings/dialogs/ScreenshotMetadataDialog.vue
@@ -1,12 +1,12 @@
 <template>
    <safe-dialog
        class="x-dialog"
-        :visible.sync="screenshotMetadataDialog.visible"
+        :visible="isScreenshotMetadataDialogVisible"
        :title="t('dialog.screenshot_metadata.header')"
        width="1050px"
-        top="10vh">
+        top="10vh"
+        @close="closeDialog">
        <div
-            v-if="screenshotMetadataDialog.visible"
            v-loading="screenshotMetadataDialog.loading"
            style="-webkit-app-region: drag"
            @dragover.prevent
@@ -170,7 +170,7 @@

 <script setup>
    import { storeToRefs } from 'pinia';
-    import { getCurrentInstance, ref, watch } from 'vue';
+    import { getCurrentInstance, reactive, ref, watch } from 'vue';
    import { useI18n } from 'vue-i18n-bridge';
    import { vrcPlusImageRequest } from '../../../api';
    import { useGalleryStore, useUserStore, useVrcxStore } from '../../../stores';
@@ -191,17 +191,19 @@
    const { fullscreenImageDialog } = storeToRefs(useGalleryStore());

    const props = defineProps({
-        screenshotMetadataDialog: {
-            type: Object,
+        isScreenshotMetadataDialogVisible: {
+            type: Boolean,
            required: true
        }
    });

+    const emit = defineEmits(['close']);
+
    watch(
-        () => props.screenshotMetadataDialog.visible,
+        () => props.isScreenshotMetadataDialogVisible,
        (newVal) => {
            if (newVal) {
-                if (!props.screenshotMetadataDialog.metadata.filePath) {
+                if (!screenshotMetadataDialog.metadata.filePath) {
                    getAndDisplayLastScreenshot();
                }
                window.addEventListener('keyup', handleComponentKeyup);
@@ -211,16 +213,32 @@
        }
    );

+    const screenshotMetadataDialog = reactive({
+        // visible: false,
+        loading: false,
+        search: '',
+        searchType: 'Player Name',
+        searchTypes: ['Player Name', 'Player ID', 'World  Name', 'World  ID'],
+        searchIndex: null,
+        searchResults: null,
+        metadata: {},
+        isUploading: false
+    });
+
    const screenshotMetadataSearchInputs = ref(0);
    const screenshotMetadataCarouselRef = ref(null);

    const handleComponentKeyup = (event) => {
        const carouselNavigation = { ArrowLeft: 0, ArrowRight: 2 }[event.key];
-        if (typeof carouselNavigation !== 'undefined' && props.screenshotMetadataDialog?.visible) {
+        if (typeof carouselNavigation !== 'undefined' && props.isScreenshotMetadataDialogVisible) {
            screenshotMetadataCarouselChange(carouselNavigation);
        }
    };

+    function closeDialog() {
+        emit('close');
+    }
+
    function handleDrop(event) {
        if (currentlyDroppingFile.value === null) {
            return;
@@ -302,12 +320,12 @@
                message: t('message.screenshot_metadata.deleted'),
                type: 'success'
            });
-            const D = props.screenshotMetadataDialog;
+            const D = screenshotMetadataDialog;
            getAndDisplayScreenshot(D.metadata.filePath, true);
        });
    }
    function uploadScreenshotToGallery() {
-        const D = props.screenshotMetadataDialog;
+        const D = screenshotMetadataDialog;
        if (D.metadata.fileSizeBytes > 10000000) {
            $message({
                message: t('message.file.too_large'),
@@ -342,7 +360,7 @@
            });
    }
    function screenshotMetadataSearch() {
-        const D = props.screenshotMetadataDialog;
+        const D = screenshotMetadataDialog;

        // Don't search if user is still typing
        screenshotMetadataSearchInputs.value++;
@@ -390,7 +408,7 @@
    }

    function screenshotMetadataCarouselChange(index) {
-        const D = props.screenshotMetadataDialog;
+        const D = screenshotMetadataDialog;
        const searchIndex = D.searchIndex;

        if (searchIndex !== null) {
@@ -422,7 +440,7 @@
    }

    function screenshotMetadataResetSearch() {
-        const D = props.screenshotMetadataDialog;
+        const D = screenshotMetadataDialog;

        D.search = '';
        D.searchIndex = null;
@@ -430,7 +448,7 @@
    }

    function screenshotMetadataCarouselChangeSearch(index) {
-        const D = props.screenshotMetadataDialog;
+        const D = screenshotMetadataDialog;
        let searchIndex = D.searchIndex;
        const filesArr = D.searchResults;

@@ -480,7 +498,7 @@
    async function displayScreenshotMetadata(json, needsCarouselFiles = true) {
        let time;
        let date;
-        const D = props.screenshotMetadataDialog;
+        const D = screenshotMetadataDialog;
        D.metadata.author = {};
        D.metadata.world = {};
        D.metadata.players = [];