From 3d334829a4f9c30b201b72a518239bab09c0bac2 Mon Sep 17 00:00:00 2001
From: Yash <yashverma30115@gmail.com>
Date: Thu, 4 Apr 2024 16:45:12 +0000
Subject: [PATCH] improve phone ux

---
 apps/web/src/app/globals.css             |  7 ++++
 apps/web/src/components/Main.tsx         | 45 +++++++++++++++++++-----
 apps/web/src/components/MemoryDrawer.tsx | 16 ++++++---
 apps/web/src/lib/utils.ts                |  1 +
 apps/web/tailwind.config.ts              |  2 +-
 5 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 7d8b7c4e..ea526495 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -39,3 +39,10 @@ body {
     text-wrap: balance;
   }
 }
+
+.sidebar {
+  height: 100vh;
+  height: 100dvh;
+  max-height: 100vh;
+  max-height: 100dvh;
+}
\ No newline at end of file
diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
index 8796c52e..aa72a48e 100644
--- a/apps/web/src/components/Main.tsx
+++ b/apps/web/src/components/Main.tsx
@@ -6,37 +6,66 @@ import { ArrowRight } from "lucide-react";
 import { MemoryDrawer } from "./MemoryDrawer";
 import useViewport from "@/hooks/useViewport";
 import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
 
 export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
+  const [hide, setHide] = useState(false);
   const [value, setValue] = useState("");
   const { width } = useViewport();
 
   const textArea = useRef<HTMLTextAreaElement>(null);
+  const main = useRef<HTMLDivElement>(null);
 
   console.log("main px", sidebarOpen);
 
   useEffect(() => {
     function onResize() {
-      if (!textArea.current || !window.visualViewport) return;
-
-      const visualViewportHeight = window.visualViewport.height;
+      if (!main.current || !window.visualViewport) return;
+      // setValue(
+      //   (prev) =>
+      //     prev +
+      //     " changed to " +
+      //     window.visualViewport?.height +
+      //     " " +
+      //     window.innerHeight,
+      // );
+      if (
+        window.visualViewport.height < window.innerHeight + 20 &&
+        window.visualViewport.height > window.innerHeight - 20
+      ) {
+        setHide(false);
+        window.scrollTo(0, 0);
+      } else {
+        setHide(true);
+        window.scrollTo(0, document.body.scrollHeight);
+      }
     }
 
     window.visualViewport?.addEventListener("resize", onResize);
-    return () => window.visualViewport?.removeEventListener("resize", onResize);
+    return () => {
+      window.visualViewport?.removeEventListener("resize", onResize);
+    };
   }, []);
 
   return (
     <motion.main
       data-sidebar-open={sidebarOpen}
-      className="flex h-screen max-h-screen w-full flex-col items-end justify-center gap-5 px-5 pb-[20vh] pt-5 transition-[padding] delay-200 duration-200 md:items-center md:px-72 [&[data-sidebar-open='true']]:pl-[calc(2.5rem+30vw)] [&[data-sidebar-open='true']]:pr-10 [&[data-sidebar-open='true']]:delay-0 "
+      ref={main}
+      className={cn(
+        "sidebar flex w-full flex-col items-end justify-center gap-5 px-5 pt-5 transition-[padding-left,padding-top,padding-right] delay-200 duration-200 md:items-center md:px-72 [&[data-sidebar-open='true']]:pr-10 [&[data-sidebar-open='true']]:delay-0 md:[&[data-sidebar-open='true']]:pl-[calc(2.5rem+30vw)]",
+        hide
+          ? "pb-5"
+          : CSS.supports("height: 100dvh")
+            ? "pb-[13vh]"
+            : "pb-[20vh]",
+      )}
     >
-      <h1 className="text-rgray-11 text-center text-3xl">
+      <h1 className="text-rgray-11 mt-auto w-full text-center text-3xl">
         Ask your Second brain
       </h1>
       <Textarea2
         ref={textArea}
-        className="h-max max-h-[30em] min-h-[3em] resize-y flex-row items-start justify-center overflow-auto py-5 md:h-[20vh] md:resize-none md:flex-col md:items-center md:justify-center md:p-2 md:pb-2 md:pt-2"
+        className="mt-auto h-max max-h-[30em] min-h-[3em] resize-y flex-row items-start justify-center overflow-auto py-5 md:h-[20vh] md:resize-none md:flex-col md:items-center md:justify-center md:p-2 md:pb-2 md:pt-2"
         textAreaProps={{
           placeholder: "Ask your SuperMemory...",
           className:
@@ -56,7 +85,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
           </button>
         </div>
       </Textarea2>
-      {width <= 768 && <MemoryDrawer />}
+      {width <= 768 && <MemoryDrawer hide={hide} />}
     </motion.main>
   );
 }
diff --git a/apps/web/src/components/MemoryDrawer.tsx b/apps/web/src/components/MemoryDrawer.tsx
index f9d7d6c4..e4d2e5db 100644
--- a/apps/web/src/components/MemoryDrawer.tsx
+++ b/apps/web/src/components/MemoryDrawer.tsx
@@ -1,10 +1,13 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Drawer, DrawerContent, DrawerOverlay } from "./ui/drawer";
 import { MemoryIcon } from "@/assets/Memories";
+import { cn } from "@/lib/utils";
 
-export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  hide?: boolean;
+}
 
-export function MemoryDrawer({ className, ...props }: Props) {
+export function MemoryDrawer({ className, hide = false, ...props }: Props) {
   const [activeSnapPoint, setActiveSnapPoint] = useState<
     number | null | string
   >(0.1);
@@ -21,10 +24,13 @@ export function MemoryDrawer({ className, ...props }: Props) {
     >
       <DrawerContent
         overlay={false}
-        className="border-rgray-6 h-full w-screen border-2 pt-4 focus-visible:outline-none"
+        className={cn(
+          "border-rgray-6 h-full w-screen border pt-4 focus-visible:outline-none",
+          hide ? "hidden" : "",
+        )}
         handle={false}
       >
-        <div className="bg-rgray-4 border-rgray-6 text-rgray-11 absolute left-1/2 top-0 flex w-fit -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-2 rounded-md border-2 px-3 py-2">
+        <div className="bg-rgray-4 border-rgray-6 text-rgray-11 absolute left-1/2 top-0 flex w-fit -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-2 rounded-md border px-3 py-2">
           <MemoryIcon className="h-7 w-7" />
           Memories
         </div>
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index c6678e4b..665f0973 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -1,3 +1,4 @@
+"use client";
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index a246df25..39457a34 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -63,7 +63,7 @@ const config: Config = {
       },
     },
   },
-  safelist: ["text-rgray-11/70"],
+  safelist: ["pb-[20vh]", "pb-5"],
   darkMode: "class",
   plugins: [
     require("tailwindcss-animate"),