replace ElMessage with Sonner

package-lock.json

@@ -8,7 +8,8 @@
             "license": "MIT",
             "dependencies": {
                 "hazardous": "^0.3.0",
-                "node-api-dotnet": "^0.9.18"
+                "node-api-dotnet": "^0.9.18",
+                "vue-sonner": "^2.0.9"
             },
             "devDependencies": {
                 "@electron/rebuild": "^4.0.2",
@@ -19082,6 +19083,28 @@
                 "node": ">=16.19.0"
             }
         },
+        "node_modules/vue-sonner": {
+            "version": "2.0.9",
+            "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-2.0.9.tgz",
+            "integrity": "sha512-i6BokNlNDL93fpzNxN/LZSn6D6MzlO+i3qXt6iVZne3x1k7R46d5HlFB4P8tYydhgqOrRbIZEsnRd3kG7qGXyw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@nuxt/kit": "^4.0.3",
+                "@nuxt/schema": "^4.0.3",
+                "nuxt": "^4.0.3"
+            },
+            "peerDependenciesMeta": {
+                "@nuxt/kit": {
+                    "optional": true
+                },
+                "@nuxt/schema": {
+                    "optional": true
+                },
+                "nuxt": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/walker": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",

package.json

@@ -50,10 +50,10 @@
         "@vitejs/plugin-vue": "^6.0.3",
         "@vitejs/plugin-vue-jsx": "^5.1.3",
         "@vueuse/core": "^14.1.0",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
         "animate.css": "^4.1.1",
         "babel-runtime": "^6.26.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "concurrently": "^9.2.1",
         "cross-env": "^10.1.0",
         "dayjs": "^1.11.19",
@@ -75,8 +75,8 @@
         "prettier": "^3.7.4",
         "reka-ui": "^2.7.0",
         "remixicon": "^4.8.0",
-        "tailwindcss": "^4.1.18",
         "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4.1.18",
         "tw-animate-css": "^1.4.0",
         "vite": "^7.3.0",
         "vue": "^3.5.26",
@@ -172,6 +172,7 @@
     },
     "dependencies": {
         "hazardous": "^0.3.0",
-        "node-api-dotnet": "^0.9.18"
+        "node-api-dotnet": "^0.9.18",
+        "vue-sonner": "^2.0.9"
     }
 }

src/App.vue

@@ -12,6 +12,7 @@
                 ondragover="event.preventDefault()"
                 ondrop="event.preventDefault()">
                 <RouterView></RouterView>
+                <Toaster position="top-center"></Toaster>
 
                 <VRCXUpdateDialog></VRCXUpdateDialog>
             </div>
@@ -23,6 +24,7 @@
     import { computed, onBeforeMount, onMounted } from 'vue';
     import { useI18n } from 'vue-i18n';
 
+    import { Toaster } from './components/ui/sonner';
     import { TooltipProvider } from './components/ui/tooltip';
     import { createGlobalStores } from './stores';
     import { initNoty } from './plugin/noty';

src/api/instance.js

@@ -1,4 +1,4 @@
-import { ElMessage } from 'element-plus';
+import { toast } from 'vue-sonner';
 
 import { i18n } from '../plugin/i18n';
 import { request } from '../service/request';
@@ -140,16 +140,10 @@ const instanceReq = {
             })
             .catch((err) => {
                 if (err?.error?.message) {
-                    ElMessage({
+                    toast.error(err.error.message);
-                        message: err.error.message,
-                        type: 'error'
-                    });
                     throw err;
                 }
-                ElMessage({
+                toast.error(i18n.global.t('message.instance.not_allowed'));
-                    message: i18n.global.t('message.instance.not_allowed'),
-                    type: 'error'
-                });
                 throw err;
             });
     }

src/app.css

@@ -12,6 +12,7 @@
 @import 'animate.css/animate.min.css';
 @import 'noty/lib/noty.css';
 @import 'remixicon/fonts/remixicon.css';
+@import 'vue-sonner/style.css';
 
 @import './styles/flags.css';
 @import './styles/animated-emoji.css';

src/components/FullscreenImagePreview.vue

@@ -38,8 +38,8 @@
 <script setup>
     import { CopyDocument, Download, RefreshLeft, RefreshRight, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
     import { nextTick, ref, watch } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
 
     import Noty from 'noty';
 
@@ -92,10 +92,7 @@
         if (!url) {
             return;
         }
-        const msg = ElMessage({
+        const msg = toast.info('Downloading image...');
-            message: 'Downloading image...',
-            type: 'info'
-        });
         try {
             const response = await webApiService.execute({
                 url,
@@ -109,10 +106,7 @@
                     'image/png': await (await fetch(response.data)).blob()
                 })
             ]);
-            ElMessage({
+            toast.success('Image copied to clipboard');
-                message: 'Image copied to clipboard',
-                type: 'success'
-            });
         } catch (error) {
             console.error('Error downloading image:', error);
             new Noty({
@@ -120,7 +114,7 @@
                 text: escapeTag(`Failed to download image. ${url}`)
             }).show();
         } finally {
-            msg.close();
+            toast.dismiss(msg);
         }
     }
 
@@ -128,10 +122,7 @@
         if (!url) {
             return;
         }
-        const msg = ElMessage({
+        const msg = toast.info('Downloading image...');
-            message: 'Downloading image...',
-            type: 'info'
-        });
         try {
             const response = await webApiService.execute({
                 url,
@@ -163,7 +154,7 @@
                 text: escapeTag(`Failed to download image. ${url}`)
             }).show();
         } finally {
-            msg.close();
+            toast.dismiss(msg);
         }
     }
 </script>

src/components/InstanceInfo.vue

@@ -63,9 +63,10 @@
 </template>
 
 <script setup>
-    import { ElMessage, ElMessageBox } from 'element-plus';
     import { reactive, watch } from 'vue';
     import { CaretBottom } from '@element-plus/icons-vue';
+    import { ElMessageBox } from 'element-plus';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useGroupStore, useInstanceStore, useLocationStore, useUserStore } from '../stores';
@@ -132,7 +133,7 @@
                 if (action !== 'confirm') return;
                 const args = await miscRequest.closeInstance({ location, hardClose: false });
                 if (args.json) {
-                    ElMessage({ message: t('message.instance.closed'), type: 'success' });
+                    toast.success(t('message.instance.closed'));
                     instanceStore.applyInstance(args.json);
                 }
             })

src/components/InviteYourself.vue

@@ -16,9 +16,9 @@
 
 <script setup>
     import { Loading, Message } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { checkCanInviteSelf, parseLocation } from '../shared/utils';
@@ -52,7 +52,7 @@
                 shortName: props.shortname
             })
             .then((args) => {
-                ElMessage({ message: 'Self invite sent', type: 'success' });
+                toast.success('Self invite sent');
                 return args;
             });
     }

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -567,8 +567,9 @@
         Warning
     } from '@element-plus/icons-vue';
     import { computed, defineAsyncComponent, nextTick, reactive, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import {
@@ -787,10 +788,7 @@
                                         avatarId: D.id
                                     })
                                     .then((args) => {
-                                        ElMessage({
+                                        toast.success('Fallback avatar changed');
-                                            message: 'Fallback avatar changed',
-                                            type: 'success'
-                                        });
                                         return args;
                                     });
                                 break;
@@ -803,10 +801,7 @@
                                     .then((args) => {
                                         // 'AVATAR-MODERATION';
                                         applyAvatarModeration(args.json);
-                                        ElMessage({
+                                        toast.success('Avatar blocked');
-                                            message: 'Avatar blocked',
-                                            type: 'success'
-                                        });
                                         return args;
                                     });
                                 break;
@@ -835,10 +830,7 @@
                                     })
                                     .then((args) => {
                                         applyAvatar(args.json);
-                                        ElMessage({
+                                        toast.success('Avatar updated to public');
-                                            message: 'Avatar updated to public',
-                                            type: 'success'
-                                        });
                                         return args;
                                     });
                                 break;
@@ -850,10 +842,7 @@
                                     })
                                     .then((args) => {
                                         applyAvatar(args.json);
-                                        ElMessage({
+                                        toast.success('Avatar updated to private');
-                                            message: 'Avatar updated to private',
-                                            type: 'success'
-                                        });
                                         return args;
                                     });
                                 break;
@@ -876,10 +865,7 @@
                                             sortUserDialogAvatars(array);
                                         }
 
-                                        ElMessage({
+                                        toast.success('Avatar deleted');
-                                            message: 'Avatar deleted',
-                                            type: 'success'
-                                        });
                                         D.visible = false;
                                         return args;
                                     });
@@ -890,10 +876,7 @@
                                         avatarId: D.id
                                     })
                                     .then((args) => {
-                                        ElMessage({
+                                        toast.success('Imposter deleted');
-                                            message: 'Imposter deleted',
-                                            type: 'success'
-                                        });
                                         showAvatarDialog(D.id);
                                         return args;
                                     });
@@ -904,10 +887,7 @@
                                         avatarId: D.id
                                     })
                                     .then((args) => {
-                                        ElMessage({
+                                        toast.success('Imposter queued for creation');
-                                            message: 'Imposter queued for creation',
-                                            type: 'success'
-                                        });
                                         return args;
                                     });
                                 break;
@@ -926,10 +906,7 @@
                                                 avatarId: D.id
                                             })
                                             .then((args) => {
-                                                ElMessage({
+                                                toast.success('Imposter deleted and queued for creation');
-                                                    message: 'Imposter deleted and queued for creation',
-                                                    type: 'success'
-                                                });
                                                 return args;
                                             });
                                     });
@@ -968,10 +945,7 @@
                         })
                         .then((args) => {
                             applyAvatar(args.json);
-                            ElMessage({
+                            toast.success(t('prompt.change_avatar_description.message.success'));
-                                message: t('prompt.change_avatar_description.message.success'),
-                                type: 'success'
-                            });
                             return args;
                         });
                 }
@@ -996,10 +970,7 @@
                         })
                         .then((args) => {
                             applyAvatar(args.json);
-                            ElMessage({
+                            toast.success(t('prompt.rename_avatar.message.success'));
-                                message: t('prompt.rename_avatar.message.success'),
-                                type: 'success'
-                            });
                             return args;
                         });
                 }
@@ -1130,10 +1101,7 @@
                 avatarRequest
                     .uploadAvatarGalleryImage(base64Body, avatarDialog.value.id)
                     .then(async (args) => {
-                        ElMessage({
+                        toast.success(t('message.avatar_gallery.uploaded'));
-                            message: t('message.avatar_gallery.uploaded'),
-                            type: 'success'
-                        });
                         console.log(args);
                         avatarDialog.value.galleryImages = await getAvatarGallery(avatarDialog.value.id);
                         return args;
@@ -1163,24 +1131,15 @@
         });
         const index = fileIds.indexOf(fileId);
         if (index === -1) {
-            ElMessage({
+            toast.error(t('message.avatar_gallery.not_found'));
-                message: t('message.avatar_gallery.not_found'),
-                type: 'error'
-            });
             return;
         }
         if (direction === -1 && index === 0) {
-            ElMessage({
+            toast.warning(t('message.avatar_gallery.already_first'));
-                message: t('message.avatar_gallery.already_first'),
-                type: 'warning'
-            });
             return;
         }
         if (direction === 1 && index === fileIds.length - 1) {
-            ElMessage({
+            toast.warning(t('message.avatar_gallery.already_last'));
-                message: t('message.avatar_gallery.already_last'),
-                type: 'warning'
-            });
             return;
         }
         if (direction === -1) {
@@ -1189,10 +1148,7 @@
             moveArrayItem(fileIds, index, index + 1);
         }
         avatarRequest.setAvatarGalleryOrder(fileIds).then(async (args) => {
-            ElMessage({
+            toast.success(t('message.avatar_gallery.reordered'));
-                message: t('message.avatar_gallery.reordered'),
-                type: 'success'
-            });
             avatarDialog.value.galleryImages = await getAvatarGallery(avatarDialog.value.id);
             return args;
         });
@@ -1201,10 +1157,7 @@
     function deleteAvatarGalleryImage(imageUrl) {
         const fileId = extractFileId(imageUrl);
         miscRequest.deleteFile(fileId).then((args) => {
-            ElMessage({
+            toast.success(t('message.avatar_gallery.deleted'));
-                message: t('message.avatar_gallery.deleted'),
-                type: 'success'
-            });
             getAvatarGallery(avatarDialog.value.id);
             return args;
         });

src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue

@@ -42,10 +42,10 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
     import { Upload } from '@element-plus/icons-vue';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { avatarRequest, imageRequest } from '../../../api';
@@ -286,10 +286,7 @@
     function avatarImageSet(args) {
         changeAvatarImageDialogLoading.value = false;
         if (args.json.imageUrl === args.params.imageUrl) {
-            ElMessage({
+            toast.success(t('message.avatar.image_changed'));
-                message: t('message.avatar.image_changed'),
-                type: 'success'
-            });
             emit('update:previousImageUrl', args.json.imageUrl);
         } else {
             $throw(0, 'avatar image change failed', args.params.imageUrl);
@@ -308,10 +305,7 @@
         const ref = applyAvatar(avatarArgs.json);
         changeAvatarImageDialogLoading.value = false;
         emit('update:previousImageUrl', ref.imageUrl);
-        ElMessage({
+        toast.success(t('message.avatar.image_changed'));
-            message: t('message.avatar.image_changed'),
-            type: 'success'
-        });
 
         // closeDialog();
     }

src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
     import { watch } from 'vue';
 
@@ -150,11 +150,11 @@
             .saveAvatar(params)
             .then((args) => {
                 applyAvatar(args.json);
-                ElMessage({ message: t('dialog.set_avatar_styles.save_success'), type: 'success' });
+                toast.success(t('dialog.set_avatar_styles.save_success'));
                 closeSetAvatarStylesDialog();
             })
             .catch((error) => {
-                ElMessage({ message: t('dialog.set_avatar_styles.save_failed'), type: 'error' });
+                toast.error(t('dialog.set_avatar_styles.save_failed'));
                 console.error('Error saving avatar styles:', error);
             });
     }

src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue

@@ -96,8 +96,8 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
     import { Loading } from '@element-plus/icons-vue';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
     import { watch } from 'vue';
 
@@ -254,10 +254,7 @@
             }
         } catch (err) {
             console.error(err);
-            ElMessage({
+            toast.error('Error saving avatar tags');
-                message: 'Error saving avatar tags',
-                type: 'error'
-            });
         } finally {
             D.loading = false;
             D.visible = false;

src/components/dialogs/GroupDialog/GallerySelectDialog.vue

@@ -54,8 +54,8 @@
 
 <script setup>
     import { Close, Refresh, Upload } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useGalleryStore, useUserStore } from '../../../stores';
