feat: PWA + mobile-friendly layout

- Add vite-plugin-pwa: generates manifest, Workbox service worker, precaches app shell
- Generate icon-192, icon-512, apple-touch-icon PNGs from existing SVG logo
- Add theme-color, apple-mobile-web-app-capable, apple-touch-icon meta tags; viewport-fit=cover for notch support
- Mobile layout (< 768px): bottom tab bar (Library, Albums, Memories, Map, More) replaces top nav; sidebar becomes slide-in filter drawer with backdrop; bulk action bar clears bottom nav; safe-area insets throughout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-08-18 17:03:30 -04:00
1 parent bc2eb7307f
commit 93e16561ec
8 files changed
+5463 -62

No files matched your search

+33 -1
View File
@@ -1,9 +1,41 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
root: 'client',
plugins: [react()],
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['favicon.svg', 'icons/apple-touch-icon.png'],
manifest: {
name: 'Luma',
short_name: 'Luma',
description: 'Self-hosted photo manager',
theme_color: '#0f0f0f',
background_color: '#0f0f0f',
display: 'standalone',
icons: [
{ src: '/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
{ src: '/icons/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
],
},
workbox: {
globPatterns: ['**/*.{js,css,html,svg,png,ico,woff2}'],
runtimeCaching: [
{
urlPattern: /^\/api\//,
handler: 'NetworkFirst',
options: {
cacheName: 'api-cache',
networkTimeoutSeconds: 5,
},
},
],
},
}),
],
server: {
port: 5173,
proxy: {