From 9a99b37fea80650e7e2abc0773964e0de1304052 Mon Sep 17 00:00:00 2001
From: Natsumi <cmcooper123@hotmail.com>
Date: Tue, 16 Sep 2025 16:21:32 +1200
Subject: [PATCH] Fix invite response, small fixes

---
 .../dialogs/AvatarDialog/AvatarDialog.vue     | 12 ++++----
 .../AvatarDialog/SetAvatarStylesDialog.vue    | 29 ++++++++++++-------
 .../AvatarDialog/SetAvatarTagsDialog.vue      | 21 +++++++++-----
 .../dialogs/GroupDialog/GroupDialog.vue       |  2 +-
 .../dialogs/InviteDialog/InviteDialog.vue     |  6 ++--
 .../InviteDialog/SendInviteConfirmDialog.vue  | 15 +++++-----
 .../dialogs/InviteDialog/SendInviteDialog.vue | 14 +++++----
 .../UserDialog/SendInviteRequestDialog.vue    | 15 +++++-----
 .../dialogs/UserDialog/UserDialog.vue         |  8 ++---
 src/shared/utils/base/ui.js                   |  2 +-
 src/shared/utils/common.js                    |  5 +++-
 .../Favorites/dialogs/AvatarExportDialog.vue  |  5 +++-
 .../Favorites/dialogs/FriendExportDialog.vue  |  5 +++-
 .../Favorites/dialogs/WorldExportDialog.vue   |  5 +++-
 src/views/Notifications/Notification.vue      | 18 ++++++------
 .../EditAndSendInviteResponseDialog.vue       |  7 +++--
 .../SendInviteRequestResponseDialog.vue       | 19 +++++++-----
 .../SendInviteResponseConfirmDialog.vue       | 11 ++++---
 .../dialogs/SendInviteResponseDialog.vue      | 15 ++++++----
 src/views/Profile/Profile.vue                 |  9 +++---
 .../dialogs/EditInviteMessageDialog.vue       |  2 +-
 src/views/Tools/dialogs/GalleryDialog.vue     | 18 ++++--------
 22 files changed, 137 insertions(+), 106 deletions(-)

diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 8da70173..a9b4d0f4 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -568,8 +568,8 @@
             </el-tabs>
         </div>
         <template v-if="avatarDialog.visible">
-            <SetAvatarTagsDialog :set-avatar-tags-dialog="setAvatarTagsDialog" />
-            <SetAvatarStylesDialog :set-avatar-styles-dialog="setAvatarStylesDialog" />
+            <SetAvatarTagsDialog v-model:setAvatarTagsDialog="setAvatarTagsDialog" />
+            <SetAvatarStylesDialog v-model:setAvatarStylesDialog="setAvatarStylesDialog" />
             <ChangeAvatarImageDialog
                 v-model:changeAvatarImageDialogVisible="changeAvatarImageDialogVisible"
                 v-model:previousImageUrl="previousImageUrl" />
@@ -649,7 +649,7 @@
     const treeData = ref([]);
     const timeSpent = ref(0);
     const memo = ref('');
