Chrona UI 2.0 – Nimbus

📌 Summary

🚀 Chrona UI 2.0 – Nimbus
This is a major version release focused on transforming the Chrona user interface into a progressive, installable, offline-capable experience with push notifications, enhanced install flows, and Cloudflare-native CI/CD.

---

✨ What’s New / Changed

• Feature
• Refactoring
• CI/CD
• PWA / Push Infrastructure
• Other: Major Upgrade

Summary of Changes:

🌩️ New Capabilities

• Multi-Timer Support

  • Introduced TimerCarousel for managing multiple countdowns
  • Add, delete, and rename timers inline
  • Lazy-loaded timer screens for performance
  • Improved transition and hover animations
  • Fully backwards-compatible with single-timer users

---

• Full PWA support via vite-plugin-pwa:

  • Offline support, caching, custom sw.js, manifest, iOS/macOS install banners
  • Chromium install prompt and install hook via useInstallPrompt()

• Push Notification System:

  • VAPID key support via VAPID_PUBLIC_KEY
  • Browser permission management with useNotificationPermission
  • Auto subscription on login and backend sync (setupPush)
  • Service worker handles timer completion alerts

🔐 CI/CD + DevOps

• Introduced deploy-cloudflare.yml for Wrangler-based deployments to Cloudflare Pages
• Updated preview-pr-deploy.yml and Dockerfile to pass and consume VPUBLIC_KEY
• Removed legacy env.ts in favor of Vite-injected globals via define

🧠 Frontend Enhancements

• NotificationPermissionPrompt component: non-intrusive in-app request prompt

• Mobile install experience:

  • iOS Safari prompt via useIosInstall()
  • macOS Safari 17+ prompt via useSafariInstallBanner()

• Multiple SVG/PNG clock assets for responsive install support

🧼 Refactoring

• Unified state handling for notification permissions
• Simplified useExtensionStatus logic with isGranted hook
• Consistent naming: notificationPermissionGranted across all logic
• Deprecated unused env.ts, replaced with global defines

---

🛑 Breaking Changes

• YES

If yes, describe:

• Notification API now uses notificationPermissionGranted (boolean) instead of notificationPermission (hook-based)
• Build and deploy now expects VAPID_PUBLIC_KEY and BASE-URL from env or secret manager
• Deprecated .env imports in favor of global constants
• Replaced performance.now() with Date.now() to align with backend time coordination
• Service worker moved from public/sw.js to src/sw.ts with PWA injection strategy

---

📈 Testing

• Locally tested (Docker / Vite)
• Verified offline readiness (PWA)
• Push notifications tested on Chrome and Safari
• Cloudflare Pages preview verified
• Lighthouse PWA audit passed
• CI/CD passed (build, preview, production)

Notes:

• Ensure VPUBLIC_KEY is synced via Azure Key Vault and GitHub secrets
• registerSW() is now required in main.tsx and App.tsx

---

🧰 Patch Fixes (Post-tag for v2.0.0)

• Fixed env var propagation issues in Cloudflare deploys:

  • Ensured VITE_BACKEND_API_URL and VITE_VPUBLIC_KEY are available at build time
  • Added test-env.js check in CI and npm run build
  • Improved fallback strategy in vite.config.ts

• Locked Vite to v6.3.4 for PWA stability and better plugin compatibility

• Added VITE_* typing under ImportMetaEnv for IDE support

---

📚 Documentation

• CHANGELOG.md updated
• RELEASE_NOTES.md (next step)
• Docs/Comments added throughout (hooks, lib, sw.ts)

---

📌 Notes to Reviewers (optional)

• Feel free to test install flows on:

  • Chrome (Install button)
  • Safari (macOS + iOS prompts)

• Test push by:

  • Granting notification access
  • Running a timer until completion with app minimized or closed

• Next: plan a 2.0.1 patch for mobile UI scaling tweaks and service worker improvements

---

Version: v2.0.0
Codename: Nimbus ☁️
Description: Fast. Installable. Notified.