feat(pwa): add mobile optimizations (safe areas, touch targets, standalone mode)

frontend/generate-icons.js

@@ -0,0 +1,21 @@
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+
+const svgPath = path.join(__dirname, 'public/icon-192.svg');
+if (!fs.existsSync(svgPath)) {
+  console.error('SVG template not found at', svgPath);
+  process.exit(1);
+}
+const svgBuffer = fs.readFileSync(svgPath);
+
+Promise.all([
+  sharp(svgBuffer).resize(192, 192).png().toFile(path.join(__dirname, 'public/icon-192.png')),
+  sharp(svgBuffer).resize(512, 512).png().toFile(path.join(__dirname, 'public/icon-512.png')),
+  sharp(svgBuffer).resize(180, 180).png().toFile(path.join(__dirname, 'public/apple-touch-icon.png')),
+  sharp(svgBuffer).resize(384, 384).extend({ top: 64, bottom: 64, left: 64, right: 64, background: { r: 27, g: 26, b: 85, alpha: 1 } }).png().toFile(path.join(__dirname, 'public/icon-maskable.png'))
+]).then(() => {
+  console.log('Icons created successfully');
+}).catch((err) => {
+  console.error('Icon generation failed:', err);
+});

frontend/package-lock.json

@@ -23,6 +23,7 @@
         "react-big-calendar": "^1.19.4",
         "react-dom": "19.2.4",
         "shadcn": "^4.1.0",
+        "sharp": "^0.34.5",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
         "tw-animate-css": "^1.4.0",
@@ -1055,7 +1056,6 @@
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
       "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=18"
       }
@@ -4192,7 +4192,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -8787,7 +8786,6 @@
       "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "optional": true,
       "dependencies": {
         "@img/colour": "^1.0.0",
         "detect-libc": "^2.1.2",
@@ -8831,7 +8829,6 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
       "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "license": "ISC",
-      "optional": true,
       "bin": {
         "semver": "bin/semver.js"
       },

frontend/package.json

@@ -24,6 +24,7 @@
     "react-big-calendar": "^1.19.4",
     "react-dom": "19.2.4",
     "shadcn": "^4.1.0",
+    "sharp": "^0.34.5",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",

frontend/public/icon-192.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
+  <rect width="192" height="192" rx="24" fill="#1B1A55"/>
+  <text x="96" y="100" font-family="Arial, sans-serif" font-size="80" font-weight="bold" fill="#9290C3" text-anchor="middle">W</text>
+</svg>

frontend/public/manifest.json

@@ -0,0 +1,31 @@
+{
+  "name": "WrestleDesk",
+  "short_name": "WrestleDesk",
+  "description": "Wrestling Club Management System",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#070F2B",
+  "theme_color": "#1B1A55",
+  "orientation": "portrait",
+  "scope": "/",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

frontend/src/app/globals.css

@@ -146,3 +146,29 @@
     background: oklch(0.5 0 0 / 35%);
 }
 }
+/* Mobile/PWA Optimizations */
+html { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
+
+/* iOS Safe Areas */
+body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
+
+/* Prevent zoom on input focus */
+input, select, textarea { font-size: 16px; }
+
+/* Hide scrollbar on mobile */
+@media (max-width: 768px) {
+  ::-webkit-scrollbar { display: none; }
+  body { scrollbar-width: none; }
+}
+
+/* Minimum touch target 44x44px */
+button, a, input, select, textarea, [role="button"] { min-height: 44px; min-width: 44px; }
+
+/* Disable hover effects on touch devices */
+@media (hover: none) { *:hover { transform: none !important; } }
+
+/* PWA standalone mode styles */
+@media (display-mode: standalone) {
+  html { height: 100vh; height: 100dvh; }
+  body { overflow: hidden; position: fixed; width: 100%; height: 100%; }
+}

frontend/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next"
+import type { Metadata, Viewport } from "next"
 import { Syne, DM_Sans } from "next/font/google"
 import "./globals.css"
 import { Providers } from "./providers"
@@ -15,9 +15,33 @@ const dmSans = DM_Sans({
   weight: ["400", "500", "600", "700"],
 })
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  themeColor: "#1B1A55",
+  viewportFit: "cover",
+}
+
 export const metadata: Metadata = {
   title: "WrestleDesk",
   description: "Wrestling Club Management System",
+  manifest: "/manifest.json",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+    title: "WrestleDesk",
+  },
+  icons: {
+    icon: [
+      { url: "/icon-192.png", sizes: "192x192", type: "image/png" },
+      { url: "/icon-512.png", sizes: "512x512", type: "image/png" },
+    ],
+    apple: [
+      { url: "/icon-192.png", sizes: "192x192", type: "image/png" },
+    ],
+  },
 }
 
 export default function RootLayout({