From 4591f8ebc7ec21b2aa3c2ac7ffda7faefe9598fb Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sat, 20 Jan 2024 00:34:49 -0500
Subject: [PATCH] many more improvements to the PWA

---
 components/LinkViews/Layouts/CardView.tsx     |   9 +-
 components/LinkViews/Layouts/ListView.tsx     |   9 +-
 components/LinkViews/LinkCard.tsx             |   9 +-
 .../LinkViews/LinkComponents/LinkActions.tsx  |   8 +-
 components/LinkViews/LinkList.tsx             |   9 +-
 components/MobileNavigation.tsx               | 121 ++++++++----------
 components/MobileNavigationButton.tsx         |  15 ++-
 components/Modal.tsx                          |   2 +
 layouts/MainLayout.tsx                        |   2 +-
 9 files changed, 106 insertions(+), 78 deletions(-)

diff --git a/components/LinkViews/Layouts/CardView.tsx b/components/LinkViews/Layouts/CardView.tsx
index 5d807cd..3e341cc 100644
--- a/components/LinkViews/Layouts/CardView.tsx
+++ b/components/LinkViews/Layouts/CardView.tsx
@@ -9,7 +9,14 @@ export default function CardView({
   return (
     <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
       {links.map((e, i) => {
-        return <LinkCard key={i} link={e} count={i} />;
+        return (
+          <LinkCard
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+          />
+        );
       })}
     </div>
   );
diff --git a/components/LinkViews/Layouts/ListView.tsx b/components/LinkViews/Layouts/ListView.tsx
index 16f0064..1839284 100644
--- a/components/LinkViews/Layouts/ListView.tsx
+++ b/components/LinkViews/Layouts/ListView.tsx
@@ -9,7 +9,14 @@ export default function ListView({
   return (
     <div className="flex flex-col">
       {links.map((e, i) => {
-        return <LinkList key={i} link={e} count={i} />;
+        return (
+          <LinkList
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+          />
+        );
       })}
     </div>
   );
diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx
index 5282bd6..f61756e 100644
--- a/components/LinkViews/LinkCard.tsx
+++ b/components/LinkViews/LinkCard.tsx
@@ -21,9 +21,15 @@ type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
+  flipDropdown?: boolean;
 };
 
-export default function LinkGrid({ link, count, className }: Props) {
+export default function LinkGrid({
+  link,
+  count,
+  className,
+  flipDropdown,
+}: Props) {
   const { collections } = useCollectionStore();
 
   const { links, getLink } = useLinkStore();
@@ -199,6 +205,7 @@ export default function LinkGrid({ link, count, className }: Props) {
         position="top-[10.75rem] right-3"
         toggleShowInfo={() => setShowInfo(!showInfo)}
         linkInfo={showInfo}
+        flipDropdown={flipDropdown}
       />
     </div>
   );
diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx
index 7f8af67..08d656a 100644
--- a/components/LinkViews/LinkComponents/LinkActions.tsx
+++ b/components/LinkViews/LinkComponents/LinkActions.tsx
@@ -18,6 +18,7 @@ type Props = {
   position?: string;
   toggleShowInfo?: () => void;
   linkInfo?: boolean;
+  flipDropdown?: boolean;
 };
 
 export default function LinkActions({
@@ -25,6 +26,7 @@ export default function LinkActions({
   toggleShowInfo,
   position,
   linkInfo,
+  flipDropdown,
 }: Props) {
   const permissions = usePermissions(link.collection.id as number);
 
@@ -65,9 +67,9 @@ export default function LinkActions({
   return (
     <>
       <div
-        className={`dropdown dropdown-end dropdown-bottom absolute ${
-          position || "top-3 right-3"
-        } z-20`}
+        className={`dropdown dropdown-end dropdown-${
+          flipDropdown ? "top" : "bottom"
+        } absolute ${position || "top-3 right-3"} z-20`}
       >
         <div
           tabIndex={0}
diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx
index 67a75e3..ee98233 100644
--- a/components/LinkViews/LinkList.tsx
+++ b/components/LinkViews/LinkList.tsx
@@ -17,9 +17,15 @@ type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
+  flipDropdown?: boolean;
 };
 
-export default function LinkCardCompact({ link, count, className }: Props) {
+export default function LinkCardCompact({
+  link,
+  count,
+  className,
+  flipDropdown,
+}: Props) {
   const { collections } = useCollectionStore();
 
   const { links } = useLinkStore();
@@ -95,6 +101,7 @@ export default function LinkCardCompact({ link, count, className }: Props) {
           link={link}
           collection={collection}
           position="top-3 right-3"
+          flipDropdown={flipDropdown}
           // toggleShowInfo={() => setShowInfo(!showInfo)}
           // linkInfo={showInfo}
         />
diff --git a/components/MobileNavigation.tsx b/components/MobileNavigation.tsx
index aecafc5..c0c8eee 100644
--- a/components/MobileNavigation.tsx
+++ b/components/MobileNavigation.tsx
@@ -1,6 +1,6 @@
-import { dropdownTriggerer } from "@/lib/client/utils";
+import { dropdownTriggerer, isPWA } from "@/lib/client/utils";
 import React from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import NewLinkModal from "./ModalContent/NewLinkModal";
 import NewCollectionModal from "./ModalContent/NewCollectionModal";
 import UploadFileModal from "./ModalContent/UploadFileModal";
@@ -9,59 +9,50 @@ import MobileNavigationButton from "./MobileNavigationButton";
 type Props = {};
 
 export default function MobileNavigation({}: Props) {
-  const [hasScrolled, setHasScrolled] = useState(false);
   const [newLinkModal, setNewLinkModal] = useState(false);
   const [newCollectionModal, setNewCollectionModal] = useState(false);
   const [uploadFileModal, setUploadFileModal] = useState(false);
 
-  useEffect(() => {
-    const handleScroll = () => {
-      if (window.scrollY > 0) {
-        setHasScrolled(true);
-      } else {
-        setHasScrolled(false);
-      }
-    };
-
-    window.addEventListener("scroll", handleScroll);
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-
   return (
     <>
       <div
-        className={`fixed bottom-0 left-0 right-0 z-30 duration-200 sm:hidden ${
-          hasScrolled ? "opacity-80" : ""
-        }`}
+        className={`fixed bottom-0 left-0 right-0 z-30 duration-200 sm:hidden`}
       >
-        <div className="dropdown dropdown-end dropdown-top absolute -top-20 right-5">
-          <div
-            tabIndex={0}
-            role="button"
-            onMouseDown={dropdownTriggerer}
-            className={`flex items-center btn btn-accent dark:border-violet-400 text-white btn-circle btn-lg px-2 relative`}
-          >
-            <span>
-              <i className="bi-plus text-5xl pointer-events-none"></i>
-            </span>
-          </div>
-          <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mb-1">
-            <li>
-              <div
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  setNewLinkModal(true);
-                }}
-                tabIndex={0}
-                role="button"
-              >
-                New Link
-              </div>
-            </li>
-            {/* <li>
+        <div
+          className={`w-full flex bg-base-100 ${
+            isPWA() ? "pb-5" : ""
+          } border-solid border-t-neutral-content border-t`}
+        >
+          <MobileNavigationButton href={`/dashboard`} icon={"bi-house"} />
+          <MobileNavigationButton
+            href={`/links/pinned`}
+            icon={"bi-pin-angle"}
+          />
+          <div className="dropdown dropdown-top -mt-4">
+            <div
+              tabIndex={0}
+              role="button"
+              onMouseDown={dropdownTriggerer}
+              className={`flex items-center btn btn-accent dark:border-violet-400 text-white btn-circle w-20 h-20 px-2 relative`}
+            >
+              <span>
+                <i className="bi-plus text-5xl pointer-events-none"></i>
+              </span>
+            </div>
+            <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mb-1 -ml-12">
+              <li>
+                <div
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setNewLinkModal(true);
+                  }}
+                  tabIndex={0}
+                  role="button"
+                >
+                  New Link
+                </div>
+              </li>
+              {/* <li>
               <div
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
@@ -73,30 +64,22 @@ export default function MobileNavigation({}: Props) {
                 Upload File
               </div>
             </li> */}
-            <li>
-              <div
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  setNewCollectionModal(true);
-                }}
-                tabIndex={0}
-                role="button"
-              >
-                New Collection
-              </div>
-            </li>
-          </ul>
-        </div>
-
-        <div className="w-full flex bg-base-100 pb-5 border-solid border-t-neutral-content border-t">
-          <MobileNavigationButton href={`/dashboard`} icon={"bi-house"} />
-          <MobileNavigationButton
-            href={`/links/pinned`}
-            icon={"bi-pin-angle"}
-          />
+              <li>
+                <div
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setNewCollectionModal(true);
+                  }}
+                  tabIndex={0}
+                  role="button"
+                >
+                  New Collection
+                </div>
+              </li>
+            </ul>
+          </div>
           <MobileNavigationButton href={`/links`} icon={"bi-link-45deg"} />
           <MobileNavigationButton href={`/collections`} icon={"bi-folder"} />
-          <MobileNavigationButton href={`/tags`} icon={"bi-hash"} />
         </div>
       </div>
       {newLinkModal ? (
diff --git a/components/MobileNavigationButton.tsx b/components/MobileNavigationButton.tsx
index 1aa31f7..a0a13e1 100644
--- a/components/MobileNavigationButton.tsx
+++ b/components/MobileNavigationButton.tsx
@@ -1,3 +1,4 @@
+import { isPWA } from "@/lib/client/utils";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -17,7 +18,19 @@ export default function MobileNavigationButton({
   }, [router]);
 
   return (
-    <Link href={href} className="w-full">
+    <Link
+      href={href}
+      className="w-full active:scale-[80%] duration-200 select-none"
+      draggable="false"
+      style={{ WebkitTouchCallout: "none" }}
+      onContextMenu={(e) => {
+        if (isPWA()) {
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        } else return null;
+      }}
+    >
       <div
         className={`py-2 cursor-pointer gap-2 w-full rounded-full capitalize flex items-center justify-center`}
       >
diff --git a/components/Modal.tsx b/components/Modal.tsx
index c68b2e0..f20d9bb 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -10,8 +10,10 @@ type Props = {
 export default function Modal({ toggleModal, className, children }: Props) {
   useEffect(() => {
     document.body.style.overflow = "hidden";
+    document.body.style.position = "relative";
     return () => {
       document.body.style.overflow = "auto";
+      document.body.style.position = "";
     };
   });
 
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index 7993c45..cc7fc8f 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -46,7 +46,7 @@ export default function MainLayout({ children }: Props) {
         </div>
 
         <div
-          className={`w-full sm:pb-0 pb-40 flex flex-col min-h-${
+          className={`w-full sm:pb-0 pb-20 flex flex-col min-h-${
             showAnnouncement ? "full" : "screen"
           } lg:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
         >