@@ -98,18 +98,12 @@
         }
         if (files[0].size >= 100000000) {
             // 100MB
-            ElMessage({
+            toast.error(t('message.file.too_large'));
-                message: t('message.file.too_large'),
-                type: 'error'
-            });
             clearFile();
             return;
         }
         if (!files[0].type.match(/image.*/)) {
-            ElMessage({
+            toast.error(t('message.file.not_image'));
-                message: t('message.file.not_image'),
-                type: 'error'
-            });
             clearFile();
             return;
         }
@@ -118,10 +112,7 @@
             const base64Body = btoa(r.result.toString());
             vrcPlusImageRequest.uploadGalleryImage(base64Body).then((args) => {
                 handleGalleryImageAdd(args);
-                ElMessage({
+                toast.success(t('message.gallery.uploaded'));
-                    message: t('message.gallery.uploaded'),
-                    type: 'success'
-                });
                 if (Object.keys(galleryTable.value).length !== 0) {
                     galleryTable.value.unshift(args.json);
                 }

src/components/dialogs/GroupDialog/GroupDialog.vue

@@ -1155,8 +1155,9 @@
         Warning
     } from '@element-plus/icons-vue';
     import { computed, nextTick, reactive, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import {
@@ -1545,15 +1546,9 @@
                     getGroupDialogGroup(id);
                 }
                 if (args.json.membershipStatus === 'member') {
-                    ElMessage({
+                    toast.success('Group joined');
-                        message: 'Group joined',
-                        type: 'success'
-                    });
                 } else if (args.json.membershipStatus === 'requested') {
-                    ElMessage({
+                    toast.success('Group join request sent');
-                        message: 'Group join request sent',
-                        type: 'success'
-                    });
                 }
                 return args;
             });

src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue

@@ -864,8 +864,8 @@
 <script setup>
     import { ArrowDown, Delete, Loading, Refresh, Warning } from '@element-plus/icons-vue';
     import { reactive, ref, watch } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { debounce, formatDateFilter, hasGroupPermission, userImage, userImageFull } from '../../../shared/utils';
@@ -1080,18 +1080,12 @@
                 });
             } catch (err) {
                 console.error(err);
-                ElMessage({
+                toast.error(`Failed to delete group invites: ${err}`);
-                    message: `Failed to delete group invites: ${err}`,
-                    type: 'error'
-                });
                 allSuccess = false;
             }
         }
         if (allSuccess) {
-            ElMessage({
+            toast.success(`Deleted ${memberCount} group invites`);
-                message: `Deleted ${memberCount} group invites`,
-                type: 'success'
-            });
         }
         progressCurrent.value = 0;
         progressTotal.value = 0;
@@ -1132,10 +1126,7 @@
             }
             groupBansModerationTable.data = fetchedBans;
         } catch {
-            ElMessage({
+            toast.error('Failed to get group bans');
-                message: 'Failed to get group bans',
-                type: 'error'
-            });
         } finally {
             isGroupMembersLoading.value = false;
         }
@@ -1163,13 +1154,10 @@
                 await groupRequest.banGroupMember({ groupId: D.id, userId: user.userId });
             } catch (err) {
                 console.error(err);
-                ElMessage({
+                toast.error(`Failed to ban group member: ${err}`);
-                    message: `Failed to ban group member: ${err}`,
-                    type: 'error'
-                });
             }
         }
-        ElMessage({ message: `Banned ${memberCount} group members`, type: 'success' });
+        toast.success(`Banned ${memberCount} group members`);
         progressCurrent.value = 0;
         progressTotal.value = 0;
         getAllGroupBans(D.id);
@@ -1192,16 +1180,13 @@
                 await groupRequest.unbanGroupMember({ groupId: D.id, userId: user.userId });
             } catch (err) {
                 console.error(err);
-                ElMessage({
+                toast.error(`Failed to unban group member: ${err}`);
-                    message: `Failed to unban group member: ${err}`,
-                    type: 'error'
-                });
                 allSuccess = false;
             }
         }
 
         if (allSuccess) {
-            ElMessage({ message: `Unbanned ${memberCount} group members`, type: 'success' });
+            toast.success(`Unbanned ${memberCount} group members`);
         }
         progressCurrent.value = 0;
         progressTotal.value = 0;
@@ -1226,15 +1211,12 @@
                 await groupRequest.kickGroupMember({ groupId: D.id, userId: user.userId });
             } catch (err) {
                 console.error(err);
-                ElMessage({
+                toast.error(`Failed to kick group member: ${err}`);
-                    message: `Failed to kick group member: ${err}`,
-                    type: 'error'
-                });
                 allSuccess = false;
             }
         }
         if (allSuccess) {
-            ElMessage({ message: `Kicked ${memberCount} group members`, type: 'success' });
+            toast.success(`Kicked ${memberCount} group members`);
         }
         progressCurrent.value = 0;
         progressTotal.value = 0;
@@ -1262,15 +1244,12 @@
                 handleGroupMemberProps(args);
             } catch (err) {
                 console.error(err);
-                ElMessage({
+                toast.error(`Failed to set group member note for ${err}`);
-                    message: `Failed to set group member note for ${err}`,
-                    type: 'error'
-                });
                 allSuccess = false;
             }
         }
         if (allSuccess) {
-            ElMessage({ message: `Saved notes for ${memberCount} group members`, type: 'success' });
+            toast.success(`Saved notes for ${memberCount} group members`);
         }
         progressCurrent.value = 0;
         progressTotal.value = 0;
@@ -1310,19 +1289,13 @@
                     handleGroupMemberRoleChange(args);
                 } catch (err) {
                     console.error(err);
-                    ElMessage({
+                    toast.error(`Failed to remove group member roles: ${err}`);
-                        message: `Failed to remove group member roles: ${err}`,
-                        type: 'error'
-                    });
                     allSuccess = false;
                 }
             }
         }
         if (allSuccess) {
-            ElMessage({
+            toast.success(`Roles removed`);
-                message: `Roles removed`,
-                type: 'success'
-            });
         }
         progressCurrent.value = 0;
         progressTotal.value = 0;
@@ -1358,19 +1331,13 @@
                     handleGroupMemberRoleChange(args);
                 } catch (err) {
                     console.error(err);
-                    ElMessage({
+                    toast.error(`Failed to add group member roles: ${err}`);
-                        message: `Failed to add group member roles: ${err}`,
-                        type: 'error'
-                    });
                     allSuccess = false;
                 }
             }
         }
         if (allSuccess) {
-            ElMessage({
+            toast.success(`Added group member roles`);
-                message: `Added group member roles`,
-                type: 'success'
-            });
         }
         progressCurrent.value = 0;
         progressTotal.value = 0;
@@ -1462,10 +1429,7 @@
                 }
             }
         } catch {
-            ElMessage({
+            toast.error('Failed to get group logs');
-                message: 'Failed to get group logs',
-                type: 'error'
-            });
         } finally {
             isGroupMembersLoading.value = false;
         }
@@ -1492,18 +1456,12 @@
                 await groupRequest.deleteBlockedGroupRequest({ groupId: D.id, userId: user.userId });
             } catch (err) {
                 console.error(err);
-                ElMessage({
+                toast.error(`Failed to delete blocked group requests: ${err}`);
-                    message: `Failed to delete blocked group requests: ${err}`,
-                    type: 'error'
-                });
                 allSuccess = false;
             }
         }
         if (allSuccess) {
-            ElMessage({
+            toast.success(`Deleted ${memberCount} blocked group requests`);
-                message: `Deleted ${memberCount} blocked group requests`,
-                type: 'success'
-            });
         }
         progressCurrent.value = 0;
         progressTotal.value = 0;
@@ -1528,18 +1486,12 @@
                 await groupRequest.blockGroupInviteRequest({ groupId: D.id, userId: user.userId });
             } catch (err) {
                 console.error(err);
-                ElMessage({
+                toast.error(`Failed to block group join requests: ${err}`);
-                    message: `Failed to block group join requests: ${err}`,
-                    type: 'error'
-                });
                 allSuccess = false;
             }
         }
         if (allSuccess) {
-            ElMessage({
+            toast.success(`Blocked ${memberCount} group join requests`);
-                message: `Blocked ${memberCount} group join requests`,
-                type: 'success'
-            });
         }
         progressCurrent.value = 0;
         progressTotal.value = 0;
@@ -1565,18 +1517,12 @@
                 await groupRequest.rejectGroupInviteRequest({ groupId: D.id, userId: user.userId });
             } catch (err) {
                 console.error(err);
-                ElMessage({
+                toast.error(`Failed to reject group join requests: ${err}`);
-                    message: `Failed to reject group join requests: ${err}`,
-                    type: 'error'
-                });
                 allSuccess = false;
             }
         }
         if (allSuccess) {
-            ElMessage({
+            toast.success(`Rejected ${memberCount} group join requests`);
-                message: `Rejected ${memberCount} group join requests`,
-                type: 'success'
-            });
         }
         progressCurrent.value = 0;
         progressTotal.value = 0;
@@ -1601,18 +1547,12 @@
                 await groupRequest.acceptGroupInviteRequest({ groupId: D.id, userId: user.userId });
             } catch (err) {
                 console.error(err);
-                ElMessage({
+                toast.error(`Failed to accept group join requests: ${err}`);
-                    message: `Failed to accept group join requests: ${err}`,
-                    type: 'error'
-                });
                 allSuccess = false;
             }
         }
         if (allSuccess) {
-            ElMessage({
+            toast.success(`Accepted ${memberCount} group join requests`);
-                message: `Accepted ${memberCount} group join requests`,
-                type: 'success'
-            });
         }
         progressCurrent.value = 0;
         progressTotal.value = 0;
@@ -1657,10 +1597,7 @@
                 }
             }
         } catch {
-            ElMessage({
+            toast.error('Failed to get group join requests');
-                message: 'Failed to get group join requests',
-                type: 'error'
-            });
         } finally {
             isGroupMembersLoading.value = false;
         }
@@ -1690,10 +1627,7 @@
                 }
             }
         } catch {
-            ElMessage({
+            toast.error('Failed to get group join requests');
-                message: 'Failed to get group join requests',
-                type: 'error'
-            });
         } finally {
             isGroupMembersLoading.value = false;
         }
@@ -1727,10 +1661,7 @@
                 }
             }
         } catch {
-            ElMessage({
+            toast.error('Failed to get group invites');
-                message: 'Failed to get group invites',
-                type: 'error'
-            });
         } finally {
             isGroupMembersLoading.value = false;
         }

src/components/dialogs/GroupDialog/GroupPostEditDialog.vue

@@ -99,7 +99,7 @@
 
 <script setup>
     import { computed, ref } from 'vue';
-    import { ElMessage } from 'element-plus';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { groupRequest, vrcPlusIconRequest } from '../../../api';
@@ -160,10 +160,7 @@
             return;
         }
         if (!D.title || !D.text) {
-            ElMessage({
+            toast.warning('Title and text are required');
-                message: 'Title and text are required',
-                type: 'warning'
-            });
             return;
         }
         const params = {
@@ -180,20 +177,14 @@
         }
         groupRequest.editGroupPost(params).then((args) => {
             handleGroupPost(args);
-            ElMessage({
+            toast.success('Group post edited');
-                message: 'Group post edited',
-                type: 'success'
-            });
         });
         D.visible = false;
     }
     function createGroupPost() {
         const D = groupPostEditDialog.value;
         if (!D.title || !D.text) {
-            ElMessage({
+            toast.warning('Title and text are required');
-                message: 'Title and text are required',
-                type: 'warning'
-            });
             return;
         }
         const params = {
@@ -210,10 +201,7 @@
         }
         groupRequest.createGroupPost(params).then((args) => {
             handleGroupPost(args);
-            ElMessage({
+            toast.success('Group post created');
-                message: 'Group post created',
-                type: 'success'
-            });
         });
         D.visible = false;
     }

src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue

@@ -32,8 +32,8 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { instanceRequest, inviteMessagesRequest, notificationRequest } from '../../../api';
@@ -84,13 +84,10 @@
                 })
                 .then((args) => {
                     if (args.json[slot].message === I.messageSlot.message) {
-                        ElMessage({
+                        toast.error("VRChat API didn't update message, try again");
-                            message: "VRChat API didn't update message, try again",
-                            type: 'error'
-                        });
                         throw new Error("VRChat API didn't update message, try again");
                     } else {
-                        ElMessage('Invite message updated');
+                        toast('Invite message updated');
                     }
                     return args;
                 });
@@ -137,10 +134,7 @@
                 } else {
                     J.loading = false;
                     J.visible = false;
-                    ElMessage({
+                    toast.success('Invite sent');
-                        message: 'Invite sent',
-                        type: 'success'
-                    });
                 }
             };
             inviteLoop();
@@ -153,10 +147,7 @@
                         throw err;
                     })
                     .then((args) => {
-                        ElMessage({
+                        toast.success('Invite photo message sent');
-                            message: 'Invite photo message sent',
-                            type: 'success'
-                        });
                         return args;
                     });
             } else {
@@ -166,10 +157,7 @@
                         throw err;
                     })
                     .then((args) => {
-                        ElMessage({
+                        toast.success('Invite message sent');
-                            message: 'Invite message sent',
-                            type: 'success'
-                        });
                         return args;
                     });
             }
@@ -183,10 +171,7 @@
                         throw err;
                     })
                     .then((args) => {
-                        ElMessage({
+                        toast.success('Request invite photo message sent');
-                            message: 'Request invite photo message sent',
-                            type: 'success'
-                        });
                         return args;
                     });
             } else {
@@ -196,10 +181,7 @@
                         throw err;
                     })
                     .then((args) => {
-                        ElMessage({
+                        toast.success('Request invite message sent');
-                            message: 'Request invite message sent',
-                            type: 'success'
-                        });
                         return args;
                     });
             }

