feat: add pro upgrade page

src/common/components/ProBadge.jsx

@@ -1,11 +1,30 @@
 import {Badge} from '@mantine/core';
-import React from 'react';
+import React, {use} from 'react';
+import {PageTypes} from '@/constants';
 import formatMessage from '@/i18n/index';
+import {PageContext} from '@/modules/settings/contexts/PageContext';
+import styles from './ProBadge.module.css';
 
 // Props (including ref) pass through to Badge so a wrapping Tooltip can anchor to it.
-export default function ProBadge(props) {
+export default function ProBadge({clickable = true, ...props}) {
+  const pageContext = use(PageContext);
+
+  if (!clickable || pageContext == null) {
+    return (
+      <Badge color="indigo" variant="elevated" size="lg" {...props}>
+        {formatMessage({defaultMessage: 'Pro'})}
+      </Badge>
+    );
+  }
+
+  function handleClick(event) {
+    event.stopPropagation();
+    pageContext.setPage(PageTypes.PRO_UPGRADE);
+    pageContext.setSidenavOpen(false);
+  }
+
   return (
-    <Badge color="indigo" variant="elevated" size="lg" {...props}>
+    <Badge color="indigo" variant="elevated" size="lg" {...props} className={styles.clickable} onClick={handleClick}>
       {formatMessage({defaultMessage: 'Pro'})}
     </Badge>
   );

src/common/components/ProBadge.module.css

@@ -0,0 +1,12 @@
+.clickable {
+  cursor: pointer;
+  transition: filter 120ms ease;
+}
+
+.clickable:hover {
+  filter: brightness(1.1);
+}
+
+.clickable:active {
+  filter: brightness(1.2);
+}

src/constants.js

@@ -155,6 +155,7 @@ export const PageTypes = {
   HIGHLIGHT_KEYWORDS: 4,
   BLACKLIST_KEYWORDS: 5,
   SELF_BOT_COMMANDS: 6,
+  PRO_UPGRADE: 7,
 };
 
 export const PageDecendants = {

src/modules/settings/components/Footer.jsx

@@ -1,7 +1,9 @@
-import {Anchor, Text} from '@mantine/core';
-import React from 'react';
-import {EXT_VER, ExternalLinks} from '@/constants';
+import {Anchor, Text, Tooltip} from '@mantine/core';
+import React, {use} from 'react';
+import usePortalRef from '@/common/hooks/PortalRef';
+import {EXT_VER, ExternalLinks, PageTypes} from '@/constants';
 import formatMessage from '@/i18n/index';
+import {PageContext} from '@/modules/settings/contexts/PageContext';
 import styles from './Footer.module.css';
 
 const CURRENT_YEAR = new Date().getFullYear();
@@ -47,6 +49,9 @@ function LinkColumn({title, links}) {
 }
 
 function Footer() {
+  const {setPage} = use(PageContext);
+  const portalRef = usePortalRef();
+
   return (
     <div className={styles.root}>
       <div className={styles.columns}>
@@ -61,9 +66,17 @@ function Footer() {
             {year: CURRENT_YEAR}
           )}
         </Text>
-        <Text c="dimmed" className={styles.version} order={4}>
-          {VERSION_TEXT}
-        </Text>
+        <Tooltip
+          openDelay={200}
+          withArrow
+          arrowSize={8}
+          radius="md"
+          label={<Text size="md">{formatMessage({defaultMessage: 'Read Changelog'})}</Text>}
+          portalProps={{target: portalRef.current}}>
+          <Anchor component="button" type="button" c="dimmed" onClick={() => setPage(PageTypes.CHANGELOG)}>
+            {VERSION_TEXT}
+          </Anchor>
+        </Tooltip>
       </div>
     </div>
   );

src/modules/settings/components/SettingsModal.jsx

@@ -9,6 +9,7 @@ import {PageContext} from '@/modules/settings/contexts/PageContext';
 import BlacklistKeywords from '@/modules/settings/pages/BlacklistKeywords';
 import Changelog from '@/modules/settings/pages/Changelog';
 import HighlightKeywords from '@/modules/settings/pages/HighlightKeywords';
+import ProUpgrade from '@/modules/settings/pages/ProUpgrade';
 import SelfBotCommands from '@/modules/settings/pages/SelfBotCommands';
 import Settings from '@/modules/settings/pages/Settings';
 import UserSettings from '@/modules/settings/pages/UserSettings';
@@ -49,6 +50,8 @@ function Page({page, handleSettingRefCallback}) {
       return <BlacklistKeywords />;
     case PageTypes.SELF_BOT_COMMANDS:
       return <SelfBotCommands />;
+    case PageTypes.PRO_UPGRADE:
+      return <ProUpgrade />;
     case PageTypes.SETTINGS:
       return <Settings handleSettingRefCallback={handleSettingRefCallback} />;
     case PageTypes.USER_SETTINGS:

src/modules/settings/components/SideNavigation.jsx

@@ -1,6 +1,6 @@
 import {
   faArrowRight as faPanelLeftClose,
-  faScroll,
+  faFire,
   faTriangleExclamation,
   faUserGear,
 } from '@fortawesome/free-solid-svg-icons';
@@ -111,7 +111,7 @@ function UserSettingsNavigationButton({active, onClick}) {
         bttvUser == null ? (
           <Icon icon={faTriangleExclamation} className={styles.warningIcon} />
         ) : isUserPro(bttvUser) ? (
-          <ProBadge />
+          <ProBadge clickable={false} />
         ) : null
       }>
       {avatarSrc != null ? (
@@ -131,6 +131,7 @@ function UserSettingsNavigationButton({active, onClick}) {
 
 function SideNavigation({open, setOpen}) {
   const {page, setPage, handleGotoSettingPanel} = use(PageContext);
+  const bttvUser = useAuthStore(useShallow((state) => state.user));
   const activePanelId = useSettingsNavigationStore((state) => state.activePanelId);
   const close = useCallback(() => setOpen(false), [setOpen]);
   const containerRef = useRef(null);
@@ -231,12 +232,15 @@ function SideNavigation({open, setOpen}) {
         </Scrollbar>
         <div className={styles.userSettingsContainer}>
           <NavigationButton
-            variant="transparent"
-            className={styles.settingNavigationButton}
-            active={page === PageTypes.CHANGELOG}
-            onClick={() => handleNavigate(PageTypes.CHANGELOG)}
-            label={formatMessage({defaultMessage: 'Changelog'})}>
-            <Icon icon={faScroll} className={styles.navigationIcon} />
+            className={classNames(clickableStyles.clickableContainer, styles.categoryButton)}
+            active={page === PageTypes.PRO_UPGRADE}
+            onClick={() => handleNavigate(PageTypes.PRO_UPGRADE)}
+            label={
+              isUserPro(bttvUser)
+                ? formatMessage({defaultMessage: 'BetterTTV Pro'})
+                : formatMessage({defaultMessage: 'Upgrade to Pro'})
+            }>
+            <Icon icon={faFire} className={classNames(styles.navigationIcon, styles.fireIcon)} />
           </NavigationButton>
           <UserSettingsNavigationButton
             active={page === PageTypes.USER_SETTINGS}

src/modules/settings/components/SideNavigation.module.css

@@ -55,6 +55,13 @@
   color: var(--mantine-color-yellow-5);
 }
 
+.fireIcon {
+  /* the faFire glyph extends above its declared viewBox (y starts at -32), which the svg's
+     default overflow clips into a flat-topped flame */
+  overflow: visible;
+  color: light-dark(var(--mantine-color-orange-5), var(--mantine-color-orange-6));
+}
+
 .navigationButton {
   font-weight: 500;
   height: 48px;