From 7e802a193955361fb7e414c2eb60c02796d1bd8e Mon Sep 17 00:00:00 2001
From: Dhravya <dhravyashah@gmail.com>
Date: Tue, 25 Jun 2024 00:18:05 -0500
Subject: [PATCH] =?UTF-8?q?to=20a=20responsive=20future=20=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/app/(dash)/dynamicisland.tsx | 69 ++++-----------------------
 apps/web/app/(dash)/layout.tsx        |  2 +-
 apps/web/app/(dash)/menu.tsx          | 64 ++++++++++++++++++-------
 apps/web/wrangler.toml                |  8 ++--
 4 files changed, 63 insertions(+), 80 deletions(-)

diff --git a/apps/web/app/(dash)/dynamicisland.tsx b/apps/web/app/(dash)/dynamicisland.tsx
index 9061b8ad..8b1b4633 100644
--- a/apps/web/app/(dash)/dynamicisland.tsx
+++ b/apps/web/app/(dash)/dynamicisland.tsx
@@ -101,7 +101,7 @@ function DynamicIslandContent() {
   );
 }
 
-const fakeitems = ["spaces", "page", "note"];
+const fakeitems = ["page", "spaces"];
 
 function ToolBar({ cancelfn }: { cancelfn: () => void }) {
   const [spaces, setSpaces] = useState<Space[]>([]);
@@ -150,12 +150,10 @@ function ToolBar({ cancelfn }: { cancelfn: () => void }) {
             indexFn={(i) => setIndex(i)}
           />
         </div>
-        {index === 0 ? (
+        {index === 1 ? (
           <SpaceForm cancelfn={cancelfn} />
-        ) : index === 1 ? (
-          <PageForm cancelfn={cancelfn} spaces={spaces} />
         ) : (
-          <NoteForm cancelfn={cancelfn} spaces={spaces} />
+          <PageForm cancelfn={cancelfn} spaces={spaces} />
         )}
       </motion.div>
     </AnimatePresence>
@@ -220,9 +218,9 @@ function SpaceForm({ cancelfn }: { cancelfn: () => void }) {
         />
       </div>
       <div className="flex justify-between">
-        <a className="text-blue-500" href="">
+        {/* <a className="text-blue-500" href="">
           pull from store
-        </a>
+        </a> */}
         {/* <div
           onClick={cancelfn}
           className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer"
@@ -262,11 +260,11 @@ function PageForm({
           toast.error("Content is required");
           return;
         }
+        cancelfn();
         const cont = await createMemory({
           content: content,
           spaces: space ? [space] : undefined,
         });
-        cancelfn();
 
         if (cont.success) {
           toast.success("Memory created");
@@ -274,7 +272,7 @@ function PageForm({
           toast.error("Memory creation failed");
         }
       }}
-      className="bg-secondary border border-muted-foreground px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3"
+      className="bg-secondary border border-muted-foreground px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3 w-[100vw] md:w-[400px]"
     >
       <div>
         <Label className="text-[#858B92]" htmlFor="space">
@@ -295,12 +293,13 @@ function PageForm({
       </div>
       <div>
         <Label className="text-[#858B92]" htmlFor="name">
-          Page Url
+          Resource (URL or content)
         </Label>
-        <Input
+        <Textarea
           className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
           id="input"
           name="content"
+          placeholder="Start typing a note or paste a URL here. I'll remember it."
         />
       </div>
       <div className="flex justify-end">
@@ -314,51 +313,3 @@ function PageForm({
     </form>
   );
 }
-
-function NoteForm({
-  cancelfn,
-  spaces,
-}: {
-  cancelfn: () => void;
-  spaces: Space[];
-}) {
-  return (
-    <div className="bg-secondary border border-muted-foreground px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
-      <div>
-        <Label className="text-[#858B92]" htmlFor="name">
-          Space
-        </Label>
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Space" />
-          </SelectTrigger>
-          <SelectContent className="bg-secondary text-white">
-            {spaces.map((space) => (
-              <SelectItem key={space.id} value={space.id.toString()}>
-                {space.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-      <div>
-        <Label className="text-[#858B92]" htmlFor="name">
-          Note
-        </Label>
-        <Textarea
-          cols={4}
-          className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0 resize-none"
-          id="name"
-        />
-      </div>
-      <div className="flex justify-end">
-        <div
-          onClick={cancelfn}
-          className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer"
-        >
-          cancel
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/app/(dash)/layout.tsx b/apps/web/app/(dash)/layout.tsx
index 1666aa1c..3ae4e76d 100644
--- a/apps/web/app/(dash)/layout.tsx
+++ b/apps/web/app/(dash)/layout.tsx
@@ -19,7 +19,7 @@ async function Layout({ children }: { children: React.ReactNode }) {
 
       <Menu />
 
-      <div className="w-full h-full">{children}</div>
+      <div className="w-full h-full px-2 md:px-0">{children}</div>
 
       <Toaster />
     </main>
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index 23fa2bef..b7ea6c1c 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -1,12 +1,9 @@
+"use client";
+
 import React from "react";
 import Image from "next/image";
-import {
-  MemoriesIcon,
-  ExploreIcon,
-  HistoryIcon,
-  CanvasIcon,
-} from "@repo/ui/icons";
 import Link from "next/link";
+import { MemoriesIcon, ExploreIcon, CanvasIcon } from "@repo/ui/icons";
 
 function Menu() {
   const menuItems = [
@@ -14,45 +11,80 @@ function Menu() {
       icon: MemoriesIcon,
       text: "Memories",
       url: "/memories",
+      disabled: false,
     },
     {
       icon: ExploreIcon,
       text: "Explore",
       url: "/explore",
+      disabled: true,
     },
     {
       icon: CanvasIcon,
       text: "Canvas",
       url: "/canvas",
+      disabled: true,
     },
   ];
 
   return (
-    <div className="fixed h-screen pb-20 w-full p-4 flex items-end justify-end lg:justify-start lg:items-center top-0 left-0 pointer-events-none">
-      <div className="">
+    <>
+      {/* Desktop Menu */}
+      <div className="hidden lg:flex fixed h-screen pb-20 w-full p-4 items-center justify-start top-0 left-0 pointer-events-none">
         <div className="pointer-events-auto group flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] bg-secondary px-3 py-4 duration-200 hover:w-40">
           {menuItems.map((item) => (
             <Link
-              href={item.url}
+              aria-disabled={item.disabled}
+              href={item.disabled ? "#" : item.url}
               key={item.url}
-              className="flex w-full text-[#777E87] brightness-75 hover:brightness-125 cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 active:scale-90 justify-end md:justify-start"
+              className={`flex w-full ${
+                item.disabled
+                  ? "cursor-not-allowed opacity-50"
+                  : "text-[#777E87] brightness-75 hover:brightness-125 cursor-pointer"
+              } items-center gap-3 px-1 duration-200 hover:scale-105 active:scale-90 justify-start`}
             >
-              <p className="md:hidden opacity-0 duration-200 group-hover:opacity-100">
-                {item.text}
-              </p>
               <Image
                 src={item.icon}
                 alt={`${item.text} icon`}
-                className="hover:brightness-125 duration-200 "
+                width={24}
+                height={24}
+                className="hover:brightness-125 duration-200"
               />
-              <p className="hidden md:block opacity-0 duration-200 group-hover:opacity-100">
+              <p className="opacity-0 duration-200 group-hover:opacity-100">
                 {item.text}
               </p>
             </Link>
           ))}
         </div>
       </div>
-    </div>
+
+      {/* Mobile Menu */}
+      <div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary">
+        <div className="flex justify-around items-center">
+          {menuItems.map((item) => (
+            <Link
+              aria-disabled={item.disabled}
+              href={item.disabled ? "#" : item.url}
+              key={item.url}
+              className={`flex flex-col items-center ${
+                item.disabled
+                  ? "opacity-50 cursor-not-allowed"
+                  : "cursor-pointer"
+              }`}
+              onClick={(e) => item.disabled && e.preventDefault()}
+            >
+              <Image
+                src={item.icon}
+                alt={`${item.text} icon`}
+                width={24}
+                height={24}
+              />
+              <p className="text-xs text-foreground-menu mt-2">{item.text}</p>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </>
   );
 }
 
diff --git a/apps/web/wrangler.toml b/apps/web/wrangler.toml
index a2ac88d0..da9cd616 100644
--- a/apps/web/wrangler.toml
+++ b/apps/web/wrangler.toml
@@ -14,8 +14,8 @@ bucket_name = "dev-r2-anycontext"
 
 [[d1_databases]]
 binding = "DATABASE"
-database_name = "prod-d1-supermemory"
-database_id = "f527a727-c472-41d4-8eaf-3d7ba0f2f395"
+# database_name = "prod-d1-supermemory"
+# database_id = "f527a727-c472-41d4-8eaf-3d7ba0f2f395"
 
-# database_name = "dev-d1-anycontext"
-# database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
\ No newline at end of file
+database_name = "dev-d1-anycontext"
+database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
\ No newline at end of file