From c8246e211fcbeed059b20a30d041b707d7a569c1 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Tue, 4 Feb 2025 16:22:31 -0500
Subject: [PATCH] add padding to the pwa to work on ios and theme colors on
 android

Squashed commit of the following:

commit 113d23b446c852492b1b207e420a985409a59a5a
Author: Jared Pereira <jared@awarm.space>
Date:   Tue Feb 4 16:21:44 2025 -0500

    add some more pwa-padding and dynamic theme color on android

commit 16433bd6b6f05328a98af9505af45368d376a7e4
Author: Jared Pereira <jared@awarm.space>
Date:   Tue Feb 4 15:15:21 2025 -0500

    aadd basic pwa padding
---
 app/[leaflet_id]/Leaflet.tsx              |  4 ++--
 app/globals.css                           |  7 +++++++
 app/home/LoggedOutWarning.tsx             |  2 +-
 app/home/page.tsx                         | 10 ++++++++--
 app/layout.tsx                            |  1 +
 components/MobileFooter.tsx               |  4 ++--
 components/ThemeManager/ThemeProvider.tsx |  5 ++++-
 components/ViewportSizeLayout.tsx         |  8 +++++++-
 8 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/app/[leaflet_id]/Leaflet.tsx b/app/[leaflet_id]/Leaflet.tsx
