context added

2 files changed, 31 insertions, 37 deletions

diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
index aa72a48e..e9a7071d 100644
--- a/apps/web/src/components/Main.tsx
+++ b/apps/web/src/components/Main.tsx
@@ -8,6 +8,14 @@ import useViewport from "@/hooks/useViewport";
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 
+function supportsDVH() {
+  try {
+    return CSS.supports("height: 100dvh");
+  } catch {
+    return false;
+  }
+}
+
 export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   const [hide, setHide] = useState(false);
   const [value, setValue] = useState("");
@@ -16,19 +24,9 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   const textArea = useRef<HTMLTextAreaElement>(null);
   const main = useRef<HTMLDivElement>(null);
 
-  console.log("main px", sidebarOpen);
-
   useEffect(() => {
     function onResize() {
       if (!main.current || !window.visualViewport) return;
-      // setValue(
-      //   (prev) =>
-      //     prev +
-      //     " changed to " +
-      //     window.visualViewport?.height +
-      //     " " +
-      //     window.innerHeight,
-      // );
       if (
         window.visualViewport.height < window.innerHeight + 20 &&
         window.visualViewport.height > window.innerHeight - 20
@@ -52,20 +50,16 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
       data-sidebar-open={sidebarOpen}
       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: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"
-          : CSS.supports("height: 100dvh")
-            ? "pb-[13vh]"
-            : "pb-[20vh]",
+        "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]",
       )}
     >
-      <h1 className="text-rgray-11 mt-auto w-full text-center text-3xl">
+      <h1 className="text-rgray-11 mt-auto w-full text-center text-3xl md:mt-0">
         Ask your Second brain
       </h1>
       <Textarea2
         ref={textArea}
-        className="mt-auto h-max max-h-[30em] min-h-[3em] resize-y flex-row items-start justify-center overflow-auto py-5 md:h-[20vh] md:resize-none md:flex-col md:items-center md:justify-center md:p-2 md:pb-2 md:pt-2"
+        className="mt-auto h-max max-h-[30em] min-h-[3em] resize-y flex-row items-start justify-center overflow-auto py-5 md:mt-0 md:h-[20vh] md:resize-none md:flex-col md:items-center md:justify-center md:p-2 md:pb-2 md:pt-2"
         textAreaProps={{
           placeholder: "Ask your SuperMemory...",
           className:
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index 55211f84..9c2cfd63 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -1,11 +1,11 @@
-'use client';
-import { StoredContent } from '@/server/db/schema';
-import { MemoryIcon } from '../../assets/Memories';
-import { Trash2, User2 } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
-import { MemoriesBar } from './MemoriesBar';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Bin } from '@/assets/Bin';
+"use client";
+import { StoredContent } from "@/server/db/schema";
+import { MemoryIcon } from "../../assets/Memories";
+import { Trash2, User2 } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { MemoriesBar } from "./MemoriesBar";
+import { AnimatePresence, motion } from "framer-motion";
+import { Bin } from "@/assets/Bin";
 
 export type MenuItem = {
   icon: React.ReactNode | React.ReactNode[];
@@ -16,7 +16,7 @@ export type MenuItem = {
 const menuItemsTop: Array<MenuItem> = [
   {
     icon: <MemoryIcon className="h-10 w-10" />,
-    label: 'Memories',
+    label: "Memories",
     content: MemoriesBar,
   },
 ];
@@ -24,18 +24,18 @@ const menuItemsTop: Array<MenuItem> = [
 const menuItemsBottom: Array<MenuItem> = [
   {
     icon: <Trash2 strokeWidth={1.3} className="h-6 w-6" />,
-    label: 'Trash',
+    label: "Trash",
   },
   {
     icon: <User2 strokeWidth={1.3} className="h-6 w-6" />,
-    label: 'Profile',
+    label: "Profile",
   },
 ];
 
 export default function Sidebar({
-  selectChange,
+  onSelectChange,
 }: {
-  selectChange?: (selectedItem: string | null) => Promise<void>;
+  onSelectChange?: (selectedItem: string | null) => void;
 }) {
   const menuItems = [...menuItemsTop, ...menuItemsBottom];
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
@@ -44,7 +44,7 @@ export default function Sidebar({
     menuItems.find((i) => i.label === selectedItem)?.content ?? (() => <></>);
 
   useEffect(() => {
-    void selectChange?.(selectedItem);
+    void onSelectChange?.(selectedItem);
   }, [selectedItem]);
 
   return (
@@ -53,7 +53,7 @@ export default function Sidebar({
         <div className="bg-rgray-2 border-r-rgray-6 relative z-[50] flex h-full w-full flex-col items-center justify-center border-r px-2 py-5 ">
           <MenuItem
             item={{
-              label: 'Memories',
+              label: "Memories",
               icon: <MemoryIcon className="h-10 w-10" />,
               content: MemoriesBar,
             }}
@@ -65,7 +65,7 @@ export default function Sidebar({
 
           <MenuItem
             item={{
-              label: 'Trash',
+              label: "Trash",
               icon: <Bin id="trash" className="z-[300] h-7 w-7" />,
             }}
             selectedItem={selectedItem}
@@ -74,7 +74,7 @@ export default function Sidebar({
           />
           <MenuItem
             item={{
-              label: 'Profile',
+              label: "Profile",
               icon: <User2 strokeWidth={1.3} className="h-7 w-7" />,
             }}
             selectedItem={selectedItem}
@@ -117,11 +117,11 @@ const MenuItem = ({
 export function SubSidebar({ children }: { children?: React.ReactNode }) {
   return (
     <motion.div
-      initial={{ opacity: 0, x: '-100%' }}
+      initial={{ opacity: 0, x: "-100%" }}
       animate={{ opacity: 1, x: 0 }}
       exit={{
         opacity: 0,
-        x: '-100%',
+        x: "-100%",
         transition: { delay: 0.2 },
       }}
       transition={{