Adding keyboard shortcuts, responsive design that 99% don't need but still

3 files changed, 149 insertions, 74 deletions

diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx
index b84d3c7d..91cad757 100644
--- a/apps/web/app/(auth)/signin/page.tsx
+++ b/apps/web/app/(auth)/signin/page.tsx
@@ -9,12 +9,12 @@ export const runtime = "edge";
 async function Signin() {
   return (
     <div className="flex items-center justify-between min-h-screen">
-      <div className="relative w-1/2 flex items-center min-h-screen bg-secondary p-8">
+      <div className="relative w-full lg:w-1/2 flex items-center justify-center lg:justify-start min-h-screen bg-secondary p-8">
         <div className="absolute top-0 left-0 p-8 text-white inline-flex gap-2 items-center">
           <Image
             src={Logo}
             alt="SuperMemory logo"
-            className="hover:brightness-125 duration-200"
+            className="brightness-100"
           />
           <span className="text-xl">SuperMemory.ai</span>
         </div>
@@ -28,7 +28,7 @@ async function Signin() {
           </p>
           <div className="flex items-center gap-4">
             <div
-              className={`transition-width z-20 rounded-2xl bg-gradient-to-br from-gray-200/70 to-transparent p-[0.7px] duration-300 ease-in-out w-3/4`}
+              className="w-3/4"
             >
               <form
                 action={async () => {
@@ -40,35 +40,30 @@ async function Signin() {
               >
                 <button
                   type="submit"
-                  className={`relative text-white transition-width flex justify-between w-full items-center rounded-lg bg-[#37485E] px-6 py-4 outline-none duration-300 focus:outline-none`}
+                  className={`text-white flex gap-3 justify-center bg-tranparent hover:border-transparent hover:bg-[#37485E] border-[#37485E] border-2 w-full py-3 items-center rounded-lg duration-100 hover:rounded-3xl`}
                 >
-                  <div className=""/>
-
-                  <div className="-translate-y-0">
+                  <div className="-translate-y-[1px]">
                     <Google />
                   </div>
-                  <span className="text-xl font-medium tracking-wide relative w-full self-start">
+                  <span className="text-xl font-medium tracking-wide relative ">
                     Continue with Google
                   </span>
                 </button>
               </form>
             </div>
           </div>
-          <div className="text-slate-500 mt-16">
-            By continuing, you agree to the
-            <Link href="/terms" className="text-slate-200">
-              {" "}
+          <div className="text-slate-100 absolute bottom-4  lg:left-8 lg:-translate-x-0 left-1/2 -translate-x-1/2 ">
+            <Link href="/terms" className="text-slate-300">
               Terms of Service
-            </Link>{" "}
-            and
-            <Link href="/privacy" className="text-slate-200">
+            </Link> |
+            <Link href="/privacy" className="text-slate-300">
               {" "}
               Privacy Policy
             </Link>
           </div>
         </div>
       </div>
-      <div className="w-1/2 flex flex-col items-center justify-center min-h-screen">
+      <div className="w-1/2 hidden lg:flex flex-col items-center justify-center min-h-screen">
         <span className="text-3xl leading-relaxed italic mb-8">
           Ready for your{" "}
           <span className="text-white font-bold">Second brain</span>?
diff --git a/apps/web/app/(dash)/dynamicisland.tsx b/apps/web/app/(dash)/dynamicisland.tsx
index 4da3298e..cfe799af 100644
--- a/apps/web/app/(dash)/dynamicisland.tsx
+++ b/apps/web/app/(dash)/dynamicisland.tsx
@@ -4,7 +4,7 @@ import { AddIcon } from "@repo/ui/icons";
 import Image from "next/image";
 
 import { AnimatePresence, useMotionValueEvent, useScroll } from "framer-motion";
-import {  useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { motion } from "framer-motion";
 import { Label } from "@repo/ui/shadcn/label";
 import { Input } from "@repo/ui/shadcn/input";
@@ -54,19 +54,36 @@ export default DynamicIsland;
 
 function DynamicIslandContent() {
   const [show, setshow] = useState(true);
-  function cancelfn(){
+  function cancelfn() {
     setshow(true);
   }
+
+  const lastBtn = useRef<string>();
+  useEffect(() => {
+    console.log(show);
+  }, [show]);
+
+  useEffect(() => {
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        setshow(true);
+      }
+      if (e.key === "a" && lastBtn.current === "Alt") {
+        setshow(false);
+      }
+      lastBtn.current = e.key;
+    });
+  }, []);
   return (
     <>
       {show ? (
         <div
           onClick={() => setshow(!show)}
-          className="bg-[#1F2428] px-3 w-[2.23rem] overflow-hidden hover:w-[8.7rem] whitespace-nowrap py-2 rounded-3xl  transition-[width]" 
+          className="bg-[#1F2428] px-3 w-[2.23rem] overflow-hidden hover:w-[9.2rem] whitespace-nowrap py-2 rounded-3xl  transition-[width] cursor-pointer"
         >
           <div className="flex gap-4 items-center">
-          <Image src={AddIcon} alt="Add icon" />
-          Add Content
+            <Image src={AddIcon} alt="Add icon" />
+            Add Content
           </div>
         </div>
       ) : (
@@ -80,25 +97,44 @@ function DynamicIslandContent() {
 
 const fakeitems = ["spaces", "page", "note"];
 
-function ToolBar({cancelfn}: {cancelfn: ()=> void}) {
-
+function ToolBar({ cancelfn }: { cancelfn: () => void }) {
   const [index, setIndex] = useState(0);
   return (
-    <div className="flex flex-col items-center">
-      <div className="bg-[#1F2428] py-[.35rem] px-[.6rem] rounded-2xl">
-        <HoverEffect
-          items={fakeitems}
-          index={index}
-          indexFn={(i) => setIndex(i)}
-        />
-      </div>
-      { index === 0 ?
-        <SpaceForm cancelfn={cancelfn} /> :
-        index === 1 ?
-        <PageForm  cancelfn={cancelfn} /> :
-        <NoteForm cancelfn={cancelfn} />
-      }
-    </div>
+    <AnimatePresence mode="wait">
+      <motion.div
+        initial={{
+          opacity: 0,
+          y: 20,
+        }}
+        animate={{
+          y: 0,
+          opacity: 1,
+        }}
+        exit={{
+          opacity: 0,
+          y: 20,
+        }}
+        transition={{
+          duration: 0.2,
+        }}
+        className="flex flex-col items-center"
+      >
+        <div className="bg-[#1F2428] py-[.35rem] px-[.6rem] rounded-2xl">
+          <HoverEffect
+            items={fakeitems}
+            index={index}
+            indexFn={(i) => setIndex(i)}
+          />
+        </div>
+        {index === 0 ? (
+          <SpaceForm cancelfn={cancelfn} />
+        ) : index === 1 ? (
+          <PageForm cancelfn={cancelfn} />
+        ) : (
+          <NoteForm cancelfn={cancelfn} />
+        )}
+      </motion.div>
+    </AnimatePresence>
   );
 }
 
@@ -112,7 +148,7 @@ export const HoverEffect = ({
   indexFn: (i: number) => void;
 }) => {
   return (
-    <div className={"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}>
+    <div className={"flex"}>
       {items.map((item, idx) => (
         <button
           key={idx}
@@ -143,55 +179,96 @@ export const HoverEffect = ({
   );
 };
 
-function SpaceForm({cancelfn}: {cancelfn: ()=> void}) {
+function SpaceForm({ cancelfn }: { cancelfn: () => void }) {
   return (
     <div className="bg-[#1F2428] px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
-      <div >
-        <Label className="text-[#858B92]" htmlFor="name">Name</Label>
-        <Input  className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
+      <div>
+        <Label className="text-[#858B92]" htmlFor="name">
+          Name
+        </Label>
+        <Input
+          className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
+          id="name"
+        />
       </div>
       <div className="flex justify-between">
         <a className="text-blue-500" href="">
           pull from store
         </a>
-        <div onClick={cancelfn} className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer">cancel</div>
+        <div
+          onClick={cancelfn}
+          className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer"
+        >
+          cancel
+        </div>
       </div>
     </div>
   );
 }
 
-function PageForm({cancelfn}: {cancelfn: ()=> void}) {
+function PageForm({ cancelfn }: { cancelfn: () => void }) {
   return (
     <div className="bg-[#1F2428] px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
-    <div >
-      <Label className="text-[#858B92]" htmlFor="name">Space</Label>
-      <Input  className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
-    </div>
-    <div >
-      <Label className="text-[#858B92]" htmlFor="name">Page Url</Label>
-      <Input  className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" 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>
+        <Label className="text-[#858B92]" htmlFor="name">
+          Space
+        </Label>
+        <Input
+          className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
+          id="name"
+        />
+      </div>
+      <div>
+        <Label className="text-[#858B92]" htmlFor="name">
+          Page Url
+        </Label>
+        <Input
+          className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
+          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>
-  </div>
   );
 }
 
-function NoteForm({cancelfn}: {cancelfn: ()=> void}) {
+function NoteForm({ cancelfn }: { cancelfn: () => void }) {
   return (
     <div className="bg-[#1F2428] px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
-    <div >
-      <Label className="text-[#858B92]" htmlFor="name">Space</Label>
-      <Input  className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
-    </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>
+        <Label className="text-[#858B92]" htmlFor="name">
+          Space
+        </Label>
+        <Input
+          className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
+          id="name"
+        />
+      </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>
-  </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index 89f17a11..dfd60b96 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -23,21 +23,24 @@ function Menu() {
   ];
 
   return (
-    <div className="absolute h-full p-4 flex items-center top-0 left-0">
+    <div className="absolute h-screen pb-[25vh] w-full p-4 flex items-end justify-end lg:justify-start lg:items-center top-0 left-0 pointer-events-none">
       <div className="">
-        <div className="group inline-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">
+        <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}
               key={item.url}
-              className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90"
+              className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90 justify-end md: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"
+                className="hover:brightness-125 duration-200 "
               />
-              <p className="opacity-0 duration-200 group-hover:opacity-100">
+              <p className="hidden md:block opacity-0 duration-200 group-hover:opacity-100">
                 {item.text}
               </p>
             </Link>