-    const setAvatarTagsDialog = reactive({
+    const setAvatarTagsDialog = ref({
         visible: false,
         loading: false,
         ownAvatars: [],
@@ -663,7 +663,7 @@
         contentAdult: false,
         contentSex: false
     });
-    const setAvatarStylesDialog = reactive({
+    const setAvatarStylesDialog = ref({
         visible: false,
         loading: false,
         avatarId: '',
@@ -1063,7 +1063,7 @@
     }
 
     function showSetAvatarTagsDialog(avatarId) {
-        const D = setAvatarTagsDialog;
+        const D = setAvatarTagsDialog.value;
         D.visible = true;
         D.loading = true;
         D.ownAvatars = [];
@@ -1130,7 +1130,7 @@
     }
 
     function showSetAvatarStylesDialog() {
-        const D = setAvatarStylesDialog;
+        const D = setAvatarStylesDialog.value;
         D.visible = true;
         D.loading = true;
         D.avatarId = avatarDialog.value.id;
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
index 9f149c92..8e03ced2 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
@@ -2,7 +2,8 @@
     <el-dialog
         ref="setAvatarStylesDialog"
         class="x-dialog"
-        v-model="setAvatarStylesDialog.visible"
+        :model-value="setAvatarStylesDialog.visible"
+        @close="closeSetAvatarStylesDialog"
         :title="t('dialog.set_avatar_styles.header')"
         width="400px"
         append-to-body>
@@ -50,10 +51,8 @@
                 style="margin-top: 10px"></el-input>
         </template>
         <template #footer>
-            <el-button size="small" @click="setAvatarStylesDialog.visible = false">{{
-                t('dialog.set_avatar_styles.cancel')
-            }}</el-button>
-            <el-button type="primary" size="small" @click="saveSetAvatarStylesDialog">{{
+            <el-button @click="closeSetAvatarStylesDialog">{{ t('dialog.set_avatar_styles.cancel') }}</el-button>
+            <el-button type="primary" @click="saveSetAvatarStylesDialog">{{
                 t('dialog.set_avatar_styles.save')
             }}</el-button>
         </template>
@@ -61,12 +60,13 @@
 </template>
 
 <script setup>
-    import { watch } from 'vue';
+    import { watch, defineEmits } from 'vue';
 
     import { useI18n } from 'vue-i18n';
     import { arraysMatch } from '../../../shared/utils';
     import { avatarRequest } from '../../../api';
     import { useAvatarStore } from '../../../stores';
+    import { ElMessage } from 'element-plus';
 
     const { t } = useI18n();
     const { applyAvatar } = useAvatarStore();
@@ -78,6 +78,8 @@
         }
     });
 
+    const emit = defineEmits(['update:setAvatarStylesDialog']);
+
     watch(
         () => props.setAvatarStylesDialog.visible,
         (newVal) => {
@@ -99,6 +101,13 @@
         props.setAvatarStylesDialog.availableAvatarStylesMap = stylesMap;
     }
 
+    function closeSetAvatarStylesDialog() {
+        emit('update:setAvatarStylesDialog', {
+            ...props.setAvatarStylesDialog,
+            visible: false
+        });
+    }
+
     function saveSetAvatarStylesDialog() {
         const primaryStyleId =
             props.setAvatarStylesDialog.availableAvatarStylesMap.get(props.setAvatarStylesDialog.primaryStyle) || '';
@@ -127,7 +136,7 @@
             props.setAvatarStylesDialog.initialSecondaryStyle === props.setAvatarStylesDialog.secondaryStyle &&
             arraysMatch(props.setAvatarStylesDialog.initialTags, tags)
         ) {
-            props.setAvatarStylesDialog.visible = false;
+            closeSetAvatarStylesDialog();
             return;
         }
 
@@ -141,11 +150,11 @@
             .saveAvatar(params)
             .then((args) => {
                 applyAvatar(args.json);
-                $message.success(t('dialog.set_avatar_styles.save_success'));
-                props.setAvatarStylesDialog.visible = false;
+                ElMessage({ message: t('dialog.set_avatar_styles.save_success'), type: 'success' });
+                closeSetAvatarStylesDialog();
             })
             .catch((error) => {
-                $message.error(t('dialog.set_avatar_styles.save_failed'));
+                ElMessage({ message: t('dialog.set_avatar_styles.save_failed'), type: 'error' });
                 console.error('Error saving avatar styles:', error);
             });
     }
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
index 97f1c111..ef3f0847 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
@@ -2,7 +2,8 @@
     <el-dialog
         ref="setAvatarTagsDialog"
         class="x-dialog"
-        v-model="setAvatarTagsDialog.visible"
+        :model-value="setAvatarTagsDialog.visible"
+        @close="closeSetAvatarTagsDialog"
         :title="t('dialog.set_avatar_tags.header')"
         width="770px"
         append-to-body>
@@ -82,10 +83,8 @@
             </div>
         </template>
         <template #footer>
-            <el-button size="small" @click="setAvatarTagsDialog.visible = false">{{
-                t('dialog.set_avatar_tags.cancel')
-            }}</el-button>
-            <el-button type="primary" size="small" @click="saveSetAvatarTagsDialog">{{
+            <el-button @click="closeSetAvatarTagsDialog">{{ t('dialog.set_avatar_tags.cancel') }}</el-button>
+            <el-button type="primary" @click="saveSetAvatarTagsDialog">{{
                 t('dialog.set_avatar_tags.save')
             }}</el-button>
         </template>
@@ -96,7 +95,7 @@
     import { Loading } from '@element-plus/icons-vue';
     import { ElMessage } from 'element-plus';
 
-    import { watch } from 'vue';
+    import { watch, defineEmits } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { avatarRequest } from '../../../api';
     import { useAvatarStore } from '../../../stores';
@@ -111,6 +110,8 @@
         }
     });
 
+    const emit = defineEmits(['update:setAvatarTagsDialog']);
+
     watch(
         () => props.setAvatarTagsDialog.visible,
         (newVal) => {
@@ -122,6 +123,13 @@
         }
     );
 
+    function closeSetAvatarTagsDialog() {
+        emit('update:setAvatarTagsDialog', {
+            ...props.setAvatarTagsDialog,
+            visible: false
+        });
+    }
+
     function updateSelectedAvatarTags() {
         const D = props.setAvatarTagsDialog;
         if (D.contentHorror) {
@@ -186,7 +194,6 @@
                 }
             }
         }
-        // props.setAvatarTagsDialog.forceUpdate++;
     }
 
     function setAvatarTagsSelectToggle() {
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index a838b0cf..1955586a 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -726,7 +726,7 @@
                 </el-tab-pane>
                 <el-tab-pane name="Posts" :label="t('dialog.group.posts.header')" lazy>
                     <template v-if="groupDialog.visible">
-                        <span style="margin-right: 10px"
+                        <span style="margin-right: 10px; vertical-align: top"
                             >{{ t('dialog.group.posts.posts_count') }} {{ groupDialog.posts.length }}</span
                         >
                         <el-input
diff --git a/src/components/dialogs/InviteDialog/InviteDialog.vue b/src/components/dialogs/InviteDialog/InviteDialog.vue
index 9c15d341..a7c9c4de 100644
--- a/src/components/dialogs/InviteDialog/InviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/InviteDialog.vue
@@ -1,7 +1,7 @@
 <template>
     <el-dialog
         class="x-dialog"
-        v-model="inviteDialog.visible"
+        :model-value="inviteDialog.visible"
         :title="t('dialog.invite.header')"
         width="500px"
         append-to-body>
@@ -163,8 +163,8 @@
             >
         </template>
         <SendInviteDialog
-            :send-invite-dialog-visible="sendInviteDialogVisible"
-            :send-invite-dialog="sendInviteDialog"
+            v-model:sendInviteDialogVisible="sendInviteDialogVisible"
+            v-model:sendInviteDialog="sendInviteDialog"
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
     </el-dialog>
diff --git a/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue b/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
index 7969ae19..50b60cd8 100644
--- a/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
+++ b/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
@@ -1,7 +1,7 @@
 <template>
     <el-dialog
         class="x-dialog"
-        :model-value="visible"
+        :model-value="isSendInviteConfirmDialogVisible"
         :title="t('dialog.invite_message.header')"
         width="400px"
         append-to-body
@@ -11,10 +11,10 @@
         </div>
 
         <template #footer>
-            <el-button type="small" @click="cancelInviteConfirm">
+            <el-button type="default" @click="cancelInviteConfirm">
                 {{ t('dialog.invite_message.cancel') }}
             </el-button>
-            <el-button type="primary" size="small" @click="sendInviteConfirm">
+            <el-button type="primary" @click="sendInviteConfirm">
                 {{ t('dialog.invite_message.confirm') }}
             </el-button>
         </template>
@@ -36,7 +36,7 @@
     const { currentUser } = storeToRefs(useUserStore());
 
     const props = defineProps({
-        visible: {
+        isSendInviteConfirmDialogVisible: {
             type: Boolean,
             required: true
         },
@@ -51,10 +51,10 @@
         }
     });
 
-    const emit = defineEmits(['update:model-value', 'closeInviteDialog']);
+    const emit = defineEmits(['update:isSendInviteConfirmDialogVisible', 'closeInviteDialog']);
 
     function cancelInviteConfirm() {
-        emit('update:model-value', false);
+        emit('update:isSendInviteConfirmDialogVisible', false);
     }
 
     function sendInviteConfirm() {
@@ -110,7 +110,8 @@
                 }
             };
             inviteLoop();
-        } else if (messageType === 'invite') {
+        } else if (messageType === 'message') {
+            // invite message
             D.params.messageSlot = slot;
             if (uploadImage.value) {
                 notificationRequest
diff --git a/src/components/dialogs/InviteDialog/SendInviteDialog.vue b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
index 29e57491..20339d67 100644
--- a/src/components/dialogs/InviteDialog/SendInviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
@@ -75,13 +75,15 @@
             </el-button>
         </template>
         <SendInviteConfirmDialog
-            v-model="isSendInviteConfirmDialogVisible"
-            :send-invite-dialog="sendInviteDialog"
+            v-model:isSendInviteConfirmDialogVisible="isSendInviteConfirmDialogVisible"
+            :sendInviteDialog="sendInviteDialog"
+            @update:sendInviteDialog="emit('update:sendInviteDialog', $event)"
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
         <EditAndSendInviteDialog
             :edit-and-send-invite-dialog="editAndSendInviteDialog"
-            :send-invite-dialog="sendInviteDialog"
+            :sendInviteDialog="sendInviteDialog"
+            @update:sendInviteDialog="emit('update:sendInviteDialog', $event)"
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
     </el-dialog>
@@ -120,7 +122,7 @@
         }
     });
 