src/components/dialogs/InviteDialog/InviteDialog.vue

@@ -168,9 +168,10 @@
 </template>
 
 <script setup>
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useFriendStore, useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
@@ -280,10 +281,7 @@
                     } else {
                         D.loading = false;
                         D.visible = false;
-                        ElMessage({
+                        toast.success('Invite sent');
-                            message: 'Invite sent',
-                            type: 'success'
-                        });
                     }
                 };
                 inviteLoop();

src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue

@@ -22,8 +22,8 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { instanceRequest, notificationRequest } from '../../../api';
@@ -104,10 +104,7 @@
                 } else {
                     J.loading = false;
                     J.visible = false;
-                    ElMessage({
+                    toast.success('Invite message sent');
-                        message: 'Invite message sent',
-                        type: 'success'
-                    });
                 }
             };
             inviteLoop();
@@ -121,10 +118,7 @@
                         throw err;
                     })
                     .then((args) => {
-                        ElMessage({
+                        toast.success('Invite photo message sent');
-                            message: 'Invite photo message sent',
-                            type: 'success'
-                        });
                         return args;
                     });
             } else {
@@ -134,10 +128,7 @@
                         throw err;
                     })
                     .then((args) => {
-                        ElMessage({
+                        toast.success('Invite message sent');
-                            message: 'Invite message sent',
-                            type: 'success'
-                        });
                         return args;
                     });
             }
@@ -151,10 +142,7 @@
                         throw err;
                     })
                     .then((args) => {
-                        ElMessage({
+                        toast.success('Request invite photo message sent');
-                            message: 'Request invite photo message sent',
-                            type: 'success'
-                        });
                         return args;
                     });
             } else {
@@ -164,10 +152,7 @@
                         throw err;
                     })
                     .then((args) => {
-                        ElMessage({
+                        toast.success('Request invite message sent');
-                            message: 'Request invite message sent',
-                            type: 'success'
-                        });
                         return args;
                     });
             }

src/components/dialogs/InviteGroupDialog.vue

@@ -166,8 +166,9 @@
 
 <script setup>
     import { computed, nextTick, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { hasGroupPermission, userImage, userStatusClass } from '../../shared/utils';
@@ -244,10 +245,7 @@
                 }
                 // not allowed to invite
                 inviteGroupDialog.value.groupId = '';
-                ElMessage({
+                toast.error('You are not allowed to invite to this group');
-                    type: 'error',
-                    message: 'You are not allowed to invite to this group'
-                });
                 return args;
             })
             .finally(() => {

src/components/dialogs/LaunchDialog.vue

@@ -120,8 +120,9 @@
 <script setup>
     import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
     import { CopyDocument, Warning } from '@element-plus/icons-vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useFriendStore, useGameStore, useInviteStore, useLaunchStore, useLocationStore } from '../../stores';
@@ -273,10 +274,7 @@
                 shortName
             })
             .then((args) => {
-                ElMessage({
+                toast.success('Self invite sent');
-                    message: 'Self invite sent',
-                    type: 'success'
-                });
                 return args;
             });
     }
@@ -334,15 +332,9 @@
     async function copyInstanceMessage(input) {
         try {
             await navigator.clipboard.writeText(input);
-            ElMessage({
+            toast.success('Instance copied to clipboard');
-                message: 'Instance copied to clipboard',
-                type: 'success'
-            });
         } catch (error) {
-            ElMessage({
+            toast.error('Instance copied failed');
-                message: 'Instance copied failed',
-                type: 'error'
-            });
             console.error(error.message);
         }
     }

src/components/dialogs/NewInstanceDialog.vue

@@ -479,8 +479,8 @@
 
 <script setup>
     import { nextTick, ref, watch } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import {
@@ -735,10 +735,7 @@
                 worldId: L.worldId
             })
             .then((args) => {
-                ElMessage({
+                toast.success('Self invite sent');
-                    message: 'Self invite sent',
-                    type: 'success'
-                });
                 return args;
             });
     }

src/components/dialogs/UserDialog/BioDialog.vue

@@ -48,7 +48,7 @@
 
 <script setup>
     import { Delete } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { getFaviconUrl } from '../../../shared/utils';
@@ -78,10 +78,7 @@
             })
             .then((args) => {
                 D.visible = false;
-                ElMessage({
+                toast.success('Bio updated');
-                    message: 'Bio updated',
-                    type: 'success'
-                });
                 return args;
             });
     }

src/components/dialogs/UserDialog/PronounsDialog.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { userRequest } from '../../../api';
@@ -53,10 +53,7 @@
             })
             .then((args) => {
                 D.visible = false;
-                ElMessage({
+                toast.success('Pronouns updated');
-                    message: 'Pronouns updated',
-                    type: 'success'
-                });
                 return args;
             });
     }

src/components/dialogs/UserDialog/SocialStatusDialog.vue

@@ -63,8 +63,8 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useUserStore } from '../../../stores';
@@ -108,10 +108,7 @@
             })
             .then((args) => {
                 D.visible = false;
-                ElMessage({
+                toast.success('Status updated');
-                    message: 'Status updated',
-                    type: 'success'
-                });
                 return args;
             });
     }

src/components/dialogs/UserDialog/UserDialog.vue

@@ -293,9 +293,7 @@
                                         style="display: flex; justify-content: space-between; align-items: center">
                                         <div>
                                             {{ t('dialog.user.info.join_count') }}
-                                            <TooltipWrapper
+                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                                side="top"
-                                                :content="t('dialog.user.info.accuracy_notice')">
                                                 <el-icon style="margin-left: 3px"><Warning /></el-icon>
                                             </TooltipWrapper>
                                         </div>
@@ -333,9 +331,7 @@
                                     <div class="detail">
                                         <span class="name">
                                             {{ t('dialog.user.info.play_time') }}
-                                            <TooltipWrapper
+                                            <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
-                                                side="top"
-                                                :content="t('dialog.user.info.accuracy_notice')">
                                                 <el-icon style="margin-left: 3px"><Warning /></el-icon>
                                             </TooltipWrapper>
                                         </span>
@@ -875,9 +871,7 @@
                                             {{ t('dialog.group.tags.unsubscribed') }}</span
                                         >
                                     </el-button> -->
-                                    <TooltipWrapper
+                                    <TooltipWrapper side="right" :content="t('dialog.user.groups.leave_group_tooltip')">
-                                        side="right"
-                                        :content="t('dialog.user.groups.leave_group_tooltip')">
                                         <el-button
                                             v-if="shiftHeld"
                                             size="small"
@@ -1366,8 +1360,9 @@
         Warning
     } from '@element-plus/icons-vue';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import {
@@ -1756,10 +1751,7 @@
 
     function handleBadgeUpdate(args) {
         if (args.json) {
-            ElMessage({
+            toast.success(t('message.badge.updated'));
-                message: t('message.badge.updated'),
-                type: 'success'
-            });
         }
     }
 
@@ -1778,10 +1770,7 @@
                     D.isHideAvatar = false;
                 }
             } else {
-                ElMessage({
+                toast.error(t('message.avatar.change_moderation_failed'));
-                    message: t('message.avatar.change_moderation_failed'),
-                    type: 'error'
-                });
             }
         });
     }
@@ -1845,7 +1834,7 @@
                     D.id
                 )
                 .then((args) => {
-                    ElMessage('Request invite sent');
+                    toast('Request invite sent');
                     return args;
                 });
         } else if (command === 'Invite Message') {
@@ -1892,7 +1881,7 @@
                             D.id
                         )
                         .then((_args) => {
-                            ElMessage('Invite sent');
+                            toast('Invite sent');
                             return _args;
                         });
                 });
@@ -1904,10 +1893,7 @@
             if (fallbackAvatar) {
                 showAvatarDialog(fallbackAvatar);
             } else {
-                ElMessage({
+                toast.error('No fallback avatar set');
-                    message: 'No fallback avatar set',
-                    type: 'error'
-                });
             }
         } else if (command === 'Previous Instances') {
             showPreviousInstancesUserDialog(D.ref);
@@ -2021,10 +2007,7 @@
         } else if (ref.type === 'muteChat') {
             D.isMuteChat = true;
         }
-        ElMessage({
+        toast.success(t('message.user.moderated'));
-            message: t('message.user.moderated'),
-            type: 'success'
-        });
     }
 
     async function performUserDialogCommand(command, userId) {
@@ -2481,10 +2464,7 @@
                             homeLocation: ''
                         })
                         .then((args) => {
-                            ElMessage({
+                            toast.success('Home world has been reset');
-                                message: 'Home world has been reset',
-                                type: 'success'
-                            });
                             return args;
                         });
                 }
@@ -2554,10 +2534,7 @@
             );
         } catch (err) {
             console.error(err);
-            ElMessage({
+            toast.error('Failed to save in-game group order');
-                message: 'Failed to save in-game group order',
-                type: 'error'
-            });
         }
     }
 

src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue

@@ -42,10 +42,10 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
     import { Upload } from '@element-plus/icons-vue';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { imageRequest, worldRequest } from '../../../api';
@@ -281,10 +281,7 @@
     function worldImageSet(args) {
         changeWorldImageDialogLoading.value = false;
         if (args.json.imageUrl === args.params.imageUrl) {
-            ElMessage({
+            toast.success(t('message.world.image_changed'));
-                message: t('message.world.image_changed'),
-                type: 'success'
-            });
             emit('update:previousImageUrl', args.json.imageUrl);
         } else {
             $throw(0, 'World image change failed', args.params.imageUrl);
@@ -303,10 +300,7 @@
         const ref = applyWorld(worldArgs.json);
         changeWorldImageDialogLoading.value = false;
         emit('update:previousImageUrl', ref.imageUrl);
-        ElMessage({
+        toast.success(t('message.world.image_changed'));
-            message: t('message.world.image_changed'),
-            type: 'success'
-        });
 
         // closeDialog();
     }

src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue

@@ -90,7 +90,7 @@
 
 <script setup>
     import { computed, ref, watch } from 'vue';
-    import { ElMessage } from 'element-plus';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useWorldStore } from '../../../stores';
@@ -306,10 +306,7 @@
                 tags
             })
             .then((args) => {
-                ElMessage({
+                toast.success('Tags updated');
-                    message: 'Tags updated',
-                    type: 'success'
-                });
                 emit('update:isSetWorldTagsDialogVisible', false);
                 if (props.isWorldDialogVisible) {
                     showWorldDialog(args.json.id);

src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue

@@ -29,7 +29,7 @@
 <script setup>
     import { computed, ref, watch } from 'vue';
     import { Delete } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { worldRequest } from '../../../api';
@@ -76,10 +76,7 @@
                 urlList: urlList.value
             })
             .then((args) => {
-                ElMessage({
+                toast.success('Allowed Video Player Domains updated');
-                    message: 'Allowed Video Player Domains updated',
-                    type: 'success'
-                });
                 return args;
             });
         D.visible = false;

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -748,8 +748,9 @@
         Warning
     } from '@element-plus/icons-vue';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import {
@@ -983,10 +984,7 @@
                                         homeLocation: D.id
                                     })
                                     .then((args) => {
-                                        ElMessage({
+                                        toast.success('Home world updated');
-                                            message: 'Home world updated',
-                                            type: 'success'
-                                        });
                                         return args;
                                     });
                                 break;
@@ -996,10 +994,7 @@
                                         homeLocation: ''
                                     })
                                     .then((args) => {
-                                        ElMessage({
+                                        toast.success('Home world has been reset');
-                                            message: 'Home world has been reset',
-                                            type: 'success'
-                                        });
                                         return args;
                                     });
                                 break;
@@ -1009,10 +1004,7 @@
                                         worldId: D.id
                                     })
                                     .then((args) => {
-                                        ElMessage({
+                                        toast.success('World has been published');
-                                            message: 'World has been published',
-                                            type: 'success'
-                                        });
                                         return args;
                                     });
                                 break;
@@ -1022,10 +1014,7 @@
                                         worldId: D.id
                                     })
                                     .then((args) => {
-                                        ElMessage({
+                                        toast.success('World has been unpublished');
-                                            message: 'World has been unpublished',
-                                            type: 'success'
-                                        });
                                         return args;
                                     });
                                 break;
@@ -1038,10 +1027,7 @@
                                         if (args.params.worldId === worldDialog.value.id && worldDialog.value.visible) {
                                             worldDialog.value.hasPersistData = false;
                                         }
-                                        ElMessage({
+                                        toast.success('Persistent data has been deleted');
-                                            message: 'Persistent data has been deleted',
-                                            type: 'success'
-                                        });
                                         return args;
                                     });
                                 break;
@@ -1063,10 +1049,7 @@
                                             const array = Array.from(map.values());
                                             userDialog.value.worlds = array;
                                         }
-                                        ElMessage({
+                                        toast.success('World has been deleted');
-                                            message: 'World has been deleted',
-                                            type: 'success'
-                                        });
                                         D.visible = false;
                                         return args;
                                     });
@@ -1141,10 +1124,7 @@
                             name: value
                         })
                         .then((args) => {
-                            ElMessage({
+                            toast.success(t('prompt.rename_world.message.success'));
-                                message: t('prompt.rename_world.message.success'),
-                                type: 'success'
-                            });
                             return args;
                         });
                 }
@@ -1171,10 +1151,7 @@
                             description: value
                         })
                         .then((args) => {
-                            ElMessage({
+                            toast.success(t('prompt.change_world_description.message.success'));
-                                message: t('prompt.change_world_description.message.success'),
-                                type: 'success'
-                            });
                             return args;
                         });
                 }
@@ -1199,10 +1176,7 @@
                             capacity: Number(value)
                         })
                         .then((args) => {
-                            ElMessage({
+                            toast.success(t('prompt.change_world_capacity.message.success'));
-                                message: t('prompt.change_world_capacity.message.success'),
-                                type: 'success'
-                            });
                             return args;
                         });
                 }
