From 8e764a5524f6c74ad078d42119efd285041e221b Mon Sep 17 00:00:00 2001
From: Olivier Gagnon <oli.gagnon4418@gmail.com>
Date: Thu, 16 Sep 2021 21:49:38 -0400
Subject: [PATCH] re-add badges

---
 src/Sidebar/ui/SidebarRoot.tsx   | 18 ++++++++++++------
 src/Terminal/ui/TerminalRoot.tsx | 16 ++++++++++++----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/Sidebar/ui/SidebarRoot.tsx b/src/Sidebar/ui/SidebarRoot.tsx
index 94770cb3a..c53494826 100644
--- a/src/Sidebar/ui/SidebarRoot.tsx
+++ b/src/Sidebar/ui/SidebarRoot.tsx
@@ -140,6 +140,8 @@ export function SidebarRoot(props: IProps): React.ReactElement {
 
   const flashTutorial = ITutorial.currStep === iTutorialSteps.WorldDescription;
 
+  const augmentationCount = props.player.queuedAugmentations.length;
+  const invitationsCount = props.player.factionInvitations.length;
   const programCount = getAvailableCreatePrograms(props.player).length;
   const canCreateProgram =
     programCount > 0 ||
@@ -435,7 +437,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
                   onClick={clickCreateProgram}
                 >
                   <ListItemIcon>
-                    <Badge badgeContent={4} color="primary">
+                    <Badge badgeContent={programCount > 0 ? programCount : undefined} color="error">
                       <BugReportIcon color={activeTab !== "CreateProgram" ? "secondary" : "primary"} />
                     </Badge>
                   </ListItemIcon>
@@ -485,7 +487,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
                 onClick={clickFactions}
               >
                 <ListItemIcon>
-                  <ContactsIcon color={activeTab !== "Factions" ? "secondary" : "primary"} />
+                  <Badge badgeContent={invitationsCount !== 0 ? invitationsCount : undefined} color="error">
+                    <ContactsIcon color={activeTab !== "Factions" ? "secondary" : "primary"} />
+                  </Badge>
                 </ListItemIcon>
                 <ListItemText>
                   <Typography color={activeTab !== "Factions" ? "secondary" : "primary"}>Factions</Typography>
@@ -502,10 +506,12 @@ export function SidebarRoot(props: IProps): React.ReactElement {
                 onClick={clickAugmentations}
               >
                 <ListItemIcon>
-                  <DoubleArrowIcon
-                    style={{ transform: "rotate(-90deg)" }}
-                    color={activeTab !== "Augmentations" ? "secondary" : "primary"}
-                  />
+                  <Badge badgeContent={augmentationCount !== 0 ? augmentationCount : undefined} color="error">
+                    <DoubleArrowIcon
+                      style={{ transform: "rotate(-90deg)" }}
+                      color={activeTab !== "Augmentations" ? "secondary" : "primary"}
+                    />
+                  </Badge>
                 </ListItemIcon>
                 <ListItemText>
                   <Typography color={activeTab !== "Augmentations" ? "secondary" : "primary"}>Augmentations</Typography>
diff --git a/src/Terminal/ui/TerminalRoot.tsx b/src/Terminal/ui/TerminalRoot.tsx
index 29adfcd77..3cc00a346 100644
--- a/src/Terminal/ui/TerminalRoot.tsx
+++ b/src/Terminal/ui/TerminalRoot.tsx
@@ -60,15 +60,23 @@ export function TerminalRoot({ terminal, engine, player }: IProps): React.ReactE
     return () => clearInterval(id);
   }, []);
 
-  const hook = scrollHook.current;
-  if (hook !== null) {
-    setTimeout(() => hook.scrollIntoView(true), 50);
+  function doScroll(): void {
+    const hook = scrollHook.current;
+    if (hook !== null) {
+      setTimeout(() => hook.scrollIntoView(true), 50);
+    }
   }
 
+  doScroll();
+
+  useEffect(() => {
+    setTimeout(doScroll, 50);
+  }, []);
+
   const classes = useStyles();
   return (
     <>
-      <Box width="100%" minHeight="100vh" px={1} justifyContent={"flex-end"}>
+      <Box width="100%" minHeight="100vh" px={1} display={"flex"} alignItems={"flex-end"}>
         <List classes={{ root: classes.list }}>
           {terminal.outputHistory.map((item, i) => {
             if (item instanceof Output)