responsiveness and phone memory drawer

apps/web/src/components/Main.tsx

@@ -3,35 +3,40 @@ import { useState } from "react";
 import { FilterCombobox } from "./Sidebar/FilterCombobox";
 import { Textarea2 } from "./ui/textarea";
 import { ArrowRight } from "lucide-react";
+import { MemoryDrawer } from "./MemoryDrawer";
+import useViewport from "@/hooks/useViewport";
 
 export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   const [value, setValue] = useState("");
+  const { width } = useViewport();
 
   return (
     <main
       data-sidebar-open={sidebarOpen}
-      className="flex h-screen w-full items-center justify-center px-60 [&[data-sidebar-open='true']]:px-20"
+      className="flex h-screen max-h-screen w-full items-end justify-center px-5 py-40 md:items-center md:px-60 md:[&[data-sidebar-open='true']]:px-20"
     >
       <Textarea2
-        className="h-[20vh]"
+        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"
         textAreaProps={{
           placeholder: "Ask your SuperMemory...",
-          className: "text-lg p-2 text-rgray-11",
+          className:
+            "h-auto overflow-auto md:h-full md:resize-none text-lg py-0 px-2 md:py-0 md:p-5 resize-y text-rgray-11 w-full min-h-[1em]",
           value,
           autoFocus: true,
           onChange: (e) => setValue(e.target.value),
         }}
       >
-        <div className="text-rgray-11/70 flex w-full items-center justify-center p-2 pl-0">
-          <FilterCombobox />
+        <div className="text-rgray-11/70 flex h-full w-fit items-center justify-center pl-0 md:w-full md:p-2">
+          <FilterCombobox className="hidden md:flex" />
           <button
             disabled={value.trim().length < 1}
-            className="text-rgray-11/70 bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-4 ml-auto flex items-center justify-center rounded-full p-2 ring-2 ring-transparent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="text-rgray-11/70 bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-4 mt-auto flex items-center justify-center rounded-full p-2 ring-2 ring-transparent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:ml-auto md:mt-0"
           >
             <ArrowRight className="h-5 w-5" />
           </button>
         </div>
       </Textarea2>
+      {width <= 768 && <MemoryDrawer />}
     </main>
   );
 }

apps/web/src/components/MemoryDrawer.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { Drawer, DrawerContent, DrawerOverlay } from "./ui/drawer";
+import { MemoryIcon } from "@/assets/Memories";
+
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export function MemoryDrawer({ className, ...props }: Props) {
+  const [activeSnapPoint, setActiveSnapPoint] = useState<
+    number | null | string
+  >(0.1);
+
+  return (
+    <Drawer
+      snapPoints={[0.1, 0.9]}
+      activeSnapPoint={activeSnapPoint}
+      shouldScaleBackground={false}
+      setActiveSnapPoint={setActiveSnapPoint}
+      open={true}
+      dismissible={false}
+      modal={false}
+    >
+      <DrawerContent
+        overlay={false}
+        className="border-rgray-6 h-full w-screen border-2 pt-4 focus-visible:outline-none"
+        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">
+          <MemoryIcon className="h-7 w-7" />
+          Memories
+        </div>
+        Hello
+      </DrawerContent>
+      <DrawerOverlay className="relative bg-transparent" />
+    </Drawer>
+  );
+}

apps/web/src/components/Sidebar/index.tsx

@@ -47,7 +47,7 @@ export default function Sidebar({
 
   return (
     <>
-      <div className="bg-rgray-2 border-r-rgray-6 flex h-screen max-h-screen w-max flex-col items-center border-r px-2 py-5 text-sm font-light">
+      <div className="bg-rgray-2 border-r-rgray-6 hidden h-screen max-h-screen w-max flex-col items-center border-r px-2 py-5 text-sm font-light md:flex">
         {menuItemsTop.map((item, index) => (
           <MenuItem
             key={index}
@@ -96,7 +96,7 @@ const MenuItem = ({
 
 export function SubSidebar({ children }: { children?: React.ReactNode }) {
   return (
-    <div className="bg-rgray-3 border-r-rgray-6 flex h-screen w-[50vw] flex-col items-center border-r font-light">
+    <div className="bg-rgray-3 border-r-rgray-6 hidden h-screen w-[50vw] flex-col items-center border-r font-light md:flex">
       {children}
     </div>
   );

apps/web/src/components/ui/drawer.tsx

@@ -28,6 +28,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
+    data-drawer-overlay
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
     {...props}
   />
@@ -36,10 +37,13 @@ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    overlay?: boolean;
+    handle?: boolean;
+  }
+>(({ className, children, overlay = true, handle = true, ...props }, ref) => (
   <DrawerPortal>
-    <DrawerOverlay />
+    {overlay && <DrawerOverlay />}
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
@@ -48,7 +52,9 @@ const DrawerContent = React.forwardRef<
       )}
       {...props}
     >
-      <div className="bg-rgray-4 mx-auto mt-4 h-2 w-[100px] rounded-full " />
+      {handle && (
+        <div className="bg-rgray-4 mx-auto mt-4 h-2 w-[100px] rounded-full " />
+      )}
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>

apps/web/src/hooks/useViewport.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+
+function getViewport() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useViewport() {
+  const [viewport, setViewport] = useState(getViewport());
+
+  useEffect(() => {
+    function handleResize() {
+      setViewport(getViewport());
+    }
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return viewport;
+}