@@ -1231,10 +1205,7 @@
                             recommendedCapacity: Number(value)
                         })
                         .then((args) => {
-                            ElMessage({
+                            toast.success(t('prompt.change_world_recommended_capacity.message.success'));
-                                message: t('prompt.change_world_recommended_capacity.message.success'),
-                                type: 'success'
-                            });
                             return args;
                         });
                 }
@@ -1265,10 +1236,7 @@
                                 processedValue = id2;
                             }
                         } catch {
-                            ElMessage({
+                            toast.error(t('prompt.change_world_preview.message.error'));
-                                message: t('prompt.change_world_preview.message.error'),
-                                type: 'error'
-                            });
                             return;
                         }
                     }
@@ -1279,10 +1247,7 @@
                                 previewYoutubeId: processedValue
                             })
                             .then((args) => {
-                                ElMessage({
+                                toast.success(t('prompt.change_world_preview.message.success'));
-                                    message: t('prompt.change_world_preview.message.success'),
-                                    type: 'success'
-                                });
                                 return args;
                             });
                     }
@@ -1318,51 +1283,33 @@
         navigator.clipboard
             .writeText(worldDialog.value.id)
             .then(() => {
-                ElMessage({
+                toast.success('World ID copied to clipboard');
-                    message: 'World ID copied to clipboard',
-                    type: 'success'
-                });
             })
             .catch((err) => {
                 console.error('copy failed:', err);
-                ElMessage({
+                toast.error('Copy failed');
-                    message: 'Copy failed',
-                    type: 'error'
-                });
             });
     }
     function copyWorldUrl() {
         navigator.clipboard
             .writeText(`https://vrchat.com/home/world/${worldDialog.value.id}`)
             .then(() => {
-                ElMessage({
+                toast.success('World URL copied to clipboard');
-                    message: 'World URL copied to clipboard',
-                    type: 'success'
-                });
             })
             .catch((err) => {
                 console.error('copy failed:', err);
-                ElMessage({
+                toast.error('Copy failed');
-                    message: 'Copy failed',
-                    type: 'error'
-                });
             });
     }
     function copyWorldName() {
         navigator.clipboard
             .writeText(worldDialog.value.ref.name)
             .then(() => {
-                ElMessage({
+                toast.success('World name copied to clipboard');
-                    message: 'World name copied to clipboard',
-                    type: 'success'
-                });
             })
             .catch((err) => {
                 console.error('copy failed:', err);
-                ElMessage({
+                toast.error('Copy failed');
-                    message: 'Copy failed',
-                    type: 'error'
-                });
             });
     }
     function showWorldAllowedDomainsDialog() {

src/components/ui/data-table/DataTableLayout.vue

@@ -66,7 +66,7 @@
                         <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                        <SelectItem v-for="size in pageSizes" :key="size" :value="String(size)">
+                        <SelectItem v-for="size in pageSizes" :key="String(size)" :value="String(size)">
                             {{ size }}
                         </SelectItem>
                     </SelectContent>
@@ -81,7 +81,9 @@
                 class="flex-none">
                 <PaginationContent v-slot="{ items }">
                     <PaginationPrevious />
-                    <template v-for="item in items" :key="item.key">
+                    <template
+                        v-for="(item, index) in items"
+                        :key="item.type === 'page' ? `page-${item.value}` : `ellipsis-${index}`">
                         <PaginationItem
                             v-if="item.type === 'page'"
                             :value="item.value"

src/components/ui/sonner/Sonner.vue

@@ -0,0 +1,62 @@
+<script setup>
+    import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from 'lucide-vue-next';
+    import { Toaster as Sonner } from 'vue-sonner';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        id: { type: String, required: false },
+        invert: { type: Boolean, required: false },
+        theme: { type: String, required: false },
+        position: { type: String, required: false },
+        closeButtonPosition: { type: String, required: false },
+        hotkey: { type: Array, required: false },
+        richColors: { type: Boolean, required: false },
+        expand: { type: Boolean, required: false },
+        duration: { type: Number, required: false },
+        gap: { type: Number, required: false },
+        visibleToasts: { type: Number, required: false },
+        closeButton: { type: Boolean, required: false },
+        toastOptions: { type: Object, required: false },
+        class: { type: String, required: false },
+        style: { type: Object, required: false },
+        offset: { type: [Object, String, Number], required: false },
+        mobileOffset: { type: [Object, String, Number], required: false },
+        dir: { type: String, required: false },
+        swipeDirections: { type: Array, required: false },
+        icons: { type: Object, required: false },
+        containerAriaLabel: { type: String, required: false }
+    });
+</script>
+
+<template>
+    <Sonner
+        :class="cn('toaster group', props.class)"
+        :style="{
+            '--normal-bg': 'var(--popover)',
+            '--normal-text': 'var(--popover-foreground)',
+            '--normal-border': 'var(--border)',
+            '--border-radius': 'var(--radius)'
+        }"
+        v-bind="props">
+        <template #success-icon>
+            <CircleCheckIcon class="size-4" />
+        </template>
+        <template #info-icon>
+            <InfoIcon class="size-4" />
+        </template>
+        <template #warning-icon>
+            <TriangleAlertIcon class="size-4" />
+        </template>
+        <template #error-icon>
+            <OctagonXIcon class="size-4" />
+        </template>
+        <template #loading-icon>
+            <div>
+                <Loader2Icon class="size-4 animate-spin" />
+            </div>
+        </template>
+        <template #close-icon>
+            <XIcon class="size-4" />
+        </template>
+    </Sonner>
+</template>

src/components/ui/sonner/index.js

@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue';

src/service/request.js

@@ -1,4 +1,5 @@
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
+import { toast } from 'vue-sonner';
 
 import Noty from 'noty';
 
@@ -198,10 +199,7 @@ export function request(endpoint, options) {
                 status === 404 &&
                 endpoint?.startsWith('avatars/')
             ) {
-                ElMessage({
+                toast.error(t('message.api_handler.avatar_private_or_deleted'));
-                    message: t('message.api_handler.avatar_private_or_deleted'),
-                    type: 'error'
-                });
                 avatarStore.avatarDialog.visible = false;
                 $throw(404, data.error?.message || '', endpoint);
             }

src/shared/utils/base/ui.js

