Add manifest for PWA support

Co-authored-by: José Fonseca <[email protected]>

Author: nalves599

public/web-app-manifest-192x192.png

@@ -1,13 +1,21 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Montserrat } from "next/font/google";
 import "@/styles/globals.css";
 import AuthProvider from "@/context/AuthProvider";
 
 const montserrat = Montserrat({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "SINFO WebApp",
-  description: "SINFO WebApp",
+  title: "SINFO Web App",
+  description: "SINFO Web App",
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: true,
+  viewportFit: "cover",
 };
 
 export default async function RootLayout({

public/web-app-manifest-512x512.png

@@ -22,7 +22,7 @@ export default function Login() {
   });
 
   return (
-    <div className="h-screen bg-sinfo-primary flex flex-col">
+    <div className="min-h-dvh bg-sinfo-primary flex flex-col pb-safe">
       <Image
         className="w-48 mx-auto pt-8"
         src={sinfoLogo}

src/app/apple-icon.png

@@ -0,0 +1,27 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "SINFO - Web App",
+    short_name: "SINFO",
+    description: "SINFO Web Application",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#323363", // SINFO Primary
+    theme_color: "#323363", // SINFO Primary
+    icons: [
+      {
+        src: "/web-app-manifest-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/web-app-manifest-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
+  };
+}

src/app/favicon.ico

@@ -22,7 +22,7 @@ export default async function BottomNavbar() {
   if (!user) return <></>;
 
   return (
-    <div className="sticky z-10 bottom-0 left-0 right-0 bg-sinfo-primary">
+    <div className="sticky z-10 bottom-0 left-0 right-0 bg-sinfo-primary pb-safe">
       <div className="relative container mx-auto flex h-navbar flex-row">
         {navbarItemKeysByRole[convertToAppRole(user.role)].map((k) => (
           <NavbarItem key={k} name={k} />