New source found from dndbeyond.com

ddb_main/tools/js/CharacterSheet/containers/CharacterHeaderMobile/CharacterHeaderMobile.tsx

@@ -1,5 +1,8 @@
-import React from "react";
+import clsx from "clsx";
+import React, { FC } from "react";
 import { connect, DispatchProp } from "react-redux";
+import { useSearchParams } from "react-router-dom";
+import { AnyAction } from "redux";
 
 import {
   rulesEngineSelectors,
@@ -9,19 +12,27 @@ import {
   Constants,
   HitPointInfo,
   RuleData,
+  CharacterTheme,
+  CampaignDataContract,
 } from "@dndbeyond/character-rules-engine/es";
+import ListTimeline from "@dndbeyond/fontawesome-cache/svgs/light/list-timeline.svg";
+import { GameLogNotificationWrapper } from "@dndbeyond/game-log-components";
 
 import { useSidebar } from "~/contexts/Sidebar";
 import { PaneInfo } from "~/contexts/Sidebar/Sidebar";
 import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
+import { WatchTourDialog } from "~/subApps/sheet/components/WatchTourDialog";
+import { GameLogState } from "~/tools/js/Shared/stores/typings";
 
 import { appEnvSelectors } from "../../../Shared/selectors";
 import StatusSummaryMobile from "../../components/StatusSummaryMobile";
-import WatchTourDialog from "../../components/WatchTourDialog";
 import { SheetAppState } from "../../typings";
 import CharacterHeaderInfo from "../CharacterHeaderInfo";
+import styles from "./styles.module.css";
 
-interface Props extends DispatchProp {
+// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
+// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
+interface Props extends DispatchProp<AnyAction> {
   hitPointInfo: HitPointInfo;
   fails: number;
   successes: number;
@@ -31,63 +42,100 @@ interface Props extends DispatchProp {
   isReadonly: boolean;
   status: CharacterStatusSlug | null;
   paneHistoryStart: PaneInfo["paneHistoryStart"];
+  gameLog?: GameLogState;
+  theme: CharacterTheme;
+  campaign: CampaignDataContract | null;
 }
-class CharacterHeaderMobile extends React.PureComponent<Props> {
-  handleHealthSummaryClick = (): void => {
-    const { paneHistoryStart, isReadonly } = this.props;
-
+const CharacterHeaderMobile: FC<Props> = ({
+  paneHistoryStart,
+  dispatch,
+  hitPointInfo,
+  fails,
+  successes,
+  deathCause,
+  inspiration,
+  ruleData,
+  isReadonly,
+  status,
+  gameLog,
+  theme,
+  campaign,
+}) => {
+  const [searchParams] = useSearchParams();
+  const isVttView = searchParams.get("view") === "vtt";
+  const handleHealthSummaryClick = (): void => {
     if (!isReadonly) {
       paneHistoryStart(PaneComponentEnum.HEALTH_MANAGE);
     }
   };
-
-  handleInspirationClick = (): void => {
-    const { inspiration, dispatch } = this.props;
-
+  const handleInspirationClick = (): void => {
     dispatch(characterActions.inspirationSet(!inspiration));
   };
+  const handleGameLogClick = (evt: React.MouseEvent): void => {
+    evt.stopPropagation();
+    evt.nativeEvent.stopImmediatePropagation();
+    // Assuming dispatch is available in props or context
+    paneHistoryStart(PaneComponentEnum.GAME_LOG);
+  };
 
-  render() {
-    const {
-      hitPointInfo,
-      fails,
-      successes,
-      deathCause,
-      inspiration,
-      ruleData,
-      isReadonly,
-      status,
-    } = this.props;
-
-    return (
-      <div className="ct-character-header-mobile">
-        <div className="ct-character-header-mobile__group ct-character-header-mobile__group-tidbits">
-          <CharacterHeaderInfo />
-        </div>
-        <div className="ct-character-header-mobile__group ct-character-header-mobile__group--gap" />
-        {isReadonly && status === CharacterStatusSlug.PREMADE ? (
-          <div>
-            <WatchTourDialog />
-          </div>
-        ) : (
-          <div className="ct-character-header-mobile__group ct-character-header-mobile__group--summary">
-            <StatusSummaryMobile
-              hitPointInfo={hitPointInfo}
-              fails={fails}
-              successes={successes}
-              deathCause={deathCause}
-              inspiration={inspiration}
-              ruleData={ruleData}
-              onHealthClick={this.handleHealthSummaryClick}
-              onInspirationClick={this.handleInspirationClick}
-              isInteractive={!isReadonly}
-            />
-          </div>
-        )}
+  return (
+    <div
+      className={clsx([
+        "ct-character-header-mobile",
+        isVttView && "ct-character-header-mobile--vttView",
+      ])}
+    >
+      <div
+        className={clsx([
+          "ct-character-header-mobile__group",
+          "ct-character-header-mobile__group-tidbits",
+          isVttView && "ct-character-header-mobile__group-tidbits--vttView",
+        ])}
+      >
+        <CharacterHeaderInfo isVttView={isVttView} />
       </div>
-    );
-  }
-}
+      {!isVttView && !isReadonly && (
+        <div className={styles.campaignButtonContainer}>
+          <GameLogNotificationWrapper
+            themeColor={theme.themeColor}
+            gameLogIsOpen={gameLog?.isOpen ?? false}
+            notificationOnClick={handleGameLogClick}
+          >
+            <div
+              role="button"
+              aria-roledescription="Game Log"
+              className={clsx(styles.campaignButtonGroup)}
+              onClick={handleGameLogClick}
+            >
+              <div className={clsx(styles.campaignButton)}>
+                <ListTimeline className={clsx(styles.campaignButtonIcon)} />
+              </div>
+            </div>
+          </GameLogNotificationWrapper>
+        </div>
+      )}
+      {isReadonly && status === CharacterStatusSlug.PREMADE ? (
+        <div>
+          <WatchTourDialog />
+        </div>
+      ) : (
+        <div className="ct-character-header-mobile__group ct-character-header-mobile__group--summary">
+          <StatusSummaryMobile
+            hitPointInfo={hitPointInfo}
+            fails={fails}
+            successes={successes}
+            deathCause={deathCause}
+            inspiration={inspiration}
+            ruleData={ruleData}
+            onHealthClick={handleHealthSummaryClick}
+            onInspirationClick={handleInspirationClick}
+            isInteractive={!isReadonly}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
 
 function mapStateToProps(state: SheetAppState) {
   return {
@@ -99,6 +147,9 @@ function mapStateToProps(state: SheetAppState) {
     deathCause: rulesEngineSelectors.getDeathCause(state),
     isReadonly: appEnvSelectors.getIsReadonly(state),
     status: characterSelectors.getStatusSlug(state),
+    theme: rulesEngineSelectors.getCharacterTheme(state),
+    gameLog: appEnvSelectors.getGameLog(state),
+    campaign: rulesEngineSelectors.getCampaign(state),
   };
 }