feat(web-ui): add fab for creating new chat (#849)

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>

Author: johanbook

services/web-ui/public/locales/en/chat-create.json

@@ -3,5 +3,6 @@
     "button": "Create",
     "error": "There was an error when creating the chat",
     "success": "Chat created"
-  }
+  },
+  "header": "Start a new chat"
 }

services/web-ui/public/locales/sv/chat-create.json

@@ -3,5 +3,6 @@
     "button": "Skapa chat",
     "error": "Något gick fel när din chat skulle skapas",
     "success": "Chat skapad"
-  }
+  },
+  "header": "Start a new chat"
 }

services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.nav.tsx

@@ -1,6 +1,8 @@
 import { ReactElement, ReactNode } from "react";
+import { Link } from "react-router-dom";
 
-import { Box, Typography } from "@mui/material";
+import { Edit } from "@mui/icons-material";
+import { Box, Fab, Typography } from "@mui/material";
 
 import { useTranslation } from "src/core/i18n";
 
@@ -17,6 +19,15 @@ export function ChatListPageNav({
     <Box sx={{ pt: 3, px: 3 }}>
       <Typography variant="h5">{t("header")}</Typography>
 
+      <Fab
+        component={Link}
+        color="primary"
+        sx={{ position: "absolute", bottom: 70, right: 10 }}
+        to="/chat/create"
+      >
+        <Edit />
+      </Fab>
+
       {children}
     </Box>
   );

services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.nav.tsx

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 
-import { Box } from "@mui/material";
+import { NavLayout } from "src/components/layout";
+import { useTranslation } from "src/core/i18n";
 
 interface CreateChatPageNavProps {
   children: ReactNode;
@@ -9,5 +10,11 @@ interface CreateChatPageNavProps {
 export function CreateChatPageNav({
   children,
 }: CreateChatPageNavProps): ReactElement {
-  return <Box sx={{ p: 2 }}>{children}</Box>;
+  const { t } = useTranslation("chat-create");
+
+  return (
+    <NavLayout header={t("header")} linkText="Back" to="/chat">
+      {children}
+    </NavLayout>
+  );
 }

services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.skeleton.tsx

@@ -1,5 +1,11 @@
 import { ReactElement } from "react";
 
+import { Skeleton } from "@mui/material";
+
 export function CreateChatPageSkeleton(): ReactElement {
-  return <>Loading...</>;
+  return (
+    <>
+      <Skeleton />
+    </>
+  );
 }