-    const emit = defineEmits(['closeInviteDialog', 'update:sendInviteDialogVisible']);
+    const emit = defineEmits(['closeInviteDialog', 'update:sendInviteDialogVisible', 'update:sendInviteDialog']);
 
     const isSendInviteConfirmDialogVisible = ref(false);
 
@@ -130,12 +132,12 @@
     });
 
     function showSendInviteConfirmDialog(row) {
-        props.sendInviteDialog.messageSlot = row;
+        emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
         isSendInviteConfirmDialogVisible.value = true;
     }
 
     function showEditAndSendInviteDialog(row) {
-        props.sendInviteDialog.messageSlot = row;
+        emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
         editAndSendInviteDialog.value = {
             newMessage: row.message,
             visible: true
diff --git a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
index 73b81946..418275d4 100644
--- a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
+++ b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
@@ -2,7 +2,6 @@
     <el-dialog
         class="x-dialog"
         :model-value="sendInviteRequestDialogVisible"
-        @update:model-value="$emit('update:sendInviteRequestDialogVisible', $event)"
         :title="t('dialog.invite_request_message.header')"
         width="800px"
         append-to-body
@@ -49,13 +48,15 @@
             }}</el-button>
         </template>
         <SendInviteConfirmDialog
-            v-model="isSendInviteConfirmDialogVisible"
-            :send-invite-dialog="sendInviteDialog"
+            v-model:isSendInviteConfirmDialogVisible="isSendInviteConfirmDialogVisible"
+            :sendInviteDialog="sendInviteDialog"
+            @update:sendInviteDialog="emit('update:sendInviteDialog', $event)"
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
         <EditAndSendInviteDialog
             :edit-and-send-invite-dialog="editAndSendInviteDialog"
