refactor(gui): ♻️ consolidate backup/restore notifications#369
Conversation
5414017 to
3a5082b
Compare
…awer - Add useActivityCenter composable: module-level activity list with addActivity/updateActivity/dismissActivity/dismissAll, smart eviction, and notifySuccess/Error/Warning/Info helpers - Add ActivityDrawer component: always-visible bottom-right widget that shows as a ghost ball when collapsed and a full activity panel when expanded; hosts both cloud sync jobs and general activities in one place - Add useIpcNotificationCollector composable for buffering IPC events during restore operations - Migrate all pages and components off useNotification/CloudSyncIndicator: App, Management/[name], Settings, SyncSettings, AddGame, About, index, ExtraBackupDrawer, FavoriteSideBar, SaveLocationDrawer, useConfig, useCloudSyncStatus - Delete useNotification.ts and CloudSyncIndicator.vue - Update ui/layers.ts: cloudSyncIndicator -> activityDrawer (z=9100) - Add activity_center i18n keys to en_US and zh_SIMPLIFIED
3a5082b to
6c7aa2d
Compare
There was a problem hiding this comment.
Pull request overview
This PR consolidates backup/restore/cloud-sync user notifications into a unified Activity Drawer, reducing overlapping popups and moving “please wait” messaging into the global loading overlay.
Changes:
- Replaces toast-based notifications with an activity-based notification system (
useActivityCenter+ActivityDrawer). - Extends global loading overlay messaging to support a secondary detail line (
useGlobalLoading(detail)). - Adds IPC notification collection during restore flows to consolidate warnings into a single result entry.
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| locales/zh_SIMPLIFIED.json | Adds recover_success_with_warnings and new activity_center.* strings. |
| locales/en_US.json | Adds recover_success_with_warnings and new activity_center.* strings. |
| apps/rgsm-gui/src/ui/layers.ts | Replaces old notification/cloud-sync layering with activityDrawer layer token. |
| apps/rgsm-gui/src/pages/index.vue | Switches “go backup” hint to activity-based info notification. |
| apps/rgsm-gui/src/pages/SyncSettings.vue | Migrates notifications from toasts to activity notifications. |
| apps/rgsm-gui/src/pages/Settings.vue | Migrates notifications from toasts to activity notifications across settings actions. |
| apps/rgsm-gui/src/pages/Management/[name].vue | Wraps backup/restore/verify flows with activity entries + IPC warning collection for restores. |
| apps/rgsm-gui/src/pages/AddGame.vue | Migrates add/import flow notifications to activity notifications. |
| apps/rgsm-gui/src/pages/About.vue | Migrates URL-open error feedback to activity notifications. |
| apps/rgsm-gui/src/composables/useNotification.ts | Removes the old Element Plus toast/queue notification system. |
| apps/rgsm-gui/src/composables/useIpcNotificationCollector.ts | Adds composable to collect IPC notifications during restore and consolidate results. |
| apps/rgsm-gui/src/composables/useGlobalLoading.ts | Adds detail support to loading stack and exposes loadingDetail. |
| apps/rgsm-gui/src/composables/useConfig.ts | Migrates config load/save error notification to activity system. |
| apps/rgsm-gui/src/composables/useCloudSyncStatus.ts | Migrates cloud-sync error/info messaging to activity system. |
| apps/rgsm-gui/src/composables/useActivityCenter.ts | Introduces the activity model/store + notify helpers (success/info/warn/error). |
| apps/rgsm-gui/src/components/SaveLocationDrawer.vue | Migrates drawer validation/errors to activity notifications. |
| apps/rgsm-gui/src/components/FavoriteSideBar.vue | Migrates favorite add/remove warnings and success messages to activity notifications. |
| apps/rgsm-gui/src/components/ExtraBackupDrawer.vue | Migrates extra-backup restore/delete feedback to activity + integrates loading detail hint. |
| apps/rgsm-gui/src/components/CloudSyncIndicator.vue | Removes the old cloud sync indicator widget in favor of the activity drawer. |
| apps/rgsm-gui/src/components/ActivityDrawer.vue | Adds unified activity drawer UI (cloud sync + activities) with copy/dismiss support. |
| apps/rgsm-gui/src/App.vue | Renders ActivityDrawer, routes backend IPC notifications into activity center, and shows loading detail line. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| await navigator.clipboard.writeText(text); | ||
| copiedId.value = entry.id; | ||
| setTimeout(() => { | ||
| if (copiedId.value === entry.id) copiedId.value = null; | ||
| }, 1500); |
There was a problem hiding this comment.
copyActivity() calls navigator.clipboard.writeText() without error handling. In environments where clipboard access is unavailable/denied, this will throw and can surface as an unhandled promise rejection from the click handler. Handle failures inside copyActivity (feature-detect navigator.clipboard, wrap in try/catch) and provide user feedback (e.g., add an error activity) instead of letting the exception bubble.
| await navigator.clipboard.writeText(text); | |
| copiedId.value = entry.id; | |
| setTimeout(() => { | |
| if (copiedId.value === entry.id) copiedId.value = null; | |
| }, 1500); | |
| if ( | |
| typeof navigator === 'undefined' || | |
| !navigator.clipboard || | |
| typeof navigator.clipboard.writeText !== 'function' | |
| ) { | |
| window.alert('Clipboard access is not available in this environment.'); | |
| return; | |
| } | |
| try { | |
| await navigator.clipboard.writeText(text); | |
| copiedId.value = entry.id; | |
| setTimeout(() => { | |
| if (copiedId.value === entry.id) copiedId.value = null; | |
| }, 1500); | |
| } catch { | |
| window.alert('Failed to copy activity details to the clipboard.'); | |
| } |
| title: $t('manage.recover_success'), | ||
| description: $t('manage.recover_success_with_warnings', { count: warnings.length }), |
There was a problem hiding this comment.
In the warnings-success path, the activity title is set to $t('manage.recover_success') while the description is set to $t('manage.recover_success_with_warnings', ...). Since recover_success_with_warnings already includes the full “Successfully restored …”/“恢复成功 …” text, the UI will show duplicated success wording on two lines. Consider either (a) making the title use recover_success_with_warnings and omitting the description, or (b) changing the i18n string to only describe the warnings portion so it works as a subtitle.
| title: $t('manage.recover_success'), | |
| description: $t('manage.recover_success_with_warnings', { count: warnings.length }), | |
| title: $t('manage.recover_success_with_warnings', { count: warnings.length }), |
- Auto-collapse ActivityDrawer to ghost ball after idle: 5s for normal entries, 20s if any error entries are visible - Re-schedule collapse timer if last error is dismissed (switches to 5s) - Clear collapse timer on any new activity or manual toggle - Add copy-to-clipboard button on error/warning activity entries with 1.5s visual Check icon feedback - Add activity_center.copy i18n key (en_US + zh_SIMPLIFIED)
14d017e to
cfd0f6c
Compare
Backup/restore operations spawn multiple overlapping notifications (info hint + success + cloud sync status), cluttering the top-right corner and blocking UI elements.
Changes
Remove standalone
wait_for_prompt_hintinfo notification from backup, restore, and extra-backup-restore flows (3 call sites). The "please wait" hint is now shown as a subtitle in the loading overlay, where it belongs—since the overlay already blocks interaction.Extend
useGlobalLoadingwith an optionaldetailparameter onwithLoading(op, message, detail).App.vuerenders it as a secondary text line in the loading card.New
useIpcNotificationCollectorcomposable — allows temporarily collecting backend IPC notifications (restore skip/warning events) instead of displaying each as a separate popup.App.vue's listener checksaddIfCollecting()first.Consolidated restore result —
apply_save()wraps the restore instartCollecting()/stopCollecting(). Warnings are rolled into a single success notification:"恢复成功(恢复过程中有 2 条警告)"via newrecover_success_with_warningsi18n key (en_US + zh_SIMPLIFIED).Before → After