Skip to content

refactor(gui): ♻️ consolidate backup/restore notifications#369

Merged
mcthesw merged 2 commits intodevfrom
copilot/optimize-notification-ui
Apr 14, 2026
Merged

refactor(gui): ♻️ consolidate backup/restore notifications#369
mcthesw merged 2 commits intodevfrom
copilot/optimize-notification-ui

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 8, 2026

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_hint info 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 useGlobalLoading with an optional detail parameter on withLoading(op, message, detail). App.vue renders it as a secondary text line in the loading card.

  • New useIpcNotificationCollector composable — allows temporarily collecting backend IPC notifications (restore skip/warning events) instead of displaying each as a separate popup. App.vue's listener checks addIfCollecting() first.

  • Consolidated restore resultapply_save() wraps the restore in startCollecting()/stopCollecting(). Warnings are rolled into a single success notification: "恢复成功(恢复过程中有 2 条警告)" via new recover_success_with_warnings i18n key (en_US + zh_SIMPLIFIED).

Before → After

Before After
1 info notification + 1 success notification + N warning popups per operation Loading overlay with hint subtitle → 1 result notification
// Before: 2+ notifications per backup
showInfo({ message: $t('manage.wait_for_prompt_hint') });
await withLoading(async () => { /* ... */ showSuccess(...) }, $t('manage.creating_backup'));

// After: hint integrated into loading overlay, single result notification
await withLoading(
  async () => { /* ... */ showSuccess(...) },
  $t('manage.creating_backup'),
  $t('manage.wait_for_prompt_hint'),
);

Copilot AI linked an issue Apr 8, 2026 that may be closed by this pull request
Copilot AI changed the title [WIP] Optimize notification display for better user experience refactor(gui): ♻️ consolidate backup/restore notifications Apr 8, 2026
Copilot AI requested a review from mcthesw April 8, 2026 16:47
@mcthesw mcthesw force-pushed the copilot/optimize-notification-ui branch from 5414017 to 3a5082b Compare April 13, 2026 15:40
…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
@mcthesw mcthesw force-pushed the copilot/optimize-notification-ui branch from 3a5082b to 6c7aa2d Compare April 13, 2026 16:47
@mcthesw mcthesw marked this pull request as ready for review April 14, 2026 01:29
Copilot AI review requested due to automatic review settings April 14, 2026 01:29
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines +108 to +112
await navigator.clipboard.writeText(text);
copiedId.value = entry.id;
setTimeout(() => {
if (copiedId.value === entry.id) copiedId.value = null;
}, 1500);
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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.');
}

Copilot uses AI. Check for mistakes.
Comment on lines +664 to +665
title: $t('manage.recover_success'),
description: $t('manage.recover_success_with_warnings', { count: warnings.length }),
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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 }),

Copilot uses AI. Check for mistakes.
- 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)
@mcthesw mcthesw force-pushed the copilot/optimize-notification-ui branch from 14d017e to cfd0f6c Compare April 14, 2026 01:44
@mcthesw mcthesw merged commit ea3a4e2 into dev Apr 14, 2026
2 checks passed
@mcthesw mcthesw deleted the copilot/optimize-notification-ui branch April 14, 2026 12:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[功能/FEATURE]精简通知

3 participants