Added mobile

apps/web/src/routes/app/home.tsx

@@ -70,9 +70,7 @@ function AddConversationButton() {
 
   return (
     <Dialog>
-      <DialogTrigger asChild>
-        <Button>Add Conversation</Button>
-      </DialogTrigger>
+      <DialogTrigger render={<Button>Add Conversation</Button>} />
       <DialogContent>
         <DialogHeader>
           <DialogTitle>New Conversation</DialogTitle>
@@ -98,9 +96,7 @@ function AddConversationButton() {
             placeholder="Enter username..."
           />
           <div className="flex w-full justify-end gap-1">
-            <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DialogClose>
+            <DialogClose render={<Button variant="outline">Cancel</Button>} />
             <Button disabled={loading} type="submit">
               {loading && <Loader2 className="animate-spin" />} Continue
             </Button>

apps/web/src/routes/app/layout.tsx

@@ -1,7 +1,10 @@
 import { type ReactNode } from "react";
 
 import Sidebar from "@/components/sidebar";
-import Navbar from "@/components/navbar";
+import Navbar, { MobileNavbar } from "@/components/navbar";
+
+import { SidebarProvider } from "@tensamin/ui/cmp/sidebar";
+import { useIsMobile, cn } from "@tensamin/ui/utils";
 
 import { motion } from "framer-motion";
 
@@ -11,6 +14,8 @@ import { motion } from "framer-motion";
  * @returns unknown.
  */
 export default function Layout(props: { children: ReactNode }) {
+  const isMobile = useIsMobile();
+
   return (
     <motion.div
       className="w-full h-full flex bg-sidebar"
@@ -26,13 +31,21 @@ export default function Layout(props: { children: ReactNode }) {
         },
       }}
     >
-      <Sidebar />
-      <div className="w-full h-full flex flex-col">
-        <Navbar />
-        <div className="bg-background h-full w-full rounded-tl-3xl border-t border-l">
-          {props.children}
+      <SidebarProvider>
+        <Sidebar />
+        <div className="w-full h-full flex flex-col">
+          {!isMobile && <Navbar />}
+          <div
+            className={cn(
+              "bg-background h-full w-full",
+              !isMobile && "rounded-tl-3xl border-t border-l",
+            )}
+          >
+            {props.children}
+          </div>
+          {isMobile && <MobileNavbar />}
         </div>
-      </div>
+      </SidebarProvider>
     </motion.div>
   );
 }

apps/web/src/routes/layout.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState, type ReactNode } from "react";
 
 import Storage from "@tensamin/storage/context";
 import Crypto from "@tensamin/crypto/context";
+import Mobile from "@tensamin/mobile/context";
 
 import LegalWrapper from "@/features/legal/screen";
 
@@ -10,6 +11,7 @@ import { TooltipProvider } from "@tensamin/ui/cmp/tooltip";
 
 import { useStorage } from "@tensamin/storage/context";
 import { useLocation, useNavigate } from "@tanstack/react-router";
+import { useIsMobile } from "@tensamin/ui/utils";
 
 /**
  * Executes Layout.
@@ -20,6 +22,8 @@ export default function Layout(props: { children: ReactNode }) {
   const [pixelRatio, setPixelRatio] = useState(devicePixelRatio);
   const [visible, setVisible] = useState(false);
 
+  const isMobile = useIsMobile();
+
   useEffect(() => {
     const handleResize = () => {
       setPixelRatio(devicePixelRatio);
@@ -35,7 +39,9 @@ export default function Layout(props: { children: ReactNode }) {
     <>
       <div className="fixed top-0 left-0 z-100 w-screen h-screen flex flex-col justify-center items-center pointer-events-none select-none">
         {visible && (
-          <div className="bg-card border p-1 text-xs">{pixelRatio}</div>
+          <div className="bg-card border p-1 text-xs">
+            {Math.round(pixelRatio)}
+          </div>
         )}
 
         {/* Todo: Make this nicer */}
@@ -45,12 +51,14 @@ export default function Layout(props: { children: ReactNode }) {
           </div>
         )}
       </div>
-      <Toaster />
+      <Toaster position={isMobile ? "top-center" : "bottom-right"} />
       <TooltipProvider>
         <Storage>
           <LoginWrapper>
             <LegalWrapper>
-              <Crypto>{props.children}</Crypto>
+              <Crypto>
+                <Mobile>{props.children}</Mobile>
+              </Crypto>
             </LegalWrapper>
           </LoginWrapper>
         </Storage>