fixing up routing to make it more friendly

packages/desktop/src/tree/Navbar.tsx

@@ -7,10 +7,12 @@ import KeyboardShortcutLabel from '../subcomponents/KeyboardShortcutLabel';
 import { KeyboardShortcuts } from '../util/keyboard';
 import NirvanaLogo from '../subcomponents/NirvanaLogo';
 import { blueGrey } from '@mui/material/colors';
+import useRouter from '../providers/RouterProvider';
 import useSearch from '../providers/SearchProvider';
 import useTerminal from './Terminal';
 
 const Navbar = () => {
+  const { handleSetPage } = useRouter();
   const { searchQuery, omniSearch, conversationResults, userResults, isSearching } = useSearch();
 
   const searchRef = useRef<HTMLInputElement>(null);
@@ -79,7 +81,11 @@ const Navbar = () => {
       </Stack>
 
       <Tooltip title={'Group conversation'}>
-        <IconButton color="default" size={'small'}>
+        <IconButton
+          color="default"
+          size={'small'}
+          onClick={handleSetPage('START_NEW_CONVERSATION')}
+        >
           <FiUsers />
         </IconButton>
       </Tooltip>

packages/desktop/src/tree/NewConversationDialog.tsx

@@ -18,7 +18,6 @@ import {
 } from '@mui/material';
 import React, { HTMLAttributes, useCallback, useEffect, useState } from 'react';
 import { useDebounce, useKeyPressEvent, useToggle } from 'react-use';
-import useRouter, { EPage } from '../providers/RouterProvider';
 
 import CircularProgress from '@mui/material/CircularProgress';
 import { FiX } from 'react-icons/fi';
@@ -28,10 +27,11 @@ import UserDetailRow from '../subcomponents/UserDetailRow';
 import { blueGrey } from '@mui/material/colors';
 import toast from 'react-hot-toast';
 import useAuth from '../providers/AuthProvider';
+import useRouter from '../providers/RouterProvider';
 import useSearch from '../providers/SearchProvider';
 
 export default function NewConversationDialog() {
-  const { page, setPage } = useRouter();
+  const { page, handleSetPage } = useRouter();
 
   const { user } = useAuth();
 
@@ -102,12 +102,8 @@ export default function NewConversationDialog() {
     setIsSubmitting(false);
   }, [selectedUsers, setConversationName, conversationName, setSelectedUsers, setIsSubmitting]);
 
-  const handleClose = useCallback(() => {
-    setPage(EPage.WELCOME);
-  }, [setPage]);
-
   return (
-    <Dialog fullScreen open={page === EPage.START_NEW_CONVERSATION} onClose={handleClose}>
+    <Dialog fullScreen open={page === 'START_NEW_CONVERSATION'} onClose={handleSetPage('WELCOME')}>
       <Container
         maxWidth={false}
         sx={{
@@ -121,7 +117,10 @@ export default function NewConversationDialog() {
           position: 'relative',
         }}
       >
-        <IconButton sx={{ position: 'absolute', top: 10, right: 10 }} onClick={handleClose}>
+        <IconButton
+          sx={{ position: 'absolute', top: 10, right: 10 }}
+          onClick={handleSetPage('WELCOME')}
+        >
           <FiX />
         </IconButton>
 
@@ -174,7 +173,7 @@ export default function NewConversationDialog() {
           )}
 
           <Stack justifyContent={'flex-end'} direction={'row'} spacing={2}>
-            <Button onClick={handleClose} variant={'text'}>
+            <Button onClick={handleSetPage('WELCOME')} variant={'text'}>
               Cancel
             </Button>
             <Button

packages/desktop/src/tree/Terminal.tsx

@@ -1,6 +1,5 @@
 import { Box, Container, Grid } from '@mui/material';
 
-import { EPage } from '../providers/RouterProvider';
 import Navbar from './Navbar';
 import NewConversationDialog from './NewConversationDialog';
 import React from 'react';