adding separate page for create a conversation

packages/web/components/v2/CreateConversation.tsx

@@ -0,0 +1,7 @@
+export default function CreateConversation() {
+  return (
+    <div className="mx-auto my-auto">
+      <input className="p-2 rounded border" />
+    </div>
+  );
+}

packages/web/components/v2/Header.tsx

@@ -43,9 +43,9 @@ export default function Header() {
     </Menu>
   );
 
-  const inputRef = useRef<HTMLInputElement>();
+  const inputRef = useRef<HTMLInputElement | undefined>();
   const selectSearch = () => {
-    inputRef.current.focus();
+    inputRef.current?.focus();
   };
 
   const keyMap: KeyMap = {

packages/web/components/v2/Sidebar.tsx

@@ -30,7 +30,10 @@ function Sidebar() {
   return (
     <div className="flex flex-col justify-start items-baseline w-[20rem]">
       {/* new button */}
-      <button className="rounded-full flex flex-row items-center px-5 py-2 ml-8 shadow-lg bg-white space-x-2">
+      <button
+        onClick={() => handleRoute(Routes.createConvo)}
+        className="rounded-full flex flex-row items-center px-5 py-2 ml-8 shadow-lg bg-white space-x-2"
+      >
         <FaPlus className="text-teal-600 text-lg" />
         <span className="text-slate-500 font-semibold">New</span>
       </button>