Merge branch 'main' into help

tgonzales · Jul 25, 2023 · 8624ed6 · 8624ed6
2 parents d08ae50 + 81c9249
commit 8624ed6
Show file tree

Hide file tree

Showing 18 changed files with 206 additions and 330 deletions.
diff --git a/app/ui/modal.tsx b/app/ui/modal.tsx
@@ -5,6 +5,8 @@ import { useRouter } from "next/navigation";
 import FocusTrap from "focus-trap-react";
 import { AnimatePresence, motion, useAnimation } from "framer-motion";
 import { cn } from "#/lib/utils";
+import { Drawer } from "vaul";
+import useWindowSize from "#/lib/hooks/use-window-size";
 
 export default function Modal({
   children,
@@ -22,7 +24,6 @@ export default function Modal({
   disableDefaultHide?: boolean;
 }) {
   const router = useRouter();
-  const mobileModalRef = useRef<HTMLDivElement | null>(null);
 
   const closeModal = ({ dragged }: { dragged?: boolean } = {}) => {
     if (disableDefaultHide && !dragged) {
@@ -51,25 +52,29 @@ export default function Modal({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [showModal, closeModal]);
 
-  const controls = useAnimation();
-  const transitionProps = { type: "spring", stiffness: 500, damping: 30 };
-  useEffect(() => {
-    controls.start({
-      y: 0,
-      transition: transitionProps,
-    });
-  }, []);
+  const { isMobile } = useWindowSize();
 
-  async function handleDragEnd(_, info) {
-    const offset = info.offset.y;
-    const velocity = info.velocity.y;
-    const height = mobileModalRef.current?.getBoundingClientRect().height || 0;
-    if (offset > height / 2 || velocity > 800) {
-      await controls.start({ y: "100%", transition: transitionProps });
-      closeModal({ dragged: true });
-    } else {
-      controls.start({ y: 0, transition: transitionProps });
-    }
+  if (isMobile) {
+    return (
+      <Drawer.Root
+        open={showModal}
+        onOpenChange={(open) => {
+          if (!open) {
+            closeModal({ dragged: true });
+          }
+        }}
+        shouldScaleBackground
+      >
+        <Drawer.Overlay className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur" />
+        <Drawer.Portal>
+          <Drawer.Content className="fixed bottom-0 left-0 right-0 z-40 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white">
+            <div className="mx-auto my-3 h-1 w-12 rounded-full bg-gray-300" />
+            {children}
+          </Drawer.Content>
+          <Drawer.Overlay />
+        </Drawer.Portal>
+      </Drawer.Root>
+    );
   }
 
   return (
@@ -90,26 +95,6 @@ export default function Modal({
           }}
         >
           <div className="absolute">
-            <motion.div
-              ref={mobileModalRef}
-              key="mobile-modal"
-              className="rounded-t-4xl group fixed inset-x-0 bottom-0 z-40 max-h-[80vh] w-screen cursor-grab overflow-scroll bg-white active:cursor-grabbing md:hidden"
-              initial={{ y: "100%" }}
-              animate={controls}
-              exit={{ y: "100%" }}
-              transition={transitionProps}
-              drag="y"
-              dragDirectionLock
-              onDragEnd={handleDragEnd}
-              dragElastic={{ top: 0, bottom: 1 }}
-              dragConstraints={{ top: 0, bottom: 0 }}
-            >
-              <div className="rounded-t-4xl sticky top-0 z-20 flex h-7 w-full items-center justify-center border-t border-gray-200">
-                <div className="-mr-1 h-1 w-6 rounded-full bg-gray-300 transition-all group-active:rotate-12" />
-                <div className="h-1 w-6 rounded-full bg-gray-300 transition-all group-active:-rotate-12" />
-              </div>
-              {children}
-            </motion.div>
             <motion.dialog
               key="desktop-modal"
               className={cn(

diff --git a/app/ui/popover.tsx b/app/ui/popover.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { useParams } from "next/navigation";
-import { ReactNode, useEffect, useRef } from "react";
+import { ReactNode } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { AnimatePresence, motion, useAnimation } from "framer-motion";
+import { Drawer } from "vaul";
 import useWindowSize from "#/lib/hooks/use-window-size";
 
 export default function Popover({
@@ -19,91 +18,42 @@ export default function Popover({
   openPopover;
   setOpenPopover;
 }) {
-  const { slug } = useParams() as { slug?: string };
+  const { isMobile } = useWindowSize();
 
-  const mobileTooltipRef = useRef<HTMLDivElement | null>(null);
-  const controls = useAnimation();
-  const transitionProps = { type: "spring", stiffness: 500, damping: 30 };
-
-  async function handleDragEnd(_, info) {
-    const offset = info.offset.y;
-    const velocity = info.velocity.y;
-    const height =
-      mobileTooltipRef.current?.getBoundingClientRect().height || 0;
-    if (offset > height / 2 || velocity > 800) {
-      await controls.start({ y: "100%", transition: transitionProps });
-      setOpenPopover(false);
-    } else {
-      controls.start({ y: 0, transition: transitionProps });
-    }
+  if (isMobile) {
+    return (
+      <Drawer.Root
+        open={openPopover}
+        onOpenChange={setOpenPopover}
+        shouldScaleBackground
+      >
+        <div className="sm:hidden">{children}</div>
+        <Drawer.Overlay className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur" />
+        <Drawer.Portal>
+          <Drawer.Content className="fixed bottom-0 left-0 right-0 z-40 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white">
+            <div className="mx-auto my-3 h-1 w-12 rounded-full bg-gray-300" />
+            <div className="flex min-h-[150px] w-full items-center justify-center overflow-hidden bg-white pb-8 align-middle shadow-xl">
+              {content}
+            </div>
+          </Drawer.Content>
+          <Drawer.Overlay />
+        </Drawer.Portal>
+      </Drawer.Root>
+    );
   }
-  const { width } = useWindowSize();
-
-  // workaround to make popover close when route changes on desktop
-  useEffect(() => {
-    setOpenPopover(false);
-  }, [slug]);
 
   return (
-    <>
-      <div className="sm:hidden">{children}</div>
-      <AnimatePresence>
-        {openPopover && (
-          <>
-            <motion.div
-              ref={mobileTooltipRef}
-              key="mobile-tooltip"
-              className="group fixed inset-x-0 bottom-0 z-40 w-screen cursor-grab active:cursor-grabbing sm:hidden"
-              initial={{ y: "100%" }}
-              animate={{
-                y: openPopover ? 0 : "100%",
-                transition: transitionProps,
-              }}
-              exit={{ y: "100%" }}
-              transition={transitionProps}
-              drag="y"
-              dragDirectionLock
-              onDragEnd={handleDragEnd}
-              dragElastic={{ top: 0, bottom: 1 }}
-              dragConstraints={{ top: 0, bottom: 0 }}
-            >
-              <div
-                className={`rounded-t-4xl -mb-1 flex h-7 w-full items-center justify-center border-t border-gray-200 bg-white`}
-              >
-                <div className="-mr-1 h-1 w-6 rounded-full bg-gray-300 transition-all group-active:rotate-12" />
-                <div className="h-1 w-6 rounded-full bg-gray-300 transition-all group-active:-rotate-12" />
-              </div>
-              <div className="flex min-h-[150px] w-full items-center justify-center overflow-hidden bg-white pb-8 align-middle shadow-xl">
-                {content}
-              </div>
-            </motion.div>
-            <motion.div
-              key="mobile-tooltip-backdrop"
-              className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur sm:hidden"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={() => setOpenPopover(false)}
-            />
-          </>
-        )}
-      </AnimatePresence>
-      <PopoverPrimitive.Root
-        // workaround to make popover work on mobile (without this it'll automatically close on click without changing route)
-        open={width > 640 && openPopover}
-        onOpenChange={width > 640 && setOpenPopover}
+    <PopoverPrimitive.Root open={openPopover} onOpenChange={setOpenPopover}>
+      <PopoverPrimitive.Trigger className="hidden sm:inline-flex" asChild>
+        {children}
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Content
+        sideOffset={4}
+        align={align}
+        className="z-20 hidden animate-slide-up-fade items-center rounded-md border border-gray-200 bg-white drop-shadow-lg sm:block"
       >
-        <PopoverPrimitive.Trigger className="hidden sm:inline-flex" asChild>
-          {children}
-        </PopoverPrimitive.Trigger>
-        <PopoverPrimitive.Content
-          sideOffset={4}
-          align={align}
-          className="z-20 hidden animate-slide-up-fade items-center rounded-md border border-gray-200 bg-white drop-shadow-lg sm:block"
-        >
-          {content}
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Root>
-    </>
+        {content}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Root>
   );
 }
diff --git a/components/app/links/link-card.tsx b/components/app/links/link-card.tsx
@@ -10,7 +10,7 @@ import IconMenu from "@/components/shared/icon-menu";
 import BlurImage from "#/ui/blur-image";
 import CopyButton from "@/components/shared/copy-button";
 import { Chart, Delete, ThreeDots } from "@/components/shared/icons";
-import Popover from "@/components/shared/popover";
+import Popover from "#/ui/popover";
 import Tooltip, { TooltipContent } from "#/ui/tooltip";
 import useProject from "#/lib/swr/use-project";
 import { LinkProps } from "#/lib/types";

diff --git a/components/app/links/link-filters.tsx b/components/app/links/link-filters.tsx
@@ -25,7 +25,7 @@ import useTags from "#/lib/swr/use-tags";
 import TagBadge, { COLORS_LIST } from "@/components/app/links/tag-badge";
 import { TagProps } from "#/lib/types";
 import { ThreeDots } from "@/components/shared/icons";
-import Popover from "@/components/shared/popover";
+import Popover from "#/ui/popover";
 import IconMenu from "@/components/shared/icon-menu";
 import { mutate } from "swr";
 
@@ -470,7 +470,6 @@ const TagPopover = ({ tag, count }: { tag: TagProps; count: number }) => {
         </div>
       }
       align="end"
-      desktopOnly
       openPopover={openPopover}
       setOpenPopover={setOpenPopover}
     >

diff --git a/components/app/links/link-sort.tsx b/components/app/links/link-sort.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from "react";
 import IconMenu from "@/components/shared/icon-menu";
 import { Sort, Tick } from "@/components/shared/icons";
 import { ChevronDown, SortDesc } from "lucide-react";
-import Popover from "@/components/shared/popover";
+import Popover from "#/ui/popover";
 
 const sortOptions = [
   {

diff --git a/components/app/modals/add-edit-link-modal/index.tsx b/components/app/modals/add-edit-link-modal/index.tsx
@@ -273,6 +273,7 @@ function AddEditLinkModal({
       setShowModal={setShowAddEditLinkModal}
       className="max-w-screen-lg"
       disableDefaultHide={homepageDemo ? false : true}
+      {...(welcomeFlow && { onClose: () => router.back() })}
     >
       <div className="relative grid max-h-[min(906px,_90vh)] w-full divide-x divide-gray-100 overflow-auto scrollbar-hide md:grid-cols-2">
         {!welcomeFlow && !homepageDemo && (

diff --git a/components/app/modals/add-project-modal.tsx b/components/app/modals/add-project-modal.tsx
@@ -87,6 +87,7 @@ function AddProjectModalHelper({
       showModal={showAddProjectModal}
       setShowModal={setShowAddProjectModal}
       disableDefaultHide={welcomeFlow}
+      {...(welcomeFlow && { onClose: () => router.back() })}
     >
       <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-4 pt-8 sm:px-16">
         <Logo />