From 2489ec43fe348785bd562eb1dd69c4107135e3bb Mon Sep 17 00:00:00 2001
From: omuretsu <84951833+Snarling@users.noreply.github.com>
Date: Sun, 4 Dec 2022 23:04:33 -0500
Subject: [PATCH] Sidebar tweaks

---
 .gitignore                          |   1 +
 src/Sidebar/ui/SidebarAccordion.tsx |  11 ++-
 src/Sidebar/ui/SidebarItem.tsx      |  18 ++---
 src/Sidebar/ui/SidebarRoot.tsx      | 100 ++++++++++------------------
 4 files changed, 49 insertions(+), 81 deletions(-)

diff --git a/.gitignore b/.gitignore
index 3931325ad..b6311a1a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ Netburner.txt
 .idea/
 *.bundle.*
 index.html
+tsdoc-metadata.json
diff --git a/src/Sidebar/ui/SidebarAccordion.tsx b/src/Sidebar/ui/SidebarAccordion.tsx
index 4e505caba..046739f29 100644
--- a/src/Sidebar/ui/SidebarAccordion.tsx
+++ b/src/Sidebar/ui/SidebarAccordion.tsx
@@ -17,7 +17,7 @@ interface IProps {
   clickPage: (page: Page) => void;
   flash: Page | null;
   items: (IItemProps | boolean)[];
-  icon: React.ReactElement;
+  icon: React.ReactElement["type"];
   sidebarOpen: boolean;
   classes: any;
 }