-            :send-invite-dialog="sendInviteDialog"
+            :sendInviteDialog="sendInviteDialog"
+            @update:sendInviteDialog="emit('update:sendInviteDialog', $event)"
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
     </el-dialog>
@@ -96,7 +97,7 @@
         }
     });
 
-    const emit = defineEmits(['update:sendInviteRequestDialogVisible', 'closeInviteDialog']);
+    const emit = defineEmits(['update:sendInviteRequestDialogVisible', 'closeInviteDialog', 'update:sendInviteDialog']);
 
     const isSendInviteConfirmDialogVisible = ref(false);
 
@@ -106,12 +107,12 @@
     });
 
     function showSendInviteConfirmDialog(row) {
-        props.sendInviteDialog.messageSlot = row;
+        emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
         isSendInviteConfirmDialogVisible.value = true;
     }
 
     function showEditAndSendInviteDialog(row) {
-        props.sendInviteDialog.messageSlot = row;
+        emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
         editAndSendInviteDialog.value = {
             newMessage: row.message,
             visible: true
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 2f5b6d4f..a40d4a43 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -1727,12 +1727,12 @@
             </el-tabs>
         </div>
         <SendInviteDialog
-            :send-invite-dialog-visible="sendInviteDialogVisible"
-            :send-invite-dialog="sendInviteDialog"
+            v-model:sendInviteDialogVisible="sendInviteDialogVisible"
+            v-model:sendInviteDialog="sendInviteDialog"
             @closeInviteDialog="closeInviteDialog" />
         <SendInviteRequestDialog
-            :send-invite-request-dialog-visible="sendInviteRequestDialogVisible"
-            :send-invite-dialog="sendInviteDialog"
+            v-model:sendInviteRequestDialogVisible="sendInviteRequestDialogVisible"
+            v-model:sendInviteDialog="sendInviteDialog"
             @closeInviteDialog="closeInviteDialog" />
         <template v-if="userDialog.visible">
             <PreviousInstancesUserDialog v-model:previous-instances-user-dialog="previousInstancesUserDialog" />
diff --git a/src/shared/utils/base/ui.js b/src/shared/utils/base/ui.js
index ef790640..995aa404 100644
--- a/src/shared/utils/base/ui.js
+++ b/src/shared/utils/base/ui.js
@@ -238,7 +238,7 @@ function setLoginContainerStyle(isDarkMode) {
         transition: background-color 0.3s ease;
     }
 
-    .x-login-container .el-input__inner {
+    .x-login-container .el-input__wrapper {
         background-color: ${inputBackgroundColor} !important;
         border: ${inputBorder} !important;
         transition: background-color 0.3s ease, border-color 0.3s ease;
diff --git a/src/shared/utils/common.js b/src/shared/utils/common.js
index 8bfb847b..c44a988e 100644
--- a/src/shared/utils/common.js
+++ b/src/shared/utils/common.js
@@ -163,7 +163,10 @@ function copyToClipboard(text, message = 'Copied successfully!') {
         })
         .catch((err) => {
             console.error('Copy failed:', err);
-            ElMessage.error('Copy failed!');
+            ElMessage({
+                message: 'Copy failed!',
+                type: 'error'
+            });
         });
 }
 
diff --git a/src/views/Favorites/dialogs/AvatarExportDialog.vue b/src/views/Favorites/dialogs/AvatarExportDialog.vue
index 4a65aa5c..d3a7d7d3 100644
--- a/src/views/Favorites/dialogs/AvatarExportDialog.vue
+++ b/src/views/Favorites/dialogs/AvatarExportDialog.vue
@@ -162,7 +162,10 @@
             })
             .catch((err) => {
                 console.error('Copy failed:', err);
-                ElMessage.error('Copy failed!');
+                ElMessage({
+                    message: 'Copy failed!',
+                    type: 'error'
+                });
             });
     }
     function updateAvatarExportDialog() {
diff --git a/src/views/Favorites/dialogs/FriendExportDialog.vue b/src/views/Favorites/dialogs/FriendExportDialog.vue
index 96bdc4eb..df6df937 100644
--- a/src/views/Favorites/dialogs/FriendExportDialog.vue
+++ b/src/views/Favorites/dialogs/FriendExportDialog.vue
@@ -109,7 +109,10 @@
             })
             .catch((err) => {
                 console.error('Copy failed:', err);
-                ElMessage.error('Copy failed!');
+                ElMessage({
+                    message: 'Copy failed!',
+                    type: 'error'
+                });
             });
     }
 
