Add UpdateModal component with GitHub release integration and lastSeenVersion tracking

[Copilot]

Overview

This PR implements an update notification system that automatically checks for new GitHub releases and displays them to users in a modal dialog. The system uses localStorage to track the last seen version, ensuring users only see the modal when there's a new release.

Changes Made

New Components

app/components/UpdateModal.tsx

• Displays GitHub release information in a responsive modal dialog
• Shows version number with a celebration emoji (🎉) in the title
• Renders release notes with proper line break formatting
• Features two action buttons:
  • "View Full Release Notes" - Opens the GitHub release page in a new tab
  • Random fun close button text (Cool!, Awesome!, Rad!, Tubular!, etc.)
• Fully mobile responsive with stacked button layout on smaller screens

app/utils/githubRelease.ts

• fetchLatestRelease() - Fetches the latest release from GitHub API
• getLastSeenVersion() - Retrieves the last seen version from localStorage
• setLastSeenVersion() - Saves the current version to localStorage
• checkForNewRelease() - Compares versions and determines if modal should be shown

Integration

app/routes/home.tsx

• Added state management for update modal visibility and release information
• Implemented useEffect hook to check for updates on app load
• Added handler to close modal and persist version to localStorage
• Integrated UpdateModal rendering in the component tree

How It Works

1. When the app loads, it automatically fetches the latest release from the GitHub API
2. Compares the latest release tag with lastSeenVersion stored in localStorage
3. If there's a new release (or no version has been seen before), displays the update modal
4. When the user closes the modal, the version is saved to localStorage to prevent showing it again

Technical Details

• localStorage Key: lastSeenVersion
• API Endpoint: https://api.github.com/repos/mixtapejaxson/MixClick/releases/latest
• Error Handling: Gracefully handles API failures by logging to console and not showing the modal
• Z-index: Set to 50 to ensure modal appears above other content
• Type Safety: Fully TypeScript typed with proper interfaces

Screenshots

Desktop View

Mobile View

Testing

To test the update modal manually:

1. Open browser console
2. Clear the last seen version: localStorage.removeItem('lastSeenVersion')
3. Reload the page
4. The update modal should appear with the latest release information

Alternatively, set an old version to simulate a new release:

localStorage.setItem('lastSeenVersion', '1.0.0');
location.reload();

Verification

• ✅ TypeScript compilation passes without errors
• ✅ Production build succeeds
• ✅ Follows existing modal design patterns (PopupModal, SettingsModal)
• ✅ Mobile responsive design verified
• ✅ Minimal changes made to existing code

Closes #[issue-number]

Original prompt

rework the notification modal, and add an update modal that saves the version tag from github and any time there's a new release it shows the update notes. call the cookie lastSeenVersion.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
mix-click	Ready	Preview	Comment	Sep 30, 2025 5:14pm