Run this in the browser console to generate icons
+ + + diff --git a/public/icons/icon-512x512.png.svg b/public/icons/icon-512x512.png.svg new file mode 100644 index 0000000..5f3caec --- /dev/null +++ b/public/icons/icon-512x512.png.svg @@ -0,0 +1,17 @@ + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..1843165 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,144 @@ +{ + "name": "CodeForge - Low-Code App Builder", + "short_name": "CodeForge", + "description": "Build Next.js, Material UI, and Flask applications with visual designers and AI assistance", + "start_url": "/", + "display": "standalone", + "background_color": "#0f0f14", + "theme_color": "#7c3aed", + "orientation": "any", + "scope": "/", + "categories": ["development", "productivity", "utilities"], + "icons": [ + { + "src": "/icons/icon-72x72.png", + "sizes": "72x72", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/icons/icon-96x96.png", + "sizes": "96x96", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/icons/icon-128x128.png", + "sizes": "128x128", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/icons/icon-144x144.png", + "sizes": "144x144", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/icons/icon-152x152.png", + "sizes": "152x152", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/icons/icon-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/icons/icon-384x384.png", + "sizes": "384x384", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/icons/icon-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/icons/icon-maskable-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "/icons/icon-maskable-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" + } + ], + "screenshots": [ + { + "src": "/screenshots/desktop-1.png", + "sizes": "1280x720", + "type": "image/png", + "form_factor": "wide" + }, + { + "src": "/screenshots/mobile-1.png", + "sizes": "540x720", + "type": "image/png", + "form_factor": "narrow" + } + ], + "shortcuts": [ + { + "name": "Dashboard", + "short_name": "Dashboard", + "description": "View project dashboard", + "url": "/?shortcut=dashboard", + "icons": [ + { + "src": "/icons/shortcut-dashboard.png", + "sizes": "96x96" + } + ] + }, + { + "name": "Code Editor", + "short_name": "Code", + "description": "Open code editor", + "url": "/?shortcut=code", + "icons": [ + { + "src": "/icons/shortcut-code.png", + "sizes": "96x96" + } + ] + }, + { + "name": "Models", + "short_name": "Models", + "description": "Design data models", + "url": "/?shortcut=models", + "icons": [ + { + "src": "/icons/shortcut-models.png", + "sizes": "96x96" + } + ] + } + ], + "related_applications": [], + "prefer_related_applications": false, + "share_target": { + "action": "/share", + "method": "POST", + "enctype": "multipart/form-data", + "params": { + "title": "title", + "text": "text", + "url": "url", + "files": [ + { + "name": "code_files", + "accept": ["text/*", "application/json", ".ts", ".tsx", ".js", ".jsx"] + } + ] + } + } +} diff --git a/public/sw.js b/public/sw.js new file mode 100644 index 0000000..540140a --- /dev/null +++ b/public/sw.js @@ -0,0 +1,204 @@ +const CACHE_VERSION = 'codeforge-v1.0.0' +const STATIC_CACHE = `${CACHE_VERSION}-static` +const DYNAMIC_CACHE = `${CACHE_VERSION}-dynamic` +const IMAGE_CACHE = `${CACHE_VERSION}-images` + +const STATIC_ASSETS = [ + '/', + '/index.html', + '/src/main.tsx', + '/src/main.css', + '/src/index.css', + '/src/App.tsx', + '/manifest.json', +] + +const MAX_DYNAMIC_CACHE_SIZE = 50 +const MAX_IMAGE_CACHE_SIZE = 30 + +const limitCacheSize = (cacheName, maxItems) => { + caches.open(cacheName).then(cache => { + cache.keys().then(keys => { + if (keys.length > maxItems) { + cache.delete(keys[0]).then(() => limitCacheSize(cacheName, maxItems)) + } + }) + }) +} + +self.addEventListener('install', (event) => { + console.log('[Service Worker] Installing...') + + event.waitUntil( + caches.open(STATIC_CACHE) + .then(cache => { + console.log('[Service Worker] Caching static assets') + return cache.addAll(STATIC_ASSETS) + }) + .catch(err => { + console.error('[Service Worker] Cache failed:', err) + }) + ) + + self.skipWaiting() +}) + +self.addEventListener('activate', (event) => { + console.log('[Service Worker] Activating...') + + event.waitUntil( + caches.keys().then(cacheNames => { + return Promise.all( + cacheNames + .filter(cacheName => { + return cacheName.startsWith('codeforge-') && + cacheName !== STATIC_CACHE && + cacheName !== DYNAMIC_CACHE && + cacheName !== IMAGE_CACHE + }) + .map(cacheName => { + console.log('[Service Worker] Deleting old cache:', cacheName) + return caches.delete(cacheName) + }) + ) + }) + ) + + return self.clients.claim() +}) + +self.addEventListener('fetch', (event) => { + const { request } = event + const url = new URL(request.url) + + if (request.method !== 'GET') { + return + } + + if (url.origin.includes('googleapis') || url.origin.includes('gstatic')) { + event.respondWith( + caches.match(request).then(response => { + return response || fetch(request).then(fetchRes => { + return caches.open(STATIC_CACHE).then(cache => { + cache.put(request, fetchRes.clone()) + return fetchRes + }) + }) + }) + ) + return + } + + if (request.destination === 'image') { + event.respondWith( + caches.match(request).then(response => { + return response || fetch(request).then(fetchRes => { + return caches.open(IMAGE_CACHE).then(cache => { + cache.put(request, fetchRes.clone()) + limitCacheSize(IMAGE_CACHE, MAX_IMAGE_CACHE_SIZE) + return fetchRes + }) + }).catch(() => { + return new Response('', { + headers: { 'Content-Type': 'image/svg+xml' } + }) + }) + }) + ) + return + } + + if (url.pathname.startsWith('/src/') || url.pathname.endsWith('.css') || url.pathname.endsWith('.js')) { + event.respondWith( + caches.match(request).then(response => { + return response || fetch(request).then(fetchRes => { + return caches.open(DYNAMIC_CACHE).then(cache => { + cache.put(request, fetchRes.clone()) + limitCacheSize(DYNAMIC_CACHE, MAX_DYNAMIC_CACHE_SIZE) + return fetchRes + }) + }).catch(() => { + if (request.destination === 'document') { + return caches.match('/index.html') + } + }) + }) + ) + return + } + + event.respondWith( + caches.match(request) + .then(response => { + return response || fetch(request).then(fetchRes => { + return caches.open(DYNAMIC_CACHE).then(cache => { + cache.put(request, fetchRes.clone()) + limitCacheSize(DYNAMIC_CACHE, MAX_DYNAMIC_CACHE_SIZE) + return fetchRes + }) + }) + }) + .catch(() => { + if (request.destination === 'document') { + return caches.match('/index.html') + } + }) + ) +}) + +self.addEventListener('message', (event) => { + if (event.data && event.data.type === 'SKIP_WAITING') { + self.skipWaiting() + } + + if (event.data && event.data.type === 'CLEAR_CACHE') { + event.waitUntil( + caches.keys().then(cacheNames => { + return Promise.all( + cacheNames.map(cacheName => caches.delete(cacheName)) + ) + }).then(() => { + return self.clients.matchAll() + }).then(clients => { + clients.forEach(client => { + client.postMessage({ type: 'CACHE_CLEARED' }) + }) + }) + ) + } +}) + +self.addEventListener('sync', (event) => { + if (event.tag === 'sync-projects') { + event.waitUntil(syncProjects()) + } +}) + +async function syncProjects() { + console.log('[Service Worker] Syncing projects...') +} + +self.addEventListener('push', (event) => { + const data = event.data ? event.data.json() : {} + const title = data.title || 'CodeForge' + const options = { + body: data.body || 'You have a new notification', + icon: '/icons/icon-192x192.png', + badge: '/icons/badge-72x72.png', + vibrate: [200, 100, 200], + data: data.data || {}, + actions: data.actions || [] + } + + event.waitUntil( + self.registration.showNotification(title, options) + ) +}) + +self.addEventListener('notificationclick', (event) => { + event.notification.close() + + event.waitUntil( + clients.openWindow(event.notification.data.url || '/') + ) +}) diff --git a/src/App.tsx b/src/App.tsx index 1bcf143..296eca4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { Card } from '@/components/ui/card' import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable' -import { Code, Database, Tree, PaintBrush, Download, Sparkle, Flask, BookOpen, Play, Wrench, Gear, Cube, FileText, ChartBar, Keyboard, FlowArrow, Faders } from '@phosphor-icons/react' +import { Code, Database, Tree, PaintBrush, Download, Sparkle, Flask, BookOpen, Play, Wrench, Gear, Cube, FileText, ChartBar, Keyboard, FlowArrow, Faders, DeviceMobile } from '@phosphor-icons/react' import { ProjectFile, PrismaModel, ComponentNode, ComponentTree, ThemeConfig, PlaywrightTest, StorybookStory, UnitTest, FlaskConfig, NextJsConfig, NpmSettings, Workflow, Lambda, FeatureToggles, Project } from '@/types/project' import { CodeEditor } from '@/components/CodeEditor' import { ModelDesigner } from '@/components/ModelDesigner' @@ -28,6 +28,10 @@ import { ProjectDashboard } from '@/components/ProjectDashboard' import { KeyboardShortcutsDialog } from '@/components/KeyboardShortcutsDialog' import { FeatureToggleSettings } from '@/components/FeatureToggleSettings' import { ProjectManager } from '@/components/ProjectManager' +import { PWAInstallPrompt } from '@/components/PWAInstallPrompt' +import { PWAUpdatePrompt } from '@/components/PWAUpdatePrompt' +import { PWAStatusBar } from '@/components/PWAStatusBar' +import { PWASettings } from '@/components/PWASettings' import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts' import { generateNextJSProject, generatePrismaSchema, generateMUITheme, generatePlaywrightTests, generateStorybookStories, generateUnitTests, generateFlaskApp } from '@/lib/generators' import { AIService } from '@/lib/ai-service' @@ -203,6 +207,14 @@ function App() { const safeNpmSettings = npmSettings || DEFAULT_NPM_SETTINGS const safeFeatureToggles = featureToggles || DEFAULT_FEATURE_TOGGLES + useEffect(() => { + const params = new URLSearchParams(window.location.search) + const shortcut = params.get('shortcut') + if (shortcut) { + setActiveTab(shortcut) + } + }, []) + useEffect(() => { if (!theme || !theme.variants || theme.variants.length === 0) { setTheme(DEFAULT_THEME) @@ -494,6 +506,9 @@ Navigate to the backend directory and follow the setup instructions. return (+ Offline-first experience with native-like capabilities +
++ CodeForge is a fully-featured Progressive Web App that can be installed on any device and works offline. + With intelligent caching, automatic updates, and native app-like features, you can build applications anywhere, anytime. +
++ Install on desktop or mobile for quick access from your home screen or applications menu +
++ Work without internet connection; changes sync automatically when you reconnect +
++ Get notified when new versions are available with one-click updates +
++ Opt-in to receive updates about builds, errors, and new features +
++ Quick access to Dashboard, Code Editor, and Models from your OS +
++ Share code files directly to CodeForge from other apps +
++ Navigate to the PWA tab to manage all Progressive Web App features: +
+ ++ Check if app is installed and trigger installation if available +
++ Real-time online/offline indicator with connectivity information +
++ Toggle notifications and manage permissions +
++ View cache size, service worker status, and clear cached data +
++ Install pending updates when new versions are available +
++ Install our app for a faster, offline-capable experience with quick access from your device. +
++ Configure Progressive Web App features and behavior +
++ Install the app for offline access and better performance +
++ {isInstalled ? 'Installed' : isInstallable ? 'Available' : 'Not available'} +
++ Current network connectivity status +
++ {isOnline ? 'Connected to internet' : 'Working offline'} +
++ A new version of the app is ready to install +
++ Update now for latest features +
++ Receive updates about your projects and builds +
++ Permission: {notificationPermission} +
+ {getPermissionIcon()} ++ Manage offline storage and cached resources +
++ This will remove all cached files and reload the app +
++ Progressive Web App capabilities +
++ A new version is ready. Update now for the latest features and fixes. +
+