@@ -1,5 +1,5 @@
-import { ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
+import { toast } from 'vue-sonner';
 
 import { THEME_CONFIG } from '../../constants';
 import { i18n } from '../../../plugin/i18n';
@@ -327,11 +327,7 @@ async function getThemeMode(configRepository) {
 
 function redirectToToolsTab() {
     router.push({ name: 'tools' });
-    ElMessage({
+    toast(i18n.global.t('view.tools.redirect_message'), { duration: 3000 });
-        message: i18n.global.t('view.tools.redirect_message'),
-        type: 'primary',
-        duration: 3000
-    });
 }
 
 export {

src/shared/utils/common.js

@@ -1,5 +1,6 @@
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 import { storeToRefs } from 'pinia';
+import { toast } from 'vue-sonner';
 
 import Noty from 'noty';
 
@@ -159,17 +160,11 @@ function copyToClipboard(text, message = 'Copied successfully!') {
     navigator.clipboard
         .writeText(text)
         .then(() => {
-            ElMessage({
+            toast.success(message);
-                message: message,
-                type: 'success'
-            });
         })
         .catch((err) => {
             console.error('Copy failed:', err);
-            ElMessage({
+            toast.error('Copy failed!');
-                message: 'Copy failed!',
-                type: 'error'
-            });
         });
 }
 

src/shared/utils/imageUpload.js

@@ -1,5 +1,4 @@
-import { ElMessage } from 'element-plus';
+import { toast } from 'vue-sonner';
-
 function resolveMessage(message) {
     if (typeof message === 'function') {
         return message();
@@ -47,10 +46,7 @@ export function handleImageUploadInput(event, options = {}) {
     const file = files[0];
     if (file.size >= maxSize) {
         if (tooLargeMessage) {
-            ElMessage({
+            toast.error(resolveMessage(tooLargeMessage));
-                message: resolveMessage(tooLargeMessage),
-                type: 'error'
-            });
         }
         clearInput();
         return { file: null, clearInput };
@@ -66,10 +62,7 @@ export function handleImageUploadInput(event, options = {}) {
 
     if (acceptRegex && !acceptRegex.test(file.type)) {
         if (invalidTypeMessage) {
-            ElMessage({
+            toast.error(resolveMessage(invalidTypeMessage));
-                message: resolveMessage(invalidTypeMessage),
-                type: 'error'
-            });
         }
         clearInput();
         return { file: null, clearInput };

src/stores/auth.js

@@ -1,6 +1,7 @@
 import { reactive, ref, watch } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 
 import Noty from 'noty';
@@ -477,10 +478,7 @@ export const useAuthStore = defineStore('Auth', () => {
                             });
                     })
                     .catch((_) => {
-                        ElMessage({
+                        toast.error('Incorrect primary password');
-                            message: 'Incorrect primary password',
-                            type: 'error'
-                        });
                         reject(_);
                     });
             } else {

src/stores/avatar.js

@@ -1,6 +1,7 @@
 import { nextTick, ref, watch } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 
 import {
     checkVRChatCache,
@@ -468,10 +469,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
             } catch (err) {
                 const msg = `Avatar search failed for ${search} with ${avatarProviderStore.avatarRemoteDatabaseProvider}\n${err}`;
                 console.error(msg);
-                ElMessage({
+                toast.error(msg);
-                    message: msg,
-                    type: 'error'
-                });
             }
         } else if (type === 'authorId') {
             const length =
@@ -546,10 +544,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
         } catch (err) {
             const msg = `Avatar lookup failed for ${authorId} with ${url}\n${err}`;
             console.error(msg);
-            ElMessage({
+            toast.error(msg);
-                message: msg,
-                type: 'error'
-            });
         }
         return avatars;
     }
@@ -568,10 +563,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
 
     async function selectAvatarWithoutConfirmation(id) {
         if (userStore.currentUser.currentAvatar === id) {
-            ElMessage({
+            toast.info('Avatar already selected');
-                message: 'Avatar already selected',
-                type: 'info'
-            });
             return;
         }
         return avatarRequest
@@ -579,10 +571,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
                 avatarId: id
             })
             .then(() => {
-                ElMessage({
+                toast.success('Avatar changed');
-                    message: 'Avatar changed',
-                    type: 'success'
-                });
             });
     }
 
@@ -614,10 +603,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
     ) {
         const fileId = extractFileId(currentAvatarImageUrl);
         if (!fileId) {
-            ElMessage({
+            toast.error('Sorry, the author is unknown');
-                message: 'Sorry, the author is unknown',
-                type: 'error'
-            });
         } else if (refUserId === userStore.currentUser.id) {
             showAvatarDialog(userStore.currentUser.currentAvatar);
         } else {
@@ -637,16 +623,11 @@ export const useAvatarStore = defineStore('Avatar', () => {
             }
             if (!avatarId) {
                 if (avatarInfo.ownerId === refUserId) {
-                    ElMessage({
+                    toast.warning(
-                        message:
+                        "It's personal (own) avatar or not found in avatar database"
-                            "It's personal (own) avatar or not found in avatar database",
+                    );
-                        type: 'warning'
-                    });
                 } else {
-                    ElMessage({
+                    toast.warning('Avatar not found in avatar database');
-                        message: 'Avatar not found in avatar database',
-                        type: 'warning'
-                    });
                     userStore.showUserDialog(avatarInfo.ownerId);
                 }
             }

src/stores/charts.js

@@ -1,6 +1,7 @@
 import { computed, reactive, ref, watch } from 'vue';
-import { ElMessage, ElNotification } from 'element-plus';
+import { ElNotification } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 
 import { useFriendStore } from './friend';
@@ -38,12 +39,8 @@ export const useChartsStore = defineStore('Charts', () => {
     const friendCount = computed(() => friendStore.friends.size || 0);
 
     function showInfoMessage(message, type) {
-        ElMessage({
+        const toastFn = toast[type] ?? toast;
-            message,
+        toastFn(message, { duration: 4000 });
-            type,
-            duration: 4000,
-            grouping: true
-        });
     }
 
     watch(

src/stores/favorite.js

@@ -1,6 +1,6 @@
 import { computed, reactive, ref, shallowReactive, watch } from 'vue';
-import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 
 import {
@@ -1071,12 +1071,11 @@ export const useFavoriteStore = defineStore('Favorite', () => {
      */
     function renameLocalAvatarFavoriteGroup(newName, group) {
         if (localAvatarFavoriteGroups.value.includes(newName)) {
-            ElMessage({
+            toast.error(
-                message: t('prompt.local_favorite_group_rename.message.error', {
+                t('prompt.local_favorite_group_rename.message.error', {
                     name: newName
-                }),
+                })
-                type: 'error'
+            );
-            });
             return;
         }
         localAvatarFavorites[newName] = localAvatarFavorites[group];
@@ -1092,12 +1091,11 @@ export const useFavoriteStore = defineStore('Favorite', () => {
      */
     function newLocalAvatarFavoriteGroup(group) {
         if (localAvatarFavoriteGroups.value.includes(group)) {
-            ElMessage({
+            toast.error(
-                message: t('prompt.new_local_favorite_group.message.error', {
+                t('prompt.new_local_favorite_group.message.error', {
                     name: group
-                }),
+                })
-                type: 'error'
+            );
-            });
             return;
         }
         if (!localAvatarFavorites[group]) {
@@ -1355,12 +1353,11 @@ export const useFavoriteStore = defineStore('Favorite', () => {
      */
     function renameLocalWorldFavoriteGroup(newName, group) {
         if (localWorldFavoriteGroups.value.includes(newName)) {
-            ElMessage({
+            toast.error(
-                message: t('prompt.local_favorite_group_rename.message.error', {
+                t('prompt.local_favorite_group_rename.message.error', {
                     name: newName
-                }),
+                })
-                type: 'error'
+            );
-            });
             return;
         }
         localWorldFavorites[newName] = localWorldFavorites[group];
@@ -1474,12 +1471,11 @@ export const useFavoriteStore = defineStore('Favorite', () => {
      */
     function newLocalWorldFavoriteGroup(group) {
         if (localWorldFavoriteGroups.value.includes(group)) {
-            ElMessage({
+            toast.error(
-                message: t('prompt.new_local_favorite_group.message.error', {
+                t('prompt.new_local_favorite_group.message.error', {
                     name: group
-                }),
+                })
-                type: 'error'
+            );
-            });
             return;
         }
         if (!localWorldFavorites[group]) {

src/stores/friend.js

@@ -1,6 +1,7 @@
 import { computed, reactive, ref, watch } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 
 import {
@@ -1606,10 +1607,7 @@ export const useFriendStore = defineStore('Friend', () => {
             }
         } catch (err) {
             if (!AppDebug.dontLogMeOut) {
-                ElMessage({
+                toast.error(t('message.friend.load_failed'));
-                    message: t('message.friend.load_failed'),
-                    type: 'error'
-                });
                 authStore.handleLogoutEvent();
                 throw err;
             }

src/stores/game.js

@@ -1,6 +1,7 @@
-import { ElMessage, ElMessageBox } from 'element-plus';
 import { reactive, ref } from 'vue';
+import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 
 import {
     deleteVRChatCache as _deleteVRChatCache,
@@ -123,10 +124,7 @@ export const useGameStore = defineStore('Game', () => {
         }
         AppApi.FocusWindow();
         const message = 'VRChat crashed, attempting to rejoin last instance';
-        ElMessage({
+        toast(message);
-            message,
-            type: 'info'
-        });
         const entry = {
             created_at: new Date().toJSON(),
             type: 'Event',

src/stores/gameLog.js

@@ -1,6 +1,7 @@
 import { reactive, ref, shallowReactive, watch } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 
 import dayjs from 'dayjs';
 
@@ -1400,11 +1401,9 @@ export const useGameLogStore = defineStore('GameLog', () => {
 
     async function disableGameLogDialog() {
         if (gameStore.isGameRunning) {
-            ElMessage({
+            toast.error(
-                message:
+                'VRChat needs to be closed before this option can be changed'
-                    'VRChat needs to be closed before this option can be changed',
+            );
-                type: 'error'
-            });
             return;
         }
         if (!advancedSettingsStore.gameLogDisabled) {

src/stores/group.js

@@ -1,6 +1,7 @@
 import { nextTick, reactive, ref, watch } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 
 import {
     groupRequest,
@@ -150,10 +151,7 @@ export const useGroupStore = defineStore('Group', () => {
             .catch((err) => {
                 D.loading = false;
                 D.visible = false;
-                ElMessage({
+                toast.error('Failed to load group');
-                    message: 'Failed to load group',
-                    type: 'error'
-                });
                 throw err;
             })
             .then((args) => {
@@ -596,10 +594,7 @@ export const useGroupStore = defineStore('Group', () => {
             })
             .then((args) => {
                 handleGroupMemberProps(args);
-                ElMessage({
+                toast.success('Group visibility updated');
-                    message: 'Group visibility updated',
-                    type: 'success'
-                });
                 return args;
             });
     }
@@ -611,10 +606,7 @@ export const useGroupStore = defineStore('Group', () => {
             })
             .then((args) => {
                 handleGroupMemberProps(args);
-                ElMessage({
+                toast.success('Group subscription updated');
-                    message: 'Group subscription updated',
-                    type: 'success'
-                });
                 return args;
             });
     }

src/stores/instance.js

@@ -1,6 +1,6 @@
-import { computed, reactive, ref, watch } from 'vue';
+import { reactive, ref, watch } from 'vue';
-import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 
 import {
@@ -16,8 +16,7 @@ import {
     hasGroupPermission,
     isRealInstance,
     parseLocation,
-    replaceBioSymbols,
+    replaceBioSymbols
-    replaceReactiveObject
 } from '../shared/utils';
 import { instanceRequest, userRequest, worldRequest } from '../api';
 import { database } from '../service/database';
@@ -72,6 +71,7 @@ export const useInstanceStore = defineStore('Instance', () => {
         lastUpdated: ''
     });
 
+    /** @type {import('vue').Ref<any>} */
     const currentInstanceLocation = ref({});
 
     const queuedInstances = reactive(new Map());
@@ -877,11 +877,8 @@ export const useInstanceStore = defineStore('Instance', () => {
 
     function removeAllQueuedInstances() {
         queuedInstances.forEach((ref) => {
-            ElMessage({
+            toast.info(`Removed instance ${ref.$worldName} from queue`);
-                message: `Removed instance ${ref.$worldName} from queue`,
+            toast.dismiss(ref.$msgBox);
-                type: 'info'
-            });
-            ref.$msgBox?.close();
         });
         queuedInstances.clear();
     }
@@ -893,7 +890,7 @@ export const useInstanceStore = defineStore('Instance', () => {
     function removeQueuedInstance(instanceId) {
         const ref = queuedInstances.get(instanceId);
         if (typeof ref !== 'undefined') {
-            ref.$msgBox.close();
+            toast.dismiss(ref.$msgBox);
             queuedInstances.delete(instanceId);
         }
     }
@@ -905,13 +902,12 @@ export const useInstanceStore = defineStore('Instance', () => {
     function applyQueuedInstance(instanceId) {
         queuedInstances.forEach((ref) => {
             if (ref.location !== instanceId) {
-                ElMessage({
+                toast.info(
-                    message: t('message.instance.removed_form_queue', {
+                    t('message.instance.removed_form_queue', {
                         worldName: ref.$worldName
-                    }),
+                    })
-                    type: 'info'
+                );
-                });
+                toast.dismiss(ref.$msgBox);
-                ref.$msgBox?.close();
                 queuedInstances.delete(ref.location);
             }
         });
@@ -953,7 +949,7 @@ export const useInstanceStore = defineStore('Instance', () => {
     function instanceQueueReady(instanceId) {
         const ref = queuedInstances.get(instanceId);
         if (typeof ref !== 'undefined') {
-            ref.$msgBox.close();
+            toast.dismiss(ref.$msgBox);
             queuedInstances.delete(instanceId);
         }
         const L = parseLocation(instanceId);
@@ -961,10 +957,7 @@ export const useInstanceStore = defineStore('Instance', () => {
         const groupName = group?.name ?? '';
         const worldName = ref?.$worldName ?? '';
         const location = displayLocation(instanceId, worldName, groupName);
-        ElMessage({
+        toast.success(`Instance ready to join ${location}`);
-            message: `Instance ready to join ${location}`,
-            type: 'success'
-        });
         const noty = {
             created_at: new Date().toJSON(),
             type: 'group.queueReady',
@@ -1021,14 +1014,16 @@ export const useInstanceStore = defineStore('Instance', () => {
             ref.$worldName,
             ref.$groupName
         );
-        ref.$msgBox?.close();
+        toast.dismiss(ref.$msgBox ?? undefined);
-        ref.$msgBox = ElMessage({
+        ref.$msgBox = toast.info(
-            message: `You are in position ${ref.position} of ${ref.queueSize} in the queue for ${location} `,
+            `You are in position ${ref.position} of ${ref.queueSize} in the queue for ${location} `,
-            type: 'info',
+            {
-            duration: 0,
+                duration: Infinity,
-            showClose: true,
+                position: 'bottom-right',
-            customClass: 'vrc-instance-queue-message'
+                closeButton: true,
-        });
+                class: 'vrc-instance-queue-message'
+            }
+        );
         queuedInstances.set(instanceId, ref);
         // workerTimers.setTimeout(this.instanceQueueTimeout, 3600000);
     }
@@ -1196,7 +1191,7 @@ export const useInstanceStore = defineStore('Instance', () => {
     // $app.methods.instanceQueueClear = function () {
     //     // remove all instances from queue
     //     queuedInstances.forEach((ref) => {
-    //         ref.$msgBox.close();
+    //         toast.dismiss(ref.$msgBox);
     //         queuedInstances.delete(ref.location);
     //     });
     // };

src/stores/invite.js

@@ -1,6 +1,6 @@
 import { computed, ref, watch } from 'vue';
-import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 
 import { instanceRequest, inviteMessagesRequest } from '../api';
 import { parseLocation } from '../shared/utils';
@@ -111,10 +111,7 @@ export const useInviteStore = defineStore('Invite', () => {
         instanceStore.createNewInstance(worldId).then((args) => {
             const location = args?.json?.location;
             if (!location) {
-                ElMessage({
+                toast.error('Failed to create instance');
-                    message: 'Failed to create instance',
-                    type: 'error'
-                });
                 return;
             }
             // self invite
@@ -134,10 +131,7 @@ export const useInviteStore = defineStore('Invite', () => {
                     worldId: L.worldId
                 })
                 .then((args) => {
-                    ElMessage({
+                    toast.success('Self invite sent');
-                        message: 'Self invite sent',
-                        type: 'success'
-                    });
                     return args;
                 });
         });

src/stores/launch.js

@@ -1,6 +1,6 @@
 import { nextTick, ref, watch } from 'vue';
-import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 
 import { instanceRequest } from '../api';
 import { parseLocation } from '../shared/utils';
@@ -103,11 +103,9 @@ export const useLaunchStore = defineStore('Launch', () => {
         }
         console.log('Attach Game', launchUrl, result);
         if (!result) {
-            ElMessage({
+            toast.warning(
-                message:
+                'Failed open instance in VRChat, falling back to self invite'
-                    'Failed open instance in VRChat, falling back to self invite',
+            );
-                type: 'warning'
-            });
             // self invite fallback
             try {
                 const L = parseLocation(location);
@@ -116,10 +114,7 @@ export const useLaunchStore = defineStore('Launch', () => {
                     worldId: L.worldId,
                     shortName
                 });
-                ElMessage({
+                toast.success('Self invite sent');
-                    message: 'Self invite sent',
-                    type: 'success'
-                });
             } catch (e) {
                 console.error(e);
             }
@@ -157,38 +152,25 @@ export const useLaunchStore = defineStore('Launch', () => {
                     args.join(' ')
                 );
                 if (!result) {
-                    ElMessage({
+                    toast.error(
-                        message:
+                        'Failed to launch VRChat, invalid custom path set'
-                            'Failed to launch VRChat, invalid custom path set',
+                    );
-                        type: 'error'
-                    });
                 } else {
-                    ElMessage({
+                    toast.success('VRChat launched');
-                        message: 'VRChat launched',
-                        type: 'success'
-                    });
                 }
             } else {
                 const result = await AppApi.StartGame(args.join(' '));
                 if (!result) {
-                    ElMessage({
+                    toast.error(
-                        message:
+                        'Failed to find VRChat, set a custom path in launch options'
-                            'Failed to find VRChat, set a custom path in launch options',
+                    );
-                        type: 'error'
-                    });
                 } else {
-                    ElMessage({
+                    toast.success('VRChat launched');
-                        message: 'VRChat launched',
-                        type: 'success'
-                    });
                 }
             }
         } catch (e) {
             console.error(e);
-            ElMessage({
+            toast.error(`Failed to launch VRChat: ${e.message}`);
-                message: `Failed to launch VRChat: ${e.message}`,
-                type: 'error'
-            });
         }
         console.log('Launch Game', args.join(' '), desktopMode);
     }

src/stores/photon.js

@@ -1,6 +1,7 @@
 import { computed, reactive, ref } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 
 import {
@@ -433,10 +434,7 @@ export const usePhotonStore = defineStore('Photon', () => {
                     userStore.lookupUser(ref);
                 }
             } else {
-                ElMessage({
+                toast.error('No user info available');
-                    message: 'No user info available',
-                    type: 'error'
-                });
             }
         }
     }

src/stores/search.js

@@ -1,6 +1,7 @@
 import { computed, ref, watch } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -367,10 +368,7 @@ export const useSearchStore = defineStore('Search', () => {
             if (action === 'confirm' && value) {
                 const input = value.trim();
                 if (!directAccessParse(input)) {
-                    ElMessage({
+                    toast.error(t('prompt.direct_access_omni.message.error'));
-                        message: t('prompt.direct_access_omni.message.error'),
-                        type: 'error'
-                    });
                 }
             }
         } catch (error) {

src/stores/settings/advanced.js

@@ -1,10 +1,12 @@
 import { reactive, ref, watch } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 
 import { AppDebug } from '../../service/appConfig';
 import { database } from '../../service/database';
+import { languageCodes } from '../../localization';
 import { useGameStore } from '../game';
 import { useVRCXUpdaterStore } from '../vrcxUpdater';
 import { useVrcxStore } from '../vrcx';
@@ -12,7 +14,6 @@ import { watchState } from '../../service/watchState';
 
 import configRepository from '../../service/config';
 import webApiService from '../../service/webapi';
-import { languageCodes } from '../../localization';
 
 export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     const gameStore = useGameStore();
@@ -162,10 +163,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             configRepository.getString('VRCX_SentryEnabled', '')
         ]);
 
-        if (
+        if (!bioLanguageConfig || !languageCodes.includes(bioLanguageConfig)) {
-            !bioLanguageConfig ||
-            !languageCodes.includes(bioLanguageConfig)
-        ) {
             bioLanguage.value = 'en';
         } else {
             bioLanguage.value = bioLanguageConfig;
@@ -628,10 +626,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
 
     async function translateText(text, targetLang, overrides) {
         if (!translationApi.value) {
-            ElMessage({
+            toast.warning('Translation API disabled');
-                message: 'Translation API disabled',
-                type: 'warning'
-            });
             return null;
         }
 
@@ -641,10 +636,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         if (provider === 'google') {
             const keyToUse = overrides?.key ?? translationApiKey.value;
             if (!keyToUse) {
-                ElMessage({
+                toast.warning('No Translation API key configured');
-                    message: 'No Translation API key configured',
-                    type: 'warning'
-                });
                 return null;
             }
             try {
@@ -672,10 +664,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
                 }
                 return data.data.translations[0].translatedText;
             } catch (err) {
-                ElMessage({
+                toast.error(`Translation failed: ${err.message}`);
-                    message: `Translation failed: ${err.message}`,
-                    type: 'error'
-                });
                 return null;
             }
         }
@@ -692,10 +681,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             `You are a translation assistant. Translate the user message into ${targetLang}. Only return the translated text.`;
 
         if (!endpoint || !model) {
-            ElMessage({
+            toast.warning('Translation endpoint/model missing');
-                message: 'Translation endpoint/model missing',
-                type: 'warning'
-            });
             return null;
         }
 
@@ -742,10 +728,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             const translated = data?.choices?.[0]?.message?.content;
             return typeof translated === 'string' ? translated.trim() : null;
         } catch (err) {
-            ElMessage({
+            toast.error(`Translation failed: ${err.message}`);
-                message: `Translation failed: ${err.message}`,
-                type: 'error'
-            });
             return null;
         }
     }
@@ -769,25 +752,18 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         )
             .then(async ({ action }) => {
                 if (action === 'confirm') {
-                    const msgBox = ElMessage({
+                    const msgBox = toast.warning(
-                        message: 'Batch print cropping in progress...',
+                        'Batch print cropping in progress...',
-                        type: 'warning',
+                        { duration: Infinity, position: 'bottom-right' }
-                        duration: 0
+                    );
-                    });
                     try {
                         await AppApi.CropAllPrints(ugcFolderPath.value);
-                        ElMessage({
+                        toast.success('Batch print cropping complete');
-                            message: 'Batch print cropping complete',
-                            type: 'success'
-                        });
                     } catch (err) {
                         console.error(err);
-                        ElMessage({
+                        toast.error(`Batch print cropping failed: ${err}`);
-                            message: `Batch print cropping failed: ${err}`,
-                            type: 'error'
-                        });
                     } finally {
-                        msgBox.close();
+                        toast.dismiss(msgBox);
                     }
                 }
             })
@@ -836,25 +812,18 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         )
             .then(async ({ action }) => {
                 if (action === 'confirm') {
-                    const msgBox = ElMessage({
+                    const msgBox = toast.warning(
-                        message: 'Batch metadata removal in progress...',
+                        'Batch metadata removal in progress...',
-                        type: 'warning',
+                        { duration: Infinity, position: 'bottom-right' }
-                        duration: 0
+                    );
-                    });
                     try {
                         await AppApi.DeleteAllScreenshotMetadata();
-                        ElMessage({
+                        toast.success('Batch metadata removal complete');
-                            message: 'Batch metadata removal complete',
-                            type: 'success'
-                        });
                     } catch (err) {
                         console.error(err);
-                        ElMessage({
+                        toast.error(`Batch metadata removal failed: ${err}`);
-                            message: `Batch metadata removal failed: ${err}`,
-                            type: 'error'
-                        });
                     } finally {
-                        msgBox.close();
+                        toast.dismiss(msgBox);
                     }
                 }
             })

src/stores/ui.js

@@ -1,6 +1,6 @@
 import { ref, watch } from 'vue';
-import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useMagicKeys } from '@vueuse/core';
 import { useRouter } from 'vue-router';
 
@@ -54,10 +54,7 @@ export const useUiStore = defineStore('Ui', () => {
         if (isPressed) {
             refreshCustomCss();
             updateLocalizedStrings();
-            ElMessage({
+            toast.success('Custom CSS and localization strings refreshed');
-                message: 'Custom CSS and localization strings refreshed',
-                type: 'success'
-            });
         }
     });
 

src/stores/user.js

@@ -1,6 +1,6 @@
 import { computed, reactive, ref, shallowReactive, watch } from 'vue';
-import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 
 import Noty from 'noty';
 
@@ -842,10 +842,7 @@ export const useUserStore = defineStore('User', () => {
             .catch((err) => {
                 D.loading = false;
                 D.visible = false;
-                ElMessage({
+                toast.error('Failed to load user');
-                    message: 'Failed to load user',
-                    type: 'error'
-                });
                 throw err;
             })
             .then((args) => {
@@ -1218,10 +1215,7 @@ export const useUserStore = defineStore('User', () => {
                             return;
                         }
                     }
-                    ElMessage({
+                    toast.error('Own avatar not found');
-                        message: 'Own avatar not found',
-                        type: 'error'
-                    });
                 }
             }
         });

src/stores/vrcx.js

@@ -1,6 +1,7 @@
 import { reactive, ref, watch } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 
 import Noty from 'noty';
@@ -160,12 +161,10 @@ export const useVrcxStore = defineStore('Vrcx', () => {
         let msgBox;
         if (state.databaseVersion < databaseVersion) {
             if (state.databaseVersion) {
-                msgBox = ElMessage({
+                msgBox = toast.warning(
-                    message:
                     'DO NOT CLOSE VRCX, database upgrade in progress...',
-                    type: 'warning',
+                    { duration: Infinity, position: 'bottom-right' }
-                    duration: 0
+                );
-                });
             }
             console.log(
                 `Updating database from ${state.databaseVersion} to ${databaseVersion}...`
@@ -188,24 +187,19 @@ export const useVrcxStore = defineStore('Vrcx', () => {
                     databaseVersion
                 );
                 console.log('Database update complete.');
-                msgBox?.close();
+                toast.dismiss(msgBox);
                 if (state.databaseVersion) {
                     // only display when database exists
-                    ElMessage({
+                    toast.success('Database upgrade complete');
-                        message: 'Database upgrade complete',
-                        type: 'success'
-                    });
                 }
                 state.databaseVersion = databaseVersion;
             } catch (err) {
                 console.error(err);
-                msgBox?.close();
+                toast.dismiss(msgBox);
-                ElMessage({
+                toast.error(
-                    message:
                     'Database upgrade failed, check console for details',
-                    type: 'error',
+                    { duration: 120000 }
-                    duration: 120000
+                );
-                });
                 AppApi.ShowDevTools();
             }
         }
@@ -365,12 +359,10 @@ export const useVrcxStore = defineStore('Vrcx', () => {
             } catch (e) {
                 console.error('Failed to add screenshot metadata', e);
                 if (e.message?.includes('UnauthorizedAccessException')) {
-                    ElMessage({
+                    toast.error(
-                        message:
                         'Failed to add screenshot metadata, access denied. Make sure VRCX has permission to access the screenshot folder.',
-                        type: 'error',
+                        { duration: 10000 }
-                        duration: 10000
+                    );
-                    });
                 }
                 return;
             }
@@ -547,10 +539,7 @@ export const useVrcxStore = defineStore('Vrcx', () => {
                 }
             }
 
-            ElMessage({
+            toast.success(t('message.crash.vrcx_reload'));
-                message: t('message.crash.vrcx_reload'),
-                type: 'success'
-            });
             return;
         }
         eventLaunchCommand(command);
@@ -603,10 +592,7 @@ export const useVrcxStore = defineStore('Vrcx', () => {
                 const regexAvatarId =
                     /avtr_[0-9A-Fa-f]{8}-([0-9A-Fa-f]{4}-){3}[0-9A-Fa-f]{12}/g;
                 if (!avatarId.match(regexAvatarId) || avatarId.length !== 41) {
-                    ElMessage({
+                    toast.error('Invalid Avatar ID');
-                        message: 'Invalid Avatar ID',
-                        type: 'error'
-                    });
                     break;
                 }
                 if (advancedSettingsStore.showConfirmationOnSwitchAvatar) {

src/stores/vrcxUpdater.js

@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue';
-import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 
 import { AppDebug } from '../service/appConfig';
@@ -211,12 +211,11 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
             checkingForVRCXUpdate.value = false;
         }
         if (response.status !== 200) {
-            ElMessage({
+            toast.error(
-                message: t('message.vrcx_updater.failed', {
+                t('message.vrcx_updater.failed', {
                     message: `${response.status} ${response.data}`
-                }),
+                })
-                type: 'error'
+            );
-            });
             return;
         }
         pendingVRCXUpdate.value = false;
@@ -290,12 +289,11 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
             checkingForVRCXUpdate.value = false;
         }
         if (response.status !== 200) {
-            ElMessage({
+            toast.error(
-                message: t('message.vrcx_updater.failed', {
+                t('message.vrcx_updater.failed', {
                     message: `${response.status} ${response.data}`
-                }),
+                })
-                type: 'error'
+            );
-            });
             return;
         }
         if (AppDebug.debugWebRequests) {
@@ -303,12 +301,11 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         }
         const releases = [];
         if (typeof json !== 'object' || json.message) {
-            ElMessage({
+            toast.error(
-                message: t('message.vrcx_updater.failed', {
+                t('message.vrcx_updater.failed', {
                     message: json.message
-                }),
+                })
-                type: 'error'
+            );
-            });
             return;
         }
         for (const release of json) {
@@ -347,10 +344,7 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
             pendingVRCXInstall.value = releaseName;
         } catch (err) {
             console.error(err);
-            ElMessage({
+            toast.error(`${t('message.vrcx_updater.failed_install')} ${err}`);
-                message: `${t('message.vrcx_updater.failed_install')} ${err}`,
-                type: 'error'
-            });
         } finally {
             updateInProgress.value = false;
             updateProgress.value = 0;

src/stores/world.js

@@ -1,6 +1,6 @@
 import { reactive, shallowReactive, watch } from 'vue';
-import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 
 import {
     checkVRChatCache,
@@ -132,10 +132,7 @@ export const useWorldStore = defineStore('World', () => {
             .catch((err) => {
                 D.loading = false;
                 D.visible = false;
-                ElMessage({
+                toast.error('Failed to load world');
-                    message: 'Failed to load world',
-                    type: 'error'
-                });
                 throw err;
             })
             .then((args) => {

src/views/Charts/components/MutualFriends.vue

@@ -104,10 +104,11 @@
 
 <script setup>
     import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { Setting } from '@element-plus/icons-vue';
     import { onBeforeRouteLeave } from 'vue-router';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useAppearanceSettingsStore, useChartsStore, useFriendStore, useUserStore } from '../../../stores';
@@ -173,7 +174,7 @@
     const progressPercent = computed(() =>
         totalFriends.value ? Math.min(100, Math.round((fetchState.processedFriends / totalFriends.value) * 100)) : 0
     );
-    const progressStatus = computed(() => (isFetching.value ? 'warning' : undefined));
+    const progressStatus = computed(() => (isFetching.value ? 'warning' : ''));
     const forceDefaults = computed(() =>
         computeForceOptions(graphPayload.value?.nodes ?? [], graphPayload.value?.links ?? [])
     );
@@ -293,13 +294,8 @@
         if (!message) {
             return;
         }
-        ElMessage({
+        const toastFn = toast[type] ?? toast;
-            // @ts-ignore
+        toastFn(message, { duration: 4000 });
-            message,
-            type,
-            duration: 4000,
-            grouping: true
-        });
     }
 
     function createChartInstance() {
@@ -613,7 +609,7 @@
 
         const hasInvalid = [repulsion, minEdge, maxEdge, gravity].some((entry) => entry.invalid);
         if (hasInvalid) {
-            ElMessage.error(t('view.charts.mutual_friend.force_dialog.invalid_input'));
+            toast.error(t('view.charts.mutual_friend.force_dialog.invalid_input'));
             return;
         }
 

src/views/Favorites/FavoritesAvatar.vue

@@ -497,9 +497,10 @@
 
 <script setup>
     import { computed, h, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox, ElNotification, ElProgress } from 'element-plus';
     import { Loading, MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
+    import { ElMessageBox, ElNotification, ElProgress } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores';
@@ -1191,16 +1192,10 @@
                             navigator.clipboard
                                 .writeText(result.invalidIds.join('\n'))
                                 .then(() => {
-                                    ElMessage({
+                                    toast.success(t('view.favorite.avatars.copied_ids'));
-                                        message: t('view.favorite.avatars.copied_ids'),
-                                        type: 'success'
-                                    });
                                 })
                                 .catch(() => {
-                                    ElMessage({
+                                    toast.error('Failed to copy');
-                                        message: 'Failed to copy',
-                                        type: 'error'
-                                    });
                                 });
                             return;
                         }
@@ -1285,10 +1280,7 @@
                                 favoriteGroupId: args.json.id
                             }
                         });
-                        ElMessage({
+                        toast.success(t('prompt.change_favorite_group_name.message.success'));
-                            message: t('prompt.change_favorite_group_name.message.success'),
-                            type: 'success'
-                        });
                         refreshFavorites();
                     });
             })
@@ -1308,10 +1300,7 @@
                     favoriteGroupId: args.json.id
                 }
             });
-            ElMessage({
+            toast.success('Group visibility changed');
-                message: 'Group visibility changed',
-                type: 'success'
-            });
             if (menuKey) {
                 handleGroupMenuVisible(menuKey, false);
             }

src/views/Favorites/FavoritesFriend.vue

@@ -281,9 +281,10 @@
 
 <script setup>
     import { computed, onBeforeMount, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
     import { MoreFilled, Refresh } from '@element-plus/icons-vue';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
@@ -678,10 +679,7 @@
                                 favoriteGroupId: args.json.id
                             }
                         });
-                        ElMessage({
+                        toast.success(t('prompt.change_favorite_group_name.message.success'));
-                            message: t('prompt.change_favorite_group_name.message.success'),
-                            type: 'success'
-                        });
                         refreshFavorites();
                     });
             })
@@ -701,10 +699,7 @@
                     favoriteGroupId: args.json.id
                 }
             });
-            ElMessage({
+            toast.success('Group visibility changed');
-                message: 'Group visibility changed',
-                type: 'success'
-            });
             if (menuKey) {
                 handleGroupMenuVisible(menuKey, false);
             }

src/views/Favorites/FavoritesWorld.vue

@@ -407,8 +407,9 @@
 <script setup>
     import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
     import { Loading, MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
@@ -979,10 +980,7 @@
                     favoriteGroupId: args.json.id
                 }
             });
-            ElMessage({
+            toast.success('Group visibility changed');
-                message: 'Group visibility changed',
-                type: 'success'
-            });
             if (menuKey) {
                 handleGroupMenuVisible(menuKey, false);
             }
@@ -1121,10 +1119,7 @@
                                 favoriteGroupId: args.json.id
                             }
                         });
-                        ElMessage({
+                        toast.success(t('prompt.change_favorite_group_name.message.success'));
-                            message: t('prompt.change_favorite_group_name.message.success'),
-                            type: 'success'
-                        });
                         refreshFavorites();
                     });
             })

src/views/Favorites/components/FavoritesMoveDropdown.vue

@@ -24,8 +24,8 @@
 
 <script setup>
     import { Back } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { computed } from 'vue';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { favoriteRequest } from '../../../api';
@@ -89,10 +89,7 @@
                 tags: groupAPI.name
             })
             .then((args) => {
-                ElMessage({
+                toast.success('Avatar added to favorites');
-                    message: 'Avatar added to favorites',
-                    type: 'success'
-                });
                 return args;
             });
     }
@@ -105,7 +102,7 @@
                 tags: groupAPI.name
             })
             .then((args) => {
-                ElMessage({ message: 'World added to favorites', type: 'success' });
+                toast.success('World added to favorites');
                 return args;
             });
     }

src/views/Favorites/dialogs/AvatarExportDialog.vue

@@ -84,8 +84,8 @@
 <script setup>
     import { computed, ref, watch } from 'vue';
     import { ArrowDown } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useAvatarStore, useFavoriteStore } from '../../../stores';
@@ -153,18 +153,11 @@
         navigator.clipboard
             .writeText(avatarExportContent.value)
             .then(() => {
-                ElMessage({
+                toast.success('Copied successfully!', { duration: 2000 });
-                    message: 'Copied successfully!',
-                    type: 'success',
-                    duration: 2000
-                });
             })
             .catch((err) => {
                 console.error('Copy failed:', err);
-                ElMessage({
+                toast.error('Copy failed!');
-                    message: 'Copy failed!',
-                    type: 'error'
-                });
             });
     }
     function updateAvatarExportDialog() {

src/views/Favorites/dialogs/AvatarImportDialog.vue

@@ -178,8 +178,8 @@
 <script setup>
     import { ArrowDown, Close, Loading } from '@element-plus/icons-vue';
     import { computed, ref, watch } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useAvatarStore, useFavoriteStore, useGalleryStore, useUserStore } from '../../../stores';
@@ -324,10 +324,7 @@
             })
             .then((args) => {
                 if (message) {
-                    ElMessage({
+                    toast.success('Avatar added to favorites');
-                        message: 'Avatar added to favorites',
-                        type: 'success'
-                    });
                 }
                 return args;
             });

src/views/Favorites/dialogs/FriendExportDialog.vue

@@ -48,8 +48,8 @@
 <script setup>
     import { computed, ref, watch } from 'vue';
     import { ArrowDown } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useFavoriteStore } from '../../../stores';
@@ -100,18 +100,11 @@
         navigator.clipboard
             .writeText(friendExportContent.value)
             .then(() => {
-                ElMessage({
+                toast.success('Copied successfully!', { duration: 2000 });
-                    message: 'Copied successfully!',
-                    type: 'success',
-                    duration: 2000
-                });
             })
             .catch((err) => {
                 console.error('Copy failed:', err);
-                ElMessage({
+                toast.error('Copy failed!');
-                    message: 'Copy failed!',
-                    type: 'error'
-                });
             });
     }
 

src/views/Favorites/dialogs/FriendImportDialog.vue

@@ -125,8 +125,8 @@
 <script setup>
     import { ArrowDown, Close, Loading } from '@element-plus/icons-vue';
     import { computed, ref, watch } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { removeFromArray, userImage, userImageFull } from '../../../shared/utils';
@@ -242,10 +242,7 @@
             })
             .then((args) => {
                 if (message) {
-                    ElMessage({
+                    toast.success('Friend added to favorites');
-                        message: 'Friend added to favorites',
-                        type: 'success'
-                    });
                 }
                 return args;
             });

src/views/Favorites/dialogs/WorldExportDialog.vue

@@ -82,8 +82,8 @@
 <script setup>
     import { computed, ref, watch } from 'vue';
     import { ArrowDown } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useFavoriteStore, useWorldStore } from '../../../stores';
@@ -153,18 +153,11 @@
         navigator.clipboard
             .writeText(worldExportContent.value)
             .then(() => {
-                ElMessage({
+                toast.success('Copied successfully!', { duration: 2000 });
-                    message: 'Copied successfully!',
-                    type: 'success',
-                    duration: 2000
-                });
             })
             .catch((err) => {
                 console.error('Copy failed:', err);
-                ElMessage({
+                toast.error('Copy failed!');
-                    message: 'Copy failed!',
-                    type: 'error'
-                });
             });
     }
 

src/views/Favorites/dialogs/WorldImportDialog.vue

@@ -174,8 +174,8 @@
 <script setup>
     import { ArrowDown, Close, Loading } from '@element-plus/icons-vue';
     import { computed, ref, watch } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useFavoriteStore, useGalleryStore, useUserStore, useWorldStore } from '../../../stores';
@@ -355,10 +355,7 @@
             })
             .then((args) => {
                 if (message) {
-                    ElMessage({
+                    toast.success('World added to favorites');
-                        message: 'World added to favorites',
-                        type: 'success'
-                    });
                 }
                 return args;
             });

src/views/FriendList/FriendList.vue

@@ -265,8 +265,9 @@
 
 <script setup>
     import { computed, nextTick, reactive, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
     import { useRoute } from 'vue-router';
 
@@ -449,7 +450,7 @@
         friendsListLoadingTotal.value = total;
         friendsListLoadingCurrent.value = 0;
         if (!total) {
-            ElMessage.success(t('view.friend_list.load_complete'));
+            toast.success(t('view.friend_list.load_complete'));
             return;
         }
         friendsListLoading.value = true;
@@ -472,7 +473,7 @@
         friendsListLoadingCurrent.value = 0;
         friendsListLoadingTotal.value = 0;
         if (!cancelled) {
-            ElMessage.success(t('view.friend_list.load_complete'));
+            toast.success(t('view.friend_list.load_complete'));
         }
     }
 

src/views/Notifications/Notification.vue

@@ -78,9 +78,10 @@
         useVueTable
     } from '@tanstack/vue-table';
     import { computed, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { Refresh } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import Noty from 'noty';
@@ -376,7 +377,7 @@
                                     row.senderUserId
                                 )
                                 .then((_args) => {
-                                    ElMessage('Invite sent');
+                                    toast('Invite sent');
                                     notificationRequest.hideNotification({
                                         notificationId: row.id
                                     });

src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue

@@ -34,8 +34,8 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { inviteMessagesRequest, notificationRequest } from '../../../api';
@@ -79,13 +79,10 @@
                 })
                 .then((args) => {
                     if (args.json[slot].message === I.messageSlot.message) {
-                        ElMessage({
+                        toast.error("VRChat API didn't update message, try again");
-                            message: "VRChat API didn't update message, try again",
-                            type: 'error'
-                        });
                         throw new Error("VRChat API didn't update message, try again");
                     } else {
-                        ElMessage('Invite message updated');
+                        toast('Invite message updated');
                     }
                     return args;
                 });
@@ -104,10 +101,7 @@
                     notificationRequest.hideNotification({
                         notificationId: I.invite.id
                     });
-                    ElMessage({
+                    toast.success('Invite response message sent');
-                        message: 'Invite response message sent',
-                        type: 'success'
-                    });
                     return args;
                 })
                 .finally(() => {
@@ -123,10 +117,7 @@
                     notificationRequest.hideNotification({
                         notificationId: I.invite.id
                     });
-                    ElMessage({
+                    toast.success('Invite response message sent');
-                        message: 'Invite response message sent',
-                        type: 'success'
-                    });
                     return args;
                 })
                 .finally(() => {

src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue

@@ -20,8 +20,8 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { notificationRequest } from '../../../api';
@@ -65,10 +65,7 @@
                     notificationRequest.hideNotification({
                         notificationId: D.invite.id
                     });
-                    ElMessage({
+                    toast.success('Invite response photo message sent');
-                        message: 'Invite response photo message sent',
-                        type: 'success'
-                    });
                     return args;
                 })
                 .finally(() => {
@@ -84,10 +81,7 @@
                     notificationRequest.hideNotification({
                         notificationId: D.invite.id
                     });
-                    ElMessage({
+                    toast.success('Invite response message sent');
-                        message: 'Invite response message sent',
-                        type: 'success'
-                    });
                     return args;
                 })
                 .finally(() => {

src/views/PlayerList/PlayerList.vue

@@ -283,10 +283,12 @@
         })
     );
 
+    const playerListDisplayData = computed(() => currentInstanceUsersData.value ?? []);
+
     const playerListTable = useVueTable({
-        data: currentInstanceUsersData.value,
+        data: playerListDisplayData,
         columns: playerListColumns.value,
-        getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}`,
+        getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}:${row?.photonId ?? ''}`,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
@@ -310,6 +312,28 @@
         }
     });
 
+    watch(
+        playerListColumns,
+        (next) => {
+            playerListTable.setOptions((prev) => ({
+                ...prev,
+                columns: next
+            }));
+        },
+        { immediate: true }
+    );
+
+    watch(
+        playerListDisplayData,
+        (next) => {
+            playerListTable.setOptions((prev) => ({
+                ...prev,
+                data: next
+            }));
+        },
+        { immediate: true }
+    );
+
     const playerListTotalItems = computed(() => playerListTable.getRowModel().rows.length);
 
     const handlePlayerListRowClick = (row) => {

src/views/Settings/components/Tabs/AdvancedTab.vue

@@ -390,8 +390,8 @@
         User
     } from '@element-plus/icons-vue';
     import { computed, reactive, ref } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import {
@@ -503,15 +503,9 @@
     function openVrcxAppDataFolder() {
         AppApi.OpenVrcxAppDataFolder().then((result) => {
             if (result) {
-                ElMessage({
+                toast.success('Folder opened');
-                    message: 'Folder opened',
-                    type: 'success'
-                });
             } else {
-                ElMessage({
+                toast.error("Folder dosn't exist");
-                    message: "Folder dosn't exist",
-                    type: 'error'
-                });
             }
         });
     }
@@ -519,15 +513,9 @@
     function openVrcAppDataFolder() {
         AppApi.OpenVrcAppDataFolder().then((result) => {
             if (result) {
-                ElMessage({
+                toast.success('Folder opened');
-                    message: 'Folder opened',
-                    type: 'success'
-                });
             } else {
-                ElMessage({
+                toast.error("Folder dosn't exist");
-                    message: "Folder dosn't exist",
-                    type: 'error'
-                });
             }
         });
     }
@@ -535,15 +523,9 @@
     function openCrashVrcCrashDumps() {
         AppApi.OpenCrashVrcCrashDumps().then((result) => {
             if (result) {
-                ElMessage({
+                toast.success('Folder opened');
-                    message: 'Folder opened',
-                    type: 'success'
-                });
             } else {
-                ElMessage({
+                toast.error("Folder dosn't exist");
-                    message: "Folder dosn't exist",
-                    type: 'error'
-                });
             }
         });
     }

src/views/Settings/components/Tabs/AppearanceTab.vue

@@ -386,8 +386,8 @@
 <script setup>
     import { ArrowDown, ArrowRight, Notebook } from '@element-plus/icons-vue';
     import { computed, onBeforeUnmount, ref } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useAppearanceSettingsStore, useFavoriteStore, useVrStore } from '../../../../stores';
@@ -474,10 +474,7 @@
             const rawLength = Array.isArray(values) ? values.length : 0;
             setTablePageSizes(values);
             if (rawLength && rawLength !== tablePageSizes.value.length) {
-                ElMessage({
+                toast.error(t('view.settings.appearance.appearance.table_page_sizes_error'));
-                    message: t('view.settings.appearance.appearance.table_page_sizes_error'),
-                    type: 'error'
-                });
             }
         }
     });

src/views/Settings/dialogs/LaunchOptionsDialog.vue

@@ -55,8 +55,8 @@
 
 <script setup>
     import { computed, ref } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { Badge } from '../../../components/ui/badge';
@@ -104,17 +104,11 @@
             D.vrcLaunchPathOverride.endsWith('.exe') &&
             !D.vrcLaunchPathOverride.endsWith('launch.exe')
         ) {
-            ElMessage({
+            toast.error('Invalid path, you must enter VRChat folder or launch.exe');
-                message: 'Invalid path, you must enter VRChat folder or launch.exe',
-                type: 'error'
-            });
             return;
         }
         configRepository.setString('vrcLaunchPathOverride', D.vrcLaunchPathOverride);
-        ElMessage({
+        toast.success('Updated launch options');
-            message: 'Updated launch options',
-            type: 'success'
-        });
         closeDialog();
     }
 