diff --git a/src/views/Favorites/dialogs/WorldExportDialog.vue b/src/views/Favorites/dialogs/WorldExportDialog.vue
index 934df201..a049c3a2 100644
--- a/src/views/Favorites/dialogs/WorldExportDialog.vue
+++ b/src/views/Favorites/dialogs/WorldExportDialog.vue
@@ -164,7 +164,10 @@
             })
             .catch((err) => {
                 console.error('Copy failed:', err);
-                ElMessage.error('Copy failed!');
+                ElMessage({
+                    message: 'Copy failed!',
+                    type: 'error'
+                });
             });
     }
 
diff --git a/src/views/Notifications/Notification.vue b/src/views/Notifications/Notification.vue
index cd9e5a59..7518b980 100644
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -318,11 +318,11 @@
                             <el-tooltip placement="top" content="Decline">
                                 <el-button
                                     v-if="shiftHeld"
-                                    style="color: #f56c6c; margin-left: 5px"
+                                    style="color: #f56c6c"
                                     type="text"
                                     :icon="Close"
                                     size="small"
-                                    class="button-pd-0"
+                                    :class="['button-pd-0', 'ml-5']"
                                     @click="hideNotification(scope.row)" />
                                 <el-button
                                     v-else
@@ -338,11 +338,11 @@
                         <el-tooltip placement="top" content="Delete log">
                             <el-button
                                 v-if="shiftHeld"
