From 230ea1d156a56f06d1fa5d79730dde47a86f5f65 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:41:36 +0200
Subject: [PATCH] Sistema i meta della PWA e traduce le schermate di sistema
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`viewport-fit=cover` mancava, quindi `env(safe-area-inset-bottom)` valeva
sempre 0: il codice safe-area della BottomNav c'era già ma era inerte, e su
iPhone in standalone la barra finiva sotto la home bar.

`theme-color` e `background_color` erano `#111111` su un'app con fondo quasi
bianco: barra di stato nera e splash nero prima di una UI chiara.

`lang="en"` su un'app interamente in italiano: gli screen reader leggevano
tutto con fonetica inglese. Con esso 404 e schermata d'errore, che erano
rimaste in inglese.

L'anteprima social puntava a un'immagine di preview Lovable su R2 ormai
scaduta e dichiarava `twitter:site @Lovable`: ora usa l'icona della squadra,
con `summary` al posto di `summary_large_image` visto che l'unica immagine
disponibile è quadrata.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 public/manifest.webmanifest |  5 ++--
 src/routes/__root.tsx       | 53 +++++++++++++++++++------------------
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
index b9a820c..c1658b8 100644
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -2,10 +2,11 @@
   "name": "CrAPP — CRAP Volley",
   "short_name": "CrAPP",
   "description": "L'app della squadra CRAP Volley: presenze, calendario, statistiche, classifica e scout live.",
+  "lang": "it",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#111111",
-  "theme_color": "#111111",
+  "background_color": "#fafafb",
+  "theme_color": "#fafafb",
   "orientation": "portrait",
   "icons": [
     {
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 6b88bdb..05ce366 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -24,17 +24,17 @@ function NotFoundComponent() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-background px-4">
       <div className="max-w-md text-center">
-        <h1 className="text-7xl font-bold text-foreground">404</h1>
-        <h2 className="mt-4 text-xl font-semibold text-foreground">Page not found</h2>
+        <h1 className="font-display-lg text-7xl text-foreground">404</h1>
+        <h2 className="mt-4 text-xl font-semibold text-foreground">Pagina non trovata</h2>
         <p className="mt-2 text-sm text-muted-foreground">
-          The page you're looking for doesn't exist or has been moved.
+          La pagina che cerchi non esiste o è stata spostata.
         </p>
         <div className="mt-6">
           <Link
             to="/"
-            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            className="premi inline-flex min-h-11 items-center justify-center rounded-2xl bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
           >
-            Go home
+            Torna alla home
           </Link>
         </div>
       </div>
@@ -53,26 +53,27 @@ function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
     <div className="flex min-h-screen items-center justify-center bg-background px-4">
       <div className="max-w-md text-center">
         <h1 className="text-xl font-semibold tracking-tight text-foreground">
-          This page didn't load
+          Questa pagina non si è caricata
         </h1>
         <p className="mt-2 text-sm text-muted-foreground">
-          Something went wrong on our end. You can try refreshing or head back home.
+          Qualcosa è andato storto da parte nostra. Puoi riprovare o tornare alla home.
         </p>
         <div className="mt-6 flex flex-wrap justify-center gap-2">
           <button
+            type="button"
             onClick={() => {
               router.invalidate();
               reset();
             }}
-            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            className="premi inline-flex min-h-11 items-center justify-center rounded-2xl bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
           >
-            Try again
+            Riprova
           </button>
           <a
             href="/"
-            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
+            className="premi inline-flex min-h-11 items-center justify-center rounded-2xl border border-border bg-card px-4 py-2 text-sm font-semibold text-foreground"
           >
-            Go home
+            Torna alla home
           </a>
         </div>
       </div>
@@ -84,7 +85,12 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
   head: () => ({
     meta: [
       { charSet: "utf-8" },
-      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      // `viewport-fit=cover` è obbligatorio perché env(safe-area-inset-*) sia
+      // diverso da 0 su iOS: senza, la BottomNav finisce sotto la home bar.
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1, viewport-fit=cover",
+      },
       { title: "CrAPP — L'app del CRAP Volley" },
       {
         name: "description",
@@ -92,7 +98,9 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
           "Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
       },
       { name: "author", content: "CRAP Volley" },
-      { name: "theme-color", content: "#111111" },
+      // Deve combaciare con --background, altrimenti la barra di stato resta
+      // nera sopra un'interfaccia chiara.
+      { name: "theme-color", content: "#fafafb" },
       { property: "og:title", content: "CrAPP — L'app del CRAP Volley" },
       {
         property: "og:description",
@@ -100,24 +108,17 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
           "Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
       },
       { property: "og:type", content: "website" },
-      { name: "twitter:card", content: "summary_large_image" },
-      { name: "twitter:site", content: "@Lovable" },
+      // `summary` e non `summary_large_image`: l'unica immagine è l'icona
+      // quadrata della squadra, non una copertina 2:1.
+      { name: "twitter:card", content: "summary" },
       { name: "twitter:title", content: "CrAPP — L'app del CRAP Volley" },
       {
         name: "twitter:description",
         content:
           "Convocazioni, presenze, statistiche e classifica del CRAP Volley in un'unica app mobile.",
       },
-      {
-        property: "og:image",
-        content:
-          "https://pub-bb2e103a32db4e198524a2e9ed8f35b4.r2.dev/fd5ebd0b-6661-43fa-936c-35856d1068c4/id-preview-2942946e--8d07b0e4-6bd2-4a17-9dd2-bb2cf13f9f7c.lovable.app-1785491191791.png",
-      },
-      {
-        name: "twitter:image",
-        content:
-          "https://pub-bb2e103a32db4e198524a2e9ed8f35b4.r2.dev/fd5ebd0b-6661-43fa-936c-35856d1068c4/id-preview-2942946e--8d07b0e4-6bd2-4a17-9dd2-bb2cf13f9f7c.lovable.app-1785491191791.png",
-      },
+      { property: "og:image", content: "/icon-512.png" },
+      { name: "twitter:image", content: "/icon-512.png" },
     ],
     links: [
       {
@@ -143,7 +144,7 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
 
 function RootShell({ children }: { children: ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="it">
       <head>
         <HeadContent />
       </head>