index 0970289f..582faba4 100644
--- a/app/[leaflet_id]/Leaflet.tsx
+++ b/app/[leaflet_id]/Leaflet.tsx
@@ -37,10 +37,10 @@ export function Leaflet(props: {
             <UpdateLeafletTitle entityID={props.leaflet_id} />
             <AddLeafletToHomepage />
             <SelectionManager />
-            {/* we need the padding bottom here because if we don't have it the mobile footer will cut off 
+            {/* we need the padding bottom here because if we don't have it the mobile footer will cut off
             the dropshadow on the page... the padding is compensated by a negative top margin in mobile footer  */}
             <div
-              className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full pb-4"
+              className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full pb-4 pwa-padding"
               id="page-carousel"
             >
               <Pages rootPage={props.leaflet_id} />
diff --git a/app/globals.css b/app/globals.css
index 57d3b576..aeb1c348 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -240,3 +240,10 @@ input[type="number"] {
     z-index: 0;
   }
 }
+
+.pwa-padding {
+  padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
+}
+.pwa-padding-bottom {
+  padding-bottom: max(calc(env(safe-area-inset-bottom) - 14px), 8px);
+}
diff --git a/app/home/LoggedOutWarning.tsx b/app/home/LoggedOutWarning.tsx
index 8b760195..b4ca4955 100644
--- a/app/home/LoggedOutWarning.tsx
+++ b/app/home/LoggedOutWarning.tsx
@@ -10,7 +10,7 @@ export const LoggedOutWarning = (props: {}) => {
       className={`
       homeWarning  z-10 shrink-0
       bg-bg-page rounded-md
-      absolute bottom-14 left-2 right-2
+      absolute bottom-16 left-2 right-2
       sm:static sm:mr-1 sm:ml-6 sm:mt-6 border border-border-light`}
     >
       <div className="px-2 py-1 text-sm text-tertiary flex sm:flex-row flex-col sm:gap-4 gap-1 items-center sm:justify-between">
diff --git a/app/home/page.tsx b/app/home/page.tsx
index 7f9cba8d..b4071e53 100644
--- a/app/home/page.tsx
+++ b/app/home/page.tsx
@@ -99,7 +99,7 @@ export default async function Home() {
         set={permission_token.permission_token_rights[0].entity_set}
       >
         <ThemeProvider entityID={root_entity}>
-          <div className="flex h-full bg-bg-leaflet">
+          <div className="flex h-full bg-bg-leaflet pwa-padding">
             <ThemeBackgroundProvider entityID={root_entity}>
               <div className="home relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row sm:items-stretch flex-col-reverse px-2 sm:px-6 ">
                 {!auth_res && (
@@ -107,7 +107,13 @@ export default async function Home() {
                     <LoggedOutWarning />
                   </div>
                 )}
-                <div className="homeOptions z-10 shrink-0 sm:static absolute bottom-0 left-0 right-0 place-self-end sm:place-self-start flex sm:flex-col flex-row-reverse sm:w-fit w-full items-center px-2 sm:px-0 pb-2 pt-2 sm:pt-7 sm:bg-transparent bg-bg-page border-border border-t sm:border-none">
+                <div
+                  className={`homeOptions z-10 shrink-0
+                    sm:static absolute bottom-0 left-0 right-0
+                    place-self-end sm:place-self-start flex sm:flex-col flex-row-reverse sm:w-fit w-full items-center
+                  px-2 sm:px-0 pwa-padding-bottom pt-2 sm:pt-7 sm:bg-transparent
+                  bg-bg-page border-border border-t sm:border-none`}
+                >
                   <div className="flex sm:flex-col flex-row-reverse gap-2 shrink-0 place-self-end">
                     <CreateNewLeafletButton />
                     <ThemePopover entityID={root_entity} home />
diff --git a/app/layout.tsx b/app/layout.tsx
index a3d2d093..26e2876c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -29,6 +29,7 @@ export const metadata = {
 };
 
 export const viewport = {
+  themeColor: "#ffffff",
   minimumScale: 1,
   initialScale: 1,
   maximumScale: 1,
diff --git a/components/MobileFooter.tsx b/components/MobileFooter.tsx
index 03e13b8a..b0d1c418 100644
--- a/components/MobileFooter.tsx
+++ b/components/MobileFooter.tsx
@@ -14,7 +14,7 @@ export function MobileFooter(props: { entityID: string }) {
   let entity_set = useEntitySetContext();
 
   return (
-    <Media mobile className="mobileFooter w-full z-10 touch-none -mt-4">
+    <Media mobile className="mobileFooter w-full z-10 touch-none -mt-4 ">
       {focusedBlock &&
       focusedBlock.entityType == "block" &&
       entity_set.permissions.write ? (
@@ -30,7 +30,7 @@ export function MobileFooter(props: { entityID: string }) {
           />
         </div>
       ) : entity_set.permissions.write ? (
-        <div className="z-10 pb-2 px-2 pt-0.5 flex justify-between">
+        <div className="z-10 pwa-padding-bottom px-2 pt-0.5 flex justify-between">
           <div className="flex flex-row gap-[6px]">
             <HomeButton />
           </div>
diff --git a/components/ThemeManager/ThemeProvider.tsx b/components/ThemeManager/ThemeProvider.tsx
index d81b73c3..3e21e2c2 100644
--- a/components/ThemeManager/ThemeProvider.tsx
+++ b/components/ThemeManager/ThemeProvider.tsx
@@ -76,6 +76,9 @@ export function ThemeProvider(props: {
     if (!el) return;
     setCSSVariableToColor(el, "--bg-leaflet", bgLeaflet);
     setCSSVariableToColor(el, "--bg-page", bgPage);
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute("content", `rgb(${colorToString(bgLeaflet, "rgb")})`);
     el?.style.setProperty(
       "--bg-page-alpha",
       bgPage.getChannelValue("alpha").toString(),
@@ -122,7 +125,7 @@ export function ThemeProvider(props: {
   ]);
   return (
     <div
-      className="leafletWrapper w-full text-primary h-full flex flex-col bg-center items-stretch"
+      className="leafletWrapper w-full text-primary h-full flex flex-col bg-center items-stretch "
       style={
         {
           "--bg-leaflet": colorToString(bgLeaflet, "rgb"),
diff --git a/components/ViewportSizeLayout.tsx b/components/ViewportSizeLayout.tsx
index 607850e3..53fe7832 100644
--- a/components/ViewportSizeLayout.tsx
+++ b/components/ViewportSizeLayout.tsx
@@ -6,7 +6,13 @@ export function ViewportSizeLayout(props: { children: React.ReactNode }) {
   let viewheight = useViewportSize().height;
   let difference = useViewportDifference();
   return (
-    <div style={{ height: isIOS() ? viewheight : "100%" }}>
+    <div
+      style={{
+        height: isIOS()
+          ? `calc(${viewheight}px + env(safe-area-inset-top)`
+          : "calc(100% + env(safe-area-inset-top)",
+      }}
+    >
       {props.children}
     </div>
   );
-- 
2.51.2