-                                style="color: #f56c6c; margin-left: 5px"
+                                style="color: #f56c6c"
                                 type="text"
-                                :icon="Close"
+                                :icon="Delete"
                                 size="small"
-                                class="button-pd-0"
+                                :class="['button-pd-0', 'ml-5']"
                                 @click="deleteNotificationLog(scope.row)" />
                             <el-button
                                 v-else
@@ -383,11 +383,11 @@
             </el-table-column>
         </DataTable>
         <SendInviteResponseDialog
-            :send-invite-response-dialog="sendInviteResponseDialog"
-            :send-invite-response-dialog-visible="sendInviteResponseDialogVisible" />
+            v-model:send-invite-response-dialog="sendInviteResponseDialog"
+            v-model:sendInviteResponseDialogVisible="sendInviteResponseDialogVisible" />
         <SendInviteRequestResponseDialog
-            :send-invite-response-dialog="sendInviteResponseDialog"
-            :send-invite-request-response-dialog-visible="sendInviteRequestResponseDialogVisible" />
+            v-model:send-invite-response-dialog="sendInviteResponseDialog"
+            v-model:sendInviteRequestResponseDialogVisible="sendInviteRequestResponseDialogVisible" />
     </div>
 </template>
 
diff --git a/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue b/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue
index 06eb5c93..1111496e 100644
--- a/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue
+++ b/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue
@@ -1,7 +1,8 @@
 <template>
     <el-dialog
         class="x-dialog"
-        v-model="editAndSendInviteResponseDialog.visible"
+        :model-value="editAndSendInviteResponseDialog.visible"
+        @close="cancelEditAndSendInviteResponse"
         :title="t('dialog.edit_send_invite_response_message.header')"
         width="400px"
         append-to-body>
@@ -52,10 +53,10 @@
         }
     });
 
-    const emit = defineEmits(['closeInviteDialog', 'update:editAndSendInviteResponseDialog']);
+    const emit = defineEmits(['closeInviteDialog', 'closeResponseConfirmDialog']);
 
     function cancelEditAndSendInviteResponse() {
-        emit('update:editAndSendInviteResponseDialog', { ...props.editAndSendInviteResponseDialog, visible: false });
+        emit('closeResponseConfirmDialog');
     }
 
     async function saveEditAndSendInviteResponse() {
diff --git a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
index 95a79023..1873a273 100644
--- a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
@@ -50,14 +50,13 @@
         <EditAndSendInviteResponseDialog
             :edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog"
             :send-invite-response-dialog="sendInviteResponseDialog"
-            @update:edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog = $event"
-            @update:send-invite-response-dialog="sendInviteResponseDialog = $event"
-            @closeInviteDialog="closeInviteDialog" />
+            @closeInviteDialog="closeInviteDialog"
+            @closeResponseConfirmDialog="closeResponseConfirmDialog" />
         <SendInviteResponseConfirmDialog
             :send-invite-response-dialog="sendInviteResponseDialog"
             :send-invite-response-confirm-dialog="sendInviteResponseConfirmDialog"
-            @update:send-invite-response-dialog="sendInviteResponseDialog = $event"
-            @closeInviteDialog="closeInviteDialog" />
+            @closeInviteDialog="closeInviteDialog"
+            @closeResponseConfirmDialog="closeResponseConfirmDialog" />
     </el-dialog>
 </template>
 
@@ -90,7 +89,7 @@
         }
     });
 
