From d4f59d7f324b44469519f733627bcdc0c26a9f96 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Sun, 14 Jan 2024 10:09:09 -0500 Subject: [PATCH] improvements to the pwa --- components/CollectionCard.tsx | 2 + components/FilterSearchDropdown.tsx | 2 + components/LinkViews/LinkCard.tsx | 9 +- .../LinkViews/LinkComponents/LinkActions.tsx | 2 + .../EditCollectionSharingModal.tsx | 2 + components/Navbar.tsx | 32 ++++-- components/NewButtonMobile.tsx | 97 +++++++++++++++++++ components/Sidebar.tsx | 2 +- components/SortDropdown.tsx | 2 + lib/client/utils.ts | 16 +++ pages/_app.tsx | 12 ++- pages/collections/[id].tsx | 2 + pages/collections/index.tsx | 1 - pages/dashboard.tsx | 2 + pages/search.tsx | 2 - pages/settings/account.tsx | 2 + pages/tags/[id].tsx | 2 + public/site.webmanifest | 2 +- 18 files changed, 168 insertions(+), 23 deletions(-) create mode 100644 components/NewButtonMobile.tsx create mode 100644 lib/client/utils.ts diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index d4c2571..5e1f8a4 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -9,6 +9,7 @@ import useAccountStore from "@/store/account"; import EditCollectionModal from "./ModalContent/EditCollectionModal"; import EditCollectionSharingModal from "./ModalContent/EditCollectionSharingModal"; import DeleteCollectionModal from "./ModalContent/DeleteCollectionModal"; +import { dropdownTriggerer } from "@/lib/client/utils"; type Props = { collection: CollectionIncludingMembersAndLinkCount; @@ -70,6 +71,7 @@ export default function CollectionCard({ collection, className }: Props) {
diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx index 9ab2946..57a0ea4 100644 --- a/components/FilterSearchDropdown.tsx +++ b/components/FilterSearchDropdown.tsx @@ -1,3 +1,4 @@ +import { dropdownTriggerer } from "@/lib/client/utils"; import React from "react"; type Props = { @@ -20,6 +21,7 @@ export default function FilterSearchDropdown({
diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx index 7854446..5282bd6 100644 --- a/components/LinkViews/LinkCard.tsx +++ b/components/LinkViews/LinkCard.tsx @@ -126,17 +126,12 @@ export default function LinkGrid({ link, count, className }: Props) { {unescapeString(link.name || link.description) || link.url}

- +

{shortendURL}

- +
diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx index 2cd0b48..bddab64 100644 --- a/components/LinkViews/LinkComponents/LinkActions.tsx +++ b/components/LinkViews/LinkComponents/LinkActions.tsx @@ -10,6 +10,7 @@ import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsMod import useLinkStore from "@/store/links"; import { toast } from "react-hot-toast"; import useAccountStore from "@/store/account"; +import { dropdownTriggerer } from "@/lib/client/utils"; type Props = { link: LinkIncludingShortenedCollectionAndTags; @@ -71,6 +72,7 @@ export default function LinkActions({
diff --git a/components/ModalContent/EditCollectionSharingModal.tsx b/components/ModalContent/EditCollectionSharingModal.tsx index 7de480f..11690a7 100644 --- a/components/ModalContent/EditCollectionSharingModal.tsx +++ b/components/ModalContent/EditCollectionSharingModal.tsx @@ -9,6 +9,7 @@ import usePermissions from "@/hooks/usePermissions"; import ProfilePhoto from "../ProfilePhoto"; import addMemberToCollection from "@/lib/client/addMemberToCollection"; import Modal from "../Modal"; +import { dropdownTriggerer } from "@/lib/client/utils"; type Props = { onClose: Function; @@ -264,6 +265,7 @@ export default function EditCollectionSharingModal({
{roleLabel} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index fb3678e..c0ca7f4 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -13,6 +13,8 @@ import NewLinkModal from "./ModalContent/NewLinkModal"; import NewCollectionModal from "./ModalContent/NewCollectionModal"; import Link from "next/link"; import UploadFileModal from "./ModalContent/UploadFileModal"; +import { dropdownTriggerer } from "@/lib/client/utils"; +import NewButtonMobile from "./NewButtonMobile"; export default function Navbar() { const { settings, updateSettings } = useLocalSettingsStore(); @@ -35,14 +37,12 @@ export default function Navbar() { useEffect(() => { setSidebar(false); - }, [width]); - - useEffect(() => { - setSidebar(false); - }, [router]); + document.body.style.overflow = "auto"; + }, [width, router]); const toggleSidebar = () => { - setSidebar(!sidebar); + setSidebar(false); + document.body.style.overflow = "auto"; }; const [newLinkModal, setNewLinkModal] = useState(false); @@ -52,7 +52,10 @@ export default function Navbar() { return (
{ + setSidebar(true); + document.body.style.overflow = "hidden"; + }} className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden" > @@ -61,11 +64,12 @@ export default function Navbar() {
-
+
@@ -117,7 +121,12 @@ export default function Navbar() {
-
+
-
  • +
  • { (document?.activeElement as HTMLElement)?.blur(); @@ -161,6 +170,9 @@ export default function Navbar() {
    • + + + {sidebar ? (
    diff --git a/components/NewButtonMobile.tsx b/components/NewButtonMobile.tsx new file mode 100644 index 0000000..91988d3 --- /dev/null +++ b/components/NewButtonMobile.tsx @@ -0,0 +1,97 @@ +import { dropdownTriggerer } from "@/lib/client/utils"; +import React from "react"; +import { useEffect, useState } from "react"; +import NewLinkModal from "./ModalContent/NewLinkModal"; +import NewCollectionModal from "./ModalContent/NewCollectionModal"; +import UploadFileModal from "./ModalContent/UploadFileModal"; + +type Props = {}; + +export default function NewButtonMobile({}: 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 ( + <> +
    +
    + + + +
    +
      +
    • +
      { + (document?.activeElement as HTMLElement)?.blur(); + setNewLinkModal(true); + }} + tabIndex={0} + role="button" + > + New Link +
      +
      • + {/*
    • +
      { + (document?.activeElement as HTMLElement)?.blur(); + setUploadFileModal(true); + }} + tabIndex={0} + role="button" + > + Upload File +
      +
      • */} +
    • +
      { + (document?.activeElement as HTMLElement)?.blur(); + setNewCollectionModal(true); + }} + tabIndex={0} + role="button" + > + New Collection +
      +
      • +
    +
    + {newLinkModal ? ( + setNewLinkModal(false)} /> + ) : undefined} + {newCollectionModal ? ( + setNewCollectionModal(false)} /> + ) : undefined} + {uploadFileModal ? ( + setUploadFileModal(false)} /> + ) : undefined} + + ); +} diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index 75c0686..e38a31d 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -44,7 +44,7 @@ export default function Sidebar({ className }: { className?: string }) { return (