replace ElNotification

src/localization/en.json

@@ -186,6 +186,8 @@
                 "removed_list_header": "Avatars pending deletion:",
                 "copy_removed_ids": "Copy Avatar IDs",
                 "copied_ids": "Avatar IDs copied to clipboard",
+                "copy_failed": "Failed to copy to clipboard",
+                "dismiss": "Dismiss",
                 "checking_progress": "Checking avatar ({current}/{total})...",
                 "confirm_delete_invalid": "Delete Invalid Avatars?",
                 "confirm_delete_description": "Found {count} invalid avatars, delete them?",

src/stores/charts.js

@@ -1,5 +1,4 @@
 import { computed, reactive, ref, watch } from 'vue';
-import { ElNotification } from 'element-plus';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
@@ -58,18 +57,16 @@ export const useChartsStore = defineStore('Charts', () => {
                 !mutualGraphStatus.completionNotified
             ) {
                 mutualGraphStatus.completionNotified = true;
-                ElNotification({
+                toast.success(
-                    title: t(
+                    t(
                         'view.charts.mutual_friend.notifications.mutual_friend_graph_ready_title'
                     ),
-                    message: t(
+                    {
-                        'view.charts.mutual_friend.notifications.mutual_friend_graph_ready_message'
+                        description: t(
-                    ),
+                            'view.charts.mutual_friend.notifications.mutual_friend_graph_ready_message'
-                    type: 'success',
+                        )
-                    position: 'top-right',
+                    }
-                    duration: 5000,
+                );
-                    showClose: true
-                });
             }
         }
     );

src/stores/vrcStatus.js

@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue';
-import { ElNotification } from 'element-plus';
 import { defineStore } from 'pinia';
+import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
 
 import { formatDateFilter, openExternalLink } from '../shared/utils';
@@ -26,6 +26,14 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
         return lastStatus.value;
     });
 
