🧙‍♂️ Transform LifeRPG into The Wizard's Grimoire - Production-Ready Application

✨ Major Features Added:
- Complete magical theming and rebranding from LifeRPG to The Wizard's Grimoire
- Production-grade React frontend with Tailwind CSS v4 and magical aesthetics
- Comprehensive analytics dashboard with Recharts integration (ScryingPortal)
- Push notifications system with PWA service worker support
- Drag & drop functionality using @dnd-kit for habit reordering
- Social features with friends system and leaderboards
- Performance optimization tools and monitoring
- Mobile app enhancement with PWA installation support

🏗️ Technical Infrastructure:
- Advanced service worker with offline support and background sync
- Zustand state management for scalable application state
- Production-ready UI component system with enhanced Button, Card, Input
- Progressive Web App (PWA) with manifest and app installation
- FastAPI backend with comprehensive API endpoints
- Docker containerization and CI/CD pipeline setup

📱 Progressive Web App Features:
- Offline functionality with intelligent caching
- Push notification support for habit reminders
- App installation on mobile and desktop platforms
- Background sync for offline data management
- Performance monitoring and optimization tools

🎨 User Experience:
- Magical wizard/grimoire theming throughout application
- Responsive design optimized for all device sizes
- Drag & drop habit management with smooth animations
- Interactive analytics with multiple chart types
- Social connectivity with friends and competitive features
- Comprehensive notification and performance settings

🔧 Developer Experience:
- Modern development stack with Vite and React
- Comprehensive testing setup and CI/CD pipelines
- Code quality tools with pre-commit hooks
- Docker development environment
- Detailed documentation and implementation guides

This represents a complete transformation from prototype to production-ready application with enterprise-grade features and magical user experience.

modern/frontend/src/api.js

@@ -0,0 +1,25 @@
+const API_BASE = import.meta.env.VITE_API_BASE || '/api'
+
+function getCookie(name) {
+    if (typeof document === 'undefined') return null
+    const match = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/([.$?*|{}()\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)'))
+    return match ? decodeURIComponent(match[1]) : null
+}
+
+export async function api(path, opts = {}) {
+    const headers = { 'Content-Type': 'application/json', ...(opts.headers || {}) }
+    // If not using Bearer and we have a csrf token cookie, send header for double-submit pattern
+    const hasBearer = Object.keys(headers).some(k => k.toLowerCase() === 'authorization' && String(headers[k]).toLowerCase().startsWith('bearer '))
+    const csrf = getCookie('csrf_token')
+    if (!hasBearer && csrf) headers['X-CSRF-Token'] = csrf
+
+    const res = await fetch(`${API_BASE}${path}`, {
+        credentials: 'include',
+        headers,
+        ...opts,
+    })
+    const ct = res.headers.get('content-type') || ''
+    const body = ct.includes('application/json') ? await res.json() : await res.text()
+    if (!res.ok) throw new Error(typeof body === 'string' ? body : body?.detail || res.statusText)
+    return body
+}