src/views/Settings/dialogs/RegistryBackupDialog.vue

@@ -77,9 +77,10 @@
 
 <script setup>
     import { Delete, Download, Upload } from '@element-plus/icons-vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
     import { ref, watch } from 'vue';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { downloadAndSaveJson, formatDateFilter, removeFromArray } from '../../../shared/utils';
@@ -134,17 +135,11 @@
                 const data = JSON.stringify(row.data);
                 AppApi.SetVRChatRegistry(data)
                     .then(() => {
-                        ElMessage({
+                        toast.success('VRC registry settings restored');
-                            message: 'VRC registry settings restored',
-                            type: 'success'
-                        });
                     })
                     .catch((e) => {
                         console.error(e);
-                        ElMessage({
+                        toast.error(`Failed to restore VRC registry settings, check console for full error: ${e}`);
-                            message: `Failed to restore VRC registry settings, check console for full error: ${e}`,
-                            type: 'error'
-                        });
                     });
             })
             .catch(() => {});
@@ -172,10 +167,7 @@
                     return;
                 }
                 AppApi.DeleteVRChatRegistryFolder().then(() => {
-                    ElMessage({
+                    toast.success('VRC registry settings deleted');
-                        message: 'VRC registry settings deleted',
-                        type: 'success'
-                    });
                 });
             })
             .catch(() => {});
