Added PWA and Heatmap calendar

app/[locale]/Providers.tsx

@@ -5,6 +5,7 @@ import { ThemeProvider } from "next-themes";
 import type { ReactNode } from "react";
 
 import { ReactQueryProvider } from "@/components/ReactQueryProvider";
+import { Toaster } from "@/components/ui/sonner";
 
 interface Props {
   locale: "en" | "pt";
@@ -20,6 +21,7 @@ function Providers({ locale, messages, children }: Props) {
         timeZone={"America/Sao_Paulo"}
       >
         <ThemeProvider attribute="class" defaultTheme="system">
+          <Toaster />
           {children}
         </ThemeProvider>
       </NextIntlClientProvider>

app/[locale]/_components/PromptPwa.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import {
+  CheckboxIcon,
+  DownloadIcon,
+  HomeIcon,
+  Share2Icon,
+} from "@radix-ui/react-icons";
+import { useTranslations } from "next-intl";
+import React, { SVGAttributes, useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+export function PromptPwa() {
+  const t = useTranslations("promptPwa");
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    const isIos = /iphone|ipad|ipod/.test(
+      window.navigator.userAgent.toLowerCase()
+    );
+    const sessionIsPwa = window.matchMedia(
+      "(display-mode: standalone)"
+    ).matches;
+
+    if (isIos && !sessionIsPwa) {
+      setShowModal(true);
+    }
+
+    function handleDownloadPwa(deferredPrompt: Event) {
+      if (!deferredPrompt) return;
+      // @ts-ignore
+      deferredPrompt.prompt();
+    }
+
+    const beforeInstallPrompt = (e: Event) => {
+      e.preventDefault();
+      if (sessionIsPwa) return;
+      toast(`🎉 ${t("title")}`, {
+        description: t("description"),
+        action: {
+          label: (
+            <>
+              <DownloadIcon className="mr-2 animate-bounce" />{" "}
+              {t("actionButton")}
+            </>
+          ),
+          onClick: () => {
+            handleDownloadPwa(e);
+          },
+        },
+        classNames: { actionButton: "!p-2 !h-auto" },
+        duration: 8000,
+      });
+    };
+
+    window.addEventListener("beforeinstallprompt", beforeInstallPrompt);
+    return () => {
+      window.removeEventListener("beforeinstallprompt", beforeInstallPrompt);
+    };
+  }, [t]);
+
+  return (
+    <Dialog open={showModal} onOpenChange={setShowModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            🎉 <span className="mx-2 ">{t("title")}</span> 🎉
+          </DialogTitle>
+          <DialogDescription>{t("description")}</DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col divide-y [&>*]:py-4">
+          <div className="flex items-start gap-4 animate-in fade-in-0 slide-in-from-left-4 duration-300 ">
+            <div className="h-6 w-6">
+              <Share2Icon className="!h-6 !w-6" />
+            </div>
+            <p className="text-sm">{t("steps.first")}</p>
+          </div>
+          <div className="flex items-start gap-4 animate-in fade-in-0 slide-in-from-left-4 duration-300">
+            <div className="h-6 w-6">
+              <PlusSquareIcon className="!h-6 !w-6" />
+            </div>
+            <p className="text-sm">{t("steps.second")}</p>
+          </div>
+          <div className="flex items-start gap-4 animate-in fade-in-0 slide-in-from-left-4 duration-300">
+            <div className="h-6 w-6">
+              <CheckboxIcon className="!h-6 !w-6" />
+            </div>
+            <p className="text-sm">{t("steps.third")}</p>
+          </div>
+          <div className="flex items-start gap-4 animate-in fade-in-0 slide-in-from-left-4 duration-300">
+            <div className="h-6 w-6">
+              <HomeIcon className="!h-6 !w-6" />
+            </div>
+            <p className="text-sm">{t("steps.fourth")}</p>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function PlusSquareIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <path d="M8 12h8" />
+      <path d="M12 8v8" />
+    </svg>
+  );
+}

app/[locale]/globals.css

@@ -75,7 +75,8 @@
 @layer base {
   * {
     @apply border-border;
-    min-width: 0
+    min-width: 0;
+    box-sizing: border-box;
   }
   *:focus {
     outline: none;
@@ -88,7 +89,7 @@
 @layer utilities {
   .scrollbar::-webkit-scrollbar {
     width: 8px;
-    height: 12px;
+    height: 8px;
   }
 
   .scrollbar::-webkit-scrollbar-track {

app/[locale]/layout.tsx

@@ -1,26 +1,57 @@
 import "./globals.css";
 
 import { Analytics } from "@vercel/analytics/react";
-import { Inter } from "next/font/google";
+import { GeistSans } from "geist/font/sans";
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { useMessages } from "next-intl";
 
 import Footer from "@/components/Footer";
 import NavBar from "@/components/layout/navbar";
 import { locales } from "@/navigation";
 
+import { PromptPwa } from "./_components/PromptPwa";
 import UsernameDialog from "./_components/UsernameDialog";
 import Providers from "./Providers";
 
-const inter = Inter({
-  subsets: ["latin"],
-  display: "swap",
-  variable: "--font-inter",
-});
+const APP_NAME = "Chooselife";
+const APP_DEFAULT_TITLE = "Chooselife";
+const APP_TITLE_TEMPLATE = "%s - Chooselife";
+const APP_DESCRIPTION = "O aplicativo feito para o Highliner";
 
-export const metadata = {
-  title: "Festival Chooselife",
-  description: "Site oficial do festival Chooselife",
+export const metadata: Metadata = {
+  applicationName: APP_NAME,
+  title: {
+    default: APP_DEFAULT_TITLE,
+    template: APP_TITLE_TEMPLATE,
+  },
+  description: APP_DESCRIPTION,
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: APP_DEFAULT_TITLE,
+    // startUpImage: [],
+  },
+  formatDetection: {
+    telephone: false,
+  },
+  openGraph: {
+    type: "website",
+    siteName: APP_NAME,
+    title: {
+      default: APP_DEFAULT_TITLE,
+      template: APP_TITLE_TEMPLATE,
+    },
+    description: APP_DESCRIPTION,
+  },
+  twitter: {
+    card: "summary",
+    title: {
+      default: APP_DEFAULT_TITLE,
+      template: APP_TITLE_TEMPLATE,
+    },
+    description: APP_DESCRIPTION,
+  },
 };
 
 export default function RootLayout({
@@ -38,9 +69,10 @@ export default function RootLayout({
     // suppressHydrationWarning because of `next-themes`
     // refer to https://github.com/pacocoursey/next-themes#with-app
     <html lang={locale} suppressHydrationWarning>
-      <body className={`min-h-screen md:px-0 ${inter.variable} font-sans`}>
+      <body className={`min-h-screen md:px-0 ${GeistSans.variable} font-sans`}>
         <Providers locale={locale} messages={messages}>
           <div className="relative flex h-full min-h-screen flex-col">
+            <PromptPwa />
             <NavBar />
             <main className="flex-1">
               <UsernameDialog />