better phone ui

3 files changed, 18 insertions, 8 deletions

diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
index e9a7071d..0bfd76a5 100644
--- a/apps/web/src/components/Main.tsx
+++ b/apps/web/src/components/Main.tsx
@@ -51,7 +51,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
       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:gap-10 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" : supportsDVH() ? "pb-[13vh]" : "pb-[20vh]",
+        hide ? "" : "main-hidden",
       )}
     >
       <h1 className="text-rgray-11 mt-auto w-full text-center text-3xl md:mt-0">
diff --git a/apps/web/src/components/MemoryDrawer.tsx b/apps/web/src/components/MemoryDrawer.tsx
index e4d2e5db..61fa5e96 100644
--- a/apps/web/src/components/MemoryDrawer.tsx
+++ b/apps/web/src/components/MemoryDrawer.tsx
@@ -2,6 +2,7 @@ import { useRef, useState } from "react";
 import { Drawer, DrawerContent, DrawerOverlay } from "./ui/drawer";
 import { MemoryIcon } from "@/assets/Memories";
 import { cn } from "@/lib/utils";
+import { MemoriesBar } from "./Sidebar/MemoriesBar";
 
 export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   hide?: boolean;
@@ -25,16 +26,21 @@ export function MemoryDrawer({ className, hide = false, ...props }: Props) {
       <DrawerContent
         overlay={false}
         className={cn(
-          "border-rgray-6 h-full w-screen border pt-4 focus-visible:outline-none",
+          "border-rgray-6 DrawerContent h-full w-screen border 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 px-3 py-2">
+        <button
+          onClick={() =>
+            setActiveSnapPoint((prev) => (prev === 0.9 ? 0.1 : 0.9))
+          }
+          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>
-        Hello
+        </button>
+        <MemoriesBar />
       </DrawerContent>
       <DrawerOverlay className="relative bg-transparent" />
     </Drawer>
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index 290dd623..47916baa 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -36,7 +36,7 @@ import {
   DialogClose,
 } from "../ui/dialog";
 import { Label } from "../ui/label";
-import { DialogTrigger } from "@radix-ui/react-dialog";
+import useViewport from "@/hooks/useViewport";
 
 export function MemoriesBar() {
   const [parent, enableAnimations] = useAutoAnimate();
@@ -123,6 +123,7 @@ export function SpaceItem({
   onDelete,
 }: CollectedSpaces & { onDelete: () => void }) {
   const [itemRef, animateItem] = useAnimate();
+  const { width } = useViewport();
 
   return (
     <motion.div
@@ -134,7 +135,10 @@ export function SpaceItem({
       </button>
       <SpaceMoreButton
         onDelete={() => {
-          if (!itemRef.current) return;
+          if (!itemRef.current || width < 768) {
+            onDelete();
+            return;
+          }
           const trash = document.querySelector("#trash")! as HTMLDivElement;
           const trashBin = document.querySelector("#trash-button")!;
           const trashRect = trashBin.getBoundingClientRect();
@@ -242,7 +246,7 @@ export function SpaceMoreButton({ onDelete }: { onDelete?: () => void }) {
         <DropdownMenuTrigger asChild>
           <button
             data-more-button
-            className="hover:bg-rgray-3 focus-visible:bg-rgray-3 focus-visible:ring-rgray-7 rounded-md ring-transparent transition focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2"
+            className="hover:bg-rgray-3 focus-visible:bg-rgray-3 focus-visible:ring-rgray-7 absolute  right-2 top-2 rounded-md p-1 opacity-0 ring-transparent transition focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2"
           >
             <MoreHorizontal className="text-rgray-11 h-5 w-5" />
           </button>