@@ -256,23 +248,14 @@
             }
             AppApi.SetVRChatRegistry(json)
                 .then(() => {
-                    ElMessage({
+                    toast.success('VRC registry settings restored');
-                        message: 'VRC registry settings restored',
-                        type: 'success'
-                    });
                 })
                 .catch((e) => {
                     console.error(e);
-                    ElMessage({
+                    toast.error(`Failed to restore VRC registry settings, check console for full error: ${e}`);
-                        message: `Failed to restore VRC registry settings, check console for full error: ${e}`,
-                        type: 'error'
-                    });
                 });
         } catch {
-            ElMessage({
+            toast.error('Invalid JSON');
-                message: 'Invalid JSON',
-                type: 'error'
-            });
         }
     }
 

src/views/Settings/dialogs/TranslationApiDialog.vue

@@ -104,8 +104,8 @@
 <script setup>
     import { reactive, watch } from 'vue';
     import { ArrowDown } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { getLanguageName, languageCodes } from '../../../localization';
@@ -173,10 +173,7 @@
     async function saveTranslationApiConfig() {
         if (form.translationApiType === 'openai') {
             if (!form.translationApiEndpoint || !form.translationApiModel) {
-                ElMessage({
+                toast.warning(t('dialog.translation_api.msg_fill_endpoint_model'));
-                    message: t('dialog.translation_api.msg_fill_endpoint_model'),
-                    type: 'warning'
-                });
                 return;
             }
         }
@@ -189,10 +186,7 @@
             setTranslationApiKey(form.translationApiKey)
         ]);
 