+    function dismissAlert() {
+        if (!alertRef.value) {
+            return;
+        }
+        toast.dismiss(alertRef.value);
+        alertRef.value = null;
+    }
+
     function updateAlert() {
         if (lastStatusText.value === statusText.value) {
             return;
@@ -34,32 +42,28 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
 
         if (!statusText.value) {
             if (alertRef.value) {
-                alertRef.value.close();
+                dismissAlert();
-                alertRef.value = ElNotification({
+                alertRef.value = toast.success(t('status.title'), {
-                    title: t('status.title'),
+                    description: `${formatDateFilter(lastStatusTime.value, 'short')}: All Systems Operational`,
-                    message: `${formatDateFilter(lastStatusTime.value, 'short')}: All Systems Operational`,
-                    type: 'success',
-                    duration: 5000,
-                    showClose: true,
                     position: 'bottom-right',
-                    onClick: () => {
+                    action: {
-                        openStatusPage();
+                        label: 'Open',
+                        onClick: () => openStatusPage()
                     }
                 });
             }
             return;
         }
 
-        alertRef.value?.close();
+        dismissAlert();
-        alertRef.value = ElNotification({
+        alertRef.value = toast.warning(t('status.title'), {
-            title: t('status.title'),
+            description: `${formatDateFilter(lastStatusTime.value, 'short')}: ${statusText.value}`,
-            message: `${formatDateFilter(lastStatusTime.value, 'short')}: ${statusText.value}`,
+            duration: Infinity,
-            type: 'warning',
+            closeButton: true,
-            duration: 0,
-            showClose: true,
             position: 'bottom-right',
-            onClick: () => {
+            action: {
-                openStatusPage();
+                label: 'Open',
+                onClick: () => openStatusPage()
             }
         });
     }

src/views/Favorites/FavoritesAvatar.vue

@@ -521,13 +521,23 @@
 </template>
 
 <script setup>
-    import { computed, h, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+    import {
-    import { ElMessageBox, ElNotification, ElProgress } from 'element-plus';
+        computed,
+        h,
+        markRaw,
+        nextTick,
+        onBeforeMount,
+        onBeforeUnmount,
+        onMounted,
+        reactive,
+        ref,
+        watch
+    } from 'vue';
+    import { Ellipsis, Loader, RefreshCcw } from 'lucide-vue-next';
     import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
-    import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
     import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
-    import { Loader } from 'lucide-vue-next';
+    import { ElMessageBox } from 'element-plus';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -560,6 +570,7 @@
     import AvatarExportDialog from './dialogs/AvatarExportDialog.vue';
     import FavoritesAvatarItem from './components/FavoritesAvatarItem.vue';
     import FavoritesAvatarLocalHistoryItem from './components/FavoritesAvatarLocalHistoryItem.vue';
+    import InvalidAvatarsProgressToast from './components/InvalidAvatarsProgressToast.jsx';
     import configRepository from '../../service/config.js';
 
     import * as workerTimers from 'worker-timers';
@@ -1261,58 +1272,30 @@
             percentage: 0
         });
 
-        const ProgressContent = {
+        let progressToastId;
-            setup() {
-                return () =>
-                    h('div', { style: 'padding: 4px 0;' }, [
-                        h(
-                            'p',
-                            {
-                                style: 'margin: 0 0 12px 0; font-size: 14px; color: var(--el-text-color-primary);'
-                            },
-                            t('view.favorite.avatars.checking_progress', {
-                                current: progressState.current,
-                                total: progressState.total
-                            })
-                        ),
-                        h(ElProgress, {
-                            percentage: progressState.percentage,
-                            style: 'margin-top: 8px;'
-                        })
-                    ]);
-            }
-        };
-
-        let progressNotification = null;
 
         try {
-            progressNotification = ElNotification({
+            progressToastId = toast(markRaw(InvalidAvatarsProgressToast), {
-                title: t('view.favorite.avatars.checking'),
+                duration: Infinity,
-                message: h(ProgressContent),
+                componentProps: {
-                duration: 0,
+                    t,
-                type: 'info',
+                    progress: progressState,
-                position: 'bottom-right'
+                    onDismiss: () => progressToastId && toast.dismiss(progressToastId)
+                }
             });
 
             const result = await checkInvalidLocalAvatars(groupName, (current, total) => {
                 progressState.current = current;
                 progressState.total = total;
-                progressState.percentage = Math.floor((current / total) * 100);
+                progressState.percentage = total ? Math.floor((current / total) * 100) : 0;
             });
 
-            if (progressNotification) {
+            if (progressToastId) {
-                progressNotification.close();
+                toast.dismiss(progressToastId);
-                progressNotification = null;
             }
 
             if (result.invalid === 0) {
-                ElNotification({
+                toast.success(t('view.favorite.avatars.no_invalid_found'));
-                    title: t('view.favorite.avatars.check_complete'),
-                    message: t('view.favorite.avatars.no_invalid_found'),
-                    type: 'success',
-                    duration: 5000,
-                    position: 'bottom-right'
-                });
                 return;
             }
 
@@ -1352,7 +1335,7 @@
                                     toast.success(t('view.favorite.avatars.copied_ids'));
                                 })
                                 .catch(() => {
-                                    toast.error('Failed to copy');
+                                    toast.error(t('view.favorite.avatars.copy_failed'));
                                 });
                             return;
                         }
@@ -1364,39 +1347,23 @@
                 .catch(() => false);
 
             if (!confirmDelete) {
-                ElNotification({
+                toast.info(t('view.favorite.avatars.delete_cancelled'));
-                    title: t('view.favorite.avatars.check_complete'),
-                    message: t('view.favorite.avatars.delete_cancelled'),
-                    type: 'info',
-                    duration: 5000,
-                    position: 'bottom-right'
-                });
                 return;
             }
 
             const removeResult = await removeInvalidLocalAvatars(result.invalidIds, groupName);
 
-            ElNotification({
+            toast.success(
-                title: t('view.favorite.avatars.check_complete'),
+                t('view.favorite.avatars.delete_summary', {
-                message: t('view.favorite.avatars.delete_summary', {
                     removed: removeResult.removed
-                }),
+                })
-                type: 'success',
+            );
-                duration: 5000,
-                position: 'bottom-right'
-            });
         } catch (err) {
-            if (progressNotification) {
+            if (progressToastId) {
-                progressNotification.close();
+                toast.dismiss(progressToastId);
             }
             console.error(err);
-            ElNotification({
+            toast.error(String(err.message || err));
-                title: t('message.api_handler.avatar_private_or_deleted'),
-                message: String(err.message || err),
-                type: 'error',
-                duration: 5000,
-                position: 'bottom-right'
-            });
         }
     }
 

src/views/Favorites/components/InvalidAvatarsProgressToast.jsx

@@ -0,0 +1,29 @@
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+
+export default {
+    name: 'InvalidAvatarsProgressToast',
+    props: {
+        t: { type: Function, required: true },
+        progress: { type: Object, required: true },
+        onDismiss: { type: Function, required: true }
+    },
+    setup(props) {
+        return () => (
+            <div class="flex flex-col gap-2 pr-1">
+                <div class="text-sm font-medium">
+                    {props.t('view.favorite.avatars.checking_progress', {
+                        current: props.progress.current,
+                        total: props.progress.total
+                    })}
+                </div>
+                <Progress modelValue={props.progress.percentage} class="h-2 w-full" />
+                <div class="flex justify-end">
+                    <Button size="sm" variant="secondary" onClick={props.onDismiss}>
+                        {props.t('view.favorite.avatars.dismiss')}
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+};