New source found from dndbeyond.com

ddb_main/tools/js/CharacterSheet/containers/mobile/MainMobile/MainMobile.tsx

@@ -1,10 +1,12 @@
-import { visuallyHidden } from "@mui/utils";
 import { useSelector } from "react-redux";
+import { useSearchParams } from "react-router-dom";
 
 import {
   AbilitySummary,
   CampaignSummary,
   SavingThrowsSummary,
+  ThemedLongRestSvg,
+  ThemedShortRestSvg,
 } from "@dndbeyond/character-components/es";
 import {
   AbilityManager,
@@ -12,8 +14,10 @@ import {
   rulesEngineSelectors,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { Button } from "~/components/Button";
 import { useSidebar } from "~/contexts/Sidebar";
 import { useAbilities } from "~/hooks/useAbilities";
+import a11yStyles from "~/styles/accessibility.module.css";
 
 import { getDataOriginComponentInfo } from "../../../../../../subApps/sheet/components/Sidebar/helpers/paneUtils";
 import { PaneComponentEnum } from "../../../../../../subApps/sheet/components/Sidebar/types";
@@ -26,6 +30,7 @@ import MobileDivider from "../../../components/MobileDivider";
 import SavingThrowsDetails from "../../../components/SavingThrowsDetails";
 import Senses from "../../../components/Senses";
 import SubsectionMobile from "../../../components/SubsectionMobile";
+import styles from "./styles.module.css";
 
 export default function MainMobile() {
   const abilities = useAbilities();
@@ -35,18 +40,18 @@ export default function MainMobile() {
   const preferences = useSelector(rulesEngineSelectors.getCharacterPreferences);
   const savingThrowDiceAdjustments = useSelector(
     rulesEngineSelectors.getSavingThrowDiceAdjustments
-  ); // TODO: GFS move to mangers
+  );
   const situationalBonusSavingThrowsLookup = useSelector(
     rulesEngineSelectors.getSituationalBonusSavingThrowsLookup
-  ); // TODO: GFS move to mangers
+  );
   const passivePerception = useSelector(
     rulesEngineSelectors.getPassivePerception
-  ); // TODO: GFS move to mangers
+  );
   const passiveInvestigation = useSelector(
     rulesEngineSelectors.getPassiveInvestigation
-  ); // TODO: GFS move to mangers
-  const passiveInsight = useSelector(rulesEngineSelectors.getPassiveInsight); // TODO: GFS move to mangers
-  const senses = useSelector(rulesEngineSelectors.getSenseInfo); // TODO: GFS move to mangers
+  );
+  const passiveInsight = useSelector(rulesEngineSelectors.getPassiveInsight);
+  const senses = useSelector(rulesEngineSelectors.getSenseInfo);
   const ruleData = useSelector(rulesEngineSelectors.getRuleData);
   const campaign = useSelector(rulesEngineSelectors.getCampaign);
   const theme = useSelector(rulesEngineSelectors.getCharacterTheme);
@@ -56,6 +61,9 @@ export default function MainMobile() {
     characterRollContextSelectors.getCharacterRollContext
   );
   const gameLog = useSelector(appEnvSelectors.getGameLog);
+  const [searchParams] = useSearchParams();
+  const isVttView = searchParams.get("view") === "vtt";
+  const isReadonly = useSelector(appEnvSelectors.getIsReadonly);
 
   const handleSensesManageShow = (): void => {
     paneHistoryStart(PaneComponentEnum.SENSE_MANAGE);
@@ -90,6 +98,20 @@ export default function MainMobile() {
     paneHistoryStart(PaneComponentEnum.CAMPAIGN);
   };
 
+  const handleShortResetClick = (evt: React.MouseEvent): void => {
+    evt.stopPropagation();
+    evt.nativeEvent.stopImmediatePropagation();
+
+    paneHistoryStart(PaneComponentEnum.SHORT_REST);
+  };
+
+  const handleLongResetClick = (evt: React.MouseEvent): void => {
+    evt.stopPropagation();
+    evt.nativeEvent.stopImmediatePropagation();
+
+    paneHistoryStart(PaneComponentEnum.LONG_REST);
+  };
+
   return (
     <SubsectionMobile name="Main">
       <div
@@ -97,7 +119,31 @@ export default function MainMobile() {
           theme.isDarkMode ? "ct-main-mobile--dark-mode" : ""
         }`}
       >
-        {campaign && (
+        {isVttView && (
+          <div className={styles.restButtonsGroup}>
+            <Button
+              variant="outline"
+              onClick={handleShortResetClick}
+              themed
+              size="x-small"
+              className={styles.restButton}
+            >
+              <ThemedShortRestSvg theme={theme} />
+              <span>Short Rest</span>
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleLongResetClick}
+              themed
+              size="x-small"
+              className={styles.restButton}
+            >
+              <ThemedLongRestSvg theme={theme} />
+              <span>Long Rest</span>
+            </Button>
+          </div>
+        )}
+        {!isVttView && campaign && !isReadonly && (
           <CampaignSummary
             campaign={campaign}
             onCampaignShow={handleCampaignShow}
@@ -111,7 +157,7 @@ export default function MainMobile() {
           />
         )}
         <section className="ct-main-mobile__abilities">
-          <h2 style={visuallyHidden}>Ability Scores</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Ability Scores</h2>
           {abilities.map((ability) => (
             <div className="ct-main-mobile__ability" key={ability.getStatKey()}>
               <AbilitySummary
@@ -135,7 +181,7 @@ export default function MainMobile() {
             theme.isDarkMode ? "ct-main-mobile__saving-throws--dark-mode" : ""
           }`}
         >
-          <h2 style={visuallyHidden}>Saving Throws</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Saving Throws</h2>
           <SavingThrowsSummary
             abilities={abilities}
             situationalBonusSavingThrowsLookup={
@@ -156,17 +202,18 @@ export default function MainMobile() {
         </section>
         <MobileDivider isEnd={true} theme={theme} />
         <MobileDivider
-          label="Senses"
+          label="Passive Senses"
           onClick={handleSensesManageShow}
           theme={theme}
         />
-        <h2 style={visuallyHidden}>Senses</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>Passive Senses</h2>
         <Senses
           senses={senses}
           theme={theme}
           passiveInsight={Number(passiveInsight)}
           passiveInvestigation={Number(passiveInvestigation)}
           passivePerception={Number(passivePerception)}
+          rowStyle="minimal"
           onClick={handleSensesManageShow}
         />
         <MobileDivider isEnd={true} theme={theme} />