feat: render top bar

src/Bootstrap.tsx

@@ -1,9 +1,13 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Routes, Route } from 'react-router-dom'
 import { v4 as uuid } from 'uuid'
 import localforage from 'localforage'
+import AppBar from '@mui/material/AppBar'
+import Toolbar from '@mui/material/Toolbar'
 import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
 
+import { ShellContext } from 'ShellContext'
 import { Home } from 'pages/Home/'
 import { PublicRoom } from 'pages/PublicRoom/'
 import { UserSettings } from 'models/settings'
@@ -24,6 +28,9 @@ function Bootstrap({
   const [hasLoadedSettings, setHasLoadedSettings] = useState(false)
   const [settings, setSettings] = useState({ userId: getUuid() })
   const { userId } = settings
+  const [title, setTitle] = useState('')
+
+  const shellContextValue = useMemo(() => ({ setTitle }), [setTitle])
 
   useEffect(() => {
     ;(async () => {
@@ -48,19 +55,29 @@ function Bootstrap({
   }, [hasLoadedSettings, persistedStorage, settings, userId])
 
   return (
-    <Box className="Chitchatter" sx={{ height: '100vh' }}>
-      {hasLoadedSettings ? (
-        <Routes>
-          {['/', '/index.html'].map(path => (
-            <Route key={path} path={path} element={<Home />} />
-          ))}
-          <Route
-            path="/public/:roomId"
-            element={<PublicRoom userId={userId} />}
-          />
-        </Routes>
-      ) : null}
-    </Box>
+    <ShellContext.Provider value={shellContextValue}>
+      <Box
+        className="Chitchatter"
+        sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
+      >
+        <AppBar position="relative">
+          <Toolbar variant="regular">
+            <Typography sx={{ fontWeight: 'bold' }}>{title}</Typography>
+          </Toolbar>
+        </AppBar>
+        {hasLoadedSettings ? (
+          <Routes>
+            {['/', '/index.html'].map(path => (
+              <Route key={path} path={path} element={<Home />} />
+            ))}
+            <Route
+              path="/public/:roomId"
+              element={<PublicRoom userId={userId} />}
+            />
+          </Routes>
+        ) : null}
+      </Box>
+    </ShellContext.Provider>
   )
 }
 

src/ShellContext.ts

@@ -0,0 +1,9 @@
+import { createContext, Dispatch, SetStateAction } from 'react'
+
+interface ShellContextProps {
+  setTitle: Dispatch<SetStateAction<string>>
+}
+
+export const ShellContext = createContext<ShellContextProps>({
+  setTitle: () => {},
+})

src/components/Room/Room.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { v4 as uuid } from 'uuid'
 import Box from '@mui/material/Box'
 import FormControl from '@mui/material/FormControl'
-import Typography from '@mui/material/Typography'
 import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import Fab from '@mui/material/Fab'
@@ -99,7 +98,6 @@ export function Room({
 
   return (
     <Box className="h-full p-4 flex flex-col">
-      <Typography>Room ID: {roomId}</Typography>
       <ChatTranscript
         messageLog={messageLog}
         userId={userId}

src/pages/Home/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useContext, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Button from '@mui/material/Button'
 import Box from '@mui/material/Box'
@@ -7,10 +7,17 @@ import Typography from '@mui/material/Typography'
 import TextField from '@mui/material/TextField'
 import { v4 as uuid } from 'uuid'
 
+import { ShellContext } from 'ShellContext'
+
 export function Home() {
+  const { setTitle } = useContext(ShellContext)
   const [roomName, setRoomName] = useState(uuid())
   const navigate = useNavigate()
 
+  useEffect(() => {
+    setTitle('Chitchatter')
+  }, [setTitle])
+
   const handleRoomNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target
     setRoomName(value)
@@ -23,8 +30,7 @@ export function Home() {
 
   return (
     <Box className="Home">
-      <header className="max-w-3xl text-center mx-auto">
-        <Typography variant="h1">chitchatter</Typography>
+      <header className="max-w-3xl text-center mx-auto mt-8">
         <Typography variant="body1">
           This is a communication tool that is free, open source, and designed
           for maximum security. All communication between you and your online

src/pages/PublicRoom/PublicRoom.tsx

@@ -1,11 +1,20 @@
+import { useContext, useEffect } from 'react'
 import { Room } from 'components/Room'
 import { useParams } from 'react-router-dom'
 
+import { ShellContext } from 'ShellContext'
+
 interface PublicRoomProps {
   userId: string
 }
 
 export function PublicRoom({ userId }: PublicRoomProps) {
   const { roomId = '' } = useParams()
+  const { setTitle } = useContext(ShellContext)
+
+  useEffect(() => {
+    setTitle(`Room: ${roomId}`)
+  }, [roomId, setTitle])
+
   return <Room userId={userId} roomId={roomId} />
 }