-        ElMessage({
+        toast.success(t('dialog.translation_api.msg_settings_saved'));
-            message: t('dialog.translation_api.msg_settings_saved'),
-            type: 'success'
-        });
         closeDialog();
     }
 
@@ -201,10 +195,7 @@
             return;
         }
         if (!form.translationApiEndpoint || !form.translationApiModel) {
-            ElMessage({
+            toast.warning(t('dialog.translation_api.msg_fill_endpoint_model'));
-                message: t('dialog.translation_api.msg_fill_endpoint_model'),
-                type: 'warning'
-            });
             return;
         }
 
@@ -218,23 +209,14 @@
                 key: form.translationApiKey
             });
             if (data) {
-                ElMessage({
+                toast.success(t('dialog.translation_api.msg_test_success'));
-                    message: t('dialog.translation_api.msg_test_success'),
-                    type: 'success'
-                });
             } else {
                 console.error('[TranslationAPI] Test returned empty result');
-                ElMessage({
+                toast.error(t('dialog.translation_api.msg_test_failed'));
-                    message: t('dialog.translation_api.msg_test_failed'),
-                    type: 'error'
-                });
             }
         } catch (err) {
             console.error('[TranslationAPI] Test failed', err);
-            ElMessage({
+            toast.error(t('dialog.translation_api.msg_test_failed'));
-                message: t('dialog.translation_api.msg_test_failed'),
-                type: 'error'
-            });
         }
     }
 

src/views/Settings/dialogs/VRChatConfigDialog.vue

@@ -183,8 +183,9 @@
 <script setup>
     import { ArrowDown, Delete, FolderDelete, FolderOpened, Refresh } from '@element-plus/icons-vue';
     import { computed, ref, watch } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { VRChatCameraResolutions, VRChatScreenshotResolutions } from '../../../shared/constants';
@@ -279,15 +280,9 @@
     async function deleteAllVRChatCache() {
         try {
             await AssetBundleManager.DeleteAllCache();
-            ElMessage({
+            toast.success('All VRChat cache deleted');
-                message: 'All VRChat cache deleted',
-                type: 'success'
-            });
         } catch (error) {
-            ElMessage({
+            toast.error(`Error deleting VRChat cache: ${error.message}`);
-                message: `Error deleting VRChat cache: ${error.message}`,
-                type: 'error'
-            });
         }
         getVRChatCacheSize();
     }
@@ -379,10 +374,7 @@
                 const parsedConfig = JSON.parse(config);
                 VRChatConfigFile.value = { ...VRChatConfigFile.value, ...parsedConfig };
             } catch {
-                ElMessage({
+                toast.error('Invalid JSON in config.json');
-                    message: 'Invalid JSON in config.json',
-                    type: 'error'
-                });
                 throw new Error('Invalid JSON in config.json');
             }
         }

src/views/Settings/dialogs/YouTubeApiDialog.vue

@@ -30,8 +30,8 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { openExternalLink } from '../../../shared/utils';
@@ -57,26 +57,17 @@
     async function testYouTubeApiKey() {
         const previousKey = youTubeApiKey.value;
         if (!youTubeApiKey.value) {
-            ElMessage({
+            toast.success('YouTube API key removed');
-                message: 'YouTube API key removed',
-                type: 'success'
-            });
             closeDialog();
             return;
         }
         const data = await lookupYouTubeVideo('dQw4w9WgXcQ');
         if (!data) {
             setYouTubeApiKey(previousKey);
-            ElMessage({
+            toast.error('Invalid YouTube API key');
-                message: 'Invalid YouTube API key',
-                type: 'error'
-            });
         } else {
             setYouTubeApiKey(youTubeApiKey.value);
-            ElMessage({
+            toast.success('YouTube API key valid!');
-                message: 'YouTube API key valid!',
-                type: 'success'
-            });
             closeDialog();
         }
     }

src/views/Tools/Gallery.vue

@@ -527,8 +527,9 @@
 <script setup>
     import { ArrowLeft, Close, Delete, Link, Picture, Plus, Present, Refresh, Upload } from '@element-plus/icons-vue';
     import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
     import { useRouter } from 'vue-router';
 
@@ -636,10 +637,7 @@
                     .uploadGalleryImage(base64Body)
                     .then((args) => {
                         handleGalleryImageAdd(args);
-                        ElMessage({
+                        toast.success(t('message.gallery.uploaded'));
-                            message: t('message.gallery.uploaded'),
-                            type: 'success'
-                        });
                         return args;
                     })
                     .catch((error) => {
@@ -667,10 +665,7 @@
 
     function setProfilePicOverride(fileId) {
         if (!isLocalUserVrcPlusSupporter.value) {
-            ElMessage({
+            toast.error('VRCPlus required');
-                message: 'VRCPlus required',
-                type: 'error'
-            });
             return;
         }
         let profilePicOverride = '';
@@ -685,10 +680,7 @@
                 profilePicOverride
             })
             .then((args) => {
-                ElMessage({
+                toast.success('Profile picture changed');
-                    message: 'Profile picture changed',
-                    type: 'success'
-                });
                 return args;
             });
     }
@@ -739,10 +731,7 @@
                         if (Object.keys(VRCPlusIconsTable.value).length !== 0) {
                             VRCPlusIconsTable.value.unshift(args.json);
                         }
-                        ElMessage({
+                        toast.success(t('message.icon.uploaded'));
-                            message: t('message.icon.uploaded'),
-                            type: 'success'
-                        });
                         return args;
                     })
                     .catch((error) => {
@@ -770,10 +759,7 @@
 
     function setVRCPlusIcon(fileId) {
         if (!isLocalUserVrcPlusSupporter.value) {
-            ElMessage({
+            toast.error('VRCPlus required');
-                message: 'VRCPlus required',
-                type: 'error'
-            });
             return;
         }
         let userIcon = '';
@@ -788,10 +774,7 @@
                 userIcon
             })
             .then((args) => {
-                ElMessage({
+                toast.success('Icon changed');
-                    message: 'Icon changed',
-                    type: 'success'
-                });
                 return args;
             });
     }
@@ -878,10 +861,7 @@
                         if (Object.keys(emojiTable.value).length !== 0) {
                             emojiTable.value.unshift(args.json);
                         }
-                        ElMessage({
+                        toast.success(t('message.emoji.uploaded'));
-                            message: t('message.emoji.uploaded'),
-                            type: 'success'
-                        });
                         return args;
                     })
                     .catch((error) => {
@@ -946,10 +926,7 @@
                     .uploadSticker(base64Body, params)
                     .then((args) => {
                         handleStickerAdd(args);
-                        ElMessage({
+                        toast.success(t('message.sticker.uploaded'));
-                            message: t('message.sticker.uploaded'),
-                            type: 'success'
-                        });
                         return args;
                     })
                     .catch((error) => {
@@ -1020,10 +997,7 @@
                 vrcPlusImageRequest
                     .uploadPrint(base64Body, cropWhiteBorder, params)
                     .then((args) => {
-                        ElMessage({
+                        toast.success(t('message.print.uploaded'));
-                            message: t('message.print.uploaded'),
-                            type: 'success'
-                        });
                         if (Object.keys(printTable.value).length !== 0) {
                             printTable.value.unshift(args.json);
                         }
@@ -1102,10 +1076,7 @@
                             code: value.trim()
                         })
                         .then((args) => {
-                            ElMessage({
+                            toast.success(t('prompt.redeem.success'));
-                                message: t('prompt.redeem.success'),
-                                type: 'success'
-                            });
                             getInventory();
                             return args;
                         })

src/views/Tools/Tools.vue

@@ -208,8 +208,8 @@
 <script setup>
     import { computed, defineAsyncComponent, ref } from 'vue';
     import { ArrowRight } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
     import { useRoute } from 'vue-router';
 
@@ -281,15 +281,9 @@
     function openVrcPhotosFolder() {
         AppApi.OpenVrcPhotosFolder().then((result) => {
             if (result) {
-                ElMessage({
+                toast.success('Folder opened');
-                    message: 'Folder opened',
-                    type: 'success'
-                });
             } else {
-                ElMessage({
+                toast.error("Folder dosn't exist");
-                    message: "Folder dosn't exist",
-                    type: 'error'
-                });
             }
         });
     }
@@ -297,15 +291,9 @@
     function openVrcScreenshotsFolder() {
         AppApi.OpenVrcScreenshotsFolder().then((result) => {
             if (result) {
-                ElMessage({
+                toast.success('Folder opened');
-                    message: 'Folder opened',
-                    type: 'success'
-                });
             } else {
-                ElMessage({
+                toast.error("Folder dosn't exist");
-                    message: "Folder dosn't exist",
-                    type: 'error'
-                });
             }
         });
     }

src/views/Tools/components/GroupCalendarEventCard.vue

@@ -67,8 +67,8 @@
 
 <script setup>
     import { Calendar, Download, Star, StarFilled } from '@element-plus/icons-vue';
-    import { ElMessage } from 'element-plus';
     import { computed } from 'vue';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useGalleryStore, useGroupStore } from '../../../stores';
@@ -148,10 +148,7 @@
             }
             return response.data;
         } catch (error) {
-            ElMessage({
+            toast.error(`Failed to download .ics file, ${error.message}`);
-                message: `Failed to download .ics file, ${error.message}`,
-                type: 'error'
-            });
             console.error('Failed to download .ics file:', error);
         }
     }

src/views/Tools/dialogs/EditInviteMessageDialog.vue

@@ -28,7 +28,7 @@
 
 <script setup>
     import { ref, watch } from 'vue';
-    import { ElMessage } from 'element-plus';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { inviteMessagesRequest } from '../../../api';
@@ -69,13 +69,10 @@
                 })
                 .then((args) => {
                     if (args.json[slot].message === props.inviteMessage.message) {
-                        ElMessage({
+                        toast.error("VRChat API didn't update message, try again");
-                            message: "VRChat API didn't update message, try again",
-                            type: 'error'
-                        });
                         throw new Error("VRChat API didn't update message, try again");
                     } else {
-                        ElMessage({ message: 'Invite message updated', type: 'success' });
+                        toast.success('Invite message updated');
                         emit('updateInviteMessages', messageType);
                     }
                     return args;

src/views/Tools/dialogs/EditInviteMessagesDialog.vue

@@ -119,8 +119,8 @@
 
 <script setup>
     import { ref, watch } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useInviteStore } from '../../../stores';
@@ -173,10 +173,7 @@
             cooldownEnd.setHours(cooldownEnd.getHours() + 1);
             const now = new Date();
             if (now < cooldownEnd) {
-                ElMessage({
+                toast.warning('This invite message is on cooldown and cannot be edited yet.');
-                    message: 'This invite message is on cooldown and cannot be edited yet.',
-                    type: 'warning'
-                });
                 return;
             }
         }

src/views/Tools/dialogs/ScreenshotMetadataDialog.vue

@@ -158,8 +158,8 @@
 <script setup>
     import { CopyDocument, Delete, Folder, FolderOpened, Picture, Upload } from '@element-plus/icons-vue';
     import { reactive, ref, watch } from 'vue';
-    import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useGalleryStore, useUserStore, useVrcxStore } from '../../../stores';
@@ -275,10 +275,7 @@
             return;
         }
         AppApi.CopyImageToClipboard(path).then(() => {
-            ElMessage({
+            toast.success('Image copied to clipboard');
-                message: 'Image copied to clipboard',
-                type: 'success'
-            });
         });
     }
     function openImageFolder(path) {
@@ -286,10 +283,7 @@
             return;
         }
         AppApi.OpenFolderAndSelectItem(path).then(() => {
-            ElMessage({
+            toast.success('Opened image folder');
-                message: 'Opened image folder',
-                type: 'success'
-            });
         });
     }
     function deleteMetadata(path) {
@@ -298,16 +292,10 @@
         }
         AppApi.DeleteScreenshotMetadata(path).then((result) => {
             if (!result) {
-                ElMessage({
+                toast.error(t('message.screenshot_metadata.delete_failed'));
-                    message: t('message.screenshot_metadata.delete_failed'),
-                    type: 'error'
-                });
                 return;
             }
-            ElMessage({
+            toast.success(t('message.screenshot_metadata.deleted'));
-                message: t('message.screenshot_metadata.deleted'),
-                type: 'success'
-            });
             const D = screenshotMetadataDialog;
             getAndDisplayScreenshot(D.metadata.filePath, true);
         });
@@ -315,10 +303,7 @@
     function uploadScreenshotToGallery() {
         const D = screenshotMetadataDialog;
         if (D.metadata.fileSizeBytes > 10000000) {
-            ElMessage({
+            toast.error(t('message.file.too_large'));
-                message: t('message.file.too_large'),
-                type: 'error'
-            });
             return;
         }
         D.isUploading = true;
@@ -328,10 +313,7 @@
                     .uploadGalleryImage(base64Body)
                     .then((args) => {
                         handleGalleryImageAdd(args);
-                        ElMessage({
+                        toast.success(t('message.gallery.uploaded'));
-                            message: t('message.gallery.uploaded'),
-                            type: 'success'
-                        });
                         return args;
                     })
                     .finally(() => {
@@ -339,10 +321,7 @@
                     });
             })
             .catch((err) => {
-                ElMessage({
+                toast.error(t('message.gallery.failed'));
-                    message: t('message.gallery.failed'),
-                    type: 'error'
-                });
                 console.error(err);
                 D.isUploading = false;
             });