adding search and better transitions and feel overall

packages/web/components/v2/CreateConversation.tsx

@@ -109,8 +109,8 @@ export default function CreateConversation() {
         </span>
 
         <input
-          className="p-3 rounded mt-2 bg-slate-50 border"
-          placeholder="engineering, hangout, kitchen..."
+          className="p-3 rounded mt-2 bg-slate-50 border placeholder-slate-300"
+          placeholder="coding and chilling room, birthdays, sprint 7"
         />
       </span>
 

packages/web/components/v2/Header.tsx

@@ -1,5 +1,4 @@
-// import Routes from "@nirvana/common/helpers/routes";
-import Routes from "@nirvana/common/helpers/routes";
+import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
 import { Menu, Dropdown, Avatar } from "antd";
 import { useRouter } from "next/router";
 import { useRef, useState } from "react";
@@ -50,6 +49,10 @@ export default function Header() {
 
   const selectSearch = () => {
     inputRef.current?.focus();
+    router.push({
+      pathname: Routes.home,
+      query: { page: QueryRoutes.search },
+    });
   };
 
   const updateInput = (e) => {
@@ -64,7 +67,7 @@ export default function Header() {
     }
 
     router.push({
-      query: { q: encodeURI(newSearchInput) },
+      query: { q: encodeURI(newSearchInput), page: QueryRoutes.search },
     });
   };
 

packages/web/components/v2/KeyboardShortcutHandler.tsx

@@ -1,4 +1,4 @@
-import Routes from "@nirvana/common/helpers/routes";
+import { QueryRoutes } from "@nirvana/common/helpers/routes";
 import { useRouter } from "next/router";
 import { GlobalHotKeys, KeyMap, configure } from "react-hotkeys";
 
@@ -11,7 +11,7 @@ export default function KeyboardShortcutHandler() {
 
   const handleEscape = () => {
     console.log("woah");
-    router.push(Routes.convos);
+    router.push({ query: { page: QueryRoutes.convos } });
   };
 
   const keyMap: KeyMap = {

packages/web/components/v2/Sidebar.tsx

@@ -1,3 +1,4 @@
+import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
 import { Divider, Avatar, Tooltip, Badge } from "antd";
 import { useRouter } from "next/router";
 import {
@@ -14,24 +15,23 @@ import {
   FaCircle,
 } from "react-icons/fa";
 import { HiSpeakerphone } from "react-icons/hi";
-import Routes from "@nirvana/common/helpers/routes";
-import { useRecoilValue } from "recoil";
-import { currPagePath } from "../../recoil/main";
 
 function Sidebar() {
   const router = useRouter();
+  const currPage = router.query.page;
 
-  const currPage = useRecoilValue(currPagePath);
-
-  const handleRoute = (route: Routes) => {
-    router.push(route);
+  const handleRoute = (queryRoute: QueryRoutes) => {
+    router.push({
+      pathname: Routes.home,
+      query: { page: queryRoute },
+    });
   };
 
   return (
     <div className="flex flex-col justify-start items-baseline w-[20rem]">
       {/* new button */}
       <button
-        onClick={() => handleRoute(Routes.createConvo)}
+        onClick={() => handleRoute(QueryRoutes.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" />
@@ -41,17 +41,19 @@ function Sidebar() {
       {/* navigation items */}
       <div className="flex flex-col my-5 space-y-5 w-full">
         <span
-          onClick={() => handleRoute(Routes.convos)}
+          onClick={() => handleRoute(QueryRoutes.convos)}
           className="flex flex-row items-center hover:cursor-pointer transition-all group"
         >
           <span
             className={`w-5 h-5 -translate-x-4 rounded bg-teal-600 ${
-              currPage == Routes.convos ? "visible" : "invisible"
+              currPage == QueryRoutes.convos ? "visible" : "invisible"
             }`}
           ></span>
           <FaStream
             className={`ml-8 mr-2 text-lg ${
-              currPage == Routes.convos ? "text-teal-600" : "text-slate-400"
+              currPage == QueryRoutes.convos
+                ? "text-teal-600"
+                : "text-slate-400"
             } group-hover:text-slate-600`}
           />
 
@@ -74,17 +76,19 @@ function Sidebar() {
         </span>
 
         <span
-          onClick={() => handleRoute(Routes.later)}
+          onClick={() => handleRoute(QueryRoutes.later)}
           className="flex flex-row items-center hover:cursor-pointer transition-all group"
         >
           <span
             className={`w-5 h-5 -translate-x-4 rounded bg-purple-500 ${
-              currPage == Routes.later ? "visible" : "invisible"
+              currPage == QueryRoutes.later ? "visible" : "invisible"
             }`}
           ></span>
           <FaRegClock
             className={`ml-8 mr-2 text-lg ${
-              currPage == Routes.later ? "text-purple-500" : "text-slate-400"
+              currPage == QueryRoutes.later
+                ? "text-purple-500"
+                : "text-slate-400"
             } group-hover:text-slate-600`}
           />
 
@@ -96,17 +100,19 @@ function Sidebar() {
         </span>
 
         <span
-          onClick={() => handleRoute(Routes.done)}
+          onClick={() => handleRoute(QueryRoutes.done)}
           className="flex flex-row items-center hover:cursor-pointer transition-all group"
         >
           <span
             className={`w-5 h-5 -translate-x-4 rounded bg-emerald-500 ${
-              currPage == Routes.done ? "visible" : "invisible"
+              currPage == QueryRoutes.done ? "visible" : "invisible"
             }`}
           ></span>
           <FaCheck
             className={`ml-8 mr-2 text-lg ${
-              currPage == Routes.done ? "text-emerald-500" : "text-slate-400"
+              currPage == QueryRoutes.done
+                ? "text-emerald-500"
+                : "text-slate-400"
             } group-hover:text-slate-600`}
           />
 
@@ -118,17 +124,19 @@ function Sidebar() {
         <Divider />
 
         <span
-          onClick={() => handleRoute(Routes.drawer)}
+          onClick={() => handleRoute(QueryRoutes.drawer)}
           className="flex flex-row items-center hover:cursor-pointer transition-all group"
         >
           <span
             className={`w-5 h-5 -translate-x-4 rounded bg-yellow-500 ${
-              currPage == Routes.drawer ? "visible" : "invisible"
+              currPage == QueryRoutes.drawer ? "visible" : "invisible"
             }`}
           ></span>
           <FaImages
             className={`ml-8 mr-2 text-lg ${
-              currPage == Routes.drawer ? "text-yellow-500" : "text-slate-400"
+              currPage == QueryRoutes.drawer
+                ? "text-yellow-500"
+                : "text-slate-400"
             } group-hover:text-slate-600`}
           />