Skip to content

Add automatic update notifications on app startup#153

Merged
theunavailableguy merged 3 commits into
masterfrom
feat/auto-update-notification
Jul 12, 2026
Merged

Add automatic update notifications on app startup#153
theunavailableguy merged 3 commits into
masterfrom
feat/auto-update-notification

Conversation

@AIEraDev

Copy link
Copy Markdown
Owner

Summary

This PR adds a beautiful auto-update notification system that checks for new releases on app startup and prompts users to update with a single click.

Features

🎯 Automatic Update Checks

  • Checks for updates 3 seconds after app startup (non-blocking)
  • Uses existing infrastructure
  • Queries GitHub releases endpoint for latest version
  • Silent when already on latest version

🎨 Beautiful Update Banner

  • Glassmorphic floating pill that slides up from the bottom of the screen
  • Shows current version and new available version
  • Live download progress bar with real-time percentage during installation
  • Update button: Downloads and installs update, then auto-relaunches app
  • Dismiss button (✕): Hides banner and remembers choice for current session
  • Elegant fade and slide animations

🧠 Smart Session Management

  • Dismissed updates are stored in sessionStorage
  • Same version won't re-appear within the same app session
  • Will check again on next app launch
  • Doesn't spam users with repeated notifications

Implementation

New Files

  1. src/hooks/useAutoUpdater.ts

    • React hook that manages update checking lifecycle
    • Tracks update state (idle, checking, available, downloading, installing)
    • Returns update version, download progress, and action handlers
    • Handles sessionStorage for dismissed updates
  2. src/components/ui/UpdateBanner.tsx

    • Beautiful floating notification banner component
    • Positioned as fixed overlay (doesn't interfere with app UI)
    • Real-time progress bar during download
    • Smooth animations and transitions
  3. src/App.tsx (modified)

    • Integrates useAutoUpdater hook on app mount
    • Renders UpdateBanner as portal-level component
    • Positioned outside modals for maximum visibility

User Experience

Flow

  1. User launches Clypra
  2. After 3 seconds, app silently checks for updates
  3. If new version available → banner slides up from bottom
  4. User clicks "Update" → download starts with progress bar
  5. Download completes → app automatically relaunches with new version
  6. Or user clicks → banner hides, won't show again this session

No Impact on Current Features

  • Settings > About still has manual "Check for Updates" button
  • Manual check shows full UI with changelog
  • Auto-update is non-intrusive and dismissible
  • App remains fully functional during all update operations

Infrastructure

All infrastructure was already in place:

  • tauri-plugin-updater in Cargo.toml
  • ✅ Updater endpoint in tauri.conf.json
  • updaterService.ts frontend service
  • ✅ Capabilities configured
  • ✅ Release workflow generates updater artifacts

This PR only adds the missing automatic check + notification UI.

Testing

  • ✅ TypeScript compilation: 0 errors
  • ✅ Component renders without crashing
  • ✅ Update detection works with version comparison
  • ✅ Session storage persists dismissed versions
  • ✅ Progress bar updates during download

Benefits

  • 📱 Users stay up-to-date automatically
  • 🎨 Beautiful, non-intrusive UI
  • ⚡ Fast and responsive (3s delay, non-blocking)
  • 🧠 Smart enough not to spam users
  • 🔄 Seamless update experience with auto-relaunch

Next Steps

After merging:

  1. Users on v1.0.5 will get this auto-update feature
  2. Future releases will automatically notify users
  3. No manual update checks needed for most users

AIEraDev added 3 commits July 12, 2026 16:35
- Automatically checks for updates 3 seconds after app startup
- Tracks download progress with percentage
- Persists dismissed versions in sessionStorage per-session
- Returns update state, version info, and install/dismiss handlers
- Non-blocking - app remains fully functional during check
- Beautiful glassmorphic floating banner that slides up from bottom
- Shows new version number and current version
- Live download progress bar during update installation
- Update button triggers installation and auto-relaunch
- Dismiss button hides banner and remembers choice per-session
- Elegant animations with fade and slide transitions
- Positioned as fixed overlay that doesn't interfere with app UI
- Import and initialize useAutoUpdater hook on app startup
- Render UpdateBanner component as portal-level overlay
- Banner appears outside all modals and dialogs
- Positioned in ErrorBoundary root for maximum visibility
- Completes end-to-end auto-update flow from check to install
@theunavailableguy theunavailableguy merged commit 3d0c1ef into master Jul 12, 2026
2 checks passed
@theunavailableguy theunavailableguy deleted the feat/auto-update-notification branch July 12, 2026 15:37
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.

2 participants