Create new sessions using Drawer form instead of separate page

src/components/Drawer.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+import Button, { ButtonColor } from './Button';
+
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, children }) => {
+  useEffect(() => {
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => {
+      window.removeEventListener('keydown', handleEsc);
+    };
+  }, [onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-end">
+      <div
+        className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      <div
+        className={classNames(
+          'dark:bg-nero-900 relative h-full w-80 transform space-y-6 bg-white p-6 shadow-lg transition-transform',
+          {
+            'translate-x-0': isOpen,
+            'translate-x-full': !isOpen,
+          },
+        )}
+      >
+        {children}
+
+        <Button onClick={onClose} color={ButtonColor.Secondary}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Drawer;

src/components/Input.tsx

@@ -8,7 +8,7 @@ const Input = ({
   label?: string;
 }) => {
   return (
-    <>
+    <div>
       {label && (
         <label className="block text-sm font-medium leading-6">{label}</label>
       )}
@@ -18,7 +18,7 @@ const Input = ({
           {...props}
         />
       </div>
-    </>
+    </div>
   );
 };
 

src/components/forms/CreateEstimationSessionForm.tsx

@@ -1,8 +1,16 @@
 import { useForm } from '@tanstack/react-form';
-import { useEstimationSessions } from '../lib/context/estimationSession';
-import { useUser } from '../lib/context/user';
+import { useEstimationSessions } from '../../lib/context/estimationSession';
+import { useUser } from '../../lib/context/user';
+import Input from '../Input';
+import Button from '../Button';
 
-const CreateEstimationSession = () => {
+interface CreateEstimationSessionFormProps {
+  onCreated: () => void;
+}
+
+const CreateEstimationSessionForm: React.FC<
+  CreateEstimationSessionFormProps
+> = ({ onCreated }) => {
   const user = useUser();
   const estimationSessions = useEstimationSessions();
   const form = useForm({
@@ -14,13 +22,17 @@ const CreateEstimationSession = () => {
         Name: value.name,
         UserId: user.current?.$id,
       });
+      onCreated();
     },
   });
 
   return (
     <>
-      <h1>Create Estimation Session</h1>
+      <h2 className="mb-4 text-xl font-bold">
+        Create a New Estimation Session
+      </h2>
       <form
+        className="space-y-6"
         onSubmit={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -30,8 +42,8 @@ const CreateEstimationSession = () => {
         <form.Field
           name="name"
           children={(field) => (
-            <input
-              placeholder="Name"
+            <Input
+              label="Name"
               name={field.name}
               value={field.state.value}
               onBlur={field.handleBlur}
@@ -39,10 +51,10 @@ const CreateEstimationSession = () => {
             />
           )}
         />
-        <button type="submit">Submit</button>
+        <Button type="submit">Create</Button>
       </form>
     </>
   );
 };
 
-export default CreateEstimationSession;
+export default CreateEstimationSessionForm;

src/components/index.ts

@@ -2,5 +2,15 @@ import Input from './Input';
 import Button, { ButtonColor } from './Button';
 import GridList from './GridList';
 import Card from './Card';
+import Drawer from './Drawer';
+import CreateEstimationSessionForm from './forms/CreateEstimationSessionForm';
 
-export { Input, Button, ButtonColor, GridList, Card };
+export {
+  Input,
+  Button,
+  ButtonColor,
+  GridList,
+  Card,
+  Drawer,
+  CreateEstimationSessionForm,
+};

src/main.tsx

@@ -11,7 +11,6 @@ import Home from './pages/Home';
 import { UserProvider } from './lib/context/user';
 import Login from './pages/Login';
 import EstimationSession from './pages/EstimationSession';
-import CreateEstimationSession from './pages/CreateEstimationSession';
 import { EstimationSessionProvider } from './lib/context/estimationSession';
 
 const rootRoute = createRootRoute();
@@ -28,12 +27,6 @@ const loginRoute = createRoute({
   getParentRoute: () => rootRoute,
 });
 
-const createEstimationSessionRoute = createRoute({
-  path: 'estimate/new',
-  component: CreateEstimationSession,
-  getParentRoute: () => rootRoute,
-});
-
 const estimationSessionRoute = createRoute({
   path: 'estimate/session/$sessionId',
   component: EstimationSession,
@@ -44,7 +37,6 @@ const router = createRouter({
   routeTree: rootRoute.addChildren([
     indexRoute,
     loginRoute,
-    createEstimationSessionRoute,
     estimationSessionRoute,
   ]),
 });

src/pages/Home.tsx

@@ -4,7 +4,13 @@ import './Home.css';
 import { getRouteApi, Link } from '@tanstack/react-router';
 import { useUser } from '../lib/context/user';
 import { useEstimationSessions } from '../lib/context/estimationSession';
-import { Card, GridList } from '../components';
+import {
+  Card,
+  CreateEstimationSessionForm,
+  Drawer,
+  GridList,
+} from '../components';
+import { useState } from 'react';
 
 const route = getRouteApi('/');
 
@@ -12,6 +18,7 @@ function Home() {
   const user = useUser();
   const navigate = route.useNavigate();
   const estimationSessions = useEstimationSessions();
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
 
   return (
     <>
@@ -29,9 +36,6 @@ function Home() {
         <li>
           <Link to="/login">Login</Link>
         </li>
-        <li>
-          <Link to="/estimate/new">Create Estimation Session</Link>
-        </li>
       </ul>
       <pre>User Id: {user.current?.$id}</pre>
 
@@ -53,13 +57,13 @@ function Home() {
               }}
             />
           )}
-          onAddItem={() =>
-            navigate({
-              to: '/estimate/new',
-            })
-          }
+          onAddItem={() => setDrawerOpen(true)}
         />
       </div>
+
+      <Drawer isOpen={isDrawerOpen} onClose={() => setDrawerOpen(false)}>
+        <CreateEstimationSessionForm onCreated={() => setDrawerOpen(false)} />
+      </Drawer>
     </>
   );
 }

src/pages/Login.tsx

@@ -25,41 +25,37 @@ const Login = () => {
 
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
           <form className="space-y-6">
-            <div>
-              <form.Field
-                name="email"
-                children={(field) => (
-                  <Input
-                    label="Email address"
-                    type="email"
-                    autoComplete="email"
-                    required
-                    name={field.name}
-                    value={field.state.value}
-                    onBlur={field.handleBlur}
-                    onChange={(e) => field.handleChange(e.target.value)}
-                  />
-                )}
-              />
-            </div>
+            <form.Field
+              name="email"
+              children={(field) => (
+                <Input
+                  label="Email address"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )}
+            />
 
-            <div>
-              <form.Field
-                name="password"
-                children={(field) => (
-                  <Input
-                    label="Password"
-                    type="password"
-                    autoComplete="current-password"
-                    required
-                    name={field.name}
-                    value={field.state.value}
-                    onBlur={field.handleBlur}
-                    onChange={(e) => field.handleChange(e.target.value)}
-                  />
-                )}
-              />
-            </div>
+            <form.Field
+              name="password"
+              children={(field) => (
+                <Input
+                  label="Password"
+                  type="password"
+                  autoComplete="current-password"
+                  required
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )}
+            />
 
             <div>
               <div className="flex items-center justify-between gap-4">