-    const emit = defineEmits(['update:sendInviteRequestResponseDialogVisible']);
+    const emit = defineEmits(['update:sendInviteRequestResponseDialogVisible', 'update:sendInviteResponseDialog']);
 
     const editAndSendInviteResponseDialog = ref({
         visible: false,
@@ -102,7 +101,7 @@
     });
 
     function showEditAndSendInviteResponseDialog(row) {
-        props.sendInviteResponseDialog.messageSlot = row;
+        emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
         editAndSendInviteResponseDialog.value = {
             newMessage: row.message,
             visible: true
@@ -110,7 +109,7 @@
     }
 
     function showSendInviteResponseConfirmDialog(row) {
-        props.sendInviteResponseDialog.messageSlot = row;
+        emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
         sendInviteResponseConfirmDialog.value.visible = true;
     }
 
@@ -118,6 +117,10 @@
         cancelSendInviteRequestResponse();
     }
 
+    function closeResponseConfirmDialog() {
+        sendInviteResponseConfirmDialog.value.visible = false;
+    }
+
     // function refreshInviteMessageTableData(...arg) {
     //     inviteMessagesRequest.refreshInviteMessageTableData(arg);
     // }
diff --git a/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue b/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
index 82f9e321..ab8ca447 100644
--- a/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
@@ -12,7 +12,7 @@
 
         <template #footer>
             <el-button @click="cancelInviteResponseConfirm">{{ t('dialog.invite_response_message.cancel') }}</el-button>
-            <el-button type="primary" size="small" @click="sendInviteResponseConfirm">{{
+            <el-button type="primary" @click="sendInviteResponseConfirm">{{
                 t('dialog.invite_response_message.confirm')
             }}</el-button>
         </template>
@@ -42,11 +42,10 @@
         }
     });
 
-    const emit = defineEmits(['update:sendInviteResponseConfirmDialog', 'closeInviteDialog']);
+    const emit = defineEmits(['closeResponseConfirmDialog', 'closeInviteDialog']);
 
     function cancelInviteResponseConfirm() {
-        emit('update:sendInviteResponseConfirmDialog', { visible: false });
-        props.sendInviteResponseConfirmDialog.visible = false;
+        emit('closeResponseConfirmDialog');
     }
 
     function sendInviteResponseConfirm() {
@@ -57,7 +56,7 @@
         };
         if (uploadImage.value) {
             notificationRequest
-                .sendInviteResponsePhoto(params, D.invite.id, D.messageSlot.messageType)
+                .sendInviteResponsePhoto(params, D.invite.id)
                 .catch((err) => {
                     throw err;
                 })
@@ -76,7 +75,7 @@
                 });
         } else {
             notificationRequest
-                .sendInviteResponse(params, D.invite.id, D.messageSlot.messageType)
+                .sendInviteResponse(params, D.invite.id)
                 .catch((err) => {
                     throw err;
                 })
diff --git a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
index 44330593..29e9d56e 100644
--- a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
@@ -46,13 +46,12 @@
         <EditAndSendInviteResponseDialog
             :edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog"
             :send-invite-response-dialog="sendInviteResponseDialog"
-            @update:edit-and-send-invite-response-dialog="editAndSendInviteResponseDialog = $event"
-            @update:send-invite-response-dialog="sendInviteResponseDialog = $event"
+            @closeResponseConfirmDialog="closeResponseConfirmDialog"
             @closeInviteDialog="closeInviteDialog" />
         <SendInviteResponseConfirmDialog
             :send-invite-response-dialog="sendInviteResponseDialog"
             :send-invite-response-confirm-dialog="sendInviteResponseConfirmDialog"
-            @update:send-invite-response-dialog="sendInviteResponseDialog = $event"
+            @closeResponseConfirmDialog="closeResponseConfirmDialog"
             @closeInviteDialog="closeInviteDialog" />
     </el-dialog>
 </template>
@@ -92,7 +91,7 @@
         newMessage: ''
     });
 
