better phone ui

apps/web/src/app/globals.css

@@ -45,4 +45,14 @@ body {
   height: 100dvh;
   max-height: 100vh;
   max-height: 100dvh;
+}
+
+.DrawerContent {
+  padding-top: 5vh;
+  padding-top: 5dvh;
+}
+
+.main-hidden {
+  padding-bottom: 20vh;
+  padding-bottom: 15dvh;
 }

apps/web/src/app/page.tsx

@@ -59,6 +59,23 @@ export default async function Home() {
   const collectedSpaces =
     contents.length > 0 ? await transformContent(contents) : [];
 
+  collectedSpaces.push({
+    id: 1,
+    title: "Test",
+    content: [
+      {
+        id: 1,
+        content: "Test",
+        title: "Vscode",
+        description: "Test",
+        url: "https://vscode-remake.vercel.app/",
+        savedAt: new Date(),
+        baseUrl: "https://vscode-remake.vercel.app/",
+        image: "https://vscode-remake.vercel.app/favicon.svg",
+      },
+    ],
+  });
+
   return (
     <MemoryProvider spaces={collectedSpaces}>
       <Content />

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">

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>

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>