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

2 files changed, 138 insertions, 58 deletions

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>