-    const emit = defineEmits(['update:sendInviteResponseDialogVisible']);
+    const emit = defineEmits(['update:sendInviteResponseDialogVisible', 'update:sendInviteResponseDialog']);
 
     const sendInviteResponseConfirmDialog = ref({
         visible: false
@@ -106,15 +105,19 @@
         emit('update:sendInviteResponseDialogVisible', false);
     }
 
+    function closeResponseConfirmDialog() {
+        sendInviteResponseConfirmDialog.value.visible = false;
+    }
+
     function showEditAndSendInviteResponseDialog(row) {
-        props.sendInviteResponseDialog.messageSlot = row;
+        emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
         editAndSendInviteResponseDialog.value = {
             newMessage: row.message,
             visible: true
         };
     }
     function showSendInviteResponseConfirmDialog(row) {
-        props.sendInviteResponseDialog.messageSlot = row;
+        emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
         sendInviteResponseConfirmDialog.value.visible = true;
     }
 </script>
diff --git a/src/views/Profile/Profile.vue b/src/views/Profile/Profile.vue
index 124a0b5c..be312ebf 100644
--- a/src/views/Profile/Profile.vue
+++ b/src/views/Profile/Profile.vue
@@ -481,12 +481,11 @@
                 </template>
             </el-tree>
         </div>
-        <DiscordNamesDialog :discord-names-dialog-visible="discordNamesDialogVisible" :friends="friends" />
+        <DiscordNamesDialog v-model:discordNamesDialogVisible="discordNamesDialogVisible" :friends="friends" />
         <ExportFriendsListDialog
-            :is-export-friends-list-dialog-visible="isExportFriendsListDialogVisible"
-            :friends="friends"
-            @update:isExportFriendsListDialogVisible="isExportFriendsListDialogVisible = $event" />
-        <ExportAvatarsListDialog :is-export-avatars-list-dialog-visible="isExportAvatarsListDialogVisible" />
+            v-model:isExportFriendsListDialogVisible="isExportFriendsListDialogVisible"
+            :friends="friends" />
+        <ExportAvatarsListDialog v-model:isExportAvatarsListDialogVisible="isExportAvatarsListDialogVisible" />
     </div>
 </template>
 
diff --git a/src/views/Profile/dialogs/EditInviteMessageDialog.vue b/src/views/Profile/dialogs/EditInviteMessageDialog.vue
index 6953b980..7467b815 100644
--- a/src/views/Profile/dialogs/EditInviteMessageDialog.vue
+++ b/src/views/Profile/dialogs/EditInviteMessageDialog.vue
@@ -72,7 +72,7 @@
                         });
                         throw new Error("VRChat API didn't update message, try again");
                     } else {
-                        ElMessage.success('Invite message updated');
+                        ElMessage({ message: 'Invite message updated', type: 'success' });
                     }
                     return args;
                 });
diff --git a/src/views/Tools/dialogs/GalleryDialog.vue b/src/views/Tools/dialogs/GalleryDialog.vue
index c597f396..19669e7a 100644
--- a/src/views/Tools/dialogs/GalleryDialog.vue
+++ b/src/views/Tools/dialogs/GalleryDialog.vue
@@ -524,8 +524,7 @@
                         @click="consumeInventoryBundle(item.id)"
                         size="small"
                         :icon="Plus"
-                        style="float: right"
-                        circle>
+                        style="float: right">
                         {{ t('dialog.gallery_icons.consume_bundle') }}
                     </el-button>
                 </div>
@@ -540,13 +539,7 @@
     import { storeToRefs } from 'pinia';
     import { ref } from 'vue';
     import { useI18n } from 'vue-i18n';
-    import {
-        // inventoryRequest,
-        miscRequest,
-        userRequest,
-        vrcPlusIconRequest,
-        vrcPlusImageRequest
-    } from '../../../api';
+    import { miscRequest, userRequest, vrcPlusIconRequest, vrcPlusImageRequest, inventoryRequest } from '../../../api';
     import { AppDebug } from '../../../service/appConfig';
     import { emojiAnimationStyleList, emojiAnimationStyleUrl } from '../../../shared/constants';
     import { extractFileId, formatDateFilter, getEmojiFileName, getPrintFileName } from '../../../shared/utils';
@@ -1059,9 +1052,9 @@
 
     async function consumeInventoryBundle(inventoryId) {
         try {
-            // const args = await inventoryRequest.consumeInventoryBundle({
-            //     inventoryId
-            // });
+            await inventoryRequest.consumeInventoryBundle({
+                inventoryId
+            });
             currentUserInventory.value.delete(inventoryId);
             const array = inventoryTable.value;
             const { length } = array;
@@ -1075,6 +1068,7 @@
         } catch (error) {
             console.error('Error consuming inventory bundle:', error);
         }
+        // -- response --
         // errors: []
         // inventoryItems : []
         // inventoryItemsCreated: 0