@@ -44,10 +44,7 @@ function getClickFn(toWrap: (page: Page) => void, page: Page) {
 // This can't be usefully memoized, because props.items is a new array every time.
 export function SidebarAccordion(props: IProps): React.ReactElement {
   const [open, setOpen] = useState(true);
-  // Obnoxious, because we can't modify props at all.
   const li_classes = useMemo(() => ({ root: props.classes.listitem }), [props.classes.listitem]);
-  const icon = Object.assign({}, props.icon);
-  icon.props = Object.assign({ color: "primary" }, icon.props);
 
   // Explicitily useMemo() to save rerendering deep chunks of this tree.
   // memo() can't be (easily) used on components like <List>, because the
@@ -58,13 +55,15 @@ export function SidebarAccordion(props: IProps): React.ReactElement {
         () => (
           <ListItem classes={li_classes} button onClick={() => setOpen((open) => !open)}>
             <ListItemIcon>
-              <Tooltip title={!props.sidebarOpen ? props.key_ : ""} children={icon} />
+              <Tooltip title={!props.sidebarOpen ? props.key_ : ""}>
+                <props.icon color={"primary"} />
+              </Tooltip>
             </ListItemIcon>
             <ListItemText primary={<Typography>{props.key_}</Typography>} />
             {open ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
           </ListItem>
         ),
-        [li_classes, props.sidebarOpen, props.key_, open, props.icon.type],
+        [li_classes, props.sidebarOpen, props.key_, open, props.icon],
       )}
       <Collapse in={open} timeout="auto" unmountOnExit>
         {props.items.map((x) => {
diff --git a/src/Sidebar/ui/SidebarItem.tsx b/src/Sidebar/ui/SidebarItem.tsx
index 8ce637388..581cef0b9 100644
--- a/src/Sidebar/ui/SidebarItem.tsx
+++ b/src/Sidebar/ui/SidebarItem.tsx
@@ -10,7 +10,7 @@ import type { Page } from "../../ui/Router";
 
 export interface ICreateProps {
   key_: Page;
-  icon: React.ReactElement;
+  icon: React.ReactElement["type"];
   count?: number;
   active?: boolean;
 }
@@ -23,15 +23,7 @@ export interface IProps extends ICreateProps {
 }
 
 export const SidebarItem = memo(function (props: IProps): React.ReactElement {
-  // Use icon as a template. (We can't modify props)
-  const icon: React.ReactElement = {
-    type: props.icon.type,
-    key: props.icon.key,
-    props: {
-      color: props.flash ? "error" : !props.active ? "secondary" : "primary",
-      ...props.icon.props,
-    },
-  };
+  const color = props.flash ? "error" : props.active ? "primary" : "secondary";
   return (
     <ListItem
       classes={{ root: props.classes.listitem }}
@@ -42,11 +34,13 @@ export const SidebarItem = memo(function (props: IProps): React.ReactElement {
     >
       <ListItemIcon>
         <Badge badgeContent={(props.count ?? 0) > 0 ? props.count : undefined} color="error">
-          <Tooltip title={!props.sidebarOpen ? props.key_ : ""} children={icon} />
+          <Tooltip title={!props.sidebarOpen ? props.key_ : ""}>
+            <props.icon color={color} />
+          </Tooltip>
         </Badge>
       </ListItemIcon>
       <ListItemText>
-        <Typography color={props.flash ? "error" : !props.active ? "secondary" : "primary"} children={props.key_} />
+        <Typography color={color} children={props.key_} />
       </ListItemText>
     </ListItem>
   );
diff --git a/src/Sidebar/ui/SidebarRoot.tsx b/src/Sidebar/ui/SidebarRoot.tsx
index a5b30b926..f07fc448a 100644
--- a/src/Sidebar/ui/SidebarRoot.tsx
+++ b/src/Sidebar/ui/SidebarRoot.tsx
@@ -55,38 +55,9 @@ import { InvitationsSeen } from "../../Faction/ui/FactionsRoot";
 import { hash } from "../../hash/hash";
 import { Locations } from "../../Locations/Locations";
 
-// All icon instances need to be constant, so they have stable object identity.
-// Otherwise, the memoization of all the higher-level components doesn't work.
-const computerIcon = <ComputerIcon />;
-const lastPageIcon = <LastPageIcon />;
-const createIcon = <CreateIcon />;
-const storageIcon = <StorageIcon />;
-const bugReportIcon = <BugReportIcon />;
-const equalizerIcon = <EqualizerIcon />;
-const contactsIcon = <ContactsIcon />;
-const doubleArrowIcon = <DoubleArrowIcon style={{ transform: "rotate(-90deg)" }} />;
-const accountTreeIcon = <AccountTreeIcon />;
-const peopleAltIcon = <PeopleAltIcon />;
-const locationCityIcon = <LocationCityIcon />;
-const airplanemodeActiveIcon = <AirplanemodeActiveIcon />;
-const workIcon = <WorkIcon />;
-const trendingUpIcon = <TrendingUpIcon />;
-const formatBoldIcon = <FormatBoldIcon />;
-const businessIcon = <BusinessIcon />;
-const sportsMmaIcon = <SportsMmaIcon />;
-const checkIcon = <CheckIcon />;
-const helpIcon = <HelpIcon />;
-const settingsIcon = <SettingsIcon />;
-const developerBoardIcon = <DeveloperBoardIcon />;
-const emojiEventsIcon = <EmojiEventsIcon />;
-const accountBoxIcon = <AccountBoxIcon />;
-const publicIcon = <PublicIcon />;
-const liveHelpIcon = <LiveHelpIcon />;
-const chevronLeftIcon = <ChevronLeftIcon color="primary" />;
-const chevronRightIcon = <ChevronRightIcon color="primary" />;
-
-// Use constant Dividers just for performance
-const divider = <Divider />;
+const RotatedDoubleArrowIcon = (props: { color: "primary" | "secondary" | "error" }) => (
+  <DoubleArrowIcon color={props.color} style={{ transform: "rotate(-90deg)" }} />
+);
 
 const openedMixin = (theme: Theme): CSSObject => ({
   width: theme.spacing(31),
@@ -295,6 +266,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
       return !old;
     });
   const li_classes = useMemo(() => ({ root: classes.listitem }), [classes.listitem]);
+  const ChevronOpenClose = open ? ChevronLeftIcon : ChevronRightIcon;
 
   // Explicitily useMemo() to save rerendering deep chunks of this tree.
   // memo() can't be (easily) used on components like <List>, because the
@@ -304,7 +276,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
       {useMemo(
         () => (
           <ListItem classes={li_classes} button onClick={toggleDrawer}>
-            <ListItemIcon>{!open ? chevronRightIcon : chevronLeftIcon}</ListItemIcon>
+            <ListItemIcon>
+              <ChevronOpenClose color={"primary"} />
+            </ListItemIcon>
             <ListItemText
               primary={
                 <Tooltip title={hash()}>
@@ -316,88 +290,88 @@ export function SidebarRoot(props: IProps): React.ReactElement {
         ),
         [li_classes, open],
       )}
-      {divider}
+      <Divider />
       <List>
         <SidebarAccordion
           key_="Hacking"
           page={props.page}
           clickPage={clickPage}
           flash={flash}
-          icon={computerIcon}
+          icon={ComputerIcon}
           sidebarOpen={open}
           classes={classes}
           items={[
-            { key_: Page.Terminal, icon: lastPageIcon },
-            { key_: Page.ScriptEditor, icon: createIcon },
-            { key_: Page.ActiveScripts, icon: storageIcon },
-            { key_: Page.CreateProgram, icon: bugReportIcon, count: programCount },
-            canStaneksGift && { key_: Page.StaneksGift, icon: developerBoardIcon },
+            { key_: Page.Terminal, icon: LastPageIcon },
+            { key_: Page.ScriptEditor, icon: CreateIcon },
+            { key_: Page.ActiveScripts, icon: StorageIcon },
+            { key_: Page.CreateProgram, icon: BugReportIcon, count: programCount },
+            canStaneksGift && { key_: Page.StaneksGift, icon: DeveloperBoardIcon },
           ]}
         />
-        {divider}
+        <Divider />
         <SidebarAccordion
           key_="Character"
           page={props.page}
           clickPage={clickPage}
           flash={flash}
-          icon={accountBoxIcon}
+          icon={AccountBoxIcon}
           sidebarOpen={open}
           classes={classes}
           items={[
-            { key_: Page.Stats, icon: equalizerIcon },
+            { key_: Page.Stats, icon: EqualizerIcon },
             canOpenFactions && {
               key_: Page.Factions,
-              icon: contactsIcon,
+              icon: ContactsIcon,
               active: [Page.Factions as Page, Page.Faction].includes(props.page),
               count: invitationsCount,
             },
             canOpenAugmentations && {
               key_: Page.Augmentations,
-              icon: doubleArrowIcon,
+              icon: RotatedDoubleArrowIcon,
               count: augmentationCount,
             },
-            { key_: Page.Hacknet, icon: accountTreeIcon },
-            canOpenSleeves && { key_: Page.Sleeves, icon: peopleAltIcon },
+            { key_: Page.Hacknet, icon: AccountTreeIcon },
+            canOpenSleeves && { key_: Page.Sleeves, icon: PeopleAltIcon },
           ]}
         />
-        {divider}
+        <Divider />
         <SidebarAccordion
           key_="World"
           page={props.page}
           clickPage={clickPage}
           flash={flash}
-          icon={publicIcon}
+          icon={PublicIcon}
           sidebarOpen={open}
           classes={classes}
           items={[
             {
               key_: Page.City,
-              icon: locationCityIcon,
+              icon: LocationCityIcon,
               active: [Page.City as Page, Page.Grafting, Page.Location].includes(props.page),
             },
-            { key_: Page.Travel, icon: airplanemodeActiveIcon },
-            canJob && { key_: Page.Job, icon: workIcon },
-            canStockMarket && { key_: Page.StockMarket, icon: trendingUpIcon },
-            canBladeburner && { key_: Page.Bladeburner, icon: formatBoldIcon },
-            canCorporation && { key_: Page.Corporation, icon: businessIcon },
-            canGang && { key_: Page.Gang, icon: sportsMmaIcon },
+            { key_: Page.Travel, icon: AirplanemodeActiveIcon },
+            canJob && { key_: Page.Job, icon: WorkIcon },
+            canStockMarket && { key_: Page.StockMarket, icon: TrendingUpIcon },
+            canBladeburner && { key_: Page.Bladeburner, icon: FormatBoldIcon },
+            canCorporation && { key_: Page.Corporation, icon: BusinessIcon },
+            canGang && { key_: Page.Gang, icon: SportsMmaIcon },
           ]}
         />
-        {divider}
+        <Divider />
         <SidebarAccordion
           key_="Help"
           page={props.page}
           clickPage={clickPage}
           flash={flash}
-          icon={liveHelpIcon}
+          icon={LiveHelpIcon}
           sidebarOpen={open}
           classes={classes}
           items={[
-            { key_: Page.Milestones, icon: checkIcon },
-            { key_: Page.Tutorial, icon: helpIcon },
-            { key_: Page.Achievements, icon: emojiEventsIcon },
-            { key_: Page.Options, icon: settingsIcon },
-            process.env.NODE_ENV === "development" && { key_: Page.DevMenu, icon: developerBoardIcon },
+            { key_: Page.Milestones, icon: CheckIcon },
+            { key_: Page.Tutorial, icon: HelpIcon },
+            { key_: Page.Achievements, icon: EmojiEventsIcon },
+            { key_: Page.Options, icon: SettingsIcon },
+            process.env.NODE_ENV === "development" && { key_: Page.DevMenu, icon: DeveloperBoardIcon },
           ]}
         />
       </List>