Fixed.

my-bois/src/components/Bois.jsx

@@ -41,6 +41,7 @@ export const CentreBoi = () => {
   const {
     state, program, setProgram, bike, setBike, bikes, programs,
     start, pause, stop, create, workoutStatus,
+    hidden, setHidden,
   } = useContext(StatusContext);
   const [options, setOptions] = useState(null);
   const [current, setCurrent] = useState(0);
@@ -112,6 +113,17 @@ export const CentreBoi = () => {
     }
   });
 
+  useKey("H", () => showHide());
+  useKey("h", () => showHide());
+
+  function showHide() {
+    setHidden(!hidden);
+  }
+
+  if (hidden) {
+    return null;
+  }
+
   if (state === "started" && workoutStatus !== null) {
     const {minutes, seconds, calories} = workoutStatus;
     const diff = calculateDiff(program, minutes, seconds, calories);

my-bois/src/components/Contexts.jsx

@@ -37,6 +37,7 @@ export const StatusContextProvider = ({children}) => {
   const [state, setState] = useState("offline");
   const {milestones, prevDiff, prevLongDiff, msDispatch} = useMilestones();
   const [socket, setSocket] = useState(null);
+  const [hidden, setHidden] = useState(false);
 
   useEffect(() => {
     if (programs === null) {
@@ -161,6 +162,7 @@ export const StatusContextProvider = ({children}) => {
       setBike, setProgram,
       create, resume, start, pause, stop,
       programs, bikes,
+      hidden, setHidden,
     }}>
       {children}